klp-oa/klp-ui/src/views/wms/report/components/setting/columns.vue

<template>
  <div>
    <el-table :data="displayColumns" style="width: 100%" border row-key="prop" height="400">
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="moveUp(scope.$index)" :disabled="scope.$index === 0 || scope.row._isEmpty">上移</el-button>
          <el-button size="mini" @click="moveDown(scope.$index)"
            :disabled="scope.$index === displayColumns.length - 1 || scope.row._isEmpty">下移</el-button>
          <el-button size="mini" type="danger" @click="removeColumn(scope.$index)" :disabled="scope.row._isEmpty">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="字段名称">
        <template slot-scope="scope">
          <el-select v-model="scope.row.prop" filterable @change="(value) => propChange(value, scope.row)" size="small">
            <el-option v-for="item in optionalProps" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="表头名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.title" @blur="saveColumns" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="width" label="宽度(不填则均分剩余宽度)">
        <template slot-scope="scope">
          <el-input v-model="scope.row.width" @blur="saveColumns" size="small" />
        </template>
      </el-table-column>
      <el-table-column prop="align" label="对齐方式">
        <template slot-scope="scope">
          <el-select v-model="scope.row.align" @change="saveColumns" size="small">
            <el-option label="左对齐" value="left" />
            <el-option label="居中" value="center" />
            <el-option label="右对齐" value="right" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ColumnsSetting",
  props: {
    // 拼接key
    reportType: {
      type: String,
      default: 'coil-report-loss',
    },
  },
  data() {
    return {
      storageKey: 'preference-tableColumns',
      columns: [
        {
          title: "入场钢卷号",
          prop: "enterCoilNo",
          width: "100",
          align: "center",
        },
        {
          title: "当前钢卷号",
          prop: "currentCoilNo",
          width: "100",
          align: "center",
        },
        {
          title: "操作完成时间",
          prop: "actionCompleteTime",
          width: "100",
          align: "center",
        },
        {
          title: "生产开始时间",
          prop: "productionStartTime",
          width: "100",
          align: "center",
        },
        {
          title: "生产结束时间",
          prop: "productionEndTime",
          width: "100",
          align: "center",
        },
        {
          title: "逻辑库区",
          prop: "warehouseName",
          width: "100",
          align: "center",
        },
        {
          title: "产品类型",
          prop: "itemId",
          width: "100",
          align: "center",
        },
        {
          title: "宽度",
          prop: "computedWidth",
          width: "100",
          align: "center",
        },
        {
          title: "厚度",
          prop: "computedThickness",
          width: "100",
          align: "center",
        },
        {
          title: "重量",
          prop: "netWeight",
          width: "100",
          align: "center",
        },
        {
          title: "长度",
          prop: "length",
          width: "100",
          align: "center",
        },
        {
          title: "生产线速度",
          prop: "productionSpeed",
          width: "100",
          align: "center",
        },
        {
          title: "备注",
          prop: "remark",
          width: "100",
          align: "center",
        },
      ],
      // 可选的prop
      optionalProps: [
        { label: '入场钢卷号', value: 'enterCoilNo' },
        { label: '当前钢卷号', value: 'currentCoilNo' },
        { label: '厂家钢卷号', value: 'supplierCoilNo' },
        { label: '逻辑库区', value: 'warehouseName' },
        { label: '实际库区', value: 'actualWarehouseName' },

        { label: '质量状态', value: 'qualityStatus' },
        { label: '切边要求', value: 'trimmingRequirement' },
        { label: '包装要求', value: 'packagingRequirement' },

        { label: '产品类型', value: 'itemId' },
        { label: '品名', value: 'itemName' },
        
        { label: '规格', value: 'specification' },
        { label: '材质', value: 'material' },
        { label: '厂家', value: 'manufacturer' },
        { label: '表面处理', value: 'surfaceTreatmentDesc' },
        { label: '镀层质量', value: 'zincLayer' },
        
        { label: '实测长度', value: 'actualLength' },
        { label: '推论长度', value: 'theoreticalLength' },
        { label: '长度差值', value: 'lengthDiff' },

        { label: '厚度', value: 'computedThickness' },
        { label: '实测厚度', value: 'actualThickness' },
        { label: '推论厚度', value: 'theoreticalThickness' },
        { label: '排产厚度', value: 'scheduleThickness' },
        { label: '厚度差值', value: 'thicknessDiff' },

        { label: '宽度', value: 'computedWidth' },
        { label: '实测宽度', value: 'actualWidth' },

        { label: '毛重', value: 'grossWeight' },
        { label: '净重', value: 'netWeight' },
        { label: '创建时间', value: 'createTime' },
        { label: '创建人', value: 'createBy' },
        { label: '更新时间', value: 'updateTime' },
        { label: '更新人', value: 'updateByName' },
        { label: '备注', value: 'remark' },
        { label: '生产开始时间', value: 'productionStartTime' },
        { label: '生产结束时间', value: 'productionEndTime' },
        { label: '生产耗时', value: 'productionDuration' },
        { label: '出库状态', value: 'status' },
        { label: '操作完成时间', value: 'actionCompleteTime' },
        { label: "生产线速度", value: "productionSpeed" },
        { label: '发货绑定车牌号', value: 'bindLicensePlate' },
        { label: '发货绑定目标客户', value: 'bindConsigneeUnit' },
        { label: '发货绑定单位', value: 'bindSenderUnit' },
        { label: '发货绑定负责人', value: 'bindPrincipal' },
        { label: '发货配卷时间', value: 'bindDeliveryTime' },
        { label: '发货时间', value: 'exportTime' },
        { label: '业务员', value: 'saleName' },
        { label: '合同号', value: 'contractNo' },
        
        { label: '原料材质', value: 'packingStatus' },
        { label: '原料厚度', value: 'rawMaterialThickness' }
      ],
    }
  },
  watch: {
    reportType: {
      handler(newVal, oldVal) {
        this.loadColumns()
      },
      immediate: true
    }
  },
  computed: {
    // 完整的storageKey
    completeStorageKey() {
      return this.storageKey + '-' + this.reportType
    },
    // 显示的列数据
    displayColumns() {
      // 复制原始列数据
      const displayData = [...this.columns]
      // 添加一个空行
      displayData.push({
        title: "",
        prop: "",
        width: "100",
        align: "center",
        _isEmpty: true
      })
      return displayData
    }
  },
  mounted() {
    this.loadColumns()
    // this.$nextTick(() => {
    //   this.initDragSort()
    // })
  },
  methods: {
    moveUp(index) {
      if (index > 0 && !this.displayColumns[index]._isEmpty) {
        const temp = this.columns[index]
        this.columns.splice(index, 1)
        this.columns.splice(index - 1, 0, temp)
        this.saveColumns()
      }
    },
    moveDown(index) {
      if (index < this.columns.length - 1 && !this.displayColumns[index]._isEmpty) {
        const temp = this.columns[index]
        this.columns.splice(index, 1)
        this.columns.splice(index + 1, 0, temp)
        this.saveColumns()
      }
    },
    removeColumn(index) {
      if (!this.displayColumns[index]._isEmpty) {
        this.columns.splice(index, 1)
        this.saveColumns()
      }
    },
    saveColumns() {
      // 只存储非空行
      const nonEmptyColumns = this.columns.filter(col => col.prop && col.title)
      localStorage.setItem(this.completeStorageKey, JSON.stringify(nonEmptyColumns))
    },
    propChange(propValue, row) {
      // 查找对应的label
      const item = this.optionalProps.find(item => item.value === propValue)
      if (item) {
        row.title = item.label
      } else {
        row.title = propValue
      }
      
      // 如果是空行且已经填写了prop，则添加到实际列中
      if (row._isEmpty && propValue) {
        const newColumn = {
          title: row.title,
          prop: row.prop,
          width: row.width,
          align: row.align
        }
        this.columns.push(newColumn)
        this.saveColumns()
      } else {
        this.saveColumns()
      }
    },
    loadColumns() {
      const savedColumns = localStorage.getItem(this.completeStorageKey)
      if (savedColumns) {
        this.columns = JSON.parse(savedColumns)
      }
    },
  },
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}

.el-table__row {
  cursor: move;
}
</style>