kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoice/components/inventoryTableDetails.vue

<template>
  <ele-pro-table
    ref="table"
    :needPage="false"
    :columns="columns"
    :datasource="form.datasource"
    row-key="id"
    @columns-change="handleColumnChange"
    :cache-key="cacheKeyUrl"
    :maxHeight="350"

  >
    <template v-slot:technicalDrawings="{ row }">
      <fileMain v-model="row.technicalDrawings" type="view"></fileMain>
    </template>
    <template v-slot:packagingStrength="scope">
      <DictSelection
        disabled
        dict-name="包装强度"
        v-model="scope.row.extField.packagingStrength"
      ></DictSelection>
    </template>
    <template v-slot:packagingDensity="scope">
      <DictSelection
        disabled
        dict-name="包装密度"
        v-model="scope.row.extField.packagingDensity"
      ></DictSelection>
    </template>
  </ele-pro-table>
</template>
<script>
  import dictMixins from '@/mixins/dictMixins';
  import tabMixins from '@/mixins/tableColumnsMixin';
  // import fileMain from '@/components/addDoc/index.vue';
  import getDynamicsColumns from '@/mixins/getDynamicsColumns';
  import { reviewStatusEnum, lbjtList } from '@/enum/dict';
  import { levelList } from '@/enum/dict.js';

  export default {
    mixins: [dictMixins, tabMixins,getDynamicsColumns],

    components: {
      // fileMain
    },
    data() {
      return {
        cacheKeyUrl: 'eos-saleManage-invoice-inventoryTableDetail',
        form: {
          datasource: []
        },
        columnsVersion:1
      };
    },
    created() {
      this.requestDict('产地');
      this.requestDict('生产类型');
    },
    computed: {

      columns() {
        let columnsVersion=this.columnsVersion
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            minWidth: 150,
            prop: 'orderNo',
            label: '订单编码',
            align: 'center',
            fixed: 'left'

          },
          {
            width: 200,
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            align: 'center'
          },
          {
            width: 120,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            width: 200,
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            width: 160,
            prop: 'batchNo',
            label: '批次号',
            slot: 'batchNo',
            align: 'center'
          },
          {
            width: 160,
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            align: 'center'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            minWidth: 160,
            prop: 'productionCodes',
            label: '生产编号',
            align: 'center'
          },
          {
            width: 120,
            prop: 'imgCode',
            align: 'center',
            label: '图号/件号',
            showOverflowTooltip: true
          },
          {
            width: 120,
            prop: 'produceType',
            align: 'center',
            label: '属性类型',
            formatter: (row, column) => {
              if (row.produceType) {
                return row.produceType
                  .map((item) => {
                    return lbjtList[item];
                  })
                  .toString();
              }
            },
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'goodsLevel',
            label: '物品级别',
            formatter: (_row, _column, cellValue) => {
              return levelList.find(item=>item.value==_row.goodsLevel)?.label
            },
            align: 'center'
          },
          {
            width: 120,
            prop: 'customerMark',
            label: '客户代号',
            slot: 'customerMark',
            align: 'center'
          },
          {
            width: 200,
            prop: 'warehouseName',
            label: '仓库名称',
            slot: 'warehouseName',

            align: 'center'
          },
          {
            width: 150,
            prop: 'saleCount',
            label: '发货数量',
            slot: 'saleCount',
            headerSlot: 'headerTotalCount',
            align: 'center'
          },
          {
            width: 150,
            prop: 'saleUnit',
            label: '单位',
            slot: 'saleUnit',
            headerSlot: 'headerTotalCount',
            align: 'center'
          },
          {
            width: 120,
            prop: 'packingSpecification',
            align: 'center',
            label: '包装规格',
            showOverflowTooltip: true
          },
          {
            width: 120,
            prop: 'totalCount',
            label: '计量数量',
            // slot: 'totalCount',
            // headerSlot: 'headerTotalCount',
            align: 'center'
          },
          {
            width: 120,
            prop: 'orderTotalCount',
            label: '订单数量',
            slot: 'orderTotalCount',
            align: 'center'
          },

          {
            width: 80,
            prop: 'measuringUnit',
            label: '计量单位',
            slot: 'measuringUnit',
            align: 'center'
          },

          {
            width: 120,
            prop: 'blockCount',
            label: '发货块数',
            slot: 'blockCount',
            align: 'center',
            show: false
          },
          {
            width: 120,
            prop: 'singleWeight',
            label: '单重',
            slot: 'singleWeight',
            align: 'center'
          },
          {
            width: 200,
            prop: 'receiveTotalWeight',
            label: '收货总重',
            slot: 'receiveTotalWeight',
            align: 'center',
            headerSlot: 'headerTotalCount'
          },
          {
            width: 100,
            prop: 'sendTotalWeight',
            label: '发货总重',
            slot: 'sendTotalWeight',
            align: 'center'
          },

          {
            width: 100,
            prop: 'increaseTotalWeight',
            label: '增重重量',
            slot: 'increaseTotalWeight',
            align: 'center'
          },
          {
            width: 100,
            prop: 'weightUnit',
            label: '重量单位',
            slot: 'weightUnit',
            align: 'center'
          },
          // {
          //   width: 160,
          //   prop: 'pricingWay',
          //   label: '计价方式',
          //   slot: 'pricingWay',
          //   align: 'center',
          //   formatter: (row, column) => {
          //     return row.pricingWay == 1
          //       ? '按数量计费'
          //       : row.pricingWay == 2
          //       ? '按重量计费'
          //       : '';
          //   }
          // },
          {
            width: 160,
            prop: 'singlePrice',
            label: '单价',
            slot: 'singlePrice',
            align: 'center'
          },
          {
            width: 160,
            prop: 'taxRate',
            label: '税率',
            formatter: (_row, _column, cellValue) => {
              return _row.taxRate ? _row.taxRate + '%' : '';
            },
            align: 'center'
          },
          {
            width: 160,
            prop: 'notaxSinglePrice',
            label: '不含税单价',
            align: 'center'
          },
          {
            width: 160,
            prop: 'discountSinglePrice',
            label: '折后单价',
            slot: 'discountSinglePrice',
            align: 'center'
          },
          {
            width: 120,
            prop: 'totalPrice',
            label: '合计',
            slot: 'totalPrice',
            align: 'center'
          },

          {
            width: 120,
            prop: 'discountTotalPrice',
            label: '折后合计',
            slot: 'discountTotalPrice',
            align: 'center'
          },
          ...this.dynamicsColumns,
          // {
          //   width: 120,
          //   prop: 'deliveryDays',
          //   label: '交期(天)',
          //   slot: 'deliveryDays',
          //   align: 'center'
          // },
          {
            width: 200,
            prop: 'guaranteePeriod',
            label: '有效期',
            slot: 'guaranteePeriod',
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
              );
            },
            align: 'center'
          },
          {
            width: 200,
            prop: 'guaranteePeriodDeadline',
            label: '有效期截止日期',
            slot: 'guaranteePeriodDeadline',
            align: 'center'
          },
          {
            prop: 'provenance',
            label: '产地',
            slot: 'provenance',
            align: 'center',
            // show:this.contractBookType==2,
            minWidth: 200,
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.provenance && row.provenance.length
                ? row.provenance
                    .map((item) => this.getDictValue('产地', item))
                    .join(',')
                : '';
            }
          },
          {
            width: 130,
            prop: 'technicalAnswerName',
            label: '技术答疑人',
            slot: 'technicalAnswerName',
            align: 'center'
          },
          {
            width: 220,
            prop: 'technicalParams',
            label: '技术参数',
            slot: 'technicalParams',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technicalDrawings',
            label: '技术图纸',
            slot: 'technicalDrawings',
            align: 'center'
          },
          {
            width: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark',
            align: 'center'
          }
        ];
      }
    },
    methods: {
      //修改回显
      putTableValue(data) {
        console.log(data,'data')
        if (data) {
          this.form.datasource = data;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .headbox {
    display: flex;
    justify-content: flex-start;
    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>