refactor: 优化角色管理、用户管理相关代码

src/views/system/config/components/BasicSetting.vue

@@ -92,13 +92,13 @@
         </a-form-item>
         <div style="margin-top: 20px">
           <a-space>
-            <a-button v-if="!isUpdate" @click="onResetValue">
+            <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
               <template #icon>
                 <icon-undo />
               </template>
               恢复默认
             </a-button>
-            <a-button v-if="!isUpdate" type="primary" @click="onUpdate">
+            <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
               <template #icon>
                 <icon-edit />
               </template>

src/views/system/dept/index.vue

@@ -160,8 +160,8 @@ const onExport = () => {
 
 const DeptAddModalRef = ref<InstanceType<typeof DeptAddModal>>()
 // 新增
-const onAdd = (id?: string) => {
+const onAdd = (parentId?: string) => {
-  DeptAddModalRef.value?.onAdd(id)
+  DeptAddModalRef.value?.onAdd(parentId)
 }
 
 // 修改

src/views/system/menu/MenuAddModal.vue

@@ -48,13 +48,13 @@
       <a-form-item v-if="[1, 2].includes(form.type) && !form.isExternal" label="组件名称" field="name">
         <a-input v-model.trim="form.name" placeholder="请输入组件名称" allow-clear />
         <template #extra>
-          <div v-if="routeName">
+          <div v-if="componentName">
             <span>建议组件名称：</span>
-            <a-tag checkable @check="inputRouteName">{{ routeName }}</a-tag>
+            <a-tag checkable @check="inputComponentName">{{ componentName }}</a-tag>
           </div>
         </template>
       </a-form-item>
-      <a-form-item label="组件路径" field="component" v-if="form.type === 2">
+      <a-form-item v-if="form.type === 2" label="组件路径" field="component">
         <a-input v-if="form.isExternal" v-model.trim="form.component" placeholder="请输入组件路径" allow-clear />
         <a-input v-else v-model.trim="form.component" placeholder="请输入组件路径" allow-clear>
           <template #prepend>@/views/</template>
@@ -64,7 +64,7 @@
       <a-form-item v-if="form.type === 3" label="权限标识" field="permission">
         <a-input v-model.trim="form.permission" placeholder="system:user:add" allow-clear />
       </a-form-item>
-      <a-row :gutter="16" v-if="[1, 2].includes(form.type)">
+      <a-row v-if="[1, 2].includes(form.type)" :gutter="16">
         <a-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
           <a-form-item label="是否隐藏" field="hidden">
             <a-switch
@@ -90,7 +90,7 @@
           </a-form-item>
         </a-col>
         <a-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
-          <a-form-item label="是否外链" field="isExternalUrl" v-if="form.type === 2">
+          <a-form-item v-if="form.type === 2" label="是否外链" field="isExternalUrl">
             <a-switch
               v-model="form.isExternal"
               :checked-value="true"
@@ -121,8 +121,8 @@
 
 <script setup lang="ts">
 import { getMenu, addMenu, updateMenu, type MenuResp } from '@/apis'
-import { Message, type FormInstance } from '@arco-design/web-vue'
 import type { MenuForm } from './type'
+import { Message, type FormInstance } from '@arco-design/web-vue'
 import { useForm } from '@/hooks'
 import { filterTree, transformPathToName } from '@/utils'
 import { mapTree } from 'xe-utils'
@@ -130,7 +130,6 @@ import { mapTree } from 'xe-utils'
 interface Props {
   menus: MenuResp[]
 }
-
 const props = withDefaults(defineProps<Props>(), {
   menus: () => []
 })
@@ -176,7 +175,7 @@ const { form, resetForm } = useForm<MenuForm>({
   parentId: '',
   status: 1
 })
-const routeName = computed(() => transformPathToName(form.path))
+const componentName = computed(() => transformPathToName(form.path))
 const formRules = computed(() => {
   if ([1, 2].includes(form.type)) {
     const { title, name, path } = rules
@@ -187,9 +186,9 @@ const formRules = computed(() => {
     return { parentId, title, permission } as FormInstance['rules']
   }
 })
-
+// 设置建议组件名
-const inputRouteName = () => {
+const inputComponentName = () => {
-  form.name = routeName.value
+  form.name = componentName.value
 }
 
 // 切换类型清除校验

src/views/system/menu/index.vue

@@ -177,8 +177,8 @@ const onExpanded = () => {
 
 const MenuAddModalRef = ref<InstanceType<typeof MenuAddModal>>()
 // 新增
-const onAdd = (id?: string) => {
+const onAdd = (parentId?: string) => {
-  MenuAddModalRef.value?.onAdd(id)
+  MenuAddModalRef.value?.onAdd(parentId)
 }
 
 // 修改

src/views/system/role/RoleDetailDrawer.vue

@@ -21,7 +21,7 @@
       title="功能权限"
       :column="2"
       size="large"
-      class="general-description"
+      class="permission general-description"
       style="margin-top: 20px; position: relative"
     >
       <a-descriptions-item :span="2">
@@ -67,7 +67,6 @@ const { data_scope_enum } = useDict('data_scope_enum')
 const { deptList, getDeptList } = useDept()
 const { menuList, getMenuList } = useMenu()
 
-const visible = ref(false)
 const dataId = ref('')
 const dataDetail = ref<RoleDetailResp>()
 // 查询详情
@@ -76,8 +75,9 @@ const getDataDetail = async () => {
   dataDetail.value = res.data
 }
 
-// 打开详情
+const visible = ref(false)
-const open = async (id: string) => {
+// 详情
+const onDetail = async (id: string) => {
   if (!menuList.value.length) {
     await getMenuList()
   }
@@ -89,7 +89,11 @@ const open = async (id: string) => {
   visible.value = true
 }
 
-defineExpose({ open })
+defineExpose({ onDetail })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.permission :deep(.arco-descriptions-item-label-block) {
+  padding-right: 0;
+}
+</style>

src/views/system/role/index.vue

@@ -32,7 +32,7 @@
           </a-button>
         </template>
         <template #name="{ record }">
-          <a-link @click="openDetail(record)">{{ record.name }}</a-link>
+          <a-link @click="onDetail(record)">{{ record.name }}</a-link>
         </template>
         <template #status="{ record }">
           <GiCellStatus :status="record.status" />
@@ -74,8 +74,8 @@ import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import { isMobile } from '@/utils'
-import { DisEnableStatusList } from '@/constant/common'
 import has from '@/utils/has'
+import { DisEnableStatusList } from '@/constant/common'
 
 defineOptions({ name: 'SystemRole' })
 
@@ -147,9 +147,9 @@ const onUpdate = (item: RoleResp) => {
 }
 
 const RoleDetailDrawerRef = ref<InstanceType<typeof RoleDetailDrawer>>()
-// 打开详情
+// 详情
-const openDetail = (item: RoleResp) => {
+const onDetail = (item: RoleResp) => {
-  RoleDetailDrawerRef.value?.open(item.id)
+  RoleDetailDrawerRef.value?.onDetail(item.id)
 }
 </script>
 

src/views/system/user/UserAddModal.vue

@@ -19,7 +19,7 @@
         <a-input-password v-model.trim="form.password" placeholder="请输入密码" :max-length="32" />
       </a-form-item>
       <a-form-item label="手机号码" field="phone">
-        <a-input v-model.trim="form.phone" placeholder="请输入手机号码" />
+        <a-input v-model.trim="form.phone" placeholder="请输入手机号码" :max-length="11" />
       </a-form-item>
       <a-form-item label="邮箱" field="email">
         <a-input v-model.trim="form.email" placeholder="请输入邮箱" :max-length="255" />

src/views/system/user/UserDetailDrawer.vue

@@ -32,7 +32,6 @@ import { useWindowSize } from '@vueuse/core'
 
 const { width } = useWindowSize()
 
-const visible = ref(false)
 const dataId = ref('')
 const dataDetail = ref<UserDetailResp>()
 // 查询详情
@@ -41,14 +40,15 @@ const getDataDetail = async () => {
   dataDetail.value = res.data
 }
 
-// 打开详情
+const visible = ref(false)
-const open = async (id: string) => {
+// 详情
+const onDetail = async (id: string) => {
   dataId.value = id
   await getDataDetail()
   visible.value = true
 }
 
-defineExpose({ open })
+defineExpose({ onDetail })
 </script>
 
 <style lang="scss" scoped></style>

src/views/system/user/index.vue

@@ -9,7 +9,6 @@
           <a-tree ref="treeRef" :data="deptList" default-expand-all show-line block-node @select="handleSelectDept">
           </a-tree>
         </a-col>
-
         <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20">
           <GiTable
             ref="tableRef"
@@ -54,7 +53,7 @@
                 :avatar="getAvatar(record.avatar, record.gender)"
                 :name="record.nickname"
                 is-link
-                @click="openDetail(record)"
+                @click="onDetail(record)"
               />
             </template>
             <template #gender="{ record }">
@@ -80,9 +79,9 @@
                   删除
                 </a-link>
                 <a-dropdown>
-                  <a-button type="text">更多</a-button>
+                  <a-button v-if="has.hasPermOr(['system:user:resetPwd'])" type="text">更多</a-button>
                   <template #content>
-                    <a-doption @click="onResetPwd(record)">重置密码</a-doption>
+                    <a-doption v-permission="['system:user:resetPwd']" @click="onResetPwd(record)">重置密码</a-doption>
                   </template>
                 </a-dropdown>
               </a-space>
@@ -225,9 +224,9 @@ const onUpdate = (item: UserResp) => {
 }
 
 const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()
-// 打开详情
+// 详情
-const openDetail = (item: UserResp) => {
+const onDetail = (item: UserResp) => {
-  UserDetailDrawerRef.value?.open(item.id)
+  UserDetailDrawerRef.value?.onDetail(item.id)
 }
 
 const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()