refactor: ♻️ cURD加强TS支持

src/components/PageContent/index.vue

@@ -74,9 +74,8 @@
     <!-- 列表 -->
     <el-table
       v-loading="loading"
+      v-bind="contentConfig.table"
       :data="pageData"
-      :border="true"
-      :highlight-current-row="true"
       @selection-change="handleSelectionChange"
     >
       <template v-for="col in contentConfig.cols" :key="col.prop">
@@ -182,36 +181,54 @@
 
 <script setup lang="ts">
 import { ref, reactive } from "vue";
+import Pagination from "@/components/Pagination/index.vue";
+import type { TableProps } from "element-plus";
 
+// 对象类型
+type IObject = Record<string, any>;
 // 定义接收的属性
-interface IOperatData {
+export interface IOperatData {
   name: string;
   row: any;
   column: any;
   $index: number;
 }
+export interface IContentConfig {
+  // 页面名称(参与组成权限标识,如sys:user:xxx)
+  pageName: string;
+  // table组件属性
+  table?: Omit<TableProps<any>, "data">;
+  // 列表的网络请求函数(需返回promise)
+  indexAction: (data: IObject) => Promise<IObject>;
+  // 删除的网络请求函数(需返回promise)
+  deleteAction: (id: string) => Promise<any>;
+  // 主键名(默认为id)
+  pk?: string;
+  // 表格工具栏(默认支持refresh,add,delete,export,也可自定义)
+  toolbar: (
+    | "refresh"
+    | "add"
+    | "delete"
+    | "export"
+    | {
+        auth?: string;
+        icon?: string;
+        name: string;
+        text: string;
+      }
+  )[];
+  // table组件列属性(额外的属性templet,operat,slotName)
+  cols: IObject[];
+}
 const props = defineProps<{
-  contentConfig: {
-    // 页面名称(参与组成权限标识,如sys:user:xxx)
-    pageName: string;
-    // 列表的网络请求函数(需返回promise)
-    indexAction: (data: any) => Promise<any>;
-    // 删除的网络请求函数(需返回promise)
-    deleteAction: (data: any) => Promise<any>;
-    // 主键名(默认为id)
-    pk?: string;
-    // 表格工具栏(默认支持refresh,add,delete,export,也可自定义)
-    toolbar: any[];
-    // table组件列属性(额外的属性templet,operat)
-    cols: any[];
-  };
+  contentConfig: IContentConfig;
 }>();
 // 定义自定义事件
 const emit = defineEmits<{
   addClick: [];
   exportClick: [];
   toolbarClick: [name: string];
-  editClick: [row: any];
+  editClick: [row: IObject];
   operatClick: [data: IOperatData];
 }>();
 // 暴露的属性和方法
@@ -222,22 +239,22 @@ const pk = props.contentConfig.pk ?? "id";
 // 加载状态
 const loading = ref(false);
 // 删除ID集合 用于批量删除
-const removeIds = ref([]);
+const removeIds = ref<(number | string)[]>([]);
 // 数据总数
 const total = ref(0);
 // 列表数据
-const pageData = ref([]);
+const pageData = ref<IObject[]>([]);
 // 每页条数
 const pageSize = 10;
 // 搜索参数
-const queryParams = reactive<any>({
+const queryParams = reactive<IObject>({
   pageNum: 1,
   pageSize: pageSize,
 });
 // 上一次搜索条件
 let lastFormData = {};
 // 获取分页数据
-function fetchPageData(formData: any = {}, isRestart = false) {
+function fetchPageData(formData: IObject = {}, isRestart = false) {
   loading.value = true;
   lastFormData = formData;
   if (isRestart) {
@@ -257,8 +274,8 @@ function fetchPageData(formData: any = {}, isRestart = false) {
 fetchPageData();
 
 // 行选中
-function handleSelectionChange(selection: any) {
-  removeIds.value = selection.map((item: any) => item[pk]);
+function handleSelectionChange(selection: any[]) {
+  removeIds.value = selection.map((item) => item[pk]);
 }
 // 刷新
 function handleRefresh() {

src/components/PageModal/index.vue

@@ -65,37 +65,40 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { useThrottleFn } from "@vueuse/core";
-import type { FormRules, ElForm } from "element-plus";
+import type { FormRules, DialogProps } from "element-plus";
 
+// 对象类型
+type IObject = Record<string, any>;
 // 定义接收的属性
+export interface IModalConfig {
+  // dialog组件属性
+  dialog: Partial<Omit<DialogProps, "modelValue">>;
+  // 页面名称
+  pageName?: string;
+  // 提交的网络请求函数(需返回promise)
+  formAction: (data: IObject) => Promise<any>;
+  // 表单项
+  formItems: Array<{
+    // 组件类型(如input,select,radio等)
+    type: string;
+    // 标签文本
+    label: string;
+    // 键名
+    prop: string;
+    // 组件属性
+    attrs?: IObject;
+    // 初始值
+    initialValue?: any;
+    // 可选项(适用于select,radio组件)
+    options?: { label: string; value: any }[];
+    // 插槽名(适用于组件类型为custom)
+    slotName?: string;
+  }>;
+  // 表单验证规则
+  formRules: FormRules;
+}
 const props = defineProps<{
-  modalConfig: {
-    // dialog组件属性
-    dialog: any;
-    // 页面名称
-    pageName?: string;
-    // 提交的网络请求函数(需返回promise)
-    formAction: (data: any) => Promise<any>;
-    // 表单项
-    formItems: Array<{
-      // 组件类型(如input,select,radio等)
-      type: string;
-      // 标签文本
-      label: string;
-      // 键名
-      prop: string;
-      // 组件属性
-      attrs?: any;
-      // 初始值
-      initialValue?: any;
-      // 可选项(适用于select,radio组件)
-      options?: { label: string; value: any }[];
-      // 插槽名(适用于组件类型为custom)
-      slotName?: string;
-    }>;
-    // 表单验证规则
-    formRules: FormRules;
-  };
+  modalConfig: IModalConfig;
 }>();
 // 自定义事件
 const emit = defineEmits<{
@@ -106,9 +109,9 @@ defineExpose({ setModalVisible });
 
 const dialogVisible = ref(false);
 const formRef = ref<InstanceType<typeof ElForm>>();
-const formData = reactive<any>({});
+const formData = reactive<IObject>({});
 // 初始化
-function setModalVisible(initData: any = {}) {
+function setModalVisible(initData: IObject = {}) {
   dialogVisible.value = true;
   for (const item of props.modalConfig.formItems) {
     formData[item.prop] = initData[item.prop] ?? item.initialValue ?? "";
@@ -116,7 +119,7 @@ function setModalVisible(initData: any = {}) {
 }
 // 表单提交
 const handleSubmit = useThrottleFn(() => {
-  formRef.value?.validate((valid: any) => {
+  formRef.value?.validate((valid: boolean) => {
     if (valid) {
       props.modalConfig.formAction(formData).then(() => {
         ElMessage.success(

src/components/PageSearch/index.vue

@@ -11,6 +11,13 @@
               </template>
             </el-select>
           </template>
+          <!-- TreeSelect 树形选择 -->
+          <template v-else-if="item.type === 'tree-select'">
+            <el-tree-select
+              v-model="queryParams[item.prop]"
+              v-bind="item.attrs"
+            />
+          </template>
           <!-- DatePicker 日期选择器 -->
           <template v-else-if="item.type === 'date-picker'">
             <el-date-picker
@@ -29,10 +36,10 @@
         </el-form-item>
       </template>
       <el-form-item>
-        <el-button type="primary" @click="handleQuery">
-          <i-ep-search />搜索
+        <el-button type="primary" icon="search" @click="handleQuery">
+          搜索
         </el-button>
-        <el-button @click="handleReset"><i-ep-refresh />重置</el-button>
+        <el-button icon="refresh" @click="handleReset">重置</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -42,40 +49,43 @@
 import { ref, reactive } from "vue";
 import type { ElForm } from "element-plus";
 
+// 对象类型
+type IObject = Record<string, any>;
 // 定义接收的属性
+export interface ISearchConfig {
+  // 页面名称(参与组成权限标识,如sys:user:xxx)
+  pageName: string;
+  // 表单项
+  formItems: Array<{
+    // 组件类型(如input,select等)
+    type: string;
+    // 标签文本
+    label: string;
+    // 键名
+    prop: string;
+    // 组件属性
+    attrs?: IObject;
+    // 初始值
+    initialValue?: any;
+    // 可选项(适用于select组件)
+    options?: { label: string; value: any }[];
+  }>;
+}
 interface IProps {
-  searchConfig: {
-    // 页面名称(参与组成权限标识,如sys:user:xxx)
-    pageName: string;
-    // 表单项
-    formItems: Array<{
-      // 组件类型(如input,select等)
-      type: string;
-      // 标签文本
-      label: string;
-      // 键名
-      prop: string;
-      // 组件属性
-      attrs?: any;
-      // 初始值
-      initialValue?: any;
-      // 可选项(适用于select组件)
-      options?: { label: string; value: any }[];
-    }>;
-  };
+  searchConfig: ISearchConfig;
 }
 const props = defineProps<IProps>();
 // 自定义事件
 const emit = defineEmits<{
-  queryClick: [queryParams: any];
-  resetClick: [queryParams: any];
+  queryClick: [queryParams: IObject];
+  resetClick: [queryParams: IObject];
 }>();
 // 暴露的属性和方法
 defineExpose({ getQueryParams });
 
 const queryFormRef = ref<InstanceType<typeof ElForm>>();
 // 搜索表单数据
-const queryParams = reactive<any>({});
+const queryParams = reactive<IObject>({});
 for (const item of props.searchConfig.formItems) {
   queryParams[item.prop] = item.initialValue ?? "";
 }