kd-aiot-frontend-wt/src/BIZComponents/inventoryTableDetails.vue

<template>
  <el-form ref="form">
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :toolkit="[]"
      :datasource="form.datasource"
      cache-key="systemRoleTable17"
      class="time-form"
    >
      <template v-slot:technicalDrawings="scope">
        <el-form-item
          :prop="'datasource.' + scope.$index + '.technicalDrawings'"
        >
          <fileMain
            v-model="scope.row.technicalDrawings"
            type="view"
          ></fileMain>
        </el-form-item>
      </template>
      <template v-slot:customerReqFiles="scope">
        <el-form-item
          :prop="'datasource.' + scope.$index + '.customerReqFiles'"
        >
          <fileMain v-model="scope.row.customerReqFiles" type="view"></fileMain>
        </el-form-item>
      </template>
      <template v-slot:industryArtFiles="scope">
        <el-form-item
          :prop="'datasource.' + scope.$index + '.industryArtFiles'"
        >
          <fileMain v-model="scope.row.industryArtFiles" type="view"></fileMain>
        </el-form-item>
      </template>
      <template v-slot:otherFiles="scope">
        <el-form-item :prop="'datasource.' + scope.$index + '. otherFiles'">
          <fileMain v-model="scope.row.otherFiles" type="view"></fileMain>
        </el-form-item>
      </template>
      <template v-slot:customerExpectDeliveryDeadline="scope">
        <div v-if="scope.row.arrivalWay == 1 || !scope.row.arrivalWay">
          {{ scope.row.customerExpectDeliveryDeadline }}
        </div>
        <div v-if="scope.row.arrivalWay == 2">
          <el-link
            type="primary"
            :underline="false"
            @click.native="handleMethod(scope.row)"
          >
            查看分批时间
          </el-link>
        </div>
      </template>
      <template v-slot:saleCount="scope">
        <el-form-item
          :prop="'datasource.' + scope.$index + '.' + countObj.countKey"
        >
          {{ scope.row[countObj.countKey] }}
          {{ scope.row[countObj.unitKey] || '' }}
        </el-form-item>
      </template>
      <!-- <template v-slot:saleUnit="scope">
        <el-form-item
          :prop="'datasource.' + scope.$index + '.' + countObj.unitKey"
        >
          {{ scope.row[countObj.unitKey] }}
        </el-form-item>
      </template> -->
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <div class="headbox">
          <div class="pricebox">
            <span class="amount" v-if="isAllPrice">总计：{{ allPrice }}元</span>
            <span class="amount" v-if="isDiscountTotalPrice"
              >优惠后总金额：{{ form.discountTotalPrice }}元</span
            >
          </div>
        </div>
      </template>
    </ele-pro-table>
    <timeDialog ref="timeDialogRef" :view="true"></timeDialog>
  </el-form>
