kd-aiot-frontend-eom/src/views/financialManage/feeManage/feeApplication/addOrEditDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="60%"
    @close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <el-form
      ref="form"
      class="el-form-box"
      :rules="rules"
      :model="form"
      label-width="120px"
    >
      <headerTitle title="基本信息"></headerTitle>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单据类型" prop="documentType">
            <dict-selection
              dict-name="单据类型"
              v-model="form.documentType"
              @change="handleDocumentType"
            ></dict-selection>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请部门" prop="applyDeptId">
            <ele-tree-select
              clearable
              :data="deptTreeList"
              v-model="form.applyDeptId"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="changeDeptInfo"
              default-expand-all
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人" prop="applyUserId">
            <personSelect
              ref="directorRef"
              v-model="form.applyUserId"
              @selfChange="changeUserInfo"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收款名称">
            <el-input
              v-model="form.collectionName"
              clearable
              @click.native="handleSelectContact"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行">
            <el-input v-model="form.bankName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账户">
            <el-input v-model="form.bankAccount" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-row style="display: flex; flex-direction: column">
            <el-col :span="24">
              <el-form-item label="金额">
                <el-input v-model="form.amount" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="repliedFiles" label="附件">
                <fileMain v-model="form.repliedFiles"></fileMain>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注">
            <el-input
              :rows="3"
              v-model="form.remark"
              type="textarea"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <headerTitle title="关联信息"></headerTitle>
    <fee-related-info-table
      ref="feeRelatedInfoTable"
      v-if="form.link.length || dialogType == 'add'"
      :link.sync="form.link"
      :documentType="form.documentType"
      @setTotalPrice="setTotalPrice"
    ></fee-related-info-table>
    <div slot="footer">
      <el-button type="primary" @click="handleSave(0)">保存</el-button>
      <el-button
        type="primary"
        v-if="isNeed_process_is_close"
        @click="handleSave(1)"
        >提交</el-button
      >
      <el-button @click="cancel">返回</el-button>
    </div>
    <!--选择客户/供应商-->
    <customer-list-dialog
      v-if="customerListDialogFlag"
      :customerListDialogFlag.sync="customerListDialogFlag"
      ref="customerListDialogRef"
      @changeParent="getCustomerData"
    ></customer-list-dialog>
    <process-submit-dialog
      api-fun-name="finfeeapplyStatusAPI"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
  </ele-modal>
</template>
<script>
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import { listOrganizations } from '@/api/system/organization';
  import { mapGetters } from 'vuex';
  import fileUpload from '@/components/upload/fileUpload.vue';
  import {
    feeApplySaveAPI,
    feeApplyUpdateAPI,
    finFeeApplySubmit,
    getFeeApplyInfoAPI
  } from '@/api/financialManage/fee-manage/fee-application';
  import { getTreeByPid } from '@/api/classifyManage';
  import feeRelatedInfoTable from '@/views/financialManage/components/feeRelatedInfoTable.vue';
  import customerListDialog from '@/views/financialManage/components/customerListDialog.vue';
  import { contactDetail } from '@/api/saleManage/contact';
  // import fileMain from '@/components/addDoc/index.vue';
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    name: 'add-or-edit-dialog',
    mixins: [dictMixins],

    components: {
      processSubmitDialog,
      // fileMain,
      fileUpload,
      personSelect,
      feeRelatedInfoTable,
      customerListDialog
    },
    props: {
      addOrEditDialogFlag: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapGetters(['user']),
      getDicts() {
        return (dictName, val) => {
          return this.getDictValue(dictName, val);
        };
      }
    },
    data() {
      return {
        fullscreen: false,
        dialogType: '',
        title: '',
        form: {
          id: '',
          documentType: '',
          collectionName: '',
          collectionId: '',
          bankName: '',
          bankAccount: '',
          accountingSubjectId: '',
          accountingSubjectCode: '',
          accountingSubjectName: '',
          amount: undefined,
          applyDeptId: '',
          applyDeptName: '',
          applyUserId: '',
          applyUserName: '',
          feeTypeId: '',
          feeTypeName: '',
          feeTypeCode: '',
          files: [],
          remark: '',
          link: []
        },
        customerListDialogFlag: false,
        processSubmitDialogFlag: false,
        feeTypeList: [],
        accountingSubjectList: [],
        deptList: [],
        deptTreeList: [],
        rules: {
          applyDeptId: { required: true, message: '请选择', trigger: 'change' },
          applyUserId: { required: true, message: '请选择', trigger: 'change' },
          // accountingSubjectId: {required: true, message: '请选择', trigger: 'change'},
          feeTypeId: { required: true, message: '请选择', trigger: 'change' },
          amount: { required: true, message: '请输入', trigger: 'blur' },
          documentType: { required: true, message: '请选择', trigger: 'change' }
        }
      };
    },
    created() {},
    methods: {
      //初始化
      async init(row = {}, type) {
        this.title = type == 'add' ? '新增' : '修改';
        this.dialogType = type;
        await this.getClassifyList(25, 'feeTypeList');
        await this.getDeptList();
        if (type == 'add') {
          this.form.applyDeptId = this.user.info.groupId;
          this.form.applyDeptName = this.user.info.groupName;
          this.form.applyUserId = this.user.info.userId;
          this.form.applyUserName = this.user.info.name;
        } else {
          await this.getFeeApplyInfoInfo(row.id);
        }
        this.$nextTick(async () => {
          await this.getUserList(this.form.applyDeptId);
        });
      },
      //获取详情
      async getFeeApplyInfoInfo(id) {
        this.form = await getFeeApplyInfoAPI(id);
        this.form.documentType = this.form.documentType + '';
      },
      //选择供应商
      handleSelectContact(row) {
        if (this.form.documentType != '3') return;
        this.customerListDialogFlag = true;
        let params = {
          id: '',
          assetTreeId: '19',
          classType: 2,
          titleName: '选择供应商'
        };
        this.$nextTick(() => {
          this.$refs.customerListDialogRef.init(params);
        });
      },
      //获取选择 供应商/客户 数据
      async getCustomerData(params) {
        let { bankList } = await contactDetail(params.id);
        this.form.bankName = bankList[0]?.bankName;
        this.form.collectionId = params.id;
        this.form.collectionName = params.name;
        this.form.bankAccount = bankList[0]?.accountNo;
        this.form.amount = '';

        this.$refs.feeRelatedInfoTable.clearData();
        // this.setSelectData(params)
      },
      //获取分类管理中的数据
      async getClassifyList(id, listName) {
        let res = await getTreeByPid(id);
        this[listName] = res.data;
      },
      //获取费用类别选中数据
      changeFeeTypeInfo(val) {
        if (!val) {
          this.form.feeTypeName = '';
          this.form.feeTypeCode = '';
        }
        let data = this.$refs.feeTypeTree?.$refs?.tree?.getCurrentNode() || {};
        this.form.feeTypeName = data.name;
        this.form.feeTypeCode = data.code;
      },
      //获取会计科目选中数据
      changeSubjectInfo(val) {
        if (!val) return (this.form.accountingSubjectName = '');
        let data = this.$refs.treeSelect?.$refs?.tree?.getCurrentNode() || {};
        this.form.accountingSubjectName = data.name;
      },
      // 获取部门数据
      getDeptList() {
        listOrganizations().then((list) => {
          this.deptList = list;
          this.deptTreeList = this.$util.toTreeData({
            data: list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        });
      },
      // 选择负责人部门
      changeDeptInfo(id) {
        const info = this.deptList.find((e) => e.id == id) || {};
        this.form.applyDeptName = info.name;
        this.form.applyUserId = '';
        this.form.applyUserName = '';
        this.getUserList(id);
      },
      // 获取人员数据
      getUserList(deptId) {
        if (deptId) {
          this.$refs.directorRef.getList({ deptId });
        }
      },
      //选择人员数据
      changeUserInfo(val, info) {
        this.form.applyUserName = info.name;
      },
      handleDocumentType(val, oldVal) {
        this.$message.warning('单据类型发生变化，请重新选择业务类型');
        this.form = Object.assign({}, this.form, {
          collectionName: '',
          collectionId: '',
          amount: '',
          bankAccount: '',
          bankName: ''
        });
        this.$refs.feeRelatedInfoTable.clearData();
      },
      setTotalPrice(val) {
        this.form.amount = val;
      },
      //
      handleSave(flag) {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return this.$message.warning('有必填项未填，请检查');
          this.form.link =
            await this.$refs.feeRelatedInfoTable.getTableValidate();
          const API =
            this.dialogType == 'add' ? feeApplySaveAPI : feeApplyUpdateAPI;
          const id = await API(this.form);
          if (flag) {
            await this.handleSub(id);
            return;
          }
          this.$message.success('操作成功');
          this.done();
          this.cancel();
        });
      },
      //提交-开启流程
      async handleSub(id) {
        let data = await getFeeApplyInfoAPI(id);
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          let params = {
            businessId: id,
            businessKey: 'fin_fee_apply',
            formCreateUserId: data.createUserId,
            variables: {
              businessName: this.getDicts('单据类型', data.documentType + ''),
              businessType: this.getDicts('单据类型', data.documentType + '')
            }
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
        // try {
        //   await finFeeApplySubmit({businessId: id})
        // } catch (e) {
        //   this.$message.error(e.message);
        // }
      },
      reload() {
        this.done();
        this.cancel();
      },
      //刷新主列表数据
      done() {
        this.$emit('reload');
      },
      //关闭弹窗
      cancel() {
        this.$emit('update:addOrEditDialogFlag', false);
      }
    }
  };
</script>
<style scoped lang="scss"></style>