修复bug

src/views/account-management/account/index.vue

@@ -31,30 +31,17 @@
           :pageSize="pagination.pageSize"
           :total="pagination.total"
           :marginTop="10"
-          :row-class-name="getRowClassName"
+          :actions="getActions"
+          :actionsWidth="160"
           @selection-change="handleSelectionChange"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
-          @row-contextmenu="handleRowContextMenu"
-          @cell-mouse-enter="handleCellMouseEnter"
-          @cell-mouse-leave="handleCellMouseLeave"
         >
           <template #default>
             <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
           </template>
         </ArtTable>
 
-        <!-- 鼠标悬浮提示 -->
-        <TableContextMenuHint :visible="showContextMenuHint" :position="hintPosition" />
-
-        <!-- 右键菜单 -->
-        <ArtMenuRight
-          ref="contextMenuRef"
-          :menu-items="contextMenuItems"
-          :menu-width="120"
-          @select="handleContextMenuSelect"
-        />
-
         <ElDialog
           v-model="dialogVisible"
           :title="dialogType === 'add' ? '添加账号' : '编辑账号'"
@@ -197,10 +184,6 @@
   import type { FormRules } from 'element-plus'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { useAuth } from '@/composables/useAuth'
-  import { useTableContextMenu } from '@/composables/useTableContextMenu'
-  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
-  import TableContextMenuHint from '@/components/core/others/TableContextMenuHint.vue'
-  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
   import { AccountService } from '@/api/modules/account'
   import { RoleService } from '@/api/modules/role'
   import { ShopService, EnterpriseService } from '@/api/modules'
@@ -214,25 +197,13 @@
   const { hasAuth } = useAuth()
   const route = useRoute()
 
-  // 使用表格右键菜单功能
-  const {
-    showContextMenuHint,
-    hintPosition,
-    getRowClassName,
-    handleCellMouseEnter,
-    handleCellMouseLeave
-  } = useTableContextMenu()
-
   const dialogType = ref('add')
   const dialogVisible = ref(false)
   const roleDialogVisible = ref(false)
   const loading = ref(false)
-  const roleSubmitLoading = ref(false)
   const currentAccountId = ref<number>(0)
   const currentAccountName = ref<string>('')
   const currentAccountType = ref<number>(0)
-  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
-  const currentRow = ref<any | null>(null)
   const selectedRoles = ref<number[]>([])
   const allRoles = ref<PlatformRole[]>([])
   const rolesToAdd = ref<number[]>([])
@@ -493,6 +464,37 @@
     }
   ])
 
+  // 操作列配置
+  const getActions = (row: any) => {
+    const actions: any[] = []
+
+    if (hasAuth('account:patch_role')) {
+      actions.push({
+        label: '分配角色',
+        handler: () => showRoleDialog(row),
+        type: 'primary'
+      })
+    }
+
+    if (hasAuth('account:edit')) {
+      actions.push({
+        label: '编辑',
+        handler: () => showDialog('edit', row),
+        type: 'primary'
+      })
+    }
+
+    if (hasAuth('account:delete')) {
+      actions.push({
+        label: '删除',
+        handler: () => deleteAccount(row),
+        type: 'danger'
+      })
+    }
+
+    return actions
+  }
+
   // 表单实例
   const formRef = ref<FormInstance>()
 
@@ -678,7 +680,12 @@
   const rules = reactive<FormRules>({
     username: [
       { required: true, message: '请输入账号名称', trigger: 'blur' },
-      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
+      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
+      {
+        pattern: /^[a-zA-Z0-9_-]+$/,
+        message: '用户名只能包含字母、数字、下划线和横线',
+        trigger: 'blur'
+      }
     ],
     password: [
       { required: true, message: '请输入密码', trigger: 'blur' },
@@ -692,7 +699,7 @@
     user_type: [{ required: true, message: '请选择账号类型', trigger: 'change' }],
     shop_id: [
       {
-        validator: (rule: any, value: any, callback: any) => {
+        validator: (_rule: any, value: any, callback: any) => {
           if (formData.user_type === 3 && !value) {
             callback(new Error('代理账号必须关联店铺'))
           } else {
@@ -704,7 +711,7 @@
     ],
     enterprise_id: [
       {
-        validator: (rule: any, value: any, callback: any) => {
+        validator: (_rule: any, value: any, callback: any) => {
           if (formData.user_type === 4 && !value) {
             callback(new Error('企业账号必须关联企业'))
           } else {
@@ -832,59 +839,9 @@
   }
 
   // 右键菜单项配置
-  const contextMenuItems = computed((): MenuItemType[] => {
-    const items: MenuItemType[] = []
-
-    if (hasAuth('account:patch_role')) {
-      items.push({ key: 'assignRole', label: '分配角色' })
-    }
-
-    if (hasAuth('account:edit')) {
-      items.push({ key: 'edit', label: '编辑' })
-    }
-
-    if (hasAuth('account:delete')) {
-      items.push({ key: 'delete', label: '删除' })
-    }
-
-    return items
-  })
-
-  // 处理表格行右键菜单
-  const handleRowContextMenu = (row: any, column: any, event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    currentRow.value = row
-    contextMenuRef.value?.show(event)
-  }
-
-  // 处理右键菜单选择
-  const handleContextMenuSelect = (item: MenuItemType) => {
-    if (!currentRow.value) return
-
-    switch (item.key) {
-      case 'assignRole':
-        showRoleDialog(currentRow.value)
-        break
-      case 'edit':
-        showDialog('edit', currentRow.value)
-        break
-      case 'delete':
-        deleteAccount(currentRow.value)
-        break
-    }
-  }
 </script>
 
 <style lang="scss" scoped>
-  .account-page {
-    // 账号管理页面样式
-  }
-
-  :deep(.el-table__row.table-row-with-context-menu) {
-    cursor: pointer;
-  }
-
   .dialog-header {
     display: flex;
     align-items: center;