mt-qj-wms-ui/src/views/common/ex-warehouse.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-15 15:17:30
 * @LastEditors: gtz
 * @LastEditTime: 2021-12-17 17:05:22
 * @Description:
-->
<template>
  <div v-loading="dataListLoading">
    <div class="mainDiv" style="margin:10px 0 100px">
      <div
          class="wareBox"
          :class="[
            item.empty === 1 ? 'enableBox' : 'disableBox',
            { active: item.locationId === isActive }
          ]"
          @click="selectBox(item.locationId)"
          v-for="item in warehouseList"
          :key="item.locationId"
        >
          <div class="plat">{{ item.locationName }}</div>
        </div>
    </div>
    <div class="line"></div>
    <div class="mainDiv" style="margin:100px 0 10px">
      <div class="flexDiv">
        <div class="wareBox end-plat" @click="selectPlat(count)" v-for="count in 4" v-bind:key="count">
          <div class="plat">提升台{{ count }}</div>
        </div>
      </div>
    </div>
    <ex-warehouse-info
      v-if="ExWarehouseInfoVisible"
      ref="ExWarehouseInfoRef"
    ></ex-warehouse-info>
  </div>
</template>

<script>
import ExWarehouseInfo from './ex-warehouse-info'

export default {
  data () {
    return {
      isActive: '',
      ExWarehouseInfoVisible: false,
      dataListLoading: false,
      warehouseList: []
    }
  },
  components: {
    ExWarehouseInfo
  },
  created () {
    this.getWarehouseList()
  },
  methods: {
    getWarehouseList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/outStock/list'),
        method: 'post'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.warehouseList = data.data
        } else {
          this.warehouseList = []
        }
        this.dataListLoading = false
      })
    },
    selectBox (id) {
      this.isActive = id
      this.ExWarehouseInfoVisible = true
      this.$nextTick(() => {
        this.$refs.ExWarehouseInfoRef.init(id)
      })
    },
    selectPlat (count) {
      if (this.isActive) {
        this.$confirm(`确认从库位id为[${this.isActive}]出库至提升台${count}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/outStock/runOutTask'),
            method: 'post',
            data: this.$http.adornData({
              code: count,
              localtionId: this.isActive
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                type: 'success',
                message: '出库成功!',
                onClose: () => {
                  this.getWarehouseList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
            this.dataListLoading = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '出库取消'
          })
        })
      } else {
        this.$message({
          message: '请选择出库库位',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
.mainDiv {
  border: 2px solid rgb(145, 174, 255);
  padding: 20px 0;
}
.flexDiv {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
/* 边框特效 */
.wareBox:hover {
  background: linear-gradient(to left, deepskyblue, deepskyblue) left top
      no-repeat,
    linear-gradient(to bottom, deepskyblue, deepskyblue) left top no-repeat,
    linear-gradient(to left, deepskyblue, deepskyblue) right top no-repeat,
    linear-gradient(to bottom, deepskyblue, deepskyblue) right top no-repeat,
    linear-gradient(to left, deepskyblue, deepskyblue) left bottom no-repeat,
    linear-gradient(to bottom, deepskyblue, deepskyblue) left bottom no-repeat,
    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat,
    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat;
  background-size: 5px 30px, 30px 5px;
  color: black;
  border-radius: 5px;
  background-color: rgb(190, 224, 241);
}
.wareBox {
  cursor: pointer;
  margin: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
  line-height: 90px;
  text-align: center;
  border: 2px solid #cdcdc5;
  border-radius: 5px;
}
.plat {
  min-width: 80px;
}
.line {
  margin: 20px 0;
  height: 2px;
  background-color: gray;
  border-left: 200px solid #ddd;
  border-right: 200px solid #ddd;
}
.enableBox {
  background: rgb(0, 189, 16);
}
.disableBox {
  background: #ddd;
  cursor: not-allowed;
}
.end-plat {
  background-color: rgb(195, 246, 255);
}
.active {
  border: 2px solid red;
}
</style>