首页静态页面

src/views/common/ex-warehouse.vue

@@ -2,48 +2,108 @@
  * @Author: zwq
  * @Date: 2021-11-15 15:17:30
  * @LastEditors: zwq
- * @LastEditTime: 2021-11-16 16:59:23
+ * @LastEditTime: 2021-11-17 16:07:04
  * @Description:
 -->
 <template>
   <div>
     <div class="mainDiv" style="margin:10px 0 100px">
-    <div class="flexDiv">
-      <div class="wareBox"  :class="[count > Math.round(Math.random()*10)?'enableBox':'disableBox',{active:count===isActive}]" v-for="count in 10" v-bind:key="count">
-        <div class="plat">库位{{ count }}</div>
+      <div class="flexDiv">
+        <div
+          class="wareBox"
+          :class="[
+            count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
+            { active: count === isActive }
+          ]"
+          @click="selectBox(count)"
+          v-for="count in 10"
+          v-bind:key="count"
+        >
+          <div class="plat">库位{{ count }}</div>
+        </div>
       </div>
-    </div>
-    <div class="flexDiv">
-      <div class="wareBox" :class="[count > Math.round(Math.random()*10)?'enableBox':'disableBox',{active:count===isActive}]" v-for="count in 10" v-bind:key="count">
-        <div class="plat">库位{{ count }}</div>
+      <div class="flexDiv">
+        <div
+          class="wareBox"
+          :class="[
+            count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
+            { active: count + 10 === isActive }
+          ]"
+          @click="selectBox(count + 10)"
+          v-for="count in 10"
+          v-bind:key="count"
+        >
+          <div class="plat">库位{{ count + 10 }}</div>
+        </div>
       </div>
     </div>
-    </div>
     <div class="line"></div>
     <div class="mainDiv" style="margin:100px 0 10px">
-    <div class="flexDiv">
-      <div class="wareBox end-plat" v-for="count in 4" v-bind:key="count">
-        <div class="plat">提升台{{ count }}</div>
+      <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>
-    </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: ''
+      isActive: '',
+      ExWarehouseInfoVisible: false
     }
   },
+  components: {
+    ExWarehouseInfo
+  },
   created () {},
-  methods: {}
+  methods: {
+    selectBox (count) {
+      this.isActive = count
+      this.ExWarehouseInfoVisible = true
+      this.$nextTick(() => {
+        this.$refs.ExWarehouseInfoRef.init()
+      })
+    },
+    selectPlat (count) {
+      if (this.isActive) {
+        this.$confirm(`确认从库位${this.isActive}出库至提升台${count}?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'info '
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '出库成功!'
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '出库取消'
+          })
+        })
+      } else {
+        this.$message({
+          message: '请选择出库库位',
+          type: 'warning'
+        })
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
-.mainDiv{
+.mainDiv {
   border: 2px solid rgb(145, 174, 255);
   padding: 20px 0;
 }
@@ -89,17 +149,17 @@ export default {
   border-left: 200px solid #ddd;
   border-right: 200px solid #ddd;
 }
-.enableBox{
+.enableBox {
   background: rgb(0, 189, 16);
 }
-.disableBox{
+.disableBox {
   background: #ddd;
   cursor: not-allowed;
 }
-.end-plat{
+.end-plat {
   background-color: rgb(195, 246, 255);
 }
-.active{
+.active {
   border: 2px solid red;
 }
 </style>