档案室密集柜

dangan-ui/src/api/dangan/cabinet.js

@@ -17,6 +17,15 @@ export function getCabinet(id) {
   })
 }
 
+
+// 查询档案柜树
+export function getCabinetTree() {
+  return request({
+    url: '/dangan/cabinet/treeselect',
+    method: 'get'
+  })
+}
+
 // 新增档案柜
 export function addCabinet(data) {
   return request({

dangan-ui/src/views/dangan/bookcase/index.vue

@@ -1,28 +1,54 @@
 <template>
 <div class="app-container">
-  <div>
-    <el-button type="primary" @click="clickEdit">编辑</el-button>
-    <el-button type="primary" @click="clickSubmit">提交</el-button>
-  </div>
   <el-carousel :autoplay="false" height="850px" arrow="always">
-    <el-carousel-item v-for="item in gui" :key="item.id">
+    <el-carousel-item v-for="item in list" :key="item.id">
-      <p style="text-align: center;font-size: 20px">{{ item.title }}</p>
+
+      <div class="title">
+
+        <span v-show="editID!==item.id">{{ item.label }}</span>
+        <el-input v-show="editID===item.id" v-model="item.label" placeholder="请输入内容" style="width: 500px;"></el-input>
+
+        <div class="title_btn" v-show="editID!==item.id" >
+          <i class="el-icon-edit-outline" @click="clickEdit(item)"></i>
+        </div>
+
+        <div class="title_btn1" v-show="editID===item.id">
+          <i class="el-icon-position" v-show="editID===item.id" @click="clickSubmit(item)"></i>
+        </div>
+
+      </div>
+
       <div class="whole">
-        <div class="grid" v-for="item1 in item.list" :key="item1.text">
+        <div class="grid" v-for="item1 in item.children" :key="item1.text">
-          <div class="grid_text" v-show="!isEdit">
+          <div class="grid_text" v-show="editID!==item1.id">
-            <div class="adress">{{ item1.address }}</div>
+
-            <div class="info">{{ item1.info }}</div>
+            <div class="adress">
+              <el-tooltip :content="item1.label" placement="top">
+                <span>{{ item1.label }}</span>
+              </el-tooltip>
+            </div>
+            <div class="info">{{ item1.content }}</div>
+
           </div>
-          <div v-show="isEdit" class="grid_input">
+
-            <el-input v-model="item1.address" placeholder="请输入内容"></el-input>
+          <div v-show="editID===item1.id" class="grid_input">
+            <el-input v-model="item1.label" placeholder="请输入内容"></el-input>
             <el-input style="width:100%;margin-top:2px;"
                       resize="none"
                       type="textarea"
                       placeholder="请输入内容"
-                      v-model="item1.info"
+                      v-model="item1.content"
             >
             </el-input>
           </div>
+
+          <div class="grid_btn" v-show="editID!==item1.id">
+            <i class="el-icon-edit-outline" @click="clickEdit(item1)"></i>
+          </div>
+          <div class="grid_btn1" v-show="editID===item1.id">
+            <i class="el-icon-position" @click="clickSubmit(item1)"></i>
+          </div>
+
         </div>
       </div>
     </el-carousel-item>
@@ -33,223 +59,39 @@
 </template>
 
 <script>
+import { getCabinetTree, updateCabinet } from "@/api/dangan/cabinet";
+
 export default {
   name: "Bookcase",
   data() {
     return {
-      isEdit: false,
+      editID: null,
-      gui:[
+      list:[]
-        {
-          title:'1号柜 正面',
-          id: 1,
-          list:[
-            {
-              address: '1号柜 1层1列',
-              info: '文书档案、科技档案、人事档案、专业档案文书档案、科技档案、人事档案、专业档案文书档案、科技档案、人事档案、'
-            },
-            {
-              address: '1号柜 1层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 1层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 1层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            }]
-        },
-        {
-          title:'1号柜 反面',
-          id: 2,
-          list:[
-            {
-              address: '1号柜 1层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 1层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 1层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 1层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 2层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 3层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 4层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 5层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层1列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层2列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层3列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            },
-            {
-              address: '1号柜 6层4列',
-              info: '文书档案、科技档案、人事档案、专业档案'
-            }]
-        }
-      ]
     };
   },
+  created() {
+    this.getCabinetTree();
+  },
   methods: {
-    clickEdit(){
+    /** 查询档案柜列表 */
-      this.isEdit = true
+    getCabinetTree() {
+      getCabinetTree().then(response => {
+        this.list = response.data;
+      });
     },
-    clickSubmit(){
+    clickEdit(item){
-      this.isEdit = false
+      this.getCabinetTree()
+      this.editID = item.id
+    },
+    clickSubmit(item){
+      this.$modal.confirm('是否确认提交？').then(()=>{
+        item.posName = item.label;
+        updateCabinet(item).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.editID = null
+          this.getCabinetTree();
+        });
+      })
     }
   }
 }
@@ -261,6 +103,43 @@ export default {
   margin: 0 auto;
 
   .el-carousel__item{
+    .title{
+      width: 600px;
+      margin: 0 auto;
+      text-align: center;
+      font-size: 20px;
+      font-weight: bold;
+      height: 50px;
+      line-height: 50px;
+      border-radius: 10px;
+      background: #d3dce6;
+      position: relative;
+      margin-bottom: 10px;
+
+      .title_btn, .title_btn1{
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        font-size: 20px;
+        width: 24px;
+        height: 24px;
+        background: #00afff;
+        color: #fff;
+        text-align: center;
+        line-height: 24px;
+        border-radius: 4px;
+      }
+
+      .title_btn{
+        display: none;
+      }
+    }
+
+    .title:hover{
+      .title_btn{
+        display: block;
+      }
+    }
 
     .whole{
       width: 100%;
@@ -272,6 +151,7 @@ export default {
       font-size: 14px;
 
       .grid{
+        position: relative;
         width: 25%;
         height: 130px;
         padding: 5px;
@@ -286,7 +166,12 @@ export default {
           background: #d3dce6;
 
           .adress{
+            height: 25px;
+            line-height: 25px;
             font-weight: bold;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
 
           .info{
@@ -309,7 +194,34 @@ export default {
             height: 72px;
           }
         }
+
+        .grid_btn,.grid_btn1{
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          font-size: 20px;
+          width: 24px;
+          height: 24px;
+          background: #00afff;
+          color: #fff;
+          text-align: center;
+          line-height: 24px;
+          border-radius: 4px;
+        }
+
+        .grid_btn{
+          display: none;
+        }
+
       }
+
+      .grid:hover{
+
+        .grid_btn{
+          display: block;
+        }
+      }
+
     }
   }