:tada: 升级avue2.5.0，适配新版改动，懒加载树添加局部刷新特性

public/index.html

@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/2.12.0/theme-chalk/index.css">
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/animate/3.5.2/animate.css">
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/index.css">
-  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.4.1/index.css">
+  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.5.0/index.css">
   <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
   <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
   <link rel="icon" href="<%= BASE_URL %>favicon.png">
@@ -105,7 +105,7 @@
 <script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/element-ui/2.12.0/index.js" charset="utf-8"></script>
-<script src="<%= BASE_URL %>cdn/avue/2.4.1/avue.min.js" charset="utf-8"></script>
+<script src="<%= BASE_URL %>cdn/avue/2.5.0/avue.min.js" charset="utf-8"></script>
 </body>
 
 </html>

src/api/system/menu.js

@@ -46,6 +46,16 @@ export const getMenuList = (current, size, params) => {
   })
 }
 
+export const getMenuTree = (tenantId) => {
+  return request({
+    url: '/api/blade-system/menu/tree',
+    method: 'get',
+    params: {
+      tenantId,
+    }
+  })
+}
+
 export const remove = (ids) => {
   return request({
     url: '/api/blade-system/menu/remove',

src/const/system/dict.js

@@ -3,7 +3,7 @@ export const optionParent = {
   calcHeight: 95,
   tip: false,
   searchShow: true,
-  searchMenuSpan: 6,
+  searchMenuSpan: 8,
   tree: true,
   border: true,
   index: true,

src/const/system/dictbiz.js

@@ -3,7 +3,7 @@ export const optionParent = {
   calcHeight: 95,
   tip: false,
   searchShow: true,
-  searchMenuSpan: 6,
+  searchMenuSpan: 8,
   tree: true,
   border: true,
   index: true,

src/views/authority/role.vue

@@ -227,6 +227,11 @@
         return ids;
       }
     },
+    mounted() {
+      getRoleTree().then(res => {
+        this.option.column[3].dicData = res.data.data;
+      });
+    },
     methods: {
       submit() {
         const menuList = this.$refs.treeMenu.getCheckedKeys();
@@ -358,11 +363,6 @@
         this.loading = true;
         getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
           this.data = res.data.data;
-          getRoleTree().then(res => {
-            const data = res.data.data;
-            const index = this.$refs.crud.findColumnIndex("parentId");
-            this.option.column[index].dicData = data;
-          });
           this.loading = false;
           this.selectionClear();
         });

src/views/system/dept.vue

@@ -34,6 +34,7 @@
           icon="el-icon-circle-plus-outline"
           size="small"
           @click.stop="handleAdd(scope.row,scope.index)"
+          v-if="userInfo.role_name.includes('admin')"
         >新增子项
         </el-button>
       </template>
@@ -186,7 +187,7 @@
       };
     },
     computed: {
-      ...mapGetters(["permission"]),
+      ...mapGetters(["userInfo", "permission"]),
       permissionList() {
         return {
           addBtn: this.vaildData(this.permission.dept_add, false),
@@ -203,15 +204,13 @@
         return ids.join(",");
       }
     },
-    created() {
+    mounted() {
       this.initData();
     },
     methods: {
       initData() {
         getDeptTree().then(res => {
-          const data = res.data.data;
-          const index = this.$refs.crud.findColumnIndex("parentId");
-          this.option.column[index].dicData = data;
+          this.option.column[3].dicData = res.data.data;
         });
       },
       handleAdd(row) {
@@ -225,9 +224,16 @@
         this.$refs.crud.rowAdd();
       },
       rowSave(row, loading, done) {
-        add(row).then(() => {
-          loading();
-          this.onLoad(this.page);
+        add(row).then((res) => {
+          // 下拉框数据重载
+          this.initData();
+          // 获取新增数据的相关字段
+          const data = res.data.data;
+          row.id = data.id;
+          row.deptCategoryName = data.deptCategoryName;
+          row.tenantId = data.tenantId;
+          // 数据回调进行刷新
+          loading(row);
           this.$message({
             type: "success",
             message: "操作成功!"
@@ -239,8 +245,10 @@
       },
       rowUpdate(row, index, loading, done) {
         update(row).then(() => {
-          loading();
-          this.onLoad(this.page);
+          // 下拉框数据重载
+          this.initData();
+          // 数据回调进行刷新
+          loading(row);
           this.$message({
             type: "success",
             message: "操作成功!"
@@ -250,7 +258,7 @@
           window.console.log(error);
         });
       },
-      rowDel(row) {
+      rowDel(row, index, loading) {
         this.$confirm("确定将选择数据删除?", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
@@ -260,7 +268,10 @@
             return remove(row.id);
           })
           .then(() => {
-            this.onLoad(this.page);
+            // 下拉框数据重载
+            this.initData();
+            // 数据回调进行刷新
+            loading(row);
             this.$message({
               type: "success",
               message: "操作成功!"
@@ -281,12 +292,19 @@
             return remove(this.ids);
           })
           .then(() => {
+            // 刷新表格数据并重载
+            this.data = [];
+            this.parentId = 0;
+            this.$refs.crud.refreshTable();
+            this.$refs.crud.toggleSelection();
+            // 表格数据重载
             this.onLoad(this.page);
+            // 下拉框数据重载
+            this.initData();
             this.$message({
               type: "success",
               message: "操作成功!"
             });
-            this.$refs.crud.toggleSelection();
           });
       },
       searchReset() {

src/views/system/dict.vue

@@ -156,12 +156,17 @@
         return ids.join(",");
       }
     },
+    mounted() {
+      getDictTree().then(res => {
+        this.optionChild.column[2].dicData = res.data.data;
+      });
+    },
     methods: {
       rowSave(row, loading, done) {
         const form = {
           ...row,
           dictKey: -1,
-        }
+        };
         add(form).then(
           () => {
             loading();
@@ -412,11 +417,6 @@
           this.pageChild.total = data.total;
           this.dataChild = data.records;
           this.loadingChild = false;
-          getDictTree().then(res => {
-            const data = res.data.data;
-            const index = this.$refs.crudChild.findColumnIndex("parentId");
-            this.optionChild.column[index].dicData = data;
-          });
           this.selectionClear();
         });
       }

src/views/system/dictbiz.vue

@@ -156,12 +156,17 @@
         return ids.join(",");
       }
     },
+    mounted() {
+      getDictTree().then(res => {
+        this.optionChild.column[2].dicData = res.data.data;
+      });
+    },
     methods: {
       rowSave(row, loading, done) {
         const form = {
           ...row,
           dictKey: -1,
-        }
+        };
         add(form).then(
           () => {
             loading();
@@ -412,11 +417,6 @@
           this.pageChild.total = data.total;
           this.dataChild = data.records;
           this.loadingChild = false;
-          getDictTree().then(res => {
-            const data = res.data.data;
-            const index = this.$refs.crudChild.findColumnIndex("parentId");
-            this.optionChild.column[index].dicData = data;
-          });
           this.selectionClear();
         });
       }

src/views/system/menu.vue

@@ -7,6 +7,7 @@
                v-model="form"
                :permission="permissionList"
                :before-open="beforeOpen"
+               :before-close="beforeClose"
                @row-del="rowDel"
                @row-update="rowUpdate"
                @row-save="rowSave"
@@ -27,6 +28,16 @@
                    @click="handleDelete">删 除
         </el-button>
       </template>
+      <template slot-scope="scope" slot="menu">
+        <el-button
+          type="text"
+          icon="el-icon-circle-plus-outline"
+          size="small"
+          @click.stop="handleAdd(scope.row,scope.index)"
+          v-if="userInfo.role_name.includes('admin')"
+        >新增子项
+        </el-button>
+      </template>
       <template slot-scope="{row}"
                 slot="source">
         <div style="text-align:center">
@@ -42,6 +53,7 @@
   import {mapGetters} from "vuex";
   import iconList from "@/config/iconList";
   import func from "@/util/func";
+  import {getMenuTree} from "@/api/system/menu";
 
   export default {
     data() {
@@ -68,6 +80,7 @@
           index: true,
           selection: true,
           viewBtn: true,
+          menuWidth: 300,
           dialogClickModal: false,
           column: [
             {
@@ -97,7 +110,7 @@
               label: "上级菜单",
               prop: "parentId",
               type: "tree",
-              dicUrl: "/api/blade-system/menu/tree",
+              dicData: [],
               hide: true,
               props: {
                 label: "title"
@@ -207,7 +220,7 @@
       }
     },
     computed: {
-      ...mapGetters(["permission"]),
+      ...mapGetters(["userInfo", "permission"]),
       permissionList() {
         return {
           addBtn: this.vaildData(this.permission.menu_add, false),
@@ -224,11 +237,34 @@
         return ids.join(",");
       }
     },
+    mounted() {
+      this.initData();
+    },
     methods: {
+      initData() {
+        getMenuTree().then(res => {
+          this.option.column[2].dicData = res.data.data;
+        });
+      },
+      handleAdd(row) {
+        this.$refs.crud.value.parentId = row.id;
+        this.$refs.crud.option.column.filter(item => {
+          if (item.prop === "parentId") {
+            item.value = row.id;
+            item.addDisabled = true;
+          }
+        });
+        this.$refs.crud.rowAdd();
+      },
       rowSave(row, loading, done) {
-        add(row).then(() => {
-          loading();
-          this.onLoad(this.page);
+        add(row).then((res) => {
+          // 下拉框数据重载
+          this.initData();
+          // 获取新增数据的相关字段
+          const data = res.data.data;
+          row.id = data.id;
+          // 数据回调进行刷新
+          loading(row);
           this.$message({
             type: "success",
             message: "操作成功!"
@@ -240,8 +276,10 @@
       },
       rowUpdate(row, index, loading, done) {
         update(row).then(() => {
-          loading();
-          this.onLoad(this.page);
+          // 下拉框数据重载
+          this.initData();
+          // 数据回调进行刷新
+          loading(row);
           this.$message({
             type: "success",
             message: "操作成功!"
@@ -251,7 +289,7 @@
           window.console.log(error);
         });
       },
-      rowDel(row) {
+      rowDel(row, index, loading) {
         this.$confirm("确定将选择数据删除?", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
@@ -261,7 +299,10 @@
             return remove(row.id);
           })
           .then(() => {
-            this.onLoad(this.page);
+            // 下拉框数据重载
+            this.initData();
+            // 数据回调进行刷新
+            loading(row);
             this.$message({
               type: "success",
               message: "操作成功!"
@@ -301,12 +342,19 @@
             return remove(this.ids);
           })
           .then(() => {
+            // 刷新表格数据并重载
+            this.data = [];
+            this.parentId = 0;
+            this.$refs.crud.refreshTable();
+            this.$refs.crud.toggleSelection();
+            // 表格数据重载
             this.onLoad(this.page);
+            // 下拉框数据重载
+            this.initData();
             this.$message({
               type: "success",
               message: "操作成功!"
             });
-            this.$refs.crud.toggleSelection();
           });
       },
       beforeOpen(done, type) {
@@ -317,6 +365,17 @@
         }
         done();
       },
+      beforeClose(done) {
+        this.$refs.crud.value.parentId = "";
+        this.$refs.crud.value.addDisabled = false;
+        this.$refs.crud.option.column.filter(item => {
+          if (item.prop === "parentId") {
+            item.value = "";
+            item.addDisabled = false;
+          }
+        });
+        done();
+      },
       currentChange(currentPage) {
         this.page.currentPage = currentPage;
       },

src/views/util/demo/dict-classic.vue

@@ -201,6 +201,11 @@
         return ids.join(",");
       }
     },
+    mounted() {
+      getDictTree().then(res => {
+        this.optionChild.column[2].dicData = res.data.data;
+      });
+    },
     methods: {
       handleAdd(row) {
         this.$refs.crud.value.code = row.code;
@@ -346,11 +351,6 @@
           Object.assign(params, this.query)
         ).then(res => {
           this.data = res.data.data;
-          getDictTree().then(res => {
-            const data = res.data.data;
-            const index = this.$refs.crud.findColumnIndex("parentId");
-            this.option.column[index].dicData = data;
-          });
           this.loading = false;
           this.selectionClear();
         });