Merge branch 'V2'

package-lock.json

@@ -553,6 +553,12 @@
         }
       }
     },
+    "@element-plus/icons": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons/-/icons-0.0.11.tgz",
+      "integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==",
+      "dev": true
+    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -610,9 +616,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.9.1",
+      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
-      "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA==",
+      "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
       "dev": true
     },
     "@rollup/plugin-node-resolve": {
@@ -954,9 +960,9 @@
       "dev": true
     },
     "async-validator": {
-      "version": "3.5.1",
+      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.2.tgz",
-      "integrity": "sha512-DDmKA7sdSAJtTVeNZHrnr2yojfFaoeW8MfQN8CeuXg8DDQHTqKk9Fdv38dSvnesHoO8MUwMI2HphOeSyIF+wmQ==",
+      "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==",
       "dev": true
     },
     "at-least-node": {
@@ -1540,9 +1546,9 @@
       "dev": true
     },
     "dayjs": {
-      "version": "1.10.4",
+      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
-      "integrity": "sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==",
       "dev": true
     },
     "debug": {
@@ -1751,11 +1757,12 @@
       "dev": true
     },
     "element-plus": {
-      "version": "1.0.2-beta.35",
+      "version": "1.0.2-beta.71",
-      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.0.2-beta.35.tgz",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.0.2-beta.71.tgz",
-      "integrity": "sha512-T12EfxbWoNOrWE2bzXFPJdOU3cl4YWuLwxE5QKM40oPw1VYPMRrRB8Uy5TwF8h3itxzsJQ5iFj2rdDO+q3Jcdg==",
+      "integrity": "sha512-tlfbRORIav8gJcIpjZI5F6aJIVHIaDuGO6/vKu43lgYq4JS2JPNRTjvrSE2p4f5xLfaFNfOWjCS3sybXLfMg8g==",
       "dev": true,
       "requires": {
+        "@element-plus/icons": "^0.0.11",
         "@popperjs/core": "^2.4.4",
         "async-validator": "^3.4.0",
         "dayjs": "1.x",
@@ -4773,12 +4780,12 @@
       "dev": true
     },
     "sass": {
-      "version": "1.32.8",
+      "version": "1.41.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.41.1.tgz",
-      "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==",
+      "integrity": "sha512-vIjX7izRxw3Wsiez7SX7D+j76v7tenfO18P59nonjr/nzCkZuoHuF7I/Fo0ZRZPKr88v29ivIdE9BqGDgQD/Nw==",
       "dev": true,
       "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0"
       }
     },
     "semver": {

package.json

@@ -33,7 +33,7 @@
     "autoprefixer": "^10.2.5",
     "babel-eslint": "^10.1.0",
     "crypto-js": "^4.0.0",
-    "element-plus": "^1.0.2-beta.35",
+    "element-plus": "^1.0.2-beta.71",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-0",
@@ -41,7 +41,7 @@
     "lint-staged": "^9.5.0",
     "mockjs": "^1.1.0",
     "prettier": "^1.19.1",
-    "sass": "^1.32.8",
+    "sass": "^1.41.1",
     "vite": "^2.1.0",
     "vite-plugin-mock": "^2.3.0",
     "vite-plugin-svg-icons": "^0.4.0"

src/App.vue

@@ -24,7 +24,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-23 17:26:35
+ * @LastEditTime: 2021-09-18 13:17:44
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -32,9 +32,29 @@
  -->
 
 <template>
-  <router-view />
+  <el-config-provider :locale="locale">
+    <router-view />
+  </el-config-provider>
 </template>
 
+<script>
+import { defineComponent } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+
+import zhCn from 'element-plus/lib/locale/lang/zh-cn'
+
+export default defineComponent({
+  components: {
+    [ElConfigProvider.name]: ElConfigProvider,
+  },
+  data() {
+    return {
+      locale: zhCn,
+    }
+  },
+})
+</script>
+
 <style lang="scss">
 html,
 body,

src/assets/style/element-variables.scss

@@ -1,7 +1,11 @@
 /* 改变主题色变量 */
-$--color-primary: $mainColor;
+$--colors: (
+  'primary': (
+    'base': $mainColor,
+  ),
+);
 
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: "element-plus/lib/theme-chalk/fonts";
+$--font-path: 'element-plus/lib/theme-chalk/fonts';
-
+@import 'element-plus/packages/theme-chalk/src/reset';
-@import "element-plus/packages/theme-chalk/src/index";
+@import 'element-plus/packages/theme-chalk/src/index';

src/components/ProTable/index.vue

@@ -22,7 +22,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:45:46
+ * @LastEditTime: 2021-09-29 15:04:03
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -38,7 +38,7 @@
       class="search"
       :model="searchModel"
       :inline="true"
-      label-position="left"
+      label-position="right"
       :label-width="search.labelWidth"
       ref="searchForm"
     >
@@ -48,8 +48,9 @@
         :label="item.label"
         :prop="item.name"
       >
+        <slot v-if="item.type === 'custom'" :name="item.slot" />
         <el-select
-          v-if="item.type === 'select'"
+          v-else-if="item.type === 'select'"
           v-model="searchModel[item.name]"
           :filterable="!!item.filterable"
           :multiple="!!item.multiple"
@@ -171,6 +172,7 @@
         />
         <el-input
           v-else-if="item.type === 'textarea'"
+          :maxlength="item.maxlength"
           type="textarea"
           clearable
           v-model="searchModel[item.name]"
@@ -179,6 +181,7 @@
         ></el-input>
         <el-input
           v-else
+          :maxlength="item.maxlength"
           v-model="searchModel[item.name]"
           clearable
           :placeholder="`请输入${item.label}`"
@@ -219,7 +222,7 @@
           v-for="item in columns"
           :key="item.label"
           :filter-method="item.filters && filterHandler"
-          show-overflow-tooltip
+          :show-overflow-tooltip="!item.wrap"
           v-bind="item"
         >
           <template #header="scope" v-if="!!item.labelSlot">
@@ -247,7 +250,7 @@
   </div>
 </template>
 <script>
-import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
+import { defineComponent, reactive, toRefs, onBeforeMount, watch } from 'vue'
 const formatDate = (date, format) => {
   var obj = {
     'M+': date.getMonth() + 1,
@@ -321,6 +324,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    // 是否隐藏按钮操作
+    hideToolbar: {
+      type: Boolean,
+      default: false,
+    },
     // 搜索表单配置，false表示不显示搜索表单
     search: {
       type: [Boolean, Object],
@@ -337,8 +345,8 @@ export default defineComponent({
     },
     // 行数据的Key，同elementUI的table组件的row-key
     rowKey: {
-      type: String,
+      type: [String, Function],
-      default: 'id',
+      default: () => {},
     },
     // 分页配置，false表示不显示分页
     pagination: {
@@ -376,8 +384,8 @@ export default defineComponent({
       state.loading = true
       const searchModel = optimizeFields(props.search)
       const { data, total } = await props.request({
-        pageNum: state.pageNum,
+        current: state.pageNum,
-        pageSize: state.pageSize,
+        size: state.pageSize,
         ...searchModel,
       })
       state.loading = false
@@ -385,10 +393,6 @@ export default defineComponent({
       state.total = total
     }
 
-    onBeforeMount(() => {
-      getTableData()
-    })
-
     const state = reactive({
       searchModel: getSearchModel(props.search),
       loading: false,
@@ -470,6 +474,18 @@ export default defineComponent({
       }
     }
 
+    watch(
+      () => props.search,
+      val => {
+        state.searchModel = getSearchModel(val)
+      },
+      { deep: true }
+    )
+
+    onBeforeMount(() => {
+      getTableData()
+    })
+
     return {
       ...toRefs(state),
     }
@@ -492,10 +508,11 @@ export default defineComponent({
     .search-btn {
       margin-left: auto;
     }
-    ::v-deep(.el-input-number .el-input__inner) {
+    :deep(.el-input-number .el-input__inner) {
       text-align: left;
     }
   }
+
   .head {
     display: flex;
     justify-content: space-between;
@@ -509,10 +526,6 @@ export default defineComponent({
   .table {
     padding: 20px;
     background: #fff;
-    ::v-deep(th) {
-      background: #f6f6f6;
-      color: rgba(0, 0, 0, 0.85);
-    }
   }
   .pagination {
     padding: 0 20px 20px;

src/components/SelectTree/Select.vue

@@ -0,0 +1,202 @@
+<!--
+ * ......................................&&.........................
+ * ....................................&&&..........................
+ * .................................&&&&............................
+ * ...............................&&&&..............................
+ * .............................&&&&&&..............................
+ * ...........................&&&&&&....&&&..&&&&&&&&&&&&&&&........
+ * ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&..............
+ * ................&...&&&&&&&&&&&&&&&&&&&&&&&&&&&&.................
+ * .......................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.........
+ * ...................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...............
+ * ..................&&&   &&&&&&&&&&&&&&&&&&&&&&&&&&&&&............
+ * ...............&&&&&@  &&&&&&&&&&..&&&&&&&&&&&&&&&&&&&...........
+ * ..............&&&&&&&&&&&&&&&.&&....&&&&&&&&&&&&&..&&&&&.........
+ * ..........&&&&&&&&&&&&&&&&&&...&.....&&&&&&&&&&&&&...&&&&........
+ * ........&&&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&....&&&.......
+ * .......&&&&&&&&.....................&&&&&&&&&&&&&&&&.....&&......
+ * ........&&&&&.....................&&&&&&&&&&&&&&&&&&.............
+ * ..........&...................&&&&&&&&&&&&&&&&&&&&&&&............
+ * ................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............
+ * ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&..&&&&&............
+ * ..............&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&....&&&&&............
+ * ...........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......&&&&............
+ * .........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.........&&&&............
+ * .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&............
+ * ......&&&&&&&&&&&&&&&&&&&...&&&&&&...............&&&.............
+ * .....&&&&&&&&&&&&&&&&............................&&..............
+ * ....&&&&&&&&&&&&&&&.................&&...........................
+ * ...&&&&&&&&&&&&&&&.....................&&&&......................
+ * ...&&&&&&&&&&.&&&........................&&&&&...................
+ * ..&&&&&&&&&&&..&&..........................&&&&&&&...............
+ * ..&&&&&&&&&&&&...&............&&&.....&&&&...&&&&&&&.............
+ * ..&&&&&&&&&&&&&.................&&&.....&&&&&&&&&&&&&&...........
+ * ..&&&&&&&&&&&&&&&&..............&&&&&&&&&&&&&&&&&&&&&&&&.........
+ * ..&&.&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&&&&&&&&&&&&.......
+ * ...&&..&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&...&&&&&&&&&&&&......
+ * ....&..&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&&&&&.....
+ * .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&..............&&&&&&&....
+ * .......&&&&&.&&&&&&&&&&&&&&&&&&..&&&&&&&&...&..........&&&&&&....
+ * ........&&&.....&&&&&&&&&&&&&.....&&&&&&&&&&...........&..&&&&...
+ * .......&&&........&&&.&&&&&&&&&.....&&&&&.................&&&&...
+ * .......&&&...............&&&&&&&.......&&&&&&&&............&&&...
+ * ........&&...................&&&&&&.........................&&&..
+ * .........&.....................&&&&........................&&....
+ * ...............................&&&.......................&&......
+ * ................................&&......................&&.......
+ * .................................&&..............................
+ * ..................................&..............................
+ * 
+ * @Descripttion: 
+ * @version: 
+ * @Date: 2021-08-30 14:19:46
+ * @LastEditors: huzhushan@126.com
+ * @LastEditTime: 2021-09-18 18:18:35
+ * @Author: huzhushan@126.com
+ * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
+ * @Github: https://github.com/huzhushan/vue3-element-admin
+ * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
+ -->
+<template>
+  <el-select
+    ref="select"
+    class="select"
+    style="width:100%"
+    clearable
+    :multiple="multiple"
+    v-model="selectValue"
+    :value-key="treeProps.label"
+    @remove-tag="handleRemove"
+    @clear="handleClear"
+    popper-class="select-popover"
+    :popper-append-to-body="false"
+    collapse-tags
+    :placeholder="placeholder"
+  >
+    <el-option
+      v-for="(item, index) in selectOptions"
+      :key="index"
+      :label="item[treeProps.label]"
+      :value="item"
+    />
+  </el-select>
+</template>
+<script>
+import {
+  defineComponent,
+  onBeforeMount,
+  reactive,
+  ref,
+  watch,
+  toRefs,
+  inject,
+} from 'vue'
+
+export default defineComponent({
+  props: {
+    value: {},
+    data: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    multiple: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    treeProps: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  setup(props, { emit }) {
+    const {
+      multiple,
+      treeProps: { label, children, nodeKey },
+    } = props
+    const state = reactive({
+      select: ref(null),
+      newValue: null,
+      selectValue: '',
+      selectOptions: [],
+      placeholder: inject('placeholder'),
+      updateSelectValue(values) {
+        if (!values || state.selectOptions.length <= 0) {
+          return
+        }
+        state.selectValue = multiple
+          ? state.selectOptions.filter(item => values.includes(item[nodeKey]))
+          : state.selectOptions.find(item => values === item[nodeKey]) || {}
+      },
+      updateSelectOptions(data) {
+        state.selectOptions = state.flatTree(data)
+      },
+      flatTree(tree) {
+        const res = []
+        tree.forEach(item => {
+          res.push({
+            [nodeKey]: item[nodeKey],
+            [label]: item[label],
+          })
+          if (item[children] && item[children].length > 0) {
+            res.push(...state.flatTree(item[children]))
+          }
+        })
+        return res
+      },
+      handleRemove() {
+        emit(
+          'select-change',
+          multiple
+            ? state.selectValue.map(item => item[nodeKey])
+            : state.selectValue[nodeKey]
+        )
+      },
+      handleClear() {
+        emit('select-change', multiple ? [] : '')
+      },
+    })
+
+    watch(
+      () => props.data,
+      v => {
+        state.updateSelectOptions(v)
+        state.updateSelectValue(state.newValue)
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    watch(
+      () => props.value,
+      v => {
+        state.newValue = v
+        state.updateSelectValue(state.newValue)
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    onBeforeMount(() => {
+      state.updateSelectOptions(props.data)
+    })
+
+    return toRefs(state)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.select {
+  :deep(.select-popover) {
+    display: none;
+  }
+}
+</style>

src/components/SelectTree/Tree.vue

@@ -0,0 +1,130 @@
+<!--
+ *                   江城子 . 程序员之歌
+ * 
+ *               十年生死两茫茫，写程序，到天亮。
+ *                   千行代码，Bug何处藏。
+ *               纵使上线又怎样，朝令改，夕断肠。
+ * 
+ *               领导每天新想法，天天改，日日忙。
+ *                   相顾无言，惟有泪千行。
+ *               每晚灯火阑珊处，夜难寐，加班狂。
+ * 
+ * 
+ * @Descripttion: 
+ * @version: 
+ * @Date: 2021-09-18 17:17:46
+ * @LastEditors: huzhushan@126.com
+ * @LastEditTime: 2021-09-18 18:20:15
+ * @Author: huzhushan@126.com
+ * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
+ * @Github: https://github.com/huzhushan/vue3-element-admin
+ * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
+ -->
+
+<template>
+  <div v-if="data.length <= 0" style="text-align:center;padding: 16px">
+    暂无数据
+  </div>
+  <el-tree
+    v-else
+    class="common-tree"
+    ref="tree"
+    :data="data"
+    :node-key="nodeKey"
+    :show-checkbox="multiple"
+    :check-strictly="treeProps['check-strictly'] || true"
+    :expand-on-click-node="false"
+    :check-on-click-node="true"
+    :default-expanded-keys="treeProps['default-expanded-keys'] || value"
+    :default-checked-keys="value"
+    @node-click="handleNodeClick"
+    @check-change="handleCheckChange"
+    v-bind="treeProps"
+  ></el-tree>
+</template>
+<script>
+import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    multiple: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    treeProps: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  setup(props, { emit }) {
+    const { multiple, treeProps } = props
+    const state = reactive({
+      nodeKey: treeProps['node-key'] || 'id',
+      tree: ref(null),
+      handleNodeClick(node) {
+        if (!multiple) {
+          state.tree.setCheckedKeys([node[state.nodeKey]])
+          state.hanelEmit()
+          emit('close')
+        }
+      },
+      handleCheckChange() {
+        if (!multiple) {
+          return
+        }
+        state.hanelEmit()
+      },
+      hanelEmit() {
+        const res = state.tree.getCheckedKeys()
+        emit('tree-change', multiple ? res : res[0] || '')
+      },
+      updateValue(value) {
+        if (state.tree) {
+          state.tree.setCheckedKeys(value)
+          // state.hanelEmit()
+        }
+      },
+    })
+
+    watch(
+      () => props.value,
+      v => {
+        state.updateValue(v)
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    return toRefs(state)
+  },
+})
+</script>
+<style lang="scss" scoped>
+.common-tree {
+  overflow: auto;
+  :deep {
+    .el-tree-node {
+      &.is-checked {
+        > .el-tree-node__content {
+          color: $mainColor;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/SelectTree/index.vue

@@ -0,0 +1,145 @@
+<!--
+ *  ┌───┐   ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┐
+ *  │Esc│   │ F1│ F2│ F3│ F4│ │ F5│ F6│ F7│ F8│ │ F9│F10│F11│F12│ │P/S│S L│P/B│  ┌┐    ┌┐    ┌┐
+ *  └───┘   └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┘  └┘    └┘    └┘
+ *  ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐ ┌───┬───┬───┐ ┌───┬───┬───┬───┐
+ *  │~ `│! 1│@ 2│# 3│$ 4│% 5│^ 6│& 7│* 8│( 9│) 0│_ -│+ =│ BacSp │ │Ins│Hom│PUp│ │N L│ / │ * │ - │
+ *  ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤ ├───┼───┼───┤ ├───┼───┼───┼───┤
+ *  │ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [│} ]│ | \ │ │Del│End│PDn│ │ 7 │ 8 │ 9 │   │
+ *  ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤ └───┴───┴───┘ ├───┼───┼───┤ + │
+ *  │ Caps │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  │               │ 4 │ 5 │ 6 │   │
+ *  ├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────────┤     ┌───┐     ├───┼───┼───┼───┤
+ *  │ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│  Shift   │     │ ↑ │     │ 1 │ 2 │ 3 │   │
+ *  ├─────┬──┴─┬─┴──┬┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤ ┌───┼───┼───┐ ├───┴───┼───┤ E││
+ *  │ Ctrl│    │Alt │         Space         │ Alt│    │    │Ctrl│ │ ← │ ↓ │ → │ │   0   │ . │←─┘│
+ *  └─────┴────┴────┴───────────────────────┴────┴────┴────┴────┘ └───┴───┴───┘ └───────┴───┴───┘
+ * 
+ * @Descripttion: 
+ * @version: 
+ * @Date: 2021-09-18 17:17:46
+ * @LastEditors: huzhushan@126.com
+ * @LastEditTime: 2021-09-18 17:17:59
+ * @Author: huzhushan@126.com
+ * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
+ * @Github: https://github.com/huzhushan/vue3-element-admin
+ * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
+ -->
+
+<template>
+  <el-popover
+    ref="popover"
+    placement="bottom-start"
+    trigger="click"
+    :popper-options="{ boundariesElement: 'viewport' }"
+    v-model:visible="visible"
+    :disabled="disabled"
+  >
+    <tree
+      ref="tree"
+      :value="is_multiple ? modelValue : modelValue ? [modelValue] : []"
+      :data="data || treeProps.data"
+      :multiple="is_multiple"
+      :tree-props="treeProps"
+      @tree-change="handleTreeChange"
+      @close="visible = false"
+    />
+
+    <template #reference>
+      <custom-select
+        ref="select"
+        :value="modelValue"
+        :data="data || treeProps.data"
+        :multiple="is_multiple"
+        :tree-props="{ children, label, nodeKey }"
+        @select-change="handleSelectChange"
+      />
+    </template>
+  </el-popover>
+</template>
+
+<script>
+import { defineComponent, reactive, ref, toRefs, onMounted, provide } from 'vue'
+
+import Tree from './Tree.vue'
+import CustomSelect from './Select.vue'
+
+export default defineComponent({
+  name: 'el-select-tree',
+  components: {
+    Tree,
+    CustomSelect,
+  },
+  props: {
+    modelValue: {},
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '请选择',
+    },
+    data: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    multiple: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    treeProps: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  setup(props, { emit }) {
+    provide('placeholder', props.placeholder)
+    const { treeProps, multiple } = props
+    const state = reactive({
+      popover: ref(null),
+      visible: false,
+      select: ref(null),
+      tree: ref(null),
+      is_multiple: multiple || treeProps['show-checkbox'],
+      label:
+        treeProps.props && treeProps.props.label
+          ? treeProps.props.label
+          : 'label',
+      children:
+        treeProps.props && treeProps.props.children
+          ? treeProps.props.children
+          : 'children',
+      nodeKey: treeProps['node-key'] || 'id',
+      handleTreeChange(value) {
+        emit('update:modelValue', value)
+        emit('change', value)
+      },
+      handleSelectChange(value) {
+        // state.tree.updateValue(value)
+        emit('update:modelValue', value)
+        emit('change', value)
+      },
+      initPopoverStyle(width) {
+        state.popover.popperRef.style.minWidth = width
+        state.popover.popperRef.style.boxSizing = 'border-box'
+        state.popover.popperRef.style.maxHeight = '400px'
+        state.popover.popperRef.style.overflow = 'auto'
+      },
+    })
+
+    onMounted(() => {
+      state.initPopoverStyle(
+        state.select.select.selectWrapper.offsetWidth + 'px'
+      )
+    })
+
+    return toRefs(state)
+  },
+})
+</script>

src/default-settings.js

@@ -44,7 +44,7 @@
  * @version:
  * @Date: 2021-07-22 17:22:14
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-23 14:44:42
+ * @LastEditTime: 2021-09-18 15:02:01
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -53,6 +53,8 @@
 
 export default {
   menus: {
+    // 菜单栏是否显示
+    isShow: true,
     // 菜单栏排列方式
     mode: 'vertical', // horizontal: 水平排列   vertical: 垂直排列
   },

src/directive/index.js

@@ -0,0 +1,53 @@
+/*
+ *
+ * 　　┏┓　　　┏┓+ +
+ * 　┏┛┻━━━┛┻┓ + +
+ * 　┃　　　　　　　┃
+ * 　┃　　　━　　　┃ ++ + + +
+ *  ████━████ ┃+
+ * 　┃　　　　　　　┃ +
+ * 　┃　　　┻　　　┃
+ * 　┃　　　　　　　┃ + +
+ * 　┗━┓　　　┏━┛
+ * 　　　┃　　　┃
+ * 　　　┃　　　┃ + + + +
+ * 　　　┃　　　┃
+ * 　　　┃　　　┃ +  神兽保佑
+ * 　　　┃　　　┃    代码无bug
+ * 　　　┃　　　┃　　+
+ * 　　　┃　 　　┗━━━┓ + +
+ * 　　　┃ 　　　　　　　┣┓
+ * 　　　┃ 　　　　　　　┏┛
+ * 　　　┗┓┓┏━┳┓┏┛ + + + +
+ * 　　　　┃┫┫　┃┫┫
+ * 　　　　┗┻┛　┗┻┛+ + + +
+ *
+ *
+ * @Descripttion:
+ * @version:
+ * @Date: 2021-09-01 13:58:08
+ * @LastEditors: huzhushan@126.com
+ * @LastEditTime: 2021-09-29 10:10:32
+ * @Author: huzhushan@126.com
+ * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
+ * @Github: https://github.com/huzhushan/vue3-element-admin
+ * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
+ */
+
+import store from '@/store'
+
+export const Permission = app => {
+  app.directive('permission', {
+    mounted: function(el, binding) {
+      const permissionList = store.state.account.permissionList || []
+
+      if (
+        binding.value &&
+        permissionList.every(item => item !== binding.value)
+      ) {
+        // 移除组件
+        el.parentNode.removeChild(el)
+      }
+    },
+  })
+}

src/global-components.js

@@ -1,33 +1,20 @@
 /*
- * _______________#########_______________________
+ *                   江城子 . 程序员之歌
- * ______________############_____________________
+ *
- * ______________#############____________________
+ *               十年生死两茫茫，写程序，到天亮。
- * _____________##__###########___________________
+ *                   千行代码，Bug何处藏。
- * ____________###__######_#####__________________
+ *               纵使上线又怎样，朝令改，夕断肠。
- * ____________###_#######___####_________________
+ *
- * ___________###__##########_####________________
+ *               领导每天新想法，天天改，日日忙。
- * __________####__###########_####_______________
+ *                   相顾无言，惟有泪千行。
- * ________#####___###########__#####_____________
+ *               每晚灯火阑珊处，夜难寐，加班狂。
- * _______######___###_########___#####___________
+ *
- * _______#####___###___########___######_________
- * ______######___###__###########___######_______
- * _____######___####_##############__######______
- * ____#######__#####################_#######_____
- * ____#######__##############################____
- * ___#######__######_#################_#######___
- * ___#######__######_######_#########___######___
- * ___#######____##__######___######_____######___
- * ___#######________######____#####_____#####____
- * ____######________#####_____#####_____####_____
- * _____#####________####______#####_____###______
- * ______#####______;###________###______#________
- * ________##_______####________####______________
  *
  * @Descripttion:
  * @version:
- * @Date: 2021-04-20 11:06:21
+ * @Date: 2021-09-18 09:32:01
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:48:53
+ * @LastEditTime: 2021-09-18 17:54:29
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -36,3 +23,4 @@
 
 export { default as SvgIcon } from '@/components/SvgIcon/index.vue'
 export { default as ProTable } from '@/components/ProTable/index.vue'
+export { default as ElSelectTree } from '@/components/SelectTree/index.vue'

src/hooks/useCloseTag.js

@@ -0,0 +1,69 @@
+/*
+ *
+ * 　　┏┓　　　┏┓+ +
+ * 　┏┛┻━━━┛┻┓ + +
+ * 　┃　　　　　　　┃
+ * 　┃　　　━　　　┃ ++ + + +
+ *  ████━████ ┃+
+ * 　┃　　　　　　　┃ +
+ * 　┃　　　┻　　　┃
+ * 　┃　　　　　　　┃ + +
+ * 　┗━┓　　　┏━┛
+ * 　　　┃　　　┃
+ * 　　　┃　　　┃ + + + +
+ * 　　　┃　　　┃
+ * 　　　┃　　　┃ +  神兽保佑
+ * 　　　┃　　　┃    代码无bug
+ * 　　　┃　　　┃　　+
+ * 　　　┃　 　　┗━━━┓ + +
+ * 　　　┃ 　　　　　　　┣┓
+ * 　　　┃ 　　　　　　　┏┛
+ * 　　　┗┓┓┏━┳┓┏┛ + + + +
+ * 　　　　┃┫┫　┃┫┫
+ * 　　　　┗┻┛　┗┻┛+ + + +
+ *
+ *
+ * @Descripttion:
+ * @version:
+ * @Date: 2021-08-20 11:15:27
+ * @LastEditors: huzhushan@126.com
+ * @LastEditTime: 2021-09-18 17:25:32
+ * @Author: huzhushan@126.com
+ * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
+ * @Github: https://github.com/huzhushan/vue3-element-admin
+ * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
+ */
+
+import { reactive, toRefs, getCurrentInstance } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+// 关闭当前标签
+export default () => {
+  const instance = getCurrentInstance()
+  const store = useStore()
+  const router = useRouter()
+  const route = useRoute()
+  const state = reactive({
+    /**
+     * @param {String} fullPath 要跳转到那个页面的地址
+     * @param {Boolean} reload 是否在跳转后重新渲染页面组件
+     * @param {Boolean} f5 是否在跳转后刷新页面
+     * @return {*}
+     */
+    closeTag({ fullPath, reload, f5 } = {}) {
+      store.dispatch('tags/delTag', route)
+      fullPath ? router.push(fullPath) : router.back()
+      reload &&
+        setTimeout(() => {
+          instance.appContext.config.globalProperties.$tagsbar.refreshSelectedTag(
+            route
+          )
+        }, 500)
+
+      f5 && setTimeout(() => window.location.reload(), 500)
+    },
+  })
+
+  return toRefs(state)
+}

src/layout/components/Tagsbar/index.vue

@@ -13,7 +13,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-23 16:48:37
+ * @LastEditTime: 2021-09-18 17:50:46
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -68,13 +68,17 @@
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, getCurrentInstance } from 'vue'
 import { useTags } from './hooks/useTags'
 import { useContextMenu } from './hooks/useContextMenu'
 import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'Tagsbar',
+  mounted() {
+    const instance = getCurrentInstance()
+    instance.appContext.config.globalProperties.$tagsbar = this
+  },
   setup() {
     const store = useStore()
     const defaultSettings = computed(() => store.state.layoutSettings)

src/layout/components/Topbar/Userinfo.vue

@@ -37,7 +37,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-23 15:01:18
+ * @LastEditTime: 2021-09-18 15:39:30
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -87,8 +87,6 @@ export default defineComponent({
     const logout = () => {
       // 清除token
       store.dispatch('app/clearToken')
-      // 清除标签栏
-      store.dispatch('tags/delAllTags')
       router.push('/login')
     }
 

src/layout/index.vue

@@ -27,7 +27,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-23 17:19:35
+ * @LastEditTime: 2021-09-18 14:58:53
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -36,11 +36,11 @@
 
 <template>
   <div class="wrapper" :class="{ fluid: isFluid }">
-    <sidebar v-if="!isHorizontalMenu" />
+    <sidebar v-if="isMenusShow && !isHorizontalMenu" />
     <div class="right" :class="{ flex: isTopbarFixed }">
       <div class="top">
         <topbar />
-        <menus mode="horizontal" v-if="isHorizontalMenu" />
+        <menus mode="horizontal" v-if="isMenusShow && isHorizontalMenu" />
         <tagsbar />
         <breadcrumbs
           v-if="isBreadcrumbsShow"
@@ -80,6 +80,7 @@ export default defineComponent({
     const defaultSettings = computed(() => store.state.layoutSettings)
     const isFluid = computed(() => defaultSettings.value.layout.isFluid)
     const isTopbarFixed = computed(() => defaultSettings.value.topbar.isFixed)
+    const isMenusShow = computed(() => defaultSettings.value.menus.isShow)
     const isHorizontalMenu = computed(
       () => defaultSettings.value.menus.mode === 'horizontal'
     )
@@ -94,6 +95,7 @@ export default defineComponent({
     return {
       isFluid,
       isTopbarFixed,
+      isMenusShow,
       isHorizontalMenu,
       isBreadcrumbsShow,
       paddingFlag,

src/main.js

@@ -27,7 +27,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-23 16:50:08
+ * @LastEditTime: 2021-09-29 10:08:00
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -64,6 +64,10 @@ Object.entries(Components).forEach(([key, component]) => {
   app.component(key, component)
 })
 
+// 注册自定义指令
+import * as Directives from '@/directive'
+Object.values(Directives).forEach(fn => fn(app))
+
 // 错误日志
 import useErrorHandler from './error-log'
 useErrorHandler(app)

src/permission.js

@@ -26,14 +26,15 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-26 18:28:31
+ * @LastEditTime: 2021-09-29 09:47:46
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
  * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
  */
 
-import router from '@/router'
+import { ElLoading } from 'element-plus'
+import router, { asyncRoutes } from '@/router'
 import store from '@/store'
 import { TOKEN } from '@/store/modules/app' // TOKEN变量名
 
@@ -67,20 +68,40 @@ router.beforeEach(async to => {
     // 获取用户角色信息，根据角色判断权限
     let userinfo = store.state.account.userinfo
     if (!userinfo) {
+      const loadingInstance = ElLoading.service({
+        lock: true,
+        text: '正在加载数据，请稍候~',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
       try {
         // 获取用户信息
         userinfo = await store.dispatch('account/getUserinfo')
+        loadingInstance.close()
       } catch (err) {
+        loadingInstance.close()
         return false
       }
+
+      // 删除所有动态路由
+      asyncRoutes.forEach(item => {
+        router.removeRoute(item.name)
+      })
+      return to.fullPath
     }
 
     // 生成菜单（如果你的项目有动态菜单，在此处会添加动态路由）
     if (store.state.menu.menus.length <= 0) {
+      const loadingInstance = ElLoading.service({
+        lock: true,
+        text: '正在加载数据，请稍候~',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
       try {
         await store.dispatch('menu/generateMenus', userinfo)
+        loadingInstance.close()
         return to.fullPath // 添加动态路由后，必须加这一句触发重定向，否则会404
       } catch (err) {
+        loadingInstance.close()
         return false
       }
     }

src/router/modules/error.js

@@ -3,7 +3,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 09:34:31
+ * @LastEditTime: 2021-09-18 16:23:58
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -11,10 +11,10 @@
  */
 import store from '@/store'
 
-const checkUserinfo = code => {
+const checkUserinfo = (code, fullPath) => {
   const userinfo = store.state.account.userinfo
   if (userinfo) {
-    return `/error/${code}`
+    return `/error/${code === '404' ? fullPath : code}`
   }
   return true
 }
@@ -46,7 +46,7 @@ export default [
         },
       },
       {
-        path: '404',
+        path: ':pathMatch(.*)',
         name: 'error-not-found',
         component: Error,
         meta: { title: '404' },
@@ -85,8 +85,8 @@ export default [
     props: {
       error: '404',
     },
-    beforeEnter() {
+    beforeEnter(to) {
-      return checkUserinfo('404')
+      return checkUserinfo('404', to.fullPath.replace('/', ''))
     },
   },
 ]

src/store/modules/account.js

@@ -3,7 +3,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 09:34:04
+ * @LastEditTime: 2021-09-29 10:10:14
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -15,6 +15,7 @@ export default {
   namespaced: true,
   state: {
     userinfo: null,
+    permissionList: [],
   },
   mutations: {
     // 保存用户信息

src/store/modules/app.js

@@ -3,7 +3,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-28 09:38:35
+ * @LastEditTime: 2021-09-18 15:40:50
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -56,6 +56,10 @@ export default {
       commit('clearToken')
       // 清除用户信息
       commit('account/clearUserinfo', '', { root: true })
+      // 清除标签栏
+      commit('tags/CLEAR_ALL_TAGS', '', { root: true })
+      // 清空menus
+      commit('menu/SET_MENUS', [], { root: true })
     },
     setScreenCode({ commit, state }, password) {
       const authorization = toRaw(state.authorization)

src/store/modules/layoutSettings.js

@@ -27,7 +27,7 @@
  * @version:
  * @Date: 2021-07-23 16:10:49
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-07-23 16:19:35
+ * @LastEditTime: 2021-09-18 15:03:26
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -35,7 +35,7 @@
  */
 
 import { getItem, setItem } from '@/utils/storage' //getItem和setItem是封装的操作localStorage的方法
-import defaultSettings from '@/defaultSettings'
+import defaultSettings from '@/default-settings'
 export default {
   namespaced: true,
   state: getItem('defaultSettings') || defaultSettings,

src/store/modules/tags.js

@@ -3,7 +3,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-29 11:19:20
+ * @LastEditTime: 2021-09-18 15:36:04
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -93,7 +93,12 @@ const mutations = {
   DEL_ALL_CACHE_LIST: state => {
     state.cacheList = []
   },
-
+  CLEAR_ALL_TAGS: state => {
+    state.cacheList = []
+    state.tagList = []
+    // 保存到localStorage
+    removeItem(TAGLIST)
+  },
   UPDATE_TAG_LIST: (state, tag) => {
     const index = state.tagList.findIndex(v => v.path === tag.path)
     if (index > -1) {

src/utils/request.js

@@ -22,7 +22,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:48:30
+ * @LastEditTime: 2021-09-18 15:44:39
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -69,10 +69,21 @@ service.interceptors.response.use(
       // 校验是否有 refresh_token
       const { authorization } = store.state.app
       if (!authorization || !authorization.refresh_token) {
+        if (router.currentRoute.value.name === 'login') {
+          return Promise.reject(error)
+        }
         const redirect = encodeURIComponent(window.location.href)
         router.push(`/login?redirect=${redirect}`)
         // 清除token
         store.dispatch('app/clearToken')
+        setTimeout(() => {
+          ElMessage.closeAll()
+          try {
+            ElMessage.error(error.response.data.msg)
+          } catch (err) {
+            ElMessage.error(error.message)
+          }
+        })
         // 代码不要往后执行了
         return Promise.reject(error)
       }
@@ -108,7 +119,12 @@ service.interceptors.response.use(
     }
 
     // console.dir(error) // 可在此进行错误上报
-    ElMessage.error(error.message)
+    ElMessage.closeAll()
+    try {
+      ElMessage.error(error.response.data.msg)
+    } catch (err) {
+      ElMessage.error(error.message)
+    }
 
     return Promise.reject(error)
   }

src/views/test/Add.vue

@@ -3,7 +3,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 09:33:38
+ * @LastEditTime: 2021-09-18 18:10:39
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -16,4 +16,111 @@
     <br />
     需要配置路由增加属性hidden: true，注意不是在meta中增加该属性，而是跟meta同级
   </div>
+
+  <hr />
+
+  <div style="width: 400px">
+    <el-select-tree
+      placeholder="请选择角色"
+      v-model="roles"
+      :multiple="true"
+      :data="treeData"
+      :tree-props="treeProps"
+      @change="handleChange"
+    />
+  </div>
 </template>
+
+<script>
+import { defineComponent, reactive, toRefs } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const state = reactive({
+      roles: ['11', '311'],
+      treeData: [
+        {
+          id: '1',
+          label: '一级 1',
+          children: [
+            {
+              id: '11',
+              label: '二级 1-1',
+              children: [
+                {
+                  id: '111',
+                  label: '三级 1-1-1',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: '2',
+          label: '一级 2',
+          children: [
+            {
+              id: '21',
+              label: '二级 2-1',
+              children: [
+                {
+                  id: '211',
+                  label: '三级 2-1-1',
+                },
+              ],
+            },
+            {
+              id: '22',
+              label: '二级 2-2',
+              children: [
+                {
+                  id: '221',
+                  label: '三级 2-2-1',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: '3',
+          label: '一级 3',
+          children: [
+            {
+              id: '31',
+              label: '二级 3-1',
+              children: [
+                {
+                  id: '311',
+                  label: '三级 3-1-1',
+                },
+              ],
+            },
+            {
+              id: '32',
+              label: '二级 3-2',
+              children: [
+                {
+                  id: '321',
+                  label: '三级 3-2-1',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      treeProps: {
+        props: {
+          children: 'children',
+          label: 'label',
+        },
+      },
+      handleChange(v) {
+        console.log('你选择了:', v)
+      },
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>

src/views/test/Edit.vue

@@ -27,7 +27,7 @@
  * @version: 
  * @Date: 2021-04-28 16:50:05
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-28 16:50:41
+ * @LastEditTime: 2021-09-18 17:51:25
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -36,4 +36,24 @@
 
 <template>
   <h2>编辑页面 id:{{ $route.params.id }}</h2>
+  <el-button type="primary" @click="closeTag">关闭</el-button>
+  <el-button type="success" @click="closeTag({ reload: true })">
+    关闭当前页面，更新上级页面（组件重新渲染）
+  </el-button>
+  <el-button type="warning" @click="closeTag({ f5: true })">
+    关闭当前页面，刷新上级页面（浏览器刷新）
+  </el-button>
 </template>
+<script>
+import { defineComponent } from 'vue'
+import useCloseTag from '@/hooks/useCloseTag'
+
+export default defineComponent({
+  setup() {
+    const { closeTag } = useCloseTag()
+    return {
+      closeTag,
+    }
+  },
+})
+</script>

vite.config.js

@@ -14,7 +14,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-22 09:28:15
+ * @LastEditTime: 2021-09-18 15:09:15
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -76,6 +76,7 @@ export default env => {
         '/api': {
           target: 'http://dev.api.xxx.com', // 后端接口的域名
           changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, ''),
         },
       },
     },

升级.txt

@@ -0,0 +1,12 @@
+升级element-plus
+升级sass
+更新App.vue国际化配置
+defaultSettings：重命名、增加menus.isShow
+permission.js增加loading
+permission.js删除所有动态路由
+退出的时候清空标签栏和menus
+tags增加清空标签栏的mutations
+404页面路由修改
+增加公共hooks
+增加树形下拉组件
+增加(按钮、组件等)权限控制自定义指令