kd-aiot-frontend-mes/src/views/pick/pickApply/components/selfDetailed.vue

<template>
  <div>
    <ele-modal
      title="领料列表"
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      :maxable="true"
      width="80%"
    >
      <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 class="col">
            <div class="name">类型</div>
            <div class="content" v-if="dataObj.type == 1">自建领料</div>
            <div class="content" v-if="dataObj.type == 2">工单领料</div>
            <div class="content" v-if="dataObj.type == 3">委外领料</div>
          </div>
        </div>
      </div>

      <ele-pro-table
        ref="table"
        :columns="columns"
        max-height="320px"
        :datasource="dataObj.detailList"
        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 }} <el-tag>{{ row.rootCategoryLevelName }}</el-tag>
        </template>

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

        <template v-slot:specification="{ row }">
          {{ row.specification ? row.specification : row.specifications }}
        </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 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:action="{ row, $index }">
            <el-link
              type="text"
              @click="outboundDetails(row, $index)"
              v-if="dataObj.status == 2"
              >出库详情</el-link
            >
          </template> -->
        </ele-pro-table>
      </div>
    </ele-modal>
    <outboundDetail ref="outboundDetailRef" />
  </div>
</template>
<script>
  import outboundDetail from '@/views/produce/components/picking/outboundDetail.vue';
  import { getOutboundDetail } from '@/api/produce/picking.js';
  export default {
    components: { outboundDetail },
    props: {
      detailedObj: {}
    },
    data() {
      return {
        visible: true,
        dataObj: null,
        outboundDetailList: []
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 120,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'index'
          },
          {
            width: 100,
            prop: 'batchNo',
            label: '批次号',
            slot: 'batchNo',
            align: 'center'
          },

          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true
          },

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

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

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

          {
            prop: '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',
            slot: 'specification',
            showOverflowTooltip: true
          },
          {
            prop: 'action',
            label: '操作',
            align: 'center',
            fixed: 'right',
            slot: 'action',
            resizable: false,
            showOverflowTooltip: true
          }
        ];
      },

      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'
            },
            {
              width: 150,
              prop: 'modelType',
              label: '型号',
              slot: 'modelType',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'specification',
              label: '规格',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'brandNum',
              label: '牌号',
              slot: 'brandNum',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'supplierName',
              label: '供应商',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'status',
              label: '状态',
              slot: 'status',
              align: 'center',
              showOverflowTooltip: true
            }
          ]
        ];
      }
    },

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

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

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

    created() {
      let obj = JSON.parse(this.detailedObj);
      console.log(obj, 'obj');

      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: 60px;
        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;
    }
  }

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