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="init"></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>
          <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="500px" 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-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";

  export default {
    name: "LocationView",
    data() {
      return {
        divList: [],
        // 遮罩层
        loading: true,
        showSearch: true,
        open: false,
        // 查询参数
        queryParams: {
          zoneId: 2,
          warehouseId: 1
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        tableAttr: {
          rows: 3,
          cols: 3
        },
        currentSelect: null,
        locationZoneCombo: [],
        warehouseCombo: []
      };
    },
    created() {
      this.init();
      this.search();
    },
    methods: {
      init() {
        queryWarehouseDict().then(response => {
          this.warehouseCombo = response.data
        });
        queryLocationZoneDict().then(response => {
          this.locationZoneCombo = response.data
        });
      },
      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) {
        console.log(item)
        if (item.locationNo) {
          this.currentSelect = parseInt(item.id)
          this.open = true;
        }
      },
      handleQuery() {
        this.search()
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      lockLoc() {
        lockLocRequest(this.currentSelect).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.search();
        });
      },
      occupyLoc() {
        occupyLocRequest(this.currentSelect).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.init()
        });
      },
      clearLoc() {
        clearLocRequest(this.currentSelect).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.init()
        });
      }
    }
  };
</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>