🔱: [client] sync upgrade with 21 commits [trident-sync]

Update README.md

packages/ui/certd-client/src/views/sys/authority/user/api.js

@@ -0,0 +1,41 @@
+import { request } from "/src/api/service";
+const apiPrefix = "/sys/authority/user";
+export async function GetList(query) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "post",
+    data: query
+  });
+}
+
+export async function AddObj(obj) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export async function UpdateObj(obj) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export async function DelObj(id) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export async function GetObj(id) {
+  return request({
+    url: apiPrefix + "/info",
+    method: "post",
+    params: { id }
+  });
+}

packages/ui/certd-client/src/views/sys/authority/user/crud.jsx

@@ -0,0 +1,146 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ expose }) {
+  const pageRequest = async (query) => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }) => {
+    return await api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      rowHandle: {
+        fixed: "right"
+      },
+      table: {
+        scroll: {
+          //使用固定列时需要设置此值，并且大于等于列宽度之和的值
+          x: 1400
+        }
+      },
+      columns: {
+        id: {
+          title: "id",
+          form: { show: false }, // 表单配置
+          column: {
+            width: 70,
+            sorter: true
+          }
+        },
+        createTime: {
+          title: "创建时间",
+          type: "datetime",
+          form: { show: false }, // 表单配置
+          column: {
+            width: 180,
+            sorter: true
+          }
+        },
+        // updateTime: {
+        //   title: "修改时间",
+        //   type: "datetime",
+        //   form: { show: false }, // 表单配置
+        //   column: {
+        //     sortable: "update_time",
+        //     width: 180
+        //   }
+        // },
+        username: {
+          title: "用户名",
+          type: "text",
+          search: { show: true }, // 开启查询
+          form: {
+            rules: [
+              { required: true, message: "请输入用户名" },
+              { max: 50, message: "最大50个字符" }
+            ]
+          },
+          editForm: { component: { disabled: true } },
+          column: {
+            sorter: true
+          }
+        },
+        password: {
+          title: "密码",
+          type: "text",
+          key: "password",
+          column: {
+            show: false
+          },
+          form: {
+            rules: [{ max: 50, message: "最大50个字符" }],
+            component: {
+              showPassword: true
+            },
+            helper: "填写则修改密码"
+          }
+        },
+        nickName: {
+          title: "昵称",
+          type: "text",
+          search: { show: true }, // 开启查询
+          form: {
+            rules: [{ max: 50, message: "最大50个字符" }]
+          },
+          column: {
+            sorter: true
+          }
+        },
+        avatar: {
+          title: "头像",
+          type: "cropper-uploader",
+          column: {
+            width: 100,
+            component: {
+              //设置高度，修复操作列错位的问题
+              style: {
+                height: "30px",
+                width: "auto"
+              }
+            }
+          }
+        },
+        remark: {
+          title: "备注",
+          type: "text",
+          column: {
+            sorter: true
+          },
+          form: {
+            rules: [{ max: 100, message: "最大100个字符" }]
+          }
+        },
+        roles: {
+          title: "角色",
+          type: "dict-select",
+          dict: dict({
+            url: "/sys/authority/role/list",
+            value: "id",
+            label: "name"
+          }), // 数据字典
+          form: {
+            component: { mode: "multiple" }
+          },
+          column: {
+            width: 250,
+            sortable: true
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/sys/authority/user/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <fs-page class="page-sys-user">
+    <template #header>
+      <div class="title">用户管理</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+export default defineComponent({
+  name: "AuthorityUser",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+
+    // 初始化crud配置
+    // 此处传入权限前缀进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
+    // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
+    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:user" });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>