From e11b7802c2253f30b55e73eb7f1c88e19b43c269 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot Date: Fri, 30 Jun 2023 19:24:21 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B1:=20[client]=20sync=20upgrade=20wit?= =?UTF-8?q?h=208=20commits=20[trident-sync]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit perf: export 功能 perf: export 功能 chore: 自定义组件onChange perf: naiveui 自定义组件支持change validation chore: perf: 自定义组件支持触发validation chore: --- packages/ui/certd-client/src/App.vue | 4 ++ packages/ui/certd-client/src/main.ts | 1 - .../src/plugin/fast-crud/index.tsx | 44 ++++++++++++++++++- .../src/views/crud/component/editor/crud.tsx | 17 ++++++- .../src/views/crud/component/select/crud.tsx | 3 +- .../crud/component/uploader/form/crud.tsx | 13 ++---- .../crud/feature/local-v-model/local.vue | 1 + 7 files changed, 68 insertions(+), 15 deletions(-) diff --git a/packages/ui/certd-client/src/App.vue b/packages/ui/certd-client/src/App.vue index f35b60cb..0c9c7286 100644 --- a/packages/ui/certd-client/src/App.vue +++ b/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 diff --git a/packages/ui/certd-client/src/main.ts b/packages/ui/certd-client/src/main.ts index 1ccf2213..71e1ce14 100644 --- a/packages/ui/certd-client/src/main.ts +++ b/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"; diff --git a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx index db2ab2da..4f6f58cb 100644 --- a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx +++ b/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(); diff --git a/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx b/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx index 3bf28028..3fcd7e02 100644 --- a/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx +++ b/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() === "


") { + 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) { diff --git a/packages/ui/certd-client/src/views/crud/component/select/crud.tsx b/packages/ui/certd-client/src/views/crud/component/select/crud.tsx index 9ff36cd5..c3d6bdcb 100644 --- a/packages/ui/certd-client/src/views/crud/component/select/crud.tsx +++ b/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: [ diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx index b637b211..391a789b 100644 --- a/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx +++ b/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 => { @@ -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: { diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue b/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue index 4e0d2045..405e2959 100644 --- a/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue +++ b/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" }); });