prettier代码格式重新配置

prettier.config.js

@@ -10,6 +10,7 @@ module.exports = {
   bracketSpacing: true,
   jsxBracketSameLine: false,
   arrowParens: "always",
-  vueIndentScriptAndStyle: false,
+  htmlWhitespaceSensitivity: "ignore",
+  vueIndentScriptAndStyle: true,
   endOfLine: "lf",
 };

src/App.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script>
-export default {
-  name: "App",
-  mounted() {},
-};
+  export default {
+    name: "App",
+    mounted() {},
+  };
 </script>

src/components/JsonEditor/index.vue

@@ -7,105 +7,105 @@
 </template>
 
 <script>
-import CodeMirror from "codemirror";
-import "codemirror/addon/lint/lint.css";
-import "codemirror/lib/codemirror.css";
-import "codemirror/theme/rubyblue.css";
-import "codemirror/mode/javascript/javascript";
-import "codemirror/addon/lint/lint";
-import "codemirror/addon/lint/json-lint";
+  import CodeMirror from "codemirror";
+  import "codemirror/addon/lint/lint.css";
+  import "codemirror/lib/codemirror.css";
+  import "codemirror/theme/rubyblue.css";
+  import "codemirror/mode/javascript/javascript";
+  import "codemirror/addon/lint/lint";
+  import "codemirror/addon/lint/json-lint";
 
-require("script-loader!jsonlint");
+  require("script-loader!jsonlint");
 
