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

<template>
  <div>
    <!-- <el-dialog
      title="领料列表"
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="80%"
    > -->
    <ele-modal
      title="领料列表"
      :visible.sync="visible"
      v-if="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :maxable="true"
      :close-on-press-escape="false"
      id="formId"
      append-to-body
      width="80%"
      @update:fullscreen="fullscreen"
      :fullscreen="isFullscreen"
      :height="dialogDynamicHeight"
    >
      <div class="tableZ_box">
        <div class="row">
          <div class="col">
            <div class="name">领料时间</div>
            <div class="content">{{ dataObj.createTime }}</div>
          </div>
          <div class="col">
            <div class="name">领料单号</div>
            <div class="content">{{ dataObj.code }}</div>
          </div>

          <div class="col">
            <div class="name">领料人</div>
            <div class="content">{{ dataObj.executorName }}</div>
          </div>
        </div>
      </div>

      <div v-for="(item, index) in dataObj.orderInfoList" :key="index">
        <ele-pro-table
          ref="table"
          :columns="columns"
          max-height="320px"
          :datasource="item.arr"
          cache-key="detailed"
          highlight-current-row
          :need-page="false"
          v-if="item.bomDetailDTOS.length > 0 || item.instanceList.length > 0"
        >
          <template v-slot:toolbar>
            <div class="c_title"> 工单编号: {{ item.code }} </div>
          </template>

          <template v-slot:empty>
            <div class="empty">暂无领料数据</div>
          </template>

          <template v-slot:index="{ row, $index }">
            {{ $index + 1 }}
          </template>
          <template v-slot:rootCategoryLevelName="{ row, $index }">
            <el-tag>{{ row.rootCategoryLevelName }}</el-tag>
          </template>

          <template v-slot:warehouseLeaderName="{ row }">
            <span style="color: #faad14"> {{ row.warehouseLeaderName }} </span>
          </template>

          <template v-slot:demandQuantity="{ row }">
            {{ row.demandQuantity }} {{ row.unit }}
          </template>

          <!-- 操作列 -->
          <template v-slot:action="{ row, $index }">
            <el-link
              type="text"
              @click="outboundDetails(row, $index)"
              v-if="dataObj.status == 2"
              >出库详情</el-link
            >
          </template>
        </ele-pro-table>
      </div>

      <div class="card_box" v-if="outboundDetailList.length != 0">
        <div class="rx-bc">
          <div class="item_box rx-bc">
            <div class="time">出库单详情 </div>
          </div>
        </div>
        <ele-pro-table
          ref="table"
          :columns="columnsTwo"
          max-height="320px"
          :datasource="outboundDetailList"
          cache-key="detailed"
          highlight-current-row
          :need-page="false"
        >
          <template v-slot:empty>
            <div class="empty">暂无领料数据</div>
          </template>

          <template v-slot:index="{ row, $index }">
            {{ $index + 1 }}
          </template>

          <template v-slot:status="{ row }">
            <el-tag>已出库</el-tag>
          </template>

          <template v-slot:weight="{ row, $index }">
            <span>{{ row.weight || 0 }}{{ row.weightUnit }}</span>
          </template>

          <!-- <template v-slot:action="{ row, $index }">
            <el-link
              type="text"
              @click="outboundDetails(row, $index)"
              v-if="dataObj.status == 2"
              >出库详情</el-link
            >
          </template> -->
        </ele-pro-table>
      </div>

      <!-- </el-dialog> -->
    </ele-modal>
    <outboundDetail ref="outboundDetailRef" />
  </div>
