库房设置开发

src/apis/statistics0.js

@@ -0,0 +1,21 @@
+import axios from '../utils/request'
+// 获取库房设置列表
+export const getTreeList = () => {
+  return axios({
+    url: '/cms/storage/treeList'
+  })
+}
+// 新增库区
+export const addEntrepot = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/storage/save',
+    data
+  })
+}
+// 删除
+export const remove = (id) => {
+  return axios({
+    url: `/cms/storage/remove/${id}`
+  })
+}

src/views/holding/holding1_add.vue

@@ -423,7 +423,7 @@ export default {
         cancelButtonText: '放弃',
         type: 'warning'
       }).then(async () => {
-        if (this.fromData.textarea === '') return this.$message.warning('入库说明不能为空')
+        if (this.fromData.textarea.trim() === '') return this.$message.warning('入库说明不能为空')
         // 发请求
         await holding1submit(obj)
         this.$router.push('/layout/holding1')
@@ -441,7 +441,7 @@ export default {
     },
     // 点击提交
     async submit () {
-      if (this.fromData.textarea === '') return this.$message.warning('入库说明不能为空')
+      if (this.fromData.textarea.trim() === '') return this.$message.warning('入库说明不能为空')
       const obj = { description: this.fromData.textarea, goodsIds: this.goodsIds.join(','), id: this.mydata.id, status: 1 }
       await holding1submit(obj)
       this.$message.success('提交成功')

src/views/holding/holding2_add.vue

@@ -252,7 +252,7 @@ export default {
         cancelButtonText: '放弃',
         type: 'warning'
       }).then(async () => {
-        if (this.fromData.textarea === '') return this.$message.warning('出库说明不能为空')
+        if (this.fromData.textarea.trim() === '') return this.$message.warning('出库说明不能为空')
         // 发请求
         await holding1submit(obj)
         this.$router.push('/layout/holding2')
@@ -270,7 +270,7 @@ export default {
     },
     // 点击提交
     async submit () {
-      if (this.fromData.textarea === '') return this.$message.warning('出库说明不能为空')
+      if (this.fromData.textarea.trim() === '') return this.$message.warning('出库说明不能为空')
       // 手动整理所有输入的出库位置信息
       this.tableData.forEach((v, i) => {
         this.locations[v.id] = this.tableData[i].outPath

src/views/statistics/statistics0.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="statistics0">
-    <TabList/>
+    <TabList />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -13,52 +13,75 @@
       <div class="conten">
         <div class="conten_left">
           <div class="btn">
-            <el-button type="primary">新建库区</el-button>
-            <el-button type="danger">删除</el-button>
+            <el-button type="primary" @click="addOne">新建库区</el-button>
+            <el-button type="danger" @click="delOne">删除</el-button>
           </div>
-          <div class="title">
-            <i class="el-icon-arrow-down" v-if="0"></i>
-            <i class="el-icon-arrow-up" v-else></i>
-            <span>一号库区</span>
-            <i class="el-icon-plus tiny"></i>
-            <i class="el-icon-edit tiny"></i>
+          <div class="box" v-for="(item, index) in allList" :key="item.id">
+            <div class="title" :style="arrowsShow === index?'background-color: #f2f2f2;':''">
+              <i
+                :class="
+                  arrowsShow === index
+                    ? 'el-icon-arrow-up'
+                    : 'el-icon-arrow-down'
+                "
+                @click="arrowsShowClick(index)"
+              ></i>
+              <span @click="arrowsShowClick(index)">{{ item.name }}</span>
+              <i class="el-icon-plus tiny" @click="addTow(item.id)"></i>
+              <i class="el-icon-edit tiny"></i>
+            </div>
+            <ul class="area" v-show="arrowsShow === index">
+              <li
+                :class="{ active: entrepotShow === ind }"
+                @click="entrepotShowClick(ind, val)"
+                v-for="(val, ind) in item.children"
+                :key="val.id"
+              >
+                {{ val.name }} 编号：{{ val.num }}
+              </li>
+            </ul>
           </div>
-          <ul class="area">
-            <li>库房A 编号：000668</li>
-            <li>库房A 编号：000668</li>
-          </ul>
         </div>
         <div class="conten_right">
           <div class="title">
-            <b>库房A</b>
-            <span>仓库编号：000668</span>
-            <i class="el-icon-plus"></i>
+            <b>{{ towList.name }}</b>
+            <span>仓库编号：{{ towList.num }}</span>
+            <i class="el-icon-plus" @click="addThree()"></i>
             <i class="el-icon-edit"></i>
             <i class="el-icon-delete"></i>
           </div>
           <!-- 表格 -->
           <div class="table">
-          <el-table
-            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
-            :data="tableData"
-            border
-            style="width: 100%"
-          >
-            <el-table-column prop="name" label="货架编号" width="150"></el-table-column>
-            <el-table-column prop="name" label="货架名称" width="150"></el-table-column>
-            <el-table-column prop="name" label="行数" width="100"></el-table-column>
-            <el-table-column prop="name" label="列数" width="100"></el-table-column>
-            <el-table-column prop="address" label="备注"></el-table-column>
-            <el-table-column label="操作" width="140">
-              <template #default>
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                prop="num"
+                label="货架编号"
+                width="200"
+              ></el-table-column>
+              <el-table-column
+                prop="name"
+                label="货架名称"
+                width="200"
+              ></el-table-column>
+              <el-table-column
+                prop="description"
+                label="备注"
+              ></el-table-column>
+              <el-table-column label="操作" width="150">
+                <template #default>
                   <i class="el-icon-edit"></i>
                   <i class="el-icon-delete"></i>
-              </template>
-            </el-table-column>
-          </el-table>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
           <!-- 分页器 -->
-          <div class="paging">
+          <div class="paging" v-if="0">
             <el-pagination
               background
               layout="prev, pager, next,sizes,jumper"
@@ -69,10 +92,40 @@
         </div>
       </div>
     </div>
+    <!-- 新建库区弹出层--第一层 -->
+    <el-dialog title="库区名称" :visible="popupOne" @close="popupOneX()">
+      <el-input v-model="popupOneName" placeholder="请输入库区名称"></el-input>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="popupOneX">取 消</el-button>
+        <el-button type="primary" @click="popupOneOK">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 新建库区弹出层--第二层 -->
+    <el-dialog title="库房信息" :visible="popupTow" @close="popupTowX()">
+      仓库编号：<el-input v-model="popupTowNum" placeholder="请输入仓库编号" style="width:91%;margin-bottom:20px"></el-input>
+      仓库名称：<el-input v-model="popupTowName" placeholder="请输入仓库名称" style="width:91%"></el-input>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="popupTowX">取 消</el-button>
+        <el-button type="primary" @click="popupTowOK">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 新建库区弹出层--第三层 -->
+    <el-dialog title="货架信息" :visible="popupThree" @close="popupThreeX()">
+      货架编号：<el-input v-model="popupThreeNum" placeholder="请输入货架编号" style="width:91%;margin-bottom:20px"></el-input>
+      货架名称：<el-input v-model="popupThreeName" placeholder="请输入货架名称" style="width:91%;margin-bottom:20px"></el-input>
+      <div class="row">
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注：<el-input type="textarea" :rows="3" v-model="popupThreeTxt" placeholder="请输入备注说明" style="width:91%"></el-input>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="popupThreeX">取 消</el-button>
+        <el-button type="primary" @click="popupThreeOK">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getTreeList, addEntrepot, remove } from '../../apis/statistics0'
 import TabList from '@/components/tabLeft3.vue'
 export default {
   name: 'system0',
@@ -81,33 +134,195 @@ export default {
   data () {
     // 这里存放数据
     return {
+      // 第一层：箭头的显示隐藏
+      arrowsShow: 0,
+      popupOneName: '',
+      popupOne: false,
+      // 第二层：库区的显示和隐藏
+      // 添加第二层的时候临时储存的第一层父亲的id
+      popupTowId: null,
+      entrepotShow: 0,
+      popupTow: false,
+      popupTowName: '',
+      popupTowNum: '',
+      // 第三层：
+      popupThree: false,
+      popupThreeNum: '',
+      popupThreeName: '',
+      popupThreeTxt: '',
+      // 第二层数据
+      towList: {},
+      // 总数据
+      allList: [],
       // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    arrowsShow (val) {
+      // console.log(999, val)
+      if (val !== null) {
+        if (this.allList[val].children) {
+          this.tableData = this.allList[val].children[0].children
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.towList = this.allList[val].children[0]
+            }, 100)
+          })
+        } else {
+          this.tableData = []
+          this.towList = {}
+        }
+      }
+    },
+    entrepotShow (val) {
+      // console.log(666, val)
+      this.tableData = this.allList[this.arrowsShow].children[val].children
+    }
+  },
   // 方法集合
   methods: {
-
+    // 点击新增库区--第一层
+    delOne () {
+      if (!this.arrowsShow || !this.allList[this.arrowsShow]) return this.$message.error('未选中库区')
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.getTreeList()
+        remove(this.allList[this.arrowsShow].id)
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.getTreeList()
+          }, 100)
+        })
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    addOne () {
+      this.popupOne = true
+    },
+    popupOneX () {
+      this.popupOne = false
+      this.popupOneName = ''
+    },
+    async popupOneOK () {
+      if (this.popupOneName.trim() === '') return this.$message.error('库区名称不能为空')
+      await addEntrepot({
+        level: 1,
+        name: this.popupOneName,
+        parentId: null
+      })
+      this.popupOne = false
+      this.popupOneName = ''
+      this.getTreeList()
+      this.$message.success('新增库区成功')
+    },
+    // 点击第二层+号
+    addTow (id) {
+      this.popupTowId = id
+      this.popupTow = true
+    },
+    popupTowX () {
+      this.popupTow = false
+      this.popupTowName = ''
+      this.popupTowNum = ''
+    },
+    async popupTowOK () {
+      if (this.popupTowNum.trim() === '') return this.$message.error('仓库编号不能为空')
+      if (this.popupTowName.trim() === '') return this.$message.error('仓库名称不能为空')
+      await addEntrepot({
+        level: 2,
+        name: this.popupTowName,
+        num: this.popupTowNum,
+        parentId: this.popupTowId
+      })
+      this.popupTow = false
+      this.popupTowName = ''
+      this.popupTowNum = ''
+      this.getTreeList()
+      this.$message.success('新增仓库成功')
+    },
+    // 点击第三层
+    addThree () {
+      this.popupThree = true
+    },
+    popupThreeX () {
+      this.popupThree = false
+      this.popupThreeName = ''
+      this.popupThreeNum = ''
+      this.popupThreeTxt = ''
+    },
+    async popupThreeOK () {
+      // console.log(this.towList.id)
+      if (this.popupThreeNum.trim() === '') return this.$message.error('货架编号不能为空')
+      if (this.popupThreeName.trim() === '') return this.$message.error('货架名称不能为空')
+      await addEntrepot({
+        level: 3,
+        name: this.popupThreeName,
+        num: this.popupThreeNum,
+        parentId: this.towList.id,
+        description: this.popupThreeTxt
+      })
+      this.popupThree = false
+      this.popupThreeName = ''
+      this.popupThreeNum = ''
+      this.popupThreeTxt = ''
+      this.getTreeList()
+      this.$message.success('新增货架成功')
+      // 刷新页面
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.tableData = this.allList[this.arrowsShow].children[this.entrepotShow].children
+        }, 100)
+      })
+    },
+    // 点击箭头
+    arrowsShowClick (index) {
+      if (this.arrowsShow === index) this.arrowsShow = null
+      else {
+        this.arrowsShow = index
+        this.entrepotShow = 0
+      }
+    },
+    // 点击第二层
+    entrepotShowClick (ind, val) {
+      this.entrepotShow = ind
+      this.towList = val
+      // console.log(666, val)
+    },
+    // 封装获取库房列表方法
+    async getTreeList () {
+      const res = await getTreeList()
+      this.allList = res.data
+      // console.log(9999, res)
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  mounted () {
+    // 调用获取库房列表
+    this.getTreeList()
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.towList = this.allList[0].children[0]
+        this.tableData = this.towList.children
+      }, 100)
+    })
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -120,7 +335,11 @@ export default {
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .statistics0 {
-    /deep/#mytitle>span{
+  .row{
+    display: flex;
+    align-items: center;
+  }
+  /deep/#mytitle > span {
     font-weight: 800;
   }
   display: flex;
@@ -156,19 +375,28 @@ export default {
         height: 80px;
       }
       .title {
+        span {
+          cursor: pointer;
+        }
+        position: relative;
         display: flex;
         align-items: center;
         height: 55px;
-        background-color: #f2f2f2;
+        // background-color: #f2f2f2;
         color: black;
-        & > span {
-          margin: 0 170px 0 20px;
-        }
         & > i {
           cursor: pointer;
           font-size: 30px;
         }
+        & > i:nth-of-type(2) {
+          right: 35px;
+        }
         .tiny {
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          float: right;
           margin: 0 10px;
           font-size: 24px;
           color: #a5acb3;
@@ -181,7 +409,7 @@ export default {
           width: 100%;
           height: 33px;
           line-height: 33px;
-          text-align: center;
+          margin-left: 50px;
         }
         li:hover {
           color: #1890ff;
@@ -193,9 +421,12 @@ export default {
     }
     .conten_right {
       position: relative;
-      .table{
-        max-height: 500px;
-        overflow: auto;
+      .table {
+        /deep/.el-table__body-wrapper{
+          max-height: 524px;
+          max-width: 1150px !important;
+          overflow-y: auto;
+        }
         i {
           cursor: pointer;
           font-size: 24px;
@@ -203,7 +434,7 @@ export default {
           margin-left: 15px;
         }
       }
-      .paging{
+      .paging {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
@@ -212,19 +443,19 @@ export default {
       flex: 1;
       height: 650px;
       border: 1px solid #ccc;
-      .title{
+      .title {
         height: 75px;
         color: black;
         display: flex;
         align-items: center;
-        &>b{
+        & > b {
           font-size: 24px;
           margin: 0 20px;
         }
-        &>span {
+        & > span {
           margin-right: 20px;
         }
-        &>i {
+        & > i {
           cursor: pointer;
           font-size: 24px;
           margin: 0 10px;