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

Update README.md

packages/ui/certd-client/src/views/crud/feature/column-resize/api.js

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

@@ -0,0 +1,70 @@
+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);
+  };
+  const crudBinding = expose.crudBinding;
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        onResizeColumn: (w, col) => {
+          //触发resize事件后，修改column宽度，width只能配置为number类型
+          //可以将此方法写在app.use()中的commonOptions里面
+          crudBinding.value.table.columnsMap[col.key].width = w;
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50, //宽度必须number类型
+            resizable: true //配置true，表示可以调整宽度
+          },
+          form: {
+            show: false
+          }
+        },
+        text: {
+          title: "说明",
+          type: "text",
+          column: {
+            ellipsis: true,
+            showTitle: true,
+            resizable: true, //配置true，表示可以调整宽度
+            width: 400 //宽度必须number类型
+          }
+        },
+        //必须留一个自动宽度
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding">
+      <template #actionbar-right> 列头可以调整宽度 </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: "FeatureColumnResize",
+  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/feature/column-resize/mock.js

@@ -0,0 +1,20 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureSearch",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "这一列可以调整宽度，另外必须留一列自动宽度",
+    radio: "1"
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/feature/column-sort/api.js

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureColumnSort";
+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/feature/column-sort/crud.jsx

@@ -0,0 +1,94 @@
+import * as api from "./api";
+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: {
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      toolbar: {
+        //工具按钮排序
+        buttons: {
+          search: { order: 1 } // 查询按钮排到前面
+        }
+      },
+      form: {
+        //表单跨列
+        col: { span: 24 },
+        labelCol: { span: 6 }
+      },
+      columns: {
+        col1: {
+          title: "col.1",
+          search: { show: true },
+          type: "text"
+        },
+        col2: {
+          title: "col.2,我排最后一个",
+          search: {
+            //控制查询字段顺序
+            show: true,
+            //字段默认order为100，比100大的放最后面
+            order: 101
+          },
+          type: "text",
+          column: {
+            //控制列字段顺序
+            //字段默认order为100，比100大的放最后面
+            order: 101
+          },
+          form: {
+            //控制表单字段顺序
+            //字段默认order为100，比100大的放最后面
+            order: 101
+          }
+        },
+        col3: {
+          title: "col.3,我排第一个",
+          search: {
+            show: true,
+            order: 0
+          },
+          type: "text",
+          column: {
+            order: 0
+          },
+          form: {
+            order: 0
+          }
+        },
+        col4: {
+          title: "col.4,我在col3后面",
+          type: "text",
+          search: {
+            show: true,
+            order: 0
+          },
+          column: {
+            order: 0
+          },
+          form: {
+            order: 0
+          }
+        },
+        col5: {
+          title: "col.5",
+          type: "text"
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-alert
+          class="ml-1"
+          type="info"
+          message="配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）"
+        />
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FeatureColumnSort",
+  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
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/column-sort/mock.js

@@ -0,0 +1,31 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureColumnSort",
+  idGenerator: 0
+};
+const list = [
+  {
+    col1: "1",
+    col2: "2",
+    col3: "3",
+    col4: "4",
+    col5: "5"
+  },
+  {
+    col1: "1",
+    col2: "2",
+    col3: "3",
+    col4: "4",
+    col5: "5"
+  },
+  {
+    col1: "1",
+    col2: "2",
+    col3: "3",
+    col4: "4",
+    col5: "5"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

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

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureColumnsSet";
+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/feature/columns-set/crud.jsx

@@ -0,0 +1,55 @@
+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: "simple"
+        }
+      },
+      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/feature/columns-set/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <fs-page>
+    <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 createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { message, Modal } from "ant-design-vue";
+import { BatchDelete } from "./api";
+export default defineComponent({
+  name: "FeatureColumnsSet",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const 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();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+    };
+  }
+});
+</script>

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

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

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureEditableRow";
+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/feature/editable-row/crud.jsx

