kd-aiot-frontend-eom/src/views/financialManage/collectionPlan/components/collectionDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="collectionDialogFlag"
    :title="title"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <!-- <info-table ref="feeRelatedInfoTable" v-if="form.id" :form.sync="form"></info-table> -->
     <collect-table-form
        ref="collectTableFormRef"
        :form.sync="form"
        :total-price="form.planPaymentAmount"
        :dialog-type="dialogType"
        total-label="应收金额"
      ></collect-table-form>
    <div slot="footer">
      <el-button type="primary" @click="save(0)">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>

  </ele-modal>
</template>
<script>
import infoTable from "@/views/financialManage/receivableManage/components/infoTable.vue";
import {finReceivableSaveAPI, getFinReceivableInfoAPI, finReceivableUpdateAmountAPI} from "@/api/financialManage/receivableManage";
import { receiptPaymentPlanById } from '@/api/financialManage/payAndCollectPlan';
import collectTableForm from '@/BIZComponents/collectTableForm/index.vue';
import { confirmReceiptAPI } from '@/api/financialManage/payAndCollectPlan';

export default {
  name: "collectionDialog",
  components: {
    infoTable,
    collectTableForm
  },
  props: {
    collectionDialogFlag: {
      type: Boolean,
      default: false
    },
  },
  computed: {},
  data() {
    return {
      dialogType: '',
      title: '',
      form: {
        id: '',
      },
      rules: {}
    }
  },
  created() {

  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.title = '收款'
      this.dialogType = type
      this.currentRow = row

      await this.getInfo(row.orderId)

    },
    //获取详情
    async getInfo(id) {
      const data = await receiptPaymentPlanById(id)

      const detail = data.details.filter(item => item.detailNo === this.currentRow.detailNo)?.[0]
      if(detail) {
        this.form = {
          ...detail,
          tableData: detail?.confirmList?.map(item => {
            return {
              ...item,
              receivedDate: item.paymentDate,
              receivedTotalPrice: item.paymentTotalPrice,
            }
          }) || []
        }
      }
    },

    save() {
        // 先校验公共组件内的表单
        this.$refs.collectTableFormRef.validate().then(() => {
          // 取整个表单数据
          const data = this.$refs.collectTableFormRef.getData();
          this.loading = true;
          const params = data.tableData.map((item) => {
            return {
              ...item,
              paymentDate: item.receivedDate,
              paymentTotalPrice: item.receivedTotalPrice,
              receiptPaymentId: this.currentRow.id,
              receiptPaymentCode: this.currentRow.code
            };
          });
          confirmReceiptAPI(params)
            .then(() => {
              this.loading = false;
              this.$message.success('收款成功');
              this.cancel()
              this.done()
            })
            .catch(() => {
              this.loading = false;
            });
        }).catch(() => {});
      },
    //
    async handleSave() {
      let data = await this.$refs.feeRelatedInfoTable.getTableValidate()
      console.log('data~~~', data)
      let detailList = data[0]
      // let receivableTotalPrice = data[1]
      // await finReceivableUpdateAmountAPI(this.form.id, {
      //   receivableTotalPrice: receivableTotalPrice
      // })
     await confirmReceiptAPI(detailList)
      this.$message.success('操作成功')
      this.done()
      this.cancel()
    },
    //刷新主列表数据
    done() {
      this.$emit('reload')
    },
    //关闭弹窗
    cancel() {
      this.$emit('update:collectionDialogFlag', false)
    }
  }
}
</script>
<style scoped lang="scss">

</style>