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

Update README.md

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

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

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

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

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

@@ -0,0 +1,43 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">大量数据</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+export default defineComponent({
+  name: "AdvancedBigData",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, output } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      ...output
+    };
+  }
+});
+</script>

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

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

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

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

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

@@ -0,0 +1,29 @@
+export const crudOptions = `
+ ({expose,dict}) => {
+  return {
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+  }
+}
+
+
+`;

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

@@ -0,0 +1,27 @@
+import * as api from "./api";
+export default function ({ expose }) {
+  const pageRequest = async (query) => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }) => {
+    return await api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      }
+    }
+  };
+}

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

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+import * as api from "./api";
+export default function ({ expose }) {
+  const pageRequest = async (query) => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }) => {
+    return await api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text", //虽然不写也能正确显示组件，但不建议省略它
+          search: { show: true },
+          form: {
+            component: {
+              maxlength: 20
+            }
+          }
+        },
+        search: {
+          title: "搜索",
+          type: "text",
+          form: {
+            component: {
+              addonAfter: "后置",
+              suffix: "suffix",
+              children: {
+                addonBefore() {
+                  return <SearchOutlined />;
+                }
+              }
+            }
+          }
+        },
+        password: {
+          title: "密码",
+          type: "password",
+          column: {
+            //一般密码不显示在列里面
+            show: false
+          }
+        },
+        intro: {
+          title: "简介",
+          type: "textarea",
+          form: {
+            component: { showWordLimit: true, maxlength: 200 }
+          },
+          column: {
+            ellipsis: true
+          }
+        },
+        render: {
+          title: "复杂输入(render)",
+          form: {
+            title: "复杂输入",
+            component: {
+              render(context) {
+                console.log("context scope", context);
+                return (
+                  <a-input-group compact>
+                    <a-input
+                      placeholder={"render1 input"}
+                      style="width: 50%"
+                      v-model={[context.form.render, "value"]}
+                    />
+                    <a-input
+                      placeholder={"render2 input"}
+                      style="width: 50%"
+                      v-model={[context.form.render2, "value"]}
+                    />
+                  </a-input-group>
+                );
+              }
+            }
+          }
+        },
+        render2: {
+          title: "我的值是由复杂输入列输入的",
+          column: {
+            width: "300px"
+          },
+          form: {
+            show: false
+          }
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,40 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { useExpose } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "fs-in-dialog",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

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

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

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

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

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

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

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

@@ -0,0 +1,118 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ expose }) {
+  const pageRequest = async (query) => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      rowHandle: {
+        align: "center"
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        province: {
+          title: "省",
+          type: "dict-select",
+          search: {
+            show: true
+          },
+          dict: dict({
+            url: "/mock/linkage/province",
+            value: "id",
+            cache: true
+          }),
+          form: {
+            valueChange({ form, value, getComponentRef }) {
+              form.city = undefined; // 将“city”的值置空
+              form.county = undefined; // 将“county”的值置空
+              if (value) {
+                getComponentRef("city").reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典
+              }
+            }
+          }
+        },
+        city: {
+          title: "市",
+          type: "dict-select",
+          search: {
+            show: true
+          },
+          dict: dict({
+            cache: true,
+            prototype: true,
+            // url() 改成构建url，返回一个url
+            url({ form }) {
+              if (form && form.province != null) {
+                // 本数据字典的url是通过前一个select的选项决定的
+                return `/mock/linkage/city?province=${form.province}`;
+              }
+              return undefined; // 返回undefined 将不加载字典
+            },
+            value: "id"
+          }),
+          form: {
+            // 注释同上
+            valueChange({ value, form, getComponentRef }) {
+              if (value) {
+                form.county = undefined; // 将county的value置空
+                const countySelect = getComponentRef("county");
+                if (form && form.province && form.city) {
+                  countySelect.reloadDict(); // 重新加载字典项
+                } else {
+                  countySelect.clearDict(); // 清空选项
+                }
+              }
+            }
+          }
+        },
+        county: {
+          title: "区",
+          type: "dict-select",
+          search: {
+            show: true
+          },
+          dict: dict({
+            value: "id",
+            cache: true,
+            prototype: true,
+            url({ form }) {
+              if (form && form.province != null && form.city != null) {
+                return `/mock/linkage/county?province=${form.province} &city=${form.city}`;
+              }
+              return undefined;
+            }
+          })
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,38 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding" />
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { useExpose } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "FormLinkage",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,56 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+export default function ({ expose }) {
+  const editRequest = async ({ form, row }) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }) => {
+    return await api.DelObj(row.id);
+  };
+  const addRequest = async ({ form }) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      pagination: {
+        showSizeChanger: false, // antdv
+        showQuickJumper: false // antdv
+      },
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      toolbar: {
+        compact: false
+      },
+      rowHandle: {
+        width: "230px"
+      },
+      table: {},
+      columns: {
+        gradeId: {
+          title: "年级Id",
+          search: { show: true },
+          type: "number",
+          column: {
+            width: 80,
+            align: "center",
+            sortable: true
+          }
+        },
+        class: {
+          title: "班级",
+          search: { show: false },
+          type: "text",
+          column: {
+            sortable: true
+          }
+        }
+      }
+    }
+  };
+}

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

@@ -0,0 +1,43 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding">
+    <template #actionbar-right>
+      <a-alert type="warning" class="ml-1" message="左侧表格点击行可以触发这里的查询" />
+    </template>
+  </fs-crud>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+export default defineComponent({
+  name: "AsideTable",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions, selectedIds } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      setSearchFormData: expose.setSearchFormData,
+      doRefresh: expose.doRefresh
+    };
+  }
+});
+</script>

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

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

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

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

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

@@ -0,0 +1,59 @@
+<template>
+  <a-row class="demo-nest" :gutter="0">
+    <a-col :span="12">
+      <fs-crud ref="crudRef" v-bind="crudBinding">
+        <template #actionbar-right>
+          <a-alert type="warning" class="ml-1" message="<--对话框内嵌套子表格" />
+        </template>
+      </fs-crud>
+    </a-col>
+    <a-col :span="12">
+      <aside-table ref="asideTableRef" />
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import AsideTable from "./aside-table/index.vue";
+export default defineComponent({
+  name: "FeatureNest",
+  // eslint-disable-next-line vue/no-unused-components
+  components: { AsideTable },
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const asideTableRef = ref();
+    const { crudOptions } = createCrudOptions({ expose, asideTableRef });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      asideTableRef
+    };
+  }
+});
+</script>
+<style lang="less">
+.demo-nest {
+  height: 100%;
+  width: 100%;
+}
+</style>

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

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

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

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

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

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

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

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

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

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