kd-aiot-frontend-eom/src/views/financialManage/prepayment/components/addDialog.vue

<!-- 预付款新增/编辑弹窗 -->
<template>
  <ele-modal
    width="1100px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isDetail ? '预付款详情' : (isUpdate ? '修改预付款' : '新增预付款')"
    @update:visible="updateVisible"
  >
    <div class="switch_left" v-if="isDetail">
      <ul>
        <li
          v-for="item in tabOptions"
          :key="item.key"
          :class="{ active: activeComp == item.key }"
          @click="activeComp = item.key"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      v-show="activeComp == 'main'"
    >
      <!-- 基本信息 -->
      <headerTitle title="基本信息" size="16px"></headerTitle>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="预付日期:" prop="prepayDate">
            <el-date-picker
              v-model="form.prepayDate"
              type="date"
              placeholder="请选择"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预付金额:" prop="prepayTotalPrice">
            <el-input
              v-model="form.prepayTotalPrice"
              placeholder="请输入"
              :disabled="isDetail"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会计科目:" prop="accountingSubjectId">
            <ele-tree-select
              clearable
              :disabled="isDetail"
              filterable
              ref="treeSelect"
              :data="accountingSubjectList"
              v-model="form.accountingSubjectId"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="changeSubjectInfo"
              default-expand-all
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="供应商名称:" prop="contactName">
            <el-input
              clearable
              v-model="form.contactName"
              @click.native="$refs.parentRef.open()"
              placeholder="请选择"
              readonly
              :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源类型:" prop="sourceType">
            <el-select
              v-model="form.sourceType"
              placeholder="请选择"
              style="width: 100%"
              :disabled="isDetail"
            >
              <el-option label="采购订单" :value="3"></el-option>
              <el-option label="合同" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源编码:" prop="sourceCode">
            <!-- <el-select
              v-model="form.sourceCode"
              placeholder="请选择"
              style="width: 100%"
              :disabled="isDetail"
              filterable
            >
              <el-option
                v-for="item in sourceCodeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
            <el-input
              clearable
              v-model="form.sourceCode"
              @click.native="openSource"
              placeholder="请选择"
              :disabled="isDetail"
              readonly
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="款项类型:" prop="fundType">
            <DictSelection
              dictName="预收款款项类型"
              clearable
              v-model="form.fundType"
              :disabled="isDetail"
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款条件:" prop="paymentConditionName">
            <!-- <el-select
              v-model="form.paymentConditionName"
              placeholder="请选择"
              style="width: 100%"
              :disabled="isDetail"
            >
              <el-option
                v-for="item in paymentTermsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
            <el-input
              clearable
              v-model="form.paymentConditionName"
              @click.native="openReceiveTerms"
              placeholder="请选择"
              :disabled="isDetail"
              readonly
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="备注:" prop="remark">
            <el-input
              v-model="form.remark"
              placeholder="请输入"
              :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件:" prop="files">
            <fileMain v-model="form.files" :type="isDetail ? 'view' : 'add'"></fileMain>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 物品清单 -->
      <headerTitle title="物品清单" size="16px" style="margin-top: 20px"></headerTitle>
      <inventoryTableDetails
        ref="inventoryTableDetailsRef"
        :isAllPrice="true"
        :showSummary="true"
        :isSelected="false"
        :isDiscountTotalPrice="true"
        cacheKeyUrl="eos-prepayment-inventoryTableDetails"
        :countObj="countObj"
      ></inventoryTableDetails>

      <!-- 付款信息 -->
       <div style="margin-top: 20px" v-if="isDetail">
        <headerTitle title="付款信息"></headerTitle>
        <div style="margin: 10px 0; font-size: 14px; color: #606266;">
          <span>预付金额：{{ form.amount || 0 }} 元</span>
          <span style="margin-left: 20px;">已付金额：{{ paidAmount }} 元</span>
          <span style="margin-left: 20px;">未付金额：{{ unpaidAmount }} 元</span>
        </div>

        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns"
          :datasource="form.detailList"
          :toolkit="[]"
        >
          <template v-slot:files="{ row: r }">
            <fileMain v-model="r.files" type="view" :limit="1"></fileMain>
          </template>
        </ele-pro-table>
       </div>
    </el-form>

    <template v-slot:footer>
      <template v-if="isDetail">
        <el-button @click="updateVisible(false)">关闭</el-button>
      </template>
      <template v-else>
        <el-button type="primary" :loading="loading" @click="save(0)">
          保存
        </el-button>
        <el-button type="primary" :loading="loading" @click="save(1)">
          提交
        </el-button>
        <el-button @click="updateVisible(false)">取消</el-button>
      </template>
    </template>
    <contractListDialog
      ref="selectContractRef"
      @changeParent="changeContract"
      :isChange="true"
      :type="2"
      :contactData="{
        id: form.contactId
      }"
    ></contractListDialog>
    <!-- 采购订单   -->
    <orderListDialog
      ref="orderListDialogRef"
      :isMy="true"
      :contactData="{
        id: form.contactId
      }"
      @changeParent="changeOrder"
    ></orderListDialog>
    <!-- 供应商 -->
    <parentList
      ref="parentRef"
      @changeParent="changeParent"
      :classType="2"
    ></parentList>
    <!-- 付款条件 -->
    <receiveTermsDialog ref="receiveTermsDialogRef" conditionType="terms" @changeParent="changeReceiveTerms"></receiveTermsDialog>
    <bpmDetail
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>

    <process-submit-dialog
      :isNotNeedProcess="false"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
  </ele-modal>
