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

Update README.md

packages/ui/certd-client/src/views/crud/advanced/big-data/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/AdvancedBigData";
+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/advanced/big-data/crud.jsx

@@ -0,0 +1,170 @@
+import * as api from "./api";
+import { message } from "ant-design-vue";
+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 {
+    output: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        scroll: {
+          //启用横向滚动条，设置一个大于所有列宽之和的值，一般大于表格宽度
+          x: 2400
+        }
+      },
+      pagination: {
+        pageSize: 100
+      },
+      rowHandle: {
+        fixed: "right"
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        text: {
+          title: "文本",
+          type: "text"
+        },
+        dict1: {
+          title: "字典1",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict1"
+          })
+        },
+        dict2: {
+          title: "字典2",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict2"
+          })
+        },
+        dict3: {
+          title: "字典3",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict3"
+          })
+        },
+        dict4: {
+          title: "字典4",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict4"
+          })
+        },
+        dict5: {
+          title: "字典5",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict5"
+          })
+        },
+        dict6: {
+          title: "字典6",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict6"
+          })
+        },
+        dict7: {
+          title: "字典7",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict7"
+          })
+        },
+        dict8: {
+          title: "字典8",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict8"
+          })
+        },
+        dict9: {
+          title: "字典9",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict9"
+          })
+        },
+        dict10: {
+          title: "字典10",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?from=dict10"
+          })
+        },
+        text1: {
+          title: "文本",
+          type: "text"
+        },
+        text2: {
+          title: "文本",
+          type: "text"
+        },
+        text3: {
+          title: "文本",
+          type: "text"
+        },
+        text4: {
+          title: "文本",
+          type: "text"
+        },
+        text5: {
+          title: "文本",
+          type: "text"
+        },
+        text6: {
+          title: "文本",
+          type: "text"
+        },
+        text7: {
+          title: "文本",
+          type: "text"
+        },
+        text8: {
+          title: "文本",
+          type: "text"
+        },
+        text9: {
+          title: "文本",
+          type: "text"
+        },
+        text10: {
+          title: "文本",
+          type: "text"
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">大量数据</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </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: "AdvancedBigData",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, output } = 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,
+      ...output
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/advanced/big-data/mock.js

@@ -0,0 +1,126 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "AdvancedBigData",
+  idGenerator: 0,
+  copyTimes: 1000
+};
+const list = [
+  {
+    text: "测试文本",
+    dict1: "1",
+    dict2: "1",
+    dict3: "2",
+    dict4: "1",
+    dict5: "2",
+    dict6: "1",
+    dict7: "1",
+    dict8: "1",
+    text1: "测试文本1",
+    text2: "测试文本2",
+    text3: "测试文本3",
+    text4: "测试文本4",
+    text5: "测试文本5",
+    text6: "测试文本6",
+    text7: "测试文本7",
+    text8: "测试文本8",
+    dict9: "2",
+    dict10: "1",
+    dict11: "2",
+    dict12: "1"
+  },
+  {
+    text: "测试文本",
+    dict1: "1",
+    dict2: "1",
+    dict3: "2",
+    dict4: "1",
+    dict5: "2",
+    dict6: "1",
+    dict7: "1",
+    dict8: "1",
+    text1: "测试文本1",
+    text2: "测试文本2",
+    text3: "测试文本3",
+    text4: "测试文本4",
+    text5: "测试文本5",
+    text6: "测试文本6",
+    text7: "测试文本7",
+    text8: "测试文本8",
+    dict9: "2",
+    dict10: "1",
+    dict11: "2",
+    dict12: "1"
+  },
+  {
+    text: "测试文本",
+    dict1: "1",
+    dict2: "1",
+    dict3: "2",
+    dict4: "1",
+    dict5: "2",
+    dict6: "1",
+    dict7: "1",
+    dict8: "1",
+    text1: "测试文本1",
+    text2: "测试文本2",
+    text3: "测试文本3",
+    text4: "测试文本4",
+    text5: "测试文本5",
+    text6: "测试文本6",
+    text7: "测试文本7",
+    text8: "测试文本8",
+    dict9: "2",
+    dict10: "1",
+    dict11: "2",
+    dict12: "1"
+  },
+  {
+    text: "测试文本",
+    dict1: "1",
+    dict2: "1",
+    dict3: "2",
+    dict4: "1",
+    dict5: "2",
+    dict6: "1",
+    dict7: "1",
+    dict8: "1",
+    text1: "测试文本1",
+    text2: "测试文本2",
+    text3: "测试文本3",
+    text4: "测试文本4",
+    text5: "测试文本5",
+    text6: "测试文本6",
+    text7: "测试文本7",
+    text8: "测试文本8",
+    dict9: "2",
+    dict10: "1",
+    dict11: "2",
+    dict12: "1"
+  },
+  {
+    text: "测试文本",
+    dict1: "1",
+    dict2: "1",
+    dict3: "2",
+    dict4: "1",
+    dict5: "2",
+    dict6: "1",
+    dict7: "1",
+    dict8: "1",
+    text1: "测试文本1",
+    text2: "测试文本2",
+    text3: "测试文本3",
+    text4: "测试文本4",
+    text5: "测试文本5",
+    text6: "测试文本6",
+    text7: "测试文本7",
+    text8: "测试文本8",
+    dict9: "2",
+    dict10: "1",
+    dict11: "2",
+    dict12: "1"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/advanced/from-backend/api.js

@@ -0,0 +1,48 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/AdvancedFromBackend";
+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 }
+  });
+}
+export function GetCrud() {
+  return request({
+    url: apiPrefix + "/crud",
+    method: "get"
+  });
+}

packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.js

