导航配置

packages/3.0.0/AppNavConfig/components/List.vue

@@ -1,5 +1,5 @@
 <template>
-  <ai-list class="list">
+  <ai-list class="list" v-loading="isLoading">
     <ai-title slot="title" title="导航配置" isShowBottomBorder></ai-title>
     <template slot="content">
       <ai-card title="首页功能">
@@ -37,7 +37,7 @@
                 <i class="el-icon-error icon" @click="removeApp(item.id)" v-if="isRemove && item.type !== '0' && item.picked !== '1'"></i>
                 <i class="el-icon-circle-plus icon" @click="addApp(item)" v-if="isCanAdd(item)"></i>
                 <h2>{{ item.name }}</h2>
-                <div class="item-setting">
+                <div class="item-setting" v-if="item.type === '0'">
                   <div class="item-mask"></div>
                   <div class="item-wrapper__icon" @click.stop="editApp(item)">
                     <i class="el-icon-setting"></i>
@@ -100,34 +100,34 @@
             <el-form-item label="图标" prop="pictureUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传图标 ', trigger: 'change' }]">
               <ai-uploader v-model="form.pictureUrl" :instance="instance" :limit="1"></ai-uploader>
             </el-form-item>
-            <el-form-item label="权限配置" v-if="form.type === '0'" prop="pictureUrl" style="width: 100%;">
+            <!-- <el-form-item label="权限配置" v-if="form.type === '0'" prop="pictureUrl" style="width: 100%;">
               <el-input disabled :value="girdName" size="small" placeholder="请选择地区">
                 <template slot="append">
                   <el-button size="small" @click="isShowArea = true">选择地区</el-button>
                 </template>
               </el-input>
-            </el-form-item>
+            </el-form-item> -->
           </div>
         </el-form>
-        <ai-dialog
-          title="选择网格"
-          :visible.sync="isShowArea"
-          :destroyOnClose="true"
-          @close="showGrid = false"
-          @onConfirm="getCheckedTree"
-          width="720px">
-          <div class="grid">
-            <el-tree
-              :data="treeList"
-              :props="treeObj.defaultProps"
-              node-key="id"
-              ref="tree"
-              show-checkbox
-              :default-checked-keys="treeObj.checkedKeys"
-              default-expand-all>
-            </el-tree>
-          </div>
-        </ai-dialog>
+      </ai-dialog>
+      <ai-dialog
+        title="选择权限"
+        :visible.sync="isShowArea"
+        :destroyOnClose="true"
+        @close="isShowArea = false"
+        @onConfirm="getCheckedTree"
+        width="720px">
+        <el-tree
+          :data="treeList"
+          :props="defaultProps"
+          node-key="id"
+          check-strictly
+          ref="tree"
+          show-checkbox 
+          :default-checked-keys="defaultChecked"
+          :default-expanded-keys="defaultExpanded"
+          default-expand-all>
+        </el-tree>
       </ai-dialog>
     </template>
   </ai-list>
@@ -153,11 +153,13 @@
         id: '',
         isEdit: false,
         isRemove: false,
+        defaultExpanded: [],
         isRest: true,
         isShowArea: false,
+        isLoading: false,
         defaultProps: {
-          children: "girdList",
-          label: "girdName",
+          children: "children",
+          label: "label",
         },
         treeList: [],
         form: {
@@ -182,9 +184,9 @@
           dictName: '客服',
           dictValue: '4'
         }],
+        info: {},
         isShowAdd: false,
         list: [],
-        defaultExpanded: [],
         defaultChecked: []
       }
     },
@@ -193,7 +195,6 @@
       this.dict.load('homeConfigMenuType', 'miniConfigCheckType').then(() => {
         this.getList()
       })
-      this.getTree()
     },
 
     methods: {
@@ -211,24 +212,18 @@
         })
       },
 
-      getTree() {
-        this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
+      getCheckedTree () {
+        const keys = this.$refs.tree.getCheckedNodes(false, true).map(v => v.id)
+
+        this.instance.post(`/app/appminihomeconfig/addOrUpdate`, {
+          ...this.info,
+          areaIds: keys
+        }).then(res => {
           if (res.code === 0) {
-            let parent = res.data.map(v => {
-              v.label = v.name
-              v.children = []
+            this.$message.success('修改成功')
+            this.isShowArea = false
 
-              return v
-            }).filter(e => !e.parentid)[0]
-            this.defaultExpanded = [parent.id]
-            this.defaultChecked = [parent.id]
-            this.search.areaId = parent.id
-            this.addChild(parent, res.data)
-            this.areaTree = [parent]
-
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(parent.id)
-            })
+            this.getList()
           }
         })
       },
@@ -248,15 +243,40 @@
       },
 
       editApp (e) {
-        console.log(e)
-        this.form = {
-          ...e,
-          pictureUrl: [{
-            url: e.pictureUrl
-          }]
+        this.info = e
+        this.isLoading = true
+        this.instance.post(`/app/appminihomeconfig/queryDetailById?id=${e.id}`).then(res => {
+          if (res.code === 0) {
+            let parent = res.data.areaConfigs.map(v => {
+              v.label = v.name
+              v.children = []
+
+              return v
+            }).filter(e => !e.parentId)[0]
+            this.defaultExpanded = res.data.areaConfigs.filter(v => v.checked).map(v => v.id)
+            this.defaultChecked = res.data.areaConfigs.filter(v => v.checked).map(v => v.id)
+            this.addChild(parent, res.data.areaConfigs)
+            this.treeList = [parent]
+
+            this.isShowArea = true
+          }
+
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      addChild(parent, list) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].parentId === parent.id) {
+            parent.children.push(list[i])
+          }
         }
 
-        this.isShowAdd = true
+        if (list.length > 0) {
+          parent['children'].map(v => this.addChild(v, list))
+        }
       },
 
       isCanAdd (item) {