Browse Source

选择原件功能处理

xiebeibei 4 years ago
parent
commit
580adfca30

+ 39 - 5
src/components/edit/left_toolbar.vue

@@ -56,9 +56,9 @@
       </li>
     </ul>
 
-    <a-popover trigger="click" placement="rightBottom">
+    <a-popover trigger="click" placement="rightBottom" v-model="drawerVisible">
       <template slot="content">
-        <itemTree></itemTree>
+        <itemTree @getSelectId="getSelectId" :categoryIdS="categoryIdS" :categoryId="categoryId"></itemTree>
       </template>
       <div class="bottom-item">
         <a-icon type="ellipsis" />
@@ -69,6 +69,7 @@
     <!-- 打开弹窗 -->
     <transition name="fade">
       <div class="drawer-model" id="drawer-model" v-show="visible">
+
         <a-drawer
           placement="left"
           :closable="false"
@@ -78,6 +79,7 @@
           :getContainer="false"
           :mask="false"
         >
+          <a-spin :spinning="spinning">
           <div class="drawer-model-body" v-if="!isExtract">
             <div class="btn-list">
               <a-radio-group default-value="draw" button-style="solid" @change="changeDrawType">
@@ -117,7 +119,9 @@
               >{{ text }}</a-tag>
             </a-table>
           </div>
+          </a-spin>
         </a-drawer>
+
       </div>
     </transition>
   </div>
@@ -251,8 +255,12 @@ export default {
       data,
       columns,
       itemList: [], //图例数组
+      categoryIdS: [],
       categoryId: "",
-      activeIndex: -1
+      activeIndex: -1,
+      drawerVisible:false,
+      spinning:false,
+      showDrawerItem:{}
     };
   },
   computed: {
@@ -281,6 +289,7 @@ export default {
       this.$emit("setCmdType", item.type);
     },
     showDrawer(item) {
+      this.showDrawerItem = item;
       this.isExtract = false;
       if (item.isChoice) {
         this.systemChoice.forEach(a => {
@@ -302,15 +311,24 @@ export default {
         }
         // 打开侧边框
         // 接口请求
+        this.spinning = true;
         const arr = {
-          GraphCategoryIds: this.categoryId,
+          GraphCategoryIds: this.categoryIdS,
           Type: item.type
         };
         queryGroup(arr).then(res => {
+          this.spinning = false;
           this.itemList = res.Data;
         });
       }
     },
+    getSelectId(data){
+      this.categoryIdS=data;
+
+      this.drawerVisible = false;
+
+
+    },
     onClose() {
       this.visible = false;
       this.systemChoice.forEach(a => {
@@ -351,6 +369,11 @@ export default {
           item.isChoice = true;
         }
       });
+    },
+    drawerVisible(){
+      if(this.visible){
+        this.showDrawer(this.showDrawerItem);
+      }
     }
   },
   mounted() {
@@ -378,10 +401,21 @@ export default {
       obj[arr[0]] = arr[1];
     });
     this.categoryId = obj.categoryId;
+    this.categoryIdS.push(obj.categoryId)
   }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
+  /deep/ .ant-spin-nested-loading{
+    height: 100% !important;
+    .ant-spin-container{
+      height: 100% !important;
+
+    }
+  }
+  /deep/ .ant-drawer-body{
+    height: 100% !important;
+  }
 #left_toolbar {
   min-width: 68px;
   height: 100%;

+ 29 - 5
src/components/edit/leftbar_components/itemTree.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="treeList">
     <div class="tree-body">
+      <a-spin :spinning="spinning">
       <a-tree
         v-model="checkedKeys"
         show-checkbox
@@ -13,12 +14,13 @@
         @expand="onExpand"
         @select="onSelect"
       />
+      </a-spin>
     </div>
 
     <div class="btn-list">
-      <a-button type="link">恢复默认</a-button>
-      <a-button>取消</a-button>
-      <a-button type="primary">按钮</a-button>
+      <a-button type="link" @click="getSelectId('rest')">恢复默认</a-button>
+      <a-button @click="getSelectId('cancel')">取消</a-button>
+      <a-button type="primary" @click="getSelectId(checkedKeys)" style="margin-left: 10px;">确定</a-button>
     </div>
   </div>
 </template>
@@ -32,12 +34,17 @@ export default {
       autoExpandParent: true,
       checkedKeys: [""],
       selectedKeys: [],
-      treeData
+      treeData,
+      spinning:false
     };
   },
+  props:{
+    categoryIdS:Array,
+    categoryId:String,
+  },
   watch: {
     checkedKeys(val) {
-      console.log("onCheck", val);
+      this.checkedKeys = val;
     }
   },
   methods: {
@@ -57,8 +64,11 @@ export default {
       this.selectedKeys = selectedKeys;
     },
     queryByGroup() {
+      this.spinning = true;
       queryByGroup().then(res => {
+        this.spinning = false;
         this.treeData = this.mapTree(res.Content);
+        this.checkedKeys = this.categoryIdS;
       });
     },
     mapTree(tree) {
@@ -69,17 +79,31 @@ export default {
           newTree.push({
             title: item.Name,
             id: item.Id,
+            key:item.Id,
             children
           });
         } else {
           newTree.push({
             title: item.Name,
             id: item.Id,
+            key:item.Id,
             children: []
           });
         }
       });
       return newTree;
+    },
+    //确定
+    getSelectId(data){
+      if(data == 'cancel'){
+        this.checkedKeys = this.categoryIdS;
+      }else if(data == 'rest'){
+        this.checkedKeys = [this.categoryId];
+      }else{
+        this.checkedKeys =data;
+      }
+
+      this.$emit('getSelectId',this.checkedKeys)
     }
   },