</template>

<script>
  import headerTitle from '@/components/header-title';
  import inventoryTableDetails from '@/BIZComponents/inventoryTableDetails.vue';
  import fileMain from '@/components/addDoc/index.vue';
  import { addPrepayment, updatePrepayment, getPrepaymentInfo } from '@/api/financialManage/prepayment';
  import { getTreeByPid } from '@/api/classifyManage';
  import parentList from '@/views/purchasingManage/supplierManage/components/parentList.vue';
  import contractListDialog from '@/views/saleManage/saleOrder/components/contractListDialog.vue';
  import orderListDialog from '@/views/purchasingManage/purchaseOrder/invoice/components/orderListDialog.vue';
  import { getByIdCondition } from '@/api/purchasingManage/purchaseOrder';
  import receiveTermsDialog from '@/views/financialManage/advanceReceipt/components/receiveTermsDialog.vue';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';

  export default {
    components: {
      headerTitle,
      inventoryTableDetails,
      fileMain,
      parentList,
      contractListDialog,
      orderListDialog,
      receiveTermsDialog,
      bpmDetail,
      processSubmitDialog
    },
    data() {
      return {
        activeComp: 'main',
        visible: false,
        loading: false,
        isUpdate: false,
        isDetail: false,
        processSubmitDialogFlag: false,
        supplierOptions: [],
        sourceCodeOptions: [],
        paymentTermsOptions: [],
        accountingSubjectList: [],
        businessId: '',
        countObj: {
          countKey: 'purchaseCount',
          unitKey: 'purchaseUnit',
          unitIdKey: 'purchaseUnitId'
        },
        tabOptions: [
          { key: 'main', name: '预付款项' },
          { key: 'bpm', name: '流程详情' }
        ],
        form: {
          id: null,
          code: '',
          prepayDate: '',
          prepayTotalPrice: '',
          accountingSubjectId: '1779719367139791007',
          accountingSubjectCode: '1123',
          accountingSubjectName: '预付账款',
          contactName: '',
          contactId: '',
          sourceType: 3,
          sourceCode: '',
          sourceId: '',
          fundType: 1,
          paymentConditionName: '',
          paymentConditionId: '',
          remark: '',
          files: []
        },
        rules: {
          prepayDate: [{ required: true, message: '请选择预付日期', trigger: 'change' }],
          prepayTotalPrice: [{ required: true, message: '请输入预付金额', trigger: 'blur' }],
          accountingSubjectId: [{ required: true, message: '请选择会计科目', trigger: 'change' }],
          contactName: [{ required: true, message: '请选择供应商名称', trigger: 'change' }],
          sourceType: [{ required: true, message: '请选择来源类型', trigger: 'change' }],
          sourceCode: [{ required: true, message: '请选择来源编码', trigger: 'change' }],
          fundType: [{ required: true, message: '请选择款项类型', trigger: 'change' }]
        },
        columns: [
          {
            type: 'index',
            label: '序号',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'paidDate',
            label: '付款时间',
            align: 'center',
            minWidth: 160
          },
          {
            prop: 'paidTotalPrice',
            label: '已付金额',
            align: 'center',
            minWidth: 140
          },
          {
            prop: 'paymentTypeName',
            label: '支付类型',
            align: 'center',
            minWidth: 140
          },
          {
            prop: 'files',
            label: '附件',
            align: 'center',
            minWidth: 120,
            slot: 'files'
          },
          {
            prop: 'remark',
            label: '备注',
            align: 'center',
            minWidth: 140
          }
        ]
      };
    },
    computed: {
      paidAmount() {
        return this.form.tableData.reduce((sum, item) => {
          const val = parseFloat(item.paidAmount);
          return sum + (isNaN(val) ? 0 : val);
        }, 0).toFixed(2);
      },
      unpaidAmount() {
        const total = parseFloat(this.row.prepayTotalPrice) || 0;
        const paid = parseFloat(this.paidAmount) || 0;
        return (total - paid).toFixed(2);
      }
    },
    methods: {
      generateCode() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const random = String(Math.floor(Math.random() * 900) + 100);
        this.form.code = `YFK${year}${month}${day}${random}`;
      },

      async open(type, row) {
        this.visible = true;
        await this.getClassifyList(24, 'accountingSubjectList');
        this.isUpdate = type === 'edit';
        this.isDetail = type === 'detail';
        if ((this.isUpdate || this.isDetail) && row) {
          this.form = await getPrepaymentInfo(row.id);
          this.form.totalAmount = this.form.productList.reduce((sum, item) => {
            const val = parseFloat(item.totalPrice);
            return sum + (isNaN(val) ? 0 : val);
          }, 0);
          this.form.discountTotalPrice = this.form.productList.reduce((sum, item) => {
            const val = parseFloat(item.discountTotalPrice);
            return sum + (isNaN(val) ? 0 : val);
          }, 0);
          this.businessId = row.id;
          this.$nextTick(() => {
            this.$refs.inventoryTableDetailsRef &&
              this.$refs.inventoryTableDetailsRef.putTableValue(this.form || []);
          });
        } else {
          this.resetForm();
          // this.generateCode();
          this.$nextTick(() => {
            this.$refs.inventoryTableDetailsRef &&
              this.$refs.inventoryTableDetailsRef.putTableValue([]);
          });
          this.form.accountingSubjectId = '1779719367139791007';
          this.form.accountingSubjectCode = '1123';
          this.form.accountingSubjectName = '预付账款';
        }
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate();
        });
      },

      openReceiveTerms() {
        this.$refs.receiveTermsDialogRef.open();
      },

      changeReceiveTerms(row, index) {
        console.log('changeReceiveTerms~~~', row)
        this.form.paymentConditionId = row.id;
        this.form.paymentConditionName = row.name;
        console.log('changeReceiveTerms!!!', this.form)
        this.$forceUpdate()
      },

      async changeContract(row) {
        console.log(row, 'dadas');
        this.form.sourceCode = row.contractNumber;
        this.form.sourceId = row.id;
        const { productList, receiptPaymentList, contractVO } = await getDetail(
          row.id
        );

        this.$refs.inventoryTableDetailsRef.putTableValue({ productList });
        this.form.prepayTotalPrice = contractVO.discountTotalPrice;
      },

      async changeOrder(row) {
        this.form.sourceCode = row.orderNo;
        this.form.sourceId = row.id;
        const { productList, receiptPaymentList, payAmount } =
          await getByIdCondition(row.id, 2);

        this.$refs.inventoryTableDetailsRef.putTableValue({ productList });
        this.form.prepayTotalPrice = payAmount;
      },

      openSource() {
        if (!this.form.contactName) {
          this.$message.error('请选择供应商');
          return;
        }
        if (!this.form.sourceType) {
          this.$message.error('请选择来源类型');
          return;
        }
        if (this.form.sourceType == 3) {
          this.$refs.orderListDialogRef.open()
        } else {
          this.$refs.selectContractRef.open();
        }
      },

      //获取分类管理中的数据
      async getClassifyList(id, listName) {
        let res = await getTreeByPid(id);
        this[listName] = res.data;
      },

      changeSubjectInfo(val) {
        const { code, name } = this.$refs.treeSelect.getNodeByValue(val);
        this.form.accountingSubjectCode = code;
        this.form.accountingSubjectName = name;
      },

      async changeParent(obj) {
        this.form.contactName = obj.name;
        this.form.contactId = obj.id;
      },

      resetForm() {
        this.form = {
          id: null,
          code: '',
          prepayDate: '',
          prepayTotalPrice: '',
          accountingSubjectId: '1779719367139791007',
          accountingSubjectCode: '1123',
          accountingSubjectName: '预付账款',
          contactName: '',
          contactId: '',
          sourceType: 3,
          sourceCode: '',
          sourceId: '',
          fundType: 1,
          paymentConditionName: '',
          paymentConditionId: '',
          remark: '',
          files: []
        };
      },

      save(type) {
        this.$refs.form.validate((valid) => {
          if (!valid) return;
          this.loading = true;

          const productList = this.$refs.inventoryTableDetailsRef
            ? this.$refs.inventoryTableDetailsRef.getTableValue()
            : [];
          const params = { ...this.form, productList };

          const saveOrUpdate = this.isUpdate ? updatePrepayment : addPrepayment;
          saveOrUpdate(params)
            .then((res) => {
              this.loading = false;
              this.$message.success(this.isUpdate ? '修改成功' : '新增成功');
              console.log('sub', type)
              if(type == 1) {
                console.log('提交', res)
                this.sub(res);
              } 
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch(() => {
              this.loading = false;
            });
        });
      },

      async sub(res) {
        const data = await getPrepaymentInfo(
          this.businessId || res
        );
        this.processSubmitDialogFlag = true;
        let key = 'fin_prepay_approve';
        this.$nextTick(() => {
          let params = {
            businessId: data.id,
            businessKey: key,
            formCreateUserId: data.createUserId,
            variables: {
              businessCode: data.code,
              businessName: data.contactName,
              fundType: data.fundTypeName,
              sourceType: data.sourceType,
              businessType: '预付款项'
            }
          };

          this.$refs.processSubmitDialogRef.init(params);
        });

        // submit({
        //   businessId: this.businessId || res,
        //   receiveType: this.form.receiveType,
        //   sourceType,
        //   variables: {
        //     storemanIds
        //   }
        // }).then((res) => {
        //   this.cancel();
        //   this.$emit('done');
        // });
      },

      reload() {
        this.updateVisible(false);
        this.$emit('done');
      },

      updateVisible(value) {
        this.visible = value;
        if (!value) {
          this.resetForm();
        }
      }
    }
  };
</script>