kd-aiot-frontend-mes/src/views/produce/components/picking/pickingList.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="75%"
  >
    <el-card shadow="never">
      <pickingListSearch @search="reload" ref="searchRef" />

      <ele-split-layout
        width="244px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <AssetTree
            ref="assetTreeRef"
            :treeIds="treeIds"
            @handleNodeClick="handleNodeClick"
            @setRootId="setRootId"
          />
        </div>
        <!-- 表格 -->

        <template v-slot:content>
          <ele-pro-table
            :initLoad="false"
            ref="table"
            :columns="columns"
            :datasource="datasource"
            :selection.sync="selection"
            row-key="id"
            height="calc(100vh - 350px)"
            class="dict-table"
            :cache-key="tableKey"
            :row-style="rowStyle"
            :row-click-checked="true"
            :row-click-checked-intelligent="false"
            @update:selection="handleSelectionChange"
          >
            <template v-slot:toolbar>
              <el-alert
                type="info"
                :closable="false"
                class="ele-alert-border"
                style="width: 300px"
              >
                <i class="el-icon-info ele-text-info"></i>
                <span class="ele-text">
                  <span>
                    已选择
                    <b class="ele-text-info">{{ allSelection.length }}</b>
                    项数据<em></em>
                  </span>
                </span>
                <el-link type="primary" :underline="false" @click="clearChoose">
                  清空
                </el-link>
              </el-alert>
            </template>

            <template v-slot:code="{ row }">
              {{ row.rootCategoryLevelId == 4 ? row.codeNumber : row.code }}
            </template>

            <template v-slot:runStatus="{ row }">
              {{ stateList[Number(row.runStatus)] }}
            </template>

            <template v-slot:vehicleLen="{ row }">
              {{ row.extInfo.vehicleLen || '-' }}
              {{ row.extInfo.wilde || '-' }} {{ row.extInfo.hight || '-' }}
            </template>

            <template v-slot:status="{ row }">
              <span
                :style="{ color: row.status == 0 ? '#157A2C' : '#FFA929' }"
                >{{
                  row.status == 0 ? '空闲' : row.status == 1 ? '占用' : ''
                }}</span
              >
            </template>

            <template v-slot:packingCountBase="{ row }">
              {{ row.packingCountBase }} {{ row.minUnit }}
            </template>

            <template v-slot:availableCountBase="{ row }">
              {{ row.availableCountBase }} {{ row.measuringUnit }}
            </template>

            <template v-slot:weight="{ row }">
              {{ row.weight }} {{ row.weightUnit }}
            </template>

            <!-- 库存保质期 -->
            <template v-slot:expirationDate="{ row }">
              <span v-if="row.expirationDate">
                {{ row.expirationDate ? row.expirationDate : '-' }}
                {{
                  row.expirationDateUnit == 'year'
                    ? '年'
                    : row.expirationDateUnit == 'month'
                    ? '月'
                    : '日'
                }}
              </span>
            </template>
            <!-- 质检状态 -->
            <template v-slot:qualityStatus="{ row }">
              <span v-if="row.qualityResult == 0 || row.qualityResult == 1"
                >已检</span
              >
              <span v-else-if="row.qualityStatus == 1">已检</span>
              <span v-else-if="row.qualityStatus == 0">未检</span>
              <span v-else>-</span>
            </template>
            <!-- 质检结果 -->
            <template v-slot:qualityResult="{ row }">
              <span v-if="row.qualityResult == 0 || row.qualityResult == ''"
                >合格</span
              >
              <span v-else-if="row.qualityResult == 1">不合格</span>
              <span v-else-if="row.qualityResult == 3">让步接收</span>
              <span v-else>-</span>
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>

    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import AssetTree from '../../components/assetTree.vue';
  import pickingListSearch from './pickingListSearch.vue';
  import {
    pageeLedgerMain,
    assetPage,
    listInProduct
  } from '@/api/produce/workOrder';

  export default {
    components: { AssetTree, pickingListSearch },
    props: {
      isType: {
        type: String,
        default: '',
        required: true
      }
    },
    data() {
      return {
        visible: false,

        id: null,
        treeIds: null,
        categoryLevelId: null,
        rootCategoryLevelId: null,
        isCategory: true,

        stateList: [
          '启动',
          '空闲',
          '运行',
          '故障',
          '检修',
          '停机',
          '待料',
          '占用'
        ],

        selection: [],

        allSelection: [],
        temporaryList: []
      };
    },

    computed: {
      tableKey() {
        return `table-${this.rootCategoryLevelId}`;
      },

      // 表格列配置
      columns() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 50,
            align: 'center'
          },
          {
            prop: 'code',
            label: '设备编码',
            slot: 'code'
          },
          {
            prop: 'codeNumber',
            label: '编号',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            showOverflowTooltip: true
          },

          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center'
          },
          // {
          //   prop: 'manualBatchNo',
          //   label: '批次号',
          //   align: 'center'
          // },
          {
            prop: 'availableCountBase',
            label: '计量库存数量',
            sortable: 'custom',
            slot: 'availableCountBase',
            showOverflowTooltip: true,
            width: 130,
            align: 'center'
          },

          ...([1, 23, 8].includes(Number(this.rootCategoryLevelId))
            ? [
                {
                  prop: 'packingCountBase',
                  label: '包装库存',
                  slot: 'packingCountBase',
                  showOverflowTooltip: true
                }
              ]
            : []),

          {
            prop: 'weight',
            label: '重量',
            showOverflowTooltip: true,
            slot: 'weight'
          },

          {
            prop: 'expirationDate',
            slot: 'expirationDate',
            label: '库存保质期',
            width: 100
          },
          {
            prop: 'expirationTime',
            label: '周期倒计时',
            showOverflowTooltip: true,
            width: 100
          },
          {
            prop: 'qualityResult',
            slot: 'qualityResult',
            label: '质检结果',
            showOverflowTooltip: true,
            width: 100
          },
          {
            prop: 'qualityStatus',
            slot: 'qualityStatus',
            label: '质检状态',
            showOverflowTooltip: true,
            width: 100
          },
          {
            prop: 'pathName',
            width: 230,
            label: '仓库',
            showOverflowTooltip: true
          },

          ...(this.rootCategoryLevelId == '4'
            ? [
                {
                  prop: 'workstationName',
                  label: '工位',
                  showOverflowTooltip: true
                },

                {
                  prop: 'runStatus',
                  label: '状态',
                  slot: 'runStatus',
                  showOverflowTooltip: true
                }
              ]
            : []),

          // ...(this.rootCategoryLevelId == '5'
          //   ? [
          //       {
          //         prop: 'dieHoleNum',
          //         label: '模孔数量',
          //         showOverflowTooltip: true
          //       },
          //       {
          //         prop: 'mandrelDiameter',
          //         label: '芯棒直径',
          //         showOverflowTooltip: true
          //       },
          //       {
          //         prop: 'shrinkEffictive',
          //         label: '收缩系数',
          //         showOverflowTooltip: true
          //       }
          //     ]
          //   : []),

          // ...(this.rootCategoryLevelId == '7'
          //   ? [
          //       {
          //         prop: 'materialQuality',
          //         label: '材质',
          //         showOverflowTooltip: true
          //       },

          //       {
          //         prop: 'vehicleLen',
          //         label: '长宽高',
          //         slot: 'vehicleLen',
          //         showOverflowTooltip: true
          //       }
          //     ]
          //   : []),

          ...(this.rootCategoryLevelId == '8'
            ? [
                {
                  prop: 'extInfo.slotNum',
                  label: '槽数',
                  showOverflowTooltip: true
                }
              ]
            : []),

          ...(this.rootCategoryLevelId == '11'
            ? [
                {
                  prop: 'status',
                  label: '状态',
                  slot: 'status',
                  showOverflowTooltip: true
                },

                {
                  prop: 'region',
                  label: '位置',
                  showOverflowTooltip: true
                }
              ]
            : [])
        ];
      }
    },
    watch: {},
    methods: {
      /* 表格数据源 */
      async datasource({ page, where, limit }) {
        let URL;

        let param = {
          ...where,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId
        };
        if (this.isType == 'pick') {
          param.dimension = 1;

          URL = pageeLedgerMain;
        } else if (this.isType == 'feed') {
          if ([4, 7, 14].includes(Number(this.rootCategoryLevelId))) {
            URL = assetPage;
          } else if (this.rootCategoryLevelId == 2) {
            param.workOrderId = this.id;
            delete param.taskId;
            delete param.categoryLevelId;
            URL = listInProduct;
          } else if (
            ![2, 4, 7, 14].includes(Number(this.rootCategoryLevelId))
          ) {
            URL = assetPage;
          }
        } else if (this.isType == 'job') {
          URL = assetPage;
        }

        const res = await URL(param);

        if (this.rootCategoryLevelId == '11') {
          let _res = res;
          let _list = [];
          _res.list.forEach((e) => {
            if (e.aridRegionList && e.aridRegionList.length != 0) {
              e.aridRegionList.map((i) => {
                let obj = {
                  name: e.name,
                  region: e.extInfo.region,
                  rootCategoryLevelId: e.rootCategoryLevelId,
                  ...i,
                  instanceId: i.id
                };
                _list.push(obj);
              });
            }
          });
          res.list = _list;
          return res;
        } else {
          let _res = res;
          let _list = [];

          _list.push(
            ..._res.list.map((i) => {
              const warehouseId = i.pathIds && i.pathIds.split(',')[0];

              return {
                warehouseId,
                ...i,
                instanceId: i.id
              };
            })
          );

          res.list = _list;
          return res;
        }
      },

      handleSelectionChange(data) {
        this.allSelection = data;
      },

      /* 清空选择 */
      clearChoose() {
        this.allSelection = [];
        this.$refs.table.clearSelection();
      },
      rowStyle({ row }) {
        return this.selection.includes(row) ? { background: '#e6f7ff' } : null;
      },
      handleNodeClick(data) {
        console.log(data, 'handleNodeClick');
        this.isCategory = true;
        this.categoryLevelId = data.id;
        this.rootCategoryLevelId = data.rootCategoryLevelId;
        this.reload();
      },

      setRootId(data) {
        this.categoryLevelId = data.id;
        this.rootCategoryLevelId = data.rootCategoryLevelId;
        this.reload();
      },

      /* 刷新表格 */
      reload(where) {
        this.$nextTick(() => {
          this.isCategory = false;
          this.$refs.table.reload({ pageNum: 1, where: where });
        });
      },

      onDone() {
        this.$nextTick(() => {
          this.allSelection.forEach((item) => {
            this.$refs.table.toggleRowSelection(item, true);
          });
        });
      },
      open(id, item, t) {
        this.id = id;

        if (t) {
          this.title = t;
        } else {
          this.title = '领料列表';
        }

        if (this.isType == 'pick') {
          this.temporaryList = item.pickList || [];
          this.allSelection = item.pickList || [];
          this.visible = true;
          this.$nextTick(() => {
            this.allSelection.forEach((item) => {
              this.$refs.table.toggleRowSelection(item, true);
            });
          });
        } else if (this.isType == 'feed') {
          let feedList = [];
          feedList = [
            ...item.modelList,
            ...item.equipmentList,
            ...item.instanceList,
            ...item.aridRegionList,
            ...item.turnover,
            ...item.palletList,
            ...item.revolvingDiskList,
            ...item.semiProductList
          ];
          this.temporaryList = feedList || [];
          this.allSelection = feedList || [];
          this.visible = true;

          this.$nextTick(() => {
            feedList.forEach((item) => {
              this.$refs.table.toggleRowSelection(item, true);
            });
          });
        } else if (this.isType == 'job') {
          let feedList = [];
          feedList = [...item.turnover, ...item.equipmentList];
          this.temporaryList = feedList || [];
          this.allSelection = feedList || [];
          this.visible = true;

          this.$nextTick(() => {
            feedList.forEach((item) => {
              this.$refs.table.toggleRowSelection(item, true);
            });
          });
        }
      },

      handleClose() {
        this.clearChoose();
        this.temporaryList = [];
        this.allSelection = [];
        this.visible = false;
      },
      selected() {
        if (this.allSelection.length == 0) {
          this.$message.warning('请选择物料');
          return false;
        }

        if (this.temporaryList.length > 0) {
          // 使用Promise来“模拟”异步操作
          new Promise((resolve) => {
            if (this.temporaryList.length > 0) {
              this.temporaryList.forEach((item) => {
                this.allSelection.forEach((item2) => {
                  if (item.id == item2.id && this.isType == 'pick') {
                    this.$set(
                      item2,
                      'demandQuantity',
                      item.demandQuantity || null
                    );
                  } else if (item.id == item2.id && this.isType == 'feed') {
                    this.$set(item2, 'feedQuantity', item.feedQuantity || null);
                  }
                });
              });
            }
            this.allSelection.sort(
              (a, b) => a.rootCategoryLevelId - b.rootCategoryLevelId
            );

            resolve();
          }).then(() => {
            this.$emit('allSelection', this.id, this.allSelection);
            this.handleClose();
          });
        } else {
          this.allSelection.sort(
            (a, b) => a.rootCategoryLevelId - b.rootCategoryLevelId
          );

          this.$emit('allSelection', this.id, this.allSelection);
          this.handleClose();
        }
      }
    },

    created() {
      if (this.isType == 'pick') {
        // this.treeIds = '1, 5, 7, 8, 10, 13, 14, 23, 26, 9, 28';
        this.treeIds = '9, 23, 2, 1, 4, 14, 5, 8, 16, 13, 15, 6, 10, 22';
      } else if (this.isType == 'feed') {
        this.treeIds = '1, 2, 4, 5, 7, 8, 10, 11, 13, 14, 26, 9, 23,28';
      } else if (this.isType == 'job') {
        this.treeIds = '4, 7';
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
  }

  .table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }

  .pagination {
    text-align: right;
    padding: 10px 0;
  }

  .btns {
    text-align: center;
    padding: 10px 0;
  }

  .topsearch {
    margin-bottom: 15px;
  }

  ::v-deep .is-checked {
    background: #e6f7ff;
  }
</style>