v1.0.1 completed

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "erp-vue3",
+  "name": "vue3-element-admin",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -2796,6 +2796,12 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.5.tgz",
       "integrity": "sha512-AQq+pllb6FCc7rS6vh4PPcce3XA1jgK3hKNkQ4hXHwoVN7jOeAOMKCnX7XAX3etV9rmN7iNW8iIwgPk95ckBjw=="
     },
+    "vue3-pro-table": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-pro-table/-/vue3-pro-table-1.0.0.tgz",
+      "integrity": "sha512-tJXFLhkzUJUvGle04poYEt5HEUtAcNXyeQCFlcxwZUooPgZc49sqDGk37xXmEEqKWXtFgMqA4p1F9x3BfgW3jg==",
+      "dev": true
+    },
     "vuex": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "erp-vue3",
+  "name": "vue3-element-admin",
   "version": "1.0.0",
   "author": {
     "name": "huzhushan",
@@ -32,15 +32,16 @@
     "sass": "^1.32.8",
     "vite": "^2.1.0",
     "vite-plugin-mock": "^2.3.0",
-    "vite-plugin-svg-icons": "^0.4.0"
+    "vite-plugin-svg-icons": "^0.4.0",
+    "vue3-pro-table": "^1.0.0"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/huzhushan/erp-vue3.git"
+    "url": "git+https://github.com/huzhushan/vue3-element-admin.git"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/huzhushan/erp-vue3/issues"
+    "url": "https://github.com/huzhushan/vue3-element-admin/issues"
   },
-  "homepage": "https://github.com/huzhushan/erp-vue3"
+  "homepage": "https://github.com/huzhushan/vue3-element-admin"
 }

readme.md

@@ -1,3 +1,3 @@
 # 简介
 
-vue3-element-admin 是一个后台管理系统前端解决方案，它基于 vue3 和 element-plus 实现
+vue3-element-admin 是一个后台管理系统前端解决方案，它基于 vue3 + element-plus + vite 实现

src/layout/components/Tagsbar/hooks/useContextMenu.js

@@ -46,6 +46,27 @@ export const useContextMenu = (tagList) => {
       store.dispatch("tags/delOtherTags", state.selectedTag)
       router.push(state.selectedTag);
     },
