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

perf: export 功能
perf: export 功能
chore: 自定义组件onChange
perf: naiveui 自定义组件支持change validation
chore:
perf: 自定义组件支持触发validation
chore:

packages/ui/certd-client/src/App.vue

@@ -14,6 +14,7 @@ import { useSettingStore } from "/@/store/modules/settings";
 import "dayjs/locale/zh-cn";
 import "dayjs/locale/en";
 import dayjs from "dayjs";
+import { useAsync } from "@fast-crud/fast-crud/src/use/use-async";
 export default {
   name: "App",
   setup() {
@@ -47,6 +48,9 @@ export default {
     const settingStore = useSettingStore();
     settingStore.init();
 
+    const { registerAsyncLib } = useAsync();
+    registerAsyncLib("FsExportUtil");
+
     return {
       routerEnabled,
       locale

packages/ui/certd-client/src/main.ts

@@ -3,7 +3,6 @@ import App from "./App.vue";
 import router from "./router";
 import Antd from "ant-design-vue";
 import "ant-design-vue/dist/antd.less";
-// import "virtual:windi.css";
 import "./style/common.less";
 
 import i18n from "./i18n";

packages/ui/certd-client/src/plugin/fast-crud/index.tsx

@@ -1,19 +1,22 @@
 import { request, requestForMock } from "/src/api/service";
 // import "/src/mock";
-import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes } from "@fast-crud/fast-crud";
+import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes, useUi } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
-import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader } from "@fast-crud/fast-extends";
+import { CsvColumn, ExportUtil, FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader, FsExtendsExport } from "@fast-crud/fast-extends";
 import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv";
 import _ from "lodash-es";
 import { useCrudPermission } from "../permission";
 import { GetSignedUrl } from "/@/views/crud/component/uploader/s3/api";
 import { notification } from "ant-design-vue";
+import { useAsync } from "@fast-crud/fast-crud/src/use/use-async";
+import { useI18n } from "vue-i18n";
 
 function install(app: any, options: any = {}) {
   app.use(UiAntdv);
   //设置日志级别
   setLogger({ level: "debug" });
+  const { t } = useI18n();
   app.use(FastCrud, {
     i18n: options.i18n,
     async dictRequest({ url }: any) {
@@ -29,6 +32,7 @@ function install(app: any, options: any = {}) {
      */
     commonOptions(props: UseCrudProps): CrudOptions {
       const crudBinding = props.crudExpose?.crudBinding;
+      const { ui } = useUi();
       const opts: CrudOptions = {
         table: {
           size: "small",
@@ -49,6 +53,41 @@ function install(app: any, options: any = {}) {
             }
           }
         },
+        toolbar: {
+          buttons: {
+            export: {
+              show: true,
+              type: "primary",
+              icon: ui.icons.export,
+              order: 4,
+              title: t("fs.toolbar.export.title"), // '导出',
+              circle: true,
+              click: async () => {
+                const columns: CsvColumn[] = [];
+                _.each(crudBinding.value.table.columnsMap, (col: ColumnCompositionProps) => {
+                  if (col.exportable !== false && col.key !== "_index") {
+                    columns.push({
+                      prop: col.key,
+                      label: col.title
+                    });
+                  }
+                });
+
+                const { loadAsyncLib } = useAsync();
+                //加载异步组件，不影响首页加载速度
+                const exportUtil: ExportUtil = await loadAsyncLib({
+                  name: "FsExportUtil"
+                });
+                await exportUtil.csv({
+                  columns,
+                  data: crudBinding.value.data,
+                  title: "table",
+                  noHeader: false
+                });
+              }
+            }
+          }
+        },
         rowHandle: {
           buttons: {
             view: { type: "link", text: null, icon: "ion:eye-outline" },
@@ -258,6 +297,7 @@ function install(app: any, options: any = {}) {
   app.use(FsExtendsJson);
   app.use(FsExtendsTime);
   app.use(FsExtendsCopyable);
+  app.use(FsExtendsExport);
 
   // 此处演示自定义字段类型
   const { addTypes } = useTypes();

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

@@ -84,13 +84,26 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
             // show: compute(({ form }) => {
             //   return form.change === "wang";
             // }),
-            rules: [{ required: true, message: "此项必填" }],
+            rules: [
+              { required: true, message: "此项必填" },
+              {
+                validator: async (rule, value) => {
+                  if (value.trim() === "<p><br></p>") {
+                    throw new Error("内容不能为空");
+                  }
+                }
+              }
+            ],
             component: {
               disabled: compute(({ form }) => {
                 return form.disabled;
               }),
               id: "1", // 当同一个页面有多个editor时，需要配置不同的id
-              config: {},
+              toolbarConfig: {},
+              editorConfig: {},
+              onOnChange(value: any) {
+                console.log("value changed", value);
+              },
               uploader: {
                 type: "form",
                 buildUrl(res: any) {

packages/ui/certd-client/src/views/crud/component/select/crud.tsx

@@ -264,7 +264,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
             title: "多选本地",
             component: {
               mode: "multiple"
-            }
+            },
+            rules: [{ required: true, message: "请选择一个选项" }]
           },
           dict: dict({
             data: [

packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx

@@ -1,6 +1,6 @@
 import * as api from "./api";
-import { AllUploadSuccessValidator } from "@fast-crud/fast-extends";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { createUploaderRules } from "@fast-crud/fast-extends";
 
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -79,6 +79,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
                 type: "form"
               }
             },
+            rules: createUploaderRules([{ required: true, message: "此项必传", trigger: "change" }]),
             helper: "最大可上传2个文件"
           },
           column: {
@@ -248,14 +249,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           title: "校验",
           type: "file-uploader",
           form: {
-            rules: [
-              { required: true, message: "此项必传", trigger: "input" },
-              {
-                validator: AllUploadSuccessValidator(), //如果要自定义校验规则则需要手动配置这个
-                message: "还有文件正在上传，请稍候",
-                trigger: "input"
-              }
-            ],
+            // 使用createUploaderRules创建校验规则,会附带文件还未上传完成的校验
+            rules: createUploaderRules([{ required: true, message: "此项必传", trigger: "change" }]),
             helper: "大小不能超过50M，文件未上传完成之前，阻止提交",
             component: {
               uploader: {

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

@@ -20,6 +20,7 @@ export default defineComponent({
     const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     onMounted(() => {
+      //启用行编辑模式
       crudExpose.editable.enable({ mode: "row" });
     });