jr 更新

src/components/IconSelect/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="icon-body">
+    <el-input
+      v-model="name"
+      clearable
+      placeholder="请输入图标名称"
+      @clear="filterIcons"
+      @input="filterIcons"
+    >
+      <i slot="suffix" class="el-icon-search el-input__icon" />
+    </el-input>
+    <div class="icon-list">
+      <div class="list-container">
+        <div
+          v-for="(item, index) in iconList"
+          :key="index"
+          class="icon-item-wrapper"
+          @click="selectedIcon(item)"
+        >
+          <div :class="['icon-item', { active: activeIcon === item }]">
+            <svg-icon
+              :icon-class="item"
+              class-name="icon"
+              style="height: 25px; width: 16px"
+            />
+            <span>{{ item }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import icons from "./requireIcons";
+export default {
+  name: "IconSelect",
+  props: {
+    activeIcon: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      name: "",
+      iconList: icons,
+    };
+  },
+  methods: {
+    filterIcons() {
+      this.iconList = icons;
+      if (this.name) {
+        this.iconList = this.iconList.filter((item) =>
+          item.includes(this.name)
+        );
+      }
+    },
+    selectedIcon(name) {
+      this.$emit("selected", name);
+      document.body.click(); // 隐藏 Popover
+    },
+    reset() {
+      console.log("reset");
+      this.name = "";
+      this.iconList = icons;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-body {
+  width: 100%;
+  padding: 10px;
+  .icon-search {
+    position: relative;
+    margin-bottom: 5px;
+  }
+  .icon-list {
+    height: 200px;
+    overflow: auto;
+    .list-container {
+      display: flex;
+      flex-wrap: wrap;
+      .icon-item-wrapper {
+        width: calc(100% / 3);
+        height: 25px;
+        line-height: 25px;
+        cursor: pointer;
+        display: flex;
+        .icon-item {
+          display: flex;
+          max-width: 100%;
+          height: 100%;
+          padding: 0 5px;
+          &:hover {
+            background: #ececec;
+            border-radius: 5px;
+          }
+          .icon {
+            flex-shrink: 0;
+          }
+          span {
+            display: inline-block;
+            vertical-align: -0.15em;
+            fill: currentColor;
+            padding-left: 2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .icon-item.active {
+          background: #ececec;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/IconSelect/requireIcons.js

@@ -0,0 +1,7 @@
+const req = require.context("../../icons/svg", false, /\.svg$/);
+const requireAll = (requireContext) => requireContext.keys();
+const re = /\.\/(.*)\.svg/;
+const icons = requireAll(req).map((i) => {
+  return i.match(re)[1];
+});
+export default icons;

src/components/SvgIcon/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners"
+  />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+import { isExternal } from "@/utils/validate";
+
+export default {
+  name: "SvgIcon",
+  props: {
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass);
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`;
+    },
+    svgClass() {
+      if (this.className) {
+        return "svg-icon " + this.className;
+      } else {
+        return "svg-icon";
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+</style>

src/components/SvgIcons/index.vue

@@ -5,10 +5,7 @@
       aria-hidden="true"
       :style="{ width: width, height: height }"
     >
-      <use
-        :xlink:href="iconName"
-        :fill="color"
-      ></use>
+      <use :xlink:href="iconName" :fill="color"></use>
     </svg>
   </div>
 </template>
@@ -19,39 +16,40 @@
 // import '@/assets/icons/iconfont-svg.js'
 // 引入本地的svg文件
 // 定义一个加载目录的函数
-const requireAll = (requireContext) => requireContext.keys().map(requireContext)
-const req = require.context('@/icons/svg', false, /\.svg$/)
+const requireAll = (requireContext) =>
+  requireContext.keys().map(requireContext);
+const req = require.context("@/icons/svg", false, /\.svg$/);
 // 加载目录下的所有的 svg 文件
-requireAll(req)
+requireAll(req);
 
 export default {
-  name: 'Icon',
+  name: "Icon",
   props: {
     name: String,
     prefix: {
       type: String,
-      default: 'icon-'
+      default: "icon-",
     },
     color: {
       type: String,
-      default: ''
+      default: "",
     },
     width: {
       type: String,
-      default: '16px'
+      default: "16px",
     },
     //svg高度
     height: {
       type: String,
-      default: '16px'
-    }
+      default: "16px",
+    },
   },
   computed: {
     iconName() {
-      return `#${this.prefix}${this.name}`
-    }
-  }
-}
+      return `#${this.prefix}${this.name}`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/icons/index.js

@@ -0,0 +1,10 @@
+import Vue from "vue";
+import SvgIcon from "@/components/SvgIcon"; // svg component
+
+// register globally
+Vue.component("svg-icon", SvgIcon);
+
+const req = require.context("./svg", false, /\.svg$/);
+const requireAll = (requireContext) =>
+  requireContext.keys().map(requireContext);
+requireAll(req);

src/icons/svg/404.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>

src/icons/svg/bug.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M127.88 73.143c0 1.412-.506 2.635-1.518 3.669-1.011 1.033-2.209 1.55-3.592 1.55h-17.887c0 9.296-1.783 17.178-5.35 23.645l16.609 17.044c1.011 1.034 1.517 2.257 1.517 3.67 0 1.412-.506 2.635-1.517 3.668-.958 1.033-2.155 1.55-3.593 1.55-1.438 0-2.635-.517-3.593-1.55l-15.811-16.063a15.49 15.49 0 0 1-1.196 1.06c-.532.434-1.65 1.208-3.353 2.322a50.104 50.104 0 0 1-5.192 2.974c-1.758.87-3.94 1.658-6.546 2.364-2.607.706-5.189 1.06-7.748 1.06V47.044H58.89v73.062c-2.716 0-5.417-.367-8.106-1.102-2.688-.734-5.003-1.631-6.945-2.692a66.769 66.769 0 0 1-5.268-3.179c-1.571-1.057-2.73-1.94-3.476-2.65L33.9 109.34l-14.611 16.877c-1.066 1.14-2.344 1.711-3.833 1.711-1.277 0-2.422-.434-3.434-1.304-1.012-.978-1.557-2.187-1.635-3.627-.079-1.44.333-2.705 1.236-3.794l16.129-18.51c-3.087-6.197-4.63-13.644-4.63-22.342H5.235c-1.383 0-2.58-.517-3.592-1.55S.125 74.545.125 73.132c0-1.412.506-2.635 1.518-3.668 1.012-1.034 2.21-1.55 3.592-1.55h17.887V43.939L9.308 29.833c-1.012-1.033-1.517-2.256-1.517-3.669 0-1.412.505-2.635 1.517-3.668 1.012-1.034 2.21-1.55 3.593-1.55s2.58.516 3.593 1.55l13.813 14.106h67.396l13.814-14.106c1.012-1.034 2.21-1.55 3.592-1.55 1.384 0 2.581.516 3.593 1.55 1.012 1.033 1.518 2.256 1.518 3.668 0 1.413-.506 2.636-1.518 3.67l-13.814 14.105v23.975h17.887c1.383 0 2.58.516 3.593 1.55 1.011 1.033 1.517 2.256 1.517 3.668l-.005.01zM89.552 26.175H38.448c0-7.23 2.489-13.386 7.466-18.469C50.892 2.623 56.92.082 64 .082c7.08 0 13.108 2.541 18.086 7.624 4.977 5.083 7.466 11.24 7.466 18.469z"/></svg>

src/icons/svg/build.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568899741379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M960 591.424V368.96c0-0.288 0.16-0.512 0.16-0.768S960 367.68 960 367.424V192a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v175.424c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768v222.464c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768V864a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32v-271.04c0-0.288 0.16-0.512 0.16-0.768S960 591.68 960 591.424z m-560-31.232v-160H608v160h-208z m208 64V832h-208v-207.808H608z m-480-224h208v160H128v-160z m544 0h224v160h-224v-160zM896 224v112.192H128V224h768zM128 624.192h208V832H128v-207.808zM672 832v-207.808h224V832h-224z" p-id="2055"></path></svg>

src/icons/svg/chart.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h36.571V128H0V54.857zM91.429 27.43H128V128H91.429V27.429zM45.714 0h36.572v128H45.714V0z"/></svg>

src/icons/svg/checkbox.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575982282951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M828.40625 90.125H195.59375C137.375 90.125 90.125 137.375 90.125 195.59375v632.8125c0 58.21875 47.25 105.46875 105.46875 105.46875h632.8125c58.21875 0 105.46875-47.25 105.46875-105.46875V195.59375c0-58.21875-47.25-105.46875-105.46875-105.46875z m52.734375 738.28125c0 29.16-23.57015625 52.734375-52.734375 52.734375H195.59375c-29.109375 0-52.734375-23.574375-52.734375-52.734375V195.59375c0-29.109375 23.625-52.734375 52.734375-52.734375h632.8125c29.16 0 52.734375 23.625 52.734375 52.734375v632.8125z" p-id="903"></path><path d="M421.52890625 709.55984375a36.28125 36.28125 0 0 1-27.55265625-12.66890625L205.17453125 476.613125a36.28546875 36.28546875 0 0 1 55.10109375-47.22890625l164.986875 192.4846875 342.16171875-298.48078125a36.2896875 36.2896875 0 0 1 47.70984375 54.68765625L445.3859375 700.6203125a36.3234375 36.3234375 0 0 1-23.85703125 8.93953125z" p-id="904"></path></svg>

src/icons/svg/clipboard.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.857 118.857h64V73.143H89.143c-1.902 0-3.52-.668-4.855-2.002-1.335-1.335-2.002-2.954-2.002-4.855V36.57H54.857v82.286zM73.143 16v-4.571a2.2 2.2 0 0 0-.677-1.61 2.198 2.198 0 0 0-1.609-.676H20.571c-.621 0-1.158.225-1.609.676a2.198 2.198 0 0 0-.676 1.61V16a2.2 2.2 0 0 0 .676 1.61c.451.45.988.676 1.61.676h50.285c.622 0 1.158-.226 1.61-.677.45-.45.676-.987.676-1.609zm18.286 48h21.357L91.43 42.642V64zM128 73.143v48c0 1.902-.667 3.52-2.002 4.855-1.335 1.335-2.953 2.002-4.855 2.002H52.57c-1.901 0-3.52-.667-4.854-2.002-1.335-1.335-2.003-2.953-2.003-4.855v-11.429H6.857c-1.902 0-3.52-.667-4.855-2.002C.667 106.377 0 104.759 0 102.857v-96c0-1.902.667-3.52 2.002-4.855C3.337.667 4.955 0 6.857 0h77.714c1.902 0 3.52.667 4.855 2.002 1.335 1.335 2.003 2.953 2.003 4.855V30.29c1 .622 1.856 1.29 2.569 2.003l29.147 29.147c1.335 1.335 2.478 3.145 3.429 5.43.95 2.287 1.426 4.383 1.426 6.291v-.018z"/></svg>

src/icons/svg/code.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" p-id="2423"></path></svg>

src/icons/svg/guide.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.482 70.131l36.204 16.18 69.932-65.485-61.38 70.594 46.435 18.735c1.119.425 2.397-.17 2.797-1.363v-.085L127.998.047 1.322 65.874c-1.12.597-1.519 1.959-1.04 3.151.32.511.72.937 1.2 1.107zm44.676 57.821L64.22 107.26l-18.062-7.834v28.527z"/></svg>

src/icons/svg/icon.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 0 1 4.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 0 1 2.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>

src/icons/svg/input.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802859706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3102" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 224H128c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z m0 480c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V320c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32v384z" p-id="3103"></path><path d="M224 352c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V384c0-16-12.8-32-32-32z" p-id="3104"></path></svg>

src/icons/svg/international.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg>

src/icons/svg/job.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036191400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5472" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M934.912 1016.832H192c-14.336 0-25.6-11.264-25.6-25.6v-189.44c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v163.84h691.712V64H217.6v148.48c0 14.336-11.264 25.6-25.6 25.6s-25.6-11.264-25.6-25.6v-174.08c0-14.336 11.264-25.6 25.6-25.6h742.912c14.336 0 25.6 11.264 25.6 25.6v952.832c0 14.336-11.264 25.6-25.6 25.6z" p-id="5473"></path><path d="M232.96 371.2h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 540.16h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 698.88h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM574.464 762.88c-134.144 0-243.2-109.056-243.2-243.2S440.32 276.48 574.464 276.48s243.2 109.056 243.2 243.2-109.056 243.2-243.2 243.2z m0-435.2c-105.984 0-192 86.016-192 192S468.48 711.68 574.464 711.68s192-86.016 192-192S680.448 327.68 574.464 327.68z" p-id="5474"></path><path d="M663.04 545.28h-87.04c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h87.04c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6z" p-id="5475"></path><path d="M576 545.28c-14.336 0-25.6-11.264-25.6-25.6v-87.04c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v87.04c0 14.336-11.264 25.6-25.6 25.6z" p-id="5476"></path></svg>

src/icons/svg/language.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.742 36.8c2.398 7.2 5.595 12.8 11.19 18.4 4.795-4.8 7.992-11.2 10.39-18.4h-21.58zm-52.748 40h20.78l-10.39-28-10.39 28z"/><path d="M111.916 0H16.009C7.218 0 .025 7.2.025 16v96c0 8.8 7.193 16 15.984 16h95.907c8.791 0 15.984-7.2 15.984-16V16c0-8.8-6.394-16-15.984-16zM72.754 103.2c-1.598 1.6-3.197 1.6-4.795 1.6-.8 0-2.398 0-3.197-.8-.8-.8-1.599 0-1.599-.8s-.799-1.6-1.598-3.2c-.8-1.6-.8-2.4-1.599-4l-3.196-8.8H28.797L25.6 96c-1.598 3.2-2.398 5.6-3.197 7.2-.8 1.6-2.398 1.6-4.795 1.6-1.599 0-3.197-.8-4.796-1.6-1.598-1.6-2.397-2.4-2.397-4 0-.8 0-1.6.799-3.2.8-1.6.8-2.4 1.598-4l17.583-44.8c.8-1.6.8-3.2 1.599-4.8.799-1.6 1.598-3.2 2.397-4 .8-.8 1.599-2.4 3.197-3.2 1.599-.8 3.197-.8 4.796-.8 1.598 0 3.196 0 4.795.8 1.598.8 2.398 1.6 3.197 3.2.799.8 1.598 2.4 2.397 4 .8 1.6 1.599 3.2 2.398 5.6l17.583 44c1.598 3.2 2.398 5.6 2.398 7.2-.8.8-1.599 2.4-2.398 4zM116.711 72c-8.791-3.2-15.185-7.2-20.78-12-5.594 5.6-12.787 9.6-21.579 12l-2.397-4c8.791-2.4 15.984-5.6 21.579-11.2C87.939 51.2 83.144 44 81.545 36h-7.992v-3.2h21.58c-1.6-2.4-3.198-5.6-4.796-8l2.397-.8c1.599 2.4 3.997 5.6 5.595 8.8h19.98v4h-7.992c-2.397 8-6.393 15.2-11.189 20 5.595 4.8 11.988 8.8 20.78 11.2l-3.197 4z"/></svg>

src/icons/svg/link.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>

src/icons/svg/list.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.585 12.087c0 6.616 3.974 11.98 8.877 11.98 4.902 0 8.877-5.364 8.877-11.98 0-6.616-3.975-11.98-8.877-11.98-4.903 0-8.877 5.364-8.877 11.98zM125.86.107H35.613c-1.268 0-2.114 1.426-2.114 2.852v18.255c0 1.712 1.057 2.853 2.114 2.853h90.247c1.268 0 2.114-1.426 2.114-2.853V2.96c0-1.711-1.057-2.852-2.114-2.852zM.106 62.86c0 6.615 3.974 11.979 8.876 11.979 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zM124.17 50.88H33.921c-1.268 0-2.114 1.425-2.114 2.851v18.256c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852V53.73c0-1.426-.846-2.852-2.114-2.852zM.106 115.913c0 6.616 3.974 11.98 8.876 11.98 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zm124.064-11.98H33.921c-1.268 0-2.114 1.426-2.114 2.853v18.255c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852v-18.255c0-1.427-.846-2.853-2.114-2.853z"/></svg>

src/icons/svg/lock.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M119.88 49.674h-7.987V39.52C111.893 17.738 90.45.08 63.996.08 37.543.08 16.1 17.738 16.1 39.52v10.154H8.113c-4.408 0-7.987 2.94-7.987 6.577v65.13c0 3.637 3.57 6.577 7.987 6.577H119.88c4.407 0 7.987-2.94 7.987-6.577v-65.13c-.008-3.636-3.58-6.577-7.987-6.577zm-23.953 0H32.065V39.52c0-14.524 14.301-26.295 31.931-26.295 17.63 0 31.932 11.777 31.932 26.295v10.153z"/></svg>

src/icons/svg/log.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566035943711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4805" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M208.736 566.336H64.384v59.328h144.352v-59.328z m0-336.096H165.44V74.592c0-7.968 4.896-14.848 10.464-14.848h502.016V0.448H175.936c-38.72 1.248-69.248 34.368-68.192 74.144v155.648H64.384V289.6h144.352V230.24z m0 168.096H64.384v59.328h144.352v-59.328z m714.656 76.576h-57.76v474.496c0 7.936-4.896 14.848-10.464 14.848H175.936c-5.568 0-10.464-6.912-10.464-14.848v-155.68h43.296v-59.296H64.384v59.296h43.328v155.68c-1.024 39.776 29.472 72.896 68.192 74.144h679.232c38.72-1.184 69.248-34.368 68.256-74.144V474.912z m14.944-290.336l-83.072-85.312a71.264 71.264 0 0 0-52.544-21.728 71.52 71.52 0 0 0-51.616 23.872L386.528 507.264a30.496 30.496 0 0 0-6.176 10.72L308.16 740.512a30.016 30.016 0 0 0 6.976 30.24c7.712 7.968 19.2 10.752 29.568 7.2l216.544-74.112a28.736 28.736 0 0 0 12.128-7.936L940.448 287.456a75.552 75.552 0 0 0-2.112-102.88z m-557.12 518.272l39.104-120.64 78.336 80.416-117.44 40.224z m170.048-70.016l-103.552-106.016 200.16-222.4 103.52 106.304-200.128 222.112zM897.952 247.072l-0.256 0.224-107.136 119.168-103.52-106.528 106.432-118.624a14.144 14.144 0 0 1 10.304-4.736 13.44 13.44 0 0 1 10.464 4.288l83.264 85.696c5.472 5.6 5.664 14.72 0.448 20.512z" p-id="4806"></path></svg>

src/icons/svg/logininfor.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036016814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5261" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 128h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h42.666666v640H170.666667V213.333333h42.666666a42.666667 42.666667 0 0 0 0-85.333333H128a42.666667 42.666667 0 0 0-42.666667 42.666667v725.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" p-id="5262"></path><path d="M341.333333 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666666 42.666667zM512 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM682.666667 298.666667a42.666667 42.666667 0 0 0 42.666666-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM341.333333 768a42.666667 42.666667 0 0 0 42.666667-42.666667 128 128 0 0 1 256 0 42.666667 42.666667 0 0 0 85.333333 0 213.333333 213.333333 0 0 0-107.52-184.32A128 128 0 0 0 640 469.333333a128 128 0 0 0-256 0 128 128 0 0 0 22.186667 71.68A213.333333 213.333333 0 0 0 298.666667 725.333333a42.666667 42.666667 0 0 0 42.666666 42.666667z m128-298.666667a42.666667 42.666667 0 1 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667z" p-id="5263"></path></svg>

src/icons/svg/message.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>

src/icons/svg/money.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.122 127.892v-28.68H7.513V87.274h46.609v-12.4H7.513v-12.86h38.003L.099 0h22.6l32.556 45.07c3.617 5.144 6.44 9.611 8.487 13.385 1.788-3.05 4.89-7.779 9.301-14.186L103.93 0h24.01L82.385 62.013h38.34v12.862h-46.41v12.4h46.41v11.937h-46.41v28.68H54.123z"/></svg>

src/icons/svg/monitor.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827393750" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
+</style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="4696"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="4697"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="4698"></path></svg>

src/icons/svg/nested.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>

src/icons/svg/row.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579339929870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1182" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M152 854.856875h325.7146875V237.715625H134.856875v600q0 6.99375 5.0746875 12.0684375T152 854.856875z m737.143125-17.1421875v-600H546.284375v617.1421875H872q6.99375 0 12.0684375-5.07375t5.0746875-12.0684375z m68.5715625-651.429375V837.715625q0 35.3821875-25.16625 60.5484375T872 923.4284375H152q-35.383125 0-60.5484375-25.1653125T66.284375 837.7146875V186.284375q0-35.3821875 25.16625-60.5484375T152 100.5715625h720q35.383125 0 60.5484375 25.1653125t25.16625 60.5484375z" p-id="1183"></path></svg>

src/icons/svg/search.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>

src/icons/svg/select.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575803481213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="804" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M62 511.97954521C62 263.86590869 263.90681826 62 511.97954521 62s449.97954521 201.825 449.97954521 449.97954521c0 248.19545479-201.90681826 449.97954521-449.97954521 449.97954521C263.90681826 962 62 760.175 62 511.97954521M901.98636348 511.97954521c0-215.24318174-175.00909131-390.41590869-390.00681827-390.41590869-215.03863652 0-389.96590869 175.17272695-389.96590868 390.41590869 0 215.28409131 175.00909131 390.45681826 389.96590868 390.45681826C727.01818174 902.47727305 901.98636348 727.30454521 901.98636348 511.97954521M264.17272695 430.28409131c0-5.76818174 2.12727305-11.51590869 6.64772696-15.87272696 8.71363652-8.75454521 22.88863652-8.75454521 31.725 0l209.4340913 208.22727305L721.45454521 414.53409131c8.75454521-8.71363652 22.97045479-8.71363652 31.90909132 0 8.71363652 8.75454521 8.71363652 22.88863652 0 31.60227304L511.97954521 685.74090869 270.71818174 446.01363653C266.27954521 441.77954521 264.17272695 436.05227305 264.17272695 430.28409131" p-id="805"></path></svg>

src/icons/svg/server.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547360688278" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M890 120H134a70 70 0 0 0-70 70v500a70 70 0 0 0 70 70h756a70 70 0 0 0 70-70V190a70 70 0 0 0-70-70z m-10 520a40 40 0 0 1-40 40H712V448a40 40 0 0 0-80 0v232h-80V368a40 40 0 0 0-80 0v312h-80V512a40 40 0 0 0-80 0v168H184a40 40 0 0 1-40-40V240a40 40 0 0 1 40-40h656a40 40 0 0 1 40 40zM696 824H328a40 40 0 0 0 0 80h368a40 40 0 0 0 0-80z" p-id="6718"></path></svg>

src/icons/svgo.yml

@@ -0,0 +1,21 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+  - removeAttrs:
+      attrs:
+        - "fill"
+        - "fill-rule"

src/main.js

@@ -3,6 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import { store } from "./store/index.js";
 import "./assets/style/element-variables.module.scss";
+import "./icons/index"; // icon
 // 引入element ui
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
@@ -10,8 +11,8 @@ Vue.use(ElementUI);
 // 引入css
 import "./styles/index.scss";
 // 注册svg组件
-import SvgIcon from "@/components/SvgIcons/index.vue";
-Vue.component("SvgIcon", SvgIcon);
+import SvgIcons from "@/components/SvgIcons/index.vue";
+Vue.component("SvgIcons", SvgIcons);
 // 序列化post方法
 import qs from "qs";
 Vue.prototype.$qs = qs;

src/router/index.js

@@ -22,9 +22,10 @@ const createRouter = () =>
         children: [
           // 驾驶舱
           {
+            id: 1,
             path: "cockpitManage",
             name: "cockpitManage",
-
+            iconName: "gps",
             component: () =>
               import(
                 /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/Index.vue"
@@ -32,6 +33,8 @@ const createRouter = () =>
             children: [
               // 电子地图
               {
+                id: 11,
+                iconName: "gps",
                 path: "electronic-map",
                 name: "electronicMap",
                 component: () =>
@@ -42,68 +45,68 @@ const createRouter = () =>
             ],
           },
           // 电子地图
-          {
-            path: "electronic-map",
-            name: "electronicMap",
-            component: () =>
-              import(
-                /*webpackChunkName:'electronic-map'*/ "../views/admin/cockpitManage/electronicMap.vue"
-              ),
-          },
-          // 数据操作
-          {
-            path: "dataAdministration",
-            name: "dataAdministration",
-            component: () =>
-              import(
-                /*webpackChunkName:'dataAdministration'*/ "../views/dataAdministration/index.vue"
-              ),
-          },
-          // 企业信息
-          {
-            path: "enterprise",
-            name: "enterprise",
-            component: () =>
-              import(
-                /*webpackChunkName:'enterprise'*/ "../views/ledger/enterprise.vue"
-              ),
-          },
+          // {
+          //   path: "electronic-map",
+          //   name: "electronicMap",
+          //   component: () =>
+          //     import(
+          //       /*webpackChunkName:'electronic-map'*/ "../views/admin/cockpitManage/electronicMap.vue"
+          //     ),
+          // },
+          // // 数据操作
+          // {
+          //   path: "dataAdministration",
+          //   name: "dataAdministration",
+          //   component: () =>
+          //     import(
+          //       /*webpackChunkName:'dataAdministration'*/ "../views/dataAdministration/index.vue"
+          //     ),
+          // },
+          // // 企业信息
+          // {
+          //   path: "enterprise",
+          //   name: "enterprise",
+          //   component: () =>
+          //     import(
+          //       /*webpackChunkName:'enterprise'*/ "../views/ledger/enterprise.vue"
+          //     ),
+          // },
           // 风场信息
-          {
-            path: "windsite",
-            name: "windsite",
-            component: () =>
-              import(
-                /*webpackChunkName:'windsite'*/ "../views/ledger/windsite.vue"
-              ),
-          },
+          // {
+          //   path: "windsite",
+          //   name: "windsite",
+          //   component: () =>
+          //     import(
+          //       /*webpackChunkName:'windsite'*/ "../views/ledger/windsite.vue"
+          //     ),
+          // },
           // 风机信息
-          {
-            path: "draught",
-            name: "draught",
-            component: () =>
-              import(
-                /*webpackChunkName:'draught'*/ "../views/ledger/draught.vue"
-              ),
-          },
-          // 机型信息
-          {
-            path: "milltype",
-            name: "milltype",
-            component: () =>
-              import(
-                /*webpackChunkName:'milltype'*/ "../views/ledger/milltype.vue"
-              ),
-          },
-          // 测风塔信息
-          {
-            path: "anemometer",
-            name: "anemometer",
-            component: () =>
-              import(
-                /*webpackChunkName:'anemometer'*/ "../views/ledger/anemometer.vue"
-              ),
-          },
+          // {
+          //   path: "draught",
+          //   name: "draught",
+          //   component: () =>
+          //     import(
+          //       /*webpackChunkName:'draught'*/ "../views/ledger/draught.vue"
+          //     ),
+          // },
+          // // 机型信息
+          // {
+          //   path: "milltype",
+          //   name: "milltype",
+          //   component: () =>
+          //     import(
+          //       /*webpackChunkName:'milltype'*/ "../views/ledger/milltype.vue"
+          //     ),
+          // },
+          // // 测风塔信息
+          // {
+          //   path: "anemometer",
+          //   name: "anemometer",
+          //   component: () =>
+          //     import(
+          //       /*webpackChunkName:'anemometer'*/ "../views/ledger/anemometer.vue"
+          //     ),
+          // },
         ],
       },
       {

src/store/auth.js

@@ -6,6 +6,7 @@ export default {
   namespaced: true, // 子模块一定要开启命名空间
   state: {
     userInfo: {},
+    dynamicRouter: [],
   },
   getters: {},
   mutations: {
@@ -16,6 +17,9 @@ export default {
       state.userInfo = {};
       resetRouter();
     },
+    SET_DYNAMIC_ROUTER(state, payload) {
+      state.dynamicRouter = payload;
+    },
   },
   actions: {
     async goLogin({ commit, dispatch }, { loginForm, router }) {
@@ -47,6 +51,7 @@ export default {
         // 清空原有的动态子路由
         homeRoute.children = originalChildren;
         const { authRouterList } = getAuthRouterFn(resultRouter);
+        commit("SET_DYNAMIC_ROUTER", authRouterList);
         authRouterList.forEach((item) => {
           // 动态路由的父路径设置为home
           homeRoute.children.push(item);
@@ -54,6 +59,7 @@ export default {
         // 重新添加home路由
         router.addRoute(homeRoute);
       }
+      // console.log("/homeRoute", homeRoute, router.getRoutes());
       // 添加404页面路由
       router.addRoute({
         path: "/:pathMatch(.*)*",

src/utils/getAuth.js

@@ -1,13 +1,6 @@
-/*
- * @Author: your name
- * @Date: 2024-05-17 16:09:03
- * @LastEditTime: 2024-05-18 18:40:13
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/utils/getAuth.js
- */
 import { orgList } from "@/views/home/components/mockData";
-//返回可动态添加的路由
+
+// 返回可动态添加的路由
 export const getAuthRouterFn = (list) => {
   // 将list 转成一维数组，按钮级别权限拿到 返回为[]格式
   const { result, anthBtnList } = flattenTree(list);
@@ -33,13 +26,13 @@ const flattenTree = (tree) => {
   flattenRecursive(tree);
   return { result, anthBtnList };
 };
+
 const filterTreeByPermissions = (permissions, tree) => {
   const permissionSet = new Set(permissions.map((item) => item.permissionName));
 
   const filterTreeRecursive = (nodes) => {
     return nodes.reduce((filteredNodes, node) => {
       const newNode = { ...node };
-
       if (newNode.children && newNode.children.length > 0) {
         newNode.children = filterTreeRecursive(newNode.children);
       }
@@ -47,9 +40,17 @@ const filterTreeByPermissions = (permissions, tree) => {
         permissionSet.has(newNode.name) ||
         (newNode.children && newNode.children.length > 0)
       ) {
+        // 找到对应的iconName
+        const permission = permissions.find(
+          (perm) => perm.permissionName === newNode.name
+        );
+        if (permission && permission.permissionIconUrl) {
+          newNode.iconName = permission.permissionIconUrl;
+        } else {
+          newNode.iconName = "";
+        }
         filteredNodes.push(newNode);
       }
-
       return filteredNodes;
     }, []);
   };

src/utils/validate.js

@@ -0,0 +1,90 @@
+/*
+ * @Author: your name
+ * @Date: 2024-05-23 16:54:53
+ * @LastEditTime: 2024-05-23 16:54:53
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/validate.js
+ */
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ["admin", "editor"];
+  return valid_map.indexOf(str.trim()) >= 0;
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL(url) {
+  const reg =
+    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
+  return reg.test(url);
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase(str) {
+  const reg = /^[a-z]+$/;
+  return reg.test(str);
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase(str) {
+  const reg = /^[A-Z]+$/;
+  return reg.test(str);
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets(str) {
+  const reg = /^[A-Za-z]+$/;
+  return reg.test(str);
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail(email) {
+  const reg =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return reg.test(email);
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString(str) {
+  return typeof str === "string" || str instanceof String;
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray(arg) {
+  if (typeof Array.isArray === "undefined") {
+    return Object.prototype.toString.call(arg) === "[object Array]";
+  }
+  return Array.isArray(arg);
+}

src/views/home/components/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-aside :width="!isCollapse ? '300px' : '100px'" class="asideBox">
+  <el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox">
     <div class="homeBox">
       <div class="logoItem" :class="{ 'flexCenter ': isCollapse }">
         <div
@@ -12,13 +12,13 @@
             )
           "
         >
-          <SvgIcon
+          <SvgIcons
             name="dnao"
             class="dnao"
             width="40px"
             height="40px"
             color="#222"
-          ></SvgIcon>
+          ></SvgIcons>
         </div>
         <span
           v-if="!isCollapse"
@@ -38,71 +38,49 @@
       ref="menu"
       class="mt-3 el-menu-vertical-demo"
       @open="handleOpen"
-      @select="handleOpen"
       @close="handleClose"
       background-color="#eff1f3"
       text-color="#000"
       active-text-color="#0754a1"
-      :router="false"
+      :router="true"
       :default-active="defaultActive"
       :unique-opened="true"
       :collapse="isCollapse"
     >
-      <el-submenu
-        v-for="(item, index) in orgList"
-        :key="index"
-        :index="item.id"
-      >
-        <template slot="title">
-          <div class="flex items-center justify-start">
-            <i
-              class="flex items-center justify-center mr-2"
-              style="margin-left: 3px"
-            >
-              <SvgIcon
-                :name="item.iconName"
-                class="dnao"
-                width="20px"
-                height="22px"
-                color="#222"
-              ></SvgIcon>
-            </i>
-            <span
-              slot="title"
-              style="display: inline-block"
-              :class="{
-                'active-menu':
-                  defaultActive ===
-                  `/windField?id=${item.id}&name=${item.name}`,
-              }"
-              >{{ item.name }}</span
-            >
-          </div>
-        </template>
-        <el-menu-item
-          v-for="(child, childIndex) in item.children"
-          :key="childIndex"
-          :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
+      <template v-for="item in routerList">
+        <el-submenu
+          :index="item.path"
+          v-if="item.children && item.children.length > 0"
         >
           <template slot="title">
-            <span
-              slot="title"
-              style="padding-left: 22px; width: 100%; display: inline-block"
-              :class="{
-                'active-menu':
-                  defaultActive === `/dynamo?id=${item.id}&name=${item.name}`,
-              }"
-              @click="
-                handleChangeMenuUrl(
-                  item,
-                  `/home/${item.path}/${child.path}?id=${item.id}&name=${item.name}`
-                )
-              "
-              >{{ child.name }}</span
-            >
+            <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
+            <i v-else class="svnIcon"
+              ><svg-icon :icon-class="item.iconName"
+            /></i>
+            <span>{{ item.name }}</span>
           </template>
+          <el-menu-item
+            v-for="child in item.children"
+            :key="child.id"
+            :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
+          >
+            <i class="el-icon-menu" v-if="isElPrefix(child.iconName)"></i>
+            <i v-else class="svnIcon"
+              ><svg-icon :icon-class="child.iconName"
+            /></i>
+            <span>{{ child.name }}</span>
+          </el-menu-item>
+        </el-submenu>
+        <el-menu-item
+          :key="item.id"
+          :index="`/home/${item.path}?id=${item.id}&name=${item.name}`"
+          v-else
+        >
+          <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
+          <i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></i>
+          <span>{{ item.name }}</span>
         </el-menu-item>
-      </el-submenu>
+      </template>
     </el-menu>
     <div class="foldBox flexCenter">
       <span
@@ -120,30 +98,46 @@
     </div>
   </el-aside>
 </template>
+
 <script>
 import { orgList } from "./mockData";
-
 export default {
   data() {
     return {
-      // 展开收起
       isCollapse: false,
-      // 三级菜单数组
       orgList: orgList,
-      // 搜索值
       searchInputValue: "",
       defaultActive: "",
       activeIndex: false,
       keyObject: {},
+      routerList: [
+        {
+          path: "cockpitManage",
+          name: "驾驶舱",
+          iconName: "gps",
+          children: [
+            {
+              iconName: "gps",
+              path: "electronic-map",
+              name: "电子地图",
+            },
+          ],
+        },
+      ],
     };
   },
-
+  created() {
+    this.routerList = [
+      ...this.routerList,
+      ...this.$store.state.auth.dynamicRouter,
+    ];
+    console.log(this.routerList, "组件内dynamicRouter");
+  },
   computed: {
     currentMenuIndex() {
       return this.$store.state.breadStore?.currentUrl?.routeUrl;
     },
   },
-
   watch: {
     currentMenuIndex: {
       deep: true,
@@ -162,27 +156,27 @@ export default {
       },
     },
   },
-  created() {},
   methods: {
+    isElPrefix(str) {
+      const regex = /^el-/;
+      return regex.test(str);
+    },
     getBreadcrumbList(keyPath) {
       const urls = keyPath;
       const result = urls.map((url, index) => {
-        const params = new URLSearchParams(url.split("?")[1]); // 解析 URL 参数
+        const params = new URLSearchParams(url.split("?")[1]);
         const id = params.get("id");
         const name = params.get("name");
         const routeUrl = url;
-        // 如果是最后一个路由，则添加额外属性
         if (index === urls.length - 1) {
           return { id, name, routeUrl, currentPage: true };
         }
         return { id, name, routeUrl };
       });
-      // console.log(result)
       this.$store.commit("breadStore/ADD_BREAD", result);
       return result;
     },
     handleOpen(key, keyPath) {
-      // console.log(key, keyPath)
       this.activeIndex = false;
       this.keyObject = {
         key,
@@ -190,14 +184,12 @@ export default {
       };
     },
     handleClose(key, keyPath) {
-      // console.log(key, keyPath)
       this.activeIndex = false;
       this.keyObject = {
         key,
         keyPath,
       };
     },
-
     shrinkTree() {
       this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
     },
@@ -220,6 +212,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
@@ -318,26 +311,19 @@ export default {
       &:hover {
         p {
           color: #19436d;
-          // border-bottom: 1px solid #409eff;
         }
-
-        // background-color: rgb(64, 158, 255, 0.6);
         transition: width 0.5s ease, transform 0.5s ease;
-        /* 过渡效果 */
         transform-origin: left;
-        /* 设置变换的原点在左侧 */
       }
 
       .left {
         left: 50%;
         transform: scaleX(0);
-        /* 初始时将左侧元素宽度设为 0 */
       }
 
       .right {
         left: 0;
         transform: scaleX(0);
-        /* 初始时将右侧元素宽度设为 0 */
       }
     }
   }
@@ -371,19 +357,27 @@ export default {
 }
 
 ::v-deep .el-submenu__title {
-  padding-left: 30px !important;
+  display: flex;
+  align-items: center;
 }
 
 ::v-deep .el-submenu__icon-arrow {
   right: 30px;
 }
 
+::v-deep .svnIcon {
+  vertical-align: middle;
+  margin-right: 5px;
+  width: 24px;
+  text-align: center;
+  font-size: 18px;
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   display: none;
 }
 
-/* 滚动条上的滚动滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #aaabaa;
@@ -394,7 +388,6 @@ export default {
   background-color: #efeff0;
 }
 
-/* 滚动条没有滑块的轨道部分 */
 ::-webkit-scrollbar-track-piece {
   background-color: #efeff0;
   border-radius: 10px;

src/views/home/components/mockData.js

@@ -12,6 +12,7 @@ export const orgList = [
       {
         id: 11,
         name: "电子地图",
+        iconName: "gps",
         path: "electronic-map",
         component: () =>
           import(
@@ -50,6 +51,7 @@ export const orgList = [
       {
         id: 31,
         name: "数据操作",
+        iconName: "gps",
         path: "dataAdministration",
         component: () =>
           import(
@@ -101,6 +103,7 @@ export const orgList = [
       {
         id: 51,
         name: "用户管理",
+
         path: "userMag",
         component: () =>
           import(

src/views/ledger/anemometer.vue

@@ -115,22 +115,22 @@
     <el-dialog :title="title" :visible.sync="nuedialog" width="800px">
       <div class="addition">
         <span @click="addition">
-          <SvgIcon
+          <SvgIcons
             name="jia"
             class="jia"
             width="20px"
             height="22px"
             color="#222"
-          ></SvgIcon>
+          ></SvgIcons>
         </span>
         <span @click="subtraction">
-          <SvgIcon
+          <SvgIcons
             name="jian"
             class="jian"
             width="20px"
             height="22px"
             color="#222"
-          ></SvgIcon>
+          ></SvgIcons>
         </span>
       </div>
       <div class="general">

src/views/system/menuMag/components/editDialog.vue

@@ -32,6 +32,34 @@
           placeholder="请输入菜单标识"
         ></el-input>
       </el-form-item>
+      <el-form-item label="菜单图标" prop="piconUrl" v-if="activeName !== '3'">
+        <el-popover
+          placement="bottom-start"
+          width="460"
+          trigger="click"
+          @show="$refs['iconSelect'].reset()"
+        >
+          <IconSelect
+            ref="iconSelect"
+            @selected="selected"
+            :active-icon="menuForm.piconUrl"
+          />
+          <el-input
+            slot="reference"
+            v-model="menuForm.piconUrl"
+            placeholder="点击选择图标"
+            readonly
+          >
+            <svg-icon
+              v-if="menuForm.piconUrl"
+              slot="prefix"
+              :icon-class="menuForm.piconUrl"
+              style="width: 25px; height: 25px"
+            />
+            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+          </el-input>
+        </el-popover>
+      </el-form-item>
       <el-form-item label="路由地址:" prop="purl" v-if="activeName !== '1'">
         <el-input
           v-model="menuForm.purl"
@@ -65,12 +93,13 @@
 <script>
 import Treeselect from "@riophae/vue-treeselect";
 import { addMenuFn, updateMenuFn } from "@/api/system";
-
+import IconSelect from "@/components/IconSelect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   components: {
     Treeselect,
+    IconSelect,
   },
   props: {
     activeName: {
@@ -91,6 +120,7 @@ export default {
   },
   data() {
     return {
+      name: "",
       menuForm: {
         parentId: null,
         pname: null,
@@ -98,6 +128,7 @@ export default {
         pstat: null,
         pcode: null,
         permissionShow: null,
+        piconUrl: "",
       },
       addMenuRules: {
         permissionShow: {
@@ -105,9 +136,7 @@ export default {
           message: "请选择",
           trigger: "change",
         },
-        pcode: [
-          { required: true, message: "请填写菜单菜单标识", trigger: "blur" },
-        ],
+        pcode: [{ required: true, message: "请填写菜单标识", trigger: "blur" }],
         pname: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
         purl: [{ required: true, message: "请填写路由地址", trigger: "blur" }],
         parentId: [
@@ -115,49 +144,20 @@ export default {
         ],
         pstat: [{ required: true, message: "请选择状态", trigger: "change" }],
       },
-      stateOPtions: [],
+      stateOptions: [],
       menuOptions: [
         { permissionId: 0, permissionName: "主类目", children: [] },
       ],
     };
   },
   created() {
-    console.log(this.checkId, "checkid");
-    this.menuOptions[0].children.push(...this.tableData);
-    if (this.row && this.title === "编辑" && this.activeName === "2") {
-      this.menuForm = {
-        parentId: this.row.parentId,
-        pname: this.row.permissionName,
-        purl: this.row.permissionUrl,
-        pstat: this.row.permissionState,
-        pcode: this.row.permissionCode,
-        permissionShow: this.row.permissionShow,
-      };
-    } else if (this.title === "新增" && this.activeName === "2") {
-      this.menuForm.parentId = this.checkId;
-    } else {
-      this.menuForm.parentId = 0;
-    }
+    this.initializeForm();
   },
   watch: {
     row: {
       handler(newVal) {
         if (newVal) {
-          console.log(newVal, "newRowValue");
-          if (this.title === "编辑" && this.activeName === "2") {
-            this.menuForm = {
-              parentId: newVal.parentId,
-              pname: newVal.permissionName,
-              purl: newVal.permissionUrl,
-              pstat: newVal.permissionState,
-              pcode: newVal.permissionCode,
-              permissionShow: newVal.permissionShow,
-            };
-          } else if (this.title === "新增" && this.activeName === "2") {
-            this.menuForm.parentId = this.checkId;
-          } else {
-            this.menuForm.parentId = 0;
-          }
+          this.initializeForm();
         }
       },
       immediate: true,
@@ -165,55 +165,77 @@ export default {
     },
     checkId(newVal) {
       if (newVal !== null && newVal !== undefined) {
-        console.log(newVal, "checkId");
         this.menuForm.parentId = newVal;
-        if (
-          this.menuForm.pname === null &&
-          this.row &&
-          this.title === "编辑" &&
-          this.activeName === "2"
-        ) {
-          console.log(this.props, " this.row");
-          this.menuForm = {
-            parentId: this.row.parentId,
-            pname: this.row.permissionName,
-            purl: this.row.permissionUrl,
-            pstat: this.row.permissionState,
-            pcode: this.row.permissionCode,
-            permissionShow: this.row.permissionShow,
-          };
-        }
+        this.initializeForm();
       }
     },
     tableData: {
       handler(newData) {
         this.$nextTick(() => {
-          console.log("gengxin", this.setExpandAll(newData));
-          this.setExpandAll(newData);
           this.menuOptions[0].children = [];
-          this.menuOptions[0].children.push(...this.tableData);
+          this.menuOptions[0].children.push(...newData);
         });
       },
       immediate: true,
       deep: true,
     },
   },
-
   methods: {
-    setExpandAll(expand) {
-      const table = this.$refs.table;
-      if (table) {
-        this.tableData.forEach((row) => {
-          table.toggleRowExpansion(row, expand);
-          if (row.children) {
-            row.children.forEach((child) => {
-              table.toggleRowExpansion(child, expand);
-            });
-          }
-        });
-        console.log(this.tableData, "新值");
+    // 选择图标
+    selected(name) {
+      this.menuForm = {
+        ...this.menuForm,
+        piconUrl: name,
+      };
+    },
+    initializeForm() {
+      console.log(this.checkId, "checkid");
+      this.menuOptions[0].children.push(...this.tableData);
+      if (this.row && this.title === "编辑" && this.activeName === "2") {
+        this.menuForm = {
+          parentId: this.row.parentId,
+          pname: this.row.permissionName,
+          purl: this.row.permissionUrl,
+          pstat: this.row.permissionState,
+          pcode: this.row.permissionCode,
+          permissionShow: this.row.permissionShow,
+        };
+      } else if (this.title === "新增" && this.activeName === "2") {
+        this.menuForm.parentId = this.checkId;
+      } else {
+        this.menuForm.parentId = 0;
+      }
+
+      if (this.row && this.title === "编辑") {
+        console.log(this.row, this.row.piconUrl, "piconUrl");
+        this.menuForm = {
+          parentId: this.row.parentId,
+          pname: this.row.permissionName,
+          purl: this.row.permissionUrl,
+          pstat: this.row.permissionState,
+          pcode: this.row.permissionCode,
+          permissionShow: this.row.permissionShow,
+          piconUrl: this.row.permissionIconUrl,
+        };
+        if (this.activeName === "1") {
+          this.$nextTick(() => {
+            this.menuForm = {
+              pname: this.row.permissionName,
+              pstat: this.row.permissionState,
+              parentId: 0,
+              pcode: this.row.permissionCode,
+              permissionShow: this.row.permissionShow,
+              piconUrl: this.row.permissionIconUrl,
+            };
+          });
+        }
+      } else if (this.title === "新增" && this.activeName === "2") {
+        this.menuForm.parentId = this.checkId;
+      } else {
+        this.menuForm.parentId = 0;
       }
     },
+
     normalizer(node) {
       if (node.children && !node.children.length) {
         delete node.children;
@@ -225,7 +247,6 @@ export default {
       };
     },
     submit() {
-      const that = this;
       this.$refs["addUserForm"].validate((valid) => {
         if (valid) {
           if (this.title === "编辑" && this.row) {
@@ -239,7 +260,7 @@ export default {
                   message: "编辑成功",
                 });
                 this.cancel();
-                that.$emit("updateList");
+                this.$emit("updateList");
               })
               .catch((error) => {
                 this.$message({
@@ -248,7 +269,6 @@ export default {
                 });
               });
           } else if (this.title === "新增") {
-            console.log("新增", this.activeName);
             addMenuFn({
               ...this.menuForm,
               purl:
@@ -263,7 +283,7 @@ export default {
                   message: "新增成功",
                 });
                 this.cancel();
-                that.$emit("updateList");
+                this.$emit("updateList");
               })
               .catch((error) => {
                 this.$message({
@@ -292,4 +312,8 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+::v-deep .el-input__prefix {
+  line-height: 50px !important;
+}
+</style>

src/views/system/menuMag/index.vue

@@ -25,6 +25,7 @@
             <el-option label="停用" value="0"></el-option>
           </el-select>
         </el-form-item>
+
         <el-form-item>
           <el-button type="primary" @click="onSubmit" size="small"
             >查询</el-button
@@ -119,35 +120,30 @@
         </el-table-column>
       </el-table>
     </div>
-
     <!-- 新增编辑弹出层 -->
     <el-dialog
       :title="title"
       :visible.sync="unusualdialog"
       width="500px"
-      @close="
-        () => {
-          this.$refs.addMenu.cancel();
-          this.loadingView = false;
-          this.unusualdialog = false;
-          this.checkId = null;
-        }
-      "
+      @close="handleClose"
     >
       <div v-loading="loadingView" class="views">
         <el-tabs type="border-card" class="tabs" v-model="activeName">
           <el-tab-pane label="目录" name="1"
             ><EditMenu
+              v-if="activeName === '1'"
               ref="addList"
               :activeName="activeName"
               :tableData="tableData"
               :checkId="checkId"
               :title="title"
               @updateList="updateList"
+              :row="row"
             />
           </el-tab-pane>
           <el-tab-pane label="菜单" name="2"
             ><EditMenu
+              v-if="activeName === '2'"
               ref="addMenu"
               :activeName="activeName"
               :tableData="tableData"
@@ -158,18 +154,7 @@
           /></el-tab-pane>
         </el-tabs>
         <span slot="footer" class="dialog-footer">
-          <el-button
-            @click="
-              () => {
-                this.$refs.addMenu.cancel();
-                this.loadingView = false;
-                this.unusualdialog = false;
-                this.checkId = null;
-              }
-            "
-            size="small"
-            >取 消</el-button
-          >
+          <el-button @click="handleClose" size="small">取 消</el-button>
           <el-button type="primary" @click="editAuthMenu" size="small"
             >确 定</el-button
           >
@@ -193,6 +178,7 @@ export default {
   },
   data() {
     return {
+      piconUrl: "",
       activeName: "1",
       title: "",
       loadingView: false,
@@ -227,6 +213,22 @@ export default {
     },
   },
   methods: {
+    selected(name) {
+      console.log(name);
+      this.piconUrl = name;
+    },
+    handleClose() {
+      if (this.activeName === "1") {
+        this.$refs.addList.cancel();
+        console.log("取消1");
+      } else {
+        this.$refs.addMenu.cancel();
+      }
+
+      this.loadingView = false;
+      this.unusualdialog = false;
+      this.checkId = null;
+    },
     toggleExpandAll() {
       this.defaultExpandAll = !this.defaultExpandAll;
       this.$nextTick(() => {
@@ -272,7 +274,6 @@ export default {
       }
     },
     updateList() {
-      console.log("updateList");
       this.getTableList();
       this.unusualdialog = false;
     },
@@ -288,14 +289,19 @@ export default {
     // 编辑
     compile(row) {
       this.unusualdialog = true;
-      this.activeName = "2";
-      this.checkId = row.parentId;
-      this.row = row;
+
+      if (row.permissionType === 1) {
+        this.activeName = "1";
+        this.checkId = 0;
+      } else {
+        this.activeName = "2";
+        this.checkId = row.parentId;
+      }
+      this.row = { ...row };
       this.title = "编辑";
     },
     // 新增子级
     newcomer(row) {
-      console.log(row.parentId);
       this.unusualdialog = true;
       this.checkId = row.permissionId;
       this.activeName = "2";

vue.config.js

@@ -57,7 +57,11 @@ module.exports = {
     proxy: {
       "/api": {
         // target: "http://192.168.5.4:16200", // 石月
+<<<<<<< HEAD
         target: "http://192.168.50.235:16200",//内网
+=======
+        target: "http://192.168.50.235:16200",
+>>>>>>> 3c71ffd323781083528875676ea7f31295780bfd
         // target: "http://106.120.102.238:16600",//外网
         changeOrigin: true,
         pathRewrite: {