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

<!--
 * @Author: zwq
 * @Date: 2021-11-15 15:17:30
 * @LastEditors: zwq
 * @LastEditTime: 2022-03-18 15:00:32
 * @Description:
-->
<template>
  <div v-loading="dataListLoading">
    <el-card class="base-container" style="min-height: 300px">
      <el-card
        class="wareBox"
        shadow="hover"
        :class="[
          item.empty ? 'disableBox' : 'enableBox',
          { active: item.locationId === isActive }
        ]"
        :disabled="item.empty"
        @click.native="item.empty ? '' : selectBox(item.locationId)"
        v-for="item in warehouseList"
        :key="item.locationId"
      >
        <div class="plat">{{ item.locationName }}</div>
        <el-button
          v-if="!item.empty"
          @click.stop="showDetail(item.locationId)"
          class="wareBox-button"
          type="text"
          size="mini"
          icon="el-icon-search"
          circle
        />
      </el-card>
    </el-card>
    <el-card class="base-container" style="margin-top: 20px; min-height: 200px">
      <el-row :gutter="30" style="padding: 20px;">
        <el-col class="footer-item-container" :span="6" v-for="count in 4" :key="count">
          <el-card class="footer-item-box base-container" @click.native="selectPlat(count)">
            <div class="plat" style="font-size: 24px">液压台{{ count }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <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) {
      if (this.isActive === id) {
        this.isActive = null
      } else {
        this.isActive = id
      }
    },
    showDetail (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: 'YYT00' + count,
              localtionId: this.isActive
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                type: 'success',
                message: '出库成功!'
              })
              this.isActive = null
              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 lang="scss" scoped>
.mainDiv {
  border: 2px solid rgb(145, 174, 255);
  padding: 20px 0;
}

.wareBox {
  cursor: pointer;
  display: inline-block;
  margin: 10px;
  width: 104px;
  height: 112px;
  line-height: 72px;
  text-align: center;
  padding: 0;
  position: relative;
  .wareBox-button {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.line {
  margin: 20px 0;
  height: 2px;
  background-color: gray;
  border-left: 200px solid #ddd;
  border-right: 200px solid #ddd;
}
.enableBox {
  background: #EFF3FF;
}
.disableBox {
  background: #F4F4F4;
  cursor: not-allowed;
}
.end-plat {
  background-color: rgb(195, 246, 255);
}
.plat {
  font-size: 16px;
}
.active {
  border: 2px solid #F56C6C;
}
.footer-item-container{
  display: flex;
  justify-content: center;
  align-items: center;
  .footer-item-box{
    width: 100%;
    height: 200px;
    padding: 0 !important;
    cursor: pointer;
    line-height: 160px;
    text-align: center;
    background-image: url('../../assets/img/1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
    border-radius: 25px;
    margin-bottom: 20px;
  }
}
</style>