AMS/ruoyi-ui/src/views/ams/inv/locationView/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="仓库" prop="warehouseId">
        <el-select v-model="queryParams.warehouseId" placeholder="请选择所属仓库" clearable size="small" style="width: 100%">
          <el-option
            v-for="dict in this.warehouseCombo"
            :key="dict.warehouseId"
            :label="dict.warehouseName"
            :value="dict.warehouseId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区域" prop="zoneId">
        <el-select v-model="queryParams.zoneId" placeholder="请选择库区" clearable size="small" style="width: 100%">
          <el-option
            v-for="dict in this.locationZoneCombo"
            :key="dict.zoneId"
            :label="dict.zoneName"
            :value="dict.zoneId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="search"></right-toolbar>
    </el-row>
    <div style="overflow-scrolling: auto">
      <ul class="wall-row"
          :style="{'width':(this.tableAttr.cols * 130)+'px', 'height':(this.tableAttr.rows * 80) + 'px'}">
        <li
          v-for="(item, index) in divList"
          :key="index"
          @click="selected(item)">
          <div v-if="!item.locationNo" style="background-color: #fff;"><!--空格没有的库位--></div>
          <div class="div" v-else-if="item.stockStatus === '10'" style="background-color: yellow">
            <div style="text-align: center;font-weight: bold;">{{item.locationNo}}</div>
            <div v-if="item.sku">物料:{{item.sku}}</div>
            <div v-if="item.sku">数量:{{item.qty}}</div>
          </div>
          <div class="div" v-else style="background-color: #ebf0f4">
            <div style="text-align: center;font-weight: bold;">{{item.locationNo}}</div>
            <div v-if="item.sku">物料:{{item.sku}}</div>
            <div v-if="item.sku">数量:{{item.qty}}</div>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog title="操作" :visible.sync="open" width="800px" append-to-body>
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="lockLoc()">锁定/解锁</el-button>
          <!--<el-button type="primary" @click="occupyLoc()">占用</el-button>-->
          <el-button type="primary" @click="clearLoc()">清空</el-button>
          <!--<el-button type="primary" @click="submitForm">初始化一个空托盘</el-button>-->
        </el-form-item>
      </el-form>
      <el-divider content-position="center">批次属性信息</el-divider>
      <el-table v-loading="loading" :data="form.lotattList">
        <el-table-column label="物料" align="center" prop="sku" width="200"/>
        <el-table-column label="物料名称" align="center" prop="skuName" width="200"/>
        <el-table-column label="库位" align="center" prop="locationNo" width="200"/>
        <el-table-column label="库存数量" align="center" prop="qty"/>
        <el-table-column label="已分配数量" align="center" prop="qtyallocated" width="200"/>
        <el-table-column
          v-for="(item, index) in itemOption"
          :key="index"
          :label="item.label"
          align="center" :prop="item.prop" width="200">
        </el-table-column>
      </el-table>
      <!--<el-descriptions title="批次属性" :column="2" border>
        <el-descriptions-item v-for="(item, index) in itemOption" :label="item.label">{{form[`${item.prop}`]}}</el-descriptions-item>
      </el-descriptions>-->
    </el-dialog>
  </div>
</template>

<script>
  import { locationView, lockLocRequest, occupyLocRequest, clearLocRequest } from "@/api/ams/locationView";
  import { queryLocationZoneDict } from "@/api/base/locationZone";
  import { queryWarehouseDict } from "@/api/base/warehouse";
  import { lotattConfigList } from "@/api/ams/config";
  import { lotattInfo } from "@/api/ams/invLotLocId";

  export default {
    name: "LocationView",
    data() {
      return {
        divList: [],
        // 遮罩层
        loading: true,
        showSearch: true,
        open: false,
        // 查询参数
        queryParams: {
          zoneId: 2,
          warehouseId: 1
        },
        // 表单参数
        form: {
          lotatt01: '',
          lotatt02: '',
          lotatt03: '',
          lotatt04: '',
          lotatt05: '',
          lotatt06: '',
          lotatt07: '',
          lotatt08: '',
          lotatt09: '',
          lotatt10: '',
          lotatt11: '',
          lotatt12: '',
          lotatt13: '',
          lotatt14: '',
          lotatt15: '',
          lotatt16: '',
          lotatt17: '',
          lotatt18: '',
          lotattList: null
        },
        // 表单校验
        rules: {},
        tableAttr: {
          rows: 3,
          cols: 3
        },
        currentSelect: null,
        locationZoneCombo: [],
        warehouseCombo: [],
        itemOption: [],
        timer: null  // 定时器
      };
    },
    created() {
      this.init();
      this.search();
      this.timer = setInterval(() =>{
        this.search();
      },1000 * 5)
    },
    methods: {
      init() {
        queryWarehouseDict().then(response => {
          this.warehouseCombo = response.data
        });
        queryLocationZoneDict().then(response => {
          this.locationZoneCombo = response.data
        });
        lotattConfigList().then(response => {
          let data = response.data
          for(let i=0;i<data.length;i++) {
            let obj = new Object();
            obj.label = data[i].lotattName
            obj.prop = data[i].lotattId
            this.itemOption.push(obj)
          }
        })
      },
      search() {
        locationView(this.queryParams).then(response => {
          let data = response.data
          this.tableAttr.rows = data.rows
          this.tableAttr.cols = data.cols
          this.divList = data.locationViewInfoVOList
        })
      },
      selected(item) {
        if (item.locationNo) {
          this.currentSelect = parseInt(item.id)
          this.open = true;
          lotattInfo(this.currentSelect).then(response => {
            this.form.lotattList = response.data
            this.loading = false;
          })
        }
      },
      handleQuery() {
        this.search()
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      lockLoc() {
        let that = this
        this.$modal.confirm('是否确认要锁定').then(function() {
          lockLocRequest(that.currentSelect).then(response => {
            if (response.code === 200) {
              that.$modal.msgSuccess(response.msg);
              that.search();
              that.open = false
            } else {
              that.$modal.msgError(response.msg);
            }
          });
        });
      },
      occupyLoc() {
        occupyLocRequest(this.currentSelect).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess(response.msg);
            this.search();
            this.open = false
          } else {
            this.$modal.msgError(response.msg);
          }
        });
      },
      clearLoc() {
        let that = this
        this.$modal.confirm('是否确认要清空').then(function() {
          clearLocRequest(that.currentSelect).then(response => {
            if (response.code === 200) {
              that.$modal.msgSuccess(response.msg);
              that.search();
              that.open = false
            } else {
              that.$modal.msgError(response.msg);
            }
          });
        });
      },
      destroyed () {
        clearInterval(this.timer)
      }
    }
  };
</script>

<style scoped lang="css">

  .word span {
    line-height: 20px;
    text-align: center;
  }

  .wall-row {
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
  }

  .wall-row li {
    list-style: none;
    width: 130px;
    height: 80px;
    border: 0.5px solid #fff;
    float: left;
  }

  .div {
    width:130px;
    height:80px;
    font-weight: bold;
  }

</style>