From 336faa46b229d27bcfc45c09bcad79c565192645 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot Date: Fri, 10 Mar 2023 19:24:05 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B1:=20[client]=20sync=20upgrade=20wit?= =?UTF-8?q?h=204=20commits=20[trident-sync]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit perf: upload sdk换成aws-s3 feat: upload 支持s3 minio https://github.com/fast-crud/fast-crud/issues/149 feat: fs-form-wrapper支持多实例 https://github.com/fast-crud/fast-crud/issues/150 --- packages/ui/certd-client/package.json | 1 + packages/ui/certd-client/src/App.vue | 4 +- .../src/plugin/fast-crud/index.tsx | 22 +++ .../src/router/source/modules/crud.ts | 6 + .../ui/certd-client/src/style/common.less | 8 ++ .../crud/basis/columns-set/{api.js => api.ts} | 12 +- .../basis/columns-set/{crud.jsx => crud.tsx} | 15 +- .../views/crud/basis/columns-set/index.vue | 25 +--- .../basis/columns-set/{mock.js => mock.ts} | 0 .../crud/component/uploader/qiniu/index.vue | 2 +- .../views/crud/component/uploader/s3/api.ts | 53 +++++++ .../views/crud/component/uploader/s3/crud.tsx | 86 +++++++++++ .../crud/component/uploader/s3/index.vue | 36 +++++ .../views/crud/component/uploader/s3/mock.ts | 23 +++ .../crud/component/uploader/s3/s3-server.ts | 29 ++++ .../crud/form/custom-form/{api.js => api.ts} | 8 +- .../src/views/crud/form/custom-form/crud.jsx | 40 ------ .../src/views/crud/form/custom-form/crud.tsx | 134 ++++++++++++++++++ .../src/views/crud/form/custom-form/index.vue | 84 +++-------- .../form/custom-form/{mock.js => mock.ts} | 0 .../src/views/crud/form/independent/crud.jsx | 9 ++ .../src/views/crud/form/independent/index.vue | 106 ++++++++------ 22 files changed, 514 insertions(+), 189 deletions(-) rename packages/ui/certd-client/src/views/crud/basis/columns-set/{api.js => api.ts} (76%) rename packages/ui/certd-client/src/views/crud/basis/columns-set/{crud.jsx => crud.tsx} (70%) rename packages/ui/certd-client/src/views/crud/basis/columns-set/{mock.js => mock.ts} (100%) create mode 100644 packages/ui/certd-client/src/views/crud/component/uploader/s3/api.ts create mode 100644 packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx create mode 100644 packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue create mode 100644 packages/ui/certd-client/src/views/crud/component/uploader/s3/mock.ts create mode 100644 packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts rename packages/ui/certd-client/src/views/crud/form/custom-form/{api.js => api.ts} (81%) delete mode 100644 packages/ui/certd-client/src/views/crud/form/custom-form/crud.jsx create mode 100644 packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx rename packages/ui/certd-client/src/views/crud/form/custom-form/{mock.js => mock.ts} (100%) diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json index de7cc897..5a292c45 100644 --- a/packages/ui/certd-client/package.json +++ b/packages/ui/certd-client/package.json @@ -22,6 +22,7 @@ "dependencies": { "@ant-design/colors": "^7.0.0", "@ant-design/icons-vue": "^6.1.0", + "@aws-sdk/s3-request-presigner": "^3.288.0", "@fast-crud/fast-crud": "workspace:^1.9.2", "@fast-crud/fast-extends": "workspace:^1.9.2", "@fast-crud/ui-antdv": "workspace:^1.9.2", diff --git a/packages/ui/certd-client/src/App.vue b/packages/ui/certd-client/src/App.vue index 414d5081..f6fbad39 100644 --- a/packages/ui/certd-client/src/App.vue +++ b/packages/ui/certd-client/src/App.vue @@ -1,6 +1,8 @@ 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 60a26661..bf899ee0 100644 --- a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx +++ b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx @@ -169,6 +169,28 @@ function install(app: any, options: any = {}) { }, domain: "http://d2p.file.handsfree.work/" }, + s3: { + bucket: "fast-crud", + sdkOpts: { + s3ForcePathStyle: true, + signatureVersion: "v4", + region: "us-east-1", + forcePathStyle: true, + endpoint: "https://play.min.io", + credentials: { + accessKeyId: "Q3AM3UQ867SPQQA43P2F", //访问登录名 + secretAccessKey: "zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG" //访问密码 + } + }, + custom: { + // buildKey，获取授权等接口中将会传入 + }, + successHandle(ret: any) { + // 上传完成后可以在此处处理结果，修改url什么的 + console.log("success handle:", ret); + return ret; + } + }, form: { action: "http://www.docmirror.cn:7070/api/upload/form/upload", name: "file", diff --git a/packages/ui/certd-client/src/router/source/modules/crud.ts b/packages/ui/certd-client/src/router/source/modules/crud.ts index 2c71d90f..8df45aa9 100644 --- a/packages/ui/certd-client/src/router/source/modules/crud.ts +++ b/packages/ui/certd-client/src/router/source/modules/crud.ts @@ -255,6 +255,12 @@ export const crudResources = [ path: "/crud/component/uploader/qiniu", component: "/crud/component/uploader/qiniu/index.vue" }, + { + title: "s3上传", + name: "ComponentUploaderS3", + path: "/crud/component/uploader/s3", + component: "/crud/component/uploader/s3/index.vue" + }, { title: "富文本编辑器", name: "ComponentEditor", diff --git a/packages/ui/certd-client/src/style/common.less b/packages/ui/certd-client/src/style/common.less index b814b5c8..d89b687f 100644 --- a/packages/ui/certd-client/src/style/common.less +++ b/packages/ui/certd-client/src/style/common.less @@ -52,3 +52,11 @@ h1, h2, h3, h4, h5, h6 { .ml-5{ margin-left:5px; } + +.mt-10{ + margin-top:10px; +} + +.m-10{ + margin:10px; +} diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/api.js b/packages/ui/certd-client/src/views/crud/basis/columns-set/api.ts similarity index 76% rename from packages/ui/certd-client/src/views/crud/basis/columns-set/api.js rename to packages/ui/certd-client/src/views/crud/basis/columns-set/api.ts index 2d20318f..ea92a29c 100644 --- a/packages/ui/certd-client/src/views/crud/basis/columns-set/api.js +++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/api.ts @@ -1,7 +1,7 @@ import { requestForMock } from "/src/api/service"; const request = requestForMock; const apiPrefix = "/mock/BasisColumnsSet"; -export function GetList(query) { +export function GetList(query: any) { return request({ url: apiPrefix + "/page", method: "get", @@ -9,7 +9,7 @@ export function GetList(query) { }); } -export function AddObj(obj) { +export function AddObj(obj: any) { return request({ url: apiPrefix + "/add", method: "post", @@ -17,7 +17,7 @@ export function AddObj(obj) { }); } -export function UpdateObj(obj) { +export function UpdateObj(obj: any) { return request({ url: apiPrefix + "/update", method: "post", @@ -25,7 +25,7 @@ export function UpdateObj(obj) { }); } -export function DelObj(id) { +export function DelObj(id: any) { return request({ url: apiPrefix + "/delete", method: "post", @@ -33,7 +33,7 @@ export function DelObj(id) { }); } -export function GetObj(id) { +export function GetObj(id: any) { return request({ url: apiPrefix + "/info", method: "get", @@ -41,7 +41,7 @@ export function GetObj(id) { }); } -export function BatchDelete(ids) { +export function BatchDelete(ids: any) { return request({ url: apiPrefix + "/batchDelete", method: "post", diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx similarity index 70% rename from packages/ui/certd-client/src/views/crud/basis/columns-set/crud.jsx rename to packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx index 559e49e3..14015020 100644 --- a/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.jsx +++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx @@ -1,19 +1,18 @@ -import * as api from "./api"; -import { dict } from "@fast-crud/fast-crud"; -import { ref } from "vue"; -export default function ({ expose }) { - const pageRequest = async (query) => { +import * as api from "./api.js"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsRet { + const pageRequest = async (query: UserPageQuery): Promise => { return await api.GetList(query); }; - const editRequest = async ({ form, row }) => { + const editRequest = async ({ form, row }: EditReq) => { form.id = row.id; return await api.UpdateObj(form); }; - const delRequest = async ({ row }) => { + const delRequest = async ({ row }: DelReq) => { return await api.DelObj(row.id); }; - const addRequest = async ({ form }) => { + const addRequest = async ({ form }: AddReq) => { return await api.AddObj(form); }; return { diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue b/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue index d31ffef3..2a53576f 100644 --- a/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue +++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue @@ -16,30 +16,19 @@ diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/mock.ts b/packages/ui/certd-client/src/views/crud/component/uploader/s3/mock.ts new file mode 100644 index 00000000..e9585bc1 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/mock.ts @@ -0,0 +1,23 @@ +// @ts-ignore +import mockUtil from "/src/mock/base"; +const options: any = { + name: "S3Uploader", + idGenerator: 0 +}; +const list = [ + { + avatar: "http://greper.handsfree.work/extends/avatar.jpg", + file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"], + image: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"], + image2: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"] + }, + { + radio: "2" + }, + { + radio: "0" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts b/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts new file mode 100644 index 00000000..faa6f708 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts @@ -0,0 +1,29 @@ +import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3"; +import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; + +export async function generateUrls(bucket: string, key: string) { + const client = new S3Client({ + s3ForcePathStyle: true, + signatureVersion: "v4", + region: "us-east-1", + forcePathStyle: true, + endpoint: "https://play.min.io", + credentials: { + accessKeyId: "Q3AM3UQ867SPQQA43P2F", //访问登录名 + secretAccessKey: "zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG" //访问密码 + } + }); + const getParams = { + Bucket: bucket, + Key: key + }; + let url; + const getCmd = new GetObjectCommand(getParams); + try { + url = await getSignedUrl(client, getCmd); + } catch (err) { + console.log("Error getting signed URL ", err); + } + + return url; +} diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/api.js b/packages/ui/certd-client/src/views/crud/form/custom-form/api.ts similarity index 81% rename from packages/ui/certd-client/src/views/crud/form/custom-form/api.js rename to packages/ui/certd-client/src/views/crud/form/custom-form/api.ts index 1cab3602..a8a96184 100644 --- a/packages/ui/certd-client/src/views/crud/form/custom-form/api.js +++ b/packages/ui/certd-client/src/views/crud/form/custom-form/api.ts @@ -1,7 +1,7 @@ import { requestForMock } from "/src/api/service"; const request = requestForMock; const apiPrefix = "/mock/FormCustomForm"; -export function GetList(query) { +export function GetList(query: any) { return request({ url: apiPrefix + "/page", method: "get", @@ -9,7 +9,7 @@ export function GetList(query) { }); } -export function AddObj(obj) { +export function AddObj(obj: any) { return request({ url: apiPrefix + "/add", method: "post", @@ -17,7 +17,7 @@ export function AddObj(obj) { }); } -export function UpdateObj(obj) { +export function UpdateObj(obj: any) { return request({ url: apiPrefix + "/update", method: "post", @@ -25,7 +25,7 @@ export function UpdateObj(obj) { }); } -export function DelObj(id) { +export function DelObj(id: any) { return request({ url: apiPrefix + "/delete", method: "post", diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.jsx b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.jsx deleted file mode 100644 index 875a8063..00000000 --- a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as api from "./api"; -import { dict } from "@fast-crud/fast-crud"; -export default function ({ expose }) { - const { getFormRef, getFormData } = 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: { - title: { - title: "商品标题", - type: "text" - }, - code: { - title: "商品代码", - search: { show: true }, - type: "text" - } - } - } - }; -} diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx new file mode 100644 index 00000000..1858cda4 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx @@ -0,0 +1,134 @@ +import * as api from "./api.js"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, CrudExpose, CrudOptions, DelReq, dict, EditReq, useColumns, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { message } from "ant-design-vue"; +import { useFormWrapper } from "@fast-crud/fast-crud/src"; + +function useCustomFormWrapperDemo(crudExpose: CrudExpose) { + let index = 0; + // 自定义表单配置 + const { buildFormOptions } = useColumns(); + const customOptions: CrudOptions = { + columns: { + index: { + title: "index", + type: "text" + }, + customField: { + title: "新表单字段", + type: "text" + }, + groupField: { + title: "分组字段", + type: "text" + } + }, + form: { + wrapper: { + title: "自定义表单", + buttons: { + open: { + text: "打开新对话框", + order: -1, + click() { + openCustomForm(); + } + } + } + }, + group: { + groups: { + testGroupName: { + header: "分组测试", + columns: ["groupField"] + } + } + }, + doSubmit({ form }) { + console.log("form submit:", form); + message.info("自定义表单提交:" + JSON.stringify(form)); + message.warn("抛出异常可以阻止表单关闭"); + throw new Error("抛出异常可以阻止表单关闭"); + } + } + }; + + const { openDialog } = useFormWrapper(); + //使用crudOptions结构来构建自定义表单配置 + //打开自定义表单 + const openCustomForm = async () => { + const formOptions = buildFormOptions(customOptions); + index++; + formOptions.initialForm = { index }; + formOptions.newInstance = true; //新实例打开 + const dialogRef = await openDialog(formOptions); + console.log("openCustomFormRef", dialogRef); + }; + + const openCustomFormByExpose = async () => { + const formOptions = buildFormOptions(customOptions); + index++; + formOptions.initialForm = { index }; + formOptions.newInstance = true; //新实例打开 + const dialogRef = await crudExpose.openDialog(formOptions); + console.log("openCustomFormByExposeRef", dialogRef); + }; + + return { + openCustomForm, + openCustomFormByExpose + }; +} +export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { + const { openCustomForm, openCustomFormByExpose } = useCustomFormWrapperDemo(crudExpose); + const pageRequest = async (query: UserPageQuery): Promise => { + return await api.GetList(query); + }; + const editRequest = async ({ form, row }: EditReq) => { + form.id = row.id; + return await api.UpdateObj(form); + }; + const delRequest = async ({ row }: DelReq) => { + return await api.DelObj(row.id); + }; + + const addRequest = async ({ form }: AddReq) => { + return await api.AddObj(form); + }; + return { + crudOptions: { + actionbar: { + buttons: { + custom: { + text: "打开自定义对话框", + async click() { + await openCustomForm(); + } + }, + byExpose: { + text: "byExpose.openDialog", + async click() { + await openCustomFormByExpose(); + } + } + } + }, + request: { + pageRequest, + addRequest, + editRequest, + delRequest + }, + columns: { + title: { + title: "商品标题", + type: "text" + }, + code: { + title: "商品代码", + search: { show: true }, + type: "text" + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue b/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue index faa3c2be..8d77f3e9 100644 --- a/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue +++ b/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue @@ -1,85 +1,33 @@ -