fix: vue3角色模块优化 (#173)

* fix: vue3角色模块优化

* fix: 检视意见修改

packages/toolkits/pro/template/tinyvue/src/api/list.ts

@@ -13,7 +13,5 @@ export function queryEmployeeList(params: QueryTaskParmas) {
   );
 }
 export function deleteEmployee(id: string) {
-  return axios.delete(
-    `${import.meta.env.VITE_MOCK_SERVER_HOST}/api/employee/delete?id=${id}`,
-  );
+  return axios.delete(`/mock/api/employee/delete?id=${id}`);
 }

packages/toolkits/pro/template/tinyvue/src/api/permission.ts

@@ -1,5 +1,11 @@
 import axios from 'axios';
 
+export type Permission = {
+  desc: string;
+  id: number;
+  name: string;
+};
+
 export function getAllPermission() {
   return axios.get(`/api/permission`);
 }

packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue

@@ -66,7 +66,7 @@
     for (let i = 0; i < rawMenuData.length; i += 1) {
       filter.push(rawMenuData[i].label);
     }
-    filter.push('MenuSecond');
+    filter.push('SecondMenu');
     if (filter.indexOf(data.label) === -1) {
       router.replace({ name: data.label });
     }

packages/toolkits/pro/template/tinyvue/src/components/navbar/index.vue

@@ -60,8 +60,9 @@
           >
             <iconReplace v-if="item.value === 1"></iconReplace>
             <iconUser v-if="item.value === 2"></iconUser>
-            <iconCheckOut v-if="item.value === 3"></iconCheckOut>
-            <iconEdit v-if="item.value === 4"></iconEdit>
+            <iconWriting v-if="item.value === 3"></iconWriting>
+            <iconCheckOut v-if="item.value === 4"></iconCheckOut>
+            <iconEdit v-if="item.value === 5"></iconEdit>
             {{ $t(item.label) }}
           </li>
         </div>
@@ -226,8 +227,9 @@
   const userlist = [
     { label: 'messageBox.switchRoles', value: 1 },
     { label: 'messageBox.userCenter', value: 2 },
-    { label: 'messageBox.updatePwd', value: 3 },
-    { label: 'messageBox.logout', value: 4 },
+    { label: 'messageBox.userSettings', value: 3 },
+    { label: 'messageBox.updatePwd', value: 4 },
+    { label: 'messageBox.logout', value: 5 },
   ];
 
   // 校验规则
@@ -261,9 +263,12 @@
         router.push({ name: 'Info' });
         break;
       case 3:
-        handlePwdUpdate();
+        router.push({ name: 'Setting' });
         break;
       case 4:
+        handlePwdUpdate();
+        break;
+      case 5:
         logout();
         break;
       default:

packages/toolkits/pro/template/tinyvue/src/hooks/useDisclosure.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+
+export const useDisclosure = () => {
+  const open = ref(false);
+  const onClose = () => {
+    open.value = false;
+  };
+  const onOpen = () => {
+    open.value = true;
+  };
+  return {
+    open,
+    onClose,
+    onOpen,
+  };
+};

packages/toolkits/pro/template/tinyvue/src/hooks/useI18nMenu.ts

@@ -0,0 +1,20 @@
+import type { ITreeNodeData } from '@/router/guard/menu';
+
+export const useI18nMenu = (
+  data: ITreeNodeData[],
+  t: (key: string) => string,
+) => {
+  const menus: ITreeNodeData[] = [...data];
+  const dfs = (menu: ITreeNodeData) => {
+    menu.label = t(menu.locale).toString();
+    for (let i = 0; i < menu.children.length; i += 1) {
+      const item = menu.children[i];
+      dfs(item);
+    }
+  };
+  for (let i = 0; i < data.length; i += 1) {
+    const menu = data[i];
+    dfs(menu);
+  }
+  return menus;
+};

