|
|
@@ -35,6 +35,15 @@
|
|
|
class="el-form-box"
|
|
|
>
|
|
|
<headerTitle title="基本信息">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-view"
|
|
|
+ class="ele-btn-icon"
|
|
|
+ @click="previewModal"
|
|
|
+ >
|
|
|
+ 预览
|
|
|
+ </el-button>
|
|
|
<el-button
|
|
|
size="small"
|
|
|
type="primary"
|
|
|
@@ -156,231 +165,504 @@
|
|
|
<div slot="footer" class="footer">
|
|
|
<el-button @click="cancel">返回</el-button>
|
|
|
</div>
|
|
|
+
|
|
|
+ <ele-modal
|
|
|
+ custom-class="ele-dialog-form long-dialog-form"
|
|
|
+ :centered="true"
|
|
|
+ v-if="previewvisible"
|
|
|
+ :visible.sync="previewvisible"
|
|
|
+ title="报价单预览"
|
|
|
+ :append-to-body="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :maxable="true"
|
|
|
+ :resizable="true"
|
|
|
+ width="60%"
|
|
|
+ @close="previewvisible = false"
|
|
|
+ >
|
|
|
+ <div class="quotation-preview">
|
|
|
+ <!-- 1. 报价单标题 -->
|
|
|
+ <div class="quotation-title">报价单</div>
|
|
|
+
|
|
|
+ <!-- 2. 询价方&报价方信息表格 -->
|
|
|
+ <table class="info-table">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="label">询价方（公司名称）：</td>
|
|
|
+ <td>{{ detailData.opportunityName || form.contactName }}</td>
|
|
|
+ <td class="label">报价方（公司名称）：</td>
|
|
|
+ <td>{{ form.quoteName }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">联系人：</td>
|
|
|
+ <td>{{ form.contactLinkName }}</td>
|
|
|
+ <td class="label">授权议价人：</td>
|
|
|
+ <td>{{ form.quoteLinkName }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">电 话：</td>
|
|
|
+ <td>{{ form.contactTel }}</td>
|
|
|
+ <td class="label">电 话：</td>
|
|
|
+ <td>{{ form.quoteTel }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">传 真：</td>
|
|
|
+ <td>{{ form.contactFax }}</td>
|
|
|
+ <td class="label">传 真：</td>
|
|
|
+ <td>{{ form.quoteFax }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">E-mail：</td>
|
|
|
+ <td>{{ form.contactEmail }}</td>
|
|
|
+ <td class="label">E-mail：</td>
|
|
|
+ <td>{{ form.quoteEmail }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">地 址：</td>
|
|
|
+ <td>{{ form.contactAddress }}</td>
|
|
|
+ <td class="label">地 址：</td>
|
|
|
+ <td>{{ form.quoteAddress }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 3. 物品清单表格 -->
|
|
|
+ <div class="inventory-table-wrap">
|
|
|
+ <table class="inventory-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>序号</th>
|
|
|
+ <th>物料编码</th>
|
|
|
+ <th>名称</th>
|
|
|
+ <th>型号</th>
|
|
|
+ <th>数量</th>
|
|
|
+ <th>单位</th>
|
|
|
+ <th>单价（元）</th>
|
|
|
+ <th>总价（元）</th>
|
|
|
+ <th>技术答疑人</th>
|
|
|
+ <th>技术参数（g/cm³）</th>
|
|
|
+ <th>质保期（月）</th>
|
|
|
+ <th>交期（天）</th>
|
|
|
+ <th>备注</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, idx) in inventoryTableData" :key="idx">
|
|
|
+ <td>{{ idx + 1 }}</td>
|
|
|
+ <td>{{ item.productCode }}</td>
|
|
|
+ <td>{{ item.productName }}</td>
|
|
|
+ <td>{{ item.modelType }}</td>
|
|
|
+ <td>{{ item.totalCount }}</td>
|
|
|
+ <td>{{ item.measuringUnit }}</td>
|
|
|
+ <td>{{ item.singlePrice }}</td>
|
|
|
+ <td>{{ item.totalPrice }}</td>
|
|
|
+ <td>{{ item.technicalAnswerName }}</td>
|
|
|
+ <td>{{ item.technicalParams }}</td>
|
|
|
+ <td
|
|
|
+ >{{ item.guaranteePeriod
|
|
|
+ }}{{ item.guaranteePeriodUnitName }}</td
|
|
|
+ >
|
|
|
+ <td>{{ item.deliveryDays }}</td>
|
|
|
+ <td>{{ item.remark }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 4. 合计 -->
|
|
|
+ <div class="total-amount">合计：{{ form.totalPrice || '0.00' }}</div>
|
|
|
+
|
|
|
+ <!-- 5. 备注 -->
|
|
|
+ <div class="quotation-remark">
|
|
|
+ 备注：1、以上报价为含《增值税票价、含运费》；2、交货期：双方协商；3、报价有效期
|
|
|
+ 30 天
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 6. 交货期/付款方式/拆单 -->
|
|
|
+ <table class="footer-info-table">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="label">*交货期</td>
|
|
|
+ <td>{{ form.deliveryDate || '协商确定' }}</td>
|
|
|
+ <td class="label">付款方式</td>
|
|
|
+ <td>{{ form.settlementModeName || '协商确定' }}</td>
|
|
|
+ <td class="label">*是否接受拆单</td>
|
|
|
+ <td>{{ form.acceptUnpack == '1' ? '是' : '否' }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 7. 报价说明 -->
|
|
|
+ <div class="quote-description">
|
|
|
+ 报价为含税（%）含运费/保险在内的到厂交货价。
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 8. 报价单位&日期&保存期限 -->
|
|
|
+ <div class="quote-footer">
|
|
|
+ 报价单位：盖章处
|
|
|
+ <span class="quote-date"
|
|
|
+ >日期：{{ form.createTime.split(' ')[0] }}</span
|
|
|
+ >
|
|
|
+ <span class="save-term">保存期限：3年</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer" class="footer">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-s-grid"
|
|
|
+ class="ele-btn-icon"
|
|
|
+ @click="exportTable"
|
|
|
+ >
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="previewvisible = false">返回</el-button>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
</ele-modal>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { getDetail, getExport } from '@/api/saleManage/quotation';
|
|
|
- import { getFile } from '@/api/system/file';
|
|
|
- import dictMixins from '@/mixins/dictMixins';
|
|
|
- import { copyObj } from '@/utils/util';
|
|
|
- import bpmDetail from '@/views/bpm/processInstance/detail.vue';
|
|
|
- import inventoryTabledetail from '@/BIZComponents/inventoryTableDetails.vue';
|
|
|
- import { acceptUnpackoptions } from '@/enum/dict';
|
|
|
- // import fileMain from '@/components/addDoc/index.vue';
|
|
|
-
|
|
|
- export default {
|
|
|
- mixins: [dictMixins],
|
|
|
- components: {
|
|
|
- bpmDetail,
|
|
|
- inventoryTabledetail,
|
|
|
- // fileMain
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- fullscreen: false,
|
|
|
- cacheKeyUrl: 'eos-saleManage-quotation-inventoryTableDetails',
|
|
|
- activeComp: 'main',
|
|
|
- tabOptions: [
|
|
|
- { key: 'main', name: '报价详情' },
|
|
|
- { key: 'bpm', name: '流程详情' }
|
|
|
- ],
|
|
|
- visible: false,
|
|
|
- detailId: '',
|
|
|
- title: '详情',
|
|
|
- row: {},
|
|
|
- activeName: 'base',
|
|
|
- form: {},
|
|
|
- rules: {},
|
|
|
- detailData: {},
|
|
|
- acceptUnpackoptions,
|
|
|
- competAnalysisListcolumns: [
|
|
|
- {
|
|
|
- width: 45,
|
|
|
- type: 'index',
|
|
|
- columnKey: 'index',
|
|
|
- align: 'center',
|
|
|
- fixed: 'left'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 200,
|
|
|
- prop: 'productName',
|
|
|
- label: '名称',
|
|
|
- slot: 'productName'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'productCode',
|
|
|
- label: '编码',
|
|
|
- slot: 'productCode'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 200,
|
|
|
- prop: 'productCategoryName',
|
|
|
- label: '类型',
|
|
|
- slot: 'productCategoryName'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 160,
|
|
|
- prop: 'productBrand',
|
|
|
- label: '牌号',
|
|
|
- slot: 'productBrand'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'modelType',
|
|
|
- label: '型号',
|
|
|
- slot: 'modelType'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'specification',
|
|
|
- label: '规格',
|
|
|
- slot: 'specification'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- width: 160,
|
|
|
- prop: 'singlePrice',
|
|
|
- label: '单价',
|
|
|
- slot: 'singlePrice'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'totalCount',
|
|
|
- label: '数量',
|
|
|
- slot: 'totalCount'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'totalPrice',
|
|
|
- label: '销售总金额',
|
|
|
- slot: 'totalPrice',
|
|
|
- formatter: (_row, _column, cellValue) => {
|
|
|
- return _row.totalPrice + '元';
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'measuringUnit',
|
|
|
- label: '计量单位',
|
|
|
- slot: 'measuringUnit'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'deliveryDays',
|
|
|
- label: '交期(天)',
|
|
|
- slot: 'deliveryDays'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 200,
|
|
|
- prop: 'guaranteePeriod',
|
|
|
- label: '有效期',
|
|
|
- slot: 'guaranteePeriod',
|
|
|
- formatter: (_row, _column, cellValue) => {
|
|
|
- return (
|
|
|
- (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
|
|
|
- );
|
|
|
- }
|
|
|
- },
|
|
|
- // {
|
|
|
- // width: 120,
|
|
|
- // prop: 'guaranteePeriodUnitCode',
|
|
|
- // label: '',
|
|
|
- // slot: 'guaranteePeriodUnitCode'
|
|
|
- // },
|
|
|
- {
|
|
|
- width: 240,
|
|
|
- prop: 'customerReqFiles',
|
|
|
- label: '客户需求',
|
|
|
- slot: 'customerReqFiles'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 120,
|
|
|
- prop: 'technicalAnswerName',
|
|
|
- label: '技术答疑人',
|
|
|
- slot: 'technicalAnswerName'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 220,
|
|
|
- prop: 'technicalParams',
|
|
|
- label: '技术参数',
|
|
|
- slot: 'technicalParams'
|
|
|
- },
|
|
|
- {
|
|
|
- width: 240,
|
|
|
- prop: 'technicalDrawings',
|
|
|
- label: '技术图纸',
|
|
|
- slot: 'technicalDrawings',
|
|
|
- formatter: (_row, _column, cellValue) => {
|
|
|
- return _row.guaranteePeriod + _row.guaranteePeriodUnitName;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- width: 220,
|
|
|
- prop: 'remark',
|
|
|
- label: '备注',
|
|
|
- slot: 'remark'
|
|
|
+import { getDetail, getExport } from '@/api/saleManage/quotation';
|
|
|
+import { getFile } from '@/api/system/file';
|
|
|
+import dictMixins from '@/mixins/dictMixins';
|
|
|
+import { copyObj } from '@/utils/util';
|
|
|
+import bpmDetail from '@/views/bpm/processInstance/detail.vue';
|
|
|
+import inventoryTabledetail from '@/BIZComponents/inventoryTableDetails.vue';
|
|
|
+import { acceptUnpackoptions } from '@/enum/dict';
|
|
|
+// import fileMain from '@/components/addDoc/index.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [dictMixins],
|
|
|
+ components: {
|
|
|
+ bpmDetail,
|
|
|
+ inventoryTabledetail
|
|
|
+ // fileMain
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fullscreen: false,
|
|
|
+ cacheKeyUrl: 'eos-saleManage-quotation-inventoryTableDetails',
|
|
|
+ activeComp: 'main',
|
|
|
+ tabOptions: [
|
|
|
+ { key: 'main', name: '报价详情' },
|
|
|
+ { key: 'bpm', name: '流程详情' }
|
|
|
+ ],
|
|
|
+ visible: false,
|
|
|
+ detailId: '',
|
|
|
+ title: '详情',
|
|
|
+ row: {},
|
|
|
+ activeName: 'base',
|
|
|
+ form: {},
|
|
|
+ rules: {},
|
|
|
+ detailData: {},
|
|
|
+ acceptUnpackoptions,
|
|
|
+ previewvisible: false,
|
|
|
+ inventoryTableData: [],
|
|
|
+ competAnalysisListcolumns: [
|
|
|
+ {
|
|
|
+ width: 45,
|
|
|
+ type: 'index',
|
|
|
+ columnKey: 'index',
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'productName',
|
|
|
+ label: '名称',
|
|
|
+ slot: 'productName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'productCode',
|
|
|
+ label: '编码',
|
|
|
+ slot: 'productCode'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'productCategoryName',
|
|
|
+ label: '类型',
|
|
|
+ slot: 'productCategoryName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 160,
|
|
|
+ prop: 'productBrand',
|
|
|
+ label: '牌号',
|
|
|
+ slot: 'productBrand'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'modelType',
|
|
|
+ label: '型号',
|
|
|
+ slot: 'modelType'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'specification',
|
|
|
+ label: '规格',
|
|
|
+ slot: 'specification'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ width: 160,
|
|
|
+ prop: 'singlePrice',
|
|
|
+ label: '单价',
|
|
|
+ slot: 'singlePrice'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'totalCount',
|
|
|
+ label: '数量',
|
|
|
+ slot: 'totalCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'totalPrice',
|
|
|
+ label: '销售总金额',
|
|
|
+ slot: 'totalPrice',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return _row.totalPrice + '元';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'measuringUnit',
|
|
|
+ label: '计量单位',
|
|
|
+ slot: 'measuringUnit'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'deliveryDays',
|
|
|
+ label: '交期(天)',
|
|
|
+ slot: 'deliveryDays'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'guaranteePeriod',
|
|
|
+ label: '有效期',
|
|
|
+ slot: 'guaranteePeriod',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName;
|
|
|
}
|
|
|
- ]
|
|
|
- };
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // width: 120,
|
|
|
+ // prop: 'guaranteePeriodUnitCode',
|
|
|
+ // label: '',
|
|
|
+ // slot: 'guaranteePeriodUnitCode'
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ width: 240,
|
|
|
+ prop: 'customerReqFiles',
|
|
|
+ label: '客户需求',
|
|
|
+ slot: 'customerReqFiles'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ prop: 'technicalAnswerName',
|
|
|
+ label: '技术答疑人',
|
|
|
+ slot: 'technicalAnswerName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 220,
|
|
|
+ prop: 'technicalParams',
|
|
|
+ label: '技术参数',
|
|
|
+ slot: 'technicalParams'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 240,
|
|
|
+ prop: 'technicalDrawings',
|
|
|
+ label: '技术图纸',
|
|
|
+ slot: 'technicalDrawings',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return _row.guaranteePeriod + _row.guaranteePeriodUnitName;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 220,
|
|
|
+ prop: 'remark',
|
|
|
+ label: '备注',
|
|
|
+ slot: 'remark'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //导出
|
|
|
+ async exportTable() {
|
|
|
+ this.loading = true;
|
|
|
+ const response = await getExport(this.detailId);
|
|
|
},
|
|
|
- methods: {
|
|
|
- //导出
|
|
|
- async exportTable() {
|
|
|
- this.loading = true;
|
|
|
- const response = await getExport(this.detailId);
|
|
|
- },
|
|
|
- async open(row) {
|
|
|
- this.form = row;
|
|
|
- this.visible = true;
|
|
|
- this.getDetailData(row.id);
|
|
|
- this.detailId = row.id;
|
|
|
- },
|
|
|
-
|
|
|
- cancel() {
|
|
|
+ previewModal() {
|
|
|
+ this.previewvisible = true;
|
|
|
+ this.inventoryTableData =
|
|
|
+ this.$refs.inventoryTabledetailRef.form.datasource;
|
|
|
+ },
|
|
|
+ async open(row) {
|
|
|
+ this.form = row;
|
|
|
+ this.visible = true;
|
|
|
+ this.getDetailData(row.id);
|
|
|
+ this.detailId = row.id;
|
|
|
+ },
|
|
|
+
|
|
|
+ cancel() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 关闭后，销毁所有的表单数据
|
|
|
+ (this.form = copyObj(this.formDef)),
|
|
|
+ (this.otherForm = copyObj(this.otherFormDef)),
|
|
|
+ (this.tableBankData = []);
|
|
|
+ this.tableLinkData = [];
|
|
|
+ this.visible = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadFile(file) {
|
|
|
+ getFile({ objectName: file.storePath }, file.name);
|
|
|
+ },
|
|
|
+ async getDetailData(id) {
|
|
|
+ this.loading = true;
|
|
|
+ const data = await getDetail(id);
|
|
|
+ this.loading = false;
|
|
|
+ if (data) {
|
|
|
+ this.detailData = data;
|
|
|
this.$nextTick(() => {
|
|
|
- // 关闭后，销毁所有的表单数据
|
|
|
- (this.form = copyObj(this.formDef)),
|
|
|
- (this.otherForm = copyObj(this.otherFormDef)),
|
|
|
- (this.tableBankData = []);
|
|
|
- this.tableLinkData = [];
|
|
|
- this.visible = false;
|
|
|
+ this.$refs.inventoryTabledetailRef &&
|
|
|
+ this.$refs.inventoryTabledetailRef.putTableValue(data);
|
|
|
});
|
|
|
- },
|
|
|
- downloadFile(file) {
|
|
|
- getFile({ objectName: file.storePath }, file.name);
|
|
|
- },
|
|
|
- async getDetailData(id) {
|
|
|
- this.loading = true;
|
|
|
- const data = await getDetail(id);
|
|
|
- this.loading = false;
|
|
|
- if (data) {
|
|
|
- this.detailData = data;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.inventoryTabledetailRef &&
|
|
|
- this.$refs.inventoryTabledetailRef.putTableValue(data);
|
|
|
- });
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .ele-dialog-form {
|
|
|
- .el-form-item {
|
|
|
- margin-bottom: 10px;
|
|
|
+.ele-dialog-form {
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.headbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .amount {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.quotation-preview {
|
|
|
+ font-family: 'Microsoft Yahei', sans-serif;
|
|
|
+
|
|
|
+ // 标题
|
|
|
+ .quotation-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 信息表格（询价方、报价方）
|
|
|
+ .info-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-size: 12px;
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ border: 2px solid #2c2c2c;
|
|
|
+ padding: 5px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 物品清单表格
|
|
|
+ .inventory-table-wrap {
|
|
|
+ .inventory-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+
|
|
|
+ th {
|
|
|
+ font-weight: bold;
|
|
|
+ border: 2px solid #2c2c2c;
|
|
|
+ border-top: none;
|
|
|
+ padding: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ border: 2px solid #2c2c2c;
|
|
|
+ border-top: none;
|
|
|
+ padding: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .headbox {
|
|
|
+ // 合计
|
|
|
+ .total-amount {
|
|
|
+ text-align: center;
|
|
|
+ padding: 5px;
|
|
|
+ border: 2px solid #2c2c2c;
|
|
|
+ border-top: none;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 备注
|
|
|
+ .quotation-remark {
|
|
|
+ line-height: 1.5;
|
|
|
+ text-align: center;
|
|
|
+ border: 2px solid #2c2c2c;
|
|
|
+ border-top: none;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部信息表格（交货期、付款方式等）
|
|
|
+ .footer-info-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ border: 2px solid #2c2c2c;
|
|
|
+ border-top: none;
|
|
|
+ padding: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 报价说明
|
|
|
+ .quote-description {
|
|
|
+ line-height: 1.5;
|
|
|
+ border: 2px solid #2c2c2c;
|
|
|
+ border-top: none;
|
|
|
+ padding: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 报价单位、日期、保存期限
|
|
|
+ .quote-footer {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
- .amount {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
+ margin-top: 24px;
|
|
|
+
|
|
|
+ .seal-area {
|
|
|
+ border: 1px solid #000;
|
|
|
+ padding: 4px 12px;
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quote-date,
|
|
|
+ .save-term {
|
|
|
+ margin-left: 24px;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
hezhanp