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

<template>
  <el-dialog
    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"
            :key="tableKey"
            :cache-key="tableKey"
            :row-style="rowStyle"
            :row-click-checked="true"
            :row-click-checked-intelligent="false"
            @update:selection="handleSelectionChange"
            @done="onDone"
          >
            <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 } 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: []
      };
    },

    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: 'name',
            label: '名称',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            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
                }
              ]
            : [])
        ];
      }
    },
    watch: {},
    methods: {
      /* 表格数据源 */
      datasource({ page, where, limit }) {
        let URL = pageeLedgerMain;

        if (this.isCategory) {
          return URL({
            ...where,
            pageNum: page,
            size: limit,
            categoryLevelId: this.categoryLevelId,
            dimension: 1
          });
        } else {
          return URL({
            ...where,
            pageNum: page,
            categoryLevelId: this.categoryLevelId,
            size: limit,
            dimension: 1
          });
        }
      },
      handleSelectionChange(data) {
        this.allSelection = this.allSelection.filter(
          (f) => f.rootCategoryLevelId != this.rootCategoryLevelId
        );
        this.allSelection = [...this.allSelection, ...data];
      },

      onDone() {
        this.$nextTick(() => {
          const ids = this.allSelection.map((item) => item.id);
          this.$refs.table.setSelectedRowKeys(ids);
        });
      },

      /* 清空选择 */
      clearChoose() {
        this.allSelection = [];
        this.$refs.table.clearSelection();
      },
      rowStyle({ row }) {
        return this.selection.includes(row) ? { background: '#e6f7ff' } : null;
      },
      handleNodeClick(data) {
        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 });
        });
      },
      open(id, item) {
        this.id = id;
        this.visible = true;
      },

      handleClose() {
        this.clearChoose();
        this.visible = false;
      },
      selected() {
        if (this.allSelection.length == 0) {
          this.$message.warning('请选择物料');
          return false;
        }
        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';
      }
    }
  };
</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>