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

<template>
  <div>
    <el-form ref="form" :model="form">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="form.datasource"
        :needPage="false"
        :minHeight="100"
        tool-class="ele-toolbar-form"
        cache-key="eomContactPageTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            v-if="dialogType !== 'view'"
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="handleAddInfo"
          >
            新增关联信息
          </el-button>
        </template>

        <template v-slot:action="{ row, $index }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此信息吗？"
            :disabled="form.datasource.length == 1"
            @confirm="handleDelInfo($index)"
          >
            <template v-slot:reference>
              <el-link
                :disabled="form.datasource.length == 1"
                type="danger"
                :underline="false"
                icon="el-icon-delete"
              >
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
        <template
          v-slot:financeCostType="{ row, $index }"
          v-if="dialogType !== 'view'"
        >
          <el-form-item
            :prop="'datasource.' + $index + '.financeCostType'"
            :rules="{
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
            }"
          >
            <ele-tree-select
              clearable
              filterable
              :ref="'feeTypeTree' + $index"
              :data="feeTypeList"
              v-model="row.financeCostTypeName"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              @change="(val) => changeFeeTypeInfo(val, row, $index)"
              default-expand-all
            />
          </el-form-item>
        </template>
        <template
          v-slot:linkType="{ row, $index }"
          v-if="dialogType !== 'view'"
        >
          <el-form-item :prop="'datasource.' + $index + '.linkType'">
            <el-select
              v-model="row.linkType"
              @change="(val) => handleChangeFinLink(val, row, $index)"
              clearable
            >
              <el-option
                v-for="item in getLinkTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template
          v-slot:linkName="{ row, $index }"
        >
          <el-form-item v-if="dialogType !== 'view'" :prop="'datasource.' + $index + '.linkName'">
            <div
              style="display: flex; align-items: center; gap: 8px; width: 100%"
            >
              <el-input
                
                v-model="row.linkName"
                @click.native="(val) => handleSelectData(val, row, $index)"
                clearable
                style="flex: 1"
              ></el-input>
              <el-button
                v-if="row.linkId"
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleViewDetail(row)"
                style="padding: 0"
              >
                详情
              </el-button>
            </div>
          </el-form-item>
          <div
            v-else
            style="display: flex; align-items: center; gap: 8px; width: 100%"
          >
            <div style="flex: 1">{{ row.linkName }}</div>
            <el-button
              v-if="row.linkId"
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleViewDetail(row)"
              style="padding: 0"
            >
              详情
            </el-button>
          </div>
        </template>
        <template v-slot:amount="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item
            :prop="'datasource.' + $index + '.amount'"
            :rules="{
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
            }"
          >
            <el-input-number
              style="width: 100%"
              :controls="false"
              :min="0"
              v-model="row.amount"
              @change="handleChangeAmount"
              clearable
            ></el-input-number>
          </el-form-item>
        </template>
        <template v-slot:files="{ row, $index }">
          <el-form-item :prop="'datasource.' + $index + '.files'">
            <fileMain v-model="row.files" :type="dialogType"></fileMain>
          </el-form-item>
        </template>
        <template v-slot:remark="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item>
            <el-input type="textarea" v-model="row.remark" clearable></el-input>
          </el-form-item>
        </template>
        <template v-slot:headerGLLXMC="{ column }">
          <span class="is-required">{{ column.label }}</span>
        </template>
      </ele-pro-table>
    </el-form>
    <!--选择客户/供应商-->
    <customer-list-dialog
      v-if="customerListDialogFlag"
      :customerListDialogFlag.sync="customerListDialogFlag"
      ref="customerListDialogRef"
      @changeParent="getCustomerData"
    ></customer-list-dialog>
    <!--选择合同-->
    <contract-list-dialog
      v-if="contractListDialogFlag"
      :contractListDialogFlag.sync="contractListDialogFlag"
      ref="contractListDialogRef"
      @changeParent="getContractData"
      :type="contractType"
    ></contract-list-dialog>
    <!--选择销售订单-->
    <sale-order-list-dialog
      ref="saleOrderListDialogRef"
      @changeParent="getOrderData"
    ></sale-order-list-dialog>
    <!--选择采购订单-->
    <purchase-order-list-dialog
      ref="purchaseOrderListDialogRef"
      @changeParent="getOrderData"
    ></purchase-order-list-dialog>
    <!-- 选择售后工单 -->
    <SHGDListDialog
      ref="SHGDListDialogRef"
      @changeParent="getSHGDData"
    ></SHGDListDialog>
    <!-- 选择运输工单 -->
    <YSGDListDialog
      ref="YSGDListDialogRef"
      @changeParent="getYSGDData"
    ></YSGDListDialog>
    <!--商机-->
    <opportunity-dialog
      ref="opportunityDialogRef"
      v-if="opportunityDialogFlag"
      :opportunityDialogFlag.sync="opportunityDialogFlag"
      @changeParent="getOpportunityData"
    >
    </opportunity-dialog>
    <!--对账单-->
    <account-statement-dialog
      ref="accountStatementDialogRef"
      v-if="accountStatementDialogFlag"
      :accountType="accountType"
      :accountstatement-dialog-flag.sync="accountStatementDialogFlag"
      @changeParent="getAccountData"
    >
    </account-statement-dialog>
    <!--采购计划    -->
    <plan-dialog
      v-if="planDialogFlag"
      :plan-dialog-flag.sync="planDialogFlag"
      ref="planDialogRef"
      @changeParent="getPlanData"
      :collectionId="collectionId"
    >
    </plan-dialog>

    <detail-dialog ref="contactDetailDialogRef"></detail-dialog>
    <SJdrawer ref="SJdrawerRef"></SJdrawer>
    <XSdrawer ref="XSdrawerRef"></XSdrawer>
    <XSDZDdetailDialog
      ref="XSDZDdetailDialogRef"
      :detailDialogFlag.sync="xsdDialogFlag"
    ></XSDZDdetailDialog>
    <ContactDetailDialog ref="GYScontactDetailDialogRef"></ContactDetailDialog>
    <CGJHdetailDialog ref="CGJHdetailDialogRef"></CGJHdetailDialog>

    <CGDDdetailDialog ref="CGDDdetailDialogRef"></CGDDdetailDialog>
    <declarationDialog ref="declarationDialogRef"></declarationDialog>
    <KHdrawer ref="KHdrawerRef"></KHdrawer>
    <feeInfoDialog
      ref="feeInfoDialogRef"
      v-if="feeInfoDialogFlag"
      :fee-info-dialog-flag.sync="feeInfoDialogFlag"
    ></feeInfoDialog>
  </div>
