refactor: ♻️ 完善CURD代码注释等

mock/user.mock.ts

@@ -33,6 +33,8 @@ export default defineMock([
           "sys:menu:edit",
           "sys:dict:add",
           "sys:role:add",
+          "sys:user:query",
+          "sys:user:export",
         ],
       },
       msg: "一切ok",

src/components/PageContent/index.vue

@@ -192,11 +192,17 @@ interface IOperatData {
 }
 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[];
   };
 }>();
@@ -205,7 +211,7 @@ const emit = defineEmits<{
   addClick: [];
   exportClick: [];
   toolbarClick: [name: string];
-  editClick: [id: number];
+  editClick: [row: any];
   operatClick: [data: IOperatData];
 }>();
 // 暴露的属性和方法
@@ -222,7 +228,7 @@ const total = ref(0);
 // 列表数据
 const pageData = ref([]);
 // 每页条数
-const pageSize = 1;
+const pageSize = 10;
 // 搜索参数
 const queryParams = reactive<any>({
   pageNum: 1,
@@ -240,9 +246,9 @@ function fetchPageData(formData: any = {}, isRestart = false) {
   }
   props.contentConfig
     .indexAction({ ...queryParams, ...formData })
-    .then((res: any) => {
+    .then(({ data }) => {
-      total.value = res.total;
+      total.value = data.total;
-      pageData.value = res.list;
+      pageData.value = data.list;
     })
     .finally(() => {
       loading.value = false;

src/components/PageModal/index.vue

@@ -67,27 +67,42 @@ import { ref, reactive } from "vue";
 import { useThrottleFn } from "@vueuse/core";
 import type { FormRules, ElForm } from "element-plus";
 
-// 定义接收的属性/自定义事件
+// 定义接收的属性
 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;
   };
 }>();
+// 自定义事件
 const emit = defineEmits<{
   submitClick: [];
 }>();
+// 暴露的属性和方法
+defineExpose({ setModalVisible });
 
 const dialogVisible = ref(false);
 const formRef = ref<InstanceType<typeof ElForm>>();
@@ -121,8 +136,6 @@ function closeDialog() {
   formRef.value?.resetFields();
   formRef.value?.clearValidate();
 }
-// 暴露的属性和方法
-defineExpose({ setModalVisible });
 </script>
 
 <style lang="scss" scoped></style>

src/components/PageSearch/index.vue

@@ -42,21 +42,30 @@
 import { ref, reactive } from "vue";
 import type { ElForm } from "element-plus";
 
-// 定义接收的属性/自定义事件
+// 定义接收的属性
 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 }[];
     }>;
   };
 }
 const props = defineProps<IProps>();