@@ -0,0 +1,88 @@
+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 }) => {
+    const id = await api.AddObj(form);
+    return { id };
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      actionbar: { buttons: { add: { show: false }, addRow: { show: true } } },
+      table: {
+        editable: {
+          enabled: true,
+          mode: "row",
+          activeTrigger: false
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          type: "number",
+          form: {
+            show: false
+          },
+          column: { width: 80, align: "center" }
+        },
+        disable: {
+          title: "禁止编辑",
+          type: "text",
+          column: {
+            editable: {
+              disabled: true //也可以配置为方法，根据条件禁用或启用编辑
+              // disabled: ({ column, index, row }) => {
+              //   return index % 2 === 0;
+              // }
+            }
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        },
+        name: {
+          title: "姓名",
+          type: "text"
+        },
+        province: {
+          title: "省份",
+          search: { show: true },
+          type: "dict-select",
+          dict: dict({
+            value: "id",
+            label: "text",
+            data: [
+              { id: "sz", text: "深圳", color: "success" },
+              { id: "gz", text: "广州", color: "primary" },
+              { id: "bj", text: "北京" },
+              { id: "wh", text: "武汉" },
+              { id: "sh", text: "上海" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/editable-row/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 createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FeatureEditableRow",
+  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();
+      expose.editable.enable();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/editable-row/mock.js

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

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

@@ -0,0 +1,105 @@
+import * as api from "./api";
+import { dict, compute } from "@fast-crud/fast-crud";
+export default function ({ expose }) {
+  const { crudBinding } = 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
+      },
+      actionbar: {
+        buttons: {
+          add: {
+            show: compute(() => {
+              if (crudBinding.value) {
+                return !crudBinding.value?.table.editable.enabled;
+              }
+              return false;
+            })
+          },
+          addRow: {
+            show: compute(() => {
+              if (crudBinding.value) {
+                return crudBinding.value?.table.editable.enabled;
+              }
+              return false;
+            })
+          }
+        }
+      },
+      table: {
+        editable: {
+          mode: "free"
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          type: "number",
+          form: {
+            show: false
+          },
+          column: { width: 80, align: "center" }
+        },
+        disable: {
+          title: "禁止编辑",
+          type: "text",
+          column: {
+            editable: {
+              disabled: true //也可以配置为方法，根据条件禁用或启用编辑
+              // disabled: ({ column, index, row }) => {
+              //   return index % 2 === 0;
+              // }
+            }
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        },
+        name: {
+          title: "姓名",
+          type: "text"
+        },
+        province: {
+          title: "省份",
+          search: { show: true },
+          type: "dict-select",
+          dict: dict({
+            value: "id",
+            label: "text",
+            data: [
+              { id: "sz", text: "深圳", color: "success" },
+              { id: "gz", text: "广州", color: "primary" },
+              { id: "bj", text: "北京" },
+              { id: "wh", text: "武汉" },
+              { id: "sh", text: "上海" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/editable/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <!--      <fs-button class="ml-1" @click="addRow">添加行</fs-button>-->
+        <a-radio-group value="crudBinding.table.editable.enabled" class="ml-1" @update:value="enabledChanged">
+          <a-radio-button :value="true">启用编辑</a-radio-button>
+          <a-radio-button :value="false">退出编辑</a-radio-button>
+        </a-radio-group>
+        <!--            <a-radio-group class="ml-1" v-model="crudBinding.table.editable.mode">-->
+        <!--              <a-radio-button label="free">自由模式</a-radio-button>-->
+        <!--              <a-radio-button label="row">行编辑模式</a-radio-button>-->
+        <!--            </a-radio-group>-->
+        <template v-if="crudBinding.table.editable.enabled">
+          <fs-button class="ml-1" @click="active">激活全部编辑</fs-button>
+
+          <fs-button class="ml-1" @click="inactive">反激活全部</fs-button>
+          <fs-button class="ml-1" @click="editCol">编辑列</fs-button>
+          <fs-button class="ml-1" @click="cancel">取消/恢复原状</fs-button>
+          <fs-button class="ml-1" @click="save">保存</fs-button>
+        </template>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+export default defineComponent({
+  name: "FeatureEditable",
+  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();
+      expose.editable.enable({ mode: "free" });
+    });
+
+    function enable() {
+      expose.editable.enable({ enabled: true, mode: "free" });
+    }
+    function disable() {
+      expose.editable.disable();
+    }
+
+    return {
+      crudBinding,
+      crudRef,
+      enabledChanged(event) {
+        if (event) {
+          enable();
+        } else {
+          disable();
+        }
+      },
+      enable,
+      disable,
+      active() {
+        expose.editable.active();
+      },
+      inactive() {
+        expose.editable.inactive();
+      },
+      save() {
+        expose.getTableRef().editable.submit(({ changed, removed, setData }) => {
+          console.log("changed", changed);
+          console.log("removed", removed);
+          // setData({ 0: {id:1} }); //设置data
+          message.success("保存,修改行：" + JSON.stringify(changed) + "；删除行：" + JSON.stringify(removed));
+        });
+      },
+      cancel() {
+        expose.editable.resume();
+      },
+      addRow() {
+        expose.editable.addRow();
+      },
+      editCol() {
+        expose.editable.editCol({ cols: ["radio"] });
+      }
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/editable/mock.js

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

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

@@ -0,0 +1,63 @@
+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
+      },
+      table: {
+        //默认展开第一行
+        defaultExpandedRowKeys:[1],
+        slots: {
+          expandedRowRender: (scope) => {
+            return (
+              <div>
+                index: {scope.index} ; row: {JSON.stringify(scope.record)}
+              </div>
+            );
+          }
+        }
+      },
+      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/feature/expand/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #pagination-left>
+        <a-tooltip title="批量删除">
+          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
+        </a-tooltip>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { message, Modal } from "ant-design-vue";
+import { BatchDelete } from "./api";
+export default defineComponent({
+  name: "FeatureExpand",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const 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();
+    });
+
+    const handleBatchDelete = () => {
+      if (selectedRowKeys.value?.length > 0) {
+        Modal.confirm({
+          title: "确认",
+          content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
+          async onOk() {
+            await BatchDelete(selectedRowKeys.value);
+            message.info("删除成功");
+            expose.doRefresh();
+            selectedRowKeys.value = [];
+          }
+        });
+      } else {
+        message.error("请先勾选记录");
+      }
+    };
+
+    return {
+      crudBinding,
+      crudRef,
+      handleBatchDelete
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/expand/mock.js

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

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

@@ -0,0 +1,70 @@
+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
+      },
+      table: {
+        // 表头过滤改变事件
+        onFilterChange(e) {
+          console.log("onFilterChange", e);
+        }
+      },
+      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"
+          }),
+          column: {
+            filters: [
+              { text: "开", value: "1" },
+              { text: "关", value: "0" },
+              { text: "停", value: "2" }
+            ],
+            // specify the condition of filtering result
+            // here is that finding the name started with `value`
+            onFilter: (value, record) => {
+              return record.radio === value;
+            },
+            sorter: (a, b) => a.radio - b.radio,
+            sortDirections: ["descend"]
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/filter/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: "FeatureFilter",
+  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/feature/filter/mock.js

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

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

@@ -0,0 +1,90 @@
+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: {
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      rowHandle: {
+        //固定右侧
+        fixed: "right"
+      },
+      table: {
+        scroll: {
+          //当你表格宽度大到需要使用固定列时，需要设置此值，并且是大于等于列宽度之和的值
+          //否则可能会出现将自动宽度列挤变形，或者拖动滚动条表头不动等问题。
+          x: 1400
+        }
+      },
+      columns: {
+        text1: {
+          title: "text1",
+          type: "text",
+          column: {
+            // 固定左侧
+            // 注意被固定在左侧的列要放在最前面，否则会出现某些列错位不显示的问题
+            fixed: "left",
+            width: 260
+          }
+        },
+        id: {
+          title: "id",
+          type: "text",
+          column: {
+            width: 100
+          }
+        },
+        text2: {
+          title: "text2",
+          type: "text",
+          column: {
+            width: 260
+          }
+        },
+        text3: {
+          title: "text3",
+          type: "text",
+          column: {
+            width: 260
+          }
+        },
+        text4: {
+          title: "text4",
+          type: "text",
+          column: {
+            width: 260
+          }
+        },
+        text5: {
+          title: "text5",
+          type: "text",
+          column: {
+            width: 260
+          }
+        },
+        last: {
+          title: "last",
+          type: "text",
+          column: {
+            width: 260
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/fixed/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FeatureFixed",
+  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
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/fixed/mock.js

@@ -0,0 +1,14 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureFixed",
+  idGenerator: 0
+};
+const list = [
+  {
+    text1: "我会被固定在左侧",
+    last: "操作列被固定在右侧"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/feature/header-group/api.js

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

@@ -0,0 +1,109 @@
+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
+      },
+      table: { size: "small" },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        user: {
+          title: "用户信息",
+          children: {
+            name: {
+              title: "姓名",
+              type: "text"
+            },
+            age: {
+              title: "年龄",
+              type: "number"
+            },
+            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);
+                }
+              }
+            }
+          }
+        },
+        address: {
+          title: "地址",
+          children: {
+            area: {
+              title: "地区",
+              children: {
+                province: {
+                  title: "省",
+                  search: { show: true },
+                  type: "dict-select",
+                  dict: dict({
+                    data: [
+                      { value: "广东省", label: "广东省" },
+                      { value: "浙江省", label: "浙江省" }
+                    ]
+                  })
+                },
+                city: {
+                  title: "市",
+                  search: { show: true },
+                  type: "text"
+                },
+                county: {
+                  title: "区",
+                  search: { show: true },
+                  type: "text"
+                }
+              }
+            },
+            street: {
+              title: "街道",
+              type: "text"
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/header-group/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #cell_street="scope"> 街道：{{ scope.value }} </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: "FeatureHeaderGroup",
+  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/feature/header-group/mock.js

@@ -0,0 +1,30 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureHeaderGroup",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "张三",
+    age: 18,
+    province: "广东省",
+    city: "深圳市",
+    county: "南山区",
+    street: "粤海街道"
+  },
+  {
+    name: "李四",
+    age: 26,
+    province: "浙江省",
+    city: "杭州市",
+    county: "西湖区",
+    street: "西湖街道"
+  },
+  {
+    name: "王五",
+    age: 24
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/feature/height/api.js

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

@@ -0,0 +1,57 @@
+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
+      },
+      container: {
+        fixedHeight: false
+      },
+      table: {
+        scroll: {
+          y: null
+        }
+      },
+      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/feature/height/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: "ComponentHeight",
+  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/feature/height/mock.js

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

packages/ui/certd-client/src/views/crud/feature/hide/api.js

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

@@ -0,0 +1,100 @@
+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
+      },
+      search: {
+        show: true
+      },
+      pagination: {
+        show: true
+      },
+      table: {
+        show: true
+      },
+      actionbar: {
+        show: true,
+        buttons: {
+          add: {
+            show: true
+          },
+          test: {
+            text: "自定义按钮",
+            show: true,
+            click() {
+              console.log("click");
+            }
+          }
+        }
+      },
+      toolbar: {
+        show: true,
+        buttons: {
+          search: { show: true },
+          refresh: { show: true },
+          compact: { show: true },
+          export: { show: true },
+          columns: { show: true }
+        }
+      },
+      rowHandle: {
+        show: true,
+        width: 330,
+        buttons: {
+          view: { show: true },
+          edit: { show: true },
+          remove: { show: true },
+          custom: {
+            text: "自定义",
+            order: 4,
+            show: true,
+            click(context) {
+              console.log("click", context);
+            }
+          }
+        }
+      },
+      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/feature/hide/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #header-top>
+        <a-card title="部件显隐控制" style="margin-bottom: 20px">
+          <div style="max-width: 900px">
+            <a-row>
+              <a-col :span="2"> 搜索框： </a-col>
+              <a-col :span="2">
+                <a-switch v-model:checked="crudBinding.search.show" active-color="#13ce66" inactive-color="#ff4949" />
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="2"> 动作条： </a-col>
+              <a-col :span="2">
+                <a-switch
+                  v-model:checked="crudBinding.actionbar.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                添加：
+                <a-switch
+                  v-model:checked="crudBinding.actionbar.buttons.add.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                自定义：
+                <a-switch
+                  v-model:checked="crudBinding.actionbar.buttons.test.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="2"> 工具条： </a-col>
+              <a-col :span="2">
+                <a-switch v-model:checked="crudBinding.toolbar.show" active-color="#13ce66" inactive-color="#ff4949" />
+              </a-col>
+              <a-col :span="3">
+                查询：
+                <a-switch
+                  v-model:checked="crudBinding.toolbar.buttons.search.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                刷新：
+                <a-switch
+                  v-model:checked="crudBinding.toolbar.buttons.refresh.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                紧凑：
+                <a-switch
+                  v-model:checked="crudBinding.toolbar.buttons.compact.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                导出：
+                <a-switch
+                  v-model:checked="crudBinding.toolbar.buttons.export.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                列设置：
+                <a-switch
+                  v-model:checked="crudBinding.toolbar.buttons.columns.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="2"> 表格： </a-col>
+              <a-col :span="2">
+                <a-switch v-model:checked="crudBinding.table.show" active-color="#13ce66" inactive-color="#ff4949" />
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="2"> 操作列： </a-col>
+              <a-col :span="2">
+                <a-switch
+                  v-model:checked="crudBinding.rowHandle.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                查看：
+                <a-switch
+                  v-model:checked="crudBinding.rowHandle.buttons.view.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                修改：
+                <a-switch
+                  v-model:checked="crudBinding.rowHandle.buttons.edit.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                删除：
+                <a-switch
+                  v-model:checked="crudBinding.rowHandle.buttons.remove.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+              <a-col :span="3">
+                自定义：
+                <a-switch
+                  v-model:checked="crudBinding.rowHandle.buttons.custom.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="2"> 翻页： </a-col>
+              <a-col :span="2">
+                <a-switch
+                  v-model:checked="crudBinding.pagination.show"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                />
+              </a-col>
+            </a-row>
+          </div>
+        </a-card>
+      </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: "FeatureHide",
+  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/feature/hide/mock.js

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

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

@@ -0,0 +1,56 @@
+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
+      },
+      table: {},
+      columns: {
+        _index: {
+          title: "序号",
+          form: { show: false },
+          column: {
+            // type: "index",
+            align: "center",
+            width: "55px",
+            columnSetDisabled: true, //禁止在列设置中选择
+            formatter: (context) => {
+              //计算序号,你可以自定义计算规则，此处为翻页累加
+              let index = context.index ?? 1;
+              let pagination = expose.crudBinding.value.pagination;
+              return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+            }
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,39 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FeatureIndex",
+  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
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/index/mock.js

@@ -0,0 +1,19 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureIndex",
+  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/feature/local-v-model/crud.jsx

@@ -0,0 +1,32 @@
+import { uiContext } from "@fast-crud/fast-crud";
+
+export default function ({ expose }) {
+  return {
+    crudOptions: {
+      mode:{
+        name:'local',
+        isMergeWhenUpdate:true,
+        isAppendWhenAdd:true
+      },
+      search: {
+        show: false
+      },
+      toolbar:{
+        show:false,
+      },
+      pagination:{
+        show:false
+      },
+      columns: {
+        name: {
+          type: "text",
+          title: "联系人姓名"
+        },
+        mobile: {
+          type: "text",
+          title: "联系人手机号码"
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        将本地crud当做v-model,编辑好之后一并提交，你还可以使用行编辑模式，效果更好
+      </div>
+    </template>
+    <div style="padding:30px">
+      <a-form ref="formRef" :model="form" laba-width="120px">
+        <a-form-item label="姓名">
+          <a-input v-model:value="form.name"></a-input>
+        </a-form-item>
+        <a-form-item label="表格">
+          <div style="min-height: 300px">
+            <FeatureLocalModelValueInput v-model="form.data"/>
+          </div>
+        </a-form-item>
+        <a-form-item >
+          <a-button @click="submit">提交</a-button>
+        </a-form-item>
+      </a-form>
+
+    </div>
+
+  </fs-page>
+</template>
+
+<script>
+import {defineComponent, reactive} from 'vue';
+import {message} from 'ant-design-vue'
+import FeatureLocalModelValueInput from './local.vue'
+export default defineComponent({
+  name: 'FeatureLocalVModel',
+  components:{FeatureLocalModelValueInput},
+  setup() {
+    const form = reactive({
+      name:'test',
+      data: [{name:'初始数据'}],
+    })
+
+    function submit(){
+      message.info("submit:"+JSON.stringify(form))
+      console.log('submit:',form)
+    }
+    return {
+      form,
+      submit
+    };
+  },
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue

@@ -0,0 +1,67 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding"/>
+</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: 'FeatureLocalModelValueInput',
+  props: {
+    modelValue: {
+      default() {
+        return []
+      }
+    }
+  },
+  setup(props) {
+    // 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();
+    // });
+
+    //通过导出modelValue, 可以导出成为一个input组件
+    watch(() => {
+      return props.modelValue
+    }, (value = []) => {
+      crudBinding.value.data = value
+    }, {
+      immediate: true
+    })
+
+
+    // 通过crudBinding.value.data 可以获取表格实时数据
+    function showData() {
+      console.log('data:', crudBinding.value.data)
+    }
+
+
+    return {
+      crudBinding,
+      crudRef,
+      showData,
+    };
+  },
+});
+</script>
+<style lang="less">
+.fs-crud-container.compact .el-table--border {
+  border-left: 1px solid #eee;
+}
+</style>

packages/ui/certd-client/src/views/crud/feature/local/crud.jsx

@@ -0,0 +1,35 @@
+import { uiContext } from "@fast-crud/fast-crud";
+
+export default function ({ expose }) {
+  return {
+    crudOptions: {
+      mode: {
+        name: "local",
+        isMergeWhenUpdate: true,
+        isAppendWhenAdd: true
+      },
+      actionbar: { buttons: { add: { show: true }, addRow: { show: false } } },
+      editable: {
+        enabled: false,
+        mode: "row",
+        activeTrigger: false
+      },
+      search: {
+        show: false
+      },
+      pagination: {
+        show: false
+      },
+      columns: {
+        name: {
+          type: "text",
+          title: "联系人姓名"
+        },
+        mobile: {
+          type: "text",
+          title: "联系人手机号码"
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,89 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-button @click="showData">获取表格数据，打印data</a-button>
+        <a-button @click="disabledEdit">退出编辑模式</a-button>
+        <a-button @click="enabledFreeEdit">自由编辑模式</a-button>
+        <a-button @click="enabledRowEdit">行编辑模式</a-button>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+
+export default defineComponent({
+  name: "FeatureLocal",
+  props: {
+    modelValue: {}
+  },
+  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();
+    // });
+
+    // 通过crudBinding.value.data 可以获取表格实时数据
+    function showData() {
+      console.log("data:", crudBinding.value.data);
+    }
+
+    //初始化本地数据示例
+    crudBinding.value.data = [{ name: "test" }];
+
+    //启用行编辑
+    function enabledRowEdit() {
+      expose.editable.enable({
+        mode: "row"
+      });
+      crudBinding.value.actionbar.buttons.add.show = false;
+      crudBinding.value.actionbar.buttons.addRow.show = true;
+    }
+
+    //启用自由编辑
+    function enabledFreeEdit() {
+      expose.editable.enable({
+        mode: "free"
+      });
+      crudBinding.value.actionbar.buttons.add.show = false;
+      crudBinding.value.actionbar.buttons.addRow.show = true;
+    }
+
+    //启用关闭编辑模式
+    function disabledEdit() {
+      expose.editable.enable({
+        enabled: false
+      });
+      crudBinding.value.actionbar.buttons.add.show = true;
+      crudBinding.value.actionbar.buttons.addRow.show = false;
+    }
+
+    return {
+      crudBinding,
+      crudRef,
+      showData,
+      enabledRowEdit,
+      enabledFreeEdit,
+      disabledEdit
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/merge/api.js

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

@@ -0,0 +1,129 @@
+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);
+  };
+
+  /**
+   * 列合并render
+   */
+  function colMergeRender({ index }) {
+    return {
+      props: {
+        colSpan: 5
+      }
+    };
+  }
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        slots: {
+          summary() {
+            return <div>总结栏</div>;
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "id",
+          type: "text"
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        },
+        cellMerge: {
+          title: "上下合并",
+          column: {
+            customRender: ({ text, index }, cellRender) => {
+              const obj = {
+                props: {}
+              };
+              if (index === 2) {
+                obj.children = text + "(我合并了)";
+                obj.props.rowSpan = 2;
+              } else if (index === 3) {
+                obj.props.rowSpan = 0;
+              } else {
+                obj.children = cellRender();
+              }
+              return obj;
+            }
+          }
+        },
+        colMerge1: {
+          title: "左右合并",
+          column: {
+            align: "center",
+            customRender({ text, index, record, dataIndex }, cellRender) {
+              if (index !== 4) {
+                return {
+                  children: cellRender()
+                };
+              }
+              return {
+                children: text + "(我合并了)",
+                props: {
+                  colSpan: 2
+                }
+              };
+            }
+          }
+        },
+        colMerge2: {
+          title: "左右合并",
+          column: {
+            customRender({ text, index, record, dataIndex }, cellRender) {
+              if (index !== 4) {
+                return {
+                  children: cellRender()
+                };
+              }
+              return {
+                props: {
+                  colSpan: 0
+                }
+              };
+            }
+          }
+        },
+        header1: {
+          title: "表头合并(我合并了)",
+          type: "text",
+          column: {
+            colSpan: 2
+          }
+        },
+        header2: {
+          title: "表头合并",
+          type: "text",
+          column: {
+            colSpan: 0
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/merge/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FeatureMerge",
+  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>

packages/ui/certd-client/src/views/crud/feature/merge/mock.js

@@ -0,0 +1,36 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureMerge",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1",
+    cellMerge: "test",
+    colMerge1: "111",
+    colMerge2: "222",
+
+    header1: "aaa",
+    header2: "bbb"
+  },
+  {
+    radio: "2",
+    cellMerge: "test",
+    colMerge1: "111",
+    colMerge2: "222",
+
+    header1: "aaa",
+    header2: "bbb"
+  },
+  {
+    radio: "0",
+    cellMerge: "test",
+    colMerge1: "111",
+    colMerge2: "222",
+    header1: "aaa",
+    header2: "bbb"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/feature/remove/api.js

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

@@ -0,0 +1,74 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+import { Modal } 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
+      },
+      table: {
+        remove: {
+          async confirmFn(context) {
+            await new Promise((resolve, reject) => {
+              Modal.confirm({
+                content: `确定删除记录(${context.row.id})吗?`,
+                onOk() {
+                  resolve();
+                },
+                onCancel() {
+                  reject();
+                }
+              });
+            });
+          },
+          confirmTitle: "请确认", // confirmFn配置为空时生效
+          confirmMessage: "确定删除此记录吗", // confirmFn配置为空时生效
+          showSuccessMessage: true, //是否显示删除成功记录
+          refreshTable: true, //删除后刷新表格
+          onCanceled({ row }) {
+            console.log(`记录${row.id}取消删除`);
+          },
+          onRemoved({ row }) {
+            console.log(`记录${row.id}已删除`);
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        text: {
+          title: "文本",
+          search: { show: true },
+          type: "text"
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/remove/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: "FeatureRemove",
+  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/feature/remove/mock.js

@@ -0,0 +1,25 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureRemove",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "测试文本1"
+  },
+  {
+    text: "测试文本2"
+  },
+  {
+    text: "测试文本3"
+  },
+  {
+    text: "测试文本4"
+  },
+  {
+    text: "测试文本5"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

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

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

@@ -0,0 +1,143 @@
+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
+      },
+      search: {
+        layout: "multi-line",
+        col: {
+          span: 4
+        },
+        options: {
+          labelCol: {
+            style: {
+              width: "100px"
+            }
+          }
+        }
+      },
+      actionbar: {
+        buttons: {
+          change: {
+            text: "切换模式",
+            click() {
+              if (expose.crudBinding.value.search.layout === "multi-line") {
+                expose.crudBinding.value.search.layout = "";
+              } else {
+                expose.crudBinding.value.search.layout = "multi-line";
+              }
+            }
+          },
+          search: {
+            text: "查询",
+            click() {
+              expose.getSearchRef().doSearch();
+            }
+          },
+          reset: {
+            text: "重置查询",
+            click() {
+              expose.getSearchRef().doReset();
+            }
+          }
+        }
+      },
+      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"
+          }),
+          column: {
+            filters: [
+              { text: "开", value: "1" },
+              { text: "关", value: "0" },
+              { text: "停", value: "2" }
+            ],
+            // specify the condition of filtering result
+            // here is that finding the name started with `value`
+            onFilter: (value, record) => {
+              return record.radio === value;
+            },
+            sorter: (a, b) => a.radio - b.radio,
+            sortDirections: ["descend"]
+          }
+        },
+        text1: {
+          type: "text",
+          title: "text1",
+          search: { show: true }
+        },
+        text2: {
+          type: "text",
+          title: "text2",
+          search: { show: true }
+        },
+        text3: {
+          type: "text",
+          title: "text3",
+          search: { show: true }
+        },
+        text4: {
+          type: "text",
+          title: "text4",
+          search: { show: true }
+        },
+        text5: {
+          type: "text",
+          title: "text5",
+          search: { show: true }
+        },
+        text6: {
+          type: "text",
+          title: "text6",
+          search: { show: true }
+        },
+        text7: {
+          type: "text",
+          title: "text7",
+          search: { show: true }
+        },
+        text8: {
+          type: "text",
+          title: "text8",
+          search: { show: true }
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,41 @@
+<template>
+  <fs-page>
+    <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";
+import { message } from "ant-design-vue";
+export default defineComponent({
+  name: "FeatureSearchMulti",
+  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/feature/search-multi/mock.js

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

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

@@ -0,0 +1,91 @@
+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
+      },
+      table: {
+        // 表头过滤改变事件
+        onFilterChange(e) {
+          console.log("onFilterChange", e);
+        }
+      },
+      search: {
+        initialForm: {
+          radio: "0"
+        },
+        buttons: {
+          custom: {
+            text: "自定义",
+            show: true,
+            order: 3,
+            icon: {
+              icon: "ant-design:search",
+              style: {
+                "font-size": "16px"
+              }
+            },
+            click() {
+              console.log("点击了自定义按钮");
+            }
+          }
+        }
+      },
+      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"
+          }),
+          column: {
+            filters: [
+              { text: "开", value: "1" },
+              { text: "关", value: "0" },
+              { text: "停", value: "2" }
+            ],
+            // specify the condition of filtering result
+            // here is that finding the name started with `value`
+            onFilter: (value, record) => {
+              return record.radio === value;
+            },
+            sorter: (a, b) => a.radio - b.radio,
+            sortDirections: ["descend"]
+          }
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,57 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-button class="ml-1" @click="getSearchFormData">getSearchFormData</a-button>
+        <a-button class="ml-1" @click="setSearchFormData">setSearchFormData</a-button>
+        <a-button class="ml-1" @click="clearSearchForm">clearSearchForm</a-button>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { useExpose } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+export default defineComponent({
+  name: "FeatureSearch",
+  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,
+      getSearchFormData() {
+        const form = expose.getSearchFormData();
+        message.info(`searchForm:${JSON.stringify(form)}`);
+      },
+      setSearchFormData() {
+        expose.setSearchFormData({ form: { radio: "1", test: 2 }, mergeForm: true });
+      },
+      clearSearchForm() {
+        expose.setSearchFormData({ form: {}, mergeForm: false });
+      }
+    };
+  }
+});
+</script>

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

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

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureSelection";
+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/feature/selection-radio/crud.jsx

@@ -0,0 +1,67 @@
+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);
+  };
+  const selectedRowKey = ref();
+  const onSelectChange = (changed) => {
+    console.log("selection", changed);
+    selectedRowKey.value = changed;
+  };
+  return {
+    selectedRowKey, //返回给index.vue去使用
+    crudOptions: {
+      table: {
+        rowKey: "id",
+        rowSelection: {
+          type: "radio",
+          selectedRowKeys: selectedRowKey,
+          onChange: onSelectChange,
+          getCheckboxProps: (record) => ({
+            disabled: record.id === 1 // 此处演示第一行禁用
+          })
+        }
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <span>单选示例</span>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { message, Modal } from "ant-design-vue";
+import { BatchDelete } from "./api";
+export default defineComponent({
+  name: "FeatureSelectionRadio",
+  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/feature/selection-radio/mock.js

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

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

@@ -0,0 +1,67 @@
+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);
+  };
+  const selectedRowKeys = ref([]);
+
+  const onSelectChange = (changed) => {
+    console.log("selection", changed);
+    selectedRowKeys.value = changed;
+  };
+  return {
+    selectedRowKeys, //返回给index.vue去使用
+    crudOptions: {
+      table: {
+        rowKey: "id",
+        rowSelection: {
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+          getCheckboxProps: (record) => ({
+            disabled: record.id === 1 // 此处演示第一行禁用
+          })
+        }
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/selection/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <span>示例说明：1、勾选记录，然后点击下方pagination左边的删除按钮进行批量删除。2、第一条记录配置为不可选</span>
+      </template>
+      <template #pagination-left>
+        <a-tooltip title="批量删除">
+          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
+        </a-tooltip>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { message, Modal } from "ant-design-vue";
+import { BatchDelete } from "./api";
+export default defineComponent({
+  name: "FeatureSelection",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const 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();
+    });
+
+    const handleBatchDelete = () => {
+      if (selectedRowKeys.value?.length > 0) {
+        Modal.confirm({
+          title: "确认",
+          content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
+          async onOk() {
+            await BatchDelete(selectedRowKeys.value);
+            message.info("删除成功");
+            expose.doRefresh();
+            selectedRowKeys.value = [];
+          }
+        });
+      } else {
+        message.error("请先勾选记录");
+      }
+    };
+
+    return {
+      crudBinding,
+      crudRef,
+      handleBatchDelete
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/selection/mock.js

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

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

@@ -0,0 +1,62 @@
+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: {
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        radio: {
+          title: "本地排序",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          }),
+          column: {
+            sorter(a, b) {
+              return a.radio < b.radio ? 1 : -1;
+            }
+          }
+        },
+        radio1: {
+          title: "服务端排序1",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          }),
+          column: {
+            sorter: true
+          }
+        },
+        radio2: {
+          title: "服务端排序2",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          }),
+          column: {
+            sorter: true
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/sortable/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FeatureSortable",
+  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
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/sortable/mock.js

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

packages/ui/certd-client/src/views/crud/feature/tree/api.js

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

@@ -0,0 +1,91 @@
+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);
+  };
+  const selectedRowKeys = ref([]);
+
+  const onSelectChange = (changed) => {
+    console.log("selection", changed);
+    selectedRowKeys.value = changed;
+  };
+  return {
+    selectedRowKeys, //返回给index.vue去使用
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        rowSelection: { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 100
+          },
+          form: {
+            show: false
+          }
+        },
+        time: {
+          title: "时间",
+          type: "datetime",
+          column: {
+            width: 180
+          }
+        },
+        province: {
+          title: "地区",
+          type: "dict-select",
+          search: { show: true },
+          form: {
+            component: { filterable: true, multiple: true }
+          },
+          dict: dict({
+            data: [
+              { value: "sz", label: "深圳" },
+              { value: "gz", label: "广州" },
+              { value: "wh", label: "武汉" },
+              { value: "sh", label: "上海" }
+            ]
+          }),
+          column: {
+            width: 300
+          }
+        },
+        amount: {
+          title: "金额(元)",
+          key: "amount"
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/tree/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #pagination-left>
+        <a-tooltip title="批量删除">
+          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
+        </a-tooltip>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { message, Modal } from "ant-design-vue";
+import { BatchDelete } from "./api";
+export default defineComponent({
+  name: "FeatureTree",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const 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();
+    });
+
+    const handleBatchDelete = () => {
+      if (selectedRowKeys.value?.length > 0) {
+        Modal.confirm({
+          title: "确认",
+          content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
+          async onOk() {
+            await BatchDelete(selectedRowKeys.value);
+            message.info("删除成功");
+            expose.doRefresh();
+            selectedRowKeys.value = [];
+          }
+        });
+      } else {
+        message.error("请先勾选记录");
+      }
+    };
+
+    return {
+      crudBinding,
+      crudRef,
+      handleBatchDelete
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/tree/mock.js

@@ -0,0 +1,85 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureTree",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1",
+    data: "我会懒加载",
+    time: "2020-01-01 11:11:11",
+    province: "wh",
+    amount: 100,
+    hasChildren: true,
+    loaded: false,
+    children: [
+      {
+        data: "懒加载的子数据",
+        province: ["sh", "gz"],
+        time: "2020-01-01 11:11:11",
+        amount: 100
+      },
+      {
+        data: "懒加载的子数据2",
+        province: ["sh", "sz"],
+        time: "2020-01-01 11:11:11",
+        amount: 100
+      }
+    ]
+  },
+  {
+    data: "data2",
+    province: "sh",
+    time: "2020-01-01 11:11:11",
+    amount: 100,
+    children: [
+      {
+        id: 999,
+        data: "data1_1",
+        time: "2020-01-01 11:11:11",
+        province: ["gz", "sz"], // 可以逗号分隔的字符串 'gz,sz'
+        amount: 100,
+        children: [
+          {
+            id: 1000,
+            data: "data1_1_1",
+            time: "2020-01-01 11:11:11",
+            province: ["sz", "gz"], // 可以逗号分隔的字符串 'gz,sz'
+            amount: 100
+          }
+        ]
+      },
+      {
+        id: 888,
+        data: "data1_2",
+        time: "2020-01-01 11:11:11",
+        province: "sh",
+        amount: 100,
+        children: [
+          {
+            id: 889,
+            data: "data1_2_1",
+            time: "2020-01-01 11:11:11",
+            province: "gz",
+            amount: 100
+          }
+        ]
+      }
+    ]
+  },
+  {
+    data: "data3",
+    province: ["sh", "gz"],
+    time: "2020-01-01 11:11:11",
+    amount: 100
+  },
+  {
+    data: "data4",
+    province: ["sh", "sz"],
+    time: "2020-01-01 11:11:11",
+    amount: 100
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/feature/value-builder/api.js

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

@@ -0,0 +1,54 @@
+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: {
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text"
+        },
+        roles: {
+          title: "角色",
+          search: { show: true },
+          type: "dict-select",
+          dict: dict({
+            value: "id",
+            label: "name",
+            data: [
+              { id: 1, name: "管理员" },
+              { id: 2, name: "普通用户" }
+            ]
+          }),
+          form: {
+            component: {
+              mode: "multiple"
+            },
+            valueBuilder({ form }) {
+              if (form.roles) {
+                form.roles = form.roles.map((item) => item.id);
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #cell_roles="scope">
+        <!-- 后台返回的列表数据已经包含了角色的名称，所以无需通过fs-values-format来从dict里获取label-->
+        <template v-if="scope.value">
+          <a-tag v-for="item of scope.value"> {{ item.name }}</a-tag>
+        </template>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FeatureValueBuilder",
+  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
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/value-builder/mock.js

@@ -0,0 +1,21 @@
+import mockUtil from "/src/mock/base";
+const options = {
+  name: "FeatureValueBuilder",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "user1",
+    roles: [
+      { id: 1, name: "管理员" },
+      { id: 2, name: "普通用户" }
+    ]
+  },
+  {
+    name: "user2",
+    roles: [{ id: 1, name: "管理员" }]
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;