</template>

<script>
import contractListDialog from '@/views/financialManage/components/contractListDialog.vue';
import customerListDialog from '@/views/financialManage/components/customerListDialog.vue';
import saleOrderListDialog from '@/views/saleManage/saleOrder/invoice/components/orderListDialog.vue';
import purchaseOrderListDialog from '@/views/purchasingManage/purchaseOrder/invoice/components/orderListDialog.vue';
import SHGDListDialog from '@/views/salesServiceManagement/workOrder/components/drawer.vue';
import YSGDListDialog from '@/views/transportManager/shipManage/taskWorkManage/components/drawer.vue';
import opportunityDialog from '@/views/financialManage/components/opportunityDialog.vue';
import accountStatementDialog from '@/views/financialManage/components/accountstatementDialog.vue';
import planDialog from '@/views/financialManage/components/planDialog.vue';
import { getTreeByPid } from '@/api/classifyManage';
import { mapGetters } from 'vuex';
import { getByCode } from '@/api/system/dictionary-data';
import fileUpload from '@/components/upload/fileUpload.vue';
import { getFile } from '@/api/system/file';
import detailDialog from '@/views/contractManage/contractBook/components/detailDialog';
import SJdrawer from '@/views/saleManage/businessOpportunity/components/drawer.vue';
import XSdrawer from '@/views/saleManage/saleOrder/components/drawer.vue';
import KHdrawer from '@/views/saleManage/contact/components/drawer.vue';
import XSDZDdetailDialog from '@/views/saleManage/saleOrder/accountstatement/components/detailDialog.vue';

import ContactDetailDialog from '@/views/purchasingManage/producerManage/components/contactDetailDialog.vue';
import CGJHdetailDialog from '@/views/purchasingManage/purchasePlanManage/components/detailDialog.vue';
import CGDDdetailDialog from '@/views/purchasingManage/purchaseOrder/components/detailDialog.vue';
import declarationDialog from '@/views/salesServiceManagement/workOrder/components/declarationDialog.vue';
import feeInfoDialog from '@/views/transportManager/shipManage/taskWorkManage/components/feeInfoDialog.vue';
// import fileMain from '@/components/addDoc/index.vue';