+// 自定义事件
 const emit = defineEmits<{
   queryClick: [queryParams: any];
   resetClick: [queryParams: any];
@@ -65,7 +74,7 @@ const emit = defineEmits<{
 defineExpose({ getQueryParams });
 
 const queryFormRef = ref<InstanceType<typeof ElForm>>();
-// 定义form的数据
+// 搜索表单数据
 const queryParams = reactive<any>({});
 for (const item of props.searchConfig.formItems) {
   queryParams[item.prop] = item.initialValue ?? "";

src/typings/components.d.ts

@@ -14,7 +14,6 @@ declare module "vue" {
     DeptTree: (typeof import("./../views/system/user/components/dept-tree.vue"))["default"];
     Dictionary: (typeof import("./../components/Dictionary/index.vue"))["default"];
     DictItem: (typeof import("./../views/system/dict/components/dict-item.vue"))["default"];
-    ElAlert: (typeof import("element-plus/es"))["ElAlert"];
     ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"];
     ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
     ElButton: (typeof import("element-plus/es"))["ElButton"];
@@ -32,15 +31,11 @@ declare module "vue" {
     ElForm: (typeof import("element-plus/es"))["ElForm"];
     ElFormItem: (typeof import("element-plus/es"))["ElFormItem"];
     ElIcon: (typeof import("element-plus/es"))["ElIcon"];
-    ElImage: (typeof import("element-plus/es"))["ElImage"];
     ElInput: (typeof import("element-plus/es"))["ElInput"];
-    ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"];
-    ElLink: (typeof import("element-plus/es"))["ElLink"];
     ElMenu: (typeof import("element-plus/es"))["ElMenu"];
     ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"];
     ElOption: (typeof import("element-plus/es"))["ElOption"];
     ElPagination: (typeof import("element-plus/es"))["ElPagination"];
-    ElPopover: (typeof import("element-plus/es"))["ElPopover"];
     ElRadio: (typeof import("element-plus/es"))["ElRadio"];
     ElRadioGroup: (typeof import("element-plus/es"))["ElRadioGroup"];
     ElRow: (typeof import("element-plus/es"))["ElRow"];
@@ -51,10 +46,7 @@ declare module "vue" {
     ElSwitch: (typeof import("element-plus/es"))["ElSwitch"];
     ElTable: (typeof import("element-plus/es"))["ElTable"];
     ElTableColumn: (typeof import("element-plus/es"))["ElTableColumn"];
-    ElTabPane: (typeof import("element-plus/es"))["ElTabPane"];
-    ElTabs: (typeof import("element-plus/es"))["ElTabs"];
     ElTag: (typeof import("element-plus/es"))["ElTag"];
-    ElText: (typeof import("element-plus/es"))["ElText"];
     ElTooltip: (typeof import("element-plus/es"))["ElTooltip"];
     ElTree: (typeof import("element-plus/es"))["ElTree"];
     ElTreeSelect: (typeof import("element-plus/es"))["ElTreeSelect"];
@@ -64,20 +56,14 @@ declare module "vue" {
     GithubCorner: (typeof import("./../components/GithubCorner/index.vue"))["default"];
     Hamburger: (typeof import("./../components/Hamburger/index.vue"))["default"];
     IconSelect: (typeof import("./../components/IconSelect/index.vue"))["default"];
-    IEpCaretBottom: (typeof import("~icons/ep/caret-bottom"))["default"];
-    IEpCaretTop: (typeof import("~icons/ep/caret-top"))["default"];
     IEpClose: (typeof import("~icons/ep/close"))["default"];
-    IEpCollection: (typeof import("~icons/ep/collection"))["default"];
     IEpDelete: (typeof import("~icons/ep/delete"))["default"];
     IEpDownload: (typeof import("~icons/ep/download"))["default"];
     IEpEdit: (typeof import("~icons/ep/edit"))["default"];
     IEpPlus: (typeof import("~icons/ep/plus"))["default"];
-    IEpPosition: (typeof import("~icons/ep/position"))["default"];
-    IEpQuestionFilled: (typeof import("~icons/ep/question-filled"))["default"];
     IEpRefresh: (typeof import("~icons/ep/refresh"))["default"];
     IEpRefreshLeft: (typeof import("~icons/ep/refresh-left"))["default"];
     IEpSearch: (typeof import("~icons/ep/search"))["default"];
-    IEpSetting: (typeof import("~icons/ep/setting"))["default"];
     IEpTop: (typeof import("~icons/ep/top"))["default"];
     IEpUploadFilled: (typeof import("~icons/ep/upload-filled"))["default"];
     LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
@@ -86,10 +72,12 @@ declare module "vue" {
     NavBar: (typeof import("./../layout/components/NavBar/index.vue"))["default"];
     NavbarLeft: (typeof import("./../layout/components/NavBar/components/NavbarLeft.vue"))["default"];
     NavbarRight: (typeof import("./../layout/components/NavBar/components/NavbarRight.vue"))["default"];
+    PageContent: (typeof import("./../components/PageContent/index.vue"))["default"];
+    PageModal: (typeof import("./../components/PageModal/index.vue"))["default"];
+    PageSearch: (typeof import("./../components/PageSearch/index.vue"))["default"];
     Pagination: (typeof import("./../components/Pagination/index.vue"))["default"];
     PieChart: (typeof import("./../views/dashboard/components/PieChart.vue"))["default"];
     RadarChart: (typeof import("./../views/dashboard/components/RadarChart.vue"))["default"];
-    RightPanel: (typeof import("./../components/RightPanel/index.vue"))["default"];
     RouterLink: (typeof import("vue-router"))["RouterLink"];
     RouterView: (typeof import("vue-router"))["RouterView"];
     Settings: (typeof import("./../layout/components/Settings/index.vue"))["default"];

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

@@ -8,7 +8,11 @@ const modalConfig = {
   formAction: function (data: any) {
     console.log("add", data);
     return new Promise((resolve, reject) => {
-      resolve("新增成功");
+      resolve({
+        code: "00000",
+        data: null,
+        msg: "新增成功",
+      });
     });
   },
   formItems: [

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

@@ -3,9 +3,9 @@ const contentConfig = {
   indexAction: function (data: any) {
     console.log("index", data);
     return new Promise((resolve, reject) => {
-      setTimeout(() => {
       resolve({
-          total: 2,
+        code: "00000",
+        data: {
           list: [
             {
               id: 2,
@@ -36,14 +36,20 @@ const contentConfig = {
               createTime: "2021-06-05",
             },
           ],
+          total: 2,
+        },
+        msg: "一切ok",
       });
-      }, 800);
     });
   },
   deleteAction: function (id: string) {
     console.log("delete", id);
     return new Promise((resolve, reject) => {
-      resolve("删除成功");
+      resolve({
+        code: "00000",
+        data: null,
+        msg: "删除成功",
+      });
     });
   },
   pk: "id",

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

@@ -8,7 +8,11 @@ const modalConfig = {
   formAction: function (data: any) {
     console.log("edit", data);
     return new Promise((resolve, reject) => {
-      resolve("编辑成功");
+      resolve({
+        code: "00000",
+        data: null,
+        msg: "修改成功",
+      });
     });
   },
   formItems: [

src/views/demo/curd/index.vue

@@ -64,13 +64,14 @@ function handleResetClick() {
 }
 // 新增
 function handleAddClick() {
-  console.log("add");
   //显示添加表单
   addModalRef.value?.setModalVisible();
 }
 // 导出
 function handleExportClick() {
-  console.log("export", searchRef.value?.getQueryParams());
+  console.log("export");
+  // 可以根据检索条件去导出数据
+  console.log(searchRef.value?.getQueryParams());
 }
 // 其他工具栏
 function handleToolbarClick(name: string) {
@@ -78,9 +79,10 @@ function handleToolbarClick(name: string) {
 }
 // 编辑
 const editModalRef = ref<InstanceType<typeof PageModal>>();
-function handleEditClick() {
+function handleEditClick(row: any) {
-  //显示编辑表单或者根据id获取数据进行填充
+  //显示编辑表单 根据id获取的数据进行填充
-  editModalRef.value?.setModalVisible({
+  const idMap: Record<string, any> = {
+    2: {
       id: 2,
       username: "admin",
       nickname: "系统管理员",
@@ -92,16 +94,48 @@ function handleEditClick() {
       status: 1,
       deptId: 1,
       roleIds: [2],
-  });
+    },
+    3: {
+      id: 3,
+      username: "test",
+      nickname: "测试小用户",
+      mobile: "17621210366",
+      gender: 1,
+      avatar:
+        "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+      email: "youlaitech@163.com",
+      status: 1,
+      deptId: 3,
+      roleIds: [3],
+    },
+  };
+  editModalRef.value?.setModalVisible(idMap[row.id]);
 }
 // 其他操作列
 function handleOperatClick(data: any) {
-  console.log(data.name, data.row);
+  console.log(data);
+  // 重置密码
+  if (data.name === "reset_pwd") {
+    ElMessageBox.prompt(
+      "请输入用户「" + data.row.username + "」的新密码",
+      "重置密码",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      }
+    ).then(({ value }) => {
+      if (!value) {
+        ElMessage.warning("请输入新密码");
+        return false;
+      }
+      // 发送网络请求
+      ElMessage.success("密码重置成功，新密码是：" + value);
+    });
+  }
 }
 // 表单提交
 function handleSubmitClick() {
   //刷新别表数据
-  console.log("submit");
   contentRef.value?.fetchPageData({}, true);
 }
 </script>