packages/toolkits/pro/template/tinyvue/src/hooks/useMenuId.ts

@@ -0,0 +1,17 @@
+import type { ITreeNodeData } from '@/router/guard/menu';
+
+export const useMenuId = (datas: ITreeNodeData[]) => {
+  const ids: any[] = [];
+  const dfs = (menu: ITreeNodeData) => {
+    ids.push(menu.id);
+    for (let i = 0; i < menu.children.length; i += 1) {
+      const child = menu.children[i];
+      dfs(child);
+    }
+  };
+  for (let i = 0; i < datas.length; i += 1) {
+    const data = datas[i];
+    dfs(data);
+  }
+  return ids;
+};

packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts

@@ -53,10 +53,10 @@ export default {
   'menu.profile': 'Profile',
   'menu.profile.detail': 'Basic details page',
   'menu.visualization': 'Data Visualization',
-  'menu.user': 'User Center',
   'menu.menuPage': 'Menu Page',
   'menu.menuPage.second': 'Second Page',
   'menu.menuPage.third': 'Menu Demo Page',
+  'menu.user': 'User Center',
   'menu.userManager': 'User Manager',
   'menu.userManager.info': 'All User Info',
   'menu.userManager.setting': 'All User Setting',

packages/toolkits/pro/template/tinyvue/src/locale/zh-CN.ts

@@ -53,10 +53,10 @@ export default {
   'menu.profile': '详情页',
   'menu.profile.detail': '基础详情页',
   'menu.visualization': '数据可视化',
-  'menu.user': '个人中心',
   'menu.menuPage': '菜单页',
   'menu.menuPage.second': '二级菜单',
   'menu.menuPage.third': '菜单demo页',
+  'menu.user': '个人中心',
   'menu.userManager': '用户管理',
   'menu.userManager.info': '所有用户',
   'menu.userManager.setting': '修改信息',

packages/toolkits/pro/template/tinyvue/src/router/routes/modules/user.ts

@@ -25,5 +25,17 @@ export default {
         roles: [RoleType.admin, RoleType.user],
       },
     },
+    {
+      path: 'setting',
+      name: 'Setting',
+      id: 'Setting',
+      label: 'Setting',
+      component: () => import('@/views/user/setting/index.vue'),
+      meta: {
+        locale: 'menu.user.setting',
+        requiresAuth: true,
+        roles: [RoleType.admin, RoleType.user],
+      },
+    },
   ],
 };

packages/toolkits/pro/template/tinyvue/src/views/form/step/components/head.vue

@@ -3,7 +3,7 @@
     <img src="@/assets/images/user-head.png" alt="user" class="user-image" />
     <div>
       <h3 class="user-name">{{ $t('stepForm.head.admin') }}</h3>
-      <h3 class="user-name">{{ userStore.name }}</h3>
+      <h3 class="user-name">{{ userStore.userInfo.name }}</h3>
     </div>
   </div>
   <div class="divider"></div>
@@ -15,23 +15,23 @@
           <div class="col">
             <div>{{ $t('stepForm.recruitment.department') }}</div>
             <div class="space"></div>
-            <div>{{ userStore.department }}</div>
+            <div>{{ userStore.userInfo.department }}</div>
           </div>
         </tiny-col>
         <img src="@/assets/images/head-2.png" class="head-image" />
         <tiny-col :span="6">
           <div class="col">
             <div>{{ $t('stepForm.recruitment.type') }}</div>
             <div class="space"></div>
-            <div>{{ userStore.employeeType }}</div>
+            <div>{{ userStore.userInfo.employeeType }}</div>
           </div>
         </tiny-col>
         <img src="@/assets/images/head-3.png" class="head-image" />
         <tiny-col :span="6">
           <div class="col">
             <div>{{ $t('stepForm.recruitment.position') }}</div>
             <div class="space"></div>