@@ -0,0 +1,29 @@
+export const crudOptions = `
+ ({expose,dict}) => {
+  return {
+      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/advanced/from-backend/crud.jsx

@@ -0,0 +1,27 @@
+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
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud, dict, useExpose } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { GetCrud } from "./api";
+import _ from "lodash-es";
+export default defineComponent({
+  name: "AdvancedFromBackend",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // 页面打开后获取列表数据
+    onMounted(async () => {
+      // 从后台获取crud配置
+      const ret = await GetCrud();
+      // 编译
+      const crudBackend = eval(ret);
+      // 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
+      const crudOptionsFromBackend = crudBackend({ expose, dict });
+      // 与本地options合并
+      _.merge(crudOptions, crudOptionsFromBackend);
+      // useCrud
+      useCrud({ expose, crudOptions });
+      // 刷新数据
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.js

@@ -0,0 +1,35 @@
+import mockUtil from "/src/mock/base";
+import { crudOptions } from "./crud-backend";
+const options = {
+  name: "AdvancedFromBackend",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1"
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+
+options.list = list;
+options.copyTimes = 1000;
+const mock = mockUtil.buildMock(options);
+
+mock.push({
+  path: "/AdvancedFromBackend/crud",
+  method: "get",
+  handle(req) {
+    return {
+      code: 0,
+      msg: "success",
+      data: crudOptions
+    };
+  }
+});
+
+export default mock;

packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/AdvancedInDialog";
+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/advanced/in-dialog/crud/crud.jsx

@@ -0,0 +1,106 @@
+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: {
+        name: {
+          title: "姓名",
+          type: "text", //虽然不写也能正确显示组件，但不建议省略它
+          search: { show: true },
+          form: {
+            component: {
+              maxlength: 20
+            }
+          }
+        },
+        search: {
+          title: "搜索",
+          type: "text",
+          form: {
+            component: {
+              addonAfter: "后置",
+              suffix: "suffix",
+              children: {
+                addonBefore() {
+                  return <SearchOutlined />;
+                }
+              }
+            }
+          }
+        },
+        password: {
+          title: "密码",
+          type: "password",
+          column: {
+            //一般密码不显示在列里面
+            show: false
+          }
+        },
+        intro: {
+          title: "简介",
+          type: "textarea",
+          form: {
+            component: { showWordLimit: true, maxlength: 200 }
+          },
+          column: {
+            ellipsis: true
+          }
+        },
+        render: {
+          title: "复杂输入(render)",
+          form: {
+            title: "复杂输入",
+            component: {
+              render(context) {
+                console.log("context scope", context);
+                return (
+                  <a-input-group compact>
+                    <a-input
+                      placeholder={"render1 input"}
+                      style="width: 50%"
+                      v-model={[context.form.render, "value"]}
+                    />
+                    <a-input
+                      placeholder={"render2 input"}
+                      style="width: 50%"
+                      v-model={[context.form.render2, "value"]}
+                    />
+                  </a-input-group>
+                );
+              }
+            }
+          }
+        },
+        render2: {
+          title: "我的值是由复杂输入列输入的",
+          column: {
+            width: "300px"
+          },
+          form: {
+            show: false
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </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: "fs-in-dialog",
+  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/advanced/in-dialog/crud/mock.js

@@ -0,0 +1,40 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "AdvancedInDialog",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "王小虎",
+    date: "2016-05-02",
+    status: "0",
+    province: "1",
+    avatar: "https://alicdn.antdv.com/vue.png",
+    show: true,
+    city: "sz",
+    address: "123123",
+    zip: "518000",
+    intro: "王小虎是element-plus的table示例出现的名字"
+  },
+  {
+    name: "张三",
+    date: "2016-05-04",
+    status: "1",
+    province: "2"
+  },
+  {
+    name: "李四",
+    date: 2232433534511,
+    status: "1",
+    province: "0"
+  },
+  {
+    name: "王五",
+    date: "2016-05-03",
+    status: "2",
+    province: "wh,gz"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/advanced/in-dialog/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        对话框中显示crud
+      </div>
+    </template>
+    <div style="padding:50px">
+      <a-button type="primary" @click="openDialog">打开对话框</a-button>
+    </div>
+
+    <a-modal v-model:visible="dialogShow" width="80%" title="fs-crud in dialog">
+      <div style="height: 400px;position: relative">
+        <fs-in-dialog ></fs-in-dialog>
+      </div>
+    </a-modal>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import FsInDialog from './crud/index.vue'
+export default defineComponent({
+  name: "InDialog",
+  components:{FsInDialog},
+  setup() {
+    const dialogShow = ref(false)
+    function openDialog(){
+      dialogShow.value=true
+    }
+    return {
+      dialogShow,
+      openDialog
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/advanced/linkage/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FormLinkage";
+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/advanced/linkage/crud.jsx

@@ -0,0 +1,118 @@
+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: {
+        align: "center"
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        province: {
+          title: "省",
+          type: "dict-select",
+          search: {
+            show: true
+          },
+          dict: dict({
+            url: "/mock/linkage/province",
+            value: "id",
+            cache: true
+          }),
+          form: {
+            valueChange({ form, value, getComponentRef }) {
+              form.city = undefined; // 将“city”的值置空
+              form.county = undefined; // 将“county”的值置空
+              if (value) {
+                getComponentRef("city").reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典
+              }
+            }
+          }
+        },
+        city: {
+          title: "市",
+          type: "dict-select",
+          search: {
+            show: true
+          },
+          dict: dict({
+            cache: true,
+            prototype: true,
+            // url() 改成构建url，返回一个url
+            url({ form }) {
+              if (form && form.province != null) {
+                // 本数据字典的url是通过前一个select的选项决定的
+                return `/mock/linkage/city?province=${form.province}`;
+              }
+              return undefined; // 返回undefined 将不加载字典
+            },
+            value: "id"
+          }),
+          form: {
+            // 注释同上
+            valueChange({ value, form, getComponentRef }) {
+              if (value) {
+                form.county = undefined; // 将county的value置空
+                const countySelect = getComponentRef("county");
+                if (form && form.province && form.city) {
+                  countySelect.reloadDict(); // 重新加载字典项
+                } else {
+                  countySelect.clearDict(); // 清空选项
+                }
+              }
+            }
+          }
+        },
+        county: {
+          title: "区",
+          type: "dict-select",
+          search: {
+            show: true
+          },
+          dict: dict({
+            value: "id",
+            cache: true,
+            prototype: true,
+            url({ form }) {
+              if (form && form.province != null && form.city != null) {
+                return `/mock/linkage/county?province=${form.province} &city=${form.city}`;
+              }
+              return undefined;
+            }
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding" />
+</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: "FormLinkage",
+  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/advanced/linkage/mock.js

@@ -0,0 +1,129 @@
+import mockUtil from "/src/mock/base";
+import _ from "lodash-es";
+const options = {
+  name: "FormLinkage",
+  idGenerator: 0
+};
+const list = [
+  {
+    province: 10000,
+    city: 100003,
+    county: 100004
+  },
+  {
+    province: 10010,
+    city: 100113,
+    county: 100115
+  }
+];
+const tree = [
+  {
+    id: 10000,
+    label: "北京市",
+    children: [
+      {
+        id: 100003,
+        label: "北京市辖区",
+        children: [
+          { id: 100004, label: "东城区" },
+          { id: 100005, label: "西城区" }
+        ]
+      },
+      {
+        id: 100103,
+        label: "北京郊区",
+        children: [
+          { id: 100104, label: "东郊" },
+          { id: 100105, label: "西郊" }
+        ]
+      }
+    ]
+  },
+  {
+    id: 10010,
+    label: "天津市",
+    children: [
+      {
+        id: 100013,
+        label: "天津市辖区",
+        children: [
+          { id: 100014, label: "天津湾" },
+          { id: 100015, label: "渤海湾" }
+        ]
+      },
+      {
+        id: 100113,
+        label: "天津市郊区",
+        children: [
+          { id: 100114, label: "天津湾郊区" },
+          { id: 100115, label: "渤海湾郊区" }
+        ]
+      }
+    ]
+  }
+];
+
+options.list = list;
+options.copyTimes = 1000;
+const mock = mockUtil.buildMock(options);
+
+function omitChildren(orignalListt) {
+  const list = [];
+  orignalListt.forEach((item) => {
+    list.push(_.omit(item, "children"));
+  });
+  return list;
+}
+mock.push({
+  path: "/mock/linkage/province",
+  method: "get",
+  handle() {
+    const list = omitChildren(tree);
+    return {
+      code: 0,
+      msg: "success",
+      data: list
+    };
+  }
+});
+
+mock.push({
+  path: "/mock/linkage/city",
+  method: "get",
+  handle(req) {
+    const province = parseInt(req.params.province);
+    const a = tree.filter((item) => {
+      return item.id === province;
+    });
+    const list = omitChildren(a[0].children);
+    return {
+      code: 0,
+      msg: "success",
+      data: list
+    };
+  }
+});
+
+mock.push({
+  path: "/mock/linkage/county",
+  method: "get",
+  handle(req) {
+    const province = parseInt(req.params.province);
+    const a = tree.filter((item) => {
+      return item.id === province;
+    });
+    const city = parseInt(req.params.city);
+    const b = a[0].children.filter((item) => {
+      return item.id === city;
+    });
+
+    const list = omitChildren(b[0].children);
+    return {
+      code: 0,
+      msg: "success",
+      data: list
+    };
+  }
+});
+
+export default mock;

packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/AdvancedLocalPagination";
+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/advanced/local-pagination/crud.jsx

@@ -0,0 +1,101 @@
+import * as api from "./api";
+import _ from "lodash-es";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ expose, localDataRef }) {
+  const pageRequest = async ({ page, query }) => {
+    //总数据
+    let data = localDataRef.value;
+    //获取请求参数
+    const limit = page.limit;
+    let offset = page.offset;
+    data = data.filter((item) => {
+      // 根据你的业务，编写你的本地查询逻辑
+      // text改成你的查询字段
+      if (query.status && item.status !== query.status) {
+        return false;
+      }
+      return true;
+    });
+
+    // 本地分页
+    const start = offset;
+    let end = offset + limit;
+    if (data.length < end) {
+      end = data.length;
+    }
+    const records = data.slice(start, end);
+
+    // 构造返回结果
+    return {
+      offset,
+      limit,
+      total: localDataRef.value.length,
+      records
+    };
+  };
+  const editRequest = async ({ form, row }) => {
+    form.id = row.id;
+    await api.UpdateObj(form);
+    //更新本地数据
+    const tableData = localDataRef.value;
+    for (const item of tableData) {
+      if (item.id === form.id) {
+        _.merge(item, form);
+      }
+    }
+  };
+
+  const addRequest = async ({ form }) => {
+    const id = await api.AddObj(form);
+    //本地添加
+    form.id = id;
+    localDataRef.value.unshift(form);
+    return id;
+  };
+
+  const delRequest = async ({ row }) => {
+    await api.DelObj(row.id);
+    //本地删除那一条记录
+    const tableData = localDataRef.value;
+    let index = 0;
+    for (const item of tableData) {
+      if (item.id === row.id) {
+        localDataRef.value.splice(index, 1);
+      }
+      index++;
+    }
+  };
+
+  return {
+    output: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        status: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">本地分页</div>
+    </template>
+    <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert type="warning" class="ml-1" message="先从后台获取全部数据，然后本地分页展示" />
+      </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 { GetList } from "./api";
+
+/**
+ * 本示例演示如何本地分页
+ * 主要就是将pageRequest修改为从本地获取数据就行了
+ */
+export default defineComponent({
+  name: "AdvanceLocalPagination",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+
+    const localDataRef = ref();
+
+    onMounted(async () => {
+      //先加载后台数据
+      const ret = await GetList({ page: { offset: 0, limit: 99999999 }, query: {}, sort: {} });
+      localDataRef.value = ret.records;
+
+      //然后再初始化crud
+      // 暴露的方法
+      const { expose } = useExpose({ crudRef, crudBinding });
+      // 你的crud配置
+      const { crudOptions } = createCrudOptions({ expose, localDataRef });
+      // 初始化crud配置
+      useCrud({ expose, crudOptions });
+
+      // 页面打开后获取列表数据
+      await expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.js

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

packages/ui/certd-client/src/views/crud/advanced/nest/api.js

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/AdvancedNest";
+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 }
+  });
+}
+
+export function BatchDelete(ids) {
+  return request({
+    url: apiPrefix + "/batchDelete",
+    method: "post",
+    data: { ids }
+  });
+}

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.js

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/AdvancedAside";
+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 }
+  });
+}
+
+export function BatchDelete(ids) {
+  return request({
+    url: apiPrefix + "/batchDelete",
+    method: "post",
+    data: { ids }
+  });
+}

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.jsx

@@ -0,0 +1,56 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ expose }) {
+  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: {
+      pagination: {
+        showSizeChanger: false, // antdv
+        showQuickJumper: false // antdv
+      },
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      toolbar: {
+        compact: false
+      },
+      rowHandle: {
+        width: "230px"
+      },
+      table: {},
+      columns: {
+        gradeId: {
+          title: "年级Id",
+          search: { show: true },
+          type: "number",
+          column: {
+            width: 80,
+            align: "center",
+            sortable: true
+          }
+        },
+        class: {
+          title: "班级",
+          search: { show: false },
+          type: "text",
+          column: {
+            sortable: true
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding">
+    <template #actionbar-right>
+      <a-alert type="warning" class="ml-1" message="左侧表格点击行可以触发这里的查询" />
+    </template>
+  </fs-crud>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "AsideTable",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, selectedIds } = 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,
+      setSearchFormData: expose.setSearchFormData,
+      doRefresh: expose.doRefresh
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.js

@@ -0,0 +1,26 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "AdvancedAside",
+  idGenerator: 0
+};
+const list = [
+  {
+    class: "一班",
+    gradeId: 1
+  },
+  {
+    class: "二班",
+    gradeId: 1
+  },
+  {
+    class: "三班",
+    gradeId: 2
+  },
+  {
+    class: "四班",
+    gradeId: 2
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/advanced/nest/crud.jsx

@@ -0,0 +1,101 @@
+import * as api from "./api";
+import { ref, shallowRef } from "vue";
+import SubTable from "./sub-table/index.vue";
+import { compute } from "@fast-crud/fast-crud";
+export default function ({ expose, asideTableRef }) {
+  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 currentRow = ref();
+
+  const onCurrentRowChange = (id) => {
+    currentRow.value = id;
+    asideTableRef.value.setSearchFormData({ form: { gradeId: id } });
+    asideTableRef.value.doRefresh();
+  };
+  return {
+    crudOptions: {
+      table: {
+        customRow(record, index) {
+          const clazz = record.id === currentRow.value ? "fs-current-row" : "";
+          return {
+            onClick() {
+              onCurrentRowChange(record.id);
+            },
+            class: clazz
+          };
+        }
+      },
+      pagination: {
+        showSizeChanger: false, // antdv
+        showQuickJumper: false // antdv
+      },
+      form: {
+        wrapper: {
+          is: "a-drawer"
+        }
+      },
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      rowHandle: {
+        width: "240px"
+      },
+      toolbar: {
+        compact: false
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        grade: {
+          title: "年级",
+          search: { show: true },
+          type: "text",
+          column: {
+            sortable: true
+          }
+        },
+        nestId: {
+          title: "嵌套表格",
+          //复合字段类型
+          type: ["number", "colspan"],
+          form: {
+            // 嵌套表格字段
+            rules: [{ required: true, message: "请选择用户" }],
+            component: {
+              //局部引用子表格，要用shallowRef包裹
+              name: shallowRef(SubTable),
+              vModel: "modelValue",
+              gradeId: compute(({ form }) => {
+                return form.id;
+              })
+            }
+            // antdv 的跨列配置，需要配置如下三个, 可以通过colspan简化
+            // col: { span: 24 },
+            // labelCol: { span: 2 },
+            // wrapperCol: { span: 21 }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/nest/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <a-row class="demo-nest" :gutter="0">
+    <a-col :span="12">
+      <fs-crud ref="crudRef" v-bind="crudBinding">
+        <template #actionbar-right>
+          <a-alert type="warning" class="ml-1" message="<--对话框内嵌套子表格" />
+        </template>
+      </fs-crud>
+    </a-col>
+    <a-col :span="12">
+      <aside-table ref="asideTableRef" />
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import AsideTable from "./aside-table/index.vue";
+export default defineComponent({
+  name: "FeatureNest",
+  // eslint-disable-next-line vue/no-unused-components
+  components: { AsideTable },
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const asideTableRef = ref();
+    const { crudOptions } = createCrudOptions({ expose, asideTableRef });
+    // 初始化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,
+      asideTableRef
+    };
+  }
+});
+</script>
+<style lang="less">
+.demo-nest {
+  height: 100%;
+  width: 100%;
+}
+</style>

packages/ui/certd-client/src/views/crud/advanced/nest/mock.js

@@ -0,0 +1,22 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "AdvancedNest",
+  idGenerator: 0
+};
+const list = [
+  {
+    grade: "一年级",
+    nestId: 1
+  },
+  {
+    grade: "二年级",
+    nestId: 2
+  },
+  {
+    grade: "三年级",
+    nestId: 3
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.js

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/AdvancedSubTable";
+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 }
+  });
+}
+
+export function BatchDelete(ids) {
+  return request({
+    url: apiPrefix + "/batchDelete",
+    method: "post",
+    data: { ids }
+  });
+}

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.jsx

@@ -0,0 +1,62 @@
+import * as api from "./api";
+export default function ({ expose, props, ctx }) {
+  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: {
+      table: {
+        customRow(record, index) {
+          const clazz = record.id === props.modelValue ? "fs-current-row" : "";
+          return {
+            onClick() {
+              ctx.emit("update:modelValue", record.id);
+            },
+            class: clazz
+          };
+        }
+      },
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      search: { show: false },
+      form: {
+        wrapper: {
+          is: "a-drawer"
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        name: {
+          title: "用户姓名",
+          search: { show: true },
+          type: "text",
+          column: {
+            sortable: true
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div>年级id：{{ gradeId }},当前选中值：{{ modelValue }}</div>
+    <div style="height: 400px">
+      <fs-crud ref="crudRef" v-bind="crudBinding" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, watch } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "SubTable",
+  props: {
+    modelValue: {},
+    gradeId: {} //年级id，接收其他参数
+  },
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose, props, ctx });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    //你的业务代码
+    watch(
+      () => {
+        return props.modelValue;
+      },
+      (value) => {
+        console.log("modelValue changed", value);
+      }
+    );
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
+<style lang="less" scoped>
+/deep/.fs-crud-container.compact .el-table--border {
+  border-left: 1px solid #eee;
+}
+</style>

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.js

@@ -0,0 +1,19 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "AdvancedSubTable",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "张三"
+  },
+  {
+    name: "李四"
+  },
+  {
+    name: "王五"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisColumnMergePlugin";
+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/basis/column-merge-plugin/crud.jsx

@@ -0,0 +1,69 @@
+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 {
+    output: {},
+    crudOptions: {
+      settings: {
+        viewFormUseCellComponent: true
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        text: {
+          title: "text",
+          type: "text"
+        },
+        readonly: {
+          title: "只读字段",
+          type: "text",
+          readonly: true
+        },
+        useCell: {
+          title: "查看使用cell组件",
+          type: "dict-select",
+          readonly: true,
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum"
+          }),
+          viewForm: {
+            component: {
+              vModel: "modelValue"
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">可以实现类似dict的公共属性</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/column-type.html#修改官方字段类型配置"> 字段合并插件帮助文档</a></div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <span class="fs-desc">此示例实现只需配置readonly: true，即可关闭添加和编辑时该字段的显示，更多说明请点击右上角帮助</span>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "BasisColumnMergePlugin",
+  setup() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.js

@@ -0,0 +1,25 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "BasisColumnMergePlugin",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "点击右边查看按钮看效果",
+    readonly: "我是只读",
+    useCell: "1"
+  },
+  {
+    text: "点击编辑按钮查看效果",
+    readonly: "我是只读",
+    useCell: "2"
+  },
+  {
+    text: "正常字段",
+    readonly: "我是只读",
+    useCell: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/basis/columns-set/api.js

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisColumnsSet";
+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 }
+  });
+}
+
+export function BatchDelete(ids) {
+  return request({
+    url: apiPrefix + "/batchDelete",
+    method: "post",
+    data: { ids }
+  });
+}

packages/ui/certd-client/src/views/crud/basis/columns-set/crud.jsx

@@ -0,0 +1,69 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+import { ref } from "vue";
+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
+      },
+      toolbar: {
+        columnsFilter: {
+          mode: "default"
+        }
+      },
+      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"
+          })
+        },
+        disabled: {
+          title: "列设置禁用",
+          type: "text",
+          column: {
+            columnSetDisabled: true
+          }
+        },
+        hidden: {
+          title: "列设置隐藏",
+          type: "text",
+          column: {
+            columnSetShow: false
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选" />
+        <a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, Ref } from "vue";
+import createCrudOptions from "./crud.jsx";
+import { useExpose, useCrud, CrudBinding } from "@fast-crud/fast-crud";
+import { message, Modal, notification } from "ant-design-vue";
+export default defineComponent({
+  name: "BasisColumnsSet",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding: Ref<CrudBinding> = ref({});
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, selectedRowKeys } = 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 columnsSetToggleMode() {
+      crudBinding.value.toolbar.columnsFilter.mode =
+        crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
+      message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
+    }
+
+    return {
+      crudBinding,
+      crudRef,
+      columnsSetToggleMode
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/columns-set/mock.js

@@ -0,0 +1,19 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "BasisColumnsSet",
+  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/basis/compute-more/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FormComputeMore";
+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/basis/compute-more/crud.jsx

@@ -0,0 +1,79 @@
+import * as api from "./api";
+import { requestForMock } from "/src/api/service";
+import { useCompute } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+import { ref, computed } from "vue";
+const { asyncCompute, compute } = useCompute();
+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);
+  };
+
+  //普通的ref引用，可以动态切换配置
+  const defValueRef = ref("我是动态的默认值");
+  const defValueComputed = computed(() => {
+    return defValueRef.value;
+  });
+  return {
+    output: {
+      defValueRef,
+      defValueComputed
+    },
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        scroll: {
+          x: 1500
+        }
+      },
+      form: {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 14 }
+      },
+      rowHandle: {
+        fixed: "right",
+        align:'center',
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        defValue: {
+          title: "默认值",
+          type: "text",
+          search: { show: true, value: null },
+          form: {
+            // form.value不支持asyncCompute
+            // 假如你的默认值异步获取的，那么你自己必须保证先异步计算完成之后，才能打开对话框。
+            // 因为在打开对话框时，默认值就必须得设置好。
+            value: defValueRef
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">动态计算-更多测试</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </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: "BasisComputeMore",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, output } = 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,
+      ...output
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/compute-more/mock.js

@@ -0,0 +1,32 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FormComputeMore",
+  idGenerator: 0
+};
+const list = [
+  {
+    ref: "根据showRef显示",
+    compute: true,
+    status: "1",
+    remote: "2",
+    shower: "---> 点右边编辑查看示例效果",
+    remote2: "2",
+    editable: true
+  },
+  {
+    compute: false,
+    status: "2",
+    remote: "0",
+    remote2: "2",
+    editable: false
+  },
+  {
+    compute: true,
+    status: "0",
+    remote2: "2",
+    editable: true
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/basis/compute/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FormCompute";
+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/basis/compute/crud.jsx

@@ -0,0 +1,211 @@
+import * as api from "./api";
+import { requestForMock } from "/src/api/service";
+import { useCompute } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+import { ref, computed } from "vue";
+const { asyncCompute, compute } = useCompute();
+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);
+  };
+
+  //普通的ref引用，可以动态切换配置
+  const showRef = ref(false);
+  const showTableRef = ref(true);
+  const showTableComputed = computed(() => {
+    return showTableRef.value;
+  });
+
+  const columnComponentShowRef = ref(true);
+  const columnComponentShowComputed = computed(() => {
+    return columnComponentShowRef.value;
+  });
+
+  return {
+    output: {
+      showRef,
+      showTableRef,
+      columnComponentShowRef
+    },
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        scroll: {
+          x: 1500
+        },
+        //通过switch动态显隐table
+        show: showTableComputed //不仅支持computed，直接传showTableRef也是可以的
+      },
+      form: {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 14 }
+      },
+      rowHandle: {
+        fixed: "right",
+        buttons: {
+          edit: {
+            show: compute(({ row }) => {
+              return row.editable;
+            })
+          },
+          remove: {
+            show: compute(({ row }) => {
+              return row.editable;
+            })
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50,
+            resizable: true
+          },
+          form: {
+            show: false
+          }
+        },
+        refSwitch: {
+          title: "ref引用切换",
+          type: "text",
+          form: {
+            helper: "点我切换右边的输入框显示"
+          }
+        },
+        ref: {
+          title: "根据ref引用显示",
+          type: ["text"],
+          form: {
+            component: {
+              show: showRef
+            },
+            helper: "我会根据showRef进行显隐"
+          }
+        },
+        compute: {
+          title: "compute",
+          search: { show: false },
+          type: "text",
+          column: {
+            show: columnComponentShowComputed,
+            columnSetDisabled: true, //这里采用自定义控制显隐，那么列设置里面就要禁用
+            // columnSetShow: false, //直接不在列设置里面显示也行
+            component: {
+              name: "a-switch",
+              vModel: "checked"
+            }
+          },
+          form: {
+            component: {
+              name: "a-switch",
+              vModel: "checked"
+            },
+            helper: "点我触发动态计算"
+          }
+        },
+        shower: {
+          title: "根据compute显示",
+          search: { show: false },
+          type: "button",
+          form: {
+            component: {
+              show: compute(({ form }) => {
+                return form.compute;
+              })
+            }
+          },
+          column: {
+            width: 250,
+            resizable: true,
+            component: {
+              show: compute(({ row }) => {
+                return row.compute;
+              })
+            }
+          }
+        },
+        remote: {
+          title: "asyncCompute",
+          search: { show: true },
+          type: "text",
+          form: {
+            component: {
+              name: "a-select",
+              vModel: "value",
+              placeholder: "异步计算远程获取options",
+              options: asyncCompute({
+                async asyncFn(watchValue, context) {
+                  const url = "/mock/dicts/OpenStatusEnum?remote";
+                  return await requestForMock({ url });
+                }
+              })
+            },
+            helper: "我的options是异步计算远程获取的,只会获取一次"
+          }
+        },
+        remote2: {
+          title: "监听switch触发异步计算",
+          search: { show: false },
+          type: "text",
+          form: {
+            component: {
+              name: "a-select",
+              vModel: "value",
+              placeholder: "异步计算远程获取options",
+              options: asyncCompute({
+                watch({ form }) {
+                  return form.compute;
+                },
+                async asyncFn(watchValue) {
+                  message.info("监听switch,触发远程获取options");
+                  const url = watchValue
+                    ? "/mock/dicts/OpenStatusEnum?remote"
+                    : "/mock/dicts/moreOpenStatusEnum?remote";
+                  return await requestForMock({ url });
+                }
+              })
+            },
+            helper: "监听其他属性修改后，触发重新计算"
+          },
+          column: {
+            width: 200
+          }
+        },
+        editable: {
+          title: "可编辑",
+          search: { show: false },
+          type: "text",
+          column: {
+            fixed: "right",
+            component: {
+              name: "a-switch",
+              vModel: "checked"
+            }
+          },
+          form: {
+            show: false
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/compute/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        动态计算
+        <fs-icon icon="ion:apps-sharp" :spin="true" />
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">帮助说明</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-tooltip title="我能控制表格显隐">
+          <span class="ml-1">表格显隐:<a-switch v-model:checked="showTableRef"></a-switch></span>
+        </a-tooltip>
+        <span class="ml-1">列显隐:<a-switch v-model:checked="columnComponentShowRef"></a-switch></span>
+        <a-alert class="ml-1" type="info" message="点击下方右边的编辑按钮查看示例效果-----------> ↓↓↓↓↓" />
+      </template>
+      <template #form_refSwitch>
+        <a-switch v-model:checked="showRef"></a-switch>
+      </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: "BasisCompute",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, output } = 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,
+      ...output
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/compute/mock.js

@@ -0,0 +1,34 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FormCompute",
+  idGenerator: 0
+};
+const list = [
+  {
+    ref: "根据showRef显示",
+    compute: true,
+    status: "1",
+    remote: "2",
+    shower: "---> 点右边编辑查看示例效果",
+    remote2: "2",
+    editable: true
+  },
+  {
+    compute: false,
+    shower: "---> 点右边编辑查看示例效果",
+    status: "2",
+    remote: "0",
+    remote2: "2",
+    editable: false
+  },
+  {
+    compute: true,
+    shower: "---> 点右边编辑查看示例效果",
+    status: "0",
+    remote2: "2",
+    editable: true
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/basis/first/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { dict, useCrud } from "@fast-crud/fast-crud";
+import { useExpose } from "@fast-crud/fast-crud";
+import _ from "lodash-es";
+
+//此处为crudOptions配置
+const createCrudOptions = function ({ expose }) {
+  //本地模拟后台crud接口方法 ----开始
+  const records = [{ id: 1, name: "Hello World", type: 1 }];
+  const pageRequest = async (query) => {
+    return {
+      records,
+      currentPage: 1,
+      pageSize: 20,
+      total: records.length
+    };
+  };
+  const editRequest = async ({ form, row }) => {
+    const target = _.find(records, (item) => {
+      return row.id === item.id;
+    });
+    _.merge(target, form);
+    return target;
+  };
+  const delRequest = async ({ row }) => {
+    _.remove(records, (item) => {
+      return item.id === row.id;
+    });
+  };
+  const addRequest = async ({ form }) => {
+    const maxRecord = _.maxBy(records, (item) => {
+      return item.id;
+    });
+    form.id = (maxRecord?.id || 0) + 1;
+    records.push(form);
+    return form;
+  };
+  //本地模拟后台crud接口方法 -----结束
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true },
+          column: {
+            resizable: true,
+            width: 200
+          }
+        },
+        type: {
+          title: "类型",
+          type: "dict-select",
+          dict: dict({
+            data: [
+              { value: 1, label: "开始" },
+              { value: 0, label: "停止" }
+            ]
+          })
+        }
+      }
+    }
+  };
+};
+
+//此处为组件定义
+export default defineComponent({
+  name: "FsCrudFirst",
+  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/basis/i18n/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisI18n";
+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/basis/i18n/crud.jsx

@@ -0,0 +1,72 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+import { useI18n } from "vue-i18n";
+export default function ({ expose }) {
+  const { t } = useI18n();
+  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
+          }
+        },
+        name: {
+          title: t("app.crud.i18n.name"),
+          type: "text",
+          search: { show: true }
+        },
+        city: {
+          title: t("app.crud.i18n.city"),
+          type: "dict-select",
+          search: { show: true },
+          dict: dict({
+            value: "id",
+            label: "text",
+            data: [
+              { id: "sz", text: "深圳", color: "success" },
+              { id: "gz", text: "广州", color: "blue" },
+              { id: "bj", text: "北京" },
+              { id: "wh", text: "武汉" },
+              { id: "sh", text: "上海" }
+            ]
+          })
+        },
+        radio: {
+          title: t("app.crud.i18n.status"),
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/i18n/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">CRUD示例【国际化】</div>
+      <div class="more"><a-button @click="showDemo">更多</a-button></div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert class="ml-1" type="warning" message="右上角切换语言查看效果" />
+      </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";
+import { message } from "ant-design-vue";
+export default defineComponent({
+  name: "BasisI18n",
+  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 showDemo() {
+      message("演示按钮");
+    }
+    return {
+      crudBinding,
+      crudRef,
+      showDemo
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/i18n/mock.js

@@ -0,0 +1,25 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "BasisI18n",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1",
+    name: "张三",
+    city: "sz"
+  },
+  {
+    radio: "2",
+    name: "李四",
+    city: "gz"
+  },
+  {
+    radio: "0",
+    name: "王五",
+    city: "sh"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

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

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisLayoutCard";
+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/basis/layout-card/crud.jsx

@@ -0,0 +1,73 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }) {
+  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: {
+      container: {
+        is: "fs-layout-card"
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true }
+        },
+        city: {
+          title: "城市",
+          type: "dict-select",
+          search: { show: true },
+          dict: dict({
+            value: "id",
+            label: "text",
+            data: [
+              { id: "sz", text: "深圳", color: "success" },
+              { id: "gz", text: "广州", color: "blue" },
+              { id: "bj", text: "北京" },
+              { id: "wh", text: "武汉" },
+              { id: "sh", text: "上海" }
+            ]
+          })
+        },
+        radio: {
+          title: "单选",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,46 @@
+<template>
+  <fs-page class="page-layout-card">
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </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: "BasisLayoutCard",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { crudExpose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ crudExpose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
+
+<style lang="less">
+.page-layout-card {
+  background-color: #eee;
+}
+</style>

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

@@ -0,0 +1,25 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "BasisLayoutCard",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1",
+    name: "张三",
+    city: "sz"
+  },
+  {
+    radio: "2",
+    name: "李四",
+    city: "gz"
+  },
+  {
+    radio: "0",
+    name: "王五",
+    city: "sh"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

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

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisLayoutCustom";
+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/basis/layout-custom/crud.jsx

@@ -0,0 +1,75 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+import CustomLayout from "./custom-layout.vue";
+import { shallowRef } from "vue";
+export default function ({ crudExpose }) {
+  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: {
+      container: {
+        is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true }
+        },
+        city: {
+          title: "城市",
+          type: "dict-select",
+          search: { show: false },
+          dict: dict({
+            value: "id",
+            label: "text",
+            data: [
+              { id: "sz", text: "深圳", color: "success" },
+              { id: "gz", text: "广州", color: "blue" },
+              { id: "bj", text: "北京" },
+              { id: "wh", text: "武汉" },
+              { id: "sh", text: "上海" }
+            ]
+          })
+        },
+        radio: {
+          title: "单选",
+          search: { show: false },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/layout-custom/custom-layout.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="custom-layout">
+    <div class="layout-header">
+      <!-- ↓↓↓↓↓  关键插槽：查询  ↓↓↓↓ -->
+      <slot name="search"></slot>
+      <!-- ↓↓↓↓↓  关键插槽：工具条  ↓↓↓↓ -->
+      <slot name="toolbar"></slot>
+    </div>
+    <div class="layout-top">
+      <!-- ↓↓↓↓↓  关键插槽：动作条  ↓↓↓↓ -->
+      <slot name="actionbar"></slot>
+      <!-- ↓↓↓↓↓  上翻页条  ↓↓↓↓ -->
+      <slot name="pagination"></slot>
+    </div>
+
+    <!-- 高度需要自适应撑开，可以通过flex:1 -->
+    <div class="layout-body">
+      <!-- 默认插槽 -->
+      <slot></slot>
+      <!-- ↓↓↓↓↓  关键插槽：表格  ↓↓↓↓ -->
+      <slot name="table"></slot>
+
+      <!-- ↓↓↓↓↓  关键插槽：表单  ↓↓↓↓ -->
+      <slot name="form"></slot>
+    </div>
+    <div class="layout-footer">
+      <!-- ↓↓↓↓↓  关键插槽：分页条  ↓↓↓↓ -->
+      <slot name="pagination"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+/**
+ * 自定义布局
+ */
+export default defineComponent({
+  name: "CustomLayout"
+});
+</script>
+
+<style lang="less">
+.custom-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .layout-header {
+    padding: 10px 10px 5px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .layout-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 10px 5px 10px;
+  }
+  .layout-body {
+    flex: 1; //重要，自适应撑开高度，表格固定表头必须
+    overflow-y: auto;
+  }
+  .fs-crud-actionbar {
+    display: flex;
+    align-items: center;
+  }
+  .fs-crud-pagination {
+    text-align: right;
+    padding: 5px 10px 5px 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <fs-page class="page-layout-custom">
+    <template #header>
+      <div class="title">自定义布局</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert
+          class="ml-1"
+          type="info"
+          message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
+        />
+      </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: "BasisLayoutCustom",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { crudExpose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ crudExpose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
+
+<style lang="less">
+.page-layout-custom {
+}
+</style>

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

@@ -0,0 +1,25 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "BasisLayoutCustom",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1",
+    name: "张三",
+    city: "sz"
+  },
+  {
+    radio: "2",
+    name: "李四",
+    city: "gz"
+  },
+  {
+    radio: "0",
+    name: "王五",
+    city: "sh"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/basis/value-change/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisValueChange";
+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/basis/value-change/crud.jsx

@@ -0,0 +1,95 @@
+import * as api from "./api";
+import { message } from "ant-design-vue";
+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 {
+    output: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        switch: {
+          title: "开关",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: true, label: "开启" },
+              { value: false, label: "关闭" }
+            ]
+          }),
+          column: {
+            component: {
+              name: "fs-dict-switch",
+              vModel: "checked"
+            },
+            valueChange(context) {
+              console.log("column value changed:", context);
+            }
+          },
+          form: {
+            valueChange({ value, key, form }) {
+              console.log("valueChanged,", key, value, form);
+              message.info(`valueChanged:${key}=${value}`);
+            }
+          }
+        },
+        normal: {
+          title: "value-change",
+          type: "text",
+          form: {
+            valueChange({ value, key, form }) {
+              console.log("valueChanged,", key, value, form);
+              message.info(`valueChanged:${key}=${value}`);
+            }
+          }
+        },
+        immediate: {
+          title: "immediate",
+          type: "text",
+          search: {
+            show: true
+          },
+          form: {
+            valueChange: {
+              handle({ value, key, form, immediate }) {
+                console.log("valueChange,", key, value, "isImmediate=", immediate);
+                message.info(`valueChanged:${key}=${value},isImmediate=${immediate}`);
+              },
+              immediate: true
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/value-change/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">ValueChange</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </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: "BasisValueChange",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, output } = 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,
+      ...output
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/value-change/mock.js

@@ -0,0 +1,32 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "BasisValueChange",
+  idGenerator: 0
+};
+const list = [
+  {
+    ref: "根据showRef显示",
+    compute: true,
+    status: "1",
+    remote: "2",
+    shower: "---> 点右边编辑查看示例效果",
+    remote2: "2",
+    editable: true
+  },
+  {
+    compute: false,
+    status: "2",
+    remote: "0",
+    remote2: "2",
+    editable: false
+  },
+  {
+    compute: true,
+    status: "0",
+    remote2: "2",
+    editable: true
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/component/button/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentButton";
+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/component/button/crud.jsx

@@ -0,0 +1,115 @@
+import * as api from "./api";
+import { requestForMock } from "/src/api/service";
+import { dict, compute } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+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
+      },
+      form: {
+        //配置表单label的宽度
+        labelCol: { span: 6 }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        button: {
+          title: "按钮",
+          search: { show: true },
+          type: "button",
+          column: {
+            component: {
+              show: compute(({ value }) => {
+                //当value为null时，不显示
+                return value != null;
+              }),
+              on: {
+                // 注意：必须要on前缀
+                onClick({ row }) {
+                  message.success("按钮点击:" + row.button);
+                }
+              }
+            }
+          }
+        },
+        url: {
+          title: "url",
+          search: { show: true },
+          type: "text",
+          column: {
+            show: false
+          }
+        },
+        link: {
+          title: "链接",
+          search: { show: true },
+          type: "link",
+          column: {
+            component: {
+              on: {
+                // 注意：必须要on前缀
+                onClick({ row }) {
+                  if (row.url) {
+                    window.open(row.url);
+                  }
+                }
+              }
+            }
+          },
+          form: {
+            title: "按钮文字"
+          }
+        },
+        link2: {
+          title: "手写link配置",
+          search: { show: true },
+          type: "text", //form组件用input
+          column: {
+            component: {
+              name: "fs-button", //列展示组件为button
+              vModel: "text", // 将row.link2的值赋值给text属性
+              type: "link", // 按钮展示为链接样式
+              on: {
+                //注册点击事件
+                // 注意：必须要on前缀
+                onClick({ row }) {
+                  if (row.url) {
+                    window.open(row.url);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/button/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </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: "ComponentButton",
+  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>
+
+<style lang="less"></style>

packages/ui/certd-client/src/views/crud/component/button/mock.js

@@ -0,0 +1,23 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "ComponentButton",
+  idGenerator: 0
+};
+const list = [
+  {
+    button: "张三",
+    link: "百度",
+    url: "https://www.baidu.com",
+    link2: "手写配置"
+  },
+  {
+    button: "李四",
+    link: "百度",
+    url: "https://www.baidu.com",
+    link2: "手写配置"
+  },
+  {}
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/component/cascader/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentCascader";
+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/component/cascader/crud.jsx

@@ -0,0 +1,137 @@
+import * as api from "./api";
+import { requestForMock } from "/src/api/service";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ crudRef }) {
+  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
+      },
+      form: {
+        // 单列布局
+        col: { span: 24 },
+        labelCol: { span: 4 },
+        wrapperCol: { span: 18 }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        cascader: {
+          title: "级联",
+          search: { show: true },
+          type: "dict-cascader",
+          dict: dict({
+            cloneable: false,
+            isTree: true,
+            url: "/mock/dicts/cascaderData?single"
+          })
+        },
+        lazyLoad: {
+          title: "懒加载",
+          type: "dict-cascader",
+          dict: dict({
+            url: "/mock/tree/GetTreeChildrenByParentId?lazyLoad",
+            value: "code",
+            label: "name",
+            isTree: true,
+            prototype: true,
+            getNodesByValues(values) {
+              //给cell展示组件调用，根据value值获取节点，每行都会请求一次
+              if (values == null) {
+                return [];
+              }
+              return requestForMock({
+                url: "/mock/tree/GetNodesByValues",
+                params: { values }
+              });
+            }
+          }),
+          form: {
+            component: {
+              vModel: "value",
+              options: [
+                {
+                  code: "11",
+                  name: "北京",
+                  isLeaf: false
+                },
+                {
+                  code: "12",
+                  name: "天津",
+                  isLeaf: false
+                }
+              ],
+              loadData: async (selectedOptions) => {
+                console.log("lazyLoad", selectedOptions);
+                const targetOption = selectedOptions[selectedOptions.length - 1];
+                targetOption.loading = true;
+
+                const ret = await requestForMock({
+                  url: "/mock/tree/GetTreeChildrenByParentId",
+                  params: { parentId: targetOption.code }
+                });
+                targetOption.loading = false;
+                const list = [];
+                for (const item of ret) {
+                  list.push({
+                    code: item.code,
+                    name: item.name,
+                    isLeaf: item.leaf === true
+                  });
+                }
+                targetOption.children = list;
+                //options.value = [...options.value];
+              },
+              changeOnSelect: true
+            }
+          }
+        },
+        multiple: {
+          title: "可搜索，可只选父节点",
+          type: "dict-cascader",
+          dict: dict({
+            isTree: true,
+            url: "/mock/dicts/cascaderData?multiple"
+          }),
+          form: {
+            component: {
+              showSearch: {
+                filter: (inputValue, path) => {
+                  return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+                }
+              },
+              "change-on-select": true
+            },
+            helper: "antd cascader 不支持级联多选"
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/cascader/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </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: "ComponentCascader",
+  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/component/cascader/mock.js

@@ -0,0 +1,23 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "ComponentCascader",
+  idGenerator: 0
+};
+const list = [
+  {
+    cascader: ["zhinan", "shejiyuanze", "yizhi"],
+    lazyLoad: ["11", "1101", "110101", "110101001"],
+    multiple: ["antdv cascader不支持多选"]
+  },
+  {
+    cascader: ["zhinan", "shejiyuanze", "yizhi"],
+    multiple: ["antdv cascader不支持多选"]
+  },
+  {
+    cascader: ["zhinan", "shejiyuanze", "yizhi"],
+    multiple: ["antdv cascader不支持多选"]
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/component/checkbox/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentCheckbox";
+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/component/checkbox/crud.jsx

@@ -0,0 +1,50 @@
+import * as api from "./api";
+import { requestForMock } from "/src/api/service";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ crudRef }) {
+  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
+          }
+        },
+        checkbox: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-checkbox",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/checkbox/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </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: "ComponentCheckbox",
+  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/component/checkbox/mock.js

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

packages/ui/certd-client/src/views/crud/component/date/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentDate";
+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/component/date/crud.jsx

@@ -0,0 +1,174 @@
+import * as api from "./api";
+import { utils } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
+
+console.log("utils", utils);
+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
+      },
+      table: {
+        scroll: { x: 2000 }
+      },
+      rowHandle: { fixed: "right" },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        timestamp: {
+          title: "时间戳",
+          type: "datetime",
+          search: {
+            show: true,
+            width: 185,
+            component: {}
+          },
+          valueBuilder({ value, row, key }) {
+            console.log("value builder:", key, value, row);
+            if (value != null) {
+              row[key] = dayjs(value);
+            }
+          },
+          valueResolve({ value, row, key }) {
+            if (value != null) {
+              row[key] = value.unix();
+            }
+          }
+        },
+        humanize: {
+          type: ["datetime", "time-humanize"],
+          title: "人性化时间",
+          column: {
+            component: {
+              options: {
+                largest: 2
+              }
+            }
+          }
+        },
+        datetime: {
+          title: "日期时间",
+          type: "datetime",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        format: {
+          title: "格式化",
+          type: "datetime",
+          form: {
+            component: {
+              format: "YYYY年MM月DD日 HH:mm",
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          },
+          column: {
+            width: 180,
+            component: {
+              // 行展示组件使用的dayjs，
+              format: "YYYY年MM月DD日 HH:mm"
+            }
+          }
+        },
+        date: {
+          title: "仅日期",
+          type: "date",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
+              events: {
+                onChange(context) {
+                  console.log("change", context);
+                }
+              }
+            }
+          }
+        },
+        time: {
+          title: "仅时间",
+          type: "time",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        disabledDate: {
+          title: "禁用日期",
+          type: "date",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
+              disabledDate(current) {
+                return current && current < dayjs().endOf("day");
+              }
+            }
+          }
+        },
+        daterange: {
+          title: "日期范围",
+          type: "daterange",
+          search: { show: true, width: 300 },
+          valueBuilder({ row, key }) {
+            if (!utils.strings.hasEmpty(row.daterangeStart, row.daterangeEnd)) {
+              row[key] = [dayjs(row.daterangeStart), dayjs(row.daterangeEnd)];
+            }
+          }
+        },
+        datetimerange: {
+          title: "日期时间范围",
+          type: "datetimerange",
+          search: { show: true, width: 300 },
+          valueBuilder({ row, key }) {
+            if (!utils.strings.hasEmpty(row.datetimerangeStart, row.datetimerangeEnd)) {
+              row[key] = [dayjs(row.datetimerangeStart), dayjs(row.datetimerangeEnd)];
+            }
+          },
+          valueResolve({ form, key }) {
+            const row = form;
+            if (row[key] != null && !utils.strings.hasEmpty(row[key])) {
+              row.datetimerangeStart = row[key][0];
+              row.datetimerangeEnd = row[key][1];
+            } else {
+              row.datetimerangeStart = null;
+              row.datetimerangeEnd = null;
+            }
+          }
+        },
+        customType: {
+          title: "自定义字段类型",
+          type: "time2"
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/date/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert
+          style="margin-left: 10px"
+          message="关于日期时间，建议前后端统一使用时间戳（long类型）进行交互，可以避免时区转化带来的问题"
+        />
+      </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: "ComponentDate",
+  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/component/date/mock.js

@@ -0,0 +1,44 @@
+import mockUtil from "/src/mock/base";
+
+const options = {
+  name: "ComponentDate",
+  idGenerator: 0
+};
+const list = [
+  {
+    timestamp: 123123123123,
+    humanize: new Date().getTime() - 11111111,
+    datetime: "2019-09-01 11:11:11",
+    date: "2019-09-02 11:11:11",
+    format: "2019-09-21 11:11:11",
+    time: "2019-09-22 12:11:11",
+    daterangeStart: "2019-09-23 11:11:11",
+    daterangeEnd: "2019-09-24 11:11:11",
+    datetimerangeStart: "2019-09-25 11:11:11",
+    datetimerangeEnd: "2019-09-26 11:11:11"
+  },
+  {
+    // timestamp: 444444555,
+    datetime: "2017-09-20 11:11:11",
+    date: "2019-09-20 11:11:11",
+    humanize: new Date().getTime() - 22222222,
+    // time: 12313123334,
+    daterangeStart: "2019-09-20 11:11:11",
+    daterangeEnd: "2019-09-21 11:11:11",
+    datetimerangeStart: "2019-09-20 11:11:11",
+    datetimerangeEnd: "2019-09-21 11:11:11"
+  },
+  {
+    // timestamp: 5555555555,
+    datetime: "2017-09-20 11:11:11",
+    date: "2019-09-20 11:11:11",
+    // time: 12313123334,
+    daterangeStart: "2019-09-20 11:11:11",
+    daterangeEnd: "2019-09-21 11:11:11",
+    datetimerangeStart: "2019-09-20 11:11:11",
+    datetimerangeEnd: "2019-09-21 11:11:11"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/component/editor/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentEditor";
+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/component/editor/crud.jsx

@@ -0,0 +1,107 @@
+import * as api from "./api";
+import { utils, dict, compute } 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
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        title: {
+          title: "标题",
+          type: "text",
+          column: {
+            width: 400
+          },
+          form:{
+            col: { span: 24 },
+          },
+        },
+        text: {
+          title: "摘要",
+          type: "textarea",
+          form:{
+            col: { span: 24 },
+          },
+          viewForm: {
+            component: {
+              name: null,
+              render(h, scope) {
+                return <div>{scope.value}</div>;
+              }
+            }
+          }
+        },
+        disabled: {
+          title: "禁用启用",
+          search: { show: false },
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: true, label: "禁用" },
+              { value: false, label: "启用" }
+            ]
+          })
+        },
+        content_wang: {
+          title: "内容",
+          column: {
+            width: 300,
+            show: false
+          },
+          type: ["editor-wang5"], // 富文本图片上传依赖file-uploader，请先配置好file-uploader
+          form: {
+            helper:"示例已升级到wangEditor5版本，原来的editor-wang目前仍然可以使用，后续fs升级可能会将其删除，请尽快升级到editor-wang5版本",
+            col: { span: 24 },
+            // 动态显隐字段
+            // show: compute(({ form }) => {
+            //   return form.change === "wang";
+            // }),
+            rules: [{ required: true, message: "此项必填" }],
+            component: {
+              disabled: compute(({ form }) => {
+                return form.disabled;
+              }),
+              id: "1", // 当同一个页面有多个editor时，需要配置不同的id
+              config: {},
+              uploader: {
+                type: "form",
+                buildUrl(res) {
+                  return res.url;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/editor/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert style="margin-left: 10px" message="富文本" />
+      </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: "ComponentEditor",
+  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/component/editor/mock.js

@@ -0,0 +1,29 @@
+import mockUtil from "/src/mock/base";
+
+const options = {
+  name: "ComponentEditor",
+  idGenerator: 0
+};
+const list = [
+  {
+    title: "d2-crud-plus好用吗？",
+    text: "非常好用",
+    content_quill: '<h1 class="ql-align-center">非常好用哦</h1>',
+    change: "quill"
+  },
+  {
+    title: "d2-crud-plus有什么优势？",
+    text: "简单，方便",
+    content_quill: "简单方便",
+    change: "wang"
+  },
+  {
+    title: "1111111",
+    text: "22222",
+    content_quill: "3333",
+    change: "wang"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/component/icon/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentIcon";
+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/component/icon/crud.jsx

@@ -0,0 +1,75 @@
+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
+          }
+        },
+        icon: {
+          title: "icon",
+          search: { show: true },
+          type: "text",
+          column: {
+            component: {
+              name: "fs-icon",
+              vModel: "icon",
+              style: "font-size:18px"
+            }
+          },
+          form: {
+            helper: {
+              render() {
+                return (
+                  <a target={"_blank"} href={"https://iconify.design/icon-sets/ion/"}>
+                    点击此处选择图标名称
+                  </a>
+                );
+              }
+            }
+          }
+        },
+        svg: {
+          title: "svg",
+          search: { show: true },
+          type: "text",
+          column: {
+            component: {
+              name: "fs-icon",
+              vModel: "icon",
+              style: "font-size:18px"
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/icon/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </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: "ComponentIcon",
+  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();
+    });
+
+    const value = ref(null);
+    return {
+      crudBinding,
+      crudRef,
+      value
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/component/icon/mock.js

@@ -0,0 +1,22 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "ComponentIcon",
+  idGenerator: 0
+};
+const list = [
+  {
+    icon: "ri:24-hours-fill",
+    svg:"svg:icon-compass"
+  },
+  {
+    icon: "ion:add-circle-outline",
+    svg:"svg:icon-left-circle"
+  },
+  {
+    icon: "ion:american-football-sharp",
+    svg:"svg:icon-Dollar"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/component/json/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentJson";
+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/component/json/crud.jsx

@@ -0,0 +1,78 @@
+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
+      },
+      form: {
+        wrapper: {
+          async onOpened({ mode, formRef }) {
+            if (!formRef.form.async) {
+              setTimeout(() => {
+                formRef.form.async = { aaa: "11", bb: "111" };
+              }, 2000);
+            }
+          }
+        }
+      },
+      columns: {
+        json: {
+          title: "json",
+          type: "json",
+          form: {
+            valueBuilder({ form }) {
+              if (form.json == null) {
+                return;
+              }
+              form.json = JSON.parse(form.json);
+            },
+            valueResolve({ form }) {
+              if (form.json == null) {
+                return;
+              }
+              form.json = JSON.stringify(form.json);
+            }
+          }
+        },
+        async: {
+          title: "异步加载",
+          type: "json",
+          form: {
+            // 上面form.wrapper.onOpened里面配置了异步加载
+            helper: "在onOpened里面配置异步加载json字符串",
+            valueBuilder({ form }) {
+              if (form.async == null) {
+                return;
+              }
+              form.async = JSON.parse(form.async);
+            },
+            valueResolve({ form }) {
+              if (form.async == null) {
+                return;
+              }
+              form.async = JSON.stringify(form.async);
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/json/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </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: "ComponentJson",
+  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/component/json/mock.js

@@ -0,0 +1,18 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "ComponentJson",
+  idGenerator: 0
+};
+const list = [
+  {
+    json: '{"a":1,"b":2}',
+    async: null
+  },
+  {
+    json: '{"a":3,"b":4}',
+    async: null
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/component/number/api.js

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentNumber";
+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/component/number/crud.jsx

@@ -0,0 +1,71 @@
+import * as api from "./api";
+import { requestForMock } from "/src/api/service";
+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
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        integer: {
+          title: "整数",
+          search: { show: true },
+          type: "number"
+        },
+        float: {
+          title: "小数",
+          type: "number",
+          form: {
+            component: {
+              step: "0.1"
+            }
+          }
+        },
+        format: {
+          title: "格式化",
+          type: "number",
+          form: {
+            component: {
+              formatter: (value) => `${value}%`,
+              parser: (value) => value.replace("%", "")
+            }
+          },
+          column: {
+            formatter({ value }) {
+              return value + "%";
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/component/number/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </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: "ComponentNumber",
+  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/component/number/mock.js

@@ -0,0 +1,25 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "ComponentNumber",
+  idGenerator: 0
+};
+const list = [
+  {
+    integer: 1,
+    float: 1.1,
+    format: 100
+  },
+  {
+    integer: 2,
+    float: 1.2,
+    format: 100
+  },
+  {
+    integer: 3,
+    float: 1.3,
+    format: 100
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;