create-jnrs-template-vue 1.1.6 → 1.1.7

package/jnrs-template-vue/src/views/login/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
-import { LoginApi } from '@/api/system'
+import { RoleApi, LoginApi } from '@/api/system'
 import { useAuthStore } from '@/stores'
 import { handleRouter, useRoute } from '@jnrs/vue-core/router'
 import { isWeakPwd } from '@jnrs/shared/validator'
@@ -9,7 +9,12 @@ import { formatDateTime, formatWeekday } from '@jnrs/shared'
 
 const route = useRoute()
 const loading = ref(false)
-const { setUserInfo, setToken, setDict } = useAuthStore()
+const {
+  setUserInfo,
+  setToken,
+  setDict
+  // setRole
+} = useAuthStore()
 
 // 表单 ref
 const ruleFormRef = ref<FormInstance>()
@@ -28,24 +33,40 @@ const rules = ref<FormRules>({
 })
 
 // 提交函数
-const submitForm = () => {
+const submitForm = async () => {
   if (!ruleFormRef.value) return
   ruleFormRef.value.validate(async (valid) => {
     if (!valid) return
     loading.value = true
     try {
-      const res = await LoginApi(ruleForm.value)
-      const { token, dict, ...restParameter } = res
+      const loginRes = await LoginApi(ruleForm.value)
+      const { token, dict, ...restParameter } = loginRes
       const loginDateTime = formatDateTime() + ' ' + formatWeekday()
+
+      // 获取角色列表，将登录人角色对应的权限叠加给当前登录人（一次性获取叠加）
+      const roleRes = await RoleApi()
+      let permissionsMerger = restParameter.permissions
+      if (Array.isArray(restParameter.permissions)) {
+        permissionsMerger = [
+          ...new Set([
+            ...restParameter.permissions,
+            ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
+          ])
+        ]
+      }
+      // setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
+
       setUserInfo({
         ...restParameter,
+        permissions: permissionsMerger,
         account: ruleForm.value.account,
         loginDateTime
       })
       setToken(token)
       setDict(dict)
       handleRouter({ path: route.query.redirect?.toString() || '/' }, 'replace')
-    } catch {
+    } catch (e) {
+      console.log(e)
     } finally {
       loading.value = false
     }

package/jnrs-template-vue/src/views/system/dict/index.vue

@@ -4,8 +4,10 @@ import { ref, onActivated } from 'vue'
 import { DictApi, DictDetailApi, DictChangeApi } from '@/api/system'
 import { useAsyncTableHeight } from '@jnrs/vue-core/composables'
 import type { DictItem } from '@jnrs/shared'
+import { hasPermission } from '@/utils/permissions'
 
 const { maxHeight } = useAsyncTableHeight('el_table_dict', 0)
+const PERMISSION_EDIT = ['dict:edit']
 const loading = ref(false)
 const tableData = ref<DictItem[]>()
 const predefineColors = ref([
@@ -92,23 +94,19 @@ const editKeyValue = (row: DictItem) => {
         <el-table-column prop="describe" label="说明" />
         <el-table-column type="expand" fixed="right" label="字典值" width="100">
           <template #default="scope">
-            <div
-              class="table_expand animation15"
-              style="animation-duration: 0.5s; animation-delay: 0s"
-            >
+            <div class="table_expand animation15" style="animation-duration: 0.5s; animation-delay: 0s">
               <div class="table_expand_top">
                 <h5>字典值列表</h5>
               </div>
               <el-table :data="scope.row.options" :border="true" size="small" row-key="value">
-                <el-table-column
-                  label="value"
-                  prop="value"
-                  width="100"
-                  align="center"
-                ></el-table-column>
+                <el-table-column label="value" prop="value" width="100" align="center"></el-table-column>
                 <el-table-column label="label" prop="label">
                   <template #default="optionScope">
-                    <el-input v-model="optionScope.row.label" maxlength="20" />
+                    <el-input
+                      v-model="optionScope.row.label"
+                      maxlength="20"
+                      :disabled="!hasPermission(PERMISSION_EDIT)"
+                    />
                   </template>
                 </el-table-column>
                 <el-table-column label="颜色" prop="displayColor">
@@ -116,6 +114,7 @@ const editKeyValue = (row: DictItem) => {
                     <el-color-picker
                       v-model="optionScope.row.displayColor"
                       :predefine="predefineColors"
+                      :disabled="!hasPermission(PERMISSION_EDIT)"
                     />
                     <span style="margin-left: 10px">
                       {{ optionScope.row.displayColor || '无' }}
@@ -131,15 +130,14 @@ const editKeyValue = (row: DictItem) => {
                       :step="1"
                       controls-position="right"
                       step-strictly
+                      :disabled="!hasPermission(PERMISSION_EDIT)"
                       style="width: 140px"
                     />
                   </template>
                 </el-table-column>
-                <el-table-column label="操作" width="100" align="center" fixed="right">
+                <el-table-column label="操作" width="100" align="center" fixed="right" v-permissions="PERMISSION_EDIT">
                   <template #default="optionScope">
-                    <el-button type="success" size="small" @click="editKeyValue(optionScope.row)">
-                      确认修改
-                    </el-button>
+                    <el-button type="success" size="small" @click="editKeyValue(optionScope.row)">确认修改</el-button>
                   </template>
                 </el-table-column>
               </el-table>

package/jnrs-template-vue/src/views/system/menu/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useMenuStore } from '@/stores'
-import { getDictLabel } from '@/utils/common'
 import { useAsyncTableHeight } from '@jnrs/vue-core/composables'
 
 const { maxHeight } = useAsyncTableHeight('el_table_menu', 0)
@@ -27,38 +26,37 @@ const { menus } = useMenuStore()
         border
         v-loading="loading"
       >
-        <el-table-column prop="meta.title" label="名称" min-width="120" />
-        <el-table-column prop="path" label="路由地址" min-width="120" />
-        <el-table-column prop="role" label="权限" min-width="120">
+        <el-table-column prop="meta.title" label="标题" min-width="120" header-align="center" />
+        <el-table-column prop="icon" label="图标" width="60" align="center">
           <template #default="{ row }">
-            <span v-if="!row.meta.role" style="color: #999">auto</span>
-            <template v-else>
-              {{ row.meta.role.map((d: string | number) => getDictLabel('role', d)) }}
-            </template>
+            <el-icon v-if="row.meta.icon"><component :is="row.meta.icon" /></el-icon>
           </template>
         </el-table-column>
-        <el-table-column prop="editRole" label="操作权限" min-width="120">
-          <template #default="scope">
-            <template v-if="!scope.row.editRole">
-              <span style="color: #999" v-if="!scope.row.role">auto</span>
-              <!-- <template v-else>
-                {{ scope.row.role.map((d) => getDictLabel('role', d.split('Role')[1])) }}
-              </template> -->
-            </template>
-            <!-- <template v-else>
-              {{ scope.row.editRole.map((d) => getDictLabel('role', d.split('Role')[1])) }}
-            </template> -->
+        <el-table-column prop="path" label="路由地址" min-width="120" header-align="center" />
+        <el-table-column prop="component" label="component path" min-width="120" header-align="center" />
+        <el-table-column prop="redirect" label="redirect" min-width="120" header-align="center" />
+        <el-table-column prop="editRole" label="权限标识" min-width="120" header-align="center">
+          <template #default="{ row }">
+            <span v-if="!row.meta.permissions" style="color: #999">auto</span>
+            <span v-else>{{ row.meta.permissions }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="type" label="类型" width="80" align="center">
-          <template #default="scope">
-            <el-tag type="primary" v-if="scope.row.path">菜单</el-tag>
+          <template #default="{ row }">
+            <el-tag type="primary" v-if="row.path">菜单</el-tag>
             <el-tag type="success" v-else>目录</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="activate" label="图标" width="80" align="center">
-          <template #default="scope">
-            <el-icon v-if="scope.row.icon"><component :is="scope.row.icon" /></el-icon>
+        <el-table-column prop="type" label="NoAuth" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag type="danger" v-if="row.meta.noAuth">否</el-tag>
+            <el-tag type="success" v-else>是</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="Global" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.meta.global">是</el-tag>
+            <el-tag type="primary" v-else>否</el-tag>
           </template>
         </el-table-column>
       </el-table>

package/jnrs-template-vue/src/views/system/mine/baseInfo.vue

@@ -77,7 +77,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
       <el-input v-model.trim="ruleForm.workNo" style="width: 200px" />
     </el-form-item>
     <el-form-item label="职称" prop="jobTitle">
-      <el-select v-model="ruleForm.jobTitle" style="width: 200px">
+      <el-select v-model="ruleForm.jobTitle" placeholder="" style="width: 200px">
         <el-option
           :label="item.label"
           :value="item.value"
@@ -90,7 +90,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
       <el-input v-model.trim="ruleForm.workgroup" style="width: 200px" />
     </el-form-item>
     <el-form-item label="职位/账号权限" prop="role">
-      <el-select v-model="ruleForm.role" style="width: 200px">
+      <el-select v-model="ruleForm.role" placeholder="" style="width: 200px">
         <el-option
           :label="item.label"
           :value="item.value"

package/jnrs-template-vue/src/views/system/mine/securitySettings.vue

@@ -8,7 +8,7 @@ import type { FormInstance, FormItemRule } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { LogoutApi } from '@/api/system'
 
-const { userInfo, asyncClearAuth } = useAuthStore()
+const { userInfo, clearAuth } = useAuthStore()
 const loading = ref(false)
 const formRef = ref<FormInstance>()
 const ruleForm = ref({
@@ -53,7 +53,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       })
       ElMessage.success('密码修改成功，请重新登录系统')
       await LogoutApi()
-      await asyncClearAuth()
+      await clearAuth()
       handleRouter({ name: 'Login' }, 'replace')
     }
   } catch {

package/jnrs-template-vue/src/views/system/role/index.vue

@@ -1,10 +1,20 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useAuthStore } from '@/stores'
+import { ref, onMounted } from 'vue'
+import { RoleApi } from '@/api/system'
 
-const { dict } = useAuthStore()
 const loading = ref(false)
-const tableData = ref(dict?.role)
+const tableData = ref()
+
+const handleRoleApi = async () => {
+  try {
+    const res = await RoleApi()
+    tableData.value = res
+  } catch {}
+}
+
+onMounted(() => {
+  handleRoleApi()
+})
 </script>
 
 <template>
@@ -23,11 +33,15 @@ const tableData = ref(dict?.role)
         border
         v-loading="loading"
       >
-        <el-table-column prop="label" label="角色名称" align="center" />
-        <!-- <el-table-column prop="codeValue" label="系统权限" align="center" /> -->
-        <el-table-column prop="value" label="值" align="center">
-          <template #default="scope">
-            {{ scope.row.value + '[' + typeof scope.row.value + ']' }}
+        <el-table-column prop="label" label="角色名称" width="200" align="center" />
+        <el-table-column prop="value" label="值" width="200" align="center">
+          <template #default="{ row }">
+            {{ row.value + ' [' + typeof row.value + ']' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="permissions" label="可用权限" header-align="center">
+          <template #default="{ row }">
+            {{ row.permissions }}
           </template>
         </el-table-column>
       </el-table>

package/jnrs-template-vue/viteMockServe/index.ts

@@ -1,9 +1,11 @@
+import menuRes from '../public/system/menu.json'
 import successMock from './success'
 import failMock from './fail'
-import loginRes from './loginRes.json'
+import loginRes_admin from './loginRes_admin.json'
+import loginRes_user from './loginRes_user.json'
 import dictRes from './dictRes.json'
 import dictItemRes from './dictItemRes.json'
-import menuRes from '../public/system/menu.json'
+import roleRes from './roleRes.json'
 
 export default [
   ...successMock,
@@ -20,16 +22,22 @@ export default [
   {
     url: '/mock/api/auth/login',
     method: 'post',
-    response: () => {
-      return loginRes
+    response: ({ body }) => {
+      if (body.account === 'admin') {
+        return loginRes_admin
+      }
+      return loginRes_user
     }
   },
   // 获取个人信息
   {
     url: '/mock/api/auth/user-info',
     method: 'get',
-    response: () => {
-      return loginRes
+    response: ({ headers }) => {
+      if (headers.authorization.includes('admin')) {
+        return loginRes_admin
+      }
+      return loginRes_user
     }
   },
   // 获取字典
@@ -47,5 +55,13 @@ export default [
     response: () => {
       return dictItemRes
     }
+  },
+  // 获取角色
+  {
+    url: '/mock/api/role-manager',
+    method: 'get',
+    response: () => {
+      return roleRes
+    }
   }
 ]

package/jnrs-template-vue/viteMockServe/{loginRes.json → loginRes_admin.json}

@@ -1,14 +1,14 @@
 {
   "data": {
-    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
+    "token": "***admin***token***",
     "id": 1,
     "name": "管理员",
     "workNo": "000000",
-    "avatarFilenName": "20251014181230905-b2bd246f-4174-4804-8122-37c826c56a7d.png",
+    "avatarFileName": "20251014181230905-b2bd246f-4174-4804-8122-37c826c56a7d.png",
     "workgroup": null,
-    "jobTitle": 0,
+    "jobTitle": 1,
     "role": 6,
-    "permissions": ["system:view", "mine:view", "mine:edit"],
+    "permissions": [],
     "abilityCoefficient": 0.0,
     "dict": {
       "defectiveWorkHourStatus": [