kd-aiot-frontend-wms/src/views/warehouseManagement/warehouseDefinition/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-form label-width="130px">
        <div class="page-title">
          <div class="page-title-div">
            <el-page-header
              @back="$router.push('/warehouseManagement/warehouseDefinition')"
              content="仓库定义详情"
            >
              <div class="title-content" slot="content">
                仓库定义详情
                <!-- <el-button
                  size="mini"
                  icon="el-icon-upload2"
                  type="primary"
                  @click="goodsInfoView"
                  >导出条码</el-button
                > -->
              </div>
            </el-page-header>
          </div>
        </div>
        <div class="content-detail">
          <div class="basic-details">
            <header-title title="基本信息:" size="16px"></header-title>

            <el-row>
              <el-col :span="8">
                <el-form-item label="仓库编码:">
                  <span>{{ warehouseInfo.code }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="仓库名称:">
                  <span>{{ warehouseInfo.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="仓库类型:">
                  <span>{{
                    warehouseInfo.inventoryType
                      | useDictLabelFilter(warehouseDefinition_inventoryList)
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态:">
                  <span>{{ warehouseInfo.enabled ? '生效' : '失效' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属工厂:">
                  <span>{{ filterFactoryId(warehouseInfo.factoryId) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权属部门">
                  <span>{{ warehouseInfo.departmentName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权属人">
                  <span>{{ warehouseInfo.ownerName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系方式">
                  <span>{{ warehouseInfo.contact }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="仓库位置">
                  <span
                    >{{ warehouseInfo.province }} / {{ warehouseInfo.city }} /
                    {{ warehouseInfo.area }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="详细地址">
                  <span>{{ warehouseInfo.address }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建人">
                  <span>{{ warehouseInfo.createUserName }}</span>
                </el-form-item>
              </el-col>

              <!-- <el-col :span="8">
              <el-form-item label="创建部门">
                <span>人力资源部</span>
              </el-form-item>
            </el-col> -->
              <el-col :span="8">
                <el-form-item label="创建时间:">
                  <span>{{ warehouseInfo.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注:">
                  <span>{{ warehouseInfo.remarks }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="basic-details mt20 warehouse-area">
            <header-title title="货位信息" size="16px"></header-title>

            <div class="status-legend">
              <div
                v-for="(item, index) in warehouseDefinition_locationStatus"
                :key="index"
              >
                <span :style="{ 'background-color': item.color }"></span
                >{{ item.label }}
              </div>
            </div>

            <el-tabs v-model="warehouseAreaActive">
              <el-tab-pane
                :key="item.id"
                v-for="(item, index) in warehouseAreasSaveList"
                :label="item.name"
                :name="index + ''"
              >
                <div class="msg">
                  <div>
                    <span class="label">库区编号</span
                    >{{ warehouseInfo.code + '-' + item.code }}
                  </div>
                  <div><span class="label">库区名称</span>{{ item.name }}</div>
                  <div>
                    <span class="label">库区类型</span
                    >{{
                      item.extInfo[0].areaType
                        | useDictLabelFilter(warehouseDefinition_inventoryList)
                    }}
                  </div>
                  <div>
                    <span class="label">库区属性</span
                    >{{
                      item.extInfo[0].attribute
                        | useDictLabelFilter(warehouseDefinition_areaAttribute)
                    }}
                  </div>
                  <div>
                    <span class="label">库区长宽高(cm)</span
                    >{{ item.extInfo[0].areaLength }}*{{
                      item.extInfo[0].areaWidth
                    }}*{{ item.extInfo[0].areaHigh }}
                  </div>
                  <div
                    ><span class="label">货架数</span>{{ item.subCount }}</div
                  >
                  <div>
                    <span class="label">货位数</span>{{ childrenLength(item) }}
                  </div>
                  <div style="width: 10px"></div>
                </div>
                <div
                  class="shelves-container"
                  v-for="itm in item.children"
                  :key="itm.id"
                >
                  <h3>货架{{ itm.code }}</h3>
                  <div class="content">
                    <div class="content-box">
                      <el-row :gutter="4">
                        <el-col
                          :span="4"
                          v-for="p in itm.children"
                          :key="p.id"
                          class="box"
                          :style="{
                            'background-color': getStatus(
                              p.warehouseStatVO.type
                            ).color,
                            color:
                              p.warehouseStatVO.type === 3 ? '#fff' : '#000'
                          }"
                          >{{ '货位' + p.code }}
                          <div class="mask">
                            {{ p.code }}
                            <div>
                              <i
                                class="el-icon-tickets"
                                @click="
                                  goodsInfoView(
                                    p,
                                    warehouseInfo.code +
                                      '-' +
                                      p.reservoirAreaCode +
                                      '-' +
                                      p.goodsShelvesCode +
                                      '-' +
                                      p.code
                                  )
                                "
                              ></i>
                              <img
                                src="~@/assets/img/transform.svg"
                                alt=""
                                @click="transformStatus(p)"
                              />
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="detail">
                      <div>
                        <span class="label">货架号</span
                        >{{ warehouseInfo.code }}-{{ item.code }}-{{ itm.code }}
                      </div>
                      <div>
                        <span class="label">货架长宽高(cm)</span
                        >{{ itm.extInfo[0].areaHigh }}*{{
                          itm.extInfo[0].areaWidth
                        }}*{{ itm.extInfo[0].areaWidth }}
                      </div>
                      <div>
                        <span class="label">货架层数</span
                        >{{ itm.extInfo[0].line }}
                      </div>
                      <div>
                        <span class="label">货位数</span
                        >{{ itm.children.length }}
                      </div>
                      <div>
                        <span class="label">空置货位数</span>
                        <!-- {{itm.children.filter((i) => i.allocationStatus === 1).length}} -->
                        {{ itm.emptyAllocationNumber }}
                      </div>
                      <div>
                        <span class="label">在用货位数</span>
                        <!-- {{ itm.children.filter((i) => i.allocationStatus === 2).length }} -->
                        {{ itm.useAllocationNumber }}
                      </div>
                      <div>
                        <span class="label">已满货位数</span>
                        <!-- {{itm.children.filter((i) => i.allocationStatus === 3) .length }} -->
                        {{ itm.fullAllocationNumber }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-form>
      <GoodsInfoDialog ref="goodsInfoRef" />
      <!-- <CodePrint ref="codePrintRef" /> -->
    </el-card>

    <el-dialog :visible.sync="statusVisible" title="变更货位状态" width="400px">
      <el-radio-group v-model="curLocation.type">
        <el-radio :label="1">正常</el-radio>

        <el-radio :label="3" :disabled="[1, 4].includes(warehouseStatVO.type)"
          >已满</el-radio
        >
        <el-radio :label="4" :disabled="[2, 3].includes(warehouseStatVO.type)"
          >失效</el-radio
        >
      </el-radio-group>
      <div slot="footer">
        <el-button
          type="primary"
          plain
          size="small"
          @click="statusVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          :loading="changeLoading"
          size="small"
          @click="confirmChange"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    warehouseDefinition_locationStatus,
    warehouseDefinition_inventoryList,
    warehouseDefinition_areaAttribute,
    useDictLabelFilter,
    useDict
  } from '@/utils/dict/index';
  // import CodePrint from './components/CodePrint';
  // import {
  //   warehouseDetails,
  //   warehouseChangeStatus
  // } from '@/api/stockManagement/warehouseDefinition';
  import GoodsInfoDialog from './components/GoodsInfoDialog.vue';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';

  export default {
    components: { GoodsInfoDialog },
    data() {
      return {
        warehouseDefinition_areaAttribute,
        warehouseDefinition_inventoryList,
        warehouseDefinition_locationStatus,
        statusVisible: false,
        warehouseAreaActive: '0',
        num: 1,
        warehouseAreasSaveList: [], //库区
        warehouseAreaGoodsshelvesList: [],
        allocationList: [],
        shelfData: [],
        detailInfo: {},
        warehouseInfo: {}, //仓储基本信息
        reservoirAreaData: [],
        factoryList: [],
        warehouseStatVO: {},
        curLocation: {},
        changeLoading: false
      };
    },
    filters: {
      useDictLabelFilter: useDictLabelFilter
    },
    computed: {
      //   // 货位状态修改
      statusSet: {
        set(val) {
          this.curLocation.preStatus = val;
        },
        get() {
          if (this.curLocation.preStatus) {
            if ([1, 2].includes(this.curLocation.preStatus)) {
              return 0;
            }
            return this.curLocation.preStatus;
          }

          if (
            this.curLocation.preStatus === 0 ||
            [1, 2].includes(this.curLocation.preStatus)
          ) {
            return 0;
          }
          return this.curLocation.preStatus;
        }
      }
    },
    created() {
      this.getInfo();
    },
    methods: {
      childrenLength(item) {
        let num = 0;
        item.children.forEach((it) => {
          num += it.children.length;
        });
        return num;
      },
      getStatus: useDict(warehouseDefinition_locationStatus),
      exportCode() {
        this.$refs.codePrintRef.open(this.warehouseAreasSaveList);
      },
      filterFactoryId(factoryId) {
        if (!factoryId) return;
        if (this.factoryList.length) {
          let obj = this.factoryList.find((f) => f.id === factoryId);

          return obj.name;
        } else {
          return '';
        }
      },
      async getInfo() {
        // 获取工厂车间列表
        const res1 = await warehouseDefinition.getFactoryarea({
          pageNum: 1,
          size: 9999,
          type: 1
        });
        this.factoryList = res1.list;

        const { warehouseVO } = await warehouseDefinition.warehouseDetail(
          this.$route.query.id
        );
        console.log(warehouseVO);
        this.warehouseInfo = warehouseVO || {};
        //  warehouseAreasSaveList: res.reservoirAreaList || [], //库区
        // areaGoodsshelvesList: res.goodsShelvesList || [], //货架
        // allocationReqList: res.goodsAllocationList || [] //货位
        // const {
        //   warehouseAreasSaveList = [],
        //   areaGoodsshelvesList = [],
        //   allocationReqList = []
        // } = res;
        const warehouseAreasSaveList = res.reservoirAreaList || [];
        const areaGoodsshelvesList = res.goodsShelvesList || [];
        const allocationReqList = res.goodsAllocationList || [];

        warehouseAreasSaveList.forEach((item) => {
          item.children = areaGoodsshelvesList
            .filter((i) => i.reservoirAreaCode === item.code)
            .map((itm) => {
              itm.children = allocationReqList.filter(
                (it) => it.goodsShelvesCode === itm.code
              );
              return itm;
            });
        });
        this.warehouseAreasSaveList = warehouseAreasSaveList;
      },
      //变更货位状态
      transformStatus(item) {
        this.warehouseStatVO = Object.assign({}, item.warehouseStatVO);
        this.curLocation = Object.assign({}, item.warehouseStatVO);
        this.statusVisible = true;
      },
      async confirmChange() {
        this.changeLoading = true;

        try {
          await warehouseDefinition.warehouseChangeStatus(this.curLocation);
          this.$message.success('操作成功！');
          this.getInfo();
          this.statusVisible = false;
        } catch (error) {}
        this.changeLoading = false;
      },
      goodsInfoView({ id }, title) {
        this.$refs.goodsInfoRef.open(id, title);
      }
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-form-item {
    margin-bottom: 12px;
  }
  .page {
    padding: 10px;
    margin: 10px 0 10px 0;
    height: calc(100vh - 80px);
    padding: 10px;
    overflow-y: auto;
  }
  .title-content {
    .el-button {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .page-title {
    background: #fff;
    font-size: 18px;
    padding: 6px 20px;
    font-weight: 500;
    .page-title-div {
      position: relative;
      margin: 5px 0;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #eaeefb;
    }
  }
  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    background: #fff;
    padding: 20px;
  }

  .warehouse-area {
    .msg {
      line-height: 52px;
      background-color: rgba(242, 242, 242, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 20px;
      margin-bottom: 12px;
      .label {
        color: #333;
        margin-right: 12px;
        font-weight: bold;
      }
    }

    .shelves-container {
      .content {
        display: flex;
        align-items: stretch;
        padding: 20px;
      }
      .detail {
        width: 282px;
        background-color: rgba(242, 242, 242, 1);
        border-radius: 8px;
        margin-left: 12px;
        padding: 20px 0 0 2px;

        > div {
          margin-bottom: 12px;
          .label {
            display: inline-block;
            width: 8em;
            color: #333;
            font-weight: bold;
            text-align: right;
            margin-right: 6px;
          }
        }
      }
      h3 {
        // color: $mainColor;
        font-size: 16px;
      }

      .content-box {
        flex: 1;
        .box {
          background-clip: content-box;
          height: 64px;
          margin-bottom: 4px;
          cursor: pointer;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          &:hover .mask {
            display: block;
          }
          .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 3px;
            right: 3px;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            font-weight: bold;
            text-align: center;
            // line-height: 64px;
            padding: 23px 25%;
            img {
              width: 1em;
              height: 1em;
            }
            div {
              margin-top: 8px;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
  .status-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      margin: 0 12px;
    }
    span {
      display: inline-block;
      width: 13px;
      height: 13px;
      margin: 0 4px;
    }
  }

  .basic-details-title {
    margin-bottom: 12px;
    margin-top: 20px;
    // border-bottom: 1px solid #157a2c;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }

  .area {
    margin-top: 20px;
    .title {
      font-size: 14px;
      span {
        font-weight: bold;
      }
    }
    .mt10 {
      margin-top: 10px;
    }
  }
  .locationFlex {
    display: flex;
    justify-content: space-between;
    .locationRight {
      .flex {
        display: flex;
        .title {
          width: 50px;
          font-size: 13px;
          text-align: center;
          margin-right: 5px;
          margin-bottom: 5px;
        }
        .locationContent {
          width: 50px;
          padding: 10px 0;
          color: #fff;
          font-size: 13px;
          text-align: center;
          margin-right: 5px;
          margin-bottom: 5px;
        }
      }
    }
    .green {
      background-color: #157a2c;
    }
    .red {
      background-color: #a60014;
    }
    .blue {
      background-color: #027db4;
    }
  }
  .no_data {
    padding: 50px 0;
    text-align: center;
  }
  .shelfBox {
    display: flex;
    justify-content: space-between;
    .shelfCode {
      // width: 60px;
      padding: 74px 6px;
      color: #fff;
      text-align: center;
      background-color: #157a2c;
      font-size: 12px;
    }
  }
  .shelfDataBox {
    display: flex;
    .shelfLeft {
      width: 50%;
      margin-right: 20px;
      .shlefCode {
        font-size: 12px;
        display: block;
        margin-bottom: 10px;
      }
      .shelfChildren {
        display: flex;
        .shelfShow {
          background-color: #027db4;
          color: #fff;
          font-size: 12px;
          padding: 12px;
        }
      }
    }
    .shelfRight {
      flex: 1;
    }
  }
  :deep(.el-form-item__label) {
    color: #3e3e3e;
    font-size: 14px;
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .mb5 {
    margin-bottom: 2px;
  }
  .mr10 {
    margin-right: 10px;
  }
</style>