-export default {
-  name: "JsonEditor",
-  props: {
-    value: {
-      type: [Array, Object],
-      default: () => {
-        return null;
+  export default {
+    name: "JsonEditor",
+    props: {
+      value: {
+        type: [Array, Object],
+        default: () => {
+          return null;
+        },
       },
     },
-  },
-  data() {
-    return {
-      jsonEditor: false,
-    };
-  },
-  watch: {
-    value(value) {
-      const editorValue = this.jsonEditor.getValue();
-
-      if (editorValue) {
-        this.$emit("change", editorValue);
-      } else {
-        this.$baseMessage("JSON不能为空,否则无法生成表格", "error");
-      }
-      if (value !== editorValue) {
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-      }
+    data() {
+      return {
+        jsonEditor: false,
+      };
     },
-  },
-  mounted() {
-    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
-      lineNumbers: true,
-      mode: "application/json",
-      gutters: ["CodeMirror-lint-markers"],
-      theme: "rubyblue",
-      lint: true,
-    });
+    watch: {
+      value(value) {
+        const editorValue = this.jsonEditor.getValue();
 
-    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-    this.jsonEditor.on("change", (cm) => {
-      if (this.isJsonString(cm.getValue())) {
-        this.$emit("change", cm.getValue());
-      }
-    });
-  },
-  methods: {
-    getValue() {
-      return this.jsonEditor.getValue();
+        if (editorValue) {
+          this.$emit("change", editorValue);
+        } else {
+          this.$baseMessage("JSON不能为空,否则无法生成表格", "error");
+        }
+        if (value !== editorValue) {
+          this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
+        }
+      },
     },
-    isJsonString(str) {
-      try {
-        if (typeof JSON.parse(str) == "object") {
-          return true;
+    mounted() {
+      this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
+        lineNumbers: true,
+        mode: "application/json",
+        gutters: ["CodeMirror-lint-markers"],
+        theme: "rubyblue",
+        lint: true,
+      });
+
+      this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
+      this.jsonEditor.on("change", (cm) => {
+        if (this.isJsonString(cm.getValue())) {
+          this.$emit("change", cm.getValue());
         }
-      } catch (e) {}
-      return false;
+      });
+    },
+    methods: {
+      getValue() {
+        return this.jsonEditor.getValue();
+      },
+      isJsonString(str) {
+        try {
+          if (typeof JSON.parse(str) == "object") {
+            return true;
+          }
+        } catch (e) {}
+        return false;
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped>
-.json-editor {
-  position: relative;
-  height: 100%;
-}
+  .json-editor {
+    position: relative;
+    height: 100%;
+  }
 
-.json-editor >>> .CodeMirror {
-  height: auto;
-  min-height: calc(100vh - 220px);
-}
+  .json-editor >>> .CodeMirror {
+    height: auto;
+    min-height: calc(100vh - 220px);
+  }
 
-.json-editor >>> .CodeMirror-scroll {
-  min-height: calc(100vh - 220px);
-}
+  .json-editor >>> .CodeMirror-scroll {
+    min-height: calc(100vh - 220px);
+  }
 
-.json-editor >>> .cm-s-rubyblue span.cm-string {
-  color: #f08047;
-}
+  .json-editor >>> .cm-s-rubyblue span.cm-string {
+    color: #f08047;
+  }
 
-.json-editor >>> .cm-s-rubyblue .CodeMirror-gutters {
-  padding-right: 10px;
+  .json-editor >>> .cm-s-rubyblue .CodeMirror-gutters {
+    padding-right: 10px;
 
-  /* background: transparent; */
-  border-right: 1px solid #fff;
-}
+    /* background: transparent; */
+    border-right: 1px solid #fff;
+  }
 
-.json-editor >>> .cm-s-rubyblue.CodeMirror {
-  /* background: #08233e; */
-  color: white;
-}
+  .json-editor >>> .cm-s-rubyblue.CodeMirror {
+    /* background: #08233e; */
+    color: white;
+  }
 </style>

src/components/SelectTree/index.vue

@@ -31,168 +31,168 @@
 </template>
 
 <script>
-export default {
-  name: "SelectTreeTemplate",
-  props: {
-    /* 树形结构数据 */
-    treeOptions: {
-      type: Array,
-      default: () => {
-        return [];
+  export default {
+    name: "SelectTreeTemplate",
+    props: {
+      /* 树形结构数据 */
+      treeOptions: {
+        type: Array,
+        default: () => {
+          return [];
+        },
       },
-    },
-    /* 单选/多选 */
-    selectType: {
-      type: String,
-      default: () => {
-        return "single";
+      /* 单选/多选 */
+      selectType: {
+        type: String,
+        default: () => {
+          return "single";
+        },
       },
-    },
-    /* 初始选中值key */
-    selectedKey: {
-      type: String,
-      default: () => {
-        return "";
+      /* 初始选中值key */
+      selectedKey: {
+        type: String,
+        default: () => {
+          return "";
+        },
       },
-    },
-    /* 初始选中值name */
-    selectedValue: {
-      type: String,
-      default: () => {
-        return "";
+      /* 初始选中值name */
+      selectedValue: {
+        type: String,
+        default: () => {
+          return "";
+        },
       },
-    },
-    /* 可做选择的层级 */
-    selectLevel: {
-      type: [String, Number],
-      default: () => {
-        return "";
+      /* 可做选择的层级 */
+      selectLevel: {
+        type: [String, Number],
+        default: () => {
+          return "";
+        },
       },
-    },
-    /* 可清空选项 */
-    clearable: {
-      type: Boolean,
-      default: () => {
-        return true;
+      /* 可清空选项 */
+      clearable: {
+        type: Boolean,
+        default: () => {
+          return true;
+        },
       },
     },
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: "children",
-        label: "name",
-      },
-      defaultSelectedKeys: [], //初始选中值数组
-      currentNodeKey: this.selectedKey,
-      selectValue:
-        this.selectType == "multiple"
-          ? this.selectedValue.split(",")
-          : this.selectedValue, //下拉框选中值label
-      selectKey:
-        this.selectType == "multiple"
-          ? this.selectedKey.split(",")
-          : this.selectedKey, //下拉框选中值value
-    };
-  },
-  mounted() {
-    const that = this;
-    this.initTree();
-  },
-  methods: {
-    // 初始化树的值
-    initTree() {
+    data() {
+      return {
+        defaultProps: {
+          children: "children",
+          label: "name",
+        },
+        defaultSelectedKeys: [], //初始选中值数组
+        currentNodeKey: this.selectedKey,
+        selectValue:
+          this.selectType == "multiple"
+            ? this.selectedValue.split(",")
+            : this.selectedValue, //下拉框选中值label
+        selectKey:
+          this.selectType == "multiple"
+            ? this.selectedKey.split(",")
+            : this.selectedKey, //下拉框选中值value
+      };
+    },
+    mounted() {
       const that = this;
-      if (that.selectedKey) {
-        that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
+      this.initTree();
+    },
+    methods: {
+      // 初始化树的值
+      initTree() {
+        const that = this;
+        if (that.selectedKey) {
+          that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
+          if (that.selectType == "single") {
+            that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
+          } else {
+            that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
+          }
+        }
+      },
+      // 清除选中
+      clearHandle() {
+        const that = this;
+        this.selectValue = "";
+        this.selectKey = "";
+        this.defaultSelectedKeys = [];
+        this.currentNodeKey = "";
+        this.clearSelected();
         if (that.selectType == "single") {
-          that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
+          that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
         } else {
-          that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
+          that.$refs.treeOption.setCheckedKeys([]);
         }
-      }
-    },
-    // 清除选中
-    clearHandle() {
-      const that = this;
-      this.selectValue = "";
-      this.selectKey = "";
-      this.defaultSelectedKeys = [];
-      this.currentNodeKey = "";
-      this.clearSelected();
-      if (that.selectType == "single") {
-        that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
-      } else {
-        that.$refs.treeOption.setCheckedKeys([]);
-      }
-    },
-    /* 清空选中样式 */
-    clearSelected() {
-      const allNode = document.querySelectorAll("#treeOption .el-tree-node");
-      allNode.forEach((element) => element.classList.remove("is-current"));
-    },
-    // select多选时移除某项操作
-    removeTag(val) {
-      this.$refs.treeOption.setCheckedKeys([]);
-    },
-    // 点击叶子节点
-    nodeClick(data, node, el) {
-      if (data.rank >= this.selectLevel) {
-        this.selectValue = data.name;
-        this.selectKey = data.id;
-      }
-    },
-    // 节点选中操作
-    checkNode(data, node, el) {
-      const checkedNodes = this.$refs.treeOption.getCheckedNodes();
-      const keyArr = [];
-      const valueArr = [];
-      checkedNodes.forEach((item) => {
-        if (item.rank >= this.selectLevel) {
-          keyArr.push(item.id);
-          valueArr.push(item.name);
+      },
+      /* 清空选中样式 */
+      clearSelected() {
+        const allNode = document.querySelectorAll("#treeOption .el-tree-node");
+        allNode.forEach((element) => element.classList.remove("is-current"));
+      },
+      // select多选时移除某项操作
+      removeTag(val) {
+        this.$refs.treeOption.setCheckedKeys([]);
+      },
+      // 点击叶子节点
+      nodeClick(data, node, el) {
+        if (data.rank >= this.selectLevel) {
+          this.selectValue = data.name;
+          this.selectKey = data.id;
         }
-      });
-      this.selectValue = valueArr;
-      this.selectKey = keyArr;
+      },
+      // 节点选中操作
+      checkNode(data, node, el) {
+        const checkedNodes = this.$refs.treeOption.getCheckedNodes();
+        const keyArr = [];
+        const valueArr = [];
+        checkedNodes.forEach((item) => {
+          if (item.rank >= this.selectLevel) {
+            keyArr.push(item.id);
+            valueArr.push(item.name);
+          }
+        });
+        this.selectValue = valueArr;
+        this.selectKey = keyArr;
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow-y: auto;
-}
+  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+    height: auto;
+    max-height: 274px;
+    padding: 0;
+    overflow-y: auto;
+  }
 
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
+  .el-select-dropdown__item.selected {
+    font-weight: normal;
+  }
 
-ul li > .el-tree .el-tree-node__content {
-  height: auto;
-  padding: 0 20px;
-}
+  ul li > .el-tree .el-tree-node__content {
+    height: auto;
+    padding: 0 20px;
+  }
 
-.el-tree-node__label {
-  font-weight: normal;
-}
+  .el-tree-node__label {
+    font-weight: normal;
+  }
 
-.el-tree > .is-current .el-tree-node__label {
-  font-weight: 700;
-  color: #409eff;
-}
+  .el-tree > .is-current .el-tree-node__label {
+    font-weight: 700;
+    color: #409eff;
+  }
 
-.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
-  font-weight: normal;
-  color: #606266;
-}
+  .el-tree > .is-current .el-tree-node__children .el-tree-node__label {
+    font-weight: normal;
+    color: #606266;
+  }
 </style>
 <style lang="scss">
-/* .vab-tree-select{
+  /* .vab-tree-select{
       .el-tag__close.el-icon-close{
         width:0;
         overflow:hidden;

src/components/VabCharge/index.vue

@@ -23,169 +23,169 @@
 </template>
 
 <script>
-export default {
-  name: "VabCharge",
-  props: {
-    styleObj: {
-      type: Object,
-      default: () => {
-        return {};
+  export default {
+    name: "VabCharge",
+    props: {
+      styleObj: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      startVal: {
+        type: Number,
+        default: 0,
+      },
+      endVal: {
+        type: Number,
+        default: 100,
       },
     },
-    startVal: {
-      type: Number,
-      default: 0,
-    },
-    endVal: {
-      type: Number,
-      default: 100,
+    data() {
+      return {
+        decimals: 2,
+        prefix: "",
+        suffix: "%",
+        separator: ",",
+        duration: 3000,
+      };
     },
-  },
-  data() {
-    return {
-      decimals: 2,
-      prefix: "",
-      suffix: "%",
-      separator: ",",
-      duration: 3000,
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 
 <style lang="scss" scoped>
-.content {
-  position: relative;
-  display: flex;
-  align-items: center; /* 垂直居中 */
-  justify-content: center; /* 水平居中 */
-  width: 100%;
-  background: #000;
-
-  .g-number {
-    position: absolute;
-    top: 27%;
-    z-index: 99;
-    width: 300px;
-    font-size: 32px;
-    color: #fff;
-    text-align: center;
-  }
-
-  .g-container {
+  .content {
     position: relative;
-    width: 300px;
-    height: 400px;
-    margin: auto;
-  }
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 水平居中 */
+    width: 100%;
+    background: #000;
 
-  .g-contrast {
-    width: 300px;
-    height: 400px;
-    overflow: hidden;
-    background-color: #000;
-    filter: contrast(15) hue-rotate(0);
-    animation: hueRotate 10s infinite linear;
-  }
+    .g-number {
+      position: absolute;
+      top: 27%;
+      z-index: 99;
+      width: 300px;
+      font-size: 32px;
+      color: #fff;
+      text-align: center;
+    }
 
-  .g-circle {
-    position: relative;
-    box-sizing: border-box;
-    width: 300px;
-    height: 300px;
-    filter: blur(8px);
+    .g-container {
+      position: relative;
+      width: 300px;
+      height: 400px;
+      margin: auto;
+    }
+
+    .g-contrast {
+      width: 300px;
+      height: 400px;
+      overflow: hidden;
+      background-color: #000;
+      filter: contrast(15) hue-rotate(0);
+      animation: hueRotate 10s infinite linear;
+    }
 
-    &::after {
+    .g-circle {
+      position: relative;
+      box-sizing: border-box;
+      width: 300px;
+      height: 300px;
+      filter: blur(8px);
+
+      &::after {
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        width: 200px;
+        height: 200px;
+        content: "";
+        background-color: #00ff6f;
+        border-radius: 42% 38% 62% 49% / 45%;
+        transform: translate(-50%, -50%) rotate(0);
+        animation: rotate 10s infinite linear;
+      }
+
+      &::before {
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        z-index: 99;
+        width: 176px;
+        height: 176px;
+        content: "";
+        background-color: #000;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .g-bubbles {
       position: absolute;
-      top: 40%;
+      bottom: 0;
       left: 50%;
-      width: 200px;
-      height: 200px;
-      content: "";
+      width: 100px;
+      height: 40px;
       background-color: #00ff6f;
-      border-radius: 42% 38% 62% 49% / 45%;
-      transform: translate(-50%, -50%) rotate(0);
-      animation: rotate 10s infinite linear;
+      filter: blur(5px);
+      border-radius: 100px 100px 0 0;
+      transform: translate(-50%, 0);
     }
 
-    &::before {
+    li {
       position: absolute;
-      top: 40%;
-      left: 50%;
-      z-index: 99;
-      width: 176px;
-      height: 176px;
-      content: "";
-      background-color: #000;
+      background: #00ff6f;
       border-radius: 50%;
-      transform: translate(-50%, -50%);
     }
-  }
-
-  .g-bubbles {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 100px;
-    height: 40px;
-    background-color: #00ff6f;
-    filter: blur(5px);
-    border-radius: 100px 100px 0 0;
-    transform: translate(-50%, 0);
-  }
 
-  li {
-    position: absolute;
-    background: #00ff6f;
-    border-radius: 50%;
-  }
-
-  @for $i from 0 through 15 {
-    li:nth-child(#{$i}) {
-      $width: 15 + random(15) + px;
-
-      top: 50%;
-      left: 15 + random(70) + px;
-      width: $width;
-      height: $width;
-      transform: translate(-50%, -50%);
-      animation: moveToTop
-        #{random(6) +
-        3}s
-        ease-in-out -#{random(5000) /
-        1000}s
-        infinite;
+    @for $i from 0 through 15 {
+      li:nth-child(#{$i}) {
+        $width: 15 + random(15) + px;
+
+        top: 50%;
+        left: 15 + random(70) + px;
+        width: $width;
+        height: $width;
+        transform: translate(-50%, -50%);
+        animation: moveToTop
+          #{random(6) +
+          3}s
+          ease-in-out -#{random(5000) /
+          1000}s
+          infinite;
+      }
     }
-  }
 
-  @keyframes rotate {
-    50% {
-      border-radius: 45% / 42% 38% 58% 49%;
-    }
+    @keyframes rotate {
+      50% {
+        border-radius: 45% / 42% 38% 58% 49%;
+      }
 
-    100% {
-      transform: translate(-50%, -50%) rotate(720deg);
+      100% {
+        transform: translate(-50%, -50%) rotate(720deg);
+      }
     }
-  }
 
-  @keyframes moveToTop {
-    90% {
-      opacity: 1;
-    }
+    @keyframes moveToTop {
+      90% {
+        opacity: 1;
+      }
 
-    100% {
-      opacity: 0.1;
-      transform: translate(-50%, -180px);
+      100% {
+        opacity: 0.1;
+        transform: translate(-50%, -180px);
+      }
     }
-  }
 
-  @keyframes hueRotate {
-    100% {
-      filter: contrast(15) hue-rotate(360deg);
+    @keyframes hueRotate {
+      100% {
+        filter: contrast(15) hue-rotate(360deg);
+      }
     }
   }
-}
 </style>

src/components/VabImage/index.vue

@@ -17,76 +17,76 @@
 </template>
 
 <script>
-export default {
-  name: "VabImage",
-  components: {},
-  props: {
-    bigSrc: {
-      type: String,
-      default: "",
+  export default {
+    name: "VabImage",
+    components: {},
+    props: {
+      bigSrc: {
+        type: String,
+        default: "",
+      },
+      smallSrc: {
+        type: String,
+        default: "",
+      },
+      percent: {
+        type: Number,
+        default: 97,
+      },
     },
-    smallSrc: {
-      type: String,
-      default: "",
+    data() {
+      return {};
     },
-    percent: {
-      type: Number,
-      default: 97,
+    created() {},
+    mounted() {},
+    methods: {
+      clickBig() {
+        this.$emit("clickBig");
+      },
+      clickSmall() {
+        this.$emit("clickSmall");
+      },
     },
-  },
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    clickBig() {
-      this.$emit("clickBig");
-    },
-    clickSmall() {
-      this.$emit("clickSmall");
-    },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.vab-image {
-  &__outter {
-    position: relative;
-    width: 100%;
-    height: 100%;
+  .vab-image {
+    &__outter {
+      position: relative;
+      width: 100%;
+      height: 100%;
 
-    ::v-deep {
-      img {
-        border-radius: $base-border-radius;
+      ::v-deep {
+        img {
+          border-radius: $base-border-radius;
+        }
       }
-    }
 
-    &__small {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 80px;
-      height: 100px;
-      border-bottom: 1px solid $base-color-white;
-      border-left: 1px solid $base-color-white;
-      border-radius: $base-border-radius;
-    }
+      &__small {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 80px;
+        height: 100px;
+        border-bottom: 1px solid $base-color-white;
+        border-left: 1px solid $base-color-white;
+        border-radius: $base-border-radius;
+      }
 
-    &__percent {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      display: inline-block;
-      min-width: 50px;
-      height: 25px;
-      line-height: 25px;
-      color: $base-color-white;
-      text-align: center;
-      background-color: $base-color-red;
-      border-radius: $base-border-radius;
+      &__percent {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        display: inline-block;
+        min-width: 50px;
+        height: 25px;
+        line-height: 25px;
+        color: $base-color-white;
+        text-align: center;
+        background-color: $base-color-red;
+        border-radius: $base-border-radius;
+      }
     }
   }
-}
 </style>

src/components/VabProfile/index.vue

@@ -25,289 +25,289 @@
 </template>
 
 <script>
-export default {
-  name: "VabProfile",
-  props: {
-    styleObj: {
-      type: Object,
-      default: () => {
-        return {};
+  export default {
+    name: "VabProfile",
+    props: {
+      styleObj: {
+        type: Object,
+        default: () => {
+          return {};
+        },
       },
-    },
-    username: {
-      type: String,
-      default: "",
-    },
-    avatar: {
-      type: String,
-      default: "",
-    },
-    iconArray: {
-      type: Array,
-      default: () => {
-        return [
-          { icon: "bell", url: "" },
-          { icon: "bookmark", url: "" },
-          { icon: "cloud-sun", url: "" },
-        ];
+      username: {
+        type: String,
+        default: "",
       },
+      avatar: {
+        type: String,
+        default: "",
+      },
+      iconArray: {
+        type: Array,
+        default: () => {
+          return [
+            { icon: "bell", url: "" },
+            { icon: "bookmark", url: "" },
+            { icon: "cloud-sun", url: "" },
+          ];
+        },
+      },
+    },
+    data() {
+      return {};
     },
-  },
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 
 <style lang="scss" scoped>
-.card {
-  --card-bg-color: hsl(240, 31%, 25%);
-  --card-bg-color-transparent: hsla(240, 31%, 25%, 0.7);
-
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .card-borders {
-    position: absolute;
-    top: 0;
-    left: 0;
+  .card {
+    --card-bg-color: hsl(240, 31%, 25%);
+    --card-bg-color-transparent: hsla(240, 31%, 25%, 0.7);
+
+    position: relative;
     width: 100%;
     height: 100%;
-    overflow: hidden;
 
-    .border-top {
+    .card-borders {
       position: absolute;
       top: 0;
+      left: 0;
       width: 100%;
-      height: 2px;
-      background: var(--card-bg-color);
-      transform: translateX(-100%);
-      animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
-        forwards;
-    }
-
-    .border-right {
-      position: absolute;
-      right: 0;
-      width: 2px;
       height: 100%;
-      background: var(--card-bg-color);
-      transform: translateY(100%);
-      animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
-        forwards;
-    }
-
-    .border-bottom {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 2px;
-      background: var(--card-bg-color);
-      transform: translateX(100%);
-      animation: slide-in-horizontal-reverse 0.8s
-        cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
-    }
+      overflow: hidden;
 
-    .border-left {
-      position: absolute;
-      top: 0;
-      width: 2px;
-      height: 100%;
-      background: var(--card-bg-color);
-      transform: translateY(-100%);
-      animation: slide-in-vertical-reverse 0.8s
-        cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
-    }
-  }
+      .border-top {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 2px;
+        background: var(--card-bg-color);
+        transform: translateX(-100%);
+        animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
+          forwards;
+      }
 
-  .card-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    padding: 40px 0 40px 0;
-    background: var(--card-bg-color-transparent);
-    opacity: 0;
-    transform: scale(0.6);
-    animation: bump-in 0.5s 0.8s forwards;
-
-    .avatar {
-      width: 80px;
-      height: 80px;
-      border: 1px solid $base-color-white;
-      border-radius: 50%;
-      opacity: 0;
-      transform: scale(0.6);
-      animation: bump-in 0.5s 1s forwards;
-    }
+      .border-right {
+        position: absolute;
+        right: 0;
+        width: 2px;
+        height: 100%;
+        background: var(--card-bg-color);
+        transform: translateY(100%);
+        animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
+          forwards;
+      }
 
-    .username {
-      position: relative;
-      margin-top: 20px;
-      margin-bottom: 20px;
-      font-size: 26px;
-      color: transparent;
-      letter-spacing: 2px;
-      animation: fill-text-white 1.2s 2s forwards;
+      .border-bottom {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: var(--card-bg-color);
+        transform: translateX(100%);
+        animation: slide-in-horizontal-reverse 0.8s
+          cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
+      }
 
-      &::before {
+      .border-left {
         position: absolute;
         top: 0;
-        left: 0;
-        width: 100%;
+        width: 2px;
         height: 100%;
-        color: black;
-        content: "";
-        background: #35b9f1;
-        transform: scaleX(0);
-        transform-origin: left;
-        animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 1) forwards;
+        background: var(--card-bg-color);
+        transform: translateY(-100%);
+        animation: slide-in-vertical-reverse 0.8s
+          cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
       }
     }
 
-    .social-icons {
+    .card-content {
       display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      padding: 40px 0 40px 0;
+      background: var(--card-bg-color-transparent);
+      opacity: 0;
+      transform: scale(0.6);
+      animation: bump-in 0.5s 0.8s forwards;
 
-      .social-icon {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 2.5em;
-        height: 2.5em;
-        margin: 0 15px;
-        color: white;
-        text-decoration: none;
+      .avatar {
+        width: 80px;
+        height: 80px;
+        border: 1px solid $base-color-white;
         border-radius: 50%;
+        opacity: 0;
+        transform: scale(0.6);
+        animation: bump-in 0.5s 1s forwards;
+      }
 
-        @for $i from 1 through 3 {
-          &:nth-child(#{$i}) {
-            &::before {
-              animation-delay: 2s + 0.1s * $i;
-            }
-
-            &::after {
-              animation-delay: 2.1s + 0.1s * $i;
-            }
-
-            svg {
-              animation-delay: 2.2s + 0.1s * $i;
-            }
-          }
-        }
+      .username {
+        position: relative;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-size: 26px;
+        color: transparent;
+        letter-spacing: 2px;
+        animation: fill-text-white 1.2s 2s forwards;
 
-        &::before,
-        &::after {
+        &::before {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
+          color: black;
           content: "";
-          border-radius: inherit;
-          transform: scale(0);
+          background: #35b9f1;
+          transform: scaleX(0);
+          transform-origin: left;
+          animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 1) forwards;
         }
+      }
 
-        &::before {
-          background: #f7f1e3;
-          animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
-        }
+      .social-icons {
+        display: flex;
 
-        &::after {
-          background: #2c3e50;
-          animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
-        }
+        .social-icon {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 2.5em;
+          height: 2.5em;
+          margin: 0 15px;
+          color: white;
+          text-decoration: none;
+          border-radius: 50%;
+
+          @for $i from 1 through 3 {
+            &:nth-child(#{$i}) {
+              &::before {
+                animation-delay: 2s + 0.1s * $i;
+              }
+
+              &::after {
+                animation-delay: 2.1s + 0.1s * $i;
+              }
+
+              svg {
+                animation-delay: 2.2s + 0.1s * $i;
+              }
+            }
+          }
+
+          &::before,
+          &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            content: "";
+            border-radius: inherit;
+            transform: scale(0);
+          }
+
+          &::before {
+            background: #f7f1e3;
+            animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
+          }
 
-        svg {
-          z-index: 99;
-          transform: scale(0);
-          animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
+          &::after {
+            background: #2c3e50;
+            animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
+          }
+
+          svg {
+            z-index: 99;
+            transform: scale(0);
+            animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
+          }
         }
       }
     }
   }
-}
 
-@keyframes bump-in {
-  50% {
-    transform: scale(1.05);
-  }
+  @keyframes bump-in {
+    50% {
+      transform: scale(1.05);
+    }
 
-  to {
-    opacity: 1;
-    transform: scale(1);
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
-}
 
-@keyframes slide-in-horizontal {
-  50% {
-    transform: translateX(0);
-  }
+  @keyframes slide-in-horizontal {
+    50% {
+      transform: translateX(0);
+    }
 
-  to {
-    transform: translateX(100%);
+    to {
+      transform: translateX(100%);
+    }
   }
-}
 
-@keyframes slide-in-horizontal-reverse {
-  50% {
-    transform: translateX(0);
-  }
+  @keyframes slide-in-horizontal-reverse {
+    50% {
+      transform: translateX(0);
+    }
 
-  to {
-    transform: translateX(-100%);
+    to {
+      transform: translateX(-100%);
+    }
   }
-}
 
-@keyframes slide-in-vertical {
-  50% {
-    transform: translateY(0);
-  }
+  @keyframes slide-in-vertical {
+    50% {
+      transform: translateY(0);
+    }
 
-  to {
-    transform: translateY(-100%);
+    to {
+      transform: translateY(-100%);
+    }
   }
-}
 
-@keyframes slide-in-vertical-reverse {
-  50% {
-    transform: translateY(0);
-  }
+  @keyframes slide-in-vertical-reverse {
+    50% {
+      transform: translateY(0);
+    }
 
-  to {
-    transform: translateY(100%);
+    to {
+      transform: translateY(100%);
+    }
   }
-}
 
-@keyframes slide-in-out {
-  50% {
-    transform: scaleX(1);
-    transform-origin: left;
-  }
+  @keyframes slide-in-out {
+    50% {
+      transform: scaleX(1);
+      transform-origin: left;
+    }
 
-  50.1% {
-    transform-origin: right;
-  }
+    50.1% {
+      transform-origin: right;
+    }
 
-  100% {
-    transform: scaleX(0);
-    transform-origin: right;
+    100% {
+      transform: scaleX(0);
+      transform-origin: right;
+    }
   }
-}
 
-@keyframes fill-text-white {
-  to {
-    color: white;
+  @keyframes fill-text-white {
+    to {
+      color: white;
+    }
   }
-}
 
-@keyframes scale-in {
-  to {
-    transform: scale(1);
+  @keyframes scale-in {
+    to {
+      transform: scale(1);
+    }
   }
-}
 </style>

src/components/VabQrCode/index.vue

@@ -5,40 +5,40 @@
 </template>
 
 <script>
-import VueQArt from "vue-qart";
-import qrImg from "@/assets/qr_logo/lqr_logo.png";
+  import VueQArt from "vue-qart";
+  import qrImg from "@/assets/qr_logo/lqr_logo.png";
 
-export default {
-  name: "VabQrCode",
-  components: {
-    VueQArt,
-  },
-  props: {
-    imagePath: {
-      type: String,
-      default: qrImg,
+  export default {
+    name: "VabQrCode",
+    components: {
+      VueQArt,
     },
-    url: {
-      type: String,
-      default: "http://www.boyunvision.com/",
+    props: {
+      imagePath: {
+        type: String,
+        default: qrImg,
+      },
+      url: {
+        type: String,
+        default: "http://www.boyunvision.com/",
+      },
+      size: {
+        type: Number,
+        default: 500,
+      },
     },
-    size: {
-      type: Number,
-      default: 500,
+    data() {
+      return {
+        config: {
+          value: this.url,
+          imagePath: this.imagePath,
+          filter: "color",
+          size: this.size,
+        },
+      };
     },
-  },
-  data() {
-    return {
-      config: {
-        value: this.url,
-        imagePath: this.imagePath,
-        filter: "color",
-        size: this.size,
-      },
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>

src/components/VabSnow/index.vue

@@ -5,77 +5,78 @@
 </template>
 
 <script>
-export default {
-  name: "VabSnow",
-  props: {
-    styleObj: {
-      type: Object,
-      default: () => {
-        return {};
+  export default {
+    name: "VabSnow",
+    props: {
+      styleObj: {
+        type: Object,
+        default: () => {
+          return {};
+        },
       },
     },
-  },
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+    data() {
+      return {};
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 
 <style lang="scss" scoped>
-.content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
-  filter: drop-shadow(0 0 10px white);
-}
-
-@function random_range($min, $max) {
-  $rand: random();
-  $random_range: $min + floor($rand * (($max - $min) + 1));
+  .content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+    filter: drop-shadow(0 0 10px white);
+  }
 
-  @return $random_range;
-}
+  @function random_range($min, $max) {
+    $rand: random();
+    $random_range: $min + floor($rand * (($max - $min) + 1));
 
-.snow {
-  $total: 200;
+    @return $random_range;
+  }
 
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: white;
-  border-radius: 50%;
+  .snow {
+    $total: 200;
 
-  @for $i from 1 through $total {
-    $random-x: random(1000000) * 0.0001vw;
-    $random-offset: random_range(-100000, 100000) * 0.0001vw;
-    $random-x-end: $random-x + $random-offset;
-    $random-x-end-yoyo: $random-x + ($random-offset / 2);
-    $random-yoyo-time: random_range(30000, 80000) / 100000;
-    $random-yoyo-y: $random-yoyo-time * 100vh;
-    $random-scale: random(10000) * 0.0001;
-    $fall-duration: random_range(10, 30) * 1s;
-    $fall-delay: random(30) * -1s;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
 
-    &:nth-child(#{$i}) {
-      opacity: random(10000) * 0.0001;
-      transform: translate($random-x, -10px) scale($random-scale);
-      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
-    }
+    @for $i from 1 through $total {
+      $random-x: random(1000000) * 0.0001vw;
+      $random-offset: random_range(-100000, 100000) * 0.0001vw;
+      $random-x-end: $random-x + $random-offset;
+      $random-x-end-yoyo: $random-x + ($random-offset / 2);
+      $random-yoyo-time: random_range(30000, 80000) / 100000;
+      $random-yoyo-y: $random-yoyo-time * 100vh;
+      $random-scale: random(10000) * 0.0001;
+      $fall-duration: random_range(10, 30) * 1s;
+      $fall-delay: random(30) * -1s;
 
-    @keyframes fall-#{$i} {
-      #{percentage($random-yoyo-time)} {
-        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
+      &:nth-child(#{$i}) {
+        opacity: random(10000) * 0.0001;
+        transform: translate($random-x, -10px) scale($random-scale);
+        animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
       }
 
-      to {
-        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
+      @keyframes fall-#{$i} {
+        #{percentage($random-yoyo-time)} {
+          transform: translate($random-x-end, $random-yoyo-y)
+            scale($random-scale);
+        }
+
+        to {
+          transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
+        }
       }
     }
   }
-}
 </style>

src/components/VabSticky/index.vue

@@ -16,80 +16,80 @@
 </template>
 
 <script>
-export default {
-  name: "VabSticky",
-  props: {
-    stickyTop: {
-      type: Number,
-      default: 0,
+  export default {
+    name: "VabSticky",
+    props: {
+      stickyTop: {
+        type: Number,
+        default: 0,
+      },
+      zIndex: {
+        type: Number,
+        default: 1,
+      },
+      className: {
+        type: String,
+        default: "",
+      },
     },
-    zIndex: {
-      type: Number,
-      default: 1,
+    data() {
+      return {
+        active: false,
+        position: "",
+        width: undefined,
+        height: undefined,
+        isSticky: false,
+      };
     },
-    className: {
-      type: String,
-      default: "",
+    mounted() {
+      this.height = this.$el.getBoundingClientRect().height;
+      window.addEventListener("scroll", this.handleScroll);
+      window.addEventListener("resize", this.handleResize);
     },
-  },
-  data() {
-    return {
-      active: false,
-      position: "",
-      width: undefined,
-      height: undefined,
-      isSticky: false,
-    };
-  },
-  mounted() {
-    this.height = this.$el.getBoundingClientRect().height;
-    window.addEventListener("scroll", this.handleScroll);
-    window.addEventListener("resize", this.handleResize);
-  },
-  activated() {
-    this.handleScroll();
-  },
-  destroyed() {
-    window.removeEventListener("scroll", this.handleScroll);
-    window.removeEventListener("resize", this.handleResize);
-  },
-  methods: {
-    sticky() {
-      if (this.active) {
-        return;
-      }
-      this.position = "fixed";
-      this.active = true;
-      this.width = this.width + "px";
-      this.isSticky = true;
+    activated() {
+      this.handleScroll();
     },
-    handleReset() {
-      if (!this.active) {
-        return;
-      }
-      this.reset();
+    destroyed() {
+      window.removeEventListener("scroll", this.handleScroll);
+      window.removeEventListener("resize", this.handleResize);
     },
-    reset() {
-      this.position = "";
-      this.width = "auto";
-      this.active = false;
-      this.isSticky = false;
+    methods: {
+      sticky() {
+        if (this.active) {
+          return;
+        }
+        this.position = "fixed";
+        this.active = true;
+        this.width = this.width + "px";
+        this.isSticky = true;
+      },
+      handleReset() {
+        if (!this.active) {
+          return;
+        }
+        this.reset();
+      },
+      reset() {
+        this.position = "";
+        this.width = "auto";
+        this.active = false;
+        this.isSticky = false;
+      },
+      handleScroll() {
+        const width = this.$el.getBoundingClientRect().width;
+        this.width = width || "auto";
+        const offsetTop = this.$el.getBoundingClientRect().top;
+        if (offsetTop < this.stickyTop) {
+          this.sticky();
+          return;
+        }
+        this.handleReset();
+      },
+      handleResize() {
+        if (this.isSticky) {
+          this.width = this.$el.getBoundingClientRect().width + "px";
+        }
+      },
     },
-    handleScroll() {
-      const width = this.$el.getBoundingClientRect().width;
-      this.width = width || "auto";
-      const offsetTop = this.$el.getBoundingClientRect().top;
-      if (offsetTop < this.stickyTop) {
-        this.sticky();
-        return;
-      }
-      this.handleReset();
-    },
-    handleResize() {
-      if (this.isSticky) {
-        this.width = this.$el.getBoundingClientRect().width + "px";
-      }
-    },
-  },
-};
+  };
 </script>

src/components/VabUpload/index.vue

@@ -11,8 +11,7 @@
         :closable="false"
         :title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
         type="info"
-      >
-      </el-alert>
+      ></el-alert>
       <br />
       <el-upload
         ref="upload"
@@ -68,155 +67,66 @@
         type="success"
         :loading="loading"
         @click="submitUpload"
-        >开始上传
+      >
+        开始上传
       </el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { tokenName } from "@/config/settings";
-
-export default {
-  name: "VabUpload",
-  props: {
-    url: {
-      type: String,
-      default: "/upload",
-      required: true,
-    },
-    name: {
-      type: String,
-      default: "file",
-      required: true,
-    },
-    limit: {
-      type: Number,
-      default: 50,
-      required: true,
-    },
-    size: {
-      type: Number,
-      default: 1,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      show: false,
-      loading: false,
-      dialogVisible: false,
-      dialogImageUrl: "",
-      action: "",
-      headers: {},
-      fileList: [],
-      picture: "picture",
-      imgNum: 0,
-      imgSuccessNum: 0,
-      imgErrorNum: 0,
-      typeList: null,
-      title: "上传",
-      dialogFormVisible: false,
-      data: {},
-    };
-  },
-  computed: {
-    percentage() {
-      if (this.allImgNum == 0) return 0;
-      return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
-    },
-  },
-  created() {
-    if ("development" === process.env.NODE_ENV) {
-      this.api = process.env.VUE_APP_BASE_API;
-    } else {
-      this.api = `${window.location.protocol}//${window.location.host}`;
-    }
+  import { tokenName } from "@/config/settings";
 
-    this.action = this.api + this.url;
-    this.headers[tokenName] = this.$baseAccessToken();
-  },
-  methods: {
-    submitUpload() {
-      this.$refs.upload.submit();
+  export default {
+    name: "VabUpload",
+    props: {
+      url: {
+        type: String,
+        default: "/upload",
+        required: true,
+      },
+      name: {
+        type: String,
+        default: "file",
+        required: true,
+      },
+      limit: {
+        type: Number,
+        default: 50,
+        required: true,
+      },
+      size: {
+        type: Number,
+        default: 1,
+        required: true,
+      },
     },
-    handleProgress(event, file, fileList) {
-      this.loading = true;
-      this.show = true;
+    data() {
+      return {
+        show: false,
+        loading: false,
+        dialogVisible: false,
+        dialogImageUrl: "",
+        action: "",
+        headers: {},
+        fileList: [],
+        picture: "picture",
+        imgNum: 0,
+        imgSuccessNum: 0,
+        imgErrorNum: 0,
+        typeList: null,
+        title: "上传",
+        dialogFormVisible: false,
+        data: {},
+      };
     },
-    handleChange(file, fileList) {
-      if (file.size > 1048576 * this.size) {
-        fileList.map((item, index) => {
-          if (item === file) {
-            fileList.splice(index, 1);
-          }
-        });
-        this.fileList = fileList;
-      } else {
-        this.allImgNum = fileList.length;
-      }
-    },
-    handleSuccess(response, file, fileList) {
-      this.imgNum = this.imgNum + 1;
-      this.imgSuccessNum = this.imgSuccessNum + 1;
-      if (fileList.length === this.imgNum) {
-        setTimeout(() => {
-          this.$emit("fetchDatas");
-          this.$baseMessage(
-            `上传完成! 共上传${fileList.length}张图片`,
-            "success"
-          );
-        }, 1000);
-      }
-
-      setTimeout(() => {
-        this.loading = false;
-        this.show = false;
-      }, 1000);
-    },
-    handleError(err, file, fileList) {
-      this.imgNum = this.imgNum + 1;
-      this.imgErrorNum = this.imgErrorNum + 1;
-      this.$baseMessage(
-        `文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
-          file.raw.size / 1024,
-          0
-        )}KB`,
-        "error"
-      );
-      setTimeout(() => {
-        this.loading = false;
-        this.show = false;
-      }, 1000);
-    },
-    handleRemove(file, fileList) {
-      this.imgNum = this.imgNum - 1;
-      this.allNum = this.allNum - 1;
-    },
-    handlePreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    handleExceed(files, fileList) {
-      this.$baseMessage(
-        `当前限制选择 ${this.limit} 个文件，本次选择了
-             ${files.length}
-             个文件`,
-        "error"
-      );
+    computed: {
+      percentage() {
+        if (this.allImgNum == 0) return 0;
+        return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100;
+      },
     },
-    handleShow(data) {
-      this.title = "上传";
-      this.data = data;
-      this.dialogFormVisible = true;
-    },
-    handleClose() {
-      this.fileList = [];
-      this.picture = "picture";
-      this.allImgNum = 0;
-      this.imgNum = 0;
-      this.imgSuccessNum = 0;
-      this.imgErrorNum = 0;
+    created() {
       if ("development" === process.env.NODE_ENV) {
         this.api = process.env.VUE_APP_BASE_API;
       } else {
@@ -225,43 +135,133 @@ export default {
 
       this.action = this.api + this.url;
       this.headers[tokenName] = this.$baseAccessToken();
-      this.dialogFormVisible = false;
     },
-  },
-};
-</script>
+    methods: {
+      submitUpload() {
+        this.$refs.upload.submit();
+      },
+      handleProgress(event, file, fileList) {
+        this.loading = true;
+        this.show = true;
+      },
+      handleChange(file, fileList) {
+        if (file.size > 1048576 * this.size) {
+          fileList.map((item, index) => {
+            if (item === file) {
+              fileList.splice(index, 1);
+            }
+          });
+          this.fileList = fileList;
+        } else {
+          this.allImgNum = fileList.length;
+        }
+      },
+      handleSuccess(response, file, fileList) {
+        this.imgNum = this.imgNum + 1;
+        this.imgSuccessNum = this.imgSuccessNum + 1;
+        if (fileList.length === this.imgNum) {
+          setTimeout(() => {
+            this.$emit("fetchDatas");
+            this.$baseMessage(
+              `上传完成! 共上传${fileList.length}张图片`,
+              "success"
+            );
+          }, 1000);
+        }
 
-<style lang="scss" scoped>
-.upload {
-  height: 600px;
+        setTimeout(() => {
+          this.loading = false;
+          this.show = false;
+        }, 1000);
+      },
+      handleError(err, file, fileList) {
+        this.imgNum = this.imgNum + 1;
+        this.imgErrorNum = this.imgErrorNum + 1;
+        this.$baseMessage(
+          `文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
+            file.raw.size / 1024,
+            0
+          )}KB`,
+          "error"
+        );
+        setTimeout(() => {
+          this.loading = false;
+          this.show = false;
+        }, 1000);
+      },
+      handleRemove(file, fileList) {
+        this.imgNum = this.imgNum - 1;
+        this.allNum = this.allNum - 1;
+      },
+      handlePreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleExceed(files, fileList) {
+        this.$baseMessage(
+          `当前限制选择 ${this.limit} 个文件，本次选择了
+             ${files.length}
+             个文件`,
+          "error"
+        );
+      },
+      handleShow(data) {
+        this.title = "上传";
+        this.data = data;
+        this.dialogFormVisible = true;
+      },
+      handleClose() {
+        this.fileList = [];
+        this.picture = "picture";
+        this.allImgNum = 0;
+        this.imgNum = 0;
+        this.imgSuccessNum = 0;
+        this.imgErrorNum = 0;
+        if ("development" === process.env.NODE_ENV) {
+          this.api = process.env.VUE_APP_BASE_API;
+        } else {
+          this.api = `${window.location.protocol}//${window.location.host}`;
+        }
 
-  .upload-content {
-    .el-upload__tip {
-      display: block;
-      height: 30px;
-      line-height: 30px;
-    }
+        this.action = this.api + this.url;
+        this.headers[tokenName] = this.$baseAccessToken();
+        this.dialogFormVisible = false;
+      },
+    },
+  };
+</script>
 
-    ::v-deep {
-      .el-upload--picture-card {
-        width: 128px;
-        height: 128px;
-        margin: 3px 8px 8px 8px;
-        border: 2px dashed #c0ccda;
-      }
+<style lang="scss" scoped>
+  .upload {
+    height: 600px;
 
-      .el-upload-list--picture {
-        margin-bottom: 20px;
+    .upload-content {
+      .el-upload__tip {
+        display: block;
+        height: 30px;
+        line-height: 30px;
       }
 
-      .el-upload-list--picture-card {
-        .el-upload-list__item {
+      ::v-deep {
+        .el-upload--picture-card {
           width: 128px;
           height: 128px;
           margin: 3px 8px 8px 8px;
+          border: 2px dashed #c0ccda;
+        }
+
+        .el-upload-list--picture {
+          margin-bottom: 20px;
+        }
+
+        .el-upload-list--picture-card {
+          .el-upload-list__item {
+            width: 128px;
+            height: 128px;
+            margin: 3px 8px 8px 8px;
+          }
         }
       }
     }
   }
-}
 </style>

src/layouts/components/Ad/index.vue

@@ -9,44 +9,44 @@
       indicator-position="none"
     >
       <el-carousel-item v-for="(item, index) in adList" :key="index">
-        <el-tag type="warning"> Ad</el-tag>
-        <a target="_blank" :href="item.url"> {{ item.title }}</a>
+        <el-tag type="warning">Ad</el-tag>
+        <a target="_blank" :href="item.url">{{ item.title }}</a>
       </el-carousel-item>
     </el-carousel>
   </div>
 </template>
 <script>
-import { getList } from "@/api/ad";
-export default {
-  data() {
-    return {
-      nodeEnv: process.env.NODE_ENV,
-      adList: [],
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    async fetchData() {
-      const { data } = await getList();
-      this.adList = data;
+  import { getList } from "@/api/ad";
+  export default {
+    data() {
+      return {
+        nodeEnv: process.env.NODE_ENV,
+        adList: [],
+      };
     },
-  },
-};
+    created() {
+      this.fetchData();
+    },
+    methods: {
+      async fetchData() {
+        const { data } = await getList();
+        this.adList = data;
+      },
+    },
+  };
 </script>
 <style lang="scss" scoped>
-.vab-ad {
-  height: 30px;
-  padding-right: $base-padding;
-  padding-left: $base-padding;
-  line-height: 30px;
-  cursor: pointer;
-  background: #eef1f6;
-  box-shadow: 0 -1px 2px rgba(0, 21, 41, 0.08) inset;
+  .vab-ad {
+    height: 30px;
+    padding-right: $base-padding;
+    padding-left: $base-padding;
+    line-height: 30px;
+    cursor: pointer;
+    background: #eef1f6;
+    box-shadow: 0 -1px 2px rgba(0, 21, 41, 0.08) inset;
 
-  a {
-    color: #999;
+    a {
+      color: #999;
+    }
   }
-}
 </style>

src/layouts/index.vue

@@ -52,261 +52,262 @@
 </template>
 
 <script>
-import { Ad, AppMain, NavBar, SideBar, TagsBar, TopBar } from "./components";
-import { mapActions, mapGetters } from "vuex";
-import { tokenName } from "@/config/settings";
-export default {
-  name: "Layout",
-  components: {
-    Ad,
-    TopBar,
-    NavBar,
-    SideBar,
-    AppMain,
-    TagsBar,
-  },
-  data() {
-    return { oldLayout: "" };
-  },
-  computed: {
-    ...mapGetters({
-      layout: "settings/layout",
-      tagsBar: "settings/tagsBar",
-      collapse: "settings/collapse",
-      header: "settings/header",
-      device: "settings/device",
-    }),
-    classObj() {
-      return {
-        mobile: this.device === "mobile",
-      };
+  import { Ad, AppMain, NavBar, SideBar, TagsBar, TopBar } from "./components";
+  import { mapActions, mapGetters } from "vuex";
+  import { tokenName } from "@/config/settings";
+  export default {
+    name: "Layout",
+    components: {
+      Ad,
+      TopBar,
+      NavBar,
+      SideBar,
+      AppMain,
+      TagsBar,
     },
-  },
-  beforeMount() {
-    window.addEventListener("resize", this.handleResize);
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this.handleResize);
-  },
-  mounted() {
-    this.oldLayout = this.layout;
-    const userAgent = navigator.userAgent;
-    if (userAgent.includes("Juejin")) {
-      this.$baseAlert(
-        "vue-admin-beautiful不支持在掘金内置浏览器演示，请手动复制以下地址到浏览器中查看http://mpfhrd48.sanxing.uz7.cn/vue-admin-beautiful"
-      );
-    }
-    const isMobile = this.handleIsMobile();
-    if (isMobile) {
-      if (isMobile) {
-        //横向布局时如果是手机端访问那么改成纵向版
-        this.$store.dispatch("settings/changeLayout", "vertical");
-      } else {
-        this.$store.dispatch("settings/changeLayout", this.oldLayout);
-      }
-      this.$store.dispatch("settings/toggleDevice", "mobile");
-      setTimeout(() => {
-        this.$store.dispatch("settings/foldSideBar");
-      }, 2000);
-    } else {
-      this.$store.dispatch("settings/openSideBar");
-    }
-    this.$nextTick(() => {
-      window.addEventListener(
-        "storage",
-        (e) => {
-          if (e.key === tokenName || e.key === null) window.location.reload();
-          if (e.key === tokenName && e.value === null) window.location.reload();
-        },
-        false
-      );
-    });
-  },
-  methods: {
-    ...mapActions({
-      handleFoldSideBar: "settings/foldSideBar",
-    }),
-    handleIsMobile() {
-      return document.body.getBoundingClientRect().width - 1 < 992;
+    data() {
+      return { oldLayout: "" };
+    },
+    computed: {
+      ...mapGetters({
+        layout: "settings/layout",
+        tagsBar: "settings/tagsBar",
+        collapse: "settings/collapse",
+        header: "settings/header",
+        device: "settings/device",
+      }),
+      classObj() {
+        return {
+          mobile: this.device === "mobile",
+        };
+      },
     },
-    handleResize() {
-      if (!document.hidden) {
-        const isMobile = this.handleIsMobile();
+    beforeMount() {
+      window.addEventListener("resize", this.handleResize);
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", this.handleResize);
+    },
+    mounted() {
+      this.oldLayout = this.layout;
+      const userAgent = navigator.userAgent;
+      if (userAgent.includes("Juejin")) {
+        this.$baseAlert(
+          "vue-admin-beautiful不支持在掘金内置浏览器演示，请手动复制以下地址到浏览器中查看http://mpfhrd48.sanxing.uz7.cn/vue-admin-beautiful"
+        );
+      }
+      const isMobile = this.handleIsMobile();
+      if (isMobile) {
         if (isMobile) {
           //横向布局时如果是手机端访问那么改成纵向版
           this.$store.dispatch("settings/changeLayout", "vertical");
         } else {
           this.$store.dispatch("settings/changeLayout", this.oldLayout);
         }
-
-        this.$store.dispatch(
-          "settings/toggleDevice",
-          isMobile ? "mobile" : "desktop"
-        );
+        this.$store.dispatch("settings/toggleDevice", "mobile");
+        setTimeout(() => {
+          this.$store.dispatch("settings/foldSideBar");
+        }, 2000);
+      } else {
+        this.$store.dispatch("settings/openSideBar");
       }
+      this.$nextTick(() => {
+        window.addEventListener(
+          "storage",
+          (e) => {
+            if (e.key === tokenName || e.key === null) window.location.reload();
+            if (e.key === tokenName && e.value === null)
+              window.location.reload();
+          },
+          false
+        );
+      });
     },
-  },
-};
+    methods: {
+      ...mapActions({
+        handleFoldSideBar: "settings/foldSideBar",
+      }),
+      handleIsMobile() {
+        return document.body.getBoundingClientRect().width - 1 < 992;
+      },
+      handleResize() {
+        if (!document.hidden) {
+          const isMobile = this.handleIsMobile();
+          if (isMobile) {
+            //横向布局时如果是手机端访问那么改成纵向版
+            this.$store.dispatch("settings/changeLayout", "vertical");
+          } else {
+            this.$store.dispatch("settings/changeLayout", this.oldLayout);
+          }
+
+          this.$store.dispatch(
+            "settings/toggleDevice",
+            isMobile ? "mobile" : "desktop"
+          );
+        }
+      },
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-@mixin fix-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $base-z-index - 2;
-  width: 100%;
-  overflow: hidden;
-}
-
-.vue-admin-beautiful-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
+  @mixin fix-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $base-z-index - 2;
+    width: 100%;
+    overflow: hidden;
+  }
 
-  .layout-container-horizontal {
+  .vue-admin-beautiful-wrapper {
     position: relative;
+    width: 100%;
+    height: 100%;
 
-    &.fixed {
-      padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height});
-    }
-
-    &.fixed.no-tags-bar {
-      padding-top: $base-top-bar-height;
-    }
+    .layout-container-horizontal {
+      position: relative;
 
-    ::v-deep {
-      .vab-main {
-        width: 88%;
-        margin: auto;
+      &.fixed {
+        padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height});
       }
 
-      .fixed-header {
-        @include fix-header;
+      &.fixed.no-tags-bar {
+        padding-top: $base-top-bar-height;
       }
 
-      .tag-view-show {
-        background: $base-color-white;
-        box-shadow: $base-box-shadow;
-      }
+      ::v-deep {
+        .vab-main {
+          width: 88%;
+          margin: auto;
+        }
 
-      .nav-bar-container {
-        .fold-unfold {
-          display: none;
+        .fixed-header {
+          @include fix-header;
         }
-      }
 
-      .main-padding {
-        .app-main-container {
-          margin-top: $base-padding;
-          margin-bottom: $base-padding;
+        .tag-view-show {
           background: $base-color-white;
+          box-shadow: $base-box-shadow;
+        }
+
+        .nav-bar-container {
+          .fold-unfold {
+            display: none;
+          }
+        }
+
+        .main-padding {
+          .app-main-container {
+            margin-top: $base-padding;
+            margin-bottom: $base-padding;
+            background: $base-color-white;
+          }
         }
       }
     }
-  }
 
-  .layout-container-vertical {
-    position: relative;
+    .layout-container-vertical {
+      position: relative;
 
-    .mask {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: $base-z-index - 1;
-      width: 100%;
-      height: 100vh;
-      overflow: hidden;
-      background: #000;
-      opacity: 0.5;
-    }
+      .mask {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: $base-z-index - 1;
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        background: #000;
+        opacity: 0.5;
+      }
 
-    &.fixed {
-      padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height});
-    }
+      &.fixed {
+        padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height});
+      }
 
-    &.fixed.no-tags-bar {
-      padding-top: $base-nav-bar-height;
-    }
+      &.fixed.no-tags-bar {
+        padding-top: $base-nav-bar-height;
+      }
 
-    .vab-main {
-      position: relative;
-      min-height: 100%;
-      margin-left: $base-left-menu-width;
-      background: #f6f8f9;
-      transition: $base-transition;
+      .vab-main {
+        position: relative;
+        min-height: 100%;
+        margin-left: $base-left-menu-width;
+        background: #f6f8f9;
+        transition: $base-transition;
 
-      ::v-deep {
-        .fixed-header {
-          @include fix-header;
+        ::v-deep {
+          .fixed-header {
+            @include fix-header;
 
-          left: $base-left-menu-width;
-          width: $base-right-content-width;
-          box-shadow: $base-box-shadow;
-          transition: $base-transition;
-        }
+            left: $base-left-menu-width;
+            width: $base-right-content-width;
+            box-shadow: $base-box-shadow;
+            transition: $base-transition;
+          }
 
-        .nav-bar-container {
-          position: relative;
-          box-sizing: border-box;
-        }
+          .nav-bar-container {
+            position: relative;
+            box-sizing: border-box;
+          }
 
-        .tags-bar-container {
-          box-sizing: border-box;
-        }
+          .tags-bar-container {
+            box-sizing: border-box;
+          }
 
-        .app-main-container {
-          width: calc(100% - #{$base-padding} - #{$base-padding});
-          margin: $base-padding auto;
-          background: $base-color-white;
-          border-radius: $base-border-radius;
+          .app-main-container {
+            width: calc(100% - #{$base-padding} - #{$base-padding});
+            margin: $base-padding auto;
+            background: $base-color-white;
+            border-radius: $base-border-radius;
+          }
         }
-      }
 
-      &.is-collapse-main {
-        margin-left: $base-left-menu-width-min;
+        &.is-collapse-main {
+          margin-left: $base-left-menu-width-min;
 
-        ::v-deep {
-          .fixed-header {
-            left: $base-left-menu-width-min;
-            width: calc(100% - 65px);
+          ::v-deep {
+            .fixed-header {
+              left: $base-left-menu-width-min;
+              width: calc(100% - 65px);
+            }
           }
         }
       }
     }
-  }
 
-  /* 手机端开始 */
-  &.mobile {
-    ::v-deep {
-      .el-pager,
-      .el-pagination__jump {
-        display: none;
-      }
-
-      .layout-container-vertical {
-        .el-scrollbar.side-bar-container.is-collapse {
-          width: 0;
+    /* 手机端开始 */
+    &.mobile {
+      ::v-deep {
+        .el-pager,
+        .el-pagination__jump {
+          display: none;
         }
 
-        .vab-main {
-          width: 100%;
-          margin-left: 0;
+        .layout-container-vertical {
+          .el-scrollbar.side-bar-container.is-collapse {
+            width: 0;
+          }
+
+          .vab-main {
+            width: 100%;
+            margin-left: 0;
+          }
         }
-      }
 
-      .vab-main {
-        .fixed-header {
-          left: 0 !important;
-          width: 100% !important;
+        .vab-main {
+          .fixed-header {
+            left: 0 !important;
+            width: 100% !important;
+          }
         }
       }
     }
-  }
 
-  /* 手机端结束 */
-}
+    /* 手机端结束 */
+  }
 </style>

src/utils/request.js

@@ -36,7 +36,7 @@ service.interceptors.request.use(
     }
     if (process.env.NODE_ENV !== "preview") {
       if (contentType === "application/x-www-form-urlencoded;charset=UTF-8") {
-        if (config.data && !config.data.param) {
+        if (config.data) {
           config.data = qs.stringify(config.data);
         }
       }

src/views/401.vue

@@ -43,254 +43,254 @@
 </template>
 
 <script>
-export default {
-  name: "Page401",
-  data() {
-    return {
-      jumpTime: 5,
-      oops: "抱歉!",
-      headline: "您没有操作权限...",
-      info: "当前帐号没有操作权限,请联系管理员。",
-      btn: "返回",
-      timer: 0,
-    };
-  },
-  mounted() {
-    this.timeChange();
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  },
-  methods: {
-    timeChange() {
-      this.timer = setInterval(() => {
-        if (this.jumpTime) {
-          this.jumpTime--;
-        } else {
-          this.$router.push({ path: "/" });
-          this.$store.dispatch("tagsBar/delOthersRoutes", {
-            path: "/",
-          });
-          clearInterval(this.timer);
-        }
-      }, 1000);
+  export default {
+    name: "Page401",
+    data() {
+      return {
+        jumpTime: 5,
+        oops: "抱歉!",
+        headline: "您没有操作权限...",
+        info: "当前帐号没有操作权限,请联系管理员。",
+        btn: "返回",
+        timer: 0,
+      };
+    },
+    mounted() {
+      this.timeChange();
+    },
+    beforeDestroy() {
+      clearInterval(this.timer);
     },
-  },
-};
+    methods: {
+      timeChange() {
+        this.timer = setInterval(() => {
+          if (this.jumpTime) {
+            this.jumpTime--;
+          } else {
+            this.$router.push({ path: "/" });
+            this.$store.dispatch("tagsBar/delOthersRoutes", {
+              path: "/",
+            });
+            clearInterval(this.timer);
+          }
+        }, 1000);
+      },
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-.error-container {
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  .error-content {
-    .pic-error {
-      position: relative;
-      float: left;
-      width: 120%;
-      overflow: hidden;
+  .error-container {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
-      &-parent {
-        width: 100%;
-      }
-
-      &-child {
-        position: absolute;
-
-        &.left {
-          top: 17px;
-          left: 220px;
-          width: 80px;
-          opacity: 0;
-          animation-name: cloudLeft;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-delay: 1s;
-          animation-fill-mode: forwards;
-        }
+    .error-content {
+      .pic-error {
+        position: relative;
+        float: left;
+        width: 120%;
+        overflow: hidden;
 
-        &.mid {
-          top: 10px;
-          left: 420px;
-          width: 46px;
-          opacity: 0;
-          animation-name: cloudMid;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-delay: 1.2s;
-          animation-fill-mode: forwards;
+        &-parent {
+          width: 100%;
         }
 
-        &.right {
-          top: 100px;
-          left: 500px;
-          width: 62px;
-          opacity: 0;
-          animation-name: cloudRight;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-delay: 1s;
-          animation-fill-mode: forwards;
-        }
+        &-child {
+          position: absolute;
 
-        @keyframes cloudLeft {
-          0% {
+          &.left {
             top: 17px;
             left: 220px;
+            width: 80px;
             opacity: 0;
+            animation-name: cloudLeft;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
           }
 
-          20% {
-            top: 33px;
-            left: 188px;
-            opacity: 1;
-          }
-
-          80% {
-            top: 81px;
-            left: 92px;
-            opacity: 1;
-          }
-
-          100% {
-            top: 97px;
-            left: 60px;
-            opacity: 0;
-          }
-        }
-
-        @keyframes cloudMid {
-          0% {
+          &.mid {
             top: 10px;
             left: 420px;
+            width: 46px;
             opacity: 0;
+            animation-name: cloudMid;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1.2s;
+            animation-fill-mode: forwards;
           }
 
-          20% {
-            top: 40px;
-            left: 360px;
-            opacity: 1;
-          }
-
-          70% {
-            top: 130px;
-            left: 180px;
-            opacity: 1;
-          }
-
-          100% {
-            top: 160px;
-            left: 120px;
-            opacity: 0;
-          }
-        }
-
-        @keyframes cloudRight {
-          0% {
+          &.right {
             top: 100px;
             left: 500px;
+            width: 62px;
             opacity: 0;
+            animation-name: cloudRight;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
           }
 
-          20% {
-            top: 120px;
-            left: 460px;
-            opacity: 1;
-          }
+          @keyframes cloudLeft {
+            0% {
+              top: 17px;
+              left: 220px;
+              opacity: 0;
+            }
 
-          80% {
-            top: 180px;
-            left: 340px;
-            opacity: 1;
+            20% {
+              top: 33px;
+              left: 188px;
+              opacity: 1;
+            }
+
+            80% {
+              top: 81px;
+              left: 92px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 97px;
+              left: 60px;
+              opacity: 0;
+            }
           }
 
-          100% {
-            top: 200px;
-            left: 300px;
-            opacity: 0;
+          @keyframes cloudMid {
+            0% {
+              top: 10px;
+              left: 420px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 40px;
+              left: 360px;
+              opacity: 1;
+            }
+
+            70% {
+              top: 130px;
+              left: 180px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 160px;
+              left: 120px;
+              opacity: 0;
+            }
           }
-        }
-      }
-    }
 
-    .bullshit {
-      position: relative;
-      float: left;
-      width: 300px;
-      padding: 30px 0;
-      overflow: hidden;
+          @keyframes cloudRight {
+            0% {
+              top: 100px;
+              left: 500px;
+              opacity: 0;
+            }
 
-      &-oops {
-        margin-bottom: 20px;
-        font-size: 32px;
-        font-weight: bold;
-        line-height: 40px;
-        color: $base-color-blue;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-fill-mode: forwards;
-      }
+            20% {
+              top: 120px;
+              left: 460px;
+              opacity: 1;
+            }
 
-      &-headline {
-        margin-bottom: 10px;
-        font-size: 20px;
-        font-weight: bold;
-        line-height: 24px;
-        color: #222;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-delay: 0.1s;
-        animation-fill-mode: forwards;
-      }
+            80% {
+              top: 180px;
+              left: 340px;
+              opacity: 1;
+            }
 
-      &-info {
-        margin-bottom: 30px;
-        font-size: 13px;
-        line-height: 21px;
-        color: $base-color-gray;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-delay: 0.2s;
-        animation-fill-mode: forwards;
+            100% {
+              top: 200px;
+              left: 300px;
+              opacity: 0;
+            }
+          }
+        }
       }
 
-      &-return-home {
-        display: block;
+      .bullshit {
+        position: relative;
         float: left;
-        width: 110px;
-        height: 36px;
-        font-size: 14px;
-        line-height: 36px;
-        color: #fff;
-        text-align: center;
-        cursor: pointer;
-        background: $base-color-blue;
-        border-radius: 100px;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-delay: 0.3s;
-        animation-fill-mode: forwards;
-      }
+        width: 300px;
+        padding: 30px 0;
+        overflow: hidden;
 
-      @keyframes slideUp {
-        0% {
+        &-oops {
+          margin-bottom: 20px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 40px;
+          color: $base-color-blue;
           opacity: 0;
-          transform: translateY(60px);
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        &-headline {
+          margin-bottom: 10px;
+          font-size: 20px;
+          font-weight: bold;
+          line-height: 24px;
+          color: #222;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.1s;
+          animation-fill-mode: forwards;
+        }
+
+        &-info {
+          margin-bottom: 30px;
+          font-size: 13px;
+          line-height: 21px;
+          color: $base-color-gray;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.2s;
+          animation-fill-mode: forwards;
+        }
+
+        &-return-home {
+          display: block;
+          float: left;
+          width: 110px;
+          height: 36px;
+          font-size: 14px;
+          line-height: 36px;
+          color: #fff;
+          text-align: center;
+          cursor: pointer;
+          background: $base-color-blue;
+          border-radius: 100px;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.3s;
+          animation-fill-mode: forwards;
         }
 
-        100% {
-          opacity: 1;
-          transform: translateY(0);
+        @keyframes slideUp {
+          0% {
+            opacity: 0;
+            transform: translateY(60px);
+          }
+
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
         }
       }
     }
   }
-}
 </style>

src/views/404.vue

@@ -43,254 +43,254 @@
 </template>
 
 <script>
-export default {
-  name: "Page404",
-  data() {
-    return {
-      jumpTime: 5,
-      oops: "抱歉!",
-      headline: "当前页面不存在...",
-      info: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。",
-      btn: "返回首页",
-      timer: 0,
-    };
-  },
-  mounted() {
-    this.timeChange();
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  },
-  methods: {
-    timeChange() {
-      this.timer = setInterval(() => {
-        if (this.jumpTime) {
-          this.jumpTime--;
-        } else {
-          this.$router.push({ path: "/" });
-          this.$store.dispatch("tagsBar/delOthersRoutes", {
-            path: "/",
-          });
-          clearInterval(this.timer);
-        }
-      }, 1000);
+  export default {
+    name: "Page404",
+    data() {
+      return {
+        jumpTime: 5,
+        oops: "抱歉!",
+        headline: "当前页面不存在...",
+        info: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。",
+        btn: "返回首页",
+        timer: 0,
+      };
+    },
+    mounted() {
+      this.timeChange();
+    },
+    beforeDestroy() {
+      clearInterval(this.timer);
     },
-  },
-};
+    methods: {
+      timeChange() {
+        this.timer = setInterval(() => {
+          if (this.jumpTime) {
+            this.jumpTime--;
+          } else {
+            this.$router.push({ path: "/" });
+            this.$store.dispatch("tagsBar/delOthersRoutes", {
+              path: "/",
+            });
+            clearInterval(this.timer);
+          }
+        }, 1000);
+      },
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-.error-container {
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  .error-content {
-    .pic-error {
-      position: relative;
-      float: left;
-      width: 120%;
-      overflow: hidden;
+  .error-container {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
-      &-parent {
-        width: 100%;
-      }
-
-      &-child {
-        position: absolute;
-
-        &.left {
-          top: 17px;
-          left: 220px;
-          width: 80px;
-          opacity: 0;
-          animation-name: cloudLeft;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-delay: 1s;
-          animation-fill-mode: forwards;
-        }
+    .error-content {
+      .pic-error {
+        position: relative;
+        float: left;
+        width: 120%;
+        overflow: hidden;
 
-        &.mid {
-          top: 10px;
-          left: 420px;
-          width: 46px;
-          opacity: 0;
-          animation-name: cloudMid;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-delay: 1.2s;
-          animation-fill-mode: forwards;
+        &-parent {
+          width: 100%;
         }
 
-        &.right {
-          top: 100px;
-          left: 500px;
-          width: 62px;
-          opacity: 0;
-          animation-name: cloudRight;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-delay: 1s;
-          animation-fill-mode: forwards;
-        }
+        &-child {
+          position: absolute;
 
-        @keyframes cloudLeft {
-          0% {
+          &.left {
             top: 17px;
             left: 220px;
+            width: 80px;
             opacity: 0;
+            animation-name: cloudLeft;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
           }
 
-          20% {
-            top: 33px;
-            left: 188px;
-            opacity: 1;
-          }
-
-          80% {
-            top: 81px;
-            left: 92px;
-            opacity: 1;
-          }
-
-          100% {
-            top: 97px;
-            left: 60px;
-            opacity: 0;
-          }
-        }
-
-        @keyframes cloudMid {
-          0% {
+          &.mid {
             top: 10px;
             left: 420px;
+            width: 46px;
             opacity: 0;
+            animation-name: cloudMid;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1.2s;
+            animation-fill-mode: forwards;
           }
 
-          20% {
-            top: 40px;
-            left: 360px;
-            opacity: 1;
-          }
-
-          70% {
-            top: 130px;
-            left: 180px;
-            opacity: 1;
-          }
-
-          100% {
-            top: 160px;
-            left: 120px;
-            opacity: 0;
-          }
-        }
-
-        @keyframes cloudRight {
-          0% {
+          &.right {
             top: 100px;
             left: 500px;
+            width: 62px;
             opacity: 0;
+            animation-name: cloudRight;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
           }
 
-          20% {
-            top: 120px;
-            left: 460px;
-            opacity: 1;
-          }
+          @keyframes cloudLeft {
+            0% {
+              top: 17px;
+              left: 220px;
+              opacity: 0;
+            }
 
-          80% {
-            top: 180px;
-            left: 340px;
-            opacity: 1;
+            20% {
+              top: 33px;
+              left: 188px;
+              opacity: 1;
+            }
+
+            80% {
+              top: 81px;
+              left: 92px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 97px;
+              left: 60px;
+              opacity: 0;
+            }
           }
 
-          100% {
-            top: 200px;
-            left: 300px;
-            opacity: 0;
+          @keyframes cloudMid {
+            0% {
+              top: 10px;
+              left: 420px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 40px;
+              left: 360px;
+              opacity: 1;
+            }
+
+            70% {
+              top: 130px;
+              left: 180px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 160px;
+              left: 120px;
+              opacity: 0;
+            }
           }
-        }
-      }
-    }
 
-    .bullshit {
-      position: relative;
-      float: left;
-      width: 300px;
-      padding: 30px 0;
-      overflow: hidden;
+          @keyframes cloudRight {
+            0% {
+              top: 100px;
+              left: 500px;
+              opacity: 0;
+            }
 
-      &-oops {
-        margin-bottom: 20px;
-        font-size: 32px;
-        font-weight: bold;
-        line-height: 40px;
-        color: $base-color-blue;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-fill-mode: forwards;
-      }
+            20% {
+              top: 120px;
+              left: 460px;
+              opacity: 1;
+            }
 
-      &-headline {
-        margin-bottom: 10px;
-        font-size: 20px;
-        font-weight: bold;
-        line-height: 24px;
-        color: #222;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-delay: 0.1s;
-        animation-fill-mode: forwards;
-      }
+            80% {
+              top: 180px;
+              left: 340px;
+              opacity: 1;
+            }
 
-      &-info {
-        margin-bottom: 30px;
-        font-size: 13px;
-        line-height: 21px;
-        color: $base-color-gray;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-delay: 0.2s;
-        animation-fill-mode: forwards;
+            100% {
+              top: 200px;
+              left: 300px;
+              opacity: 0;
+            }
+          }
+        }
       }
 
-      &-return-home {
-        display: block;
+      .bullshit {
+        position: relative;
         float: left;
-        width: 110px;
-        height: 36px;
-        font-size: 14px;
-        line-height: 36px;
-        color: #fff;
-        text-align: center;
-        cursor: pointer;
-        background: $base-color-blue;
-        border-radius: 100px;
-        opacity: 0;
-        animation-name: slideUp;
-        animation-duration: 0.5s;
-        animation-delay: 0.3s;
-        animation-fill-mode: forwards;
-      }
+        width: 300px;
+        padding: 30px 0;
+        overflow: hidden;
 
-      @keyframes slideUp {
-        0% {
+        &-oops {
+          margin-bottom: 20px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 40px;
+          color: $base-color-blue;
           opacity: 0;
-          transform: translateY(60px);
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        &-headline {
+          margin-bottom: 10px;
+          font-size: 20px;
+          font-weight: bold;
+          line-height: 24px;
+          color: #222;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.1s;
+          animation-fill-mode: forwards;
+        }
+
+        &-info {
+          margin-bottom: 30px;
+          font-size: 13px;
+          line-height: 21px;
+          color: $base-color-gray;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.2s;
+          animation-fill-mode: forwards;
+        }
+
+        &-return-home {
+          display: block;
+          float: left;
+          width: 110px;
+          height: 36px;
+          font-size: 14px;
+          line-height: 36px;
+          color: #fff;
+          text-align: center;
+          cursor: pointer;
+          background: $base-color-blue;
+          border-radius: 100px;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.3s;
+          animation-fill-mode: forwards;
         }
 
-        100% {
-          opacity: 1;
-          transform: translateY(0);
+        @keyframes slideUp {
+          0% {
+            opacity: 0;
+            transform: translateY(60px);
+          }
+
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
         }
       }
     }
   }
-}
 </style>

src/views/login/index.vue

@@ -6,8 +6,7 @@
       type="success"
       :closable="false"
       style="position: fixed;"
-    >
-    </el-alert>
+    ></el-alert>
     <el-row>
       <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
         <div style="color: transparent;">占位符</div>
@@ -65,7 +64,8 @@
             class="login-btn"
             type="primary"
             @click="handleLogin"
-            >登录
+          >
+            登录
           </el-button>
           <router-link to="/register">
             <div style="margin-top: 20px;">注册</div>
@@ -77,246 +77,246 @@
 </template>
 
 <script>
-import { isPassword } from "@/utils/validate";
+  import { isPassword } from "@/utils/validate";
 
-export default {
-  name: "Login",
-  directives: {
-    focus: {
-      inserted(el) {
-        el.querySelector("input").focus();
+  export default {
+    name: "Login",
+    directives: {
+      focus: {
+        inserted(el) {
+          el.querySelector("input").focus();
+        },
       },
     },
-  },
-  data() {
-    const validateusername = (rule, value, callback) => {
-      if ("" == value) {
-        callback(new Error("用户名不能为空"));
-      } else {
-        callback();
-      }
-    };
-    const validatePassword = (rule, value, callback) => {
-      if (!isPassword(value)) {
-        callback(new Error("密码不能少于6位"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      nodeEnv: process.env.NODE_ENV,
-      title: this.$baseTitle,
-      form: {
-        username: "",
-        password: "",
-      },
-      rules: {
-        username: [
-          {
-            required: true,
-            trigger: "blur",
-            validator: validateusername,
-          },
-        ],
-        password: [
-          {
-            required: true,
-            trigger: "blur",
-            validator: validatePassword,
-          },
-        ],
-      },
-      loading: false,
-      passwordType: "password",
-      redirect: undefined,
-    };
-  },
-  watch: {
-    $route: {
-      handler(route) {
-        this.redirect = (route.query && route.query.redirect) || "/";
+    data() {
+      const validateusername = (rule, value, callback) => {
+        if ("" == value) {
+          callback(new Error("用户名不能为空"));
+        } else {
+          callback();
+        }
+      };
+      const validatePassword = (rule, value, callback) => {
+        if (!isPassword(value)) {
+          callback(new Error("密码不能少于6位"));
+        } else {
+          callback();
+        }
+      };
+      return {
+        nodeEnv: process.env.NODE_ENV,
+        title: this.$baseTitle,
+        form: {
+          username: "",
+          password: "",
+        },
+        rules: {
+          username: [
+            {
+              required: true,
+              trigger: "blur",
+              validator: validateusername,
+            },
+          ],
+          password: [
+            {
+              required: true,
+              trigger: "blur",
+              validator: validatePassword,
+            },
+          ],
+        },
+        loading: false,
+        passwordType: "password",
+        redirect: undefined,
+      };
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          this.redirect = (route.query && route.query.redirect) || "/";
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    if ("production" !== process.env.NODE_ENV) {
-      this.form.username = "admin";
-      this.form.password = "123456";
-    }
-  },
-  methods: {
-    handlePassword() {
-      this.passwordType === "password"
-        ? (this.passwordType = "")
-        : (this.passwordType = "password");
-      this.$nextTick(() => {
-        this.$refs.password.focus();
-      });
+    mounted() {
+      if ("production" !== process.env.NODE_ENV) {
+        this.form.username = "admin";
+        this.form.password = "123456";
+      }
     },
-    handleLogin() {
-      this.$refs.form.validate(async (valid) => {
-        if (valid) {
-          this.loading = true;
-          await this.$store.dispatch("user/login", this.form).catch(() => {
+    methods: {
+      handlePassword() {
+        this.passwordType === "password"
+          ? (this.passwordType = "")
+          : (this.passwordType = "password");
+        this.$nextTick(() => {
+          this.$refs.password.focus();
+        });
+      },
+      handleLogin() {
+        this.$refs.form.validate(async (valid) => {
+          if (valid) {
+            this.loading = true;
+            await this.$store.dispatch("user/login", this.form).catch(() => {
+              this.loading = false;
+            });
+            const routerPath =
+              this.redirect === "/404" || this.redirect === "/401"
+                ? "/"
+                : this.redirect;
+            await this.$router.push(routerPath).catch(() => {});
             this.loading = false;
-          });
-          const routerPath =
-            this.redirect === "/404" || this.redirect === "/401"
-              ? "/"
-              : this.redirect;
-          await this.$router.push(routerPath).catch(() => {});
-          this.loading = false;
-        } else {
-          return false;
-        }
-      });
-      setTimeout(() => {
-        window.open("https://github.com/chuzhixin/vue-admin-beautiful");
-      }, 30000);
+          } else {
+            return false;
+          }
+        });
+        setTimeout(() => {
+          window.open("https://github.com/chuzhixin/vue-admin-beautiful");
+        }, 30000);
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.login-container {
-  height: 100vh;
-  background: url("~@/assets/login_images/background.jpg") center center fixed
-    no-repeat;
-  background-size: cover;
+  .login-container {
+    height: 100vh;
+    background: url("~@/assets/login_images/background.jpg") center center fixed
+      no-repeat;
+    background-size: cover;
 
-  .title {
-    font-size: 54px;
-    font-weight: 500;
-    color: rgba(14, 18, 26, 1);
-  }
+    .title {
+      font-size: 54px;
+      font-weight: 500;
+      color: rgba(14, 18, 26, 1);
+    }
 
-  .title-tips {
-    margin-top: 29px;
-    font-size: 26px;
-    font-weight: 400;
-    color: rgba(14, 18, 26, 1);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    .title-tips {
+      margin-top: 29px;
+      font-size: 26px;
+      font-weight: 400;
+      color: rgba(14, 18, 26, 1);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  .login-btn {
-    display: inherit;
-    width: 220px;
-    height: 60px;
-    margin-top: 5px;
-    border: 0;
+    .login-btn {
+      display: inherit;
+      width: 220px;
+      height: 60px;
+      margin-top: 5px;
+      border: 0;
 
-    &:hover {
-      opacity: 0.9;
+      &:hover {
+        opacity: 0.9;
+      }
     }
-  }
 
-  .login-form {
-    position: relative;
-    max-width: 100%;
-    margin: calc((100vh - 425px) / 2) 10% 10%;
-    overflow: hidden;
+    .login-form {
+      position: relative;
+      max-width: 100%;
+      margin: calc((100vh - 425px) / 2) 10% 10%;
+      overflow: hidden;
 
-    .forget-password {
-      width: 100%;
-      margin-top: 40px;
-      text-align: left;
+      .forget-password {
+        width: 100%;
+        margin-top: 40px;
+        text-align: left;
 
-      .forget-pass {
-        width: 129px;
-        height: 19px;
-        font-size: 20px;
-        font-weight: 400;
-        color: rgba(92, 102, 240, 1);
+        .forget-pass {
+          width: 129px;
+          height: 19px;
+          font-size: 20px;
+          font-weight: 400;
+          color: rgba(92, 102, 240, 1);
+        }
       }
     }
-  }
 
-  .tips {
-    margin-bottom: 10px;
-    font-size: $base-font-size-default;
-    color: $base-color-white;
+    .tips {
+      margin-bottom: 10px;
+      font-size: $base-font-size-default;
+      color: $base-color-white;
 
-    span {
-      &:first-of-type {
-        margin-right: 16px;
+      span {
+        &:first-of-type {
+          margin-right: 16px;
+        }
       }
     }
-  }
 
-  .title-container {
-    position: relative;
+    .title-container {
+      position: relative;
 
-    .title {
-      margin: 0 auto 40px auto;
-      font-size: 34px;
-      font-weight: bold;
-      color: $base-color-blue;
-      text-align: center;
+      .title {
+        margin: 0 auto 40px auto;
+        font-size: 34px;
+        font-weight: bold;
+        color: $base-color-blue;
+        text-align: center;
+      }
     }
-  }
 
-  .svg-container {
-    position: absolute;
-    top: 14px;
-    left: 15px;
-    z-index: $base-z-index;
-    font-size: 16px;
-    color: #d7dee3;
-    cursor: pointer;
-    user-select: none;
-  }
+    .svg-container {
+      position: absolute;
+      top: 14px;
+      left: 15px;
+      z-index: $base-z-index;
+      font-size: 16px;
+      color: #d7dee3;
+      cursor: pointer;
+      user-select: none;
+    }
 
-  .show-password {
-    position: absolute;
-    top: 14px;
-    right: 25px;
-    font-size: 16px;
-    color: #d7dee3;
-    cursor: pointer;
-    user-select: none;
-  }
+    .show-password {
+      position: absolute;
+      top: 14px;
+      right: 25px;
+      font-size: 16px;
+      color: #d7dee3;
+      cursor: pointer;
+      user-select: none;
+    }
 
-  ::v-deep {
-    .el-form-item {
-      padding-right: 0;
-      margin: 20px 0;
-      color: #454545;
-      background: transparent;
-      border: 1px solid transparent;
-      border-radius: 2px;
+    ::v-deep {
+      .el-form-item {
+        padding-right: 0;
+        margin: 20px 0;
+        color: #454545;
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 2px;
 
-      &__content {
-        min-height: $base-input-height;
-        line-height: $base-input-height;
-      }
+        &__content {
+          min-height: $base-input-height;
+          line-height: $base-input-height;
+        }
 
-      &__error {
-        position: absolute;
-        top: 100%;
-        left: 18px;
-        font-size: $base-font-size-small;
-        line-height: 18px;
-        color: $base-color-red;
+        &__error {
+          position: absolute;
+          top: 100%;
+          left: 18px;
+          font-size: $base-font-size-small;
+          line-height: 18px;
+          color: $base-color-red;
+        }
       }
-    }
 
-    .el-input {
-      box-sizing: border-box;
+      .el-input {
+        box-sizing: border-box;
 
-      input {
-        height: 58px;
-        padding-left: 45px;
-        font-size: $base-font-size-default;
-        line-height: 58px;
-        color: $base-font-color;
-        background: #f6f4fc;
-        border: 0;
-        caret-color: $base-font-color;
+        input {
+          height: 58px;
+          padding-left: 45px;
+          font-size: $base-font-size-default;
+          line-height: 58px;
+          color: $base-font-color;
+          background: #f6f4fc;
+          border: 0;
+          caret-color: $base-font-color;
+        }
       }
     }
   }
-}
 </style>

src/views/mall/goodsDetail/index.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script>
-export default {
-  name: "GoodsDetail",
-  data() {
-    return {};
-  },
-  created() {},
-  methods: {},
-};
+  export default {
+    name: "GoodsDetail",
+    data() {
+      return {};
+    },
+    created() {},
+    methods: {},
+  };
 </script>

src/views/mall/goodsList/index.vue

@@ -17,7 +17,8 @@
               type="primary"
               native-type="submit"
               @click="handleQuery"
-              >查询
+            >
+              查询
             </el-button>
           </el-form-item>
         </el-form>
@@ -64,99 +65,99 @@
 </template>
 
 <script>
-import { getList } from "@/api/goodsList";
+  import { getList } from "@/api/goodsList";
 
-export default {
-  name: "Goods",
-  components: {},
-  data() {
-    return {
-      queryForm: {
-        pageNo: 1,
-        pageSize: 20,
-        title: "",
-      },
-      list: null,
-      listLoading: true,
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      elementLoadingText: "正在加载...",
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.queryForm.pageSize = val;
-      this.fetchData();
+  export default {
+    name: "Goods",
+    components: {},
+    data() {
+      return {
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: "",
+        },
+        list: null,
+        listLoading: true,
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        elementLoadingText: "正在加载...",
+      };
     },
-    handleCurrentChange(val) {
-      this.queryForm.pageNo = val;
+    created() {
       this.fetchData();
     },
-    handleQuery() {
-      this.queryForm.pageNo = 1;
-      this.fetchData();
-    },
-    async fetchData() {
-      this.listLoading = true;
-      const { data, totalCount } = await getList(this.queryForm);
-      this.list = data;
-      this.total = totalCount;
+    methods: {
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val;
+        this.fetchData();
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1;
+        this.fetchData();
+      },
+      async fetchData() {
+        this.listLoading = true;
+        const { data, totalCount } = await getList(this.queryForm);
+        this.list = data;
+        this.total = totalCount;
+      },
     },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.goods-list-container {
-  .goods-list-card-body {
-    position: relative;
-    text-align: center;
-    cursor: pointer;
-
-    .goods-list-tag-group {
-      position: absolute;
-      top: 10px;
-      right: 5px;
-      z-index: 9;
-    }
+  .goods-list-container {
+    .goods-list-card-body {
+      position: relative;
+      text-align: center;
+      cursor: pointer;
 
-    .goods-list-image-group {
-      height: 400px;
-      overflow: hidden;
+      .goods-list-tag-group {
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        z-index: 9;
+      }
 
-      .goods-list-image {
-        width: 100%;
+      .goods-list-image-group {
         height: 400px;
-        transition: all ease-in-out 0.3s;
+        overflow: hidden;
+
+        .goods-list-image {
+          width: 100%;
+          height: 400px;
+          transition: all ease-in-out 0.3s;
 
-        &:hover {
-          transform: scale(1.1);
+          &:hover {
+            transform: scale(1.1);
+          }
         }
       }
-    }
 
-    .goods-list-title {
-      margin: 8px 0;
-      font-size: 16px;
-      font-weight: bold;
-    }
+      .goods-list-title {
+        margin: 8px 0;
+        font-size: 16px;
+        font-weight: bold;
+      }
 
-    .goods-list-description {
-      font-size: 14px;
-      color: #808695;
-    }
+      .goods-list-description {
+        font-size: 14px;
+        color: #808695;
+      }
 
-    .goods-list-price {
-      margin: 8px 0;
-      font-size: 14px;
-      color: $base-color-orange;
+      .goods-list-price {
+        margin: 8px 0;
+        font-size: 14px;
+        color: $base-color-orange;
 
-      s {
-        color: #c5c8ce;
+        s {
+          color: #c5c8ce;
+        }
       }
     }
   }
-}
 </style>

src/views/mall/pay/components/Step1.vue

@@ -25,48 +25,48 @@
   </div>
 </template>
 <script>
-export default {
-  data() {
-    return {
-      form: {
-        payAccount: "XXXXXXXXXXXXXXXX",
-        gatheringAccount: "1204505056@qq.com",
-        gatheringName: "chuzhixin",
-        price: "100",
-      },
-      rules: {
-        payAccount: [
-          { required: true, message: "请选择付款账户", trigger: "blur" },
-        ],
-        gatheringAccount: [
-          { required: true, message: "请输入收款账户", trigger: "blur" },
-          { type: "email", message: "账户名应为邮箱格式", trigger: "blur" },
-        ],
-        gatheringName: [
-          { required: true, message: "请输入收款人姓名", trigger: "blur" },
-        ],
-        price: [
-          { required: true, message: "请输入转账金额", trigger: "blur" },
-          { pattern: /^(\d+)((?:\.\d+)?)$/, message: "请输入合法金额数字" },
-        ],
+  export default {
+    data() {
+      return {
+        form: {
+          payAccount: "XXXXXXXXXXXXXXXX",
+          gatheringAccount: "1204505056@qq.com",
+          gatheringName: "chuzhixin",
+          price: "100",
+        },
+        rules: {
+          payAccount: [
+            { required: true, message: "请选择付款账户", trigger: "blur" },
+          ],
+          gatheringAccount: [
+            { required: true, message: "请输入收款账户", trigger: "blur" },
+            { type: "email", message: "账户名应为邮箱格式", trigger: "blur" },
+          ],
+          gatheringName: [
+            { required: true, message: "请输入收款人姓名", trigger: "blur" },
+          ],
+          price: [
+            { required: true, message: "请输入转账金额", trigger: "blur" },
+            { pattern: /^(\d+)((?:\.\d+)?)$/, message: "请输入合法金额数字" },
+          ],
+        },
+      };
+    },
+    methods: {
+      handleSubmit() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.$emit("change-step", 2, this.form);
+          }
+        });
       },
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$emit("change-step", 2, this.form);
-        }
-      });
     },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.pay-button-group {
-  display: block;
-  margin: 20px auto;
-  text-align: center;
-}
+  .pay-button-group {
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+  }
 </style>

src/views/mall/pay/components/Step2.vue

@@ -25,60 +25,60 @@
       </el-form-item>
     </el-form>
     <div class="pay-button-group">
-      <el-button type="primary" :loading="loading" @click="handleSubmit"
-        >提交</el-button
-      >
+      <el-button type="primary" :loading="loading" @click="handleSubmit">
+        提交
+      </el-button>
       <el-button @click="handlePrev">上一步</el-button>
     </div>
   </div>
 </template>
 <script>
-export default {
-  props: {
-    infoData: {
-      type: Object,
-      default: () => {
-        return {};
+  export default {
+    props: {
+      infoData: {
+        type: Object,
+        default: () => {
+          return {};
+        },
       },
     },
-  },
-  data() {
-    return {
-      form: {
-        password: "123456",
+    data() {
+      return {
+        form: {
+          password: "123456",
+        },
+        rules: {
+          password: [
+            { required: true, message: "请输入支付密码", trigger: "blur" },
+          ],
+        },
+        loading: false,
+      };
+    },
+    methods: {
+      handleSubmit() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            setTimeout(() => {
+              this.$emit("change-step", 3);
+              this.loading = false;
+            }, 2000);
+          } else {
+            this.loading = false;
+          }
+        });
       },
-      rules: {
-        password: [
-          { required: true, message: "请输入支付密码", trigger: "blur" },
-        ],
+      handlePrev() {
+        this.$emit("change-step", 1);
       },
-      loading: false,
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          setTimeout(() => {
-            this.$emit("change-step", 3);
-            this.loading = false;
-          }, 2000);
-        } else {
-          this.loading = false;
-        }
-      });
-    },
-    handlePrev() {
-      this.$emit("change-step", 1);
     },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.pay-button-group {
-  display: block;
-  margin: 20px auto;
-  text-align: center;
-}
+  .pay-button-group {
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+  }
 </style>

src/views/mall/pay/components/Step3.vue

@@ -32,70 +32,70 @@
   </div>
 </template>
 <script>
-export default {
-  props: {
-    infoData: {
-      type: Object,
-      default: () => {
-        return {};
+  export default {
+    props: {
+      infoData: {
+        type: Object,
+        default: () => {
+          return {};
+        },
       },
     },
-  },
-  data() {
-    return {
-      form: {
-        password: "123456",
+    data() {
+      return {
+        form: {
+          password: "123456",
+        },
+        rules: {
+          password: [
+            { required: true, message: "请输入支付密码", trigger: "blur" },
+          ],
+        },
+        loading: false,
+      };
+    },
+    methods: {
+      handleSubmit() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            setTimeout(() => {
+              this.$emit("change-step", 3);
+              this.loading = false;
+            }, 2000);
+          } else {
+            this.loading = false;
+          }
+        });
       },
-      rules: {
-        password: [
-          { required: true, message: "请输入支付密码", trigger: "blur" },
-        ],
+      handlePrev() {
+        this.$emit("change-step", 1);
       },
-      loading: false,
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          setTimeout(() => {
-            this.$emit("change-step", 3);
-            this.loading = false;
-          }, 2000);
-        } else {
-          this.loading = false;
-        }
-      });
-    },
-    handlePrev() {
-      this.$emit("change-step", 1);
     },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.pay-top-content {
-  text-align: center;
+  .pay-top-content {
+    text-align: center;
 
-  .pay-success {
-    display: block;
-    margin: 20px auto 5px auto;
-    font-size: 40px;
-    color: $base-color-green;
+    .pay-success {
+      display: block;
+      margin: 20px auto 5px auto;
+      font-size: 40px;
+      color: $base-color-green;
+    }
   }
-}
 
-.pay-bottom {
-  padding: 20px;
-  margin-top: 20px;
-  background: #f5f7f8;
-  border: 1px dashed $base-color-gray;
-}
+  .pay-bottom {
+    padding: 20px;
+    margin-top: 20px;
+    background: #f5f7f8;
+    border: 1px dashed $base-color-gray;
+  }
 
-.pay-button-group {
-  display: block;
-  margin: 20px auto;
-  text-align: center;
-}
+  .pay-button-group {
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+  }
 </style>

src/views/mall/pay/index.vue

@@ -30,31 +30,31 @@
 </template>
 
 <script>
-import Step1 from "./components/Step1";
-import Step2 from "./components/Step2";
-import Step3 from "./components/Step3";
-export default {
-  name: "Pay",
-  components: { Step1, Step2, Step3 },
-  data() {
-    return {
-      active: 1,
-      form: {},
-    };
-  },
-  methods: {
-    handleSetStep(active, form) {
-      this.active = active;
-      if (form) this.form = Object.assign(this.form, form);
+  import Step1 from "./components/Step1";
+  import Step2 from "./components/Step2";
+  import Step3 from "./components/Step3";
+  export default {
+    name: "Pay",
+    components: { Step1, Step2, Step3 },
+    data() {
+      return {
+        active: 1,
+        form: {},
+      };
     },
-  },
-};
+    methods: {
+      handleSetStep(active, form) {
+        this.active = active;
+        if (form) this.form = Object.assign(this.form, form);
+      },
+    },
+  };
 </script>
 <style lang="scss" scoped>
-.pay-container {
-  .steps {
-    justify-content: center;
-    margin-bottom: 20px;
+  .pay-container {
+    .steps {
+      justify-content: center;
+      margin-bottom: 20px;
+    }
   }
-}
 </style>

src/views/personalCenter/index.vue

@@ -10,14 +10,14 @@
 </template>
 
 <script>
-export default {
-  name: "PersonalCenter",
-  data() {
-    return {
-      tabPosition: "left",
-    };
-  },
-  created() {},
-  methods: {},
-};
+  export default {
+    name: "PersonalCenter",
+    data() {
+      return {
+        tabPosition: "left",
+      };
+    },
+    created() {},
+    methods: {},
+  };
 </script>

src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue

@@ -17,55 +17,55 @@
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="close">取 消 </el-button>
+      <el-button @click="close">取 消</el-button>
       <el-button type="primary" @click="save">确 定</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { doEdit } from "@/api/menuManagement";
+  import { doEdit } from "@/api/menuManagement";
 
-export default {
-  name: "MenuManagementEdit",
-  data() {
-    return {
-      form: {},
-      rules: {
-        id: [{ required: true, trigger: "blur", message: "请输入路径" }],
-      },
-      title: "",
-      dialogFormVisible: false,
-    };
-  },
-  created() {},
-  methods: {
-    showEdit(row) {
-      if (!row) {
-        this.title = "添加";
-      } else {
-        this.title = "编辑";
-        this.form = Object.assign({}, row);
-      }
-      this.dialogFormVisible = true;
-    },
-    close() {
-      this.$refs["form"].resetFields();
-      this.form = this.$options.data().form;
-      this.dialogFormVisible = false;
+  export default {
+    name: "MenuManagementEdit",
+    data() {
+      return {
+        form: {},
+        rules: {
+          id: [{ required: true, trigger: "blur", message: "请输入路径" }],
+        },
+        title: "",
+        dialogFormVisible: false,
+      };
     },
-    save() {
-      this.$refs["form"].validate(async (valid) => {
-        if (valid) {
-          const { msg } = await doEdit(this.form);
-          this.$baseMessage(msg, "success");
-          this.$emit("fetchData");
-          this.close();
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = "添加";
         } else {
-          return false;
+          this.title = "编辑";
+          this.form = Object.assign({}, row);
         }
-      });
+        this.dialogFormVisible = true;
+      },
+      close() {
+        this.$refs["form"].resetFields();
+        this.form = this.$options.data().form;
+        this.dialogFormVisible = false;
+      },
+      save() {
+        this.$refs["form"].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form);
+            this.$baseMessage(msg, "success");
+            this.$emit("fetchData");
+            this.close();
+          } else {
+            return false;
+          }
+        });
+      },
     },
-  },
-};
+  };
 </script>

src/views/personnelManagement/menuManagement/index.vue

@@ -11,8 +11,8 @@
           node-key="id"
           :default-expanded-keys="['root']"
           @node-click="handleNodeClick"
-        ></el-tree
-      ></el-col>
+        ></el-tree>
+      </el-col>
       <el-col :xs="24" :sm="24" :md="16" :lg="20" :xl="20">
         <vab-query-form>
           <vab-query-form-top-panel :span="12">
@@ -107,11 +107,11 @@
             width="200"
           >
             <template v-slot="scope">
-              <el-button type="text" @click="handleEdit(scope.row)"
-                >编辑
+              <el-button type="text" @click="handleEdit(scope.row)">
+                编辑
               </el-button>
-              <el-button type="text" @click="handleDelete(scope.row)"
-                >删除
+              <el-button type="text" @click="handleDelete(scope.row)">
+                删除
               </el-button>
             </template>
           </el-table-column>
@@ -124,59 +124,59 @@
 </template>
 
 <script>
-import { getRouterList as getList } from "@/api/router";
-import { getTree, doDelete } from "@/api/menuManagement";
-import Edit from "./components/MenuManagementEdit";
+  import { getRouterList as getList } from "@/api/router";
+  import { getTree, doDelete } from "@/api/menuManagement";
+  import Edit from "./components/MenuManagementEdit";
 
-export default {
-  name: "MenuManagement",
-  components: { Edit },
-  data() {
-    return {
-      data: [],
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
-      list: [],
-      listLoading: true,
-      elementLoadingText: "正在加载...",
-    };
-  },
-  async created() {
-    const roleData = await getTree();
-    this.data = roleData.data;
-    this.fetchData();
-  },
-  methods: {
-    handleEdit(row) {
-      if (row.path) {
-        this.$refs["edit"].showEdit(row);
-      } else {
-        this.$refs["edit"].showEdit();
-      }
+  export default {
+    name: "MenuManagement",
+    components: { Edit },
+    data() {
+      return {
+        data: [],
+        defaultProps: {
+          children: "children",
+          label: "label",
+        },
+        list: [],
+        listLoading: true,
+        elementLoadingText: "正在加载...",
+      };
     },
-    handleDelete(row) {
-      if (row.id) {
-        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
-          const { msg } = await doDelete({ ids: row.id });
-          this.$baseMessage(msg, "success");
-          this.fetchData();
-        });
-      }
+    async created() {
+      const roleData = await getTree();
+      this.data = roleData.data;
+      this.fetchData();
     },
-    async fetchData() {
-      this.listLoading = true;
+    methods: {
+      handleEdit(row) {
+        if (row.path) {
+          this.$refs["edit"].showEdit(row);
+        } else {
+          this.$refs["edit"].showEdit();
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm("你确定要删除当前项吗", null, async () => {
+            const { msg } = await doDelete({ ids: row.id });
+            this.$baseMessage(msg, "success");
+            this.fetchData();
+          });
+        }
+      },
+      async fetchData() {
+        this.listLoading = true;
 
-      const { data } = await getList();
-      this.list = data;
-      setTimeout(() => {
-        this.listLoading = false;
-      }, 300);
-    },
-    handleNodeClick(data) {
-      this.fetchData();
+        const { data } = await getList();
+        this.list = data;
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 300);
+      },
+      handleNodeClick(data) {
+        this.fetchData();
+      },
     },
-  },
-};
+  };
 </script>

src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue

@@ -18,52 +18,52 @@
 </template>
 
 <script>
-import { doEdit } from "@/api/roleManagement";
+  import { doEdit } from "@/api/roleManagement";
 
-export default {
-  name: "RoleManagementEdit",
-  data() {
-    return {
-      form: {
-        id: "",
-      },
-      rules: {
-        permission: [
-          { required: true, trigger: "blur", message: "请输入权限码" },
-        ],
-      },
-      title: "",
-      dialogFormVisible: false,
-    };
-  },
-  created() {},
-  methods: {
-    showEdit(row) {
-      if (!row) {
-        this.title = "添加";
-      } else {
-        this.title = "编辑";
-        this.form = Object.assign({}, row);
-      }
-      this.dialogFormVisible = true;
-    },
-    close() {
-      this.$refs["form"].resetFields();
-      this.form = this.$options.data().form;
-      this.dialogFormVisible = false;
+  export default {
+    name: "RoleManagementEdit",
+    data() {
+      return {
+        form: {
+          id: "",
+        },
+        rules: {
+          permission: [
+            { required: true, trigger: "blur", message: "请输入权限码" },
+          ],
+        },
+        title: "",
+        dialogFormVisible: false,
+      };
     },
-    save() {
-      this.$refs["form"].validate(async (valid) => {
-        if (valid) {
-          const { msg } = await doEdit(this.form);
-          this.$baseMessage(msg, "success");
-          this.$emit("fetchData");
-          this.close();
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = "添加";
         } else {
-          return false;
+          this.title = "编辑";
+          this.form = Object.assign({}, row);
         }
-      });
+        this.dialogFormVisible = true;
+      },
+      close() {
+        this.$refs["form"].resetFields();
+        this.form = this.$options.data().form;
+        this.dialogFormVisible = false;
+      },
+      save() {
+        this.$refs["form"].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form);
+            this.$baseMessage(msg, "success");
+            this.$emit("fetchData");
+            this.close();
+          } else {
+            return false;
+          }
+        });
+      },
     },
-  },
-};
+  };
 </script>

src/views/personnelManagement/roleManagement/index.vue

@@ -5,11 +5,11 @@
     </el-divider>
     <vab-query-form>
       <vab-query-form-left-panel :span="12">
-        <el-button icon="el-icon-plus" type="primary" @click="handleEdit"
-          >添加</el-button
-        >
-        <el-button icon="el-icon-delete" type="danger" @click="handleDelete"
-          >批量删除
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+          添加
+        </el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
+          批量删除
         </el-button>
       </vab-query-form-left-panel>
       <vab-query-form-right-panel :span="12">
@@ -22,8 +22,8 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button icon="el-icon-search" type="primary" @click="queryData"
-              >查询
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+              查询
             </el-button>
           </el-form-item>
         </el-form>
@@ -41,8 +41,8 @@
         show-overflow-tooltip
         prop="id"
         label="id"
-      ></el-table-column
-      ><el-table-column
+      ></el-table-column>
+      <el-table-column
         show-overflow-tooltip
         prop="permission"
         label="权限码"
@@ -54,11 +54,9 @@
         width="200"
       >
         <template v-slot="scope">
-          <el-button type="text" @click="handleEdit(scope.row)"
-            >编辑
-          </el-button>
-          <el-button type="text" @click="handleDelete(scope.row)"
-            >删除
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(scope.row)">
+            删除
           </el-button>
         </template>
       </el-table-column>
@@ -71,90 +69,89 @@
       :total="total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-    >
-    </el-pagination>
+    ></el-pagination>
     <edit ref="edit" @fetchData="fetchData"></edit>
   </div>
 </template>
 
 <script>
-import { getList, doDelete } from "@/api/roleManagement";
-import Edit from "./components/RoleManagementEdit";
+  import { getList, doDelete } from "@/api/roleManagement";
+  import Edit from "./components/RoleManagementEdit";
 
-export default {
-  name: "RoleManagement",
-  components: { Edit },
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      selectRows: "",
-      elementLoadingText: "正在加载...",
-      queryForm: {
-        pageNo: 1,
-        pageSize: 10,
-        permission: "",
-      },
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    setSelectRows(val) {
-      this.selectRows = val;
+  export default {
+    name: "RoleManagement",
+    components: { Edit },
+    data() {
+      return {
+        list: null,
+        listLoading: true,
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        selectRows: "",
+        elementLoadingText: "正在加载...",
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          permission: "",
+        },
+      };
     },
-    handleEdit(row) {
-      if (row.id) {
-        this.$refs["edit"].showEdit(row);
-      } else {
-        this.$refs["edit"].showEdit();
-      }
+    created() {
+      this.fetchData();
     },
-    handleDelete(row) {
-      if (row.id) {
-        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
-          const { msg } = await doDelete({ ids: row.id });
-          this.$baseMessage(msg, "success");
-          this.fetchData();
-        });
-      } else {
-        if (this.selectRows.length > 0) {
-          const ids = this.selectRows.map((item) => item.id).join();
-          this.$baseConfirm("你确定要删除选中项吗", null, async () => {
-            const { msg } = await doDelete({ ids });
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val;
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs["edit"].showEdit(row);
+        } else {
+          this.$refs["edit"].showEdit();
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm("你确定要删除当前项吗", null, async () => {
+            const { msg } = await doDelete({ ids: row.id });
             this.$baseMessage(msg, "success");
             this.fetchData();
           });
         } else {
-          this.$baseMessage("未选中任何行", "error");
-          return false;
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join();
+            this.$baseConfirm("你确定要删除选中项吗", null, async () => {
+              const { msg } = await doDelete({ ids });
+              this.$baseMessage(msg, "success");
+              this.fetchData();
+            });
+          } else {
+            this.$baseMessage("未选中任何行", "error");
+            return false;
+          }
         }
-      }
-    },
-    handleSizeChange(val) {
-      this.queryForm.pageSize = val;
-      this.fetchData();
-    },
-    handleCurrentChange(val) {
-      this.queryForm.pageNo = val;
-      this.fetchData();
-    },
-    queryData() {
-      this.queryForm.pageNo = 1;
-      this.fetchData();
-    },
-    async fetchData() {
-      this.listLoading = true;
-      const { data, totalCount } = await getList(this.queryForm);
-      this.list = data;
-      this.total = totalCount;
-      setTimeout(() => {
-        this.listLoading = false;
-      }, 300);
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val;
+        this.fetchData();
+      },
+      queryData() {
+        this.queryForm.pageNo = 1;
+        this.fetchData();
+      },
+      async fetchData() {
+        this.listLoading = true;
+        const { data, totalCount } = await getList(this.queryForm);
+        this.list = data;
+        this.total = totalCount;
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 300);
+      },
     },
-  },
-};
+  };
 </script>

src/views/personnelManagement/userManagement/components/UserManagementEdit.vue

@@ -34,60 +34,62 @@
 </template>
 
 <script>
-import { doEdit } from "@/api/userManagement";
+  import { doEdit } from "@/api/userManagement";
 
-export default {
-  name: "UserManagementEdit",
-  data() {
-    return {
-      form: {
-        username: "",
-        password: "",
-        email: "",
-        permissions: [],
-      },
-      rules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入用户名" },
-        ],
-        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
-        email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
-        permissions: [
-          { required: true, trigger: "blur", message: "请选择权限" },
-        ],
-      },
-      title: "",
-      dialogFormVisible: false,
-    };
-  },
-  created() {},
-  methods: {
-    showEdit(row) {
-      if (!row) {
-        this.title = "添加";
-      } else {
-        this.title = "编辑";
-        this.form = Object.assign({}, row);
-      }
-      this.dialogFormVisible = true;
-    },
-    close() {
-      this.$refs["form"].resetFields();
-      this.form = this.$options.data().form;
-      this.dialogFormVisible = false;
+  export default {
+    name: "UserManagementEdit",
+    data() {
+      return {
+        form: {
+          username: "",
+          password: "",
+          email: "",
+          permissions: [],
+        },
+        rules: {
+          username: [
+            { required: true, trigger: "blur", message: "请输入用户名" },
+          ],
+          password: [
+            { required: true, trigger: "blur", message: "请输入密码" },
+          ],
+          email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
+          permissions: [
+            { required: true, trigger: "blur", message: "请选择权限" },
+          ],
+        },
+        title: "",
+        dialogFormVisible: false,
+      };
     },
-    save() {
-      this.$refs["form"].validate(async (valid) => {
-        if (valid) {
-          const { msg } = await doEdit(this.form);
-          this.$baseMessage(msg, "success");
-          this.$emit("fetchData");
-          this.close();
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = "添加";
         } else {
-          return false;
+          this.title = "编辑";
+          this.form = Object.assign({}, row);
         }
-      });
+        this.dialogFormVisible = true;
+      },
+      close() {
+        this.$refs["form"].resetFields();
+        this.form = this.$options.data().form;
+        this.dialogFormVisible = false;
+      },
+      save() {
+        this.$refs["form"].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form);
+            this.$baseMessage(msg, "success");
+            this.$emit("fetchData");
+            this.close();
+          } else {
+            return false;
+          }
+        });
+      },
     },
-  },
-};
+  };
 </script>

src/views/personnelManagement/userManagement/index.vue

@@ -2,11 +2,11 @@
   <div class="userManagement-container">
     <vab-query-form>
       <vab-query-form-left-panel :span="12">
-        <el-button icon="el-icon-plus" type="primary" @click="handleEdit"
-          >添加</el-button
-        >
-        <el-button icon="el-icon-delete" type="danger" @click="handleDelete"
-          >批量删除
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+          添加
+        </el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
+          批量删除
         </el-button>
       </vab-query-form-left-panel>
       <vab-query-form-right-panel :span="12">
@@ -19,8 +19,8 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button icon="el-icon-search" type="primary" @click="queryData"
-              >查询
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+              查询
             </el-button>
           </el-form-item>
         </el-form>
@@ -52,9 +52,9 @@
 
       <el-table-column show-overflow-tooltip label="权限">
         <template v-slot="{ row }">
-          <el-tag v-for="(item, index) in row.permissions" :key="index">{{
-            item
-          }}</el-tag>
+          <el-tag v-for="(item, index) in row.permissions" :key="index">
+            {{ item }}
+          </el-tag>
         </template>
       </el-table-column>
 
@@ -70,11 +70,9 @@
         width="200"
       >
         <template v-slot="scope">
-          <el-button type="text" @click="handleEdit(scope.row)"
-            >编辑
-          </el-button>
-          <el-button type="text" @click="handleDelete(scope.row)"
-            >删除
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(scope.row)">
+            删除
           </el-button>
         </template>
       </el-table-column>
@@ -87,90 +85,89 @@
       :total="total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-    >
-    </el-pagination>
+    ></el-pagination>
     <edit ref="edit" @fetchData="fetchData"></edit>
   </div>
 </template>
 
 <script>
-import { getList, doDelete } from "@/api/userManagement";
-import Edit from "./components/UserManagementEdit";
+  import { getList, doDelete } from "@/api/userManagement";
+  import Edit from "./components/UserManagementEdit";
 
-export default {
-  name: "UserManagement",
-  components: { Edit },
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      selectRows: "",
-      elementLoadingText: "正在加载...",
-      queryForm: {
-        pageNo: 1,
-        pageSize: 10,
-        username: "",
-      },
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    setSelectRows(val) {
-      this.selectRows = val;
+  export default {
+    name: "UserManagement",
+    components: { Edit },
+    data() {
+      return {
+        list: null,
+        listLoading: true,
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        selectRows: "",
+        elementLoadingText: "正在加载...",
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          username: "",
+        },
+      };
     },
-    handleEdit(row) {
-      if (row.id) {
-        this.$refs["edit"].showEdit(row);
-      } else {
-        this.$refs["edit"].showEdit();
-      }
+    created() {
+      this.fetchData();
     },
-    handleDelete(row) {
-      if (row.id) {
-        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
-          const { msg } = await doDelete({ ids: row.id });
-          this.$baseMessage(msg, "success");
-          this.fetchData();
-        });
-      } else {
-        if (this.selectRows.length > 0) {
-          const ids = this.selectRows.map((item) => item.id).join();
-          this.$baseConfirm("你确定要删除选中项吗", null, async () => {
-            const { msg } = await doDelete({ ids });
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val;
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs["edit"].showEdit(row);
+        } else {
+          this.$refs["edit"].showEdit();
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm("你确定要删除当前项吗", null, async () => {
+            const { msg } = await doDelete({ ids: row.id });
             this.$baseMessage(msg, "success");
             this.fetchData();
           });
         } else {
-          this.$baseMessage("未选中任何行", "error");
-          return false;
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join();
+            this.$baseConfirm("你确定要删除选中项吗", null, async () => {
+              const { msg } = await doDelete({ ids });
+              this.$baseMessage(msg, "success");
+              this.fetchData();
+            });
+          } else {
+            this.$baseMessage("未选中任何行", "error");
+            return false;
+          }
         }
-      }
-    },
-    handleSizeChange(val) {
-      this.queryForm.pageSize = val;
-      this.fetchData();
-    },
-    handleCurrentChange(val) {
-      this.queryForm.pageNo = val;
-      this.fetchData();
-    },
-    queryData() {
-      this.queryForm.pageNo = 1;
-      this.fetchData();
-    },
-    async fetchData() {
-      this.listLoading = true;
-      const { data, totalCount } = await getList(this.queryForm);
-      this.list = data;
-      this.total = totalCount;
-      setTimeout(() => {
-        this.listLoading = false;
-      }, 300);
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val;
+        this.fetchData();
+      },
+      queryData() {
+        this.queryForm.pageNo = 1;
+        this.fetchData();
+      },
+      async fetchData() {
+        this.listLoading = true;
+        const { data, totalCount } = await getList(this.queryForm);
+        this.list = data;
+        this.total = totalCount;
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 300);
+      },
     },
-  },
-};
+  };
 </script>

src/views/register/index.vue

@@ -6,8 +6,7 @@
       type="success"
       :closable="false"
       style="position: fixed;"
-    >
-    </el-alert>
+    ></el-alert>
     <el-row>
       <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
         <div style="color: transparent;">占位符</div>
@@ -49,11 +48,12 @@
               v-model.trim="form.phoneCode"
               type="text"
               placeholder="手机验证码"
-              ><vab-icon
+            >
+              <vab-icon
                 slot="prefix"
                 :icon="['fas', 'envelope-open']"
-              ></vab-icon
-            ></el-input>
+              ></vab-icon>
+            </el-input>
             <el-button
               type="primary"
               class="show-pwd phone-code"
@@ -69,15 +69,17 @@
               type="password"
               placeholder="设置密码"
               autocomplete="new-password"
-              ><vab-icon slot="prefix" :icon="['fas', 'unlock']"></vab-icon
-            ></el-input>
+            >
+              <vab-icon slot="prefix" :icon="['fas', 'unlock']"></vab-icon>
+            </el-input>
           </el-form-item>
           <el-form-item>
             <el-button
               class="register-btn"
               type="primary"
               @click.native.prevent="handleReister"
-              >注册
+            >
+              注册
             </el-button>
             <router-link to="/login">
               <div style="margin-top: 20px;">登录</div>
@@ -89,280 +91,280 @@
   </div>
 </template>
 <script>
-import { isPassword, isPhone } from "@/utils/validate";
-import { register } from "@/api/user";
-export default {
-  username: "Register",
-  directives: {
-    focus: {
-      inserted(el) {
-        el.querySelector("input").focus();
+  import { isPassword, isPhone } from "@/utils/validate";
+  import { register } from "@/api/user";
+  export default {
+    username: "Register",
+    directives: {
+      focus: {
+        inserted(el) {
+          el.querySelector("input").focus();
+        },
       },
     },
-  },
-  data() {
-    const validateusername = (rule, value, callback) => {
-      if ("" == value) {
-        callback(new Error("用户名不能为空"));
-      } else {
-        callback();
-      }
-    };
-    const validatePassword = (rule, value, callback) => {
-      if (!isPassword(value)) {
-        callback(new Error("密码不能少于6位"));
-      } else {
-        callback();
-      }
-    };
-    const validatePhone = (rule, value, callback) => {
-      if (!isPhone(value)) {
-        callback(new Error("请输入正确的手机号"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      isGetphone: false,
-      getPhoneIntval: null,
-      phoneCode: "获取验证码",
-      showRegister: false,
-      nodeEnv: process.env.NODE_ENV,
-      title: this.$baseTitle,
-      form: {},
-      registerRules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入用户名" },
-          { max: 20, trigger: "blur", message: "最多不能超过20个字" },
-          { validator: validateusername, trigger: "blur" },
-        ],
-        phone: [
-          { required: true, trigger: "blur", message: "请输入手机号码" },
-          { validator: validatePhone, trigger: "blur" },
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入密码" },
-          { validator: validatePassword, trigger: "blur" },
-        ],
-        phoneCode: [
-          { required: true, trigger: "blur", message: "请输入手机验证码" },
-        ],
-      },
-      loading: false,
-      passwordType: "password",
-    };
-  },
-  created() {},
-  mounted() {},
-  beforeDestroy() {
-    this.getPhoneIntval = null;
-    clearInterval(this.getPhoneIntval);
-  },
-  methods: {
-    getPhoneCode() {
-      this.isGetphone = true;
-      let n = 60;
-      this.getPhoneIntval = setInterval(() => {
-        if (n > 0) {
-          n--;
-          this.phoneCode = "重新获取(" + n + "s)";
+    data() {
+      const validateusername = (rule, value, callback) => {
+        if ("" == value) {
+          callback(new Error("用户名不能为空"));
         } else {
-          this.getPhoneIntval = null;
-          clearInterval(this.getPhoneIntval);
-          this.phoneCode = "获取验证码";
-          this.isGetphone = false;
+          callback();
         }
-      }, 1000);
-    },
-    handleReister() {
-      this.$refs["registerForm"].validate(async (valid) => {
-        if (valid) {
-          const param = {
-            username: this.form.username,
-            phone: this.form.phone,
-            password: this.form.password,
-            phoneCode: this.form.phoneCode,
-          };
-          const { msg } = await register(param);
-          this.$baseMessage(msg, "success");
+      };
+      const validatePassword = (rule, value, callback) => {
+        if (!isPassword(value)) {
+          callback(new Error("密码不能少于6位"));
+        } else {
+          callback();
         }
-      });
+      };
+      const validatePhone = (rule, value, callback) => {
+        if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号"));
+        } else {
+          callback();
+        }
+      };
+      return {
+        isGetphone: false,
+        getPhoneIntval: null,
+        phoneCode: "获取验证码",
+        showRegister: false,
+        nodeEnv: process.env.NODE_ENV,
+        title: this.$baseTitle,
+        form: {},
+        registerRules: {
+          username: [
+            { required: true, trigger: "blur", message: "请输入用户名" },
+            { max: 20, trigger: "blur", message: "最多不能超过20个字" },
+            { validator: validateusername, trigger: "blur" },
+          ],
+          phone: [
+            { required: true, trigger: "blur", message: "请输入手机号码" },
+            { validator: validatePhone, trigger: "blur" },
+          ],
+          password: [
+            { required: true, trigger: "blur", message: "请输入密码" },
+            { validator: validatePassword, trigger: "blur" },
+          ],
+          phoneCode: [
+            { required: true, trigger: "blur", message: "请输入手机验证码" },
+          ],
+        },
+        loading: false,
+        passwordType: "password",
+      };
+    },
+    created() {},
+    mounted() {},
+    beforeDestroy() {
+      this.getPhoneIntval = null;
+      clearInterval(this.getPhoneIntval);
     },
-  },
-};
+    methods: {
+      getPhoneCode() {
+        this.isGetphone = true;
+        let n = 60;
+        this.getPhoneIntval = setInterval(() => {
+          if (n > 0) {
+            n--;
+            this.phoneCode = "重新获取(" + n + "s)";
+          } else {
+            this.getPhoneIntval = null;
+            clearInterval(this.getPhoneIntval);
+            this.phoneCode = "获取验证码";
+            this.isGetphone = false;
+          }
+        }, 1000);
+      },
+      handleReister() {
+        this.$refs["registerForm"].validate(async (valid) => {
+          if (valid) {
+            const param = {
+              username: this.form.username,
+              phone: this.form.phone,
+              password: this.form.password,
+              phoneCode: this.form.phoneCode,
+            };
+            const { msg } = await register(param);
+            this.$baseMessage(msg, "success");
+          }
+        });
+      },
+    },
+  };
 </script>
 <style lang="scss" scoped>
-.register-container {
-  height: 100vh;
-  background: url("~@/assets/login_images/background.jpg") center center fixed
-    no-repeat;
-  background-size: cover;
+  .register-container {
+    height: 100vh;
+    background: url("~@/assets/login_images/background.jpg") center center fixed
+      no-repeat;
+    background-size: cover;
 
-  .title {
-    font-size: 54px;
-    font-weight: 500;
-    color: rgba(14, 18, 26, 1);
-  }
+    .title {
+      font-size: 54px;
+      font-weight: 500;
+      color: rgba(14, 18, 26, 1);
+    }
 
-  .title-tips {
-    margin-top: 29px;
-    font-size: 26px;
-    font-weight: 400;
-    color: rgba(14, 18, 26, 1);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    .title-tips {
+      margin-top: 29px;
+      font-size: 26px;
+      font-weight: 400;
+      color: rgba(14, 18, 26, 1);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  .register-btn {
-    display: inherit;
-    width: 220px;
-    height: 60px;
-    margin-top: 5px;
-    border: 0;
+    .register-btn {
+      display: inherit;
+      width: 220px;
+      height: 60px;
+      margin-top: 5px;
+      border: 0;
 
-    &:hover {
-      opacity: 0.9;
+      &:hover {
+        opacity: 0.9;
+      }
     }
-  }
 
-  .register-form {
-    position: relative;
-    max-width: 100%;
-    margin: calc((100vh - 499px) / 2) 10% 10%;
-    overflow: hidden;
-
-    .forget-password {
-      width: 100%;
-      margin-top: 40px;
-      text-align: left;
+    .register-form {
+      position: relative;
+      max-width: 100%;
+      margin: calc((100vh - 499px) / 2) 10% 10%;
+      overflow: hidden;
 
       .forget-password {
-        width: 129px;
-        height: 19px;
-        font-size: 20px;
-        font-weight: 400;
-        color: rgba(92, 102, 240, 1);
+        width: 100%;
+        margin-top: 40px;
+        text-align: left;
+
+        .forget-password {
+          width: 129px;
+          height: 19px;
+          font-size: 20px;
+          font-weight: 400;
+          color: rgba(92, 102, 240, 1);
+        }
       }
-    }
 
-    .per-code {
-      width: 100px;
-      height: 36px;
-      font-size: 20px;
-      line-height: 36px;
-      color: #fff;
-      text-align: center;
-      cursor: pointer;
-      background: #bbc1ce;
-    }
+      .per-code {
+        width: 100px;
+        height: 36px;
+        font-size: 20px;
+        line-height: 36px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+        background: #bbc1ce;
+      }
 
-    .phone-code {
-      width: 120px;
-      height: 36px;
-      font-size: 14px;
-      color: #fff;
-      border-radius: 3px;
+      .phone-code {
+        width: 120px;
+        height: 36px;
+        font-size: 14px;
+        color: #fff;
+        border-radius: 3px;
+      }
     }
-  }
 
-  .tips {
-    margin-bottom: 10px;
-    font-size: $base-font-size-default;
-    color: $base-color-white;
+    .tips {
+      margin-bottom: 10px;
+      font-size: $base-font-size-default;
+      color: $base-color-white;
 
-    span {
-      &:first-of-type {
-        margin-right: 16px;
+      span {
+        &:first-of-type {
+          margin-right: 16px;
+        }
       }
     }
-  }
 
-  .title-container {
-    position: relative;
+    .title-container {
+      position: relative;
 
-    .title {
-      margin: 0 auto 40px auto;
-      font-size: 34px;
-      font-weight: bold;
-      color: $base-color-blue;
-      text-align: center;
+      .title {
+        margin: 0 auto 40px auto;
+        font-size: 34px;
+        font-weight: bold;
+        color: $base-color-blue;
+        text-align: center;
+      }
     }
-  }
 
-  .svg-container {
-    position: absolute;
-    top: 14px;
-    left: 15px;
-    z-index: $base-z-index;
-    font-size: 16px;
-    color: #d7dee3;
-    cursor: pointer;
-    user-select: none;
-  }
+    .svg-container {
+      position: absolute;
+      top: 14px;
+      left: 15px;
+      z-index: $base-z-index;
+      font-size: 16px;
+      color: #d7dee3;
+      cursor: pointer;
+      user-select: none;
+    }
 
-  .show-pwd {
-    position: absolute;
-    top: 14px;
-    right: 25px;
-    font-size: 16px;
-    color: $base-font-color;
-    cursor: pointer;
-    user-select: none;
-  }
+    .show-pwd {
+      position: absolute;
+      top: 14px;
+      right: 25px;
+      font-size: 16px;
+      color: $base-font-color;
+      cursor: pointer;
+      user-select: none;
+    }
 
-  ::v-deep {
-    .el-form-item {
-      padding-right: 0;
-      margin: 20px 0;
-      color: #454545;
-      background: transparent;
-      border: 1px solid transparent;
-      border-radius: 2px;
+    ::v-deep {
+      .el-form-item {
+        padding-right: 0;
+        margin: 20px 0;
+        color: #454545;
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 2px;
 
-      &__content {
-        min-height: $base-input-height;
-        line-height: $base-input-height;
-      }
+        &__content {
+          min-height: $base-input-height;
+          line-height: $base-input-height;
+        }
 
-      &__error {
-        position: absolute;
-        top: 100%;
-        left: 18px;
-        font-size: $base-font-size-small;
-        line-height: 18px;
-        color: $base-color-red;
+        &__error {
+          position: absolute;
+          top: 100%;
+          left: 18px;
+          font-size: $base-font-size-small;
+          line-height: 18px;
+          color: $base-color-red;
+        }
       }
-    }
 
-    .el-input {
-      box-sizing: border-box;
+      .el-input {
+        box-sizing: border-box;
 
-      .el-input__count {
-        .el-input__count-inner {
-          background: transparent;
+        .el-input__count {
+          .el-input__count-inner {
+            background: transparent;
+          }
         }
-      }
 
-      .el-input__prefix {
-        left: 15px;
-        line-height: 56px;
+        .el-input__prefix {
+          left: 15px;
+          line-height: 56px;
 
-        .svg-inline--fa {
-          width: 20px;
+          .svg-inline--fa {
+            width: 20px;
+          }
         }
-      }
 
-      input {
-        height: 58px;
-        padding-left: 45px;
-        font-size: $base-font-size-default;
-        line-height: 58px;
-        color: $base-font-color;
-        background: #f6f4fc;
-        border: 0;
-        caret-color: $base-font-color;
+        input {
+          height: 58px;
+          padding-left: 45px;
+          font-size: $base-font-size-default;
+          line-height: 58px;
+          color: $base-font-color;
+          background: #f6f4fc;
+          border: 0;
+          caret-color: $base-font-color;
+        }
       }
     }
   }
-}
 </style>

src/views/test/index.vue

@@ -4,13 +4,13 @@
   </div>
 </template>
 <script>
-export default {
-  name: "Test",
-  data() {
-    return { show: true };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+  export default {
+    name: "Test",
+    data() {
+      return { show: true };
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>

src/views/vab/backToTop/index.vue

@@ -8,15 +8,15 @@
 </template>
 
 <script>
-export default {
-  name: "BackToTop",
-  data() {
-    return {};
-  },
-};
+  export default {
+    name: "BackToTop",
+    data() {
+      return {};
+    },
+  };
 </script>
 <style lang="scss" scoped>
-.placeholder-container div {
-  margin: 10px;
-}
+  .placeholder-container div {
+    margin: 10px;
+  }
 </style>

src/views/vab/betterScroll/index.vue

@@ -14,8 +14,8 @@
         <el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
         <el-button @click="handleScrollBy(100)">向下滚动100像素</el-button>
         <el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
-        <el-button @click="handleScrollToElement(15)">滚动到第15个 </el-button>
-        <el-button @click="handleScrollToElement(25)">滚动到第25个 </el-button>
+        <el-button @click="handleScrollToElement(15)">滚动到第15个</el-button>
+        <el-button @click="handleScrollToElement(25)">滚动到第25个</el-button>
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
         <div ref="wrapper" class="right-content">
@@ -29,55 +29,55 @@
 </template>
 
 <script>
-import BScroll from "better-scroll";
+  import BScroll from "better-scroll";
 
-export default {
-  name: "BetterScroll",
-  data() {
-    return {
-      time: 1000,
-      BS: null,
-    };
-  },
-  mounted() {
-    this.scrollInit();
-  },
-  beforeDestroy() {
-    this.scrollDestroy();
-  },
-  methods: {
-    handleScrollTo(y) {
-      this.BS.scrollTo(0, -y, this.time);
+  export default {
+    name: "BetterScroll",
+    data() {
+      return {
+        time: 1000,
+        BS: null,
+      };
     },
-    handleScrollBy(y) {
-      this.BS.scrollBy(0, -y, this.time);
+    mounted() {
+      this.scrollInit();
     },
-    handleScrollToElement(n) {
-      this.BS.scrollToElement(`#bs-item-${n}`, this.time);
+    beforeDestroy() {
+      this.scrollDestroy();
     },
-    scrollInit() {
-      this.BS = new BScroll(this.$refs["wrapper"], {
-        mouseWheel: true,
-        scrollbar: {
-          fade: true,
-          interactive: false,
-        },
-      });
+    methods: {
+      handleScrollTo(y) {
+        this.BS.scrollTo(0, -y, this.time);
+      },
+      handleScrollBy(y) {
+        this.BS.scrollBy(0, -y, this.time);
+      },
+      handleScrollToElement(n) {
+        this.BS.scrollToElement(`#bs-item-${n}`, this.time);
+      },
+      scrollInit() {
+        this.BS = new BScroll(this.$refs["wrapper"], {
+          mouseWheel: true,
+          scrollbar: {
+            fade: true,
+            interactive: false,
+          },
+        });
+      },
+      scrollDestroy() {
+        if (this.BS) {
+          this.BS.destroy();
+        }
+      },
     },
-    scrollDestroy() {
-      if (this.BS) {
-        this.BS.destroy();
-      }
-    },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.better-scroll-container {
-  .right-content {
-    height: 500px;
-    margin-top: 40px;
-    overflow: hidden;
+  .better-scroll-container {
+    .right-content {
+      height: 500px;
+      margin-top: 40px;
+      overflow: hidden;
+    }
   }
-}
 </style>

src/views/vab/card/index.vue

@@ -39,61 +39,61 @@
 </template>
 
 <script>
-import { getList } from "@/api/table";
-import VabImage from "@/components/VabImage";
+  import { getList } from "@/api/table";
+  import VabImage from "@/components/VabImage";
 
-export default {
-  name: "Card",
-  components: {
-    VabImage,
-  },
-  data() {
-    return {
-      value: true,
-      currentDate: new Date(),
-      list: null,
-      listLoading: true,
-      pageNo: 1,
-      pageSize: 10,
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      background: true,
-      height: 0,
-      elementLoadingText: "正在加载...",
-      dialogFormVisible: false,
-    };
-  },
-  created() {
-    this.fetchData();
-    this.height = this.$baseTableHeight(1);
-  },
-  methods: {
-    bigClick(val) {
-      this.$baseAlert("点击了大图");
+  export default {
+    name: "Card",
+    components: {
+      VabImage,
     },
-    smallClick(val) {
-      this.$baseAlert("点击了小图");
+    data() {
+      return {
+        value: true,
+        currentDate: new Date(),
+        list: null,
+        listLoading: true,
+        pageNo: 1,
+        pageSize: 10,
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        background: true,
+        height: 0,
+        elementLoadingText: "正在加载...",
+        dialogFormVisible: false,
+      };
     },
-    handleSizeChange(val) {
-      this.pageSize = val;
+    created() {
       this.fetchData();
+      this.height = this.$baseTableHeight(1);
     },
-    handleCurrentChange(val) {
-      this.pageNo = val;
-      this.fetchData();
-    },
-    async fetchData() {
-      this.listLoading = true;
-      const { data, totalCount } = await getList({
-        pageNo: this.pageNo,
-        pageSize: this.pageSize,
-      });
-      this.list = data;
-      this.total = totalCount;
-      setTimeout(() => {
-        this.listLoading = false;
-      }, 300);
+    methods: {
+      bigClick(val) {
+        this.$baseAlert("点击了大图");
+      },
+      smallClick(val) {
+        this.$baseAlert("点击了小图");
+      },
+      handleSizeChange(val) {
+        this.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.pageNo = val;
+        this.fetchData();
+      },
+      async fetchData() {
+        this.listLoading = true;
+        const { data, totalCount } = await getList({
+          pageNo: this.pageNo,
+          pageSize: this.pageSize,
+        });
+        this.list = data;
+        this.total = totalCount;
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 300);
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/codeGenerator/components/TableEditor.vue

@@ -8,30 +8,30 @@
 </template>
 
 <script>
-import JsonEditor from "@/components/JsonEditor/index";
+  import JsonEditor from "@/components/JsonEditor/index";
 
-const jsonData =
-  '{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
+  const jsonData =
+    '{"code": 200, "msg": "操作成功", "pageNo": 1, "pageSize": 10, "totalPages": 4, "totalCount": 238, "data": [{"id": "", "title": "", "status": "", "author": "", "datetime": "", "pageViews": "", "img": "", "switch": ""}]}';
 
-export default {
-  components: { JsonEditor },
-  data() {
-    return {
-      value: JSON.parse(jsonData),
-    };
-  },
-  computed: {},
-  created() {
-    this.prettierJSON();
-  },
-
-  methods: {
-    prettierJSON() {
-      this.$emit("change", jsonData);
+  export default {
+    components: { JsonEditor },
+    data() {
+      return {
+        value: JSON.parse(jsonData),
+      };
+    },
+    computed: {},
+    created() {
+      this.prettierJSON();
     },
-    prettierNewJSON(jsonData) {
-      this.$emit("change", jsonData);
+
+    methods: {
+      prettierJSON() {
+        this.$emit("change", jsonData);
+      },
+      prettierNewJSON(jsonData) {
+        this.$emit("change", jsonData);
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/codeGenerator/components/TableExhibition.vue

@@ -13,69 +13,69 @@
 </template>
 
 <script>
-import TableExhibitionBody from "./TableExhibitionBody";
-import TableExhibitionQuery from "./TableExhibitionQuery";
-import TableExhibitionHeader from "./TableExhibitionHeader";
-import { genTableSnippet } from "./snippetTable.js";
+  import TableExhibitionBody from "./TableExhibitionBody";
+  import TableExhibitionQuery from "./TableExhibitionQuery";
+  import TableExhibitionHeader from "./TableExhibitionHeader";
+  import { genTableSnippet } from "./snippetTable.js";
 
-export default {
-  components: {
-    TableExhibitionBody,
-    TableExhibitionHeader,
-    TableExhibitionQuery,
-  },
-  props: {
-    tableData: {
-      type: Object,
-      default: () => {
-        return {};
+  export default {
+    components: {
+      TableExhibitionBody,
+      TableExhibitionHeader,
+      TableExhibitionQuery,
+    },
+    props: {
+      tableData: {
+        type: Object,
+        default: () => {
+          return {};
+        },
       },
     },
-  },
-  data() {
-    return {
-      list: [],
-      code: "",
-      headers: [],
-      query: {
-        limit: 20,
-        cursor: 1,
+    data() {
+      return {
+        list: [],
+        code: "",
+        headers: [],
+        query: {
+          limit: 20,
+          cursor: 1,
+        },
+        total: 0,
+      };
+    },
+    watch: {
+      tableData: {
+        handler(val) {
+          this.list = val.data && val.data.slice(0, 3);
+          if (this.list) {
+            this.headers = Object.keys(this.list[0]).map((item) => {
+              // opt 为需要对 字段的操作，''空就不操作，'time' 处理时间，'template' 将字段放在template 里面，方便后续操作
+              return {
+                value: this.list[0][item],
+                key: item,
+                label: item,
+                show: true,
+                opt: "",
+                query: false,
+              };
+            });
+          }
+        },
+        immediate: true,
       },
-      total: 0,
-    };
-  },
-  watch: {
-    tableData: {
-      handler(val) {
-        this.list = val.data && val.data.slice(0, 3);
-        if (this.list) {
-          this.headers = Object.keys(this.list[0]).map((item) => {
-            // opt 为需要对 字段的操作，''空就不操作，'time' 处理时间，'template' 将字段放在template 里面，方便后续操作
-            return {
-              value: this.list[0][item],
-              key: item,
-              label: item,
-              show: true,
-              opt: "",
-              query: false,
-            };
-          });
-        }
+      headers: {
+        handler(val) {
+          this.code = genTableSnippet(val, this.getTableAPI);
+          this.$store.dispatch("table/setTableCode", this.code);
+        },
+        deep: true,
       },
-      immediate: true,
     },
-    headers: {
-      handler(val) {
-        this.code = genTableSnippet(val, this.getTableAPI);
-        this.$store.dispatch("table/setTableCode", this.code);
-      },
-      deep: true,
+    created() {},
+    methods: {
+      editdata() {},
+      test(val) {},
     },
-  },
-  created() {},
-  methods: {
-    editdata() {},
-    test(val) {},
-  },
-};
+  };
 </script>

src/views/vab/codeGenerator/components/TableExhibitionBody.vue

@@ -19,42 +19,41 @@
       background
       layout="total, sizes, prev, pager, next, jumper"
       :total="1000"
-    >
-    </el-pagination>
+    ></el-pagination>
   </div>
 </template>
 
 <script>
-export default {
-  props: {
-    list: {
-      type: null,
-      required: true,
+  export default {
+    props: {
+      list: {
+        type: null,
+        required: true,
+      },
+      headers: {
+        type: Array,
+        required: true,
+      },
     },
-    headers: {
-      type: Array,
-      required: true,
+    data() {
+      return {
+        query: {
+          limit: 20,
+          cursor: 1,
+        },
+        table_key: 0,
+        total: 0,
+      };
     },
-  },
-  data() {
-    return {
-      query: {
-        limit: 20,
-        cursor: 1,
+    watch: {
+      headers() {
+        this.table_key++;
       },
-      table_key: 0,
-      total: 0,
-    };
-  },
-  watch: {
-    headers() {
-      this.table_key++;
     },
-  },
-  created() {},
-  methods: {
-    editdata() {},
-    test(val) {},
-  },
-};
+    created() {},
+    methods: {
+      editdata() {},
+      test(val) {},
+    },
+  };
 </script>

src/views/vab/codeGenerator/components/TableExhibitionHeader.vue

@@ -17,11 +17,14 @@
             effect="dark"
             placement="top-start"
           >
-            <el-button v-if="header.opt === ''" @click="opt(header, 'template')"
-              >{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
+            <el-button
+              v-if="header.opt === ''"
+              @click="opt(header, 'template')"
+            >
+              {{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
             </el-button>
-            <el-button v-else @click="opt(header, '')"
-              >{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
+            <el-button v-else @click="opt(header, '')">
+              {{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
             </el-button>
           </el-tooltip>
           <el-tooltip
@@ -30,8 +33,8 @@
             effect="dark"
             placement="top-start"
           >
-            <el-button @click="hide(header)"
-              >{{ header.show ? "点击隐藏字段" : "点击显示字段" }}
+            <el-button @click="hide(header)">
+              {{ header.show ? "点击隐藏字段" : "点击显示字段" }}
             </el-button>
           </el-tooltip>
           <div slot="reference" class="table-header-card">
@@ -50,67 +53,67 @@
 </template>
 
 <script>
-import draggable from "vuedraggable";
+  import draggable from "vuedraggable";
 
-export default {
-  components: {
-    draggable,
-  },
-  props: {
-    headers: {
-      type: Array,
-      required: true,
+  export default {
+    components: {
+      draggable,
     },
-  },
-  data() {
-    return {
-      tableHeaders: this.headers,
-    };
-  },
-  watch: {
-    headers(val) {
-      this.tableHeaders = val;
+    props: {
+      headers: {
+        type: Array,
+        required: true,
+      },
     },
-  },
-  methods: {
-    set() {
-      this.$emit("update:headers", this.tableHeaders);
+    data() {
+      return {
+        tableHeaders: this.headers,
+      };
     },
-    show(header) {
-      header.show = true;
+    watch: {
+      headers(val) {
+        this.tableHeaders = val;
+      },
     },
-    hide(header) {
-      header.show = !header.show;
+    methods: {
+      set() {
+        this.$emit("update:headers", this.tableHeaders);
+      },
+      show(header) {
+        header.show = true;
+      },
+      hide(header) {
+        header.show = !header.show;
+      },
+      opt(header, opt) {
+        header.opt = opt;
+      },
+      query(header, query) {
+        header.query = query;
+      },
     },
-    opt(header, opt) {
-      header.opt = opt;
-    },
-    query(header, query) {
-      header.query = query;
-    },
-  },
-};
+  };
 </script>
 <style scoped>
-.table-header-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  margin-left: 0;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-}
+  .table-header-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    margin-left: 0;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+  }
 
-.table-header >>> .el-input__inner {
-  border: none;
-  border-bottom: 1px solid #9e9e9e;
-  border-radius: 0;
-}
+  .table-header >>> .el-input__inner {
+    border: none;
+    border-bottom: 1px solid #9e9e9e;
+    border-radius: 0;
+  }
 
-.el-popover {
-  min-width: 100px !important;
-}
+  .el-popover {
+    min-width: 100px !important;
+  }
 </style>

src/views/vab/codeGenerator/components/TableExhibitionQuery.vue

@@ -2,8 +2,8 @@
   <div class="table-query">
     <div>
       <el-button type="primary" @click="openCodeDialog">查看代码</el-button>
-      <el-button type="primary" @click="handleClipboard(srcTableCode, $event)"
-        >复制代码
+      <el-button type="primary" @click="handleClipboard(srcTableCode, $event)">
+        复制代码
       </el-button>
     </div>
     <el-dialog destroy-on-close title="查看代码" :visible.sync="dialogVisible">
@@ -11,69 +11,72 @@
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="closeCodeDialog(srcTableCode, $event)"
-          >复制代码</el-button
+        <el-button
+          type="primary"
+          @click="closeCodeDialog(srcTableCode, $event)"
         >
+          复制代码
+        </el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import clipboard from "@/utils/clipboard";
-import CodeMirror from "codemirror";
+  import { mapGetters } from "vuex";
+  import clipboard from "@/utils/clipboard";
+  import CodeMirror from "codemirror";
 
-export default {
-  props: {
-    headers: {
-      type: Array,
-      required: true,
+  export default {
+    props: {
+      headers: {
+        type: Array,
+        required: true,
+      },
     },
-  },
-  data() {
-    return {
-      dialogVisible: false,
-    };
-  },
-  computed: {
-    ...mapGetters({ srcTableCode: "table/srcTableCode" }),
-  },
-  methods: {
-    handleClipboard(text, event) {
-      clipboard(text, event);
+    data() {
+      return {
+        dialogVisible: false,
+      };
     },
-    openCodeDialog() {
-      this.dialogVisible = true;
-      setTimeout(() => {
-        CodeMirror.fromTextArea(this.$refs.code, {
-          lineNumbers: true,
-          gutters: ["CodeMirror-lint-markers"],
-          theme: "rubyblue",
-          autoRefresh: true,
-          lint: true,
-        });
-      }, 0);
+    computed: {
+      ...mapGetters({ srcTableCode: "table/srcTableCode" }),
     },
-    closeCodeDialog(text, event) {
-      this.handleClipboard(text, event);
-      this.dialogVisible = false;
+    methods: {
+      handleClipboard(text, event) {
+        clipboard(text, event);
+      },
+      openCodeDialog() {
+        this.dialogVisible = true;
+        setTimeout(() => {
+          CodeMirror.fromTextArea(this.$refs.code, {
+            lineNumbers: true,
+            gutters: ["CodeMirror-lint-markers"],
+            theme: "rubyblue",
+            autoRefresh: true,
+            lint: true,
+          });
+        }, 0);
+      },
+      closeCodeDialog(text, event) {
+        this.handleClipboard(text, event);
+        this.dialogVisible = false;
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.table-query {
-  display: flex;
-  justify-content: flex-end;
-  height: 45px;
+  .table-query {
+    display: flex;
+    justify-content: flex-end;
+    height: 45px;
 
-  ::v-deep {
-    .CodeMirror {
-      height: auto;
-      min-height: calc(100vh - 420px);
+    ::v-deep {
+      .CodeMirror {
+        height: auto;
+        min-height: calc(100vh - 420px);
+      }
     }
   }
-}
 </style>

src/views/vab/codeGenerator/index.vue

@@ -12,25 +12,25 @@
 </template>
 
 <script>
-import TableEditor from "./components/TableEditor";
-import TableExhibition from "./components/TableExhibition";
+  import TableEditor from "./components/TableEditor";
+  import TableExhibition from "./components/TableExhibition";
 
-export default {
-  name: "Index",
-  components: {
-    TableEditor,
-    TableExhibition,
-  },
-  data() {
-    return {
-      tableData: {},
-      getTableAPI: "",
-    };
-  },
-  methods: {
-    setTableData(val) {
-      this.tableData = JSON.parse(val);
+  export default {
+    name: "Index",
+    components: {
+      TableEditor,
+      TableExhibition,
     },
-  },
-};
+    data() {
+      return {
+        tableData: {},
+        getTableAPI: "",
+      };
+    },
+    methods: {
+      setTableData(val) {
+        this.tableData = JSON.parse(val);
+      },
+    },
+  };
 </script>

src/views/vab/editor/index.vue

@@ -14,7 +14,7 @@
         <vab-quill v-model="form.content" :min-height="400"></vab-quill>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleSee">预览效果 </el-button>
+        <el-button type="primary" @click="handleSee">预览效果</el-button>
         <el-button type="primary" @click="handleSave">保存</el-button>
       </el-form-item>
     </el-form>
@@ -28,101 +28,101 @@
 </template>
 
 <script>
-import vabQuill from "@/plugins/vabQuill";
-export default {
-  name: "Editor",
-  components: { vabQuill },
-  data() {
-    return {
-      borderColor: "#dcdfe6",
-      dialogTableVisible: false,
-      form: {
-        title: "",
-        module: "",
-        content: "",
-      },
-      rules: {
-        title: [
-          {
-            required: true,
-            message: "请输入标题",
-            trigger: "blur",
-          },
-        ],
-        module: [
-          {
-            required: true,
-            message: "请选择模块",
-            trigger: "change",
-          },
-        ],
-        content: [
-          {
-            required: true,
-            message: "请输入内容",
-            trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-  methods: {
-    handleSee() {
-      this.$refs["form"].validate((valid) => {
-        this.$refs.form.validateField("content", (errorMsg) => {});
-        if (valid) {
-          this.dialogTableVisible = true;
-        } else {
-          return false;
-        }
-      });
+  import vabQuill from "@/plugins/vabQuill";
+  export default {
+    name: "Editor",
+    components: { vabQuill },
+    data() {
+      return {
+        borderColor: "#dcdfe6",
+        dialogTableVisible: false,
+        form: {
+          title: "",
+          module: "",
+          content: "",
+        },
+        rules: {
+          title: [
+            {
+              required: true,
+              message: "请输入标题",
+              trigger: "blur",
+            },
+          ],
+          module: [
+            {
+              required: true,
+              message: "请选择模块",
+              trigger: "change",
+            },
+          ],
+          content: [
+            {
+              required: true,
+              message: "请输入内容",
+              trigger: "blur",
+            },
+          ],
+        },
+      };
     },
-    handleSave() {
-      this.$refs["form"].validate((valid) => {
-        this.$refs.form.validateField("content", (errorMsg) => {
-          this.borderColor = "#dcdfe6";
-          if (errorMsg) {
-            this.borderColor = "#F56C6C";
+    methods: {
+      handleSee() {
+        this.$refs["form"].validate((valid) => {
+          this.$refs.form.validateField("content", (errorMsg) => {});
+          if (valid) {
+            this.dialogTableVisible = true;
+          } else {
+            return false;
           }
         });
-        if (valid) {
-          this.$baseMessage("submit!", "success");
-        } else {
-          return false;
-        }
-      });
+      },
+      handleSave() {
+        this.$refs["form"].validate((valid) => {
+          this.$refs.form.validateField("content", (errorMsg) => {
+            this.borderColor = "#dcdfe6";
+            if (errorMsg) {
+              this.borderColor = "#F56C6C";
+            }
+          });
+          if (valid) {
+            this.$baseMessage("submit!", "success");
+          } else {
+            return false;
+          }
+        });
+      },
     },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.editor-container {
-  .news {
-    &-title {
-      text-align: center;
-    }
+  .editor-container {
+    .news {
+      &-title {
+        text-align: center;
+      }
 
-    &-content {
-      ::v-deep {
-        p {
-          line-height: 30px;
+      &-content {
+        ::v-deep {
+          p {
+            line-height: 30px;
 
-          img {
-            display: block;
-            margin-right: auto;
-            margin-left: auto;
+            img {
+              display: block;
+              margin-right: auto;
+              margin-left: auto;
+            }
           }
         }
       }
     }
-  }
 
-  .vab-quill-content {
-    ::v-deep {
-      .el-form-item__content {
-        line-height: normal;
+    .vab-quill-content {
+      ::v-deep {
+        .el-form-item__content {
+          line-height: normal;
+        }
       }
     }
   }
-}
 </style>

src/views/vab/element/index.vue

@@ -2,8 +2,8 @@
   <div class="element-container">
     <el-row :gutter="20">
       <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
-        <el-button type="primary" @click="dialogVisible = !dialogVisible"
-          >element全部文档点这里
+        <el-button type="primary" @click="dialogVisible = !dialogVisible">
+          element全部文档点这里
         </el-button>
         <el-dialog
           :fullscreen="true"
@@ -16,8 +16,8 @@
             frameborder="0"
           ></iframe>
         </el-dialog>
-        <el-divider content-position="left"
-          >Tag 标签
+        <el-divider content-position="left">
+          Tag 标签
           <a
             target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/tag"
@@ -36,8 +36,8 @@
         <el-tag effect="dark" type="warning">标签四</el-tag>
         <el-tag effect="dark" type="danger">标签五</el-tag>
 
-        <el-divider content-position="left"
-          >进度条
+        <el-divider content-position="left">
+          进度条
           <a
             target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/progress"
@@ -90,8 +90,8 @@
           status="exception"
         ></el-progress>
 
-        <el-divider content-position="left"
-          >按钮
+        <el-divider content-position="left">
+          按钮
           <a
             target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/button"
@@ -133,13 +133,14 @@
         <el-button type="primary" icon="el-icon-share"></el-button>
         <el-button type="primary" icon="el-icon-delete"></el-button>
         <el-button type="primary" icon="el-icon-search">搜索</el-button>
-        <el-button type="primary"
-          >上传<i class="el-icon-upload el-icon--right"></i
-        ></el-button>
+        <el-button type="primary">
+          上传
+          <i class="el-icon-upload el-icon--right"></i>
+        </el-button>
         <el-button type="primary" :loading="true">加载中</el-button>
 
-        <el-divider content-position="left"
-          >文字链接
+        <el-divider content-position="left">
+          文字链接
           <a
             target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/link"
@@ -147,8 +148,8 @@
             文档
           </a>
         </el-divider>
-        <el-link href="https://element.eleme.io" target="_blank"
-          >默认链接
+        <el-link href="https://element.eleme.io" target="_blank">
+          默认链接
         </el-link>
         <el-link type="primary">主要链接</el-link>
         <el-link type="success">成功链接</el-link>
@@ -163,8 +164,8 @@
         <el-link type="info" disabled>信息链接</el-link>
         <el-link :underline="false">无下划线</el-link>
         <el-link>有下划线</el-link>
-        <el-divider content-position="left"
-          >头像
+        <el-divider content-position="left">
+          头像
           <a
             target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/avatar"
@@ -173,8 +174,8 @@
           </a>
         </el-divider>
         <el-avatar icon="el-icon-user-solid"></el-avatar>
-        <el-divider content-position="left"
-          >页头
+        <el-divider content-position="left">
+          页头
           <a
             target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/page-header"
@@ -183,8 +184,8 @@
           </a>
         </el-divider>
         <el-page-header content="详情页面"></el-page-header>
-        <el-divider content-position="left"
-          >面包屑
+        <el-divider content-position="left">
+          面包屑
           <a
             target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/breadcrumb"
@@ -204,50 +205,50 @@
 </template>
 
 <script>
-export default {
-  name: "Element",
-  components: {},
-  data() {
-    return {
-      dialogVisible: false,
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+  export default {
+    name: "Element",
+    components: {},
+    data() {
+      return {
+        dialogVisible: false,
+      };
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 
 <style lang="scss" scoped>
-.element-container {
-  ::v-deep {
-    .el-dialog__wrapper {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      bottom: 20px;
-      left: 20px;
-    }
+  .element-container {
+    ::v-deep {
+      .el-dialog__wrapper {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        bottom: 20px;
+        left: 20px;
+      }
 
-    .el-tag,
-    .el-button,
-    .el-link {
-      margin: 5px;
-    }
+      .el-tag,
+      .el-button,
+      .el-link {
+        margin: 5px;
+      }
 
-    .el-progress {
-      margin: 20px;
+      .el-progress {
+        margin: 20px;
+      }
     }
-  }
 
-  .element-iframe {
-    position: absolute;
-    top: 55px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 89vh;
+    .element-iframe {
+      position: absolute;
+      top: 55px;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 89vh;
+    }
   }
-}
 </style>

src/views/vab/errorLog/components/ErrorTest.vue

@@ -4,10 +4,10 @@
 </template>
 
 <script>
-export default {
-  name: "ErrorTest",
-  data() {
-    return {};
-  },
-};
+  export default {
+    name: "ErrorTest",
+    data() {
+      return {};
+    },
+  };
 </script>

src/views/vab/errorLog/index.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="errorLog-container">
-    <el-divider content-position="left"
-      >这里会在顶部navbar上模拟一个控制台错误日志
+    <el-divider content-position="left">
+      这里会在顶部navbar上模拟一个控制台错误日志
     </el-divider>
-    <el-button type="primary" @click="handleError"
-      >点击模拟一个chuzhixinjiayou的错误
+    <el-button type="primary" @click="handleError">
+      点击模拟一个chuzhixinjiayou的错误
     </el-button>
     <error-test v-if="show" />
   </div>
 </template>
 
 <script>
-import ErrorTest from "./components/ErrorTest";
+  import ErrorTest from "./components/ErrorTest";
 
-export default {
-  name: "ErrorLog",
-  components: { ErrorTest },
-  data() {
-    return { show: false };
-  },
-  methods: {
-    handleError() {
-      this.show = true;
+  export default {
+    name: "ErrorLog",
+    components: { ErrorTest },
+    data() {
+      return { show: false };
     },
-  },
-};
+    methods: {
+      handleError() {
+        this.show = true;
+      },
+    },
+  };
 </script>

src/views/vab/form/index.vue

@@ -39,8 +39,8 @@
             <el-input v-model="ruleForm.desc" type="textarea"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="submitForm('ruleForm')"
-              >立即创建
+            <el-button type="primary" @click="submitForm('ruleForm')">
+              立即创建
             </el-button>
             <el-button @click="resetForm('ruleForm')">重置</el-button>
           </el-form-item>
@@ -51,54 +51,61 @@
 </template>
 
 <script>
-export default {
-  name: "Form",
-  data() {
-    return {
-      ruleForm: {
-        name: "",
-        region: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
+  export default {
+    name: "Form",
+    data() {
+      return {
+        ruleForm: {
+          name: "",
+          region: "",
+          delivery: false,
+          type: [],
+          resource: "",
+          desc: "",
+        },
+        rules: {
+          name: [
+            { required: true, message: "请输入活动名称", trigger: "blur" },
+            {
+              min: 3,
+              max: 5,
+              message: "长度在 3 到 5 个字符",
+              trigger: "blur",
+            },
+          ],
+          region: [
+            { required: true, message: "请选择活动区域", trigger: "change" },
+          ],
+          type: [
+            {
+              type: "array",
+              required: true,
+              message: "请至少选择一个活动性质",
+              trigger: "change",
+            },
+          ],
+          resource: [
+            { required: true, message: "请选择活动资源", trigger: "change" },
+          ],
+          desc: [
+            { required: true, message: "请填写活动形式", trigger: "blur" },
+          ],
+        },
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert("submit!");
+          } else {
+            return false;
+          }
+        });
       },
-      rules: {
-        name: [
-          { required: true, message: "请输入活动名称", trigger: "blur" },
-          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
-        ],
-        region: [
-          { required: true, message: "请选择活动区域", trigger: "change" },
-        ],
-        type: [
-          {
-            type: "array",
-            required: true,
-            message: "请至少选择一个活动性质",
-            trigger: "change",
-          },
-        ],
-        resource: [
-          { required: true, message: "请选择活动资源", trigger: "change" },
-        ],
-        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
-    };
-  },
-  methods: {
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert("submit!");
-        } else {
-          return false;
-        }
-      });
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
     },
-  },
-};
+  };
 </script>

src/views/vab/icon/colorfulIcon.vue

@@ -2,8 +2,8 @@
   <div class="colorful-icon-container">
     <el-row :gutter="20">
       <el-col :span="24">
-        <el-divider content-position="left"
-          >多彩图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码
+        <el-divider content-position="left">
+          多彩图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码
         </el-divider>
       </el-col>
       <el-col :span="24">
@@ -12,8 +12,8 @@
             <el-input v-model="queryForm.title"></el-input>
           </el-form-item>
           <el-form-item label-width="0">
-            <el-button native-type="submit" type="primary" @click="queryData"
-              >搜索
+            <el-button native-type="submit" type="primary" @click="queryData">
+              搜索
             </el-button>
           </el-form-item>
 
@@ -60,96 +60,96 @@
 </template>
 
 <script>
-import { getIconList } from "@/api/colorfulIcon";
-import clip from "@/utils/clipboard";
+  import { getIconList } from "@/api/colorfulIcon";
+  import clip from "@/utils/clipboard";
 
-export default {
-  name: "ColorfulIcon",
-  data() {
-    return {
-      copyText: "",
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      background: true,
-      height: 0,
-      selectRows: "",
-      elementLoadingText: "正在加载...",
-      queryIcon: [],
-      queryForm: {
-        pageNo: 1,
-        pageSize: 72,
-        title: "",
-      },
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.queryForm.pageSize = val;
-      this.fetchData();
-    },
-    handleCurrentChange(val) {
-      this.queryForm.pageNo = val;
-      this.fetchData();
+  export default {
+    name: "ColorfulIcon",
+    data() {
+      return {
+        copyText: "",
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        background: true,
+        height: 0,
+        selectRows: "",
+        elementLoadingText: "正在加载...",
+        queryIcon: [],
+        queryForm: {
+          pageNo: 1,
+          pageSize: 72,
+          title: "",
+        },
+      };
     },
-    queryData() {
-      this.queryForm.pageNo = 1;
+    created() {
       this.fetchData();
     },
-    async fetchData() {
-      const { data, totalCount } = await getIconList(this.queryForm);
-      this.queryIcon = data;
-      this.allIcon = data;
-      this.total = totalCount;
-    },
-    handleCopyIcon(index, event) {
-      //const copyText = `<vab-colorful-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`;
-      const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`;
-      this.copyText = copyText;
-      clip(copyText, event);
+    methods: {
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val;
+        this.fetchData();
+      },
+      queryData() {
+        this.queryForm.pageNo = 1;
+        this.fetchData();
+      },
+      async fetchData() {
+        const { data, totalCount } = await getIconList(this.queryForm);
+        this.queryIcon = data;
+        this.allIcon = data;
+        this.total = totalCount;
+      },
+      handleCopyIcon(index, event) {
+        //const copyText = `<vab-colorful-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`;
+        const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`;
+        this.copyText = copyText;
+        clip(copyText, event);
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.colorful-icon-container {
-  ::v-deep {
-    .el-card__body {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center; /* 垂直居中 */
-      justify-content: center; /* 水平居中 */
+  .colorful-icon-container {
+    ::v-deep {
+      .el-card__body {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
 
-      svg:not(:root) {
-        font-size: 35px;
-        font-weight: bold;
-        color: $base-color-gray;
-        text-align: center;
-        vertical-align: middle;
-        pointer-events: none;
-        cursor: pointer;
-      }
+        svg:not(:root) {
+          font-size: 35px;
+          font-weight: bold;
+          color: $base-color-gray;
+          text-align: center;
+          vertical-align: middle;
+          pointer-events: none;
+          cursor: pointer;
+        }
 
-      .svg-external-icon {
-        width: 35px;
-        height: 35px;
+        .svg-external-icon {
+          width: 35px;
+          height: 35px;
+        }
       }
     }
-  }
 
-  .icon-text {
-    height: 30px;
-    margin-top: -15px;
-    overflow: hidden;
-    font-size: 12px;
-    line-height: 30px;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .icon-text {
+      height: 30px;
+      margin-top: -15px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
-}
 </style>

src/views/vab/icon/index.vue

@@ -10,8 +10,8 @@
             <el-input v-model="queryForm.title"></el-input>
           </el-form-item>
           <el-form-item label-width="0">
-            <el-button native-type="submit" type="primary" @click="queryData"
-              >搜索
+            <el-button native-type="submit" type="primary" @click="queryData">
+              搜索
             </el-button>
           </el-form-item>
         </el-form>
@@ -52,90 +52,90 @@
 </template>
 
 <script>
-import clip from "@/utils/clipboard";
-import { getIconList } from "@/api/icon";
+  import clip from "@/utils/clipboard";
+  import { getIconList } from "@/api/icon";
 
-export default {
-  name: "AwesomeIcon",
-  data() {
-    return {
-      copyText: "",
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      background: true,
-      height: 0,
-      selectRows: "",
-      elementLoadingText: "正在加载...",
-      queryIcon: [],
-      queryForm: {
-        pageNo: 1,
-        pageSize: 72,
-        title: "",
-      },
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.queryForm.pageSize = val;
-      this.fetchData();
-    },
-    handleCurrentChange(val) {
-      this.queryForm.pageNo = val;
-      this.fetchData();
+  export default {
+    name: "AwesomeIcon",
+    data() {
+      return {
+        copyText: "",
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        background: true,
+        height: 0,
+        selectRows: "",
+        elementLoadingText: "正在加载...",
+        queryIcon: [],
+        queryForm: {
+          pageNo: 1,
+          pageSize: 72,
+          title: "",
+        },
+      };
     },
-    queryData() {
-      this.queryForm.pageNo = 1;
+    created() {
       this.fetchData();
     },
-    async fetchData() {
-      const { data, totalCount } = await getIconList(this.queryForm);
-      this.queryIcon = data;
-      this.allIcon = data;
-      this.total = totalCount;
-    },
-    handleCopyIcon(index, event) {
-      const copyText = `<vab-icon :icon="['fas', '${this.queryIcon[index]}']"></vab-icon>`;
-      this.copyText = copyText;
-      clip(copyText, event);
+    methods: {
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val;
+        this.fetchData();
+      },
+      queryData() {
+        this.queryForm.pageNo = 1;
+        this.fetchData();
+      },
+      async fetchData() {
+        const { data, totalCount } = await getIconList(this.queryForm);
+        this.queryIcon = data;
+        this.allIcon = data;
+        this.total = totalCount;
+      },
+      handleCopyIcon(index, event) {
+        const copyText = `<vab-icon :icon="['fas', '${this.queryIcon[index]}']"></vab-icon>`;
+        this.copyText = copyText;
+        clip(copyText, event);
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.icon-container {
-  ::v-deep {
-    .el-card__body {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center; /* 垂直居中 */
-      justify-content: center; /* 水平居中 */
+  .icon-container {
+    ::v-deep {
+      .el-card__body {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
 
-      svg:not(:root).svg-inline--fa {
-        font-size: 35px;
-        font-weight: bold;
-        color: $base-color-gray;
-        text-align: center;
-        vertical-align: middle;
-        pointer-events: none;
-        cursor: pointer;
+        svg:not(:root).svg-inline--fa {
+          font-size: 35px;
+          font-weight: bold;
+          color: $base-color-gray;
+          text-align: center;
+          vertical-align: middle;
+          pointer-events: none;
+          cursor: pointer;
+        }
       }
     }
-  }
 
-  .icon-text {
-    height: 30px;
-    margin-top: -15px;
-    overflow: hidden;
-    font-size: 12px;
-    line-height: 30px;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .icon-text {
+      height: 30px;
+      margin-top: -15px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
-}
 </style>

src/views/vab/icon/remixIcon.vue

@@ -2,8 +2,8 @@
   <div class="colorful-icon-container">
     <el-row :gutter="20">
       <el-col :span="24">
-        <el-divider content-position="left"
-          >小清新图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码，点击图标即可复制源码
+        <el-divider content-position="left">
+          小清新图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码，点击图标即可复制源码
         </el-divider>
       </el-col>
       <el-col :span="24">
@@ -12,8 +12,8 @@
             <el-input v-model="queryForm.title"></el-input>
           </el-form-item>
           <el-form-item label-width="0">
-            <el-button native-type="submit" type="primary" @click="queryData"
-              >搜索
+            <el-button native-type="submit" type="primary" @click="queryData">
+              搜索
             </el-button>
           </el-form-item>
 
@@ -62,92 +62,92 @@
 </template>
 
 <script>
-import { getIconList } from "@/api/remixIcon";
-import clip from "@/utils/clipboard";
+  import { getIconList } from "@/api/remixIcon";
+  import clip from "@/utils/clipboard";
 
-export default {
-  name: "RemixIcon",
-  data() {
-    return {
-      copyText: "",
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      background: true,
-      height: 0,
-      selectRows: "",
-      elementLoadingText: "正在加载...",
-      queryIcon: [],
-      queryForm: {
-        pageNo: 1,
-        pageSize: 72,
-        title: "",
-      },
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.queryForm.pageSize = val;
-      this.fetchData();
-    },
-    handleCurrentChange(val) {
-      this.queryForm.pageNo = val;
-      this.fetchData();
+  export default {
+    name: "RemixIcon",
+    data() {
+      return {
+        copyText: "",
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        background: true,
+        height: 0,
+        selectRows: "",
+        elementLoadingText: "正在加载...",
+        queryIcon: [],
+        queryForm: {
+          pageNo: 1,
+          pageSize: 72,
+          title: "",
+        },
+      };
     },
-    queryData() {
-      this.queryForm.pageNo = 1;
+    created() {
       this.fetchData();
     },
-    async fetchData() {
-      const { data, totalCount } = await getIconList(this.queryForm);
-      this.queryIcon = data;
-      this.allIcon = data;
-      this.total = totalCount;
-    },
-    handleCopyIcon(index, event) {
-      //const copyText = `<vab-remix-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-remixicon@master/src/icons/svg/${this.queryIcon[index]}.svg" />`;
-      const copyText = `<vab-remix-icon icon-class="${this.queryIcon[index]}" />`;
-      this.copyText = copyText;
-      clip(copyText, event);
+    methods: {
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val;
+        this.fetchData();
+      },
+      queryData() {
+        this.queryForm.pageNo = 1;
+        this.fetchData();
+      },
+      async fetchData() {
+        const { data, totalCount } = await getIconList(this.queryForm);
+        this.queryIcon = data;
+        this.allIcon = data;
+        this.total = totalCount;
+      },
+      handleCopyIcon(index, event) {
+        //const copyText = `<vab-remix-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-remixicon@master/src/icons/svg/${this.queryIcon[index]}.svg" />`;
+        const copyText = `<vab-remix-icon icon-class="${this.queryIcon[index]}" />`;
+        this.copyText = copyText;
+        clip(copyText, event);
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.colorful-icon-container {
-  ::v-deep {
-    .el-card__body {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center; /* 垂直居中 */
-      justify-content: center; /* 水平居中 */
+  .colorful-icon-container {
+    ::v-deep {
+      .el-card__body {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
 
-      svg:not(:root),
-      .svg-external-icon {
-        font-size: 28px;
-        font-weight: bold;
-        color: $base-color-gray;
-        text-align: center;
-        vertical-align: middle;
-        pointer-events: none;
-        cursor: pointer;
+        svg:not(:root),
+        .svg-external-icon {
+          font-size: 28px;
+          font-weight: bold;
+          color: $base-color-gray;
+          text-align: center;
+          vertical-align: middle;
+          pointer-events: none;
+          cursor: pointer;
+        }
       }
     }
-  }
 
-  .icon-text {
-    height: 30px;
-    margin-top: -15px;
-    overflow: hidden;
-    font-size: 12px;
-    line-height: 30px;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .icon-text {
+      height: 30px;
+      margin-top: -15px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
-}
 </style>

src/views/vab/imgComparison/index.vue

@@ -25,29 +25,29 @@
 </template>
 
 <script>
-import VabComparison from "@/plugins/vabComparison";
-import { random } from "@/utils";
+  import VabComparison from "@/plugins/vabComparison";
+  import { random } from "@/utils";
 
-export default {
-  name: "ImgComparison",
-  components: { VabComparison },
-  data() {
-    return {
-      comparison: {
-        width: "100%",
-        height: "auto",
-        src1: require("@/assets/comparison/left.jpg"),
-        src2: require("@/assets/comparison/right.jpg"),
-        start: random(0, 100),
+  export default {
+    name: "ImgComparison",
+    components: { VabComparison },
+    data() {
+      return {
+        comparison: {
+          width: "100%",
+          height: "auto",
+          src1: require("@/assets/comparison/left.jpg"),
+          src2: require("@/assets/comparison/right.jpg"),
+          start: random(0, 100),
+        },
+      };
+    },
+    created() {},
+    mounted() {},
+    methods: {
+      random(m, n) {
+        return random(m, n).toString();
       },
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    random(m, n) {
-      return random(m, n).toString();
     },
-  },
-};
+  };
 </script>

src/views/vab/loading/index.vue

@@ -11,59 +11,61 @@
     <el-button type="primary" @click="handleLoading(7)">效果7</el-button>
     <el-button type="primary" @click="handleLoading(8)">效果8</el-button>
     <el-button type="primary" @click="handleLoading(9)">效果9</el-button>
-    <el-button type="primary" @click="test()"
-      >全局默认骨架屏(仿支付宝)
+    <el-button type="primary" @click="test()">
+      全局默认骨架屏(仿支付宝)
     </el-button>
-    <br /><br /><br />
+    <br />
+    <br />
+    <br />
     <el-divider content-position="left">多彩loading</el-divider>
-    <el-button type="primary" @click="handleColorfullLoading(1)"
-      >效果1
+    <el-button type="primary" @click="handleColorfullLoading(1)">
+      效果1
     </el-button>
-    <el-button type="primary" @click="handleColorfullLoading(2)"
-      >效果2
+    <el-button type="primary" @click="handleColorfullLoading(2)">
+      效果2
     </el-button>
-    <el-button type="primary" @click="handleColorfullLoading(3)"
-      >效果3
+    <el-button type="primary" @click="handleColorfullLoading(3)">
+      效果3
     </el-button>
-    <el-button type="primary" @click="handleColorfullLoading(4)"
-      >效果4
+    <el-button type="primary" @click="handleColorfullLoading(4)">
+      效果4
     </el-button>
   </div>
 </template>
 
 <script>
-export default {
-  name: "Loading",
-  data() {
-    return {};
-  },
-  methods: {
-    handleLoading(index) {
-      this.$baseLoading(index);
+  export default {
+    name: "Loading",
+    data() {
+      return {};
     },
-    handleColorfullLoading(index) {
-      this.$baseColorfullLoading(index);
+    methods: {
+      handleLoading(index) {
+        this.$baseLoading(index);
+      },
+      handleColorfullLoading(index) {
+        this.$baseColorfullLoading(index);
+      },
+      test() {
+        location.reload();
+      },
     },
-    test() {
-      location.reload();
-    },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.loading-container {
-  ::v-deep {
-    .el-button {
-      margin-top: 10px;
-      margin-right: 10px;
-      margin-left: 0;
-    }
+  .loading-container {
+    ::v-deep {
+      .el-button {
+        margin-top: 10px;
+        margin-right: 10px;
+        margin-left: 0;
+      }
 
-    .el-button + .el-button {
-      margin-right: 10px;
-      margin-left: 0;
+      .el-button + .el-button {
+        margin-right: 10px;
+        margin-left: 0;
+      }
     }
   }
-}
 </style>

src/views/vab/lodash/index.vue

@@ -7,7 +7,8 @@
             type="primary"
             href="https://www.lodashjs.com/"
             target="_blank"
-            >lodashjs官网
+          >
+            lodashjs官网
           </el-link>
         </el-card>
       </el-col>
@@ -187,24 +188,24 @@
 </template>
 
 <script>
-export default {
-  name: "Lodash",
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+  export default {
+    name: "Lodash",
+    data() {
+      return {};
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 <style lang="scss" scoped>
-.lodash-container {
-  text-align: left;
+  .lodash-container {
+    text-align: left;
 
-  ::v-deep {
-    .lodash-content {
-      min-height: 150px;
+    ::v-deep {
+      .lodash-content {
+        min-height: 150px;
+      }
     }
   }
-}
 </style>

src/views/vab/magnifier/index.vue

@@ -24,12 +24,12 @@
 </template>
 
 <script>
-import VabMagnifier from "@/plugins/vabMagnifier.js";
+  import VabMagnifier from "@/plugins/vabMagnifier.js";
 
-export default {
-  name: "Magnifier",
-  components: {
-    VabMagnifier,
-  },
-};
+  export default {
+    name: "Magnifier",
+    components: {
+      VabMagnifier,
+    },
+  };
 </script>

src/views/vab/map/amap.vue

@@ -7,21 +7,21 @@
 </template>
 
 <script>
-export default {
-  name: "Amap",
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+  export default {
+    name: "Amap",
+    data() {
+      return {};
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 <style lang="scss" scoped>
-.amap-container {
-  .container {
-    width: 100%;
-    height: calc(100vh - 214px);
+  .amap-container {
+    .container {
+      width: 100%;
+      height: calc(100vh - 214px);
+    }
   }
-}
 </style>

src/views/vab/map/index.vue

@@ -5,111 +5,111 @@
 </template>
 
 <script>
-import axios from "axios";
-import * as mapv from "mapv";
-export default {
-  name: "Map",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {
-    this.$nextTick(() => {
-      const map = this.$baseMap();
-      axios
-        .get(
-          "https://cdn.jsdelivr.net/npm/mapv@2.0.12/examples/data/od-xierqi.txt"
-        )
-        .then((rs) => {
-          let data = [];
-          let timeData = [];
+  import axios from "axios";
+  import * as mapv from "mapv";
+  export default {
+    name: "Map",
+    components: {},
+    data() {
+      return {};
+    },
+    created() {},
+    mounted() {
+      this.$nextTick(() => {
+        const map = this.$baseMap();
+        axios
+          .get(
+            "https://cdn.jsdelivr.net/npm/mapv@2.0.12/examples/data/od-xierqi.txt"
+          )
+          .then((rs) => {
+            let data = [];
+            let timeData = [];
 
-          rs = rs.data.split("\n");
-          let maxLength = 0;
-          for (let i = 0; i < rs.length; i++) {
-            let item = rs[i].split(",");
-            let coordinates = [];
-            if (item.length > maxLength) {
-              maxLength = item.length;
-            }
-            for (let j = 0; j < item.length; j += 2) {
-              let x = (Number(item[j]) / 20037508.34) * 180;
-              let y = (Number(item[j + 1]) / 20037508.34) * 180;
-              y =
-                (180 / Math.PI) *
-                (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
-              if (x == 0 || y == NaN) {
-                continue;
+            rs = rs.data.split("\n");
+            let maxLength = 0;
+            for (let i = 0; i < rs.length; i++) {
+              let item = rs[i].split(",");
+              let coordinates = [];
+              if (item.length > maxLength) {
+                maxLength = item.length;
+              }
+              for (let j = 0; j < item.length; j += 2) {
+                let x = (Number(item[j]) / 20037508.34) * 180;
+                let y = (Number(item[j + 1]) / 20037508.34) * 180;
+                y =
+                  (180 / Math.PI) *
+                  (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
+                if (x == 0 || y == NaN) {
+                  continue;
+                }
+                coordinates.push([x, y]);
+                timeData.push({
+                  geometry: {
+                    type: "Point",
+                    coordinates: [x, y],
+                  },
+                  count: 1,
+                  time: j,
+                });
               }
-              coordinates.push([x, y]);
-              timeData.push({
+              data.push({
                 geometry: {
-                  type: "Point",
-                  coordinates: [x, y],
+                  type: "LineString",
+                  coordinates: coordinates,
                 },
-                count: 1,
-                time: j,
               });
             }
-            data.push({
-              geometry: {
-                type: "LineString",
-                coordinates: coordinates,
-              },
-            });
-          }
 
-          let dataSet = new mapv.DataSet(data);
+            let dataSet = new mapv.DataSet(data);
 
-          let options = {
-            strokeStyle: "rgba(53,57,255,0.5)",
-            // globalCompositeOperation: 'lighter',
-            shadowColor: "rgba(53,57,255,0.2)",
-            shadowBlur: 3,
-            lineWidth: 3.0,
-            draw: "simple",
-          };
+            let options = {
+              strokeStyle: "rgba(53,57,255,0.5)",
+              // globalCompositeOperation: 'lighter',
+              shadowColor: "rgba(53,57,255,0.2)",
+              shadowBlur: 3,
+              lineWidth: 3.0,
+              draw: "simple",
+            };
 
-          let mapvLayer = new mapv.MaptalksLayer(
-            "mapv1",
-            dataSet,
-            options
-          ).addTo(map);
+            let mapvLayer = new mapv.MaptalksLayer(
+              "mapv1",
+              dataSet,
+              options
+            ).addTo(map);
 
-          let dataSet2 = new mapv.DataSet(timeData);
+            let dataSet2 = new mapv.DataSet(timeData);
 
-          let options2 = {
-            fillStyle: "rgba(255, 250, 250, 0.2)",
-            globalCompositeOperation: "lighter",
-            size: 1.5,
-            animation: {
-              stepsRange: {
-                start: 0,
-                end: 100,
+            let options2 = {
+              fillStyle: "rgba(255, 250, 250, 0.2)",
+              globalCompositeOperation: "lighter",
+              size: 1.5,
+              animation: {
+                stepsRange: {
+                  start: 0,
+                  end: 100,
+                },
+                trails: 3,
+                duration: 5,
               },
-              trails: 3,
-              duration: 5,
-            },
-            draw: "simple",
-          };
+              draw: "simple",
+            };
 
-          let mapvLayer2 = new mapv.MaptalksLayer(
-            "mapv2",
-            dataSet2,
-            options2
-          ).addTo(map);
-        });
-    });
-  },
-  methods: {},
-};
+            let mapvLayer2 = new mapv.MaptalksLayer(
+              "mapv2",
+              dataSet2,
+              options2
+            ).addTo(map);
+          });
+      });
+    },
+    methods: {},
+  };
 </script>
 <style lang="scss" scoped>
-.map-container {
-  .container {
-    width: 100%;
-    height: calc(100vh - 214px);
+  .map-container {
+    .container {
+      width: 100%;
+      height: calc(100vh - 214px);
+    }
   }
-}
 </style>

src/views/vab/markdown/index.vue

@@ -6,64 +6,63 @@
         :key="index"
         :label="item.label"
         :value="item.value"
-      >
-      </el-option>
+      ></el-option>
     </el-select>
     <div v-html="prettierList"></div>
   </div>
 </template>
 
 <script>
-import marked from "marked";
-import "github-markdown-css/github-markdown.css";
-import { getList } from "@/api/markdown";
-export default {
-  name: "Markdown",
-  data() {
-    return {
-      listLoading: true,
-      elementLoadingText: "正在加载...",
-      options: [
-        {
-          value: "0",
-          label: "Prettier",
-        },
-      ],
-      value: "0",
-      prettierList: null,
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  mounted() {},
-  methods: {
-    handleChange(val) {
-      this.value = val;
+  import marked from "marked";
+  import "github-markdown-css/github-markdown.css";
+  import { getList } from "@/api/markdown";
+  export default {
+    name: "Markdown",
+    data() {
+      return {
+        listLoading: true,
+        elementLoadingText: "正在加载...",
+        options: [
+          {
+            value: "0",
+            label: "Prettier",
+          },
+        ],
+        value: "0",
+        prettierList: null,
+      };
+    },
+    created() {
       this.fetchData();
     },
-    async fetchData() {
-      this.listLoading = true;
-      switch (this.value) {
-        case "0":
-          const { data } = await getList();
-          this.prettierList = marked(data || "", {
-            renderer: new marked.Renderer(),
-            gfm: true,
-            tables: true,
-            breaks: false,
-            pedantic: false,
-            sanitize: false,
-            smartLists: true,
-            smartypants: false,
-          });
+    mounted() {},
+    methods: {
+      handleChange(val) {
+        this.value = val;
+        this.fetchData();
+      },
+      async fetchData() {
+        this.listLoading = true;
+        switch (this.value) {
+          case "0":
+            const { data } = await getList();
+            this.prettierList = marked(data || "", {
+              renderer: new marked.Renderer(),
+              gfm: true,
+              tables: true,
+              breaks: false,
+              pedantic: false,
+              sanitize: false,
+              smartLists: true,
+              smartypants: false,
+            });
 
-          break;
-      }
-      setTimeout(() => {
-        this.listLoading = false;
-      }, 500);
+            break;
+        }
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 500);
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/markdownEditor/index.vue

@@ -23,29 +23,29 @@
 </template>
 
 <script>
-import VabMarkdownEditor from "@/plugins/vabMarkdownEditor";
+  import VabMarkdownEditor from "@/plugins/vabMarkdownEditor";
 
-export default {
-  name: "MarkdownEditor",
-  components: { VabMarkdownEditor },
-  data() {
-    return {
-      value: "# vue-admin-beautiful",
-      html: '<h1 id="vue-admin-beautiful">vue-admin-beautiful</h1>',
-    };
-  },
-  methods: {
-    handleAddText() {
-      this.$refs.mde.add("\n### 新增加的内容");
+  export default {
+    name: "MarkdownEditor",
+    components: { VabMarkdownEditor },
+    data() {
+      return {
+        value: "# vue-admin-beautiful",
+        html: '<h1 id="vue-admin-beautiful">vue-admin-beautiful</h1>',
+      };
     },
-    handleAddImg() {
-      this.$refs.mde.add(
-        "\n![](https://chu1204505056.gitee.io/byui-bookmarks/img/ewm.png)"
-      );
+    methods: {
+      handleAddText() {
+        this.$refs.mde.add("\n### 新增加的内容");
+      },
+      handleAddImg() {
+        this.$refs.mde.add(
+          "\n![](https://chu1204505056.gitee.io/byui-bookmarks/img/ewm.png)"
+        );
+      },
+      handleShowHtml(html) {
+        this.html = html;
+      },
     },
-    handleShowHtml(html) {
-      this.html = html;
-    },
-  },
-};
+  };
 </script>

src/views/vab/more/index.vue

@@ -8,8 +8,8 @@
         <el-card>
           <div slot="header">
             开源版本
-            <el-button style="float: right; padding: 3px 0;" type="text"
-              >永久免费 个人/商业使用
+            <el-button style="float: right; padding: 3px 0;" type="text">
+              永久免费 个人/商业使用
             </el-button>
           </div>
           <div>
@@ -21,8 +21,9 @@
                 <a
                   target="_blank"
                   href="https://github.com/chuzhixin/vue-admin-beautiful"
-                  >支持白嫖，也请给个star</a
                 >
+                  支持白嫖，也请给个star
+                </a>
               </li>
               <li>
                 提供讨论群专属文档，QQ群 972435319
@@ -36,9 +37,9 @@
         <el-card>
           <div slot="header">
             VIP群
-            <el-button style="float: right; padding: 3px 0;" type="text"
-              >￥100</el-button
-            >
+            <el-button style="float: right; padding: 3px 0;" type="text">
+              ￥100
+            </el-button>
           </div>
           <div>
             <ul>
@@ -56,9 +57,9 @@
         <el-card>
           <div slot="header">
             商业用途 完全自定义版权
-            <el-button style="float: right; padding: 3px 0;" type="text"
-              >￥299</el-button
-            >
+            <el-button style="float: right; padding: 3px 0;" type="text">
+              ￥299
+            </el-button>
           </div>
           <div>
             <ul>
@@ -78,38 +79,38 @@
 </template>
 
 <script>
-export default {
-  name: "More",
-  components: {},
-  data() {
-    return { nodeEnv: process.env.NODE_ENV };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+  export default {
+    name: "More",
+    components: {},
+    data() {
+      return { nodeEnv: process.env.NODE_ENV };
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 <style lang="scss" scoped>
-.more-container {
-  ::v-deep {
-    .el-card__body {
-      > div {
-        min-height: 70vh;
-        padding: 20px;
+  .more-container {
+    ::v-deep {
+      .el-card__body {
+        > div {
+          min-height: 70vh;
+          padding: 20px;
 
-        > ul {
-          > li {
-            line-height: 30px;
+          > ul {
+            > li {
+              line-height: 30px;
+            }
           }
-        }
 
-        > img {
-          display: block;
-          margin: 40px auto;
-          border: 1px solid #dedede;
+          > img {
+            display: block;
+            margin: 40px auto;
+            border: 1px solid #dedede;
+          }
         }
       }
     }
   }
-}
 </style>

src/views/vab/nested/menu1/menu1-1/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="menu1-1-container">
     <el-alert :closable="false" title="嵌套路由 1-1" type="success">
-      <router-view
-    /></el-alert>
+      <router-view />
+    </el-alert>
   </div>
 </template>
 <style lang="scss" scoped>
-[class*="-container"] {
-  padding: 15px;
-  background: $base-color-white;
-}
+  [class*="-container"] {
+    padding: 15px;
+    background: $base-color-white;
+  }
 </style>

src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue

@@ -8,8 +8,8 @@
   </div>
 </template>
 <style lang="scss" scoped>
-[class*="-container"] {
-  padding: 15px;
-  background: $base-color-white;
-}
+  [class*="-container"] {
+    padding: 15px;
+    background: $base-color-white;
+  }
 </style>

src/views/vab/permissions/index.vue

@@ -14,8 +14,8 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="handleChangePermission"
-          >切换权限
+        <el-button type="primary" @click="handleChangePermission">
+          切换权限
         </el-button>
       </el-form-item>
       <el-form-item label="当前账号拥有的权限">
@@ -119,47 +119,50 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import { tokenTableName } from "@/config/settings";
-import { getRouterList } from "@/api/router";
-import JsonEditor from "@/components/JsonEditor";
+  import { mapGetters } from "vuex";
+  import { tokenTableName } from "@/config/settings";
+  import { getRouterList } from "@/api/router";
+  import JsonEditor from "@/components/JsonEditor";
 
-export default {
-  name: "Permissions",
-  components: {
-    JsonEditor,
-  },
-  data() {
-    return {
-      form: {
-        account: "",
-      },
-      tableData: [],
-      res: [],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      username: "user/username",
-      permissions: "user/permissions",
-    }),
-  },
-  created() {
-    this.fetchData();
-  },
-  mounted() {
-    this.form.account = this.username;
-  },
-  methods: {
-    handleChangePermission() {
-      localStorage.setItem(tokenTableName, `${this.form.account}-accessToken`);
-      location.reload();
+  export default {
+    name: "Permissions",
+    components: {
+      JsonEditor,
+    },
+    data() {
+      return {
+        form: {
+          account: "",
+        },
+        tableData: [],
+        res: [],
+      };
+    },
+    computed: {
+      ...mapGetters({
+        username: "user/username",
+        permissions: "user/permissions",
+      }),
+    },
+    created() {
+      this.fetchData();
     },
-    async fetchData() {
-      const res = await getRouterList();
-      this.tableData = res.data;
-      this.res = res;
+    mounted() {
+      this.form.account = this.username;
+    },
+    methods: {
+      handleChangePermission() {
+        localStorage.setItem(
+          tokenTableName,
+          `${this.form.account}-accessToken`
+        );
+        location.reload();
+      },
+      async fetchData() {
+        const res = await getRouterList();
+        this.tableData = res.data;
+        this.res = res;
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/player/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="player-container">
-    <el-divider content-position="left"
-      >视频地址采用cdn加速服务，开发时需部署到到本地，使用方法可查看群文档
+    <el-divider content-position="left">
+      视频地址采用cdn加速服务，开发时需部署到到本地，使用方法可查看群文档
     </el-divider>
     <el-row :gutter="20">
       <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
@@ -33,41 +33,41 @@
 </template>
 
 <script>
-import { VabPlayerMp4, VabPlayerHls } from "@/plugins/vabPlayer.js";
+  import { VabPlayerMp4, VabPlayerHls } from "@/plugins/vabPlayer.js";
 
-export default {
-  name: "Player",
-  components: {
-    VabPlayerMp4,
-    VabPlayerHls,
-  },
-  data() {
-    return {
-      config1: {
-        id: "mse1",
-        url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.mp4",
-        volume: 1,
-        autoplay: false,
-      },
-      Player1: null,
-      config2: {
-        id: "mse2",
-        url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.m3u8",
-        volume: 1,
-        autoplay: false,
-      },
-      Player2: null,
-      config3: {
-        id: "mse3",
-        url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.flv",
-        volume: 1,
-        autoplay: false,
-      },
-      Player3: null,
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+  export default {
+    name: "Player",
+    components: {
+      VabPlayerMp4,
+      VabPlayerHls,
+    },
+    data() {
+      return {
+        config1: {
+          id: "mse1",
+          url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.mp4",
+          volume: 1,
+          autoplay: false,
+        },
+        Player1: null,
+        config2: {
+          id: "mse2",
+          url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.m3u8",
+          volume: 1,
+          autoplay: false,
+        },
+        Player2: null,
+        config3: {
+          id: "mse3",
+          url: "https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.flv",
+          volume: 1,
+          autoplay: false,
+        },
+        Player3: null,
+      };
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>

src/views/vab/qrCode/index.vue

@@ -14,33 +14,33 @@
 </template>
 
 <script>
-import VabQrCode from "@/components/VabQrCode";
+  import VabQrCode from "@/components/VabQrCode";
 
-export default {
-  name: "QrCode",
-  components: {
-    VabQrCode,
-  },
-  data() {
-    return {
-      url: "https://www.baidu.com",
-      imagePath: require("@/assets/qr_logo/lqr_logo.png"),
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
+  export default {
+    name: "QrCode",
+    components: {
+      VabQrCode,
+    },
+    data() {
+      return {
+        url: "https://www.baidu.com",
+        imagePath: require("@/assets/qr_logo/lqr_logo.png"),
+      };
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  };
 </script>
 
 <style lang="scss" scoped>
-.qr-code-container {
-  ::v-deep {
-    .el-card__body {
-      display: flex;
-      align-content: center;
-      justify-content: center;
+  .qr-code-container {
+    ::v-deep {
+      .el-card__body {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+      }
     }
   }
-}
 </style>

src/views/vab/smallComponents/index.vue

@@ -20,7 +20,8 @@
               style="float: right; padding: 3px 0;"
               type="text"
               @click="handleProfile"
-              >重载
+            >
+              重载
             </el-button>
           </div>
           <vab-profile
@@ -43,67 +44,67 @@
 </template>
 
 <script>
-import VabSnow from "@/components/VabSnow";
-import VabProfile from "@/components/VabProfile";
-import VabCharge from "@/components/VabCharge";
+  import VabSnow from "@/components/VabSnow";
+  import VabProfile from "@/components/VabProfile";
+  import VabCharge from "@/components/VabCharge";
 
-export default {
-  name: "Sticky",
-  components: {
-    VabSnow,
-    VabProfile,
-    VabCharge,
-  },
-  data() {
-    return {
-      profileShow: true,
-      faultTextShow: true,
-      solidTextShow: true,
-      startVal: 0,
-      endVal: 20,
-      timeInterval: null,
-    };
-  },
-  mounted() {
-    this.handleProfile();
-    this.handleSolidText();
-    this.timeInterval = setInterval(() => {
-      if (this.endVal < 100) {
-        this.startVal = this.endVal;
-        this.endVal++;
+  export default {
+    name: "Sticky",
+    components: {
+      VabSnow,
+      VabProfile,
+      VabCharge,
+    },
+    data() {
+      return {
+        profileShow: true,
+        faultTextShow: true,
+        solidTextShow: true,
+        startVal: 0,
+        endVal: 20,
+        timeInterval: null,
+      };
+    },
+    mounted() {
+      this.handleProfile();
+      this.handleSolidText();
+      this.timeInterval = setInterval(() => {
+        if (this.endVal < 100) {
+          this.startVal = this.endVal;
+          this.endVal++;
+        }
+      }, 5000);
+    },
+    beforeDestroy() {
+      if (this.clearInterval) {
+        clearInterval(this.timeInterval);
       }
-    }, 5000);
-  },
-  beforeDestroy() {
-    if (this.clearInterval) {
-      clearInterval(this.timeInterval);
-    }
-  },
-  methods: {
-    handleProfile() {
-      this.profileShow = false;
-      setTimeout(() => {
-        this.profileShow = true;
-      });
     },
-    handleSolidText() {
-      this.solidTextShow = false;
-      setTimeout(() => {
-        this.solidTextShow = true;
-      });
+    methods: {
+      handleProfile() {
+        this.profileShow = false;
+        setTimeout(() => {
+          this.profileShow = true;
+        });
+      },
+      handleSolidText() {
+        this.solidTextShow = false;
+        setTimeout(() => {
+          this.solidTextShow = true;
+        });
+      },
     },
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.small-components-container {
-  ::v-deep {
-    .el-card__body {
-      display: flex;
-      align-items: center; /* 垂直居中 */
-      justify-content: center; /* 水平居中 */
-      height: 430px;
+  .small-components-container {
+    ::v-deep {
+      .el-card__body {
+        display: flex;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
+        height: 430px;
+      }
     }
   }
-}
 </style>

src/views/vab/sticky/index.vue

@@ -280,35 +280,35 @@
 </template>
 
 <script>
-import VabSticky from "@/components/VabSticky";
+  import VabSticky from "@/components/VabSticky";
 
-export default {
-  name: "Sticky",
-  components: { VabSticky },
-  data() {
-    return {
-      time: "",
-      url: "",
-      platforms: ["a-platform"],
-      platformsOptions: [
-        { key: "a-platform", name: "platformA" },
-        { key: "b-platform", name: "platformB" },
-        { key: "c-platform", name: "platformC" },
-      ],
-      pickerOptions: {
-        disabledDate(time) {
-          return time.getTime() > Date.now();
+  export default {
+    name: "Sticky",
+    components: { VabSticky },
+    data() {
+      return {
+        time: "",
+        url: "",
+        platforms: ["a-platform"],
+        platformsOptions: [
+          { key: "a-platform", name: "platformA" },
+          { key: "b-platform", name: "platformB" },
+          { key: "c-platform", name: "platformC" },
+        ],
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
         },
-      },
-    };
-  },
-};
+      };
+    },
+  };
 </script>
 <style lang="scss" scoped>
-.sticky-container {
-  div {
-    height: 40px;
-    line-height: 40px;
+  .sticky-container {
+    div {
+      height: 40px;
+      line-height: 40px;
+    }
   }
-}
 </style>

src/views/vab/table/components/TableEdit.vue

@@ -21,55 +21,55 @@
 </template>
 
 <script>
-import { doEdit } from "@/api/table";
+  import { doEdit } from "@/api/table";
 
-export default {
-  name: "TableEdit",
-  data() {
-    return {
-      form: {
+  export default {
+    name: "TableEdit",
+    data() {
+      return {
+        form: {
+          title: "",
+          author: "",
+        },
+        rules: {
+          title: [{ required: true, trigger: "blur", message: "请输入标题" }],
+          author: [{ required: true, trigger: "blur", message: "请输入作者" }],
+        },
         title: "",
-        author: "",
-      },
-      rules: {
-        title: [{ required: true, trigger: "blur", message: "请输入标题" }],
-        author: [{ required: true, trigger: "blur", message: "请输入作者" }],
-      },
-      title: "",
-      dialogFormVisible: false,
-    };
-  },
-  created() {},
-  methods: {
-    showEdit(row) {
-      if (!row) {
-        this.title = "添加";
-      } else {
-        this.title = "编辑";
-        this.form = Object.assign({}, row);
-      }
-      this.dialogFormVisible = true;
-    },
-    close() {
-      this.$refs["form"].resetFields();
-      this.form = this.$options.data().form;
-      this.dialogFormVisible = false;
-      this.$emit("fetchData");
+        dialogFormVisible: false,
+      };
     },
-    save() {
-      this.$refs["form"].validate(async (valid) => {
-        if (valid) {
-          const { msg } = await doEdit(this.form);
-          this.$baseMessage(msg, "success");
-          this.$refs["form"].resetFields();
-          this.dialogFormVisible = false;
-          this.$emit("fetchData");
-          this.form = this.$options.data().form;
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = "添加";
         } else {
-          return false;
+          this.title = "编辑";
+          this.form = Object.assign({}, row);
         }
-      });
+        this.dialogFormVisible = true;
+      },
+      close() {
+        this.$refs["form"].resetFields();
+        this.form = this.$options.data().form;
+        this.dialogFormVisible = false;
+        this.$emit("fetchData");
+      },
+      save() {
+        this.$refs["form"].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form);
+            this.$baseMessage(msg, "success");
+            this.$refs["form"].resetFields();
+            this.dialogFormVisible = false;
+            this.$emit("fetchData");
+            this.form = this.$options.data().form;
+          } else {
+            return false;
+          }
+        });
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/table/index.vue

@@ -2,11 +2,11 @@
   <div class="table-container">
     <vab-query-form>
       <vab-query-form-left-panel>
-        <el-button icon="el-icon-plus" type="primary" @click="handleAdd"
-          >添加
+        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
+          添加
         </el-button>
-        <el-button icon="el-icon-delete" type="danger" @click="handleDelete"
-          >删除
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
+          删除
         </el-button>
         <el-button type="primary" @click="testMessage">baseMessage</el-button>
         <el-button type="primary" @click="testALert">baseAlert</el-button>
@@ -29,7 +29,8 @@
               type="primary"
               native-type="submit"
               @click="handleQuery"
-              >查询
+            >
+              查询
             </el-button>
           </el-form-item>
         </el-form>
@@ -87,8 +88,8 @@
             effect="dark"
             placement="top-start"
           >
-            <el-tag :type="scope.row.status | statusFilter"
-              >{{ scope.row.status }}
+            <el-tag :type="scope.row.status | statusFilter">
+              {{ scope.row.status }}
             </el-tag>
           </el-tooltip>
         </template>
@@ -106,11 +107,9 @@
         fixed="right"
       >
         <template slot-scope="scope">
-          <el-button type="text" @click="handleEdit(scope.row)"
-            >编辑
-          </el-button>
-          <el-button type="text" @click="handleDelete(scope.row)"
-            >删除
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(scope.row)">
+            删除
           </el-button>
         </template>
       </el-table-column>
@@ -129,137 +128,137 @@
 </template>
 
 <script>
-import { getList, doDelete } from "@/api/table";
-import TableEdit from "./components/TableEdit";
-export default {
-  name: "ComprehensiveTable",
-  components: {
-    TableEdit,
-  },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: "success",
-        draft: "gray",
-        deleted: "danger",
-      };
-      return statusMap[status];
+  import { getList, doDelete } from "@/api/table";
+  import TableEdit from "./components/TableEdit";
+  export default {
+    name: "ComprehensiveTable",
+    components: {
+      TableEdit,
     },
-  },
-  data() {
-    return {
-      imgShow: true,
-      list: [],
-      imageList: [],
-      listLoading: true,
-      layout: "total, sizes, prev, pager, next, jumper",
-      total: 0,
-      background: true,
-      selectRows: "",
-      elementLoadingText: "正在加载...",
-      queryForm: {
-        pageNo: 1,
-        pageSize: 20,
-        title: "",
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: "success",
+          draft: "gray",
+          deleted: "danger",
+        };
+        return statusMap[status];
       },
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  beforeDestroy() {},
-  mounted() {},
-  methods: {
-    tableSortChange() {
-      const imageList = [];
-      this.$refs.tableSort.tableData.forEach((item, index) => {
-        imageList.push(item.img);
-      });
-      this.imageList = imageList;
-    },
-    setSelectRows(val) {
-      this.selectRows = val;
     },
-    handleAdd() {
-      this.$refs["edit"].showEdit();
+    data() {
+      return {
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 0,
+        background: true,
+        selectRows: "",
+        elementLoadingText: "正在加载...",
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: "",
+        },
+      };
     },
-    handleEdit(row) {
-      this.$refs["edit"].showEdit(row);
+    created() {
+      this.fetchData();
     },
-    handleDelete(row) {
-      if (row.id) {
-        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
-          const { msg } = await doDelete({ ids: row.id });
-          this.$baseMessage(msg, "success");
-          this.fetchData();
+    beforeDestroy() {},
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = [];
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img);
         });
-      } else {
-        if (this.selectRows.length > 0) {
-          const ids = this.selectRows.map((item) => item.id).join();
-          this.$baseConfirm("你确定要删除选中项吗", null, async () => {
-            const { msg } = await doDelete({ ids: ids });
+        this.imageList = imageList;
+      },
+      setSelectRows(val) {
+        this.selectRows = val;
+      },
+      handleAdd() {
+        this.$refs["edit"].showEdit();
+      },
+      handleEdit(row) {
+        this.$refs["edit"].showEdit(row);
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm("你确定要删除当前项吗", null, async () => {
+            const { msg } = await doDelete({ ids: row.id });
             this.$baseMessage(msg, "success");
             this.fetchData();
           });
         } else {
-          this.$baseMessage("未选中任何行", "error");
-          return false;
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join();
+            this.$baseConfirm("你确定要删除选中项吗", null, async () => {
+              const { msg } = await doDelete({ ids: ids });
+              this.$baseMessage(msg, "success");
+              this.fetchData();
+            });
+          } else {
+            this.$baseMessage("未选中任何行", "error");
+            return false;
+          }
         }
-      }
-    },
-    handleSizeChange(val) {
-      this.queryForm.pageSize = val;
-      this.fetchData();
-    },
-    handleCurrentChange(val) {
-      this.queryForm.pageNo = val;
-      this.fetchData();
-    },
-    handleQuery() {
-      this.queryForm.pageNo = 1;
-      this.fetchData();
-    },
-    async fetchData() {
-      this.listLoading = true;
-      const { data, totalCount } = await getList(this.queryForm);
-      this.list = data;
-      const imageList = [];
-      data.forEach((item, index) => {
-        imageList.push(item.img);
-      });
-      this.imageList = imageList;
-      this.total = totalCount;
-      setTimeout(() => {
-        this.listLoading = false;
-      }, 500);
-    },
-    testMessage() {
-      this.$baseMessage("test1", "success");
-    },
-    testALert() {
-      this.$baseAlert("11");
-      this.$baseAlert("11", "自定义标题", () => {
-        /* 可以写回调; */
-      });
-      this.$baseAlert("11", null, () => {
-        /* 可以写回调; */
-      });
-    },
-    testConfirm() {
-      this.$baseConfirm(
-        "你确定要执行该操作?",
-        null,
-        () => {
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val;
+        this.fetchData();
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1;
+        this.fetchData();
+      },
+      async fetchData() {
+        this.listLoading = true;
+        const { data, totalCount } = await getList(this.queryForm);
+        this.list = data;
+        const imageList = [];
+        data.forEach((item, index) => {
+          imageList.push(item.img);
+        });
+        this.imageList = imageList;
+        this.total = totalCount;
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 500);
+      },
+      testMessage() {
+        this.$baseMessage("test1", "success");
+      },
+      testALert() {
+        this.$baseAlert("11");
+        this.$baseAlert("11", "自定义标题", () => {
           /* 可以写回调; */
-        },
-        () => {
+        });
+        this.$baseAlert("11", null, () => {
           /* 可以写回调; */
-        }
-      );
-    },
-    testNotify() {
-      this.$baseNotify("测试消息提示", "test", "success", "bottom-right");
+        });
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          "你确定要执行该操作?",
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        );
+      },
+      testNotify() {
+        this.$baseNotify("测试消息提示", "test", "success", "bottom-right");
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/table/inlineEditTable.vue

@@ -66,44 +66,44 @@
 </template>
 
 <script>
-import { getList } from "@/api/table";
+  import { getList } from "@/api/table";
 
-export default {
-  name: "InlineEditTable",
-  data() {
-    return {
-      list: null,
-      listLoading: true,
-      elementLoadingText: "正在加载...",
-      queryForm: {
-        pageNo: 1,
-        pageSize: 20,
-        title: "",
-      },
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    async getList() {
-      this.listLoading = true;
-      const { data } = await getList(this.queryForm);
-      this.list = data.map((v) => {
-        this.$set(v, "edit", false);
-        v.originalTitle = v.title;
-        return v;
-      });
-      this.listLoading = false;
+  export default {
+    name: "InlineEditTable",
+    data() {
+      return {
+        list: null,
+        listLoading: true,
+        elementLoadingText: "正在加载...",
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: "",
+        },
+      };
     },
-    cancelEdit(row) {
-      row.title = row.originalTitle;
-      row.edit = false;
+    created() {
+      this.getList();
     },
-    confirmEdit(row) {
-      row.edit = false;
-      row.originalTitle = row.title;
+    methods: {
+      async getList() {
+        this.listLoading = true;
+        const { data } = await getList(this.queryForm);
+        this.list = data.map((v) => {
+          this.$set(v, "edit", false);
+          v.originalTitle = v.title;
+          return v;
+        });
+        this.listLoading = false;
+      },
+      cancelEdit(row) {
+        row.title = row.originalTitle;
+        row.edit = false;
+      },
+      confirmEdit(row) {
+        row.edit = false;
+        row.originalTitle = row.title;
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/tree/index.vue

@@ -32,21 +32,24 @@
                 class="vab-tree-btn"
                 title="添加"
                 @click="() => append(node, data, 0)"
-                ><i class="el-icon-plus"></i
-              ></a>
+              >
+                <i class="el-icon-plus"></i>
+              </a>
               <a
                 class="vab-tree-btn"
                 title="编辑"
                 @click="() => edit(node, data, 1)"
-                ><i class="el-icon-edit"></i
-              ></a>
+              >
+                <i class="el-icon-edit"></i>
+              </a>
               <a
                 v-if="node.data.rank !== 1"
                 class="vab-tree-btn"
                 title="刪除"
                 @click="() => remove(node, data)"
-                ><i class="el-icon-delete"></i
-              ></a>
+              >
+                <i class="el-icon-delete"></i>
+              </a>
             </span>
           </span>
         </el-tree>
@@ -85,9 +88,9 @@
                 >
                   <i class="el-icon-plus"></i>
                 </a>
-                <a class="vab-tree-btn" title="编辑"
-                  ><i class="el-icon-edit"></i
-                ></a>
+                <a class="vab-tree-btn" title="编辑">
+                  <i class="el-icon-edit"></i>
+                </a>
                 <a
                   v-if="node.data.rank !== 1"
                   class="vab-tree-btn"
@@ -119,12 +122,16 @@
               </span>
               <span class="vab-tree-options">
                 <!-- <a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加""><i class="el-icon-plus"></i></a> -->
-                <a class="vab-tree-btn" title="编辑"
-                  ><i class="el-icon-edit"></i
-                ></a>
-                <a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除"
-                  ><i class="el-icon-delete"></i
-                ></a>
+                <a class="vab-tree-btn" title="编辑">
+                  <i class="el-icon-edit"></i>
+                </a>
+                <a
+                  v-if="node.data.rank !== 1"
+                  class="vab-tree-btn"
+                  title="刪除"
+                >
+                  <i class="el-icon-delete"></i>
+                </a>
               </span>
             </span>
           </el-tree>
@@ -214,258 +221,258 @@
 </template>
 
 <script>
-import { getTreeList } from "@/api/tree";
+  import { getTreeList } from "@/api/tree";
 
-export default {
-  name: "Tree",
-  data() {
-    return {
-      dialogTitle: "添加节点",
-      treeFlag: 0,
-      treeDialogVisible: false,
-      treeForm: {
-        id: "",
-        name: "",
-      },
-      checkNodeKeys: [],
-      filterText: "",
-      data2: [],
-      defaultProps: {
-        children: "children",
-        label: "name",
-      },
-      defaultExpendedKeys: [],
-      defaultCheckedKeys: [],
-      loading: true,
-      keyW: "",
-      filterDevLlist: [],
-      isShow: false,
-      updateTree: true,
-      /* 单选树-多选树---------开始 */
-      selectLevel: 4, // 树可选叶子level等级
-      singleSelectTreeVal: "", //单选树默认label值
-      singleSelectTreeKey: "", //单选树默认key值
-      selectTreeData: [], //单选树的值
-      selectTreeDefaultSelectedKeys: [], //单选树默认展开的key值数组
-      selectTreeDefaultProps: {
-        children: "children",
-        label: "name",
-      },
-      multipleSelectTreeVal: [], //多选树默认label值
-      multipleSelectTreeKey: "", //多选树默认key值
-      /* 单选树-多选树---------结束 */
-    };
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.demoTree.filter(val);
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.getTreeListFuc(1);
-      this.setCheckedKeys();
-      // 初始化单选树
-      this.initSingleTree("single");
-      // 初始化多选树
-      this.initSingleTree("multiple");
-    });
-  },
-  methods: {
-    // 树level小于n级展开方法
-    openTree(treeData, n) {
-      const each = (data) => {
-        data.forEach((e) => {
-          if (e.rank <= n) {
-            this.defaultExpendedKeys.push(e.id);
-          }
-          if (e.children.length > 0) {
-            each(e.children);
-          }
-        });
-      };
-
-      each(treeData);
-    },
-    // 获取tree数据
-    async getTreeListFuc(flag) {
-      const { data } = await getTreeList();
-      this.data2 = data;
-      if (flag) {
-        this.openTree(this.data2, 2);
-      }
-    },
-    // 节点过滤操作
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    },
-    // 添加节点操作
-    append(node, data, flag) {
-      this.treeFlag = flag;
-      this.dialogTitle = "添加节点";
-      this.treeForm = {
-        id: "",
-        name: "",
+  export default {
+    name: "Tree",
+    data() {
+      return {
+        dialogTitle: "添加节点",
+        treeFlag: 0,
+        treeDialogVisible: false,
+        treeForm: {
+          id: "",
+          name: "",
+        },
+        checkNodeKeys: [],
+        filterText: "",
+        data2: [],
+        defaultProps: {
+          children: "children",
+          label: "name",
+        },
+        defaultExpendedKeys: [],
+        defaultCheckedKeys: [],
+        loading: true,
+        keyW: "",
+        filterDevLlist: [],
+        isShow: false,
+        updateTree: true,
+        /* 单选树-多选树---------开始 */
+        selectLevel: 4, // 树可选叶子level等级
+        singleSelectTreeVal: "", //单选树默认label值
+        singleSelectTreeKey: "", //单选树默认key值
+        selectTreeData: [], //单选树的值
+        selectTreeDefaultSelectedKeys: [], //单选树默认展开的key值数组
+        selectTreeDefaultProps: {
+          children: "children",
+          label: "name",
+        },
+        multipleSelectTreeVal: [], //多选树默认label值
+        multipleSelectTreeKey: "", //多选树默认key值
+        /* 单选树-多选树---------结束 */
       };
-      this.treeDialogVisible = true;
     },
-    // 编辑节点操作
-    edit(node, data, flag) {
-      this.treeFlag = flag;
-      this.dialogTitle = "编辑节点";
-      this.treeForm = {
-        id: data.id,
-        name: data.name,
-      };
-      this.treeDialogVisible = true;
+    watch: {
+      filterText(val) {
+        this.$refs.demoTree.filter(val);
+      },
     },
-    // 删除节点操作
-    remove(node, data) {
-      this.$baseConfirm("你确定要删除该节点?", null, async () => {
-        const { msg } = getTreeList();
-        this.$baseMessage(msg, "success");
-        this.getTreeListFuc(0);
+    mounted() {
+      this.$nextTick(() => {
+        this.getTreeListFuc(1);
+        this.setCheckedKeys();
+        // 初始化单选树
+        this.initSingleTree("single");
+        // 初始化多选树
+        this.initSingleTree("multiple");
       });
     },
-    // 保存添加和编辑
-    saveTree() {
-      this.$refs.treeForm.validate(async (valid) => {
-        if (valid) {
-          const { msg } = await getTreeList();
+    methods: {
+      // 树level小于n级展开方法
+      openTree(treeData, n) {
+        const each = (data) => {
+          data.forEach((e) => {
+            if (e.rank <= n) {
+              this.defaultExpendedKeys.push(e.id);
+            }
+            if (e.children.length > 0) {
+              each(e.children);
+            }
+          });
+        };
+
+        each(treeData);
+      },
+      // 获取tree数据
+      async getTreeListFuc(flag) {
+        const { data } = await getTreeList();
+        this.data2 = data;
+        if (flag) {
+          this.openTree(this.data2, 2);
+        }
+      },
+      // 节点过滤操作
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.name.indexOf(value) !== -1;
+      },
+      // 添加节点操作
+      append(node, data, flag) {
+        this.treeFlag = flag;
+        this.dialogTitle = "添加节点";
+        this.treeForm = {
+          id: "",
+          name: "",
+        };
+        this.treeDialogVisible = true;
+      },
+      // 编辑节点操作
+      edit(node, data, flag) {
+        this.treeFlag = flag;
+        this.dialogTitle = "编辑节点";
+        this.treeForm = {
+          id: data.id,
+          name: data.name,
+        };
+        this.treeDialogVisible = true;
+      },
+      // 删除节点操作
+      remove(node, data) {
+        this.$baseConfirm("你确定要删除该节点?", null, async () => {
+          const { msg } = getTreeList();
           this.$baseMessage(msg, "success");
-          this.treeDialogVisible = false;
           this.getTreeListFuc(0);
+        });
+      },
+      // 保存添加和编辑
+      saveTree() {
+        this.$refs.treeForm.validate(async (valid) => {
+          if (valid) {
+            const { msg } = await getTreeList();
+            this.$baseMessage(msg, "success");
+            this.treeDialogVisible = false;
+            this.getTreeListFuc(0);
+          }
+        });
+      },
+      // 设置节点选中
+      setCheckedKeys() {
+        this.$refs.demoTree.setCheckedKeys([1]);
+      },
+      // 点击叶子节点
+      nodeClick(data, node, el) {},
+      // 节点选中操作
+      checkNode(data, node, el) {
+        this.checkNodeKeys = node.checkedKeys;
+      },
+      // 节点展开操作
+      nodeExpand(data, node, el) {
+        this.defaultExpendedKeys.push(data.id);
+      },
+      // 节点关闭操作
+      nodeCollapse(data, node, el) {
+        this.defaultExpendedKeys.splice(
+          this.defaultExpendedKeys.findIndex((item) => item.id === data.id),
+          1
+        );
+      },
+      async loadNode(node, resolve) {
+        if (node.level === 0) {
+          const { data } = await getTreeList();
+          this.loading = false;
+          return resolve(data);
+        } else {
+          const { data } = await getTreeList();
+          return resolve(res.data);
         }
-      });
-    },
-    // 设置节点选中
-    setCheckedKeys() {
-      this.$refs.demoTree.setCheckedKeys([1]);
-    },
-    // 点击叶子节点
-    nodeClick(data, node, el) {},
-    // 节点选中操作
-    checkNode(data, node, el) {
-      this.checkNodeKeys = node.checkedKeys;
-    },
-    // 节点展开操作
-    nodeExpand(data, node, el) {
-      this.defaultExpendedKeys.push(data.id);
-    },
-    // 节点关闭操作
-    nodeCollapse(data, node, el) {
-      this.defaultExpendedKeys.splice(
-        this.defaultExpendedKeys.findIndex((item) => item.id === data.id),
-        1
-      );
-    },
-    async loadNode(node, resolve) {
-      if (node.level === 0) {
-        const { data } = await getTreeList();
-        this.loading = false;
-        return resolve(data);
-      } else {
-        const { data } = await getTreeList();
-        return resolve(res.data);
-      }
-    },
-    //懒加载树输入框筛选方法
-    async showTreeList(value) {
-      if (typeof value === "string") {
-        this.keyW = value.trim();
-      }
-      if (this.keyW.length !== 0) {
-        // 请求后台返回查询结果
-        let treeOption = {};
-        treeOption = {
-          keyWord: this.keyW,
-        };
-        const { data } = await getTreeList();
-        this.filterDevLlist = data;
-        this.isShow = true;
-      } else {
-        this.isShow = false;
-      }
-    },
-    /* 单选/多选树方法-------------------开始 */
-    // 初始化单选树的值
-    async initSingleTree(treeType) {
-      const { data } = await getTreeList();
-      this.selectTreeData = data;
-      this.$nextTick(() => {
-        this.selectTreeDefaultSelectedKeys = this.singleSelectTreeKey.split(
-          ","
-        ); // 设置默认展开
-        if (treeType == "single") {
-          //单选树
-          this.$refs.singleSelectTree.setCurrentKey(this.singleSelectTreeKey); // 设置默认选中
+      },
+      //懒加载树输入框筛选方法
+      async showTreeList(value) {
+        if (typeof value === "string") {
+          this.keyW = value.trim();
+        }
+        if (this.keyW.length !== 0) {
+          // 请求后台返回查询结果
+          let treeOption = {};
+          treeOption = {
+            keyWord: this.keyW,
+          };
+          const { data } = await getTreeList();
+          this.filterDevLlist = data;
+          this.isShow = true;
         } else {
-          // 多选树
-          this.$refs.multipleSelectTree.setCheckedKeys(
-            this.selectTreeDefaultSelectedKeys
-          );
+          this.isShow = false;
         }
-      });
-    },
-    // 清除单选树选中
-    selectTreeClearHandle(type) {
-      this.selectTreeDefaultSelectedKeys = [];
-      this.clearSelected();
-      if (type == "single") {
-        this.singleSelectTreeVal = "";
-        this.singleSelectTreeKey = "";
-        this.$refs.singleSelectTree.setCurrentKey(""); // 设置默认选中
-      } else {
-        this.multipleSelectTreeVal = [];
-        this.multipleSelectTreeKey = "";
-        this.$refs.multipleSelectTree.setCheckedKeys([]);
-      }
-    },
-    /* 清空选中样式 */
-    clearSelected() {
-      const allNode = document.querySelectorAll(
-        "#singleSelectTree .el-tree-node"
-      );
-      allNode.forEach((element) => element.classList.remove("is-current"));
-    },
-    // select多选时移除某项操作
-    removeSelectTreeTag(val) {
-      const stack = JSON.parse(JSON.stringify(this.selectTreeData));
-      while (stack.length) {
-        const curr = stack.shift();
-        if (curr.name == val) {
-          return this.$refs.multipleSelectTree.setChecked(curr.id, false);
+      },
+      /* 单选/多选树方法-------------------开始 */
+      // 初始化单选树的值
+      async initSingleTree(treeType) {
+        const { data } = await getTreeList();
+        this.selectTreeData = data;
+        this.$nextTick(() => {
+          this.selectTreeDefaultSelectedKeys = this.singleSelectTreeKey.split(
+            ","
+          ); // 设置默认展开
+          if (treeType == "single") {
+            //单选树
+            this.$refs.singleSelectTree.setCurrentKey(this.singleSelectTreeKey); // 设置默认选中
+          } else {
+            // 多选树
+            this.$refs.multipleSelectTree.setCheckedKeys(
+              this.selectTreeDefaultSelectedKeys
+            );
+          }
+        });
+      },
+      // 清除单选树选中
+      selectTreeClearHandle(type) {
+        this.selectTreeDefaultSelectedKeys = [];
+        this.clearSelected();
+        if (type == "single") {
+          this.singleSelectTreeVal = "";
+          this.singleSelectTreeKey = "";
+          this.$refs.singleSelectTree.setCurrentKey(""); // 设置默认选中
+        } else {
+          this.multipleSelectTreeVal = [];
+          this.multipleSelectTreeKey = "";
+          this.$refs.multipleSelectTree.setCheckedKeys([]);
         }
-        if (curr.children && curr.children.length) {
-          stack.unshift(...curr.children);
+      },
+      /* 清空选中样式 */
+      clearSelected() {
+        const allNode = document.querySelectorAll(
+          "#singleSelectTree .el-tree-node"
+        );
+        allNode.forEach((element) => element.classList.remove("is-current"));
+      },
+      // select多选时移除某项操作
+      removeSelectTreeTag(val) {
+        const stack = JSON.parse(JSON.stringify(this.selectTreeData));
+        while (stack.length) {
+          const curr = stack.shift();
+          if (curr.name == val) {
+            return this.$refs.multipleSelectTree.setChecked(curr.id, false);
+          }
+          if (curr.children && curr.children.length) {
+            stack.unshift(...curr.children);
+          }
         }
-      }
-    },
-    changeMultipleSelectTreeHandle(val) {},
-    // 点击叶子节点
-    selectTreeNodeClick(data, node, el) {
-      if (data.rank >= this.selectLevel) {
-        this.singleSelectTreeVal = data.name;
-        this.singleSelectTreeKey = data.id;
-        this.$refs.singleTree.blur();
-      }
-    },
-    // 节点选中操作
-    multipleSelectTreeCheckNode(data, node, el) {
-      const checkedNodes = this.$refs.multipleSelectTree.getCheckedNodes();
-      const keyArr = [];
-      const valueArr = [];
-      checkedNodes.forEach((item) => {
-        if (item.rank >= this.selectLevel) {
-          keyArr.push(item.id);
-          valueArr.push(item.name);
+      },
+      changeMultipleSelectTreeHandle(val) {},
+      // 点击叶子节点
+      selectTreeNodeClick(data, node, el) {
+        if (data.rank >= this.selectLevel) {
+          this.singleSelectTreeVal = data.name;
+          this.singleSelectTreeKey = data.id;
+          this.$refs.singleTree.blur();
         }
-      });
-      this.multipleSelectTreeVal = valueArr;
-      this.multipleSelectTreeKey = keyArr.join(",");
+      },
+      // 节点选中操作
+      multipleSelectTreeCheckNode(data, node, el) {
+        const checkedNodes = this.$refs.multipleSelectTree.getCheckedNodes();
+        const keyArr = [];
+        const valueArr = [];
+        checkedNodes.forEach((item) => {
+          if (item.rank >= this.selectLevel) {
+            keyArr.push(item.id);
+            valueArr.push(item.name);
+          }
+        });
+        this.multipleSelectTreeVal = valueArr;
+        this.multipleSelectTreeKey = keyArr.join(",");
+      },
+      /* 单选/多选树方法-------------------结束 */
     },
-    /* 单选/多选树方法-------------------结束 */
-  },
-};
+  };
 </script>

src/views/vab/upload/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="upload-container">
-    <el-divider content-position="left">演示环境可能无法模拟上传 </el-divider>
+    <el-divider content-position="left">演示环境可能无法模拟上传</el-divider>
     <vab-upload
       ref="vabUpload"
       url="/upload"
@@ -8,27 +8,27 @@
       :limit="50"
       :size="2"
     ></vab-upload>
-    <el-button type="primary" @click="handleShow({ key: 'value' })"
-      >模拟上传
+    <el-button type="primary" @click="handleShow({ key: 'value' })">
+      模拟上传
     </el-button>
   </div>
 </template>
 
 <script>
-import VabUpload from "@/components/VabUpload";
+  import VabUpload from "@/components/VabUpload";
 
-export default {
-  name: "Upload",
-  components: {
-    VabUpload,
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    handleShow(data) {
-      this.$refs["vabUpload"].handleShow(data);
+  export default {
+    name: "Upload",
+    components: {
+      VabUpload,
     },
-  },
-};
+    data() {
+      return {};
+    },
+    methods: {
+      handleShow(data) {
+        this.$refs["vabUpload"].handleShow(data);
+      },
+    },
+  };
 </script>

src/views/vab/verify/index.vue

@@ -12,24 +12,24 @@
 </template>
 
 <script>
-import VabVerify from "@/plugins/vabVerify";
-export default {
-  name: "Verify",
-  components: { VabVerify },
-  data() {
-    return {
-      text: "向右滑动",
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    handleSuccess() {
-      this.$baseMessage("校验成功", "success");
+  import VabVerify from "@/plugins/vabVerify";
+  export default {
+    name: "Verify",
+    components: { VabVerify },
+    data() {
+      return {
+        text: "向右滑动",
+      };
     },
-    handleError() {
-      this.$baseMessage("校验失败", "error");
+    created() {},
+    mounted() {},
+    methods: {
+      handleSuccess() {
+        this.$baseMessage("校验成功", "success");
+      },
+      handleError() {
+        this.$baseMessage("校验失败", "error");
+      },
     },
-  },
-};
+  };
 </script>

src/views/vab/webSocket/index.vue

@@ -14,7 +14,7 @@
             <el-input v-model="form.message"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="submit">发送消息 </el-button>
+            <el-button type="primary" @click="submit">发送消息</el-button>
           </el-form-item>
           <el-form-item label="返回信息汇总">
             {{ data }}
@@ -26,62 +26,62 @@
 </template>
 
 <script>
-export default {
-  name: "WebSocket",
-  components: {},
-  data() {
-    return {
-      url: "ws://123.207.136.134:9010/ajaxchattest",
-      webSocket: null,
-      data: [],
-      status: "",
-      form: { message: null },
-      rules: {
-        message: [{ required: true, message: "请输入消息", trigger: "blur" }],
-      },
-    };
-  },
-  created() {
-    this.init();
-  },
-  destroyed() {
-    this.webSocket.close();
-  },
-  methods: {
-    submit() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          this.send(this.form.message);
-        } else {
-          return false;
-        }
-      });
-    },
-    init() {
-      const wsuri = this.url;
-      this.webSocket = new WebSocket(wsuri);
-      this.webSocket.onmessage = this.onmessage;
-      this.webSocket.onopen = this.onopen;
-      this.webSocket.onerror = this.onerror;
-      this.webSocket.onclose = this.onclose;
-    },
-    onopen() {
-      this.status = "成功";
+  export default {
+    name: "WebSocket",
+    components: {},
+    data() {
+      return {
+        url: "ws://123.207.136.134:9010/ajaxchattest",
+        webSocket: null,
+        data: [],
+        status: "",
+        form: { message: null },
+        rules: {
+          message: [{ required: true, message: "请输入消息", trigger: "blur" }],
+        },
+      };
     },
-    onerror() {
-      this.status = "失败";
-      this.initWebSocket();
+    created() {
+      this.init();
     },
-    onmessage({ data }) {
-      //截掉测试webSocket地址广告
-      this.data.push(data.substring(0, data.length - 66));
+    destroyed() {
+      this.webSocket.close();
     },
-    send(Data) {
-      this.webSocket.send(Data);
-    },
-    onclose(e) {
-      this.status = "断开";
+    methods: {
+      submit() {
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+            this.send(this.form.message);
+          } else {
+            return false;
+          }
+        });
+      },
+      init() {
+        const wsuri = this.url;
+        this.webSocket = new WebSocket(wsuri);
+        this.webSocket.onmessage = this.onmessage;
+        this.webSocket.onopen = this.onopen;
+        this.webSocket.onerror = this.onerror;
+        this.webSocket.onclose = this.onclose;
+      },
+      onopen() {
+        this.status = "成功";
+      },
+      onerror() {
+        this.status = "失败";
+        this.initWebSocket();
+      },
+      onmessage({ data }) {
+        //截掉测试webSocket地址广告
+        this.data.push(data.substring(0, data.length - 66));
+      },
+      send(Data) {
+        this.webSocket.send(Data);
+      },
+      onclose(e) {
+        this.status = "断开";
+      },
     },
-  },
-};
+  };
 </script>