export default {
  name: 'relatedInfoTable',
  components: {
    // fileMain,
    fileUpload,
    purchaseOrderListDialog,
    SHGDListDialog,
    YSGDListDialog,
    saleOrderListDialog,
    customerListDialog,
    contractListDialog,
    opportunityDialog,
    accountStatementDialog,
    planDialog,
    detailDialog,
    SJdrawer,
    XSdrawer,
    XSDZDdetailDialog,
    ContactDetailDialog,
    CGJHdetailDialog,
    CGDDdetailDialog,
    declarationDialog,
    KHdrawer,
    feeInfoDialog
  },
  props: {
    link: {
      type: Array,
      default: () => []
    },
    documentType: {
      type: [String, Number],
      default: ''
    },

    dialogType: {
      type: String,
      default: ''
    },
    collectionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editIndex: undefined, //当前修改数据的下标
      contractType: undefined, //选择关联类型为合同时区分销售合同和采购合同
      contractListDialogFlag: false,
      customerListDialogFlag: false,
      opportunityDialogFlag: false,
      accountStatementDialogFlag: false,
      planDialogFlag: false,
      accountType: 1,
      feeTypeList: [],
      fin_link_type: [],
      CBToDT: {
        1: [900, 120, 100, 1000],
        2: [900, 120, 100, 230, 250, 260, 290],
        3: [230, 250, 260, 290],
        4: []
      },
      form: {
        datasource: []
      },
      rowList: [],
      xsdDialogFlag: false,

      feeInfoDialogFlag: false
    };
  },
  computed: {
    columns() {
      let list = [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'financeCostTypeName',
          label: '财务费用类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 180,
          slot: 'financeCostType',
          headerSlot: 'headerGLLXMC'
        },
        {
          prop: 'linkTypeName',
          label: '关联业务类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'linkType'
        },
        {
          prop: 'linkName',
          label: '单据名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          slot: 'linkName'
        },
        {
          prop: 'amount',
          label: '金额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'amount',
          headerSlot: 'headerGLLXMC'
        },
        {
          prop: 'files',
          label: '附件凭证',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'files'
        },
        {
          prop: 'remark',
          label: '备注',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'remark'
        }
      ];
      let action = [
        {
          columnKey: 'action',
          slot: 'action',
          label: '操作',
          resizable: false,
          width: 80,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ];
      this.dialogType === 'view'
        ? (list = [...list])
        : (list = [...list, ...action]);
      return list;
    },
    getLinkTypeList() {
      if (
        this.documentType == 4 ||
        !this.documentType ||
        !this.CBToDT[this.documentType]
      )
        return this.fin_link_type;
      let data = [];
      this.CBToDT[this.documentType].forEach((item) => {
        let find = this.fin_link_type.find((i) => i.value == item) || {};
        find.value && data.push(find);
      });
      return data;
    }
  },
  async mounted() {
    this.form.datasource = this.link;
    await this.getClassifyList(25, 'feeTypeList');
    let { data } = await getByCode('fin_link_type');
    this.fin_link_type = data.map((item) => {
      let values = Object.keys(item);
      return {
        value: values[0],
        label: item[values[0]]
      };
    });
  },
  methods: {
    //获取分类管理中的数据
    async getClassifyList(id, listName) {
      let res = await getTreeByPid(id);
      this[listName] = res.data;
    },
    downloadFile(file) {
      getFile({ objectName: file.storePath }, file.name);
    },
    //新增关联信息数据
    handleAddInfo() {
      this.form.datasource.push({
        linkType: '',
        linkTypeName: '',
        financeCostTypeName: '',
        financeCostType: '',
        linkId: '',
        linkName: '',
        linkCode: ''
      });
    },
    //选择单据触发的方法
    handleSelectData(val, row, index) {
      this.editIndex = index;
      this.rowList = val;
      if (val.target.nodeName == 'I') {
        row.linkId = '';
        row.linkName = '';
        row.linkCode = '';
        return;
      }
      console.log(row.linkType);
      switch (row.linkType) {
        case '100': //客户
          this.handleSelectContact(row);
          break;
        case '120': //商机
          this.getOpportunityList(row);
          break;
        case '130': //销售合同
          this.contractType = 1;
          this.handleSelectContract(row);
          break;
        case '140': //销售订单
          this.handleSelectSaleOrder(row);
          break;
        case '190': //销售对账单
          this.accountType = 1;
          this.handleSelectAccount(row);
          break;
        case '210': //供应商
          this.handleSelectContact(row);
          break;
        case '230': //采购计划
          this.handleSelectPlan(row);
          break;
        case '250': //采购合同
          this.contractType = 2;
          this.handleSelectContract(row);
          break;
        case '260': //采购订单
          this.handleSelectPurchaseOrder(row);
          break;
        case '290': //采购对账单
          this.accountType = 2;
          this.handleSelectAccount(row);
          break;
        case '1010': //售后工单
          this.handleSelectSHGDListDialog(row);
          break;

        case '1020': //运输工单
          this.handleSelectYSGDListDialog(row);
          break;
      }
    },
    //获取费用类别选中数据
    changeFeeTypeInfo(val, row, index) {
      this.editIndex = index;
      if (!val) {
        this.$set(
          this.form.datasource[this.editIndex],
          'financeCostTypeName',
          ''
        );
        this.$set(this.form.datasource[this.editIndex], 'financeCostType', '');
      }
      this.$nextTick(() => {
        let data =
          this.$refs['feeTypeTree' + index]?.$refs?.tree?.getCurrentNode() ||
          {};
        this.$set(
          this.form.datasource[this.editIndex],
          'financeCostTypeName',
          data.name
        );
        this.$set(
          this.form.datasource[this.editIndex],
          'financeCostType',
          data.code
        );
      });
    },

    setSelectData(val) {
      console.log(val, 'val');
      this.$set(this.form.datasource[this.editIndex], 'linkId', val.id);
      this.$set(this.form.datasource[this.editIndex], 'linkName', val.name);
      this.$set(this.form.datasource[this.editIndex], 'linkCode', val.code);
      this.$set(this.form.datasource[this.editIndex], 'amount', val.amount);
      this.handleChangeAmount();
    },
    clearData() {
      this.form.datasource = [];
    },
    handleChangeAmount(val, row) {
      let totalPrice = this.form.datasource.reduce((total, item) => {
        total += item.amount;
        return total;
      }, 0);
      this.$emit('setTotalPrice', totalPrice);
    },
    //删除关联信息数据
    handleDelInfo(index) {
      this.form.datasource.splice(index, 1);
      this.handleChangeAmount();
    },
    //修改关联类型
    handleChangeFinLink(val, row, index) {
      this.editIndex = index;
      this.setSelectData({
        id: '',
        name: '',
        code: '',
        amount: ''
      });
      this.$nextTick(() => {
        this.$refs.form.clearValidate('datasource.' + index + '.linkName');
      });
      if (!val) return (row.linkTypeName = '');
      row.linkTypeName = this.fin_link_type.find(
        (item) => item.value == val
      )?.label;
    },

    //选择客户或者供应商
    handleSelectContact(row) {
      this.customerListDialogFlag = true;
      let params = {
        id: row.contactId,
        assetTreeId: row.linkType == 210 ? '19' : '17',
        classType: row.linkType == 210 ? 2 : 1,
        titleName: row.linkType == 210 ? '选择供应商' : '选择客户'
      };
      this.$nextTick(() => {
        this.$refs.customerListDialogRef.init(params);
      });
    },
    //获取选择 供应商/客户 数据
    getCustomerData(params) {
      this.setSelectData(params);
    },
    //获取商机
    async getOpportunityList() {
      this.opportunityDialogFlag = true;
    },
    //获取选择的商机数据
    getOpportunityData(params) {
      console.log(params);
      let row = {
        id: params.id,
        name: params.name,
        code: params.code
      };
      this.setSelectData(row);
    },
    //对账单
    async handleSelectAccount() {
      this.accountStatementDialogFlag = true;
    },
    //获取选择的对账单数据
    getAccountData(params) {
      let row = {
        id: params.id,
        name: params.statementNo,
        code: params.statementNo
      };
      this.setSelectData(row);
    },
    //采购计划
    async handleSelectPlan() {
      this.planDialogFlag = true;
    },
    //获取选择的采购计划数据
    getPlanData(params) {
      let row = {
        id: params.id,
        name: params.planName,
        code: params.planCode
      };
      this.setSelectData(row);
    },
    //选择人员数据
    changeUserInfo(val, info) {
      this.form.applyUserName = info.name;
    },
    //选择合同
    handleSelectContract(val) {
      this.contractListDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.contractListDialogRef.init();
      });
    },
    //获取合同数据
    getContractData(params) {
      let row = {
        id: params.id,
        name: params.contractName,
        code: params.contractNo,
        amount: params.discountTotalPrice
      };
      this.setSelectData(row);
    },
    //选择销售订单
    handleSelectSaleOrder(val) {
      this.$refs.saleOrderListDialogRef.open();
    },
    //选择采购订单
    handleSelectPurchaseOrder(val) {
      this.$refs.purchaseOrderListDialogRef.open();
    },
    //选择售后工单
    handleSelectSHGDListDialog(val) {
      this.$refs.SHGDListDialogRef.open();
    },
    //选择运输工单
    handleSelectYSGDListDialog(val) {
      this.$refs.YSGDListDialogRef.open();
    },
    //获取采购/销售订单数据
    getOrderData(params) {
      let row = {
        id: params.id,
        name: params.orderNo,
        code: params.orderNo,
        amount: params.payAmount
      };
      this.setSelectData(row);
    },
    //获取售后工单数据
    getSHGDData(params) {
      let row = {
        ...params,
        id: params.id,
        name: params.code,
        code: params.code,
        amount: params.payAmount
      };
      this.setSelectData(row);
    },
    //获取运输工单数据
    getYSGDData(params) {
      console.log(params);

      let row = {
        ...params,
        id: params.id,
        name: params.code,
        code: params.code,
        amount: params.payAmount
      };
      this.setSelectData(row);
    },
    handleViewDetail(row) {
      let rowL = {
        ...row,
        id: row.linkId,
        orderNo: row.linkCode
      };
      console.log('完整行数据参考：', rowL);
      console.log(rowL.linkType);

      switch (rowL.linkType) {
        case '100': //客户
          this.$refs.KHdrawerRef.open(rowL, 'myList');
          break;
        case '120': //商机
          this.$refs.SJdrawerRef.open(rowL);
          break;
        case '130': //销售合同
          this.$refs.contactDetailDialogRef.open(rowL);
          break;
        case '140': //销售订单
          this.$refs.XSdrawerRef.open(rowL);
          break;
        case '190': //销售对账单
          this.xsdDialogFlag = true;
          this.$refs.XSDZDdetailDialogRef.open('view', rowL, '1');
          break;
        case '210': //供应商
          this.$refs.GYScontactDetailDialogRef.open(rowL);
          break;
        case '230': //采购计划
          this.$refs.CGJHdetailDialogRef.open(rowL);
          break;
        case '250': //采购合同
          this.$refs.contactDetailDialogRef.open(rowL);
          break;
        case '260': //采购订单
          this.$refs.CGDDdetailDialogRef.open(rowL);
          break;
        case '290': //采购对账单
          this.xsdDialogFlag = true;
          this.$refs.XSDZDdetailDialogRef.open('view', rowL, '1');
          break;
        case '1010': //售后工单
          this.$refs.declarationDialogRef.open(rowL);
          break;
        case '1020': //运输工单
          this.feeInfoDialogFlag = true;
          this.$nextTick(() => {
            this.$refs.feeInfoDialogRef.init(rowL, 'view');
          });
          break;
        case '900': //项目
          //this.handleSelectPurchaseOrder(row);
          break;
      }
    },

    getTableValidate() {
      return new Promise((resolve, reject) => {
        if (this.form.datasource.length == 0)
          return this.$message.warning('请填写关联信息');
        this.$refs.form.validate((valid) => {
          if (!valid) return this.$message.warning('请填写完整信息');
          resolve(this.form.datasource);
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 0;
}

/* 调整详情按钮 hover 样式（可选） */
:deep(.el-button--text.el-button--mini) {
  color: #409eff;
  &:hover {
    color: #66b1ff;
    background-color: rgba(64, 158, 255, 0.05);
  }
}
</style>