refactor: ♻️ cURD加强TS支持

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>