</template>
<script>
  import outboundDetail from './outboundDetail.vue';
  import { getOutboundDetail } from '@/api/produce/picking.js';

  export default {
    components: { outboundDetail },
    props: {
      detailedObj: {}
    },
    data() {
      return {
        visible: true,
        dataObj: null,
        outboundDetailList: [],
        isFullscreen: false,
        tabalHeight: 300
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 120,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'index'
          },
          {
            width: 120,
            prop: 'batchNo',
            slot: 'batchNo',
            label: '批次号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'rootCategoryLevelName',
            label: '领料类型',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'categoryName',
            label: '名称',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },

          {
            prop: 'taskName',
            label: '工序名称',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },

          {
            prop: 'demandQuantity',
            label: '数量',
            align: 'center',
            slot: 'demandQuantity',
            showOverflowTooltip: true
          },

          {
            prop: 'warehouseName',
            label: '领料仓库',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'warehouseLeaderName',
            slot: 'warehouseLeaderName',
            label: '审核人',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'action',
            label: '操作',
            align: 'center',
            fixed: 'right',
            slot: 'action',
            resizable: false,
            showOverflowTooltip: true
          }
        ];
      },

      taskObj() {
        return this.$store.state.user.taskObj;
      },
      columnsTwo() {
        let columnsVersion = this.columnsVersion;
        return [
          ...[
            {
              width: 55,
              type: 'index',
              columnKey: 'index',
              align: 'center',
              label: '序号',
              fixed: 'left'
            },
            {
              minWidth: 120,
              prop: 'categoryCode',
              label: '编码',
              align: 'center',
              fixed: 'left',
              showOverflowTooltip: true
            },
            {
              width: 100,
              prop: 'batchNo',
              label: '批次号',
              slot: 'batchNo',
              align: 'center'
            },
            {
              minWidth: 140,
              prop: 'name',
              label: '名称',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'feedQuantity',
              label: '数量',
              slot: 'feedQuantity',
              align: 'center'
            },
            {
              width: 150,
              prop: 'unit',
              label: '单位',
              slot: 'unit',
              align: 'center'
            },
            {
              prop: 'weight',
              slot: 'weight',
              label: '重量',
              width: 120,
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'modelType',
              label: '型号',
              slot: 'modelType',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'specification',
              label: '规格',
              slot: 'specification',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'brandNum',
              label: '牌号',
              slot: 'brandNum',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'status',
              label: '状态',
              slot: 'status',
              align: 'center',
              showOverflowTooltip: true
            }
          ]
        ];
      },

      dialogDynamicHeight() {
        if (this.isFullscreen) {
          // 全屏时，高度为窗口高度
          console.log(window.innerHeight + 'px', '全屏高度');
          this.tabalHeight = window.innerHeight - 200;
          return window.innerHeight + 'px';
        } else {
          this.tabalHeight = 300;
          return '500px';
        }
      }
    },

    methods: {
      handleClose() {
        this.$emit('detailedClose');
      },

      outboundDetails(item, index) {
        console.log(item, index, 'item, index');
        this.$refs.outboundDetailRef.open(item);
      },

      async getOutboundDetailList() {
        await getOutboundDetail({
          pickOrderId: this.dataObj.id
        }).then((res) => {
          this.outboundDetailList = res;
        });
      },

      fullscreen() {
        this.isFullscreen = !this.isFullscreen;
      }
    },

    created() {
      let obj = JSON.parse(this.detailedObj);

      obj.orderInfoList.forEach((o) => {
        let _arr = [];
        _arr = [...o.bomDetailDTOS, ...o.instanceList];
        _arr = _arr.sort(
          (a, b) => a.rootCategoryLevelId - b.rootCategoryLevelId
        );
        o['arr'] = _arr;
      });

      this.dataObj = obj;

      this.getOutboundDetailList();
    }
  };
</script>

<style lang="scss" scoped>
  .tableZ_box {
    border: 1px solid #e3e5e5;
    margin: 6px 0;

    &:last-child {
      border-bottom: none;
    }

    .row {
      width: 100%;
      display: flex;
    }

    .col {
      width: calc(100% / 5);
      display: flex;
      align-items: center;
      min-width: 200px;
      min-height: 32px;
      border-bottom: 1px solid #e3e5e5;
      border-right: 1px solid #e3e5e5;

      &:last-child {
        border-right: none;
      }

      .name {
        display: flex;
        align-items: center;
        padding: 4px;
        width: 80px;
        height: 100%;
        background-color: #d0e4d5;
        color: #000;
      }

      .content {
        padding: 4px 6px;
        color: #000;
      }
    }

    .pd6 {
      padding: 0 6px;
    }
  }
  .tableZ_box {
    .col {
      width: calc(100% / 3);
    }
  }

  .tag_box {
    span {
      display: inline-block;
      padding: 2px 4px;
      background: #e6f7ff;
      margin: 0 4px;
    }
  }

  .rx-bc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }

  .item_box {
    margin-top: 5px;
    margin-bottom: 6px;
    padding: 0 10px;

    .round {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      background: #157a2c;
      color: #fff;
      text-align: center;
      font-size: 12px;
    }

    .time {
      color: #157a2c;
      font-family: PingFang HK;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      margin-left: 8px;
    }
  }
</style>