储位选择弹窗

src/api/ecw/warehouseArea.js

@@ -34,6 +34,14 @@ export function getWarehouseArea(id) {
   })
 }
 
+// 获得仓库查询库域
+export function getByWarehouseId() {
+  return request({
+    url: '/ecw/warehouse-area/getByWarehouseId',
+    method: 'get'
+  })
+}
+
 // 获得库区库域分页
 export function getWarehouseAreaPage(query) {
   return request({

src/views/ecw/order/warehousing/components/warehouse-area-dialog.vue

+<template>
+  <div>
+    <el-dialog
+      title="选择储位"
+      :visible.sync="opened"
+      width="600px"
+      :before-close="handleClose()"
+    >
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane :label="item.name" :name="'' + index" v-for="(item, index) in area" :key="index">
+          <div>
+            <div style="text-align: center">区域</div>
+            <div style="background-color: #efefef;padding: 10px 10px 0;border: #dcdcdc solid 1px;border-radius: 2px">
+              <el-row :gutter="10">
+               <el-col :span="12" v-for="(warehouse, i) in item.children" :key="i">
+                 <div
+                   class="warehouse-block warehouse-block-selected"
+                   :class="{active: selected.find(domain => domain.pid === warehouse.id)}"
+                   @click="handleSelectWarehouse(warehouse)"
+                 >
+                   {{ warehouse.name }}
+                 </div>
+               </el-col>
+              </el-row>
+            </div>
+          </div>
+          <div>
+            <div style="text-align: center">仓位</div>
+
+          </div>
+          <el-divider></el-divider>
+          已选择：
+          <el-divider></el-divider>
+        </el-tab-pane>
+      </el-tabs>
+      <span slot="footer">
+        <el-button @click="opened = false">关 闭</el-button>
+        <el-button type="primary" @click="opened = false">提 交</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getByWarehouseId } from '@/api/ecw/warehouseArea'
+
+export default {
+  name: 'WarehouseAreaDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  data() {
+    return {
+      opened: false,
+      key: 0,
+
+      area: [],
+      activeName: '0',
+      selected: []
+    };
+  },
+
+  watch: {
+    visible(val) {
+      if (val) {
+        this.opened = true
+      } else {
+      }
+    },
+    opened(val) {
+      if (val) {
+      } else {
+        this.$emit('update:visible', false)
+      }
+    }
+  },
+
+  methods: {
+    handleClose() {},
+    handleSelectWarehouse(warehouse) {
+      console.log(warehouse)
+    }
+  },
+
+  mounted() {
+    if (this.visible) {
+      this.opened = true
+    }
+
+    getByWarehouseId().then(r => {
+      this.area = r.data
+    })
+  },
+}
+</script>
+
+<style scoped>
+.warehouse-block{
+  background-color: white;
+  border-radius: 5px;
+  height: 42px;
+  line-height: 42px;
+  text-align: center;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+.warehouse-block:hover, .warehouse-block .active{
+  color: #ffffff;
+  background-color: #388fe5;
+}
+.warehouse-block-selected{
+  border: #388fe5 solid 5px;
+}
+</style>