|
|
@@ -0,0 +1,437 @@
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ custom-class="ele-dialog-form long-dialog-form"
|
|
|
+ :centered="true"
|
|
|
+ v-if="visible"
|
|
|
+ :visible.sync="visible"
|
|
|
+ :title="title"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="70%"
|
|
|
+ :fullscreen="fullscreen"
|
|
|
+ @close="cancel"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ <modalTitle
|
|
|
+ :title="title"
|
|
|
+ @setFullscreen="fullscreen = !fullscreen"
|
|
|
+ ></modalTitle>
|
|
|
+ </template>
|
|
|
+ <div class="switch">
|
|
|
+ <div class="switch_left">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="item in tabOptions"
|
|
|
+ :key="item.key"
|
|
|
+ :class="{ active: activeComp == item.key }"
|
|
|
+ @click="changeK(item.key)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="activeComp === 'main'">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <headerTitle title="合同信息"></headerTitle>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="合同类型:" prop="type">
|
|
|
+ <el-input v-model="form.categoryName" disabled>
|
|
|
+ <template slot="prepend">{{ form.typeName }}</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="核价单:"
|
|
|
+ prop="sourceName"
|
|
|
+ v-if="form.sourceType == 2"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.sourceName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="报价单:"
|
|
|
+ prop="sourceName"
|
|
|
+ v-if="form.sourceType == 1"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.sourceName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="计划名称:"
|
|
|
+ prop="sourceName"
|
|
|
+ v-if="form.sourceType == 3"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.sourceName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="商机名称:"
|
|
|
+ prop="sourceName"
|
|
|
+ v-if="form.sourceType == 4"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.sourceName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合同名称:" prop="contractName">
|
|
|
+ <el-input v-model="form.contractName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="编码:" prop="contractNo">
|
|
|
+ <el-input v-model="form.contractNo" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合同编号:" prop="contractNumber">
|
|
|
+ <el-input v-model="form.contractNumber" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="签订日期:" prop="contractStartDate">
|
|
|
+ <el-input v-model="form.contractStartDate" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束日期:" prop="contractEndDate">
|
|
|
+ <el-input v-model="form.contractEndDate" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="计价方式:" prop="payWay">
|
|
|
+ <el-select v-model="form.pricingWay" disabled style="width: 100%">
|
|
|
+ <el-option :value="1" label="按数量计费"></el-option>
|
|
|
+ <el-option :value="2" label="按重量计费"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="结算方式:" prop="payWay">
|
|
|
+ <el-input v-model="form.settlementModeName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="contractFile" label="合同附件:">
|
|
|
+ <fileMain v-model="form.fileId" type="view"></fileMain>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <headerTitle title="基本信息"></headerTitle>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="甲方名称:" prop="partaName">
|
|
|
+ <el-input v-model="form.partaName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="甲方统一社会信用代码:"
|
|
|
+ prop="partaUnifiedSocialCreditCode"
|
|
|
+ class="form_item_label"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.partaUnifiedSocialCreditCode"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="甲方联系人:" prop="partaLinkName">
|
|
|
+ <el-input v-model="form.partaLinkName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="甲方电话:" prop="partaTel">
|
|
|
+ <el-input v-model="form.partaTel" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="甲方传真:" prop="partaFax">
|
|
|
+ <el-input v-model="form.partaFax" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label=" 甲方Email:" prop="partaEmail">
|
|
|
+ <el-input v-model="form.partaEmail" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="甲方地址:" prop="partaAddress">
|
|
|
+ <el-input v-model="form.partaAddress" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item
|
|
|
+ label="甲方税号"
|
|
|
+ prop="contactAddress"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="form.contactAddress"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="乙方名称:" prop="partbName">
|
|
|
+ <el-input v-model="form.partbName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="乙方统一社会信用代码:"
|
|
|
+ prop="partbUnifiedSocialCreditCode"
|
|
|
+ class="form_item_label"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.partbUnifiedSocialCreditCode"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="乙方联系人:" prop="partbLinkName">
|
|
|
+ <el-input v-model="form.partbLinkName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="partbTel" label="乙方联系电话:">
|
|
|
+ <el-input v-model="form.partbTel" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="partbFax" label="乙方传真:">
|
|
|
+ <el-input v-model="form.partbFax" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="乙方Email:" prop="partbEmail">
|
|
|
+ <el-input v-model="form.partbEmail" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="乙方地址:" prop="partbAddress">
|
|
|
+ <el-input v-model="form.partbAddress" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item
|
|
|
+ label="乙方税号"
|
|
|
+ prop="contactAddress"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="form.contactAddress"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-tabs v-model="activeName" style="margin-top: 15px" type="border-card">
|
|
|
+ <el-tab-pane label="物品清单" name="1">
|
|
|
+ <inventoryTabledetail
|
|
|
+ ref="inventoryTabledetailRef"
|
|
|
+ :isCustomerMark="form.type == '1'"
|
|
|
+ :isDiscountTotalPrice="true"
|
|
|
+ :contractBookType="form.type"
|
|
|
+ :pricingWay="form.pricingWay"
|
|
|
+ :isChangeCount="false"
|
|
|
+ ></inventoryTabledetail>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="带料清单" name="2">
|
|
|
+ <inventoryTabledetail
|
|
|
+ ref="rawDetailListRef"
|
|
|
+ :isCustomerMark="true"
|
|
|
+ :contractBookType="form.type"
|
|
|
+ ></inventoryTabledetail>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="产出清单" name="3">
|
|
|
+ <inventoryTabledetail
|
|
|
+ ref="outputDetailListRef"
|
|
|
+ :isCustomerMark="true"
|
|
|
+ :contractBookType="form.type"
|
|
|
+ ></inventoryTabledetail>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <!-- <headerTitle title="产品清单"></headerTitle> -->
|
|
|
+
|
|
|
+ <headerTitle
|
|
|
+ :title="form.type == '2' ? '付款方式' : '收款方式'"
|
|
|
+ style="margin-top: 30px"
|
|
|
+ ></headerTitle>
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ :needPage="false"
|
|
|
+ :columns="receiptPaymentListcolumns"
|
|
|
+ :toolkit="[]"
|
|
|
+ :datasource="detailData.receiptPaymentList"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
+ </ele-pro-table>
|
|
|
+ </div>
|
|
|
+ <bpmDetail
|
|
|
+ v-if="activeComp === 'bpm' && form.processInstanceId"
|
|
|
+ :id="form.processInstanceId"
|
|
|
+ ></bpmDetail>
|
|
|
+ <changeList
|
|
|
+ v-if="activeComp === 'changeList'"
|
|
|
+ ref="changeList"
|
|
|
+ ></changeList>
|
|
|
+ <div slot="footer" class="footer">
|
|
|
+ <el-button @click="cancel">返回</el-button>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getDetail, getExport } from '@/api/contractManage/contractBook';
|
|
|
+ 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 fileMain from '@/components/addDoc/index';
|
|
|
+ import modalTitle from '@/BIZComponents/modalTitle.vue';
|
|
|
+ import changeList from './changeList.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mixins: [dictMixins],
|
|
|
+ components: {
|
|
|
+ inventoryTabledetail,
|
|
|
+ bpmDetail,
|
|
|
+ fileMain,
|
|
|
+ modalTitle,
|
|
|
+ changeList
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fullscreen: false,
|
|
|
+ activeName: '1',
|
|
|
+ activeComp: 'main',
|
|
|
+ tabOptions: [
|
|
|
+ { key: 'main', name: '合同详情' },
|
|
|
+ { key: 'bpm', name: '流程详情' },
|
|
|
+ { key: 'changeList', name: '变更记录' }
|
|
|
+ // { key: 'dversion', name: '历史版本' },
|
|
|
+ ],
|
|
|
+ visible: false,
|
|
|
+ detailId: '',
|
|
|
+ title: '详情',
|
|
|
+ row: {},
|
|
|
+ form: {},
|
|
|
+ rules: {},
|
|
|
+ detailData: {},
|
|
|
+ receiptPaymentListcolumns: [
|
|
|
+ {
|
|
|
+ width: 45,
|
|
|
+ type: 'index',
|
|
|
+ columnKey: 'index',
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ prop: 'moneyName',
|
|
|
+ label: '款项名称',
|
|
|
+ slot: 'moneyName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ prop: 'price',
|
|
|
+ label: '金额',
|
|
|
+ slot: 'price',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return _row.price + '元';
|
|
|
+ },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ prop: 'ratio',
|
|
|
+ label: '比例',
|
|
|
+ slot: 'ratio',
|
|
|
+ formatter: (_row, _column, cellValue) => {
|
|
|
+ return _row.ratio + '%';
|
|
|
+ },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 160,
|
|
|
+ prop: 'deadLine',
|
|
|
+ label: '截止日期',
|
|
|
+ slot: 'deadLine',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'remark',
|
|
|
+ label: '说明',
|
|
|
+ slot: 'remark',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //导出
|
|
|
+ async exportTable() {
|
|
|
+ this.loading = true;
|
|
|
+ const response = await getExport(this.detailId);
|
|
|
+ },
|
|
|
+ async open(row) {
|
|
|
+ this.form = row;
|
|
|
+ this.visible = true;
|
|
|
+ this.activeName = '1';
|
|
|
+ this.getDetailData(row.id);
|
|
|
+ this.detailId = row.id;
|
|
|
+ },
|
|
|
+ changeK(key) {
|
|
|
+ this.activeComp = key;
|
|
|
+ if (key == 'main') {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.inventoryTabledetailRef &&
|
|
|
+ this.$refs.inventoryTabledetailRef.putTableValue({
|
|
|
+ ...this.detailData,
|
|
|
+ ...this.detailData.contractVO
|
|
|
+ });
|
|
|
+ this.$refs.rawDetailListRef &&
|
|
|
+ this.$refs.rawDetailListRef.putTableValueNew(this.form.rawList); //原料
|
|
|
+ this.$refs.outputDetailListRef &&
|
|
|
+ this.$refs.outputDetailListRef.putTableValueNew(
|
|
|
+ this.form.outputList
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (key == 'changeList') {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.changeList.init(this.form.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) {
|
|
|
+ data.productList.forEach((item) => {
|
|
|
+ item['pricingWay'] = item.pricingWay || data.contractVO?.pricingWay;
|
|
|
+ });
|
|
|
+ this.detailData = data;
|
|
|
+ this.form = data.contractVO;
|
|
|
+ // if (this.form.fileId) {
|
|
|
+ // this.form.fileId = JSON.parse(this.form.fileId);
|
|
|
+ // } else {
|
|
|
+ // this.form.fileId = [];
|
|
|
+ // }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.inventoryTabledetailRef &&
|
|
|
+ this.$refs.inventoryTabledetailRef.putTableValue({
|
|
|
+ ...data,
|
|
|
+ ...data.contractVO
|
|
|
+ });
|
|
|
+ this.$refs.rawDetailListRef &&
|
|
|
+ this.$refs.rawDetailListRef.putTableValueNew(this.form.rawList); //原料
|
|
|
+ this.$refs.outputDetailListRef &&
|
|
|
+ this.$refs.outputDetailListRef.putTableValueNew(
|
|
|
+ this.form.outputList
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .ele-dialog-form {
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .amount {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|