产品管理优化：新增KeepAlive缓存配置并优化字典选择功能

src/components/RouterLayout/index.vue

@@ -8,13 +8,12 @@
 </template>
 
 <script>
+  import { KEEP_ALIVE_INCLUDE } from '@/config/setting';
   export default {
     name: 'RouterLayout',
     computed: {
       include() {
-        console.log('this.$store.getters-----------------------');
-        console.log(this.$store.getters['theme/keepAliveInclude']);
-        return this.$store.getters['theme/keepAliveInclude'] ?? [];
+        return KEEP_ALIVE_INCLUDE;
       },
       transitionName() {
         return this.$store.state.theme.transitionName;

src/config/setting.js

@@ -24,6 +24,10 @@ export const WHITE_LIST = ['/login', '/forget'];
 
 // 开启 KeepAlive 后仍然不需要缓存的路由地址
 export const KEEP_ALIVE_EXCLUDES = [];
+// 开启 KeepAlive 后需要缓存的路由地址
+export const KEEP_ALIVE_INCLUDE= [
+  'productIndex','oneProductIndex'
+];
 
 // 直接指定菜单数据
 export const USER_MENUS = undefined;

src/views/material/product/detail.vue

@@ -278,6 +278,9 @@
                 clearable
                 v-model="form.modelKey"
                 multiple
+                filterable
+                allow-create
+                default-first-option
               >
               </DictSelection>
             </el-form-item>
@@ -289,6 +292,9 @@
                 clearable
                 v-model="form.colorKey"
                 multiple
+                filterable
+                allow-create
+                default-first-option
               >
               </DictSelection>
             </el-form-item>

src/views/material/product/index.vue

@@ -49,7 +49,13 @@
                   <el-col v-bind="styleResponsive ? { sm: 3 } : { span: 3 }">
                     <el-form-item label="状态:">
                       <div class="ele-text-secondary">
-                        {{ current.isEnabled == 0 ? '停用' : current.isEnabled == 1 ? '启用' : '' }}
+                        {{
+                          current.isEnabled == 0
+                            ? '停用'
+                            : current.isEnabled == 1
+                            ? '启用'
+                            : ''
+                        }}
                       </div>
                     </el-form-item>
                   </el-col>
@@ -81,7 +87,13 @@
                   <el-col v-bind="styleResponsive ? { sm: 3 } : { span: 3 }">
                     <el-form-item label="状态:">
                       <div class="ele-text-secondary">
-                        {{ current.isEnabled == 0 ? '停用' : current.isEnabled == 1 ? '启用' : '' }}
+                        {{
+                          current.isEnabled == 0
+                            ? '停用'
+                            : current.isEnabled == 1
+                            ? '启用'
+                            : ''
+                        }}
                       </div>
                     </el-form-item>
                   </el-col>
@@ -112,241 +124,250 @@
   </div>
 </template>
 <script>
-import IndexData from './components/index-data.vue';
-import IndexSearch from './components/index-search.vue';
+  import IndexData from './components/index-data.vue';
+  import IndexSearch from './components/index-search.vue';
 
-import dictMixins from '@/mixins/dictMixins';
-import { getTreeByGroup } from '@/api/classifyManage';
+  import dictMixins from '@/mixins/dictMixins';
+  import { getTreeByGroup } from '@/api/classifyManage';
 
-import { getInfoById } from '@/api/classifyManage';
+  import { getInfoById } from '@/api/classifyManage';
 
-export default {
-  components: {
-    IndexData,
-    IndexSearch
-  },
-  mixins: [dictMixins],
-  data() {
-    return {
-      loading: false,
-      current: {},
-      curNode: {},
-      treeList: [],
-      treeLoading: false,
-      formData: {},
-      rootTreeId: null,
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      },
-      currentData: {}
-    };
-  },
+  export default {
+    name: 'productIndex',
 
-  computed: {
-    // 是否开启响应式布局
-    styleResponsive() {
-      return this.$store.state.theme.styleResponsive;
+    components: {
+      IndexData,
+      IndexSearch
     },
-
-    rootId() {
-      return this.$route.query.id;
+    mixins: [dictMixins],
+    data() {
+      return {
+        loading: false,
+        current: {},
+        curNode: {},
+        treeList: [],
+        treeLoading: false,
+        formData: {},
+        rootTreeId: null,
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
+        currentData: {},
+        where: {}
+      };
     },
+    activated() {
+      // this.getTreeData();
+      this.$nextTick(() => {
+        this.reload(this.where);
+      });
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      },
 
-    fullName() {
-      let str = '';
-      let codeStr = '';
-      let node = this.curNode;
-      while (node?.data?.name) {
-        str = node.data.name + '-' + str;
-        codeStr = node.data.code + '-' + codeStr;
-        node = node?.parent;
-      }
+      rootId() {
+        return this.$route.query.id;
+      },
 
-      return str.substring(str, str.length - 1);
-      // return (
-      //   str.substring(str, str.length - 1) +
-      //   `(${codeStr.substring(str, str.length - 1)})`
-      // );
-    }
-  },
-  created() {
-    this.getTreeData();
-  },
-  methods: {
-    async getTreeData() {
-      try {
-        this.treeLoading = true;
+      fullName() {
+        let str = '';
+        let codeStr = '';
+        let node = this.curNode;
+        while (node?.data?.name) {
+          str = node.data.name + '-' + str;
+          codeStr = node.data.code + '-' + codeStr;
+          node = node?.parent;
+        }
 
-        const res = await getTreeByGroup({ type: 5 });
-        this.treeLoading = false;
-        if (res?.code === '0') {
-          this.treeList = res.data;
-          if (!this.$route.query.categoryLevelId) {
-            this.$nextTick(() => {
-              //默认高亮第一级树节点;
-              if (this.treeList[0]) {
-                this.rootTreeId = this.treeList[0].id;
-                this.getDetail(this.treeList[0].id);
-                this.publicfun(this.treeList[0]);
-              }
-            });
-          } else {
-            this.getDetail(this.$route.query.categoryLevelId);
-            this.$nextTick(() => {
-              this.$refs.treeRef.setCurrentKey(
+        return str.substring(str, str.length - 1);
+        // return (
+        //   str.substring(str, str.length - 1) +
+        //   `(${codeStr.substring(str, str.length - 1)})`
+        // );
+      }
+    },
+    created() {
+      this.getTreeData();
+    },
+    methods: {
+      async getTreeData() {
+        try {
+          this.treeLoading = true;
+
+          const res = await getTreeByGroup({ type: 5 });
+          this.treeLoading = false;
+          if (res?.code === '0') {
+            this.treeList = res.data;
+            if (!this.$route.query.categoryLevelId) {
+              this.$nextTick(() => {
+                //默认高亮第一级树节点;
+                if (this.treeList[0]) {
+                  this.rootTreeId = this.treeList[0].id;
+                  this.getDetail(this.treeList[0].id);
+                  this.publicfun(this.treeList[0]);
+                }
+              });
+            } else {
+              this.getDetail(this.$route.query.categoryLevelId);
+              this.$nextTick(() => {
+                this.$refs.treeRef.setCurrentKey(
+                  this.$route.query.categoryLevelId
+                );
+              });
+              const objByid = this.findNodeById(
+                this.treeList,
                 this.$route.query.categoryLevelId
               );
-            });
-            const objByid = this.findNodeById(
-              this.treeList,
-              this.$route.query.categoryLevelId
-            );
-            console.log(objByid, '当前选择的物品');
-            this.publicfun(objByid);
+              console.log(objByid, '当前选择的物品');
+              this.publicfun(objByid);
+            }
+            return this.treeList;
           }
-          return this.treeList;
-        }
-      } catch (error) {}
-      this.treeLoading = false;
-    },
+        } catch (error) {}
+        this.treeLoading = false;
+      },
 
-    async getDetail(id) {
-      this.loading = true;
-      const res = await getInfoById(id);
-      this.loading = false;
-      if (res.code == '0') {
-        this.current = res.data;
-        this.$nextTick(() => {
-          this.$refs.treeRef.setCurrentKey(this.current.id);
-        });
-      }
-    },
-    findNodeById(tree, targetId) {
-      function traverse(nodes) {
-        for (let node of nodes) {
-          if (node.id === targetId) {
-            return node;
-          } else if (node.children && node.children.length > 0) {
-            const foundNode = traverse(node.children);
-            if (foundNode) {
-              return foundNode;
+      async getDetail(id) {
+        this.loading = true;
+        const res = await getInfoById(id);
+        this.loading = false;
+        if (res.code == '0') {
+          this.current = res.data;
+          this.$nextTick(() => {
+            this.$refs.treeRef.setCurrentKey(this.current.id);
+          });
+        }
+      },
+      findNodeById(tree, targetId) {
+        function traverse(nodes) {
+          for (let node of nodes) {
+            if (node.id === targetId) {
+              return node;
+            } else if (node.children && node.children.length > 0) {
+              const foundNode = traverse(node.children);
+              if (foundNode) {
+                return foundNode;
+              }
             }
           }
+          return null;
         }
-        return null;
-      }
 
-      return traverse(tree);
-    },
+        return traverse(tree);
+      },
 
-    async handleNodeClick(data, node) {
-      this.$route.query.categoryLevelId = '';
-      if (this.$refs.searchRef) {
-        this.$refs.searchRef.resetAllSearch();
-      }
+      async handleNodeClick(data, node) {
+        this.$route.query.categoryLevelId = '';
+        if (this.$refs.searchRef) {
+          this.$refs.searchRef.resetAllSearch();
+        }
 
-      this.curNode = node;
-      await this.publicfun(data);
-      console.log(data, '点击物品分类');
-      await this.getDetail(data.id);
-    },
-    publicfun(data) {
-      this.pathList = this.findParent([], data, this.treeList);
-      this.rootTreeId = null;
-      if (this.pathList.length == 0) {
-        this.rootTreeId = data.id;
-      } else {
-        this.rootTreeId =
-          this.pathList[this.pathList.length - 1] &&
-          this.pathList[this.pathList.length - 1].id;
-      }
+        this.curNode = node;
+        await this.publicfun(data);
+        console.log(data, '点击物品分类');
+        await this.getDetail(data.id);
+      },
+      publicfun(data) {
+        this.pathList = this.findParent([], data, this.treeList);
+        this.rootTreeId = null;
+        if (this.pathList.length == 0) {
+          this.rootTreeId = data.id;
+        } else {
+          this.rootTreeId =
+            this.pathList[this.pathList.length - 1] &&
+            this.pathList[this.pathList.length - 1].id;
+        }
 
-      let ruleCode = null;
-      if (this.pathList.length == 0) {
-        ruleCode = data.ruleCode;
-      } else {
-        ruleCode =
-          this.pathList[this.pathList.length - 1] &&
-          this.pathList[this.pathList.length - 1].ruleCode;
-      }
+        let ruleCode = null;
+        if (this.pathList.length == 0) {
+          ruleCode = data.ruleCode;
+        } else {
+          ruleCode =
+            this.pathList[this.pathList.length - 1] &&
+            this.pathList[this.pathList.length - 1].ruleCode;
+        }
 
-      this.pathList.unshift(data);
-      const PathInfo = {
-        categoryLevelPath: '',
-        categoryLevelPathId: [],
-        // rootCategoryLevelId: null,
-        categoryLevelId: '',
-        categoryLevelName: '',
-        ruleCode: ''
-      };
-      const pathName = [];
-      this.pathList.map((item) => {
-        pathName.unshift(item.name);
-        PathInfo.categoryLevelPathId.unshift(item.id);
-        // PathInfo.rootCategoryLevelId = item.rootCategoryLevelId;
-      });
-      PathInfo.categoryLevelPath = pathName.join('-');
-      PathInfo.categoryLevelPathId = PathInfo.categoryLevelPathId.join(',');
-      PathInfo.categoryLevelId = data.id;
-      PathInfo.categoryLevelName = data.name;
-      PathInfo.ruleCode = ruleCode;
+        this.pathList.unshift(data);
+        const PathInfo = {
+          categoryLevelPath: '',
+          categoryLevelPathId: [],
+          // rootCategoryLevelId: null,
+          categoryLevelId: '',
+          categoryLevelName: '',
+          ruleCode: ''
+        };
+        const pathName = [];
+        this.pathList.map((item) => {
+          pathName.unshift(item.name);
+          PathInfo.categoryLevelPathId.unshift(item.id);
+          // PathInfo.rootCategoryLevelId = item.rootCategoryLevelId;
+        });
+        PathInfo.categoryLevelPath = pathName.join('-');
+        PathInfo.categoryLevelPathId = PathInfo.categoryLevelPathId.join(',');
+        PathInfo.categoryLevelId = data.id;
+        PathInfo.categoryLevelName = data.name;
+        PathInfo.ruleCode = ruleCode;
 
-      console.log(PathInfo, '点击物品分类');
-      this.currentData = PathInfo;
-    },
-    /* 刷新表格 */
-    reload(where) {
-      console.log(where, '刷新表格');
-      this.$refs.listData.reload(where);
-    },
+        console.log(PathInfo, '点击物品分类');
+        this.currentData = PathInfo;
+      },
+      /* 刷新表格 */
+      reload(where) {
+        console.log(where, '刷新表格');
+        this.where = where;
+        this.$refs.listData.reload(where);
+      },
 
-    // parents:用于返回的数组，childNode:要查询的节点，treeList：json树形数据
-    findParent(parents, childNode, treeList) {
-      for (let i = 0; i < treeList.length; i++) {
-        // 父节点查询条件
-        if (treeList[i].id === childNode.parentId) {
-          // 如果找到结果,保存当前节点
-          parents.push(treeList[i]);
-          // 用当前节点再去原数据查找当前节点的父节点
-          this.findParent(parents, treeList[i], this.treeList);
-          break;
-        } else {
-          if (treeList[i].children instanceof Array) {
-            //	没找到，遍历该节点的子节点
-            this.findParent(parents, childNode, treeList[i].children);
+      // parents:用于返回的数组，childNode:要查询的节点，treeList：json树形数据
+      findParent(parents, childNode, treeList) {
+        for (let i = 0; i < treeList.length; i++) {
+          // 父节点查询条件
+          if (treeList[i].id === childNode.parentId) {
+            // 如果找到结果,保存当前节点
+            parents.push(treeList[i]);
+            // 用当前节点再去原数据查找当前节点的父节点
+            this.findParent(parents, treeList[i], this.treeList);
+            break;
+          } else {
+            if (treeList[i].children instanceof Array) {
+              //	没找到，遍历该节点的子节点
+              this.findParent(parents, childNode, treeList[i].children);
+            }
           }
         }
+        return parents;
       }
-      return parents;
     }
-  }
-};
+  };
 </script>
 <style lang="scss" scoped>
-.sys-organization-list {
-  height: calc(100vh - 165px);
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  overflow: auto;
-}
+  .sys-organization-list {
+    height: calc(100vh - 165px);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
 
-.sys-organization-list :deep(.el-tree-node__content) {
-  height: 30px;
+  .sys-organization-list :deep(.el-tree-node__content) {
+    height: 30px;
 
-  & > .el-tree-node__expand-icon {
-    margin-left: 10px;
+    & > .el-tree-node__expand-icon {
+      margin-left: 10px;
+    }
   }
-}
 
-.form-content {
-  height: 50px;
-  border: 1px solid;
-  box-sizing: border-box;
-}
+  .form-content {
+    height: 50px;
+    border: 1px solid;
+    box-sizing: border-box;
+  }
 
-.form-wrapper {
-  padding: 12px 24px;
-}
+  .form-wrapper {
+    padding: 12px 24px;
+  }
 </style>

src/views/material/product/oneProduct.vue

@@ -118,8 +118,8 @@
             >
             </IndexData>
           </div>
-        </template>
-      </ele-split-layout>fv
+        </template> </ele-split-layout
+      >
     </el-card>
   </div>
 </template>
@@ -135,6 +135,8 @@
   import { deepClone } from '@/utils';
 
   export default {
+    name: 'oneProductIndex',
+
     components: {
       IndexData,
       IndexSearch
@@ -150,13 +152,19 @@
         treeLoading: false,
         formData: {},
         rootTreeId: null,
+        where:{},
         defaultProps: {
           children: 'children',
           label: 'name'
         }
       };
     },
-
+    activated() {
+      // this.getTreeData();
+      this.$nextTick(()=>{
+        this.reload(this.where)
+      })
+    },
     computed: {
       // 是否开启响应式布局
       styleResponsive() {
@@ -312,6 +320,7 @@
 
       /* 刷新表格 */
       reload(where) {
+        this.where = where;
         this.$refs.listData.reload(where);
       },