-            <div>{{ userStore.job }}</div>
+            <div>{{ userStore.userInfo.job }}</div>
           </div>
         </tiny-col>
       </tiny-row>
@@ -42,9 +42,9 @@
             <div>{{ $t('stepForm.probation.start') }}</div>
             <div class="space"></div>
             <div>
-              {{ userStore.probationStart }}
+              {{ userStore.userInfo.probationStart }}
               ~
-              {{ userStore.probationEnd }}
+              {{ userStore.userInfo.probationEnd }}
             </div>
           </div>
         </tiny-col>
@@ -53,7 +53,7 @@
           <div class="col">
             <div>{{ $t('stepForm.start.date') }}</div>
             <div class="space"></div>
-            <div>{{ userStore.protocolStart }}</div>
+            <div>{{ userStore.userInfo.protocolStart }}</div>
           </div>
         </tiny-col>
         <img src="@/assets/images/head-6.png" class="head-image" />
@@ -62,7 +62,7 @@
             <div>{{ $t('stepForm.probation.period') }}</div>
             <div class="space"></div>
             <div
-              >{{ userStore.probationDuration
+              >{{ userStore.userInfo.probationDuration
               }}{{ $t('stepForm.probation.day') }}</div
             >
           </div>

packages/toolkits/pro/template/tinyvue/src/views/form/step/index.vue

@@ -75,12 +75,15 @@
 
 <style scoped lang="less">
   .container-step {
+    display: flex;
     flex-direction: column;
+    align-content: center;
     justify-content: center;
     width: 98%;
     height: inherit;
     margin: 0 auto;
     overflow: auto;
+    word-break: break-all;
 
     .general-card {
       display: flex;

packages/toolkits/pro/template/tinyvue/src/views/list/search-table/index.vue

@@ -364,11 +364,10 @@
     state.loading = true;
     try {
       const { data } = await queryEmployeeList(queryParmas);
-      const { data: list } = data;
-      tableData.value = list.data;
-      const { total } = list;
+      const { data: list, total } = data;
+      tableData.value = list;
       return {
-        result: list.data,
+        result: list,
         page: { total },
       };
     } finally {
@@ -379,6 +378,7 @@
   const fetchDataOption = reactive({
     api: ({ page }: any) => {
       const { currentPage, pageSize } = page;
+
       return fetchData({
         pageIndex: currentPage,
         pageSize,

packages/toolkits/pro/template/tinyvue/src/views/login/index.vue

@@ -24,18 +24,7 @@
 
 <script lang="ts" setup>
   import Footer from '@/components/footer/index.vue';
-  import { useMenuStore } from '@/store/modules/router';
-  import { useRouter } from 'vue-router';
-  import { onMounted } from 'vue';
   import LoginForm from './components/login-form.vue';
-
-  const router = useRouter();
-  onMounted(() => {
-    const menuStore = useMenuStore();
-    if (menuStore.menuList.length) {
-      router.go(0);
-    }
-  });
 </script>
 
 <style lang="less" scoped>

packages/toolkits/pro/template/tinyvue/src/views/permission/info/components/info-tab.vue

@@ -3,7 +3,7 @@
     <div class="tiny-fullscreen-wrapper">
       <div class="permission-add-btn">
         <tiny-button
-          v-permission="'permission::remove'"
+          v-permission="'menu::remove'"
           type="primary"
           @click="handleAddPermission"
           >{{ $t('permissionInfo.modal.title.add') }}</tiny-button
@@ -38,14 +38,14 @@
           >
             <template #default="data">
               <a
-                v-permission="'permission::update'"
+                v-permission="'menu::update'"
                 class="operation-update"
                 @click="handleUpdate(data.row.id)"
               >
                 {{ $t('permissionInfo.table.operations.update') }}
               </a>
               <a
-                v-permission="'permission::remove'"
+                v-permission="'menu::remove'"
                 class="operation-delete"
                 @click="handleDelete(data.row.id)"
               >