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

Update README.md

packages/ui/certd-client/src/views/crud/slots/cell/api.js

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

packages/ui/certd-client/src/views/crud/slots/cell/crud.jsx

@@ -0,0 +1,89 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
+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);
+  };
+  const radioDict = dict({
+    url: "/mock/dicts/OpenStatusEnum?single"
+  });
+  return {
+    radioDict,
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      rowHandle: {
+        buttons: {
+          edit: { dropdown: true },
+          remove: { dropdown: true }
+        },
+        width: 630
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        like: {
+          title: "like",
+          type: "number",
+          search: { show: true }
+        },
+        switch: {
+          title: "switch",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: true, label: "开启" },
+              { value: false, label: "关闭" }
+            ]
+          })
+        },
+        createDate: {
+          title: "时间",
+          type: "datetime",
+          column: {
+            align: "left",
+            width: 300
+          },
+          valueBuilder({ key, row }) {
+            row[key] = dayjs(row[key]);
+          }
+        },
+        updateDate: {
+          title: "修改时间",
+          type: "datetime",
+          column: {
+            show: false
+          },
+          valueBuilder({ key, row }) {
+            row[key] = dayjs(row[key]);
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/slots/cell/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert class="ml-1" type="info" message=" ↓↓↓ 通过cell字段插槽，可以做一些很复杂的显示" />
+      </template>
+      <template #cell_like="scope">
+        <a-statistic title="自定义复杂显示" :value="scope.row.like" style="margin-right: 50px">
+          <template #suffix>
+            <like-outlined />
+          </template>
+        </a-statistic>
+      </template>
+      <template #cell_switch="scope">
+        <fs-icon v-if="scope.row.switch" style="font-size: 16px; color: green" icon="ion:checkmark-circle-outline"></fs-icon>
+        <fs-icon v-if="!scope.row.switch" style="font-size: 16px; color: red" icon="ion:close-circle-outline"></fs-icon>
+      </template>
+      <template #cell_createDate="scope">
+        创建时间：{{ dateFormat(scope.row.createDate) }}<br />
+        修改时间：{{ dateFormat(scope.row.updateDate) }}
+      </template>
+
+      <template #cell-rowHandle-left="scope">
+        <a-button class="row-handle-btn" size="small" danger @click="showScope(scope)">rowHandle-left插槽</a-button>
+      </template>
+      <template #cell-rowHandle-middle="scope">
+        <a-button class="row-handle-btn" size="small" danger @click="showScope(scope)">rowHandle-middle插槽</a-button>
+      </template>
+      <template #cell-rowHandle-right="scope">
+        <a-button class="row-handle-btn" size="small" danger @click="showScope(scope)">rowHandle-right插槽</a-button>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import dayjs from "dayjs";
+export default defineComponent({
+  name: "SlotsCell",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, radioDict } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    function dateFormat(time, formatter = "YYYY-MM-DD") {
+      return dayjs(time).format(formatter);
+    }
+
+    function showScope(scope) {
+      console.log("scope", scope);
+    }
+    return {
+      crudBinding,
+      crudRef,
+      radioDict,
+      dateFormat,
+      showScope
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/slots/cell/mock.js

@@ -0,0 +1,26 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "SlotsCell",
+  idGenerator: 0
+};
+const list = [
+  {
+    like: 10000,
+    switch: true,
+    createDate: new Date().getTime(),
+    updateDate: new Date().getTime()
+  },
+  {
+    like: 10000,
+    switch: false,
+    createDate: new Date().getTime(),
+    updateDate: new Date().getTime()
+  },
+  {
+    like: 10000,
+    switch: true
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/slots/form-item/api.js

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

packages/ui/certd-client/src/views/crud/slots/form-item/crud.jsx

@@ -0,0 +1,51 @@
+import * as api from "./api";
+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
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        topics: {
+          title: "多行输入",
+          type: "text",
+          search: { show: true },
+          form: {
+            rules: [{ required: true, message: "请输入" }]
+          },
+          column: {
+            component: { name: "fs-values-format" }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/slots/form-item/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert class="ml-1" type="info" message=" ← form表单字段插槽，可以做一些很复杂的输入" />
+      </template>
+
+      <template #form_topics="scope">
+        <a-input-search
+          v-for="(item, index) in scope.form.topics"
+          :key="index"
+          v-model:value="scope.form.topics[index]"
+          :disabled="scope.mode === 'view'"
+          class="mb-1"
+          @search="removeTopic(index, scope.form, scope.key)"
+        >
+          <template #enterButton>
+            <a-button :disabled="scope.mode === 'view'">
+              <DeleteOutlined />
+            </a-button>
+          </template>
+        </a-input-search>
+        <a-button :disabled="scope.mode === 'view'" @click="addTopic(scope.form, scope.key)">添加主题</a-button>
+      </template>
+    </fs-crud>
+  </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: "SlotsForm",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    function addTopic(form, key) {
+      if (form[key] == null) {
+        form[key] = [];
+      }
+      form[key].push("");
+    }
+    function removeTopic(index, form, key) {
+      form[key].splice(index, 1);
+    }
+    return {
+      crudBinding,
+      crudRef,
+      addTopic,
+      removeTopic
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/slots/form-item/mock.js

@@ -0,0 +1,13 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "SlotsFormItem",
+  idGenerator: 0
+};
+const list = [
+  {
+    topics: ["fast-crud 666", "fast-crud真好用"]
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/slots/form/api.js

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

packages/ui/certd-client/src/views/crud/slots/form/crud.jsx

@@ -0,0 +1,50 @@
+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);
+  };
+  const radioDict = dict({
+    url: "/mock/dicts/OpenStatusEnum?single"
+  });
+  return {
+    radioDict,
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        text: {
+          title: "文本",
+          type: "text",
+          search: { show: true }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/slots/form/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert class="ml-1" type="info" message=" ← 在表单的各个位置都可以插入自定义内容" />
+      </template>
+
+      <template #form-header-left>
+        <a-tag color="red">form-header-left插槽</a-tag>
+      </template>
+      <template #form-header-right>
+        <a-tag color="red">form-header-right插槽</a-tag>
+      </template>
+      <template #form-header-action-left>
+        <a-tag color="red">form-header-action-left插槽</a-tag>
+      </template>
+      <template #form-header-action-right>
+        <a-tag color="red">form-header-action-right插槽</a-tag>
+      </template>
+      <template #form-body-top>
+        <a-alert type="warning" message="form-body-top 插槽" />
+      </template>
+      <template #form-body-bottom>
+        <a-alert type="warning" message="form-body-bottom 插槽" />
+      </template>
+
+      <template #form-footer-left>
+        <a-button type="danger">form-footer-left 插槽</a-button>
+      </template>
+      <template #form-footer-right>
+        <a-button type="danger">form-footer-right 插槽</a-button>
+      </template>
+    </fs-crud>
+  </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: "SlotsForm",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/slots/form/mock.js

@@ -0,0 +1,13 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "SlotsForm",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "文本输入"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/slots/layout/api.js

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

packages/ui/certd-client/src/views/crud/slots/layout/crud.jsx

@@ -0,0 +1,49 @@
+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 (id) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }) => {
+    return await api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/slots/layout/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #header-top> <a-alert type="warning" message="header-top 插槽" /></template>
+      <template #header-bottom><a-alert type="warning" message="header-bottom 插槽" /></template>
+      <template #header-middle> <a-alert type="warning" message="header-middle 插槽" /></template>
+      <template #footer-top> <a-alert type="warning" message="footer-top 插槽" /></template>
+      <template #footer-bottom> <a-alert type="warning" message="footer-bottom 插槽" /></template>
+
+      <template #pagination-left>
+        <a-button type="danger">pagination-left插槽</a-button>
+      </template>
+      <template #pagination-right>
+        <a-button type="danger">pagination-right插槽</a-button>
+      </template>
+
+      <template #search-left>
+        <a-button type="danger">search-left插槽</a-button>
+      </template>
+      <template #search-middle>
+        <a-button type="danger">search-middle</a-button>
+      </template>
+      <template #search-right>
+        <a-button type="danger">search-right插槽</a-button>
+      </template>
+
+      <template #actionbar-left>
+        <a-button type="danger">actionbar-left插槽</a-button>
+      </template>
+      <template #actionbar-right>
+        <a-button type="danger">actionbar-right插槽</a-button>
+      </template>
+
+      <template #toolbar-left>
+        <a-button type="danger">toolbar-left插槽</a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button type="danger">toolbar-right插槽</a-button>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { useExpose } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "SlotsLayout",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/slots/layout/mock.js

@@ -0,0 +1,19 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "SlotsLayout",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1"
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/slots/search/api.js

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

packages/ui/certd-client/src/views/crud/slots/search/crud.jsx

@@ -0,0 +1,49 @@
+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 (id) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }) => {
+    return await api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/slots/search/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert class="ml-1" type="info" message=" ↑↑↑ 这里演示查询字段通过插槽自定义" />
+      </template>
+      <template #search_radio="scope">
+        <a-input-number v-model:value="scope.form.radio" style="width: 200px" placeholder="字段插槽自定义" />
+      </template>
+      <template #search-middle="scope">
+        <a-form-item label="自定义">
+          <a-tooltip title="注意：search-middle插槽自定义的内容，无法被重置">
+            <a-input v-model:value="scope.form.custom" placeholder="search-middle插槽" />
+          </a-tooltip>
+        </a-form-item>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { useExpose } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "SlotsSearch",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/slots/search/mock.js

@@ -0,0 +1,19 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "SlotsSearch",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1"
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;