kd-aiot-frontend-eom/src/views/purchasingManage/purchaseOrder/components/billDetailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="billDetailDialogFlag"
    title="详情"
    :close-on-click-modal="false"
    append-to-body
    width="70%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      max-height="500px"
      :datasource="datasource"
      :span-method="objectSpanMethod"
      cache-key="systemRoleTableBillDetailDialog"
      class="time-form"
      :need-page="false"
    >
    </ele-pro-table>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>

  </ele-modal>
</template>


<script>


import {getProductsNumberDetail} from "@/api/purchasingManage/purchaseOrder";
import fileMain from "@/components/addDoc/index.vue";

export default {
  name: "billDetailDialog",
  components: {fileMain},
  props: {
    billDetailDialogFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      arrName: {
        1: 'requirementIds',
        2: 'planIds',
        3: 'inquiryIds',
        4: 'contractIds',
        // 5: 'contractIds',
        // 6: 'contractIds',
      },
      spanArr: [],
      type: '',
      datasource: []
    };
  },
  computed: {
    columns() {
      return [
        {
          width: 45,
          type: 'index',
          columnKey: 'index',
          align: 'center',
          fixed: 'left'
        },

        {
          minWidth: 120,
          prop: 'relationType',
          label: '单据类型',
          align: "center"
        },
        {
          minWidth: 100,
          prop: 'sourceCode',
          label: '单据编码',
          align: "center"
        },
        {
          minWidth: 100,
          prop: 'sourceName',
          label: '单据名称',
          show: this.type != 5,
          align: "center"
        },
        {
          minWidth: 100,
          prop: 'productCode',
          label: '编码',
          align: "center"
        },
        {
          minWidth: 100,
          prop: 'productName',
          label: '名称',
          align: "center",
        },
        {
          minWidth: 100,
          prop: 'supplierName',
          show: this.type == 3,
          label: '供应商名称',
          align: "center",
        },
        {
          minWidth: 100,
          prop: 'supplierCode',
          show: this.type == 3,
          label: '供应商编码',
          align: "center",
        },

        // {
        //   width: 80,
        //   prop: 'doneTotalCount',
        //   label: '已采数量',
        //   slot: 'doneTotalCount',
        //   headerSlot: 'doneTotalCount',
        //   align: "center"
        //
        // },
        // {
        //   width: 80,
        //   prop: 'waitTotalCount',
        //   label: '待采数量',
        //   slot: 'waitTotalCount',
        //   headerSlot: 'waitTotalCount',
        //   align: "center"
        // },
        {
          minWidth: 80,
          prop: 'totalCount',
          label: '数量',
          align: "center",
        },
        {
          minWidth: 100,
          prop: 'weightUnit',
          label: '重量单位',
          align: "center",
        },
        {
          minWidth: 100,
          prop: 'measuringUnit',
          label: '计量单位',
          align: "center",
        },
        {
          minWidth: 140,
          prop: 'deliveryDeadline',
          label: this.type == 4 ? '客户期望交期' : '预计到货时间',
          align: "center",
        },
      ]
    },
  },
  methods: {
    async open(row, type) {
      this.type = type
      await this.getInquiryData(row, type);
      this.getSpanArr()
    },
    async getInquiryData(row, type = 1) {
      let arrName = this.arrName[type]
      let params = {
        productCode: row.productCode,
        relationType: type,
        taskId: row.taskId,
        batchNo: row.batchNo,
        relationIds: this.type != 5 ? (row[arrName] || []) : ([...row.requirementIds, ...row.planIds, ...row.inquiryIds, ...row.contractIds] || [])
      }
      this.loading = true;
      try {
        this.datasource = await getProductsNumberDetail(params);
      } catch {
        this.datasource = [];
      }
      this.loading = false;

    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (this.columns[columnIndex]?.isMerge) {
        const _row = this.spanArr[rowIndex]?.sourceCode || 0;
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      return {
        rowspan: 1,
        colspan: 1
      };
    },
    getSpanArr() {
      let pos = 0;
      this.spanArr = [];
      this.datasource.forEach((item, index) => {
        if (index === 0) {
          let obj = {}
          this.columns.forEach(col => {
            if (col.isMerge) {
              obj[col.prop] = 1
            }
          });
          this.spanArr.push(obj);
        } else {
          let nameSame = item.sourceCode === this.datasource[index - 1].sourceCode;
          if (nameSame) {
            this.spanArr[pos].sourceCode += 1;
            this.spanArr.push({
              relationType: 0,
              sourceCode: 0,
              sourceName: 0,
            });
          } else {
            pos = index;
            let obj = {}
            this.columns.forEach(col => {
              if (col.isMerge) {
                obj[col.prop] = 1
              }
            });
            this.spanArr.push(obj);
          }
        }
      });
    },
    cancel() {
      this.$emit("update:billDetailDialogFlag", false);
    },
  }
}
</script>

<style scoped lang="scss">

</style>