kd-aiot-frontend-eom/src/views/financialManage/receivableManage/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"
  >
    <collect-table-form
      ref="collectTableFormRef"
      :form.sync="form"
      :total-price="form.receivableTotalPrice"
      :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 "./infoTable.vue";
import collectTableForm from '@/BIZComponents/collectTableForm/index.vue';
import {finReceivableSaveAPI, getFinReceivableInfoAPI, finReceivableUpdateAmountAPI} from "@/api/financialManage/receivableManage";

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

  },
  methods: {
    //初始化
    async open(row, type) {
      this.row = row || {};
      this.dialogType = type || 'update';
      this.title = this.dialogType === 'view' ? '收款详情' : '收款';
      this.info = await getFinReceivableInfoAPI(row.id);
      // 直接替换整个 form，保证 tableData 等字段响应式更新
      this.form = {
        ...this.info,
        tableData: this.info.detailList || []
      };
    },
    //获取详情
    async getInfo(id) {
      this.form = await getFinReceivableInfoAPI(id)
    },

    save() {
        // 先校验公共组件内的表单
        this.$refs.collectTableFormRef.validate().then(() => {
          // 取整个表单数据
          const data = this.$refs.collectTableFormRef.getData();
          this.loading = true;
          const params = data.tableData.map((item) => {
            return {
              ...item,
              receivableId: this.row.id,
              receivableCode: this.row.code
            };
          });
          finReceivableSaveAPI(params)
            .then(() => {
              this.loading = false;
              this.$message.success('收款成功');
              this.cancel()
              this.done()
            })
            .catch(() => {
              this.loading = false;
            });
        }).catch(() => {});
      },

      updateVisible(value) {
        this.collectionDialogFlag = value;
        if (!value) {
          this.row = {};
          this.form.tableData = [];
        }
      },
    //
    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 finReceivableSaveAPI(detailList)
      this.$message.success('操作成功')
      this.done()
      this.cancel()
    },
    //刷新主列表数据
    done() {
      this.$emit('reload')
    },
    //关闭弹窗
    cancel() {
      this.$emit('update:collectionDialogFlag', false)
    }
  }
}
</script>
<style scoped lang="scss">

</style>