Merge pull request #72 from cshaptx4869/patch-35

refactor: ♻️ 完善CURD代码注释等
2024-04-26 22:02:36 +08:00
parent 52bc2e32b5 e5fdf3e23b
commit e96fc32588
9 changed files with 146 additions and 78 deletions
--- a/mock/user.mock.ts
+++ b/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",
--- a/src/components/PageContent/index.vue
+++ b/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) => {
-      total.value = res.total;
-      pageData.value = res.list;
+    .then(({ data }) => {
+      total.value = data.total;
+      pageData.value = data.list;
    })
    .finally(() => {
      loading.value = false;
--- a/src/components/PageModal/index.vue
+++ b/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>
--- a/src/components/PageSearch/index.vue
+++ b/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 ?? "";
--- a/src/typings/components.d.ts
+++ b/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"];
--- a/src/views/demo/curd/config/add.ts
+++ b/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: [
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -5,37 +5,41 @@ const contentConfig = {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
-          total: 2,
-          list: [
-            {
-              id: 2,
-              username: "admin",
-              nickname: "系统管理员",
-              mobile: "17621210366",
-              genderLabel: "男",
-              avatar:
-                "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-              email: null,
-              status: 1,
-              deptName: "有来技术",
-              roleNames: "系统管理员",
-              createTime: "2019-10-10",
-            },
-            {
-              id: 3,
-              username: "test",
-              nickname: "测试小用户",
-              mobile: "17621210366",
-              genderLabel: "男",
-              avatar:
-                "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-              email: null,
-              status: 1,
-              deptName: "测试部门",
-              roleNames: "访问游客",
-              createTime: "2021-06-05",
-            },
-          ],
+          code: "00000",
+          data: {
+            list: [
+              {
+                id: 2,
+                username: "admin",
+                nickname: "系统管理员",
+                mobile: "17621210366",
+                genderLabel: "男",
+                avatar:
+                  "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+                email: null,
+                status: 1,
+                deptName: "有来技术",
+                roleNames: "系统管理员",
+                createTime: "2019-10-10",
+              },
+              {
+                id: 3,
+                username: "test",
+                nickname: "测试小用户",
+                mobile: "17621210366",
+                genderLabel: "男",
+                avatar:
+                  "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+                email: null,
+                status: 1,
+                deptName: "测试部门",
+                roleNames: "访问游客",
+                createTime: "2021-06-05",
+              },
+            ],
+            total: 2,
+          },
+          msg: "一切ok",
        });
      }, 800);
    });
@@ -43,7 +47,11 @@ const contentConfig = {
  deleteAction: function (id: string) {
    console.log("delete", id);
    return new Promise((resolve, reject) => {
-      resolve("删除成功");
+      resolve({
+        code: "00000",
+        data: null,
+        msg: "删除成功",
+      });
    });
  },
  pk: "id",
--- a/src/views/demo/curd/config/edit.ts
+++ b/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: [
--- a/src/views/demo/curd/index.vue
+++ b/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,30 +79,63 @@ function handleToolbarClick(name: string) {
 }
 // 编辑
 const editModalRef = ref<InstanceType<typeof PageModal>>();
-function handleEditClick() {
-  //显示编辑表单或者根据id获取数据进行填充
-  editModalRef.value?.setModalVisible({
-    id: 2,
-    username: "admin",
-    nickname: "系统管理员",
-    mobile: "17621210366",
-    gender: 1,
-    avatar:
-      "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-    email: "",
-    status: 1,
-    deptId: 1,
-    roleIds: [2],
-  });
+function handleEditClick(row: any) {
+  //显示编辑表单 根据id获取的数据进行填充
+  const idMap: Record<string, any> = {
+    2: {
+      id: 2,
+      username: "admin",
+      nickname: "系统管理员",
+      mobile: "17621210366",
+      gender: 1,
+      avatar:
+        "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+      email: "",
+      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>