</template>
<script>
  import dictMixins from '@/mixins/dictMixins';

  // import fileMain from '@/components/addDoc/index.vue';
  import { contactQueryByCategoryIdsAPI } from '@/api/bpm/components/supplierManage/contact';
  const dayjs = require('dayjs');
  import { lbjtList, levelList } from '@/enum/dict.js';
  import timeDialog from '@/components/timeDialog/index.vue';

  export default {
    mixins: [dictMixins],
    components: {
      // fileMain,
      timeDialog
    },
    props: {
      isDiscountTotalPrice: {
        default: false,
        type: Boolean
      },

      isDiscount: {
        //折让
        type: Boolean,
        default: true
      },
      isCustomerMark: {
        //客户代号必填
        type: Boolean,
        default: false
      },
      pageName: {
        default: ''
      },
      isChangeCount: {
        //默认计算
        type: Boolean,
        default: true
      },
      contractBookType: {
        //合同类型 1销售 2采购
        type: [String, Number],
        default: 1
      },
      isAllPrice: {
        //是否显示合计
        type: Boolean,
        default: true
      },
      //是否显示订单编码
      isOrderNo: {
        type: Boolean,
        default: false
      },
      isArrivalWay: {
        type: Boolean,
        default: false
      },
      countObj: {
        type: Object,
        default: () => {
          return {
            countKey: 'saleCount',
            unitKey: 'saleUnit',
            unitIdKey: 'saleUnitId'
          };
        }
      },
      //是否显示生产要求
      isProductionRequirements: {
        type: Boolean,
        default: false
      },
      quoteType: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        allPrice: 0,
        supplierObj: [],
        form: {
          discountTotalPrice: 0,
          datasource: []
        }
      };
    },
    computed: {
      columns() {
        // 基础列（新增字段之前的列）
        const baseColumns = [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },

          {
            minWidth: 200,
            prop: 'orderNo',
            label: '订单编码',
            showOverflowTooltip: true,
            align: 'center',
            isNone: !this.isOrderNo
          },
          {
            width: 280,
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            headerSlot: 'headerProductName',
            align: 'center'
          },
          {
            width: 120,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            width: 200,
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          }
        ];
        // 条件显示的新增字段列（仅当quoteType为2时显示）
        const additionalColumns =
          this.quoteType === 2
            ? [
                // 新增字段：厚度
                {
                  width: 150,
                  prop: 'thickNess',
                  label: '厚度',
                  slot: 'thickNess',
                  formatter: (row, column) => {
                    if (row.thickNess) {
                      return row.thickNess + ' mm';
                    }
                  },
                  align: 'center'
                },
                // 新增字段：平方数
                {
                  width: 150,
                  prop: 'squareNumber',
                  label: '平方数',
                  formatter: (row, column) => {
                    if (row.squareNumber) {
                      return row.squareNumber + ' m²';
                    }
                  },
                  align: 'center'
                },
                // 新增字段：加工费(未税)
                {
                  width: 150,
                  prop: 'processingFeeBeforeTax',
                  label: '加工费(未税)',
                  formatter: (row, column) => {
                    if (row.processingFeeBeforeTax) {
                      return row.processingFeeBeforeTax + ' 元';
                    }
                  },
                  align: 'center'
                },
                // 新增字段：包装费(未税)
                {
                  width: 150,
                  prop: 'packagingFeeNotTaxed',
                  label: '包装费(未税)',
                  formatter: (row, column) => {
                    if (row.packagingFeeNotTaxed) {
                      return row.packagingFeeNotTaxed + ' 元';
                    }
                  },
                  align: 'center'
                },
                // 新增字段：运输费(未税)
                {
                  width: 150,
                  prop: 'transportationFeeWithoutTax',
                  label: '运输费(未税)',
                  formatter: (row, column) => {
                    if (row.transportationFeeWithoutTax) {
                      return row.transportationFeeWithoutTax + ' 元';
                    }
                  },
                  align: 'center'
                },
                // 新增字段：未税小计
                {
                  width: 150,
                  prop: 'quotationSubtotalBeforeTax',
                  label: '未税小计',
                  align: 'center',
                  formatter: (row, column) => {
                    if (row.quotationSubtotalBeforeTax) {
                      return row.quotationSubtotalBeforeTax + ' 元';
                    }
                  }
                },
                // 新增字段：税率(%)
                {
                  width: 150,
                  prop: 'extraTax',
                  label: '税率(%)',
                  align: 'center',
                  formatter: (row, column) => {
                    return row.extraTax;
                  }
                },
                // 新增字段：含税小计
                {
                  width: 150,
                  prop: 'quotationSubtotalTax',
                  label: '含税小计',
                  align: 'center',
                  formatter: (row, column) => {
                    if (row.quotationSubtotalTax) {
                      return row.quotationSubtotalTax + ' 元';
                    }
                  }
                }
              ]
            : [];
        const remainingColumns = [
          {
            width: 200,
            prop: 'customerMark',
            label: this.contractBookType == 1 ? '客户代号' : '供应商代号',
            slot: 'customerMark',
            headerSlot: 'headerCustomerMark',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          {
            minWidth: 240,
            prop: 'taskName',
            label: '工序',
            slot: 'taskName',
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'productionCodes',
            label: '生产编号',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          {
            minWidth: 280,
            prop: 'productionRequirements',
            label: '生产要求',
            align: 'center',
            isNone: !this.isProductionRequirements
          },
          {
            minWidth: 120,
            prop: 'entrustedEnterpriseId',
            label: '受托企业',
            slot: 'entrustedEnterpriseId',
            isNone: !this.isCustomerMark,
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return (
                this.supplierObj[row.productId]?.find(
                  (item) => item.id === row.entrustedEnterpriseId
                )?.name || ''
              );
            }
          },
          {
            width: 180,
            prop: 'saleCount',
            label: '数量',
            slot: 'saleCount',
            headerSlot: 'headerTotalCount',
            align: 'center'
          },
          {
            width: 120,
            prop: 'packingSpecification',
            align: 'center',
            label: '包装规格',
            isNone: this.quoteType === 2,
            showOverflowTooltip: true
          },
          {
            width: 150,
            prop: 'totalCount',
            label: '计量数量',
            slot: 'totalCount',
            isNone: this.quoteType === 2,
            headerSlot: 'headerTotalCount',
            formatter: (row, column) => {
              if (row.totalCount) {
                return row.totalCount + ' ' + (row.measuringUnit || '');
              }
            },
            align: 'center'
          },

          {
            width: 140,
            prop: 'singleWeight',
            label: '单重',
            slot: 'singleWeight',
            headerSlot: 'headerSingleWeight',
            formatter: (row, column) => {
              if (row.singleWeight) {
                return row.singleWeight + ' ' + (row.weightUnit || '');
              }
            },
            align: 'center'
          },
          {
            width: 140,
            prop: 'totalWeight',
            label: '总重',
            slot: 'totalWeight',
            formatter: (row, column) => {
              if (row.totalWeight) {
                return row.totalWeight + ' ' + (row.weightUnit || '');
              }
            },
            align: 'center'
          },

          {
            width: 160,
            prop: 'goodsPriceType',
            label: '价格类型',
            isNone: this.quoteType === 2,
            formatter: (row, column) => {
              return this.getDictValue('商品价格类型', row.goodsPriceType);
            },
            align: 'center'
          },
          {
            width: 200,
            prop: 'singlePrice',
            label: '单价',
            slot: 'singlePrice',
            isNone: this.quoteType === 2,
            headerSlot: 'headerSinglePrice',
            align: 'center'
          },

          {
            width: 160,
            prop: 'taxRate',
            label: '税率',
            isNone: this.quoteType === 2,
            formatter: (_row, _column, cellValue) => {
              return _row.taxRate ? _row.taxRate + '%' : '';
            },
            align: 'center'
          },
          {
            width: 150,
            prop: 'notaxSinglePrice',
            label: '不含税单价',
            isNone: this.quoteType === 2,
            slot: 'notaxSinglePrice',
            align: 'center'
          },
          {
            width: 160,
            prop: 'discountSinglePrice',
            label: '折让单价',
            align: 'center',
            isNone: !this.isDiscount,
            formatter: (_row, _column, cellValue) => {
              return _row.discountSinglePrice
                ? Number(_row.discountSinglePrice).toFixed(2)
                : '';
            }
          },
          {
            width: 120,
            prop: 'totalPrice',
            label: '合计',
            slot: 'totalPrice',
            align: 'center'
          },
          {
            width: 160,
            prop: 'discountTotalPrice',
            label: '折让合计',
            align: 'center',
            isNone: !this.isDiscount,
            formatter: (_row, _column, cellValue) => {
              return _row.discountTotalPrice
                ? Number(_row.discountTotalPrice).toFixed(2)
                : '';
            }
          },
          {
            minWidth: 120,
            prop: 'goodsLevel',
            label: '物品级别',
            isNone: this.quoteType === 2,
            formatter: (_row, _column, cellValue) => {
              return levelList.find((item) => item.value == _row.goodsLevel)
                ?.label;
            },
            align: 'center'
          },
          {
            width: 110,
            prop: 'batchNo',
            label: '批次号',
            slot: 'batchNo',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          {
            width: 160,
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'modelKey',
            label: '机型',
            slot: 'modelKey',
            isNone: this.quoteType === 2,
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'colorKey',
            slot: 'colorKey',
            showOverflowTooltip: true,
            label: '颜色',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          {
            width: 120,
            prop: 'imgCode',
            align: 'center',
            label: '图号/件号',
            isNone: this.quoteType === 2,
            showOverflowTooltip: true
          },
          {
            prop: 'provenance',
            label: '产地',
            slot: 'provenance',
            align: 'center',
            isNone: this.quoteType === 2,
            minWidth: 200,
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.provenance && row.provenance.length
                ? row.provenance
                    .map((item) => this.getDictValue('产地', item))
                    .join(',')
                : '';
            }
          },
          {
            width: 120,
            prop: 'produceType',
            align: 'center',
            label: '属性类型',
            isNone: this.quoteType === 2,
            showOverflowTooltip: true,
            formatter: (row, column) => {
              if (row.produceType) {
                return row.produceType
                  .map((item) => {
                    return lbjtList[item];
                  })
                  .toString();
              }
            }
          },
          {
            width: 160,
            prop: 'arrivalWay',
            label: '到货方式',
            align: 'center',
            isNone: !this.isArrivalWay || this.quoteType === 2,
            formatter: (_row, _column, cellValue) => {
              return _row.arrivalWay == 1
                ? '一次性到货'
                : _row.arrivalWay == 2
                ? '分批到货'
                : '';
            }
          },
          {
            width: 160,
            prop: 'customerExpectDeliveryDeadline',
            label: this.contractBookType == 1 ? '客户期望交期' : '交付日期',
            slot: 'customerExpectDeliveryDeadline',
            align: 'center'
          },
          {
            width: 160,
            prop: 'produceDeliveryDeadline',
            label: '生产交付交期',
            slot: 'produceDeliveryDeadline',
            isNone: this.contractBookType != 1,
            headerSlot: 'headerProduceDeliveryDeadline',
            align: 'center'
          },

          {
            width: 200,
            prop: 'guaranteePeriod',
            label: '有效期',
            isNone: this.quoteType === 2,
            slot: 'guaranteePeriod',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
              );
            }
          },
          {
            width: 200,
            prop: 'guaranteePeriodDeadline',
            label: '有效期截止日期',
            slot: 'guaranteePeriodDeadline',
            align: 'center'
          },

          {
            width: 220,
            prop: 'customerReqFiles',
            label: '客户需求',
            slot: 'customerReqFiles',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          // {
          //   width: 100,
          //   prop: 'density',
          //   label: '密度',
          //   align: 'center'
          // },
          {
            width: 150,
            prop: 'productType',
            label: '生产加工方式',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return _row.productType == 2
                ? '加工'
                : _row.productType == 3
                ? '装配'
                : '';
            }
          },
          {
            width: 130,
            prop: 'technicalAnswerName',
            label: '技术答疑人',
            isNone: this.quoteType === 2,
            slot: 'technicalAnswerName',
            align: 'center'
          },
          {
            width: 220,
            prop: 'technicalParams',
            label: '技术参数',
            isNone: this.quoteType === 2,
            slot: 'technicalParams',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technicalDrawings',
            label: '技术图纸',
            slot: 'technicalDrawings',
            align: 'center'
          },
          {
            width: 120,
            prop: 'drawingVersion',
            isNone: this.quoteType === 2,
            label: '图纸版本',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technologyRouteName',
            label: '工艺路线',
            isNone: this.quoteType === 2,
            slot: 'technologyRouteName',
            align: 'center'
          },
          {
            width: 240,
            prop: 'industryArtFiles',
            label: '工艺附件',
            isNone: this.quoteType === 2,
            slot: 'industryArtFiles',
            align: 'center'
          },
          {
            width: 240,
            prop: 'otherFiles',
            label: '其他附件',
            slot: 'otherFiles',
            isNone: this.quoteType === 2,
            align: 'center'
          },
          {
            width: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark',
            align: 'center'
          }
        ];
        // 合并所有列
        return [
          ...baseColumns,
          ...additionalColumns,
          ...remainingColumns
        ].filter((item) => !item.isNone);
      }
    },

    created() {
      this.requestDict('生产类型');
      this.requestDict('产地');
      this.requestDict('保质期单位');
      this.requestDict('商品价格类型');
    },
    methods: {
      async getSupplierObj(productList, queryName) {
        try {
          let categoryIds = productList
            .filter((item) => item[queryName])
            .map((item) => item[queryName]);
          return await contactQueryByCategoryIdsAPI({
            categoryIds,
            isQueryEE: 1
          });
        } catch (e) {
          return Promise.resolve({});
        }
      },
      handleMethod(row) {
        this.$refs.timeDialogRef.open(row);
      },
      // 返回列表数据
      getTableValue() {
        let comitDatasource = this.form.datasource;
        if (comitDatasource.length === 0) return [];
        comitDatasource.forEach((v) => {
          if (v.guaranteePeriodUnitCode) {
            v.guaranteePeriodUnitName = this.getDictValue(
              '保质期单位',
              v.guaranteePeriodUnitCode
            );
          }
          v.technicalDrawings = v.technicalDrawings ? v.technicalDrawings : [];
          v.customerReqFiles = v.customerReqFiles || [];
          v.industryArtFiles = v.industryArtFiles || [];
          v.otherFiles = v.otherFiles || [];
        });
        return comitDatasource;
      },
      setDeliveryDays() {
        console.log(this.form.datasource, 'this.form.datasource');
        this.form.datasource.forEach((item, i) => {
          let guaranteePeriodUnitName = this.guaranteePeriodUnit(
            item.guaranteePeriodUnitCode
          );

          this.$set(
            this.form.datasource[i],
            'guaranteePeriodDeadline',
            guaranteePeriodUnitName != 'second'
              ? this.setDay(item.guaranteePeriod, guaranteePeriodUnitName)
              : ''
          );
          // }
        });
      },
      guaranteePeriodUnit(code) {
        return code == 3
          ? 'day'
          : code == 4
          ? 'month'
          : code == 5
          ? 'year'
          : 'second';
      },
      setDay(addDay, dateType = 'day') {
        console.log(addDay);
        return dayjs(this.contractStartDate || new Date())
          .add(addDay, dateType)
          .format('YYYY-MM-DD');
      },
      //修改回显
      async putTableValue(data) {
        let productList =
          (data &&
            (data.quoteProductList || data.productList || data.detailList)) ||
          [];
        if (productList) {
          this.form.datasource = productList;
          this.allPrice =
            data.totalAmount || data.totalPrice || data?.contractVO?.totalPrice;
          if (this.isDiscountTotalPrice) {
            this.form.discountTotalPrice =
              data.payAmount ||
              data.discountTotalPrice ||
              data?.contractVO?.discountTotalPrice;
          }
          // this.setDeliveryDays();

          this.supplierObj = await this.getSupplierObj(
            productList,
            'productId'
          );
          this.$refs.table.reload();
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .headbox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
      padding-right: 30px;
    }
  }

  .time-form .el-form-item {
    margin-bottom: 0 !important;
  }

  ::v-deep .period {
    display: flex;

    .borderleftnone {
      .el-input--medium .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .borderrightnone {
      .el-input--medium .el-input__inner {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  ::v-deep .time-form tbody > tr:hover > td {
    background-color: transparent !important;
  }

  ::v-deep .time-form .el-table tr {
    background-color: #ffffff;
  }

  .pricebox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
  }
</style>