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

Update README.md

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

@@ -0,0 +1,48 @@
+import { request } from "/src/api/service";
+const apiPrefix = "/sys/authority/permission";
+export async function GetList(query) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "post",
+    data: query
+  });
+}
+
+export async function GetTree() {
+  return request({
+    url: apiPrefix + "/tree",
+    method: "post"
+  });
+}
+
+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/permission/crud.jsx

@@ -0,0 +1,150 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+
+export default function ({ expose }) {
+  const pageRequest = async (query) => {
+    const list = await api.GetTree(query);
+
+    return {
+      current: 1,
+      records: list,
+      total: 10000,
+      pageSize: 10000
+    };
+  };
+
+  async function afterChange() {
+    await permissionTreeDict.reloadDict();
+  }
+  const editRequest = async ({ form, row }) => {
+    form.id = row.id;
+    const ret = await api.UpdateObj(form);
+    await afterChange();
+    return ret;
+  };
+  const delRequest = async ({ row }) => {
+    const ret = await api.DelObj(row.id);
+    await afterChange();
+    return ret;
+  };
+
+  const addRequest = async ({ form }) => {
+    const ret = await api.AddObj(form);
+    await afterChange();
+    return ret;
+  };
+  let permissionTreeDict = dict({
+    url: "/sys/authority/permission/tree",
+    isTree: true,
+    value: "id",
+    label: "title",
+    async onReady({ dict }) {
+      dict.setData([{ id: -1, title: "根节点", children: dict.data }]);
+    }
+  });
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      actionbar: {
+        show: false
+      },
+      toolbar: {
+        show: false
+      },
+      table: {
+        show: false
+        // scroll: { fixed: true }
+      },
+      rowHandle: {
+        fixed: "right"
+      },
+      search: {
+        show: false
+      },
+      pagination: {
+        show: false,
+        pageSize: 100000
+      },
+      columns: {
+        id: {
+          title: "id",
+          type: "number",
+          form: { show: false }, // 表单配置
+          column: {
+            width: 120,
+            sortable: "custom"
+          }
+        },
+        title: {
+          title: "权限名称",
+          type: "text",
+          form: {
+            rules: [
+              { required: true, message: "请输入权限名称" },
+              { max: 50, message: "最大50个字符" }
+            ],
+            component: {
+              placeholder: "权限名称"
+            }
+          },
+          column: {
+            width: 200
+          }
+        },
+
+        permission: {
+          title: "权限代码",
+          type: "text",
+          column: {
+            width: 170
+          },
+          form: {
+            rules: [
+              { required: true, message: "请输入权限代码" },
+              { max: 100, message: "最大100个字符" }
+            ],
+            component: {
+              placeholder: "例如:sys:user:view"
+            }
+          }
+        },
+        sort: {
+          title: "排序",
+          type: "number",
+          column: {
+            width: 100
+          },
+          form: {
+            value: 100,
+            rules: [{ required: true, type: "number", message: "排序号必填" }]
+          }
+        },
+        parentId: {
+          title: "父节点",
+          type: "dict-tree",
+          column: {
+            width: 100
+          },
+          dict: permissionTreeDict,
+          form: {
+            value: -1,
+            component: {
+              multiple: false,
+              defaultExpandAll: true,
+              dict: { cache: false },
+              fieldNames: {
+                value: "id",
+                label: "title"
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/sys/authority/permission/fs-permission-tree.vue

@@ -0,0 +1,178 @@
+<template>
+  <a-tree
+    v-if="computedTree"
+    ref="treeRef"
+    class="fs-permission-tree"
+    :class="{ 'is-editable': editable }"
+    :selectable="false"
+    show-line
+    :show-icon="false"
+    :default-expand-all="true"
+    :tree-data="computedTree"
+    @check="onChecked"
+  >
+    <template #title="scope">
+      <div class="node-title-pane">
+        <div class="node-title">{{ scope.title }}</div>
+        <div v-if="editable === true" class="node-suffix">
+          <fs-icon v-if="actions.add !== false" :icon="$fsui.icons.add" @click.stop="add(scope)" />
+          <fs-icon
+            v-if="actions.edit !== false && scope.id !== -1"
+            :icon="$fsui.icons.edit"
+            @click.stop="edit(scope)"
+          />
+          <fs-icon
+            v-if="actions.remove !== false && scope.id !== -1"
+            :icon="$fsui.icons.remove"
+            @click.stop="remove(scope)"
+          />
+        </div>
+      </div>
+    </template>
+  </a-tree>
+</template>
+
+<script>
+import _ from "lodash-es";
+import getEachDeep from "deepdash-es/getEachDeep";
+const eachDeep = getEachDeep(_);
+import { defineComponent, ref, computed } from "vue";
+export default defineComponent({
+  name: "FsPermissionTree",
+  props: {
+    /**
+     * 树形数据
+     * */
+    tree: {},
+    /**
+     * 是否可编辑
+     */
+    editable: {
+      default: true
+    },
+    actions: {
+      default: {}
+    }
+  },
+  emits: ["add", "edit", "remove"],
+  setup(props, ctx) {
+    const treeRef = ref();
+    const computedTree = computed(() => {
+      if (props.tree == null) {
+        return null;
+      }
+      const clone = _.cloneDeep(props.tree);
+      eachDeep(clone, (value, key, pNode, context) => {
+        if (value == null) {
+          return;
+        }
+        if (!(value instanceof Object) || value instanceof Array) {
+          return;
+        }
+        if (value.class === "is-leaf") {
+          //处理过，无需再次处理
+          return;
+        }
+        if (value.children != null && value.children.length > 0) {
+          return;
+        }
+        const parents = context.parents;
+        if (parents.length < 2) {
+          return;
+        }
+        const parent = parents[parents.length - 2].value;
+        //看parent下面的children，是否全部都没有children
+        for (const child of parent.children) {
+          if (child.children != null && child.children.length > 0) {
+            //存在child有children
+            return;
+          }
+        }
+        // 所有的子节点都没有children
+        parent.class = "is-twig"; // 连接叶子节点的末梢枝杈节点
+        for (const child of parent.children) {
+          child.class = "is-leaf";
+        }
+      });
+      return [
+        {
+          title: "根节点",
+          id: -1,
+          children: clone
+        }
+      ];
+    });
+    function add(scope) {
+      ctx.emit("add", scope.dataRef);
+    }
+    function edit(scope) {
+      ctx.emit("edit", scope.dataRef);
+    }
+    function remove(scope) {
+      ctx.emit("remove", scope.dataRef);
+    }
+    function onChecked(a, b, c) {
+      console.log("chedcked", a, b, c);
+    }
+    function getChecked() {
+      const checked = treeRef.value.checkedKeys;
+      const halfChecked = treeRef.value.halfCheckedKeys;
+      return {
+        checked,
+        halfChecked
+      };
+    }
+    return {
+      computedTree,
+      add,
+      edit,
+      remove,
+      treeRef,
+      onChecked,
+      getChecked
+    };
+  }
+});
+</script>
+
+<style lang="less">
+.fs-permission-tree {
+  .is-twig ul {
+    display: flex;
+    flex-wrap: wrap;
+    .is-leaf {
+      border-bottom: 1px solid #ddd;
+      padding: 5px;
+      &::before {
+        display: none;
+      }
+    }
+  }
+  .node-title-pane {
+    display: flex;
+    .node-title {
+      width: 80px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &.is-editable {
+    .ant-tree-title {
+      &:hover {
+        .node-suffix {
+          visibility: visible;
+        }
+      }
+    }
+
+    .node-suffix {
+      visibility: hidden;
+      > * {
+        margin-left: 3px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">权限管理</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <a-button v-permission="'sys:auth:per:add'" style="margin-left: 20px" @click="addHandle({})">
+        <fs-icon :icon="$fsui.icons.add"></fs-icon>
+        添加</a-button
+      >
+      <fs-permission-tree
+        class="permission-tree"
+        :tree="crudBinding.data"
+        :checkable="false"
+        :actions="permission"
+        @add="addHandle"
+        @edit="editHandle"
+        @remove="removeHandle"
+      ></fs-permission-tree>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud, useExpose, CrudExpose, useUi } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import FsPermissionTree from "./fs-permission-tree.vue";
+import { usePermission } from "/src/plugin/permission";
+export default defineComponent({
+  name: "AuthorityPermission",
+  components: { FsPermissionTree },
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const exposeRet: { expose: CrudExpose } = useExpose({ crudRef, crudBinding });
+    const expose: CrudExpose = exposeRet.expose;
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    // 初始化crud配置
+    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
+    // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
+    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:per" });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(async () => {
+      await expose.doRefresh();
+    });
+
+    //用户业务代码
+
+    async function addHandle(item) {
+      await expose.openAdd({ initialForm: { parentId: item?.id ?? -1 } });
+    }
+    async function editHandle(item) {
+      await expose.openEdit({ row: item });
+    }
+    async function removeHandle(item) {
+      await expose.doRemove({ row: { id: item.id } });
+    }
+
+    const { hasPermissions } = usePermission();
+    const permission = ref({
+      add: hasPermissions("sys:auth:per:add"),
+      edit: hasPermissions("sys:auth:per:edit"),
+      remove: hasPermissions("sys:auth:per:remove")
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      addHandle,
+      editHandle,
+      removeHandle,
+      permission
+    };
+  }
+});
+</script>
+<style lang="less">
+.permission-tree {
+  margin-left: 20px;
+}
+</style>

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

@@ -0,0 +1,70 @@
+import { request } from "/src/api/service";
+const apiPrefix = "/sys/authority/role";
+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 }
+  });
+}
+
+/**
+ * 获取角色权限资源
+ * @param roleId
+ * @returns {*}
+ * @constructor
+ */
+export function getPermissionIds(roleId) {
+  return request({
+    url: apiPrefix + "/getPermissionIds",
+    method: "post",
+    params: { id: roleId }
+  });
+}
+
+/**
+ * 授权
+ * @param roleId
+ * @param permissionIds
+ * @returns {*}
+ * @constructor
+ */
+export function DoAuthz(roleId, permissionIds) {
+  return request({
+    url: apiPrefix + "/authz",
+    method: "post",
+    data: { roleId, permissionIds }
+  });
+}

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

@@ -0,0 +1,81 @@
+import * as api from "./api";
+export default function ({ expose, authz }) {
+  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: {
+        width: 300,
+        buttons: {
+          authz: {
+            type: "link",
+            text: "授权",
+            async click(context) {
+              await authz.authzOpen(context.record.id);
+            }
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "id",
+          form: { show: false }, // 表单配置
+          column: {
+            width: 70,
+            sorter: true
+          }
+        },
+        name: {
+          title: "角色名称",
+          type: "text",
+          search: { show: true },
+          form: {
+            rules: [
+              { required: true, message: "请输入角色名称" },
+              { max: 50, message: "最大50个字符" }
+            ]
+          }, // 表单配置
+          column: {
+            sorter: true
+          }
+        },
+        createTime: {
+          title: "创建时间",
+          type: "datetime",
+          column: {
+            sorter: true
+          },
+          form: {
+            show: false
+          }
+        },
+        updateTime: {
+          title: "更新时间",
+          type: "datetime",
+          column: {
+            sorter: true
+          },
+          form: { show: false } // 表单配置
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,133 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">角色管理</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+    <a-modal v-model:visible="authzDialogVisible" width="860px" title="分配权限" @ok="updatePermission">
+      <fs-permission-tree
+        ref="permissionTreeRef"
+        v-model:checkedKeys="checkedKeys"
+        :tree="permissionTreeData"
+        :editable="false"
+        checkable
+        :replace-fields="{ key: 'id', label: 'title' }"
+      >
+      </fs-permission-tree>
+    </a-modal>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import * as permissionApi from "../permission/api";
+import * as api from "./api";
+import { message } from "ant-design-vue";
+import FsPermissionTree from "../permission/fs-permission-tree.vue";
+function useAuthz() {
+  const checkedKeys = ref();
+
+  const permissionTreeData = ref();
+
+  const permissionTreeRef = ref();
+  const authzDialogVisible = ref(false);
+
+  const currentRoleId = ref();
+
+  // 如果勾选节点中存在非叶子节点，tree组件会将其所有子节点全部勾选
+  // 所以要找出所有叶子节点，仅勾选叶子节点，tree组件会将父节点同步勾选
+  function getAllCheckedLeafNodeId(tree, checkedIds, temp) {
+    for (let i = 0; i < tree.length; i++) {
+      const item = tree[i];
+      if (item.children && item.children.length !== 0) {
+        getAllCheckedLeafNodeId(item.children, checkedIds, temp);
+      } else {
+        if (checkedIds.indexOf(item.id) !== -1) {
+          temp.push(item.id);
+        }
+      }
+    }
+    return temp;
+  }
+  function authzClose() {
+    authzDialogVisible.value = false;
+  }
+  async function authzOpen(roleId) {
+    permissionTreeData.value = await permissionApi.GetTree();
+    checkedKeys.value = [];
+    currentRoleId.value = roleId;
+    // this.treeData = ret.data
+    await updateChecked(roleId);
+    authzDialogVisible.value = true;
+  }
+  async function updateChecked(roleId) {
+    let checkedIds = await api.getPermissionIds(roleId);
+    // 找出所有的叶子节点
+    checkedIds = getAllCheckedLeafNodeId(permissionTreeData.value, checkedIds, []);
+    checkedKeys.value = checkedIds;
+  }
+  async function updatePermission() {
+    const roleId = currentRoleId.value;
+    const { checked, halfChecked } = permissionTreeRef.value.getChecked();
+    const allChecked = [...checked, ...halfChecked];
+    await api.DoAuthz(roleId, allChecked);
+    authzClose();
+    //await updateChecked(roleId);
+
+    message.success("授权成功");
+  }
+
+  return {
+    authzOpen,
+    updatePermission,
+    authzDialogVisible,
+    permissionTreeData,
+    checkedKeys,
+    permissionTreeRef
+  };
+}
+
+export default defineComponent({
+  name: "AuthorityRole",
+  components: { FsPermissionTree },
+  setup() {
+    //授权配置
+    const authz = useAuthz();
+
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose, authz });
+    // 初始化crud配置
+    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
+    // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
+    const permission = {
+      prefix: "sys:auth:role", //权限代码前缀
+      extra: ({ hasActionPermission }) => {
+        //额外按钮权限控制
+        return { rowHandle: { buttons: { authz: { show: hasActionPermission("authz") } } } };
+      }
+    };
+    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      ...authz
+    };
+  }
+});
+</script>

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>