+    closeLeftTags () {
+      state.closeSomeTags('left')
+
+    },
+    closeRightTags () {
+      state.closeSomeTags('right')
+
+    },
+    closeSomeTags (direction) {
+      const index = tagList.value.findIndex(
+        (item) => item.fullPath === state.selectedTag.fullPath
+      );
+
+      if ((direction === 'left' && index <= 0) || (direction === 'right' && index >= tagList.value.length - 1)) {
+        return;
+      }
+
+      const needToClose = direction === 'left' ? tagList.value.slice(0, index) : tagList.value.slice(index + 1)
+      store.dispatch("tags/delSomeTags", needToClose)
+      router.push(state.selectedTag);
+    },
     closeAllTags () {
       store.dispatch("tags/delAllTags")
       router.push("/");

src/layout/components/Tagsbar/hooks/useTags.js

@@ -1,5 +1,5 @@
 import { useScrollbar } from "./useScrollbar";
-import { onMounted, watch, computed, ref, nextTick } from 'vue';
+import { watch, computed, ref, nextTick, onBeforeMount } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex'
 
@@ -73,7 +73,7 @@ export const useTags = () => {
 
 
 
-  onMounted(() => {
+  onBeforeMount(() => {
     initTags();
     addTag();
     moveToCurrentTag();

src/layout/components/Tagsbar/index.vue

@@ -39,6 +39,8 @@
     <li @click="refreshSelectedTag(selectedTag)">刷新</li>
     <li v-if="!isAffix(selectedTag)" @click="closeTag(selectedTag)">关闭</li>
     <li @click="closeOtherTags">关闭其他</li>
+    <li @click="closeLeftTags">关闭左侧</li>
+    <li @click="closeRightTags">关闭右侧</li>
     <li @click="closeAllTags">关闭全部</li>
   </ul>
 </template>

src/main.js

@@ -6,6 +6,9 @@ const app = createApp(App)
 // 引入element-plus
 import ElementPlus from "element-plus";
 import './assets/style/element-variables.scss'
+// 引入中文语言包
+import 'dayjs/locale/zh-cn'
+import locale from 'element-plus/lib/locale/lang/zh-cn'
 
 // 引入路由
 import router from './router'
@@ -25,4 +28,8 @@ Object.entries(Components).forEach(([key, component]) => {
   app.component(key, component)
 })
 
-app.use(ElementPlus).use(store).use(router).mount('#app')
+// 引入vue3-pro-table
+import Vue3ProTable from "vue3-pro-table";
+app.use(Vue3ProTable);
+
+app.use(ElementPlus, { locale }).use(store).use(router).mount('#app')

src/store/modules/tags.js

@@ -38,6 +38,7 @@ const mutations = {
   },
   DEL_CACHE_LIST: (state, tag) => {
     state.cacheList = state.cacheList.filter(v => v !== tag.name)
+
   },
 
   DEL_OTHER_TAG_LIST: (state, tag) => {
@@ -47,6 +48,18 @@ const mutations = {
   },
   DEL_OTHER_CACHE_LIST: (state, tag) => {
     state.cacheList = state.cacheList.filter(v => v === tag.name)
+
+  },
+
+  DEL_SOME_TAG_LIST: (state, tags) => {
+    state.tagList = state.tagList.filter(v => !!v.meta.affix || tags.every(tag => tag.path !== v.path))
+    // 保存到localStorage
+    setItem(TAGLIST, state.tagList);
+  },
+
+  DEL_SOME_CACHE_LIST: (state, tags) => {
+    state.cacheList = state.cacheList.filter(v => tags.every(tag => tag.name !== v))
+
   },
 
   DEL_ALL_TAG_LIST: state => {
@@ -56,6 +69,7 @@ const mutations = {
   },
   DEL_ALL_CACHE_LIST: state => {
     state.cacheList = []
+
   },
 
   UPDATE_TAG_LIST: (state, tag) => {
@@ -109,6 +123,11 @@ const actions = {
     commit('DEL_OTHER_CACHE_LIST', tag)
   },
 
+  delSomeTags ({ commit }, tags) {
+    commit('DEL_SOME_TAG_LIST', tags)
+    commit('DEL_SOME_CACHE_LIST', tags)
+  },
+
   delAllTags ({ dispatch }) {
     dispatch('delAllTagList')
     dispatch('delAllCacheList')

src/views/test/Auth.vue

@@ -4,5 +4,6 @@
       $store.state.account.userinfo && $store.state.account.userinfo.role
     }}
   </h2>
+  <h4><mark>刷新页面可切换随机角色</mark></h4>
   <router-link to="/test/noauth">点击进入只有admin才能访问的页面</router-link>
 </template>

src/views/test/Cache.vue

@@ -6,12 +6,15 @@
   </dl>
 </template>
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, onActivated } from "vue";
 
 export default defineComponent({
   name: "test-cache", // 该name必须跟路由配置的name一致
   setup() {
     console.log("cache");
+    onActivated(() => {
+      console.log("onActivated");
+    });
   },
 });
 </script>

src/views/test/index.vue

@@ -1,6 +1,261 @@
 <template>
-  <h2>列表</h2>
+  <vue3-pro-table
-  <router-link to="/test/add">
+    ref="table"
-    <el-button type="primary">添加一条</el-button>
+    title="列表"
-  </router-link>
+    :request="getList"
+    :columns="columns"
+    :search="searchConfig"
+    :pagination="paginationConfig"
+    @selectionChange="handleSelectionChange"
+  >
+    <!-- 工具栏 -->
+    <template #toolbar>
+      <el-button type="primary" icon="el-icon-delete" @click="batchDelete">
+        批量删除
+      </el-button>
+      <el-button
+        type="primary"
+        icon="el-icon-plus"
+        @click="$router.push('/test/add')"
+      >
+        添加一条
+      </el-button>
+      <el-button type="primary" icon="el-icon-refresh" @click="refresh">
+        刷新
+      </el-button>
+    </template>
+    <template #operate="scope">
+      <el-button size="mini" type="primary">编辑</el-button>
+      <el-button size="mini" type="danger">删除</el-button>
+    </template>
+  </vue3-pro-table>
 </template>
+
+<script>
+import { defineComponent, reactive, ref, toRefs } from "vue";
+
+export default defineComponent({
+  name: "testList",
+  setup() {
+    const state = reactive({
+      // 表格列配置，大部分属性跟el-table-column配置一样
+      columns: [
+        { type: "selection" },
+        { label: "序号", type: "index" },
+        { label: "名称", prop: "nickName", sortable: true, width: 180 },
+        { label: "邮箱", prop: "userEmail" },
+        {
+          label: "操作",
+          fixed: "right",
+          width: 180,
+          align: "center",
+          tdSlot: "operate", // 自定义单元格内容的插槽名称
+        },
+      ],
+      // 搜索配置
+      searchConfig: {
+        labelWidth: "90px", // 必须带上单位
+        inputWidth: "360px", // 必须带上单位
+        fields: [
+          {
+            type: "text",
+            label: "账户名称",
+            name: "nickName",
+            defaultValue: "abc",
+          },
+          {
+            type: "textarea",
+            label: "描述",
+            name: "description",
+          },
+          {
+            label: "状态",
+            name: "status",
+            type: "select",
+            defaultValue: 1,
+            options: [
+              {
+                name: "已发布",
+                value: 1,
+              },
+              {
+                name: "未发布",
+                value: 0,
+              },
+            ],
+          },
+          {
+            label: "性别",
+            name: "sex",
+            type: "radio",
+            options: [
+              {
+                name: "男",
+                value: 1,
+              },
+              {
+                name: "女",
+                value: 0,
+              },
+            ],
+          },
+          {
+            label: "城市",
+            name: "city",
+            type: "radio-button",
+            options: [
+              {
+                name: "北京",
+                value: "bj",
+              },
+              {
+                name: "上海",
+                value: "sh",
+              },
+              {
+                name: "广州",
+                value: "gz",
+              },
+              {
+                name: "深圳",
+                value: "sz",
+              },
+            ],
+          },
+          {
+            label: "爱好",
+            name: "hobby",
+            type: "checkbox",
+            defaultValue: ["吃饭"],
+            options: [
+              {
+                name: "吃饭",
+                value: "吃饭",
+              },
+              {
+                name: "睡觉",
+                value: "睡觉",
+              },
+              {
+                name: "打豆豆",
+                value: "打豆豆",
+              },
+            ],
+            // transform: (val) => val.join(","),
+          },
+          {
+            label: "水果",
+            name: "fruit",
+            type: "checkbox-button",
+            options: [
+              {
+                name: "苹果",
+                value: "苹果",
+              },
+              {
+                name: "香蕉",
+                value: "香蕉",
+              },
+              {
+                name: "橘子",
+                value: "橘子",
+              },
+              {
+                name: "葡萄",
+                value: "葡萄",
+              },
+            ],
+            transform: (val) => val.join(","),
+          },
+          {
+            label: "日期",
+            name: "date",
+            type: "date",
+          },
+          {
+            label: "时间",
+            name: "datetime",
+            type: "datetime",
+            defaultValue: "2020-10-10 8:00:00",
+          },
+          {
+            label: "日期范围",
+            name: "daterange",
+            type: "daterange",
+            trueNames: ["startDate", "endDate"],
+          },
+          {
+            label: "时间范围",
+            name: "datetimerange",
+            type: "datetimerange",
+            trueNames: ["startTime", "endTime"],
+            style: { width: "360px" },
+            defaultValue: ["2020-10-10 9:00:00", "2020-10-11 18:30:00"],
+          },
+          {
+            label: "数量",
+            name: "num",
+            type: "number",
+            min: 0,
+            max: 10,
+          },
+        ],
+      },
+      // 分页配置
+      paginationConfig: {
+        layout: "total, prev, pager, next, sizes", // 分页组件显示哪些功能
+        pageSize: 5, // 每页条数
+        pageSizes: [5, 10, 20, 50],
+        style: { textAlign: "left" },
+      },
+      selectedItems: [],
+      batchDelete() {
+        console.log(state.selectedItems);
+      },
+      // 选择
+      handleSelectionChange(arr) {
+        state.selectedItems = arr;
+      },
+      // 请求函数
+      async getList(params) {
+        console.log(params);
+        // params是从组件接收的，包含分页和搜索字段。
+        const { data } = await new Promise((rs) => {
+          setTimeout(() => {
+            rs({
+              code: 200,
+              data: {
+                list: [
+                  {
+                    id: 1,
+                    nickName: "zhangsan",
+                    userEmail: "zhangsan@xx.com",
+                  },
+                  {
+                    id: 2,
+                    nickName: "lisi",
+                    userEmail: "lisi@xx.com",
+                  },
+                ],
+                total: 100,
+              },
+            });
+          }, 3000);
+        });
+
+        // 必须要返回一个对象，包含data数组和total总数
+        return {
+          data: data.list,
+          total: +data.total,
+        };
+      },
+    });
+    const table = ref(null);
+    const refresh = () => {
+      table.value.refresh();
+    };
+
+    return { ...toRefs(state), refresh, table };
+  },
+});
+</script>

vite.config.js

@@ -36,6 +36,8 @@ export default env => {
       },
     },
     server: {
+      port: 8080,
+      open: true,
       proxy: {
         "/api": {
           target: "http://dev.erp.com",