refactor: ♻️ cURD加强TS支持

mock/user.mock.ts

@@ -12,7 +12,7 @@ export default defineMock([
         username: "admin",
         avatar:
           "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-        roles: ["ADMIN"],
+        roles: ["ROOT"],
         perms: [
           "sys:menu:delete",
           "sys:dept:edit",

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 ?? "";
 }

src/views/demo/curd/config/add.ts

@@ -1,11 +1,14 @@
-const modalConfig = {
+import type { IModalConfig } from "@/components/PageModal/index.vue";
+
+const modalConfig: IModalConfig = {
   pageName: "sys:user",
   dialog: {
     title: "新增用户",
     width: 800,
-    "append-to-body": true,
+    appendToBody: true,
+    draggable: true,
   },
-  formAction: function (data: any) {
+  formAction: function (data) {
     console.log("add", data);
     return new Promise((resolve, reject) => {
       resolve({

src/views/demo/curd/config/content.ts

@@ -1,6 +1,12 @@
-const contentConfig = {
+import type { IContentConfig } from "@/components/PageContent/index.vue";
+
+const contentConfig: IContentConfig = {
   pageName: "sys:user",
-  indexAction: function (data: any) {
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  indexAction: function (data) {
     console.log("index", data);
     return new Promise((resolve, reject) => {
       setTimeout(() => {
@@ -44,7 +50,7 @@ const contentConfig = {
       }, 800);
     });
   },
-  deleteAction: function (id: string) {
+  deleteAction: function (id) {
     console.log("delete", id);
     return new Promise((resolve, reject) => {
       resolve({
@@ -64,6 +70,7 @@ const contentConfig = {
       name: "upload",
       icon: "upload",
       text: "导入",
+      auth: "upload",
     },
   ],
   cols: [
@@ -79,6 +86,7 @@ const contentConfig = {
       align: "center",
       prop: "status",
       templet: "custom",
+      slotName: "status",
     },
     { label: "创建时间", align: "center", prop: "createTime", width: 180 },
     {

src/views/demo/curd/config/edit.ts

@@ -1,11 +1,13 @@
-const modalConfig = {
+import type { IModalConfig } from "@/components/PageModal/index.vue";
+
+const modalConfig: IModalConfig = {
   pageName: "sys:user",
   dialog: {
     title: "修改用户",
     width: 800,
-    "append-to-body": true,
+    appendToBody: true,
   },
-  formAction: function (data: any) {
+  formAction: function (data) {
     console.log("edit", data);
     return new Promise((resolve, reject) => {
       resolve({

src/views/demo/curd/config/search.ts

@@ -1,4 +1,6 @@
-const searchConfig = {
+import type { ISearchConfig } from "@/components/PageSearch/index.vue";
+
+const searchConfig: ISearchConfig = {
   pageName: "sys:user",
   formItems: [
     {
@@ -13,6 +15,37 @@ const searchConfig = {
         },
       },
     },
+    {
+      type: "tree-select",
+      label: "部门",
+      prop: "deptId",
+      attrs: {
+        placeholder: "请选择",
+        data: [
+          {
+            value: 1,
+            label: "有来技术",
+            children: [
+              {
+                value: 2,
+                label: "研发部门",
+              },
+              {
+                value: 3,
+                label: "测试部门",
+              },
+            ],
+          },
+        ],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+        clearable: true,
+        style: {
+          width: "150px",
+        },
+      },
+    },
     {
       type: "select",
       label: "状态",

src/views/demo/curd/index.vue

@@ -48,6 +48,7 @@ import addModalConfig from "./config/add";
 import editModalConfig from "./config/edit";
 import type PageSearch from "@/components/PageSearch/index.vue";
 import type PageContent from "@/components/PageContent/index.vue";
+import type { IOperatData } from "@/components/PageContent/index.vue";
 import type PageModal from "@/components/PageModal/index.vue";
 
 const searchRef = ref<InstanceType<typeof PageSearch>>();
@@ -112,7 +113,7 @@ function handleEditClick(row: any) {
   editModalRef.value?.setModalVisible(idMap[row.id]);
 }
 // 其他操作列
-function handleOperatClick(data: any) {
+function handleOperatClick(data: IOperatData) {
   console.log(data);
   // 重置密码
   if (data.name === "reset_pwd") {
@@ -135,7 +136,7 @@ function handleOperatClick(data: any) {
 }
 // 表单提交
 function handleSubmitClick() {
-  //刷新别表数据
+  //刷新列表数据
   contentRef.value?.fetchPageData({}, true);
 }
 </script>