feat: 用户

apps/web-baicai/src/api/system/user.ts

@@ -20,6 +20,7 @@ export namespace UserApi {
     nickName: string;
     phone: string;
     sex: number;
+    status: number;
   }
 
   export interface RecordItem extends BasicRecordItem {

apps/web-baicai/src/views/system/user/components/edit.vue

@@ -5,11 +5,11 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
+import { useFormOptions, useVbenForm } from '#/adapter';
 import { UserApi } from '#/api';
 import { encrypt } from '#/utils';
 
-import { formOptions } from '../data.config';
+import { useSchema } from '../data.config';
 
 defineOptions({
   name: 'UserEdit',
@@ -18,10 +18,12 @@ const emit = defineEmits(['success']);
 const modelRef = ref<Record<string, any>>({});
 const isUpdate = ref(true);
 
-const [Form, { validate, setValues, getValues, updateSchema }] = useVbenForm({
-  showDefaultActions: false,
-  ...formOptions,
-});
+const [Form, { validate, setValues, getValues, updateSchema }] = useVbenForm(
+  useFormOptions({
+    schema: useSchema(),
+    wrapperClass: 'grid-cols-2',
+  }),
+);
 
 const [Modal, { close, setState, getData }] = useVbenModal({
   fullscreenButton: false,

apps/web-baicai/src/views/system/user/data.config.ts

@@ -1,11 +1,13 @@
-import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type {
+  OnActionClickFn,
+  VbenFormSchema,
+  VxeTableGridOptions,
+} from '#/adapter';
 
 import { DepartmentApi, EnumApi, PostApi, UserApi } from '#/api';
-import { formatterStatus } from '#/api/model';
 
-export const searchFormOptions: VbenFormProps = {
-  schema: [
+export const useSearchSchema = (): VbenFormSchema[] => {
+  return [
     {
       component: 'Input',
       fieldName: 'account',
@@ -16,18 +18,13 @@ export const searchFormOptions: VbenFormProps = {
       fieldName: 'name',
       label: '姓名',
     },
-  ],
+  ];
 };
 
-export const gridOptions: VxeGridProps<UserApi.RecordItem> = {
-  toolbarConfig: {
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    custom: true,
-  },
-  columns: [
+export function useColumns(
+  onActionClick?: OnActionClickFn<UserApi.RecordItem>,
+): VxeTableGridOptions<UserApi.RecordItem>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
     {
       align: 'left',
@@ -36,43 +33,66 @@ export const gridOptions: VxeGridProps<UserApi.RecordItem> = {
       width: 200,
     },
     { align: 'left', field: 'realName', title: '姓名', width: 120 },
-    { align: 'left', field: 'remark', title: '备注' },
     {
       field: 'status',
       title: '状态',
-      width: 60,
-      formatter: formatterStatus,
+      width: 82,
+      cellRender: { name: 'CellTag' },
     },
+    { align: 'left', field: 'remark', title: '备注' },
     {
-      field: 'action',
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'account',
+          nameTitle: '账号',
+          onClick: onActionClick,
+        },
+        name: 'CellAction',
+        options: [
+          {
+            code: 'edit',
+            auth: ['user:edit'],
+          },
+          {
+            code: 'resetPwd',
+            label: '重置密码',
+            auth: ['user:resetPwd'],
+            confirm: {
+              title: '重置密码提示',
+              content: `确定要重置选择的记录吗?`,
+            },
+          },
+          {
+            code: 'setStatus',
+            label: (row: UserApi.RecordItem) => {
+              return row.status === 1 ? '禁用' : '启用';
+            },
+            auth: ['user:setStatus'],
+          },
+          {
+            code: 'grantRole',
+            label: '角色管理',
+            auth: ['user:grantRole'],
+          },
+          {
+            code: 'delete',
+            auth: ['user:delete'],
+          },
+        ],
+      },
+      field: 'operation',
       fixed: 'right',
-      slots: { default: 'action' },
+      headerAlign: 'center',
+      showOverflow: false,
       title: '操作',
       width: 160,
     },
-  ],
-  height: 'auto',
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        return await UserApi.getPage({
-          pageIndex: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
-      },
-    },
-  },
-};
+  ];
+}
 
-export const formOptions: VbenFormProps = {
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: [
+export const useSchema = (): VbenFormSchema[] => {
+  return [
     {
       component: 'Input',
       componentProps: {
@@ -192,6 +212,5 @@ export const formOptions: VbenFormProps = {
       fieldName: 'postId',
       label: '职位',
     },
-  ],
-  wrapperClass: 'grid-cols-2',
+  ];
 };

apps/web-baicai/src/views/system/user/index.vue

@@ -1,27 +1,20 @@
 <script lang="ts" setup>
-import { useAccess } from '@vben/access';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { useClipboard } from '@vueuse/core';
 import { Button, message, Modal } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
 import { RoleApi, UserApi } from '#/api';
 import { SelectCard } from '#/components/select-card';
-import { TableAction } from '#/components/table-action';
 
 import FormEdit from './components/edit.vue';
-import { gridOptions, searchFormOptions } from './data.config';
-
-const { hasAccessByCodes } = useAccess();
+import { useColumns, useSearchSchema } from './data.config';
 
 const { copy } = useClipboard({ legacy: true });
 
-const [Grid, { reload }] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions,
-});
-
 const [FormEditModal, formEditApi] = useVbenModal({
   connectedComponent: FormEdit,
 });
@@ -30,39 +23,23 @@ const [SelectCardModal, selectCardApi] = useVbenModal({
   connectedComponent: SelectCard,
 });
 
-const handelResetPassword = (id: number) => {
-  Modal.confirm({
-    iconType: 'info',
-    title: '重置密码提示',
-    content: `确定要重置选择的记录吗?`,
-    cancelText: `关闭`,
-    onOk: async () => {
-      const data = await UserApi.resetPassword([id]);
-      Modal.success({
-        title: '重置成功',
-        content: `新密码为:${data}`,
-        okText: `复制密码`,
-        onOk: () => {
-          copy(data);
-          message.success('密码复制成功！');
-        },
-      });
+const handelResetPassword = async (id: number) => {
+  const data = await UserApi.resetPassword([id]);
+  Modal.success({
+    title: '重置成功',
+    content: `新密码为:${data}`,
+    okText: `复制密码`,
+    onOk: () => {
+      copy(data);
+      message.success('密码复制成功！');
     },
   });
 };
 
-const handleDelete = (id: number) => {
-  Modal.confirm({
-    iconType: 'info',
-    title: '删除提示',
-    content: `确定要删除选择的记录吗?`,
-    cancelText: `关闭`,
-    onOk: async () => {
-      await UserApi.deleteDetail(id);
-      message.success('数据删除成功');
-      reload();
-    },
-  });
+const handleDelete = async (id: number) => {
+  await UserApi.deleteDetail(id);
+  message.success('数据删除成功');
+  reload();
 };
 
 const handleUpdateStatus = async (record: any) => {
@@ -74,35 +51,35 @@ const handleUpdateStatus = async (record: any) => {
 };
 
 const handleEdit = (record: any, isUpdate: boolean) => {
-  formEditApi.setData({
-    isUpdate,
-    baseData: { id: record.id },
-  });
-
-  formEditApi.open();
+  formEditApi
+    .setData({
+      isUpdate,
+      baseData: { id: record.id },
+    })
+    .open();
 };
 
 const handelGrantRole = async (id: number) => {
   const selectedIds = await UserApi.getRoleIds(id);
-  selectCardApi.setData({
-    baseData: {
-      key: id,
-      selectedIds,
-      fieldNames: [
-        { label: '编号', value: 'code', maxLength: 12 },
-        { label: '名称', value: 'name', maxLength: 8 },
-      ],
-      config: {
-        type: 'role',
-      },
-      api: {
-        url: RoleApi.getPage,
+  selectCardApi
+    .setData({
+      baseData: {
+        key: id,
+        selectedIds,
+        fieldNames: [
+          { label: '编号', value: 'code', maxLength: 12 },
+          { label: '名称', value: 'name', maxLength: 8 },
+        ],
+        config: {
+          type: 'role',
+        },
+        api: {
+          url: RoleApi.getPage,
+        },
+        searchName: 'name',
       },
-      searchName: 'name',
-    },
-  });
-
-  selectCardApi.open();
+    })
+    .open();
 };
 
 const handelSuccess = () => {
@@ -113,6 +90,56 @@ const handelRoleSuccess = async (data: any) => {
   await UserApi.updateGrantRole({ id: data.key, relationIds: data.ids });
   message.success('授权成功');
 };
+
+const handleActionClick = async ({
+  code,
+  row,
+}: OnActionClickParams<UserApi.RecordItem>) => {
+  switch (code) {
+    case 'delete': {
+      await handleDelete(row.id);
+      break;
+    }
+    case 'edit': {
+      handleEdit(row, true);
+      break;
+    }
+    case 'grantRole': {
+      handelGrantRole(row.id);
+      break;
+    }
+    case 'resetPwd': {
+      handelResetPassword(row.id);
+      break;
+    }
+    case 'setStatus': {
+      await handleUpdateStatus(row);
+      break;
+    }
+  }
+};
+
+const [Grid, { reload }] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useColumns(handleActionClick),
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await UserApi.getPage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 </script>
 
 <template>
@@ -134,45 +161,6 @@ const handelRoleSuccess = async (data: any) => {
           新增用户
         </Button>
       </template>
-      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: '编辑',
-              type: 'text',
-              danger: true,
-              disabled: !hasAccessByCodes(['user:edit']),
-              onClick: handleEdit.bind(null, row, true),
-            },
-            {
-              label: '重置密码',
-              type: 'text',
-              disabled: !hasAccessByCodes(['user:resetPwd']),
-              onClick: handelResetPassword.bind(null, row.id),
-            },
-          ]"
-          :drop-down-actions="[
-            {
-              label: row.status === 1 ? '禁用' : '启用',
-              type: 'link',
-              disabled: !hasAccessByCodes(['user:setStatus']),
-              onClick: handleUpdateStatus.bind(null, row),
-            },
-            {
-              label: '角色管理',
-              type: 'link',
-              disabled: !hasAccessByCodes(['user:grantRole']),
-              onClick: handelGrantRole.bind(null, row.id),
-            },
-            {
-              label: '删除',
-              type: 'link',
-              disabled: !hasAccessByCodes(['user:delete']),
-              onClick: handleDelete.bind(null, row.id),
-            },
-          ]"
-        />
-      </template>
     </Grid>
   </Page>
 </template>