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%"
    :before-close="cancel"
  >
    <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.bankAccount" clearable></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="费用类型"-->
        <!--            prop="feeTypeId"-->
        <!--           -->
        <!--          >-->
        <!--            <ele-tree-select-->
        <!--              clearable-->
        <!--              filterable-->
        <!--              ref="feeTypeTree"-->
        <!--              :data="feeTypeList"-->
        <!--              v-model="form.feeTypeId"-->
        <!--              valueKey="id"-->
        <!--              labelKey="name"-->
        <!--              placeholder="请选择"-->
        <!--              @change="changeFeeTypeInfo"-->
        <!--              default-expand-all-->
        <!--            />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--        <el-col :span="8">-->
        <!--          <el-form-item-->
        <!--            label="金额"-->
        <!--            prop="amount"-->
        <!--           >-->
        <!--            <el-input-number v-model="form.amount" :precision="2" :controls="false" style="width: 100%"-->
        <!--                             :min="0"></el-input-number>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
      <!--        <el-col :span="12">-->
      <!--          <el-form-item-->
      <!--            label="会计科目"-->
      <!--            prop="accountingSubjectId"-->
      <!--           -->
      <!--          >-->
      <!--            <ele-tree-select-->
      <!--              clearable-->
      <!--              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-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>
<!--                <fileUpload-->
<!--                  v-model="form.files"-->
<!--                  module="main"-->
<!--                  :showLib="false"-->
<!--                  :limit="10"-->
<!--                />-->
              </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 :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";

export default {
  name: "add-or-edit-dialog",
  components: {
    processSubmitDialog,
    fileMain,
    fileUpload,
    personSelect,
    feeRelatedInfoTable,
    customerListDialog,
  },
  props: {
    addOrEditDialogFlag: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    ...mapGetters(['user'])
  },
  data() {
    return {
      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.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.$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,

          // callBackMethodType : '1',
          // callBackMethod : 'proTargetPlanApproveApiImpl.updatePlanApprovalStatus',
          // pcHandle : '/bpm/handleTask/components/project-manage/plan-manage/submit.vue',
          // pcView : '/bpm/handleTask/components/project-manage/plan-manage/detailDialog.vue',
          // miniHandle : '',
          // miniView : '',
        }
        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>