kd-aiot-frontend-wt/src/views/bpm/handleTask/components/prepayment/detailDialog.vue

<!-- 预付款新增/编辑弹窗 -->
<template>

    <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="view"></fileMain>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 物品清单 -->
      <headerTitle title="物品清单" size="16px" style="margin-top: 20px"></headerTitle>
      <inventoryTableDetails
        ref="inventoryTableDetailsRef"
        :isAllPrice="true"
        :isDiscountTotalPrice="true"
        :showSummary="true"
        :isSelected="false"
        cacheKeyUrl="eos-prepayment-inventoryTableDetails"
        :countObj="{
          countKey: 'totalCount',
          unitKey: 'saleUnit',
          unitIdKey: 'saleUnitId'
        }"
      ></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>

<script>
  import headerTitle from '@/components/header-title';
  import inventoryTableDetails from '@/BIZComponents/inventoryTableDetails.vue';
  import fileMain from '@/components/addDoc/index.vue';
  import { getPrepaymentInfo } from '@/api/bpm/components/financialManage/payableManage/index.js';
  import { getTreeByPid } from '@/api/classifyManage';

  export default {
    components: {
      headerTitle,
      inventoryTableDetails,
      fileMain,
    },
    props: {
      businessId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        activeComp: 'main',
        visible: false,
        loading: false,
        isUpdate: false,
        isDetail: true,
        processSubmitDialogFlag: false,
        supplierOptions: [],
        sourceCodeOptions: [],
        paymentTermsOptions: [],
        accountingSubjectList: [],
        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
          }
        ]
      };
    },
    mounted() {
      this.open();
    },
    methods: {
      async open() {
          this.form = await getPrepaymentInfo(this.businessId);
          this.form.fundType = String(this.form.fundType);
          this.$nextTick(() => {
            this.$refs.inventoryTableDetailsRef &&
              this.$refs.inventoryTableDetailsRef.putTableValue(this.form || []);
          });
        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: []
        };
      },

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

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