功能

src/service/api/management.ts

@@ -5,6 +5,6 @@ import { adapterOfFetchUserList } from './management.adapter';
 
 /** 获取用户列表 */
 export const fetchUserList = async () => {
-  const data = await mockRequest.post<ApiUserManagement.User[] | null>('/getAllUserList');
+  const data = await mockRequest.post<ApiUserManagementAuth.User[] | any>('/permission/query');
   return adapter(adapterOfFetchUserList, data);
 };

src/service/api/user.ts

@@ -43,14 +43,14 @@ export interface AddParams {
   id?: number;
   name?: string;
   description?: string;
-  isActive?: Record<string, unknown>;
-  createTime?: Record<string, unknown>;
+  isActive?: string,
+  createTime?: string;
   modifyTime?: Record<string, unknown>;
   createUid?: number;
   disabled?: string;
 }
 
-// 响应接口
+// 删除响应接口
 export interface AddRes {
   status: boolean;
   msg: string;
@@ -73,3 +73,55 @@ export interface AddRes {
 export function add(params: AddParams) {
   return request.post(`/permission/add`, params);
 }
+
+// 响应接口
+export interface DeleteRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 删除权限
+ * @param {string} id
+  * @returns
+ */
+export function deleted(id: number) {
+  return request.delete(`/permission/delete?id=${id}`);
+}
+
+// 更新参数接口
+export interface UpdateParams {
+  id?: number;
+  name?: string;
+  description?: string;
+  isActive?: Record<string, unknown>;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+// 响应接口
+export interface UpdateRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 更新权限
+ * @param {object} params EasSysPermission
+ * @param {number} params.id ID
+ * @param {string} params.name 权限名称
+ * @param {string} params.description 权限描述
+ * @param {object} params.isActive 是否激活
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function update(params: UpdateParams){
+  return request.put(`/permission/update`, params);
+}

src/service/request/instance.ts

@@ -63,11 +63,11 @@ export default class CustomAxiosInstance {
     this.instance.interceptors.response.use(
       (async response => {
         const { status } = response;
-        if (status === 200 || status < 300 || status === 304) {
+        if (status === 200 || status < 300 || status === 304 || response.status === 200) {
           const backend = response.data;
           const { codeKey, dataKey, successCode } = this.backendConfig;
           // 请求成功
-          if (backend[codeKey] === successCode) {
+          if (backend[codeKey] === successCode || response.status === 200) {
             return handleServiceResult(null, backend[dataKey]);
           }
 

src/typings/api.auth.d.ts

@@ -0,0 +1,61 @@
+// 后端接口返回的数据类型
+
+/** 后端返回的用户权益相关类型 */
+declare namespace ApiAuth {
+  /** 返回的token和刷新token */
+  interface Token {
+    token: string;
+    refreshToken: string;
+  }
+  /** 返回的用户信息 */
+  type UserInfo = Auth.UserInfo;
+}
+
+/** 后端返回的路由相关类型 */
+declare namespace ApiRoute {
+  /** 后端返回的路由数据类型 */
+  interface Route {
+    /** 动态路由 */
+    routes: AuthRoute.Route[];
+    /** 路由首页对应的key */
+    home: AuthRoute.AllRouteKey;
+  }
+}
+
+declare namespace ApiUserManagementAuth {
+  interface User {
+    // /** 用户id */
+
+    // id: string;
+    // /** 用户名 */
+    // userName: string | null;
+    // /** 用户年龄 */
+    // age: number | null;
+    // /**
+    //  * 用户性别
+    //  * - 0: 女
+    //  * - 1: 男
+    //  */
+    // gender: '0' | '1' | null;
+    // /** 用户手机号码 */
+    // phone: string;
+    // /** 用户邮箱 */
+    // email: string | null;
+    // /**
+    //  * 用户状态
+    //  * - 1: 启用
+    //  * - 2: 禁用
+    //  * - 3: 冻结
+    //  * - 4: 软删除
+    //  */
+    // userStatus: '1' | '2' | '3' | '4' | null;
+		id: number;
+		name: string;
+		description: string;
+		isActive: string;
+		createTime: string;
+		modifyTime: string;
+		createUid: number;
+		disabled: string;
+  }
+}

src/typings/api.d.ts

@@ -8,7 +8,7 @@ declare namespace ApiAuth {
     refreshToken: string;
   }
   /** 返回的用户信息 */
-  type UserInfo = Auth.UserInfo;
+  type UserInfoAuth = Auth.UserInfo;
 }
 
 /** 后端返回的路由相关类型 */

src/typings/business.auth.d.ts

@@ -0,0 +1,45 @@
+/** 用户相关模块 */
+declare namespace Auth {
+  /**
+   * 用户角色类型(前端静态路由用角色类型进行路由权限的控制)
+   * - super: 超级管理员(该权限具有所有路由数据)
+   * - admin: 管理员
+   * - user: 用户
+   */
+  type RoleType = 'super' | 'admin' | 'user';
+
+  /** 用户信息 */
+  interface UserInfo {
+    /** 用户id */
+    userId: string;
+    /** 用户名 */
+    userName: string;
+    /** 用户角色类型 */
+    userRole: RoleType;
+  }
+}
+
+declare namespace UserManagementAuth {
+  interface User extends ApiUserManagementAuth.User {
+    /** 序号 */
+    index: number;
+    /** 表格的key（id） */
+    key: string;
+  }
+
+  // /**
+  //  * 用户性别
+  //  * - 0: 女
+  //  * - 1: 男
+  //  */
+  // type GenderKeyAuth = NonNullable<User['gender']>;
+
+  // /**
+  //  * 用户状态
+  //  * - 1: 启用
+  //  * - 2: 禁用
+  //  * - 3: 冻结
+  //  * - 4: 软删除
+  //  */
+  // type UserStatusKeyAuth = NonNullable<User['userStatus']>;
+}

src/typings/business.d.ts

@@ -6,7 +6,7 @@ declare namespace Auth {
    * - admin: 管理员
    * - user: 用户
    */
-  type RoleType = 'super' | 'admin' | 'user';
+  type RoleTypeAuth = 'super' | 'admin' | 'user';
 
   /** 用户信息 */
   interface UserInfo {
@@ -22,9 +22,9 @@ declare namespace Auth {
 declare namespace UserManagement {
   interface User extends ApiUserManagement.User {
     /** 序号 */
-    index: number;
+    index: any;
     /** 表格的key（id） */
-    key: string;
+    key: any;
   }
 
   /**

src/utils/form/rule.ts

@@ -18,7 +18,16 @@ interface CustomFormRules {
   /** 邮箱 */
   email: FormItemRule[];
 }
-
+// {
+//   "id": 0,
+//   "name": "",
+//   "description": "",
+//   "isActive": "",
+//   "createTime": "",
+//   "modifyTime": "",
+//   "createUid": 0,
+//   "disabled": ""
+// }
 /** 表单规则 */
 export const formRules: CustomFormRules = {
   phone: [

src/views/crud/demo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+    <fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
   </div>
 </template>
 

src/views/management/auth/AddView.vue

@@ -1,43 +0,0 @@
-<template>
-          <n-button type="primary" @click="showModal = true">
-            <icon-ic-round-plus class="mr-4px text-20px" />
-            新增
-          </n-button>
-  <n-modal
-    v-model:show="showModal"
-    class="custom-card"
-    preset="card"
-    :style="bodyStyle"
-    title="卡片预设"
-    size="huge"
-    :bordered="false"
-    :segmented="segmented"
-  >
-    <template #header-extra>
-      噢!
-    </template>
-    内容
-    <template #footer>
-      尾部
-    </template>
-  </n-modal>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup () {
-    return {
-      bodyStyle: {
-        width: '600px'
-      },
-      segmented: {
-        content: 'soft',
-        footer: 'soft'
-      } as const,
-      showModal: ref(false)
-    }
-  }
-})
-</script>

src/views/management/auth/components/AddView.vue

@@ -0,0 +1,175 @@
+<template>
+  <n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
+    <n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
+      <n-grid :cols="24" :x-gap="18">
+        <n-form-item-grid-item :span="12" label="id" path="id">
+          <n-input-number v-model:value="formModel.id" />
+        </n-form-item-grid-item>
+				<n-form-item-grid-item :span="12" label="名称" path="name">
+          <n-input v-model:value="formModel.name" />
+        </n-form-item-grid-item>
+				<n-form-item-grid-item :span="12" label="描述" path="description">
+          <n-input v-model:value="formModel.description" />
+        </n-form-item-grid-item>
+				<n-form-item-grid-item :span="12" label="是否激活" path="isActive">
+          <n-input v-model:value="formModel.isActive" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="创建ID" path="createUid">
+          <n-input-number v-model:value="formModel.createUid" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="状态" path="disabled">
+          <n-input v-model:value="formModel.disabled" />
+        </n-form-item-grid-item>
+      </n-grid>
+      <n-space class="w-full pt-16px" :size="24" justify="end">
+        <n-button class="w-72px" @click="closeModal">取消</n-button>
+        <n-button v-if="props.type === 'add'" class="w-72px" type="primary" @click="handleSubmit">添加</n-button>
+        <n-button v-if="props.type === 'edit'" class="w-72px" type="primary" @click="handleUpdate">修改</n-button>
+      </n-space>
+    </n-form>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch } from 'vue';
+import type { FormInst, FormItemRule } from 'naive-ui';
+import {  createRequiredFormRule } from '@/utils';
+import {add,AddParams,update} from '~/src/service/api/user'
+// import { init } from '../index.vue'
+export interface Props {
+  /** 弹窗可见性 */
+  visible: boolean;
+  /**
+   * 弹窗类型
+   * add: 新增
+   * edit: 编辑
+   */
+  type?: 'add' | 'edit';
+  /** 编辑的表格行数据 */
+  editData?: UserManagementAuth.User | null;
+}
+
+export type ModalType = NonNullable<Props['type']>;
+
+defineOptions({ name: 'TableActionModal' });
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'add' || 'edit',
+	editData: null,
+});
+
+interface Emits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const modalVisible = computed({
+  get() {
+    return props.visible;
+  },
+  set(visible) {
+    emit('update:visible', visible);
+  }
+});
+const closeModal = () => {
+  modalVisible.value = false;
+};
+
+const title = computed(() => {
+  const titles: Record<ModalType, string> = {
+    add: '添加用户',
+    edit: '编辑用户'
+  };
+  return titles[props.type];
+});
+
+const formRef = ref<HTMLElement & FormInst>();
+
+type FormModel = Pick<UserManagementAuth.User, 'id' | 'name' | 'description' | 'isActive' | 'createUid' | 'disabled'>;
+
+const formModel = reactive<FormModel>(createDefaultFormModel());
+
+
+const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
+  id: createRequiredFormRule('请输入id'),
+  name: createRequiredFormRule('请输入名称'),
+  description: createRequiredFormRule('请输入描述'),
+  isActive: createRequiredFormRule('请输入是否激活'),
+  // createTime:  createRequiredFormRule('请输入创建时间'),
+  // modifyTime: createRequiredFormRule('请输入修改时间'),
+  createUid: createRequiredFormRule('请输入创建用户id'),
+  disabled: createRequiredFormRule('请输入用户状态')
+};
+function createDefaultFormModel(): FormModel {
+  return {
+		id: 0,
+    name: '',
+    description: '',
+    isActive: '',
+    // createTime: '',
+    // modifyTime: '',
+		createUid: 0,
+		disabled: ''
+  };
+}
+
+function handleUpdateFormModel(model: Partial<FormModel>) {
+  Object.assign(formModel, model);
+}
+
+function handleUpdateFormModelByModalType() {
+  const handlers: Record<ModalType, () => void> = {
+    add: () => {
+      const defaultFormModel = createDefaultFormModel();
+      handleUpdateFormModel(defaultFormModel);
+    },
+    edit: () => {
+      if (props.editData) {
+        handleUpdateFormModel(props.editData);
+      }
+    }
+  };
+
+  handlers[props.type]();
+}
+
+async function handleSubmit() {
+  const params: AddParams = {
+    id: formModel.id,
+    name: formModel.name,
+    description: formModel.description,
+    // createTime: formModel.createTime,
+		isActive:formModel.isActive,
+    createUid: formModel.createUid,
+    disabled: formModel.disabled
+  };
+  add(params)
+    .then(res => {
+      window.$message?.success('新增成功!');
+      closeModal();
+    })
+    .catch(error => {
+      console.error(error);
+      window.$message?.error('新增失败!');
+    });
+
+}
+async function handleUpdate() {
+	update(formModel)
+  await formRef.value?.validate();
+  window.$message?.success('修改成功!');
+  closeModal();
+}
+
+watch(
+  () => props.visible,
+  newValue => {
+    if (newValue) {
+      handleUpdateFormModelByModalType();
+    }
+  }
+);
+</script>
+
+<style scoped></style>

src/views/management/auth/index.vue

@@ -1,49 +1,81 @@
 <template>
-  <div class="h-full overflow-hidden">
-    <n-card title="权限管理" :bordered="false" class="rounded-16px shadow-sm">
-      <n-space class="pb-12px" justify="space-between">
-        <n-space>
-          <AddView />
-          <n-button type="error">
-            <icon-ic-round-delete class="mr-4px text-20px" />
-            删除
-          </n-button>
-          <n-button type="success">
-            <icon-uil:export class="mr-4px text-20px" />
-            导出Excel
-          </n-button>
-        </n-space>
-        <n-space align="center" :size="18">
-          <n-button size="small" type="primary">
-            <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': false }" />
-            刷新表格
-          </n-button>
-          <n-button size="small" type="primary">
-            <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': false }" />
-            激活
-          </n-button>
-          <column-setting v-model:columns="columns" />
-        </n-space>
-      </n-space>
-      <n-input-group>
-        <n-input :style="{ width: '50%' }" />
-        <n-button type="primary">搜索</n-button>
-      </n-input-group>
-      <n-data-table :columns="columns" :data="tableData" :pagination="pagination" />
-    </n-card>
-  </div>
+	<div class="h-full overflow-hidden">
+		<n-card title="权限管理" :bordered="false" class="rounded-16px shadow-sm">
+			<n-space class="pb-12px" justify="space-between">
+				<n-space>
+					<n-button type="primary" @click="handleAddTable">
+						<icon-ic-round-plus class="mr-4px text-20px" />
+						新增
+					</n-button>
+					<n-button type="error" @click="handleRemoved">
+						<icon-ic-round-delete class="mr-4px text-20px" />
+						删除
+					</n-button>
+					<n-button type="success">
+						<icon-uil:export class="mr-4px text-20px" />
+						导出Excel
+					</n-button>
+				</n-space>
+				<n-space align="center" :size="18">
+					<n-button size="small" type="primary" @click="getTableData">
+						<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': false }" />
+						刷新表格
+					</n-button>
+					<column-setting v-model:columns="columns" />
+				</n-space>
+			</n-space>
+			<n-input-group>
+				<n-input-number :style="{ width: '33%' }" @input="handleInput1" />
+				<n-input-number :style="{ width: '33%' }" @input="handleInput2" />
+				<n-button @click="searchForm">搜索</n-button>
+			</n-input-group>
+			<div style="height: 400px; overflow-y: auto;">
+				<n-data-table v-if="pageData.length <= 0 || inputInfo1.length === 0 && inputInfo2.length === 0" :columns="columns"
+					:data="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey"
+					@update:checked-row-keys="handleCheck" />
+				<n-data-table v-if="pageData.length > 0" :columns="columns" :data="pageData" :loading="loading"
+					:pagination="pagination" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
+				<AddView v-model:visible="visible" :type="modalType" :edit-data="editData" />
+			</div>
+		</n-card>
+	</div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
+<script lang="tsx">
+import { ref, reactive, defineComponent } from 'vue';
 import type { Ref } from 'vue';
-import type { DataTableColumns, PaginationProps } from 'naive-ui';
-import { query, add } from '../../../service/api/user';
+import { NButton, NPopconfirm, NSpace } from 'naive-ui';
+import type { DataTableColumns, PaginationProps, DataTableRowKey } from 'naive-ui';
+import { query, add, deleted } from '../../../service/api/user';
+import type { ModalType } from './components/AddView.vue';
+import AddView from './components/AddView.vue';
 import type { QueryParams, AddParams } from '~/src/service/api/user';
-import AddView from '~/src/views/management/auth/AddView.vue'
-
+import { useBoolean, useLoading } from '@/hooks';
+// import { init } from 'echarts';
+import { fetchUserList } from '@/service';
 const queryInfo: QueryParams = {};
 const addInfo: AddParams = {};
+const { loading,startLoading, endLoading} = useLoading(false);
+const { bool: visible, setTrue: openModal } = useBoolean();
+function setTableData(data: UserManagement.User[]) {
+  tableData.value = data as [];
+}
+// 接收input的值
+const inputInfo1 = ref();
+const inputInfo2 = ref();
+// 新的数组
+const pageData = ref([])
+type RowData = {
+	key: number;
+	id: number;
+	name: string;
+	description: string;
+	isActive: string;
+	createTime: number;
+	modifyTime: number;
+	createUid: number;
+	disabled: string;
+};
 // // 定义响应式数据：收集用户写进来的关键字
 // const keyword = ref<string>('');
 // // // 搜索按钮的回调
@@ -54,75 +86,220 @@ const addInfo: AddParams = {};
 //   }
 // };
 export interface Props {
-  /** 弹窗可见性 */
-  visible: boolean;
-  /**
-   * 弹窗类型
-   * add: 新增
-   * edit: 编辑
-   */
-  type?: 'add' | 'edit';
-  /** 编辑的表格行数据 */
-  editData?: UserManagement.User | null;
+	/** 弹窗可见性 */
+	visible: boolean;
+	/**
+	 * 弹窗类型
+	 * add: 新增
+	 * edit: 编辑
+	 */
+	type?: 'add' | 'edit';
+	/** 编辑的表格行数据 */
+	editData?: UserManagement.User | null;
 }
-const AddTableInfo = ref();
 const pagination: PaginationProps = reactive({
-  page: 1,
-  pageSize: 10,
-  showSizePicker: true,
-  pageSizes: [10, 15, 20, 25, 30],
-  onChange: (page: number) => {
-    pagination.page = page;
-  },
-  onUpdatePageSize: (pageSize: number) => {
-    pagination.pageSize = pageSize;
-    pagination.page = 1;
-  }
+	page: 1,
+	pageSize: 10,
+	showSizePicker: true,
+	pageSizes: [10, 15, 20, 25, 30],
+	onChange: (page: number) => {
+		// 处理页码发生变化
+		pagination.page = page;
+	},
+	onUpdatePageSize: (pageSize: number) => {
+		pagination.pageSize = pageSize;
+		pagination.page = 1;
+	}
 });
+function handleAddTable() {
+	openModal();
+	getTableData();
+	setModalType('add');
+}
 
 const tableData = ref<QueryParams[]>([]);
 
-query(pagination.page, pagination.pageSize, queryInfo).then(result => {
-  tableData.value = result.data as [];
+query(pagination.page, pagination.pageSize, queryInfo).then((result) => {
+	tableData.value = result.data as [];
 });
 add(addInfo).then(_res => {
-  console.log(_res);
+	console.log(_res);
 });
-const columns: Ref<DataTableColumns<QueryParams>> = ref([
-  {
-    type: 'selection',
-    align: 'center'
-  },
-  {
-    key: 'name',
-    title: '名称',
-    align: 'center'
-  },
-  {
-    key: 'description',
-    title: '描述',
-    align: 'center'
-  },
-  {
-    key: 'isActive',
-    title: '是否激活',
-    align: 'center'
-  },
-  {
-    key: 'modifyTime',
-    title: '修改时间',
-    align: 'center'
-  },
-  {
-    key: 'createUid',
-    title: '创建用户ID',
-    align: 'center'
-  },
-  {
-    key: 'disabled',
-    title: '状态',
-    align: 'center'
-  }
-]) as Ref<DataTableColumns<QueryParams>>;
+const keyId = ref() as any;
+
+function handleRemoved() {
+	deleted(keyId.value).then(() => {
+		console.log('djiao ')
+	}
+	)
+}
+
+const columns: Ref<DataTableColumns<UserManagementAuth.User>> = ref([
+	{
+		type: 'selection',
+		align: 'center'
+	},
+	{
+		key: 'id',
+		title: 'ID',
+		align: 'center'
+	},
+	{
+		key: 'name',
+		title: '名称',
+		align: 'center'
+	},
+	{
+		key: 'description',
+		title: '描述',
+		align: 'center'
+	},
+	{
+		key: 'isActive',
+		title: '是否激活',
+		align: 'center'
+	},
+	{
+		key: 'modifyTime',
+		title: '修改时间',
+		align: 'center'
+	},
+	{
+		key: 'createUid',
+		title: '创建用户ID',
+		align: 'center'
+	},
+	{
+		key: 'disabled',
+		title: '状态',
+		align: 'center'
+	}, {
+		key: 'actions',
+		title: '操作',
+		align: 'center',
+		render: row => {
+			return (
+				<NSpace justify={'center'}>
+					<NButton size={'small'} onClick={() => handleEditTable(row.id)}>
+						编辑
+					</NButton>
+					<NPopconfirm onPositiveClick={() => handleDeleteTable()}>
+						{{
+							default: () => '确认删除',
+							trigger: () => <NButton size={'small'}>
+								删除
+							</NButton>
+						}}
+					</NPopconfirm>
+				</NSpace>
+			);
+		}
+	}
+]) as Ref<DataTableColumns<UserManagementAuth.User>>;
+
+// 编辑
+const editData = ref<UserManagement.User | null>(null);
+function setEditData(data: UserManagement.User | null) {
+	editData.value = data;
+}
+function handleEditTable(rowId: number) {
+	const findItem = tableData.value.find(item => item.id === rowId);
+	if (findItem) {
+		setEditData(findItem);
+	}
+	setModalType('edit');
+	openModal();
+}
+
+const modalType = ref<ModalType>('add' || 'edit');
+
+function setModalType(type: ModalType) {
+	modalType.value = type;
+}
+// 删除
+// 点击删除事件
+ async function handleDeleteTable() {
+	console.log(keyId.value)
+	await deleted(keyId.value).then((r) => {
+		window.$message?.info(`点击了删除，rowId为${keyId}`);
+		console.log(r)
+	})
+}
+export default defineComponent({
+	components: {
+		AddView,
+	},
+
+	setup() {
+		const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+
+		return {
+			tableData,
+			columns,
+			checkedRowKeys: checkedRowKeysRef,
+			pagination,
+			loading,
+			modalType,
+			queryInfo,
+			editData,
+			inputInfo1,
+			// getTableData,
+			setTableData,
+			inputInfo2,
+			visible,
+			pageData,
+			handleRemoved,
+			handleAddTable,
+			rowKey: (row: RowData) => row.id,
+			handleDeleteTable(rowKeys: DataTableRowKey[]) {
+				checkedRowKeysRef.value = rowKeys
+				// console.log(rowKeys)
+				keyId.value = rowKeys;
+			},
+			handleCheck(rowKeys: DataTableRowKey[]) {
+				checkedRowKeysRef.value = rowKeys
+				// console.log(rowKeys)
+				keyId.value = rowKeys;
+			},
+			handleInput1(v: number) {
+				// console.log(v)
+				// 把字符串强行转换为number类型
+				inputInfo1.value = v.data
+				inputInfo1.value = Number(inputInfo1.value)
+				console.log(inputInfo1.value)
+			},
+			handleInput2(v: number) {
+				// console.log(v)
+				inputInfo2.value = v.data
+				inputInfo2.value = Number(inputInfo2.value)
+			},
+			// 点击搜索事件
+			async searchForm() {
+				await query(inputInfo1.value, inputInfo2.value, queryInfo).then((r) => {
+					// console.log(r)
+					pageData.value = r.data as [];
+				})
+			}
+		}
+	},
+})
+// // 初始化
+
+// async function getTableData() {
+//   startLoading();
+//   const { data } = await fetchUserList();
+//   if (data) {
+//     setTimeout(() => {
+//       setTableData(data);
+//       endLoading();
+//     }, 1000);
+//   }
+// }
+// function init() {
+//   getTableData();
+// }
+
+// // 初始化
+// init();
 </script>
 <style scoped></style>

src/views/management/user/components/table-action-modal.vue

@@ -34,9 +34,7 @@
 <script setup lang="ts">
 import { ref, computed, reactive, watch } from 'vue';
 import type { FormInst, FormItemRule } from 'naive-ui';
-// eslint-disable-next-line import/no-unresolved
 import { genderOptions, userStatusOptions } from '@/constants';
-// eslint-disable-next-line import/no-unresolved
 import { formRules, createRequiredFormRule } from '@/utils';
 
 export interface Props {
@@ -139,6 +137,7 @@ async function handleSubmit() {
   closeModal();
 }
 
+
 watch(
   () => props.visible,
   newValue => {

src/views/management/user/index.vue

@@ -35,11 +35,8 @@ import { reactive, ref } from 'vue';
 import type { Ref } from 'vue';
 import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
-// eslint-disable-next-line import/no-unresolved
 import { genderLabels, userStatusLabels } from '@/constants';
-// eslint-disable-next-line import/no-unresolved
 import { fetchUserList } from '@/service';
-// eslint-disable-next-line import/no-unresolved
 import { useBoolean, useLoading } from '@/hooks';
 import TableActionModal from './components/table-action-modal.vue';
 import type { ModalType } from './components/table-action-modal.vue';
@@ -142,7 +139,7 @@ const columns: Ref<DataTableColumns<UserManagement.User>> = ref([
           <NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
             {{
               default: () => '确认删除',
-              trigger: () => <NButton size={'small'}>删除</NButton>
+              trigger: () => <NButton size={'small'}  >删除</NButton>
             }}
           </NPopconfirm>
         </NSpace>
@@ -165,6 +162,7 @@ function setEditData(data: UserManagement.User | null) {
 
 function handleAddTable() {
   openModal();
+	getTableData();
   setModalType('add');
 }