diff --git a/packages/ui/certd-client/.env b/packages/ui/certd-client/.env index c0541f2a..7203985e 100644 --- a/packages/ui/certd-client/.env +++ b/packages/ui/certd-client/.env @@ -2,3 +2,7 @@ VITE_APP_API=/api #登录与权限关闭 VITE_APP_PM_ENABLED=true VITE_APP_TITLE=Certd +VITE_APP_SLOGAN=让你的证书永不过期 +VITE_APP_COPYRIGHT=Copyright © 2021-2024 handsfree.work +VITE_APP_LOGO_PATH=./images/logo/logo.svg +VITE_APP_PROJECT_PATH=https://github.com/certd/certd diff --git a/packages/ui/certd-client/.github/workflows/sync-to-gitee.yml b/packages/ui/certd-client/.github/workflows/sync-to-gitee.yml index 79534428..824ff494 100644 --- a/packages/ui/certd-client/.github/workflows/sync-to-gitee.yml +++ b/packages/ui/certd-client/.github/workflows/sync-to-gitee.yml @@ -30,6 +30,8 @@ jobs: - name: push to gitee # 4. 执行同步 run: | - git remote add upstream https://gitee.com/fast-crud/fs-admin-antdv + git remote add upstream https://gitee.com/fast-crud/fs-admin-antdv4 git push --set-upstream upstream main + + diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json index 40a84f5a..f1857ae6 100644 --- a/packages/ui/certd-client/package.json +++ b/packages/ui/certd-client/package.json @@ -9,7 +9,7 @@ "debug": "vite --mode debug --open", "debug:pm": "vite --mode debugpm", "debug:force": "vite --force --mode debug", - "build": "vite build ", + "build": " vite build ", "serve": "vite preview", "preview": "vite preview", "pretty-quick": "pretty-quick", @@ -22,98 +22,100 @@ "author": "Greper", "license": "AGPL-3.0", "dependencies": { - "@ant-design/colors": "^7.0.0", - "@ant-design/icons-vue": "^6.1.0", - "@aws-sdk/client-s3": "^3.383.0", - "@aws-sdk/s3-request-presigner": "^3.383.0", + "@ant-design/colors": "^7.0.2", + "@ant-design/icons-vue": "^7.0.1", + "@aws-sdk/client-s3": "^3.535.0", + "@aws-sdk/s3-request-presigner": "^3.535.0", "@fast-crud/fast-crud": "^1.21.0", "@fast-crud/fast-extends": "^1.21.0", "@fast-crud/ui-antdv4": "^1.21.0", "@fast-crud/ui-interface": "^1.21.0", - "@iconify/iconify": "^3.1.1", "@iconify/vue": "^4.1.1", "@soerenmartius/vue3-clipboard": "^0.1.2", "ant-design-vue": "^4.1.2", - "axios": "^1.3.4", - "axios-mock-adapter": "^1.21.2", + "axios": "^1.6.8", + "axios-mock-adapter": "^1.22.0", "base64-js": "^1.5.1", "better-scroll": "^2.5.1", - "china-division": "^2.6.1", - "core-js": "^3.32.0", - "cos-js-sdk-v5": "^1.4.19", - "cropperjs": "^1.5.13", - "dayjs": "^1.11.9", - "highlight.js": "^11.8.0", + "china-division": "^2.7.0", + "core-js": "^3.36.0", + "cos-js-sdk-v5": "^1.7.0", + "cropperjs": "^1.6.1", + "dayjs": "^1.11.10", + "highlight.js": "^11.9.0", "humanize-duration": "^3.27.3", "lodash-es": "^4.17.21", "mitt": "^3.0.1", "nanoid": "^4.0.0", "nprogress": "^0.2.0", "object-assign": "^4.1.1", - "pinia": "2.1.6", - "qiniu-js": "^3.4.1", - "sortablejs": "^1.15.0", - "vue": "^3.4.0", + "pinia": "2.1.7", + "qiniu-js": "^3.4.2", + "sortablejs": "^1.15.2", + "vue": "^3.4.21", "vue-cropperjs": "^5.0.0", - "vue-i18n": "^9.2.2", - "vue-router": "^4.2.4", + "vue-i18n": "^9.10.2", + "vue-router": "^4.3.0", "vuedraggable": "^2.24.3" }, "devDependencies": { "@certd/pipeline": "^1.20.10", - "@rollup/plugin-commonjs": "^25.0.3", - "@rollup/plugin-node-resolve": "^15.1.0", - "@types/chai": "^4.3.5", - "@types/lodash-es": "^4.17.8", - "@types/mocha": "^10.0.1", - "@types/node": "^20.4.7", - "@types/nprogress": "^0.2.0", - "@typescript-eslint/eslint-plugin": "^6.2.1", - "@typescript-eslint/parser": "^6.2.1", - "@vitejs/plugin-legacy": "^4.1.1", - "@vitejs/plugin-vue": "^4.2.3", - "@vitejs/plugin-vue-jsx": "^3.0.1", - "@vue/compiler-sfc": "^3.3.4", - "@vue/eslint-config-typescript": "^11.0.3", - "@vue/test-utils": "^2.4.1", - "autoprefixer": "^10.4.14", + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-node-resolve": "^15.2.3", + "@types/chai": "^4.3.12", + "@types/lodash-es": "^4.17.12", + "@types/mocha": "^10.0.6", + "@types/node": "^20.11.28", + "@types/nprogress": "^0.2.3", + "@typescript-eslint/eslint-plugin": "^7.2.0", + "@typescript-eslint/parser": "^7.2.0", + "@vitejs/plugin-legacy": "^5.3.2", + "@vitejs/plugin-vue": "^5.0.4", + "@vitejs/plugin-vue-jsx": "^3.1.0", + "@vue/compiler-sfc": "^3.4.21", + "@vue/eslint-config-typescript": "^13.0.0", + "@vue/test-utils": "^2.4.5", + "autoprefixer": "^10.4.18", "caller-path": "^4.0.0", - "chai": "^4.3.7", - "dependency-cruiser": "^13.1.1", + "chai": "^5.1.0", + "dependency-cruiser": "^16.2.3", "dot": "^1.1.3", - "eslint": "8.46.0", - "eslint-config-prettier": "^8.10.0", - "eslint-plugin-import": "^2.28.0", + "eslint": "8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-import": "^2.29.1", "eslint-plugin-node": "^11.1.0", - "eslint-plugin-prettier": "^5.0.0", + "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-promise": "^6.1.1", - "eslint-plugin-vue": "^9.16.1", - "esno": "^0.17.0", - "husky": "^8.0.3", - "less": "^4.1.3", - "less-loader": "^11.1.3", - "lint-staged": "^13.2.3", - "postcss": "^8.4.27", - "prettier": "^2.8.8", - "pretty-quick": "^3.1.3", - "rimraf": "^5.0.1", - "rollup": "^3.27.2", - "rollup-plugin-visualizer": "^5.9.2", - "stylelint": "^15.10.2", + "eslint-plugin-vue": "^9.23.0", + "esno": "^4.7.0", + "husky": "^9.0.11", + "less": "^4.2.0", + "less-loader": "^12.2.0", + "lint-staged": "^15.2.2", + "postcss": "^8.4.35", + "prettier": "3.2.5", + "pretty-quick": "^4.0.0", + "rimraf": "^5.0.5", + "rollup": "^4.13.0", + "rollup-plugin-visualizer": "^5.12.0", + "stylelint": "^16.2.1", "stylelint-config-prettier": "^9.0.5", - "stylelint-order": "^6.0.3", - "terser": "^5.19.2", - "ts-node": "^10.9.1", - "typescript": "5.1.6", - "unplugin-vue-define-options": "^1.3.14", - "vite": "^4.4.8", + "stylelint-order": "^6.0.4", + "tailwindcss": "^3.4.1", + "terser": "^5.29.2", + "ts-node": "^10.9.2", + "tslint": "^6.1.3", + "typescript": "5.4.2", + "unplugin-vue-define-options": "^1.4.2", + "vite": "^5.1.6", "vite-plugin-compression": "^0.5.1", + "vite-plugin-html": "^3.2.2", "vite-plugin-optimize-persist": "^0.1.2", "vite-plugin-package-config": "^0.1.1", - "vite-plugin-purge-icons": "^0.9.2", + "vite-plugin-purge-icons": "^0.10.0", "vite-plugin-theme": "^0.8.6", - "vite-plugin-windicss": "^1.9.0", - "vue-eslint-parser": "^9.3.1", + "vite-plugin-windicss": "^1.9.3", + "vue-eslint-parser": "^9.4.2", "vue-tsc": "^1.8.8" }, "husky": { diff --git a/packages/ui/certd-client/public/images/logo/logo.svg b/packages/ui/certd-client/public/images/logo/logo.svg index edcdefbe..1b1395a1 100644 --- a/packages/ui/certd-client/public/images/logo/logo.svg +++ b/packages/ui/certd-client/public/images/logo/logo.svg @@ -1,7 +1,106 @@ - - + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/certd-client/public/images/logo/rect.svg b/packages/ui/certd-client/public/images/logo/rect.svg deleted file mode 100644 index acc2f41c..00000000 --- a/packages/ui/certd-client/public/images/logo/rect.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - 让你的证书永不过期 - - - diff --git a/packages/ui/certd-client/src/App.vue b/packages/ui/certd-client/src/App.vue index 64d04042..dc7e2ccd 100644 --- a/packages/ui/certd-client/src/App.vue +++ b/packages/ui/certd-client/src/App.vue @@ -1,29 +1,32 @@
- +
diff --git a/packages/ui/certd-client/src/layout/components/theme/mode-set.vue b/packages/ui/certd-client/src/layout/components/theme/mode-set.vue new file mode 100644 index 00000000..96fdc165 --- /dev/null +++ b/packages/ui/certd-client/src/layout/components/theme/mode-set.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/ui/certd-client/src/layout/layout-framework.vue b/packages/ui/certd-client/src/layout/layout-framework.vue index e1b5c6b8..6edd7ac2 100644 --- a/packages/ui/certd-client/src/layout/layout-framework.vue +++ b/packages/ui/certd-client/src/layout/layout-framework.vue @@ -31,9 +31,18 @@ - - - +
+ +
+ + + +
+ +
+
+ +
@@ -69,11 +78,12 @@ import { useResourceStore } from "../store/modules/resource"; import { usePageStore } from "/@/store/modules/page"; import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue"; import FsThemeSet from "/@/layout/components/theme/index.vue"; -import { notification } from "ant-design-vue"; +import { env } from "../utils/util.env"; +import FsThemeModeSet from "./components/theme/mode-set.vue"; export default { name: "LayoutFramework", // eslint-disable-next-line vue/no-unused-components - components: { FsThemeSet, MenuFoldOutlined, MenuUnfoldOutlined, FsMenu, FsLocale, FsSourceLink, FsUserInfo, FsTabs }, + components: { FsThemeSet, MenuFoldOutlined, MenuUnfoldOutlined, FsMenu, FsLocale, FsSourceLink, FsUserInfo, FsTabs, FsThemeModeSet }, setup() { const resourceStore = useResourceStore(); const frameworkMenus = computed(() => { @@ -100,6 +110,8 @@ export default { return false; }); const version = ref(import.meta.env.VITE_APP_VERSION); + + const envRef = ref(env); return { version, frameworkMenus, @@ -107,7 +119,8 @@ export default { asideMenus, keepAlive, asideCollapsed, - asideCollapsedToggle + asideCollapsedToggle, + envRef }; } }; @@ -165,11 +178,16 @@ export default { cursor: pointer; padding: 0 10px; } + height: 100%; - & > .btn { + & > .header-btn { + display: inline-flex; + justify-content: center; + align-items: center; + height: 100%; + //border-bottom: 1px solid rgba(255, 255, 255, 0); &:hover { background-color: #fff; - color: @primary-color; } } } diff --git a/packages/ui/certd-client/src/layout/layout-outside.vue b/packages/ui/certd-client/src/layout/layout-outside.vue index 68e33fbf..b57a104c 100644 --- a/packages/ui/certd-client/src/layout/layout-outside.vue +++ b/packages/ui/certd-client/src/layout/layout-outside.vue @@ -19,15 +19,24 @@ 隐私 条款 -
Copyright © 2021 Greper
+
{{ envRef.COPYRIGHT }}
diff --git a/packages/ui/certd-client/src/layout/layout-pass.vue b/packages/ui/certd-client/src/layout/layout-pass.vue index 98240aef..ef62eba7 100644 --- a/packages/ui/certd-client/src/layout/layout-pass.vue +++ b/packages/ui/certd-client/src/layout/layout-pass.vue @@ -1,3 +1,10 @@ + + + + + + + diff --git a/packages/ui/certd-client/src/main.ts b/packages/ui/certd-client/src/main.ts index bb839f35..73b0a796 100644 --- a/packages/ui/certd-client/src/main.ts +++ b/packages/ui/certd-client/src/main.ts @@ -2,14 +2,12 @@ import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import Antd from "ant-design-vue"; -import 'ant-design-vue/dist/reset.css'; import "./style/common.less"; import i18n from "./i18n"; import store from "./store"; import components from "./components"; import plugin from "./plugin/"; - // 正式项目请删除mock，避免影响性能 //import "./mock"; diff --git a/packages/ui/certd-client/src/mock/common/mock.dict.ts b/packages/ui/certd-client/src/mock/common/mock.dict.ts index 0ccb7b53..7d83a68f 100644 --- a/packages/ui/certd-client/src/mock/common/mock.dict.ts +++ b/packages/ui/certd-client/src/mock/common/mock.dict.ts @@ -27,9 +27,11 @@ let manyStatus = [ { value: "2", label: "停止", color: "cyan" }, { value: "0", label: "关闭", color: "red", icon: "ion:radio-button-off" } ]; -for (let i = 0; i < 2; i++) { - manyStatus = manyStatus.concat(_.cloneDeep(manyStatus)); +let tempManyStatus: any[] = []; +for (let i = 0; i < 100; i++) { + tempManyStatus = tempManyStatus.concat(_.cloneDeep(manyStatus)); } +manyStatus = tempManyStatus; let idIndex = 0; for (const item of manyStatus) { idIndex++; diff --git a/packages/ui/certd-client/src/mock/index.ts b/packages/ui/certd-client/src/mock/index.ts index 6234e34e..b424d1b1 100644 --- a/packages/ui/certd-client/src/mock/index.ts +++ b/packages/ui/certd-client/src/mock/index.ts @@ -1,6 +1,7 @@ import { mock } from "../api/service"; import * as tools from "../api/tools"; import _ from "lodash-es"; +import { utils } from "@fast-crud/fast-crud"; // @ts-ignore const commonMocks: any = import.meta.glob("./common/mock.*.[j|t]s", { eager: true }); // @ts-ignore @@ -22,8 +23,8 @@ _.forEach(viewMocks, (value) => { list.forEach((apiFile: any) => { for (const item of apiFile) { mock.onAny(new RegExp(item.path)).reply(async (config: any) => { - console.log("------------fake request start -------------"); - console.log("request:", config); + utils.logger.debug("------------fake request start -------------"); + utils.logger.debug("request:", config); const data = config.data ? JSON.parse(config.data) : {}; const query = config.url.indexOf("?") >= 0 ? config.url.substring(config.url.indexOf("?") + 1) : undefined; const params = config.params || {}; @@ -40,8 +41,8 @@ list.forEach((apiFile: any) => { params: params }; const ret = await item.handle(req); - console.log("response:", ret); - console.log("------------fake request end-------------"); + utils.logger.debug("response:", ret); + utils.logger.debug("------------fake request end-------------"); if (ret.code === 0) { return tools.responseSuccess(ret.data, ret.msg); } else { 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 40532bfa..e0082f2a 100644 --- a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx +++ b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx @@ -1,9 +1,11 @@ import { request, requestForMock } from "/src/api/service"; -import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes, useUi } from "@fast-crud/fast-crud"; +// import "/src/mock"; +import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes, utils } from "@fast-crud/fast-crud"; import "@fast-crud/fast-crud/dist/style.css"; -import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader, FsUploaderAliossSTS, FsUploaderGetAuthContext, FsUploaderS3SignedUrlType } from "@fast-crud/fast-extends"; +import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader, FsExtendsInput, FsUploaderS3SignedUrlType, FsUploaderGetAuthContext, FsUploaderAliossSTS } from "@fast-crud/fast-extends"; import "@fast-crud/fast-extends/dist/style.css"; import UiAntdv from "@fast-crud/ui-antdv4"; +import "@fast-crud/ui-antdv4/dist/style.css"; import _ from "lodash-es"; import { useCrudPermission } from "../permission"; import { App } from "vue"; @@ -28,9 +30,13 @@ function install(app: App, options: any = {}) { * @param props，useCrud的参数 */ commonOptions(props: UseCrudProps): CrudOptions { + utils.logger.debug("commonOptions:", props); const crudBinding = props.crudExpose?.crudBinding; const opts: CrudOptions = { table: { + scroll: { + x: 960 + }, size: "small", pagination: false, onResizeColumn: (w: number, col: any) => { @@ -41,7 +47,7 @@ function install(app: App, options: any = {}) { conditionalRender: { match(scope) { //不能用 !scope.value ， 否则switch组件设置为关之后就消失了 - const { value, key } = scope; + const { value, key, props } = scope; return !value && key != "_index" && value != false; }, render() { @@ -57,6 +63,7 @@ function install(app: App, options: any = {}) { rowHandle: { buttons: { view: { type: "link", text: null, icon: "ion:eye-outline" }, + copy: { show: true, type: "link", text: null, icon: "ion:copy-outline" }, edit: { type: "link", text: null, icon: "ion:create-outline" }, copy: {show:true,type: "link", text: null, icon: "ion:copy-outline"}, remove: { type: "link", style: { color: "red" }, text: null, icon: "ion:trash-outline" } @@ -90,7 +97,7 @@ function install(app: App, options: any = {}) { if (res.offset % pageSize === 0) { currentPage++; } - return { currentPage, pageSize, total: res.total, records: res.records }; + return { currentPage, pageSize, records: res.records, total: res.total, ...res }; } }, form: { @@ -111,6 +118,23 @@ function install(app: App, options: any = {}) { }, wrapperCol: { span: null + }, + wrapper: { + saveRemind: true + // inner: true, + // innerContainerSelector: "main.fs-framework-content" + } + }, + columns: { + createdAt: { + title: "创建时间", + type: "datetime", + form: { + show: false + }, + column: { + order: 1000 + } } } }; @@ -135,7 +159,7 @@ function install(app: App, options: any = {}) { region: "ap-guangzhou", secretId: "", // secretKey: "", // 传了secretKey 和secretId 代表使用本地签名模式（不安全，生产环境不推荐） - async getAuthorization(context: FsUploaderGetAuthContext): Promise { + async getAuthorization(custom: any) { // 不传secretKey代表使用临时签名模式,此时此参数必传（安全，生产环境推荐） const ret = request({ url: "http://www.docmirror.cn:7070/api/upload/cos/getAuthorization", @@ -147,7 +171,6 @@ function install(app: App, options: any = {}) { // TmpSecretKey, // XCosSecurityToken, // ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization - // key //【可选】后台生成的文件key，如果不传则用前端自己生成的key // } return ret; }, @@ -158,19 +181,27 @@ function install(app: App, options: any = {}) { } }, alioss: { + keepName: true, domain: "https://d2p-demo.oss-cn-shenzhen.aliyuncs.com", bucket: "d2p-plugins", region: "oss-cn-shenzhen", accessKeyId: "", accessKeySecret: "", - keepName: true, - async getAuthorization(custom: any, context: any) { + async getAuthorization(context: FsUploaderGetAuthContext): Promise { // 不传accessKeySecret代表使用临时签名模式,此时此参数必传（安全，生产环境推荐） const ret = await request({ url: "http://www.docmirror.cn:7070/api/upload/alioss/getAuthorization", method: "get" }); console.log("ret", ret); + // 返回结构要求如下 + // ret.data:{ + // TmpSecretId, + // TmpSecretKey, + // XCosSecurityToken, + // ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization + // key //【可选】后台生成的文件key，如果不传则用前端自己生成的key + // } return ret; }, sdkOpts: { @@ -218,7 +249,7 @@ function install(app: App, options: any = {}) { } }, //预签名配置，向后端获取上传的预签名连接 - async getSignedUrl(bucket: string, key: string, options: any, type: FsUploaderS3SignedUrlType) { + async getSignedUrl(bucket: string, key: string, options: any, type: FsUploaderS3SignedUrlType = "put") { return await GetSignedUrl(bucket, key, type); }, successHandle(ret: any) { @@ -272,11 +303,12 @@ function install(app: App, options: any = {}) { app.use(FsExtendsJson); app.use(FsExtendsTime); app.use(FsExtendsCopyable); + app.use(FsExtendsInput); const { addTypes, getType } = useTypes(); //此处演示修改官方字段类型 const textType = getType("text"); - textType.search.autoSearchTrigger = "change"; //修改官方的字段类型，设置为文本变化就触发查询 + textType.search.autoSearchTrigger = "change"; //修改官方的字段类型，变化就触发 ， "enter"=回车键触发 // 此处演示自定义字段类型 addTypes({ diff --git a/packages/ui/certd-client/src/router/index.ts b/packages/ui/certd-client/src/router/index.ts index ed537241..818aa6c9 100644 --- a/packages/ui/certd-client/src/router/index.ts +++ b/packages/ui/certd-client/src/router/index.ts @@ -57,6 +57,9 @@ router.afterEach((to: any) => { NProgress.done(); // 多页控制 打开新的页面 const pageStore = usePageStore(); + // for (const item of to.matched) { + // pageStore.keepAlivePush(item.name); + // } pageStore.open(to); // 更改标题 site.title(to.meta.title); diff --git a/packages/ui/certd-client/src/router/resolve.ts b/packages/ui/certd-client/src/router/resolve.ts index 8c36cc7d..9d65027d 100644 --- a/packages/ui/certd-client/src/router/resolve.ts +++ b/packages/ui/certd-client/src/router/resolve.ts @@ -152,3 +152,4 @@ const routes = [...outsideRoutes, ...frameworkRoutes]; const frameworkMenus = frameworkRet.menus; const headerMenus = headerRet.menus; export { routes, outsideRoutes, frameworkRoutes, frameworkMenus, headerMenus, findMenus, filterMenus }; + 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 83a8854a..cb050bb7 100644 --- a/packages/ui/certd-client/src/router/source/modules/crud.ts +++ b/packages/ui/certd-client/src/router/source/modules/crud.ts @@ -96,7 +96,22 @@ export const crudResources = [ title: "ResetCrudOptions", name: "BasisReset", path: "/crud/basis/reset", - component: "/crud/basis/reset/index.vue" + component: "/crud/basis/reset/index.vue", + meta: { + cache: true + } + }, + { + title: "CrudOptions插件", + name: "BasisPlugin", + path: "/crud/basis/plugin", + component: "/crud/basis/plugin/index.vue" + }, + { + title: "Ts定义测试", + name: "BasisTsTest", + path: "/crud/basis/ts", + component: "/crud/basis/ts/index.vue" } ] }, @@ -193,7 +208,7 @@ export const crudResources = [ component: "/crud/component/select/index.vue" }, { - title: "表格选择(table-select)", + title: " 表格选择(table-select)", name: "ComponentTableSelect", path: "/crud/component/table-select", component: "/crud/component/table-select/index.vue" @@ -300,6 +315,12 @@ export const crudResources = [ path: "/crud/component/json", component: "/crud/component/json/index.vue" }, + { + title: "手机号输入框", + name: "ComponentPhone", + path: "/crud/component/phone", + component: "/crud/component/phone/index.vue" + }, { title: "组件独立使用", name: "ComponentIndependent", @@ -449,6 +470,12 @@ export const crudResources = [ path: "/crud/form/view", component: "/crud/form/view/index.vue" }, + { + title: "initialForm", + name: "FormInitial", + path: "/crud/form/initial", + component: "/crud/form/initial/index.vue" + }, { title: "表单Watch", name: "FormWatch", diff --git a/packages/ui/certd-client/src/store/modules/settings.ts b/packages/ui/certd-client/src/store/modules/settings.ts index 932401b5..daed894e 100644 --- a/packages/ui/certd-client/src/store/modules/settings.ts +++ b/packages/ui/certd-client/src/store/modules/settings.ts @@ -1,50 +1,49 @@ import { defineStore } from "pinia"; +import { theme } from "ant-design-vue"; +import _ from "lodash-es"; // @ts-ignore import { LocalStorage } from "/src/utils/util.storage"; + import { SysPublicSetting } from "/@/api/modules/api.basic"; import * as basicApi from '/@/api/modules/api.basic' import _ from "lodash-es"; -// import { replaceStyleVariables } from "vite-plugin-theme/es/client"; -// import { getThemeColors, generateColors } from "/src/../build/theme-colors"; -// -// import { mixLighten, mixDarken, tinycolor } from "vite-plugin-theme/es/colorUtils"; - -// export async function changeTheme(color?: string) { -// if (color == null) { -// return; -// } -// const colors = generateColors({ -// mixDarken, -// mixLighten, -// tinycolor, -// color -// }); -// -// return await replaceStyleVariables({ -// colorVariables: [...getThemeColors(color), ...colors] -// }); -// } - - -interface SettingState { - theme: any; +export type ThemeToken = { + token: { + colorPrimary?: string; + }; + algorithm: any; +}; +export type ThemeConfig = { + colorPrimary: string; + mode: string; +}; +export interface SettingState { + themeConfig?: ThemeConfig; + themeToken: ThemeToken; sysPublic?: SysPublicSetting } +const defaultThemeConfig = { + colorPrimary: "#1890ff", + mode: "light" +}; const SETTING_THEME_KEY = "SETTING_THEME"; export const useSettingStore = defineStore({ id: "app.setting", state: (): SettingState => ({ - // user info - theme: null, + themeConfig: null, + themeToken: { + token: {}, + algorithm: theme.defaultAlgorithm + }, sysPublic: { registerEnabled: false } }), getters: { - getTheme(): any { - return this.theme || LocalStorage.get(SETTING_THEME_KEY) || {}; + getThemeConfig(): any { + return this.themeConfig || _.merge({}, defaultThemeConfig, LocalStorage.get(SETTING_THEME_KEY) || {}); }, getSysPublic():SysPublicSetting{ return this.sysPublic @@ -55,24 +54,44 @@ export const useSettingStore = defineStore({ const settings = await basicApi.getSysPublicSettings() _.merge(this.sysPublic,settings) }, - persistTheme() { - LocalStorage.set(SETTING_THEME_KEY, this.getTheme); + persistThemeConfig() { + LocalStorage.set(SETTING_THEME_KEY, this.getThemeConfig); }, - async setTheme(theme?: Object) { - if (theme == null) { - theme = this.getTheme; + async setThemeConfig(themeConfig?: ThemeConfig) { + this.themeConfig = _.merge({}, this.themeConfig, themeConfig); + + this.persistThemeConfig(); + this.setPrimaryColor(this.themeConfig.colorPrimary); + this.setDarkMode(this.themeConfig.mode); + }, + setPrimaryColor(color: any) { + this.themeConfig.colorPrimary = color; + _.set(this.themeToken, "token.colorPrimary", color); + this.persistThemeConfig(); + }, + setDarkMode(mode: string) { + this.themeConfig.mode = mode; + if (mode === "dark") { + this.themeToken.algorithm = theme.darkAlgorithm; + // const defaultSeed = theme.defaultSeed; + // const mapToken = theme.darkAlgorithm(defaultSeed); + // less.modifyVars(mapToken); + // less.modifyVars({ + // "@colorPrimaryBg": "#111a2c", + // colorPrimaryBg: "#111a2c" + // }); + // less.refreshStyles(); + } else { + this.themeToken.algorithm = theme.defaultAlgorithm; + + // const defaultSeed = theme.defaultSeed; + // const mapToken = theme.defaultAlgorithm(defaultSeed); + // less.modifyVars(mapToken); } - this.theme = theme; - this.persistTheme(); - // await changeTheme(this.theme.primaryColor); - }, - async setPrimaryColor(color: any) { - const theme = this.theme; - theme.primaryColor = color; - await this.setTheme(); + this.persistThemeConfig(); }, async init() { - await this.setTheme(this.getTheme); + await this.setThemeConfig(this.getThemeConfig); await this.loadSysSettings() } } diff --git a/packages/ui/certd-client/src/store/modules/user.ts b/packages/ui/certd-client/src/store/modules/user.ts index 42af3379..00115e8b 100644 --- a/packages/ui/certd-client/src/store/modules/user.ts +++ b/packages/ui/certd-client/src/store/modules/user.ts @@ -108,8 +108,3 @@ export const useUserStore = defineStore({ } } }); - -// Need to be used outside the setup -export function useUserStoreWidthOut() { - return useUserStore(store); -} diff --git a/packages/ui/certd-client/src/style/common.less b/packages/ui/certd-client/src/style/common.less index 91e33950..9e41b078 100644 --- a/packages/ui/certd-client/src/style/common.less +++ b/packages/ui/certd-client/src/style/common.less @@ -14,6 +14,9 @@ html, body { box-sizing: border-box; } +body{ + min-width: 1000px; +} div#app { height: 100% } diff --git a/packages/ui/certd-client/src/style/theme/default.less b/packages/ui/certd-client/src/style/theme/default.less index 9b91b345..6de5091e 100644 --- a/packages/ui/certd-client/src/style/theme/default.less +++ b/packages/ui/certd-client/src/style/theme/default.less @@ -1,21 +1,21 @@ .ant-layout{ - background-color: @bg-color; + background-color: @colorPrimaryBg; } .ant-layout-header { - background-color: @bg-color + background-color: @colorPrimaryBg } .ant-layout-sider { - background-color:@bg-color + background-color:@colorPrimaryBg } .ant-menu{ - background-color: @bg-color; + background-color: @colorPrimaryBg; &.ant-menu-submenu-popup{ background-color: transparent; } } .aside-menu{ .ant-menu-submenu > .ant-menu{ - background-color:@bg-color + background-color:@colorPrimaryBg } .ant-menu-item-active{ diff --git a/packages/ui/certd-client/src/style/theme/index.less b/packages/ui/certd-client/src/style/theme/index.less index d83434fc..a2397d7e 100644 --- a/packages/ui/certd-client/src/style/theme/index.less +++ b/packages/ui/certd-client/src/style/theme/index.less @@ -1,4 +1,3 @@ -@primary-color: #1890ff; -// theme -@bg-color: #ebf1f6; @bg-menu-item-color:hsla(0,0%,100%,.5); +@colorPrimaryBg:#ebf1f6; +@primary-color: #1890ff; \ No newline at end of file diff --git a/packages/ui/certd-client/src/utils/util.env.ts b/packages/ui/certd-client/src/utils/util.env.ts index c00e549c..d221aafc 100644 --- a/packages/ui/certd-client/src/utils/util.env.ts +++ b/packages/ui/certd-client/src/utils/util.env.ts @@ -10,6 +10,9 @@ export class EnvConfig { MODE: string; STORAGE: string; TITLE: string; + SLOGAN: string; + COPYRIGHT: string; + LOGO_PATH: string; PM_ENABLED: string; constructor() { this.init(); diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx index b08752a9..4fb27f8e 100644 --- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx @@ -1,5 +1,15 @@ import * as api from "./api"; -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } from "@fast-crud/fast-crud"; +import { + AddReq, + CreateCrudOptionsProps, + CreateCrudOptionsRet, + DelReq, + EditReq, + UserPageQuery, + UserPageRes, + dict, + utils +} from "@fast-crud/fast-crud"; import { SearchOutlined } from "@ant-design/icons-vue"; export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { @@ -78,7 +88,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti title: "复杂输入", component: { render(context: any) { - console.log("context scope", context); + utils.logger.info("context scope", context); return ( diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx index 77e1da38..d7cd5bc9 100644 --- a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx @@ -44,7 +44,14 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti title: "省", type: "dict-select", search: { - show: true + show: true, + valueChange({ form, value, getComponentRef }: any) { + form.city = undefined; // 将“city”的值置空 + form.county = undefined; // 将“county”的值置空 + if (value) { + getComponentRef("city").reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典 + } + } }, dict: dict({ url: "/mock/linkage/province", @@ -53,8 +60,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti }), form: { valueChange({ form, value, getComponentRef }) { - form.city = undefined; // 将“city”的值置空 - form.county = undefined; // 将“county”的值置空 + form.city = ""; // 将“city”的值置空 + form.county = ""; // 将“county”的值置空 if (value) { getComponentRef("city").reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典 } @@ -84,7 +91,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti // 注释同上 valueChange({ value, form, getComponentRef }: ScopeContext) { if (value) { - form.county = undefined; // 将county的value置空 + form.county = ""; // 将county的value置空 const countySelect = getComponentRef("county"); if (form && form.province && form.city) { countySelect.reloadDict(); // 重新加载字典项 diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts b/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts index dc22fb6e..c783b723 100644 --- a/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts +++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts @@ -96,6 +96,13 @@ mock.push({ const a = tree.filter((item) => { return item.id === province; }); + if (a == null || a.length === 0) { + return { + code: 0, + msg: "success", + data: [] + }; + } const list = omitChildren(a[0].children); return { code: 0, @@ -113,10 +120,24 @@ mock.push({ const a = tree.filter((item) => { return item.id === province; }); + if (a == null || a.length === 0) { + return { + code: 0, + msg: "success", + data: [] + }; + } const city = parseInt(req.params.city); const b = a[0].children.filter((item) => { return item.id === city; }); + if (b == null || b.length === 0) { + return { + code: 0, + msg: "success", + data: [] + }; + } const list = omitChildren(b[0].children); return { diff --git a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx index 1ed87a10..7050a66d 100644 --- a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx @@ -51,11 +51,11 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat }; const addRequest = async ({ form }: AddReq) => { - const id = await api.AddObj(form); + const { id } = await api.AddObj(form); //本地添加 form.id = id; localDataRef.value.unshift(form); - return id; + return form; }; const delRequest = async ({ row }: DelReq) => { diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx index efbcb487..bb92d225 100644 --- a/packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx @@ -25,6 +25,7 @@ export default function ({ crudExpose, context: { asideTableRef } }: CreateCrudO const onCurrentRowChange = (id: number) => { currentRow.value = id; + asideTableRef.value.crudBinding.search.initialForm = { gradeId: id }; asideTableRef.value.setSearchFormData({ form: { gradeId: id } }); asideTableRef.value.doRefresh(); }; @@ -90,7 +91,8 @@ export default function ({ crudExpose, context: { asideTableRef } }: CreateCrudO // 嵌套表格字段 rules: [{ required: true, message: "请选择用户" }], component: { - name: SubTable, + //局部引用子表格，要用shallowRef包裹 + name: shallowRef(SubTable), vModel: "modelValue", gradeId: compute(({ form }) => { return form.id; diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue index ea69cb6f..65a833f8 100644 --- a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue +++ b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue @@ -10,7 +10,7 @@ diff --git a/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx index ef3db7c1..a0e40854 100644 --- a/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx @@ -33,6 +33,9 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat editRequest, delRequest }, + toolbar: { + compact: false + }, table: { scroll: { x: 1500 @@ -184,6 +187,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat search: { show: false }, type: "text", column: { + order: 1000, fixed: "right", component: { name: "a-switch", diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx index 1d3ee4a7..4845265b 100644 --- a/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx @@ -48,7 +48,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti column: { component: { //引用自定义组件 - name: shallowRef(VmodelCounter), + name: VmodelCounter, color: "blue", slots: { //插槽示例 @@ -68,7 +68,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti //form表单 component: { //引用自定义组件 - name: shallowRef(VmodelCounter), + name: VmodelCounter, vModel: "modelValue", color: "red", on: { diff --git a/packages/ui/certd-client/src/views/crud/basis/first/api.ts b/packages/ui/certd-client/src/views/crud/basis/first/api.ts index 227af989..eced4779 100644 --- a/packages/ui/certd-client/src/views/crud/basis/first/api.ts +++ b/packages/ui/certd-client/src/views/crud/basis/first/api.ts @@ -1,7 +1,17 @@ import { requestForMock } from "/src/api/service"; const request = requestForMock; const apiPrefix = "/mock/FsCrudFirst"; -export function GetList(query: any) { + +/** + * 定义行数据模型 + */ +export type FirstRow = { + id?: number; + name?: string; + type?: number; +}; + +export function GetList(query: FirstRow) { return request({ url: apiPrefix + "/page", method: "get", @@ -9,7 +19,7 @@ export function GetList(query: any) { }); } -export function AddObj(obj: any) { +export function AddObj(obj: FirstRow) { return request({ url: apiPrefix + "/add", method: "post", @@ -17,7 +27,7 @@ export function AddObj(obj: any) { }); } -export function UpdateObj(obj: any) { +export function UpdateObj(obj: FirstRow) { return request({ url: apiPrefix + "/update", method: "post", diff --git a/packages/ui/certd-client/src/views/crud/basis/first/crud.ts b/packages/ui/certd-client/src/views/crud/basis/first/crud.ts index 41e6acf5..3f8e5c29 100644 --- a/packages/ui/certd-client/src/views/crud/basis/first/crud.ts +++ b/packages/ui/certd-client/src/views/crud/basis/first/crud.ts @@ -1,31 +1,34 @@ -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery } from "@fast-crud/fast-crud"; import * as api from "./api"; -export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet { - const pageRequest = async (query: UserPageQuery): Promise => { - return await api.GetList(query); - }; - const editRequest = async ({ form, row }: EditReq) => { - if (form.id == null) { - 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); - }; +import { FirstRow } from "./api"; +/** + * 定义context参数类型 + */ +export type FirstContext = { + test?: number; +}; +export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet { + context.test = 111; return { crudOptions: { // 自定义crudOptions配置 request: { - pageRequest, - addRequest, - editRequest, - delRequest + pageRequest: async (query: UserPageQuery) => { + return await api.GetList(query); + }, + addRequest: async ({ form }: AddReq) => { + return await api.AddObj(form); + }, + editRequest: async ({ form, row }: EditReq) => { + if (form.id == null) { + form.id = row.id; + } + return await api.UpdateObj(form); + }, + delRequest: async ({ row }: DelReq) => { + return await api.DelObj(row.id); + } }, //两个字段 columns: { diff --git a/packages/ui/certd-client/src/views/crud/basis/first/index.vue b/packages/ui/certd-client/src/views/crud/basis/first/index.vue index 27a4c5d7..2bb18446 100644 --- a/packages/ui/certd-client/src/views/crud/basis/first/index.vue +++ b/packages/ui/certd-client/src/views/crud/basis/first/index.vue @@ -1,5 +1,5 @@ diff --git a/packages/ui/certd-client/src/views/crud/basis/plugin/mock.ts b/packages/ui/certd-client/src/views/crud/basis/plugin/mock.ts new file mode 100644 index 00000000..ff62c565 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/basis/plugin/mock.ts @@ -0,0 +1,22 @@ +import mockUtil from "/src/mock/base"; +const options: any = { + name: "BasisPlugin", + idGenerator: 0 +}; +const list = [ + { + text: "张三", + radio: "1" + }, + { + text: "李四", + radio: "2" + }, + { + text: "王五", + radio: "0" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/basis/reset/api.ts b/packages/ui/certd-client/src/views/crud/basis/reset/api.ts index f93c5e96..620c51e5 100644 --- a/packages/ui/certd-client/src/views/crud/basis/reset/api.ts +++ b/packages/ui/certd-client/src/views/crud/basis/reset/api.ts @@ -1,6 +1,6 @@ import { requestForMock } from "/src/api/service"; const request = requestForMock; -const apiPrefix = "/mock/BasisReset"; +const apiPrefix = "/mock/BasisValueChange"; export function GetList(query: any) { return request({ url: apiPrefix + "/page", diff --git a/packages/ui/certd-client/src/views/crud/basis/reset/index.vue b/packages/ui/certd-client/src/views/crud/basis/reset/index.vue index 12fe66a5..6da58da6 100644 --- a/packages/ui/certd-client/src/views/crud/basis/reset/index.vue +++ b/packages/ui/certd-client/src/views/crud/basis/reset/index.vue @@ -15,14 +15,13 @@ diff --git a/packages/ui/certd-client/src/views/crud/basis/ts/mock.ts b/packages/ui/certd-client/src/views/crud/basis/ts/mock.ts new file mode 100644 index 00000000..bb9ce24a --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/basis/ts/mock.ts @@ -0,0 +1,22 @@ +// @ts-ignore +import mockUtil from "/src/mock/base"; +const options: any = { + name: "FsCrudFirst", + idGenerator: 0 +}; +const list = [ + { + name: "张三", + type: 1 + }, + { + name: "李四", + type: 0 + }, + { + name: "王五" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx index 65990784..abafc4e2 100644 --- a/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx @@ -1,6 +1,17 @@ import * as api from "./api"; import { message } from "ant-design-vue"; -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, ValueChangeContext } from "@fast-crud/fast-crud"; +import { + AddReq, + CreateCrudOptionsProps, + CreateCrudOptionsRet, + DelReq, + dict, + EditReq, + UserPageQuery, + UserPageRes, + utils, + ValueChangeContext +} from "@fast-crud/fast-crud"; export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { @@ -55,12 +66,12 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti vModel: "checked" }, valueChange(context: ValueChangeContext) { - console.log("column value changed:", context); + utils.logger.info("column value changed:", context); } }, form: { valueChange({ value, key, form }: ValueChangeContext) { - console.log("valueChanged,", key, value, form); + utils.logger.info("valueChanged,", key, value, form); message.info(`valueChanged:${key}=${value}`); } } @@ -70,7 +81,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti type: "text", form: { valueChange({ value, key, form }: ValueChangeContext) { - console.log("valueChanged,", key, value, form); + utils.logger.info("valueChanged,", key, value, form); message.info(`valueChanged:${key}=${value}`); } } @@ -84,7 +95,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti form: { valueChange: { handle({ value, key, form, immediate }: ValueChangeContext) { - console.log("valueChange,", key, value, "isImmediate=", immediate); + utils.logger.info("valueChange,", key, value, "isImmediate=", immediate); message.info(`valueChanged:${key}=${value},isImmediate=${immediate}`); }, immediate: true diff --git a/packages/ui/certd-client/src/views/crud/component/button/crud.tsx b/packages/ui/certd-client/src/views/crud/component/button/crud.tsx index 03ca4bb3..3178c64d 100644 --- a/packages/ui/certd-client/src/views/crud/component/button/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/component/button/crud.tsx @@ -50,6 +50,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti type: "button", column: { component: { + icon: "ion:search", show: compute(({ value }) => { //当value为null时，不显示 return value != null; diff --git a/packages/ui/certd-client/src/views/crud/component/button/index.vue b/packages/ui/certd-client/src/views/crud/component/button/index.vue index 77c42958..2e9490d3 100644 --- a/packages/ui/certd-client/src/views/crud/component/button/index.vue +++ b/packages/ui/certd-client/src/views/crud/component/button/index.vue @@ -1,5 +1,6 @@ diff --git a/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx b/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx index c9f5a1be..a81e1f07 100644 --- a/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx @@ -1,6 +1,6 @@ import * as api from "./api"; import { requestForMock } from "/src/api/service"; -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils, useUi } from "@fast-crud/fast-crud"; export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { @@ -19,6 +19,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti const addRequest = async ({ form }: AddReq) => { return await api.AddObj(form); }; + const { ui } = useUi(); return { crudOptions: { request: { @@ -52,7 +53,18 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti dict: dict({ isTree: true, url: "/mock/dicts/cascaderData?single" - }) + }), + form: { + component: { + on: { + selectedChange({ $event }) { + utils.logger.info("onSelectedChange", $event); + const labels = $event.map((item) => item.label); + ui.message.info(`selected-change:${JSON.stringify(labels)}`); + } + } + } + } }, lazyLoad: { title: "懒加载", @@ -65,9 +77,6 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti prototype: true, getNodesByValues(values: any) { //给cell展示组件调用，根据value值获取节点，每行都会请求一次 - if (values == null) { - return []; - } return requestForMock({ url: "/mock/tree/GetNodesByValues", params: { values } @@ -90,7 +99,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti } ], loadData: async (selectedOptions: any) => { - console.log("lazyLoad", selectedOptions); + utils.logger.info("lazyLoad", selectedOptions); const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; diff --git a/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx b/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx index 7741e2e8..bc8bb544 100644 --- a/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx @@ -1,5 +1,5 @@ import * as api from "./api"; -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils, useUi } from "@fast-crud/fast-crud"; export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { @@ -18,6 +18,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti const addRequest = async ({ form }: AddReq) => { return await api.AddObj(form); }; + const { ui } = useUi(); return { crudOptions: { request: { @@ -44,7 +45,20 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti type: "dict-checkbox", dict: dict({ url: "/mock/dicts/OpenStatusEnum?single" - }) + }), + form: { + component: { + on: { + selectedChange({ form, $event }) { + // $event就是原始的事件值，也就是选中的 option对象 + utils.logger.info("onSelectedChange", form, $event); + ui.message.info(`你选择了${JSON.stringify($event)}`); + // 你还可以将选中的label值赋值给表单里其他字段 + // context.form.xxxLabel = context.$event.label + } + } + } + } } } } diff --git a/packages/ui/certd-client/src/views/crud/component/date/crud.tsx b/packages/ui/certd-client/src/views/crud/component/date/crud.tsx index 052caa7d..7690265b 100644 --- a/packages/ui/certd-client/src/views/crud/component/date/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/component/date/crud.tsx @@ -2,7 +2,6 @@ import * as api from "./api"; import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, ScopeContext, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud"; import dayjs from "dayjs"; -console.log("utils", utils); export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { return await api.GetList(query); @@ -33,6 +32,11 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti scroll: { x: 3000 } }, rowHandle: { fixed: "right" }, + search: { + initialForm: { + // datetimerange: [dayjs().subtract(1, "month").startOf("day"), dayjs().endOf("day")] + } + }, columns: { id: { title: "ID", @@ -54,7 +58,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti component: {} }, valueBuilder({ value, row, key }) { - console.log("value builder:", key, value, row); + utils.logger.info("value builder:", key, value, row); if (value != null) { row[key] = dayjs(value); } @@ -76,7 +80,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti } }, valueBuilder({ value, row, key }) { - console.log("value builder:", key, value, row); + utils.logger.info("value builder:", key, value, row); if (value != null) { row[key] = dayjs(value); } @@ -121,7 +125,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式 on: { onChange(context: ScopeContext) { - console.log("change", context); + utils.logger.info("change", context); } } } @@ -187,7 +191,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti daterange: { title: "日期范围", type: "daterange", - search: { show: true, width: 300 }, + search: { show: true, width: 300, col: { span: 6 } }, valueBuilder({ row, key }) { if (!utils.strings.hasEmpty(row.daterangeStart, row.daterangeEnd)) { row[key] = [dayjs(row.daterangeStart), dayjs(row.daterangeEnd)]; @@ -197,7 +201,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti datetimerange: { title: "日期时间范围", type: "datetimerange", - search: { show: true, width: 300 }, + search: { show: true, width: 300, col: { span: 8 } }, valueBuilder({ row, key }) { if (!utils.strings.hasEmpty(row.datetimerangeStart, row.datetimerangeEnd)) { row[key] = [dayjs(row.datetimerangeStart), dayjs(row.datetimerangeEnd)]; 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 c88a7034..716e3a48 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 @@ -104,7 +104,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti toolbarConfig: {}, editorConfig: {}, onOnChange(value: any) { - console.log("value changed", value); + utils.logger.info("value changed", value); }, uploader: { type: "form", diff --git a/packages/ui/certd-client/src/views/crud/component/independent/index.vue b/packages/ui/certd-client/src/views/crud/component/independent/index.vue index 8db10b43..e829e461 100644 --- a/packages/ui/certd-client/src/views/crud/component/independent/index.vue +++ b/packages/ui/certd-client/src/views/crud/component/independent/index.vue @@ -26,6 +26,15 @@ 下载 + + + + + 王小虎 + id为2的记录 + + + 提交 @@ -37,9 +46,11 @@ diff --git a/packages/ui/certd-client/src/views/crud/component/phone/api.ts b/packages/ui/certd-client/src/views/crud/component/phone/api.ts new file mode 100644 index 00000000..0a7235bf --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/component/phone/api.ts @@ -0,0 +1,50 @@ +import { requestForMock } from "/src/api/service"; +const request = requestForMock; +const apiPrefix = "/mock/ComponentPhone"; +export function GetList(query: any) { + return request({ + url: apiPrefix + "/page", + method: "get", + data: query + }); +} + +export function AddObj(obj: any) { + return request({ + url: apiPrefix + "/add", + method: "post", + data: obj + }); +} + +export function UpdateObj(obj: any) { + return request({ + url: apiPrefix + "/update", + method: "post", + data: obj + }); +} + +export function DelObj(id: any) { + return request({ + url: apiPrefix + "/delete", + method: "post", + params: { id } + }); +} + +export function GetObj(id: any) { + return request({ + url: apiPrefix + "/get", + method: "get", + params: { id } + }); +} + +export function GetByIds(ids: any) { + return request({ + url: apiPrefix + "/byIds", + method: "post", + data: { ids } + }); +} diff --git a/packages/ui/certd-client/src/views/crud/component/phone/crud.tsx b/packages/ui/certd-client/src/views/crud/component/phone/crud.tsx new file mode 100644 index 00000000..61ce9131 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/component/phone/crud.tsx @@ -0,0 +1,92 @@ +import * as api from "./api"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { SearchOutlined } from "@ant-design/icons-vue"; + +export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { + const pageRequest = async (query: UserPageQuery): Promise => { + return await api.GetList(query); + }; + const editRequest = async ({ form, row }: EditReq) => { + if (form.id == null) { + 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: { + request: { + pageRequest, + addRequest, + editRequest, + delRequest + }, + columns: { + id: { + title: "ID", + type: "number", + form: { show: false } + }, + phone: { + title: "手机号码", + type: "phone", + search: { show: true } + }, + phoneNumber: { + title: "区号手机号分开", + type: "phone", + valueBuilder({ row, key, value }) { + row[key] = { + callingCode: row.code || undefined, + phoneNumber: value || "" + }; + }, + valueResolve({ form, key, value }) { + if (value) { + form.code = value.callingCode; + form.phoneNumber = value.phoneNumber; + } + } + }, + only: { + title: "仅某些国家", + type: "phone", + form: { + component: { + onlyCountries: ["CN", "US"] + }, + helper: "仅CN,US" + } + }, + ignore: { + title: "排除某些国家", + type: "phone", + form: { + component: { + ignoredCountries: ["jp"] + }, + helper: "排除JP" + } + }, + priority: { + title: "优先某些国家", + type: "phone", + form: { + component: { + priorityCountries: ["CN", "US"], + ignoredCountries: ["jp"] + }, + helper: "优先CN，US，排除JP" + } + } + } + } + }; +} diff --git a/packages/ui/certd-client/src/views/crud/component/phone/index.vue b/packages/ui/certd-client/src/views/crud/component/phone/index.vue new file mode 100644 index 00000000..26ad7545 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/component/phone/index.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/ui/certd-client/src/views/crud/component/phone/mock.ts b/packages/ui/certd-client/src/views/crud/component/phone/mock.ts new file mode 100644 index 00000000..b0e1c43d --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/component/phone/mock.ts @@ -0,0 +1,18 @@ +import mockUtil from "/src/mock/base"; +const options: any = { + name: "ComponentPhone", + idGenerator: 0 +}; +const list = [ + { + phone: { + callingCode: "86", + phoneNumber: "12345678" + }, + code: "86", + phoneNumber: "12424354" + } +]; +options.list = list; +const mock = mockUtil.buildMock(options); +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx b/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx index 53eb38fe..a1dcab43 100644 --- a/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx @@ -1,5 +1,5 @@ import * as api from "./api"; -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi, utils } from "@fast-crud/fast-crud"; export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { return await api.GetList(query); @@ -17,7 +17,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti const addRequest = async ({ form }: AddReq) => { return await api.AddObj(form); }; - + const { ui } = useUi(); return { crudOptions: { request: { @@ -44,7 +44,23 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti type: "dict-radio", dict: dict({ url: "/mock/dicts/OpenStatusEnum?single" - }) + }), + form: { + valueChange({ value }) { + utils.logger.info("change", value); + }, + component: { + on: { + selectedChange({ form, $event }) { + // $event就是原始的事件值，也就是选中的 option对象 + utils.logger.info("onSelectedChange", form, $event); + ui.message.info(`你选择了${JSON.stringify($event)}`); + // 你还可以将选中的label值赋值给表单里其他字段 + // context.form.xxxLabel = context.$event.label + } + } + } + } }, button: { title: "按钮样式", 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 d34c21bd..2a286bfe 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 @@ -1,6 +1,6 @@ import * as api from "./api"; import { requestForMock } from "/src/api/service"; -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, DictOnReadyContext, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, DictOnReadyContext, EditReq, UserPageQuery, UserPageRes, useUi, utils } from "@fast-crud/fast-crud"; import { ref } from "vue"; import _ from "lodash-es"; function useSearchRemote() { @@ -11,7 +11,7 @@ function useSearchRemote() { fetching: ref(false) }; const fetchUser = _.debounce((value) => { - console.log("fetching user", value); + utils.logger.info("fetching user", value); lastFetchId += 1; const fetchId = lastFetchId; @@ -76,6 +76,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti //dictRef.toMap(); } + const { ui } = useUi(); + const { fetchUser, searchState } = useSearchRemote(); return { dynamicUpdateDictOptions, @@ -117,7 +119,24 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti statusLocal: { title: "单选本地", type: "dict-select", - dict: dictRef + dict: dictRef, + form: { + component: { + onChange(args: any) { + utils.logger.info("onChange", args); + }, + on: { + selectedChange({ form, $event }) { + // $event就是原始的事件值，也就是选中的 option对象 + utils.logger.info("onSelectedChange", form, $event); + ui.message.info(`你选择了${JSON.stringify($event)}`); + // 你还可以将选中的label值赋值给表单里其他字段 + // context.form.xxxLabel = context.$event.label + } + } + }, + helper: "selected-change事件可以获取选中的option对象" + } }, statusRemote: { title: "单选远程", @@ -131,11 +150,6 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti }), form: { rules: [{ required: true, message: "请选择一个选项" }] - }, - column: { - component: { - type: "text" - } } }, filter: { @@ -191,7 +205,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti dict: dict({ getData({ dict }) { // 覆盖全局获取字典请求配置 - console.log(`我是从自定义的getData方法中加载的数据字典`, dict); + utils.logger.info(`我是从自定义的getData方法中加载的数据字典`, dict); return requestForMock({ url: "/mock/dicts/OpenStatusEnum?cache", method: "get" @@ -221,7 +235,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti // 此处dict配置会覆盖上面dict的属性 prototype: true, // form表单的dict设置为原型复制，每次初始化时都会重新loadDict onReady({ dict }: DictOnReadyContext) { - console.log("字典请求ready", dict); + utils.logger.info("字典请求ready", dict); dict.data[0].disabled = true; // 禁用某个选项， 还可以自己修改选项 } } @@ -242,7 +256,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti component: { //监听 dict-change事件 onDictChange({ dict, form, key }: any) { - console.log("dict data changed", dict, key); + utils.logger.info("dict data changed", dict, key); if (dict.data != null && form.firstDefault == null) { form.firstDefault = dict.data[0].value; } diff --git a/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx b/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx index ea7d9285..73430ce0 100644 --- a/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx @@ -1,5 +1,16 @@ import * as api from "./api"; -import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud"; +import { + dict, + compute, + CreateCrudOptionsProps, + CreateCrudOptionsRet, + UserPageQuery, + UserPageRes, + EditReq, + DelReq, + AddReq, + utils +} from "@fast-crud/fast-crud"; export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { return await api.GetList(query); @@ -98,7 +109,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti name: "fs-dict-switch", vModel: "checked", onChange: (value: any) => { - console.log("onChange", value); + utils.logger.info("onChange", value); } // onChange: compute((context) => { // //动态onChange方法测试 @@ -132,7 +143,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti }, form: { show: compute((context) => { - console.log("context", context); + utils.logger.info("context", context); //根据cellSwitch字段显隐 return context.form.cellSwitch === true; }) diff --git a/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx b/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx index 4b4e8067..730640d3 100644 --- a/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx @@ -1,7 +1,8 @@ import * as api from "./api"; import * as textTableApi from "../text/api"; -import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi } from "@fast-crud/fast-crud"; import createCrudOptionsText from "../text/crud"; + export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { return await api.GetList(query); @@ -20,6 +21,17 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti return await api.AddObj(form); }; + const crudOptionsOverride = { + table: { + scroll: { + x: 2000 + } + }, + rowHandle: { + fixed: "right" + } + }; + const { ui } = useUi(); return { crudOptions: { request: { @@ -40,6 +52,16 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti show: false } }, + dynamicShow: { + title: "动态显隐", + type: "dict-switch", + dict: dict({ + data: [ + { value: true, label: "显示" }, + { value: false, label: "隐藏" } + ] + }) + }, single: { title: "单选", search: { show: true }, @@ -47,19 +69,31 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti dict: dict({ value: "id", label: "name", + //重要，根据value懒加载数据 getNodesByValues: async (values: any[]) => { return await textTableApi.GetByIds(values); } }), form: { + show: compute(({ form }) => { + return form.dynamicShow; + }), component: { crossPage: true, + valuesFormat: { + labelFormatter: (item: any) => { + return `${item.id}.${item.name}`; + } + }, + select: { + placeholder: "点击选择" + }, createCrudOptions: createCrudOptionsText, - crudOptionsOverride: { - table: { - scroll: { - x: 2000 - } + crudOptionsOverride, + on: { + selectedChange({ $event }) { + console.log("selectedChange", $event); + ui.message.info(`你选择了${JSON.stringify($event)}`); } } } @@ -72,6 +106,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti dict: dict({ value: "id", label: "name", + //重要，根据value懒加载数据 getNodesByValues: async (values: any[]) => { return await textTableApi.GetByIds(values); } @@ -80,15 +115,126 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti component: { crossPage: true, multiple: true, + valuesFormat: { + labelFormatter: (item: any) => { + return `${item.id}.${item.name}`; + } + }, + select: { + placeholder: "点击选择" + }, createCrudOptions: createCrudOptionsText, - crudOptionsOverride: { - table: { - scroll: { - x: 2000 + crudOptionsOverride: crudOptionsOverride + } + }, + column: { + component: { + labelFormatter: (item: any) => { + return `${item.id}.${item.name}`; + } + } + } + }, + valueType: { + title: "object类型", + search: { show: true }, + type: "table-select", + dict: dict({ + value: "id", + label: "name", + //重要，根据value懒加载数据 + getNodesByValues: async (values: any[]) => { + return await textTableApi.GetByIds(values); + } + }), + column: { + component: { + valueType: "object" + } + }, + form: { + helper: "这里提交的值是整个对象", + component: { + valueType: "object", + crossPage: true, + valuesFormat: { + labelFormatter: (item: any) => { + return `${item.id}.${item.name}`; + } + }, + select: { + placeholder: "点击选择" + }, + createCrudOptions: createCrudOptionsText, + crudOptionsOverride + } + } + }, + //值是object类型 + valueTypeMulti: { + title: "object类型多选", + search: { show: true }, + type: "table-select", + dict: dict({ + value: "id", + label: "name", + getNodesByValues: async (values: any[]) => { + return await textTableApi.GetByIds(values); + } + }), + column: { + component: { + valueType: "object" + } + }, + form: { + helper: "这里提交的值是对象数组", + component: { + valueType: "object", + crossPage: true, + multiple: true, + valuesFormat: { + labelFormatter: (item: any) => { + return `${item.id}.${item.name}`; + } + }, + select: { + placeholder: "点击选择" + }, + createCrudOptions: createCrudOptionsText, + crudOptionsOverride + } + } + }, + viewMode: { + title: "查看模式", + dict: dict({ + value: "id", + label: "name" + }), + column: { + component: { + name: "fs-table-select", + //设置为查看模式 + viewMode: true, + createCrudOptions: createCrudOptionsText, + crudOptionsOverride, + slots: { + default({ scope, value }) { + async function open() { + //打开时传入默认查询参数 + const crudOptions = { + search: { + initialForm: { + classId: value + } + } + }; + const { crudExpose } = await scope.open({ crudOptions }); + // 这里还能通过crudExpose等返回值操作表格 } - }, - rowHandle: { - fixed: "right" + + return 点我查看学生列表:{value}; } } } diff --git a/packages/ui/certd-client/src/views/crud/component/table-select/index.vue b/packages/ui/certd-client/src/views/crud/component/table-select/index.vue index cf9684cc..3e83e4e9 100644 --- a/packages/ui/certd-client/src/views/crud/component/table-select/index.vue +++ b/packages/ui/certd-client/src/views/crud/component/table-select/index.vue @@ -1,13 +1,33 @@ diff --git a/packages/ui/certd-client/src/views/crud/form/initial/mock.ts b/packages/ui/certd-client/src/views/crud/form/initial/mock.ts new file mode 100644 index 00000000..c672c994 --- /dev/null +++ b/packages/ui/certd-client/src/views/crud/form/initial/mock.ts @@ -0,0 +1,311 @@ +//@ts-ignore +import mockUtil from "/src/mock/base"; + +const options: any = { + name: "FormInitial", + idGenerator: 0 +}; +const list = [ + { + name: "王小虎", + age: 15, + password: "", + status: "2", + url: "https://baidu.com" + }, + { + name: "张三", + age: 18, + password: "", + url: "https://baidu.com" + }, + { + status: "2" + } +]; + +const dictData = [ + { + value: "zhinan", + label: "指南", + children: [ + { + value: "shejiyuanze", + label: "设计原则", + children: [ + { + value: "yizhi", + label: "一致" + }, + { + value: "fankui", + label: "反馈" + }, + { + value: "xiaolv", + label: "效率" + }, + { + value: "kekong", + label: "可控" + } + ] + }, + { + value: "daohang", + label: "导航", + children: [ + { + value: "cexiangdaohang", + label: "侧向导航" + }, + { + value: "dingbudaohang", + label: "顶部导航" + } + ] + } + ] + }, + { + value: "zujian", + label: "组件", + children: [ + { + value: "basic", + label: "Basic", + children: [ + { + value: "layout", + label: "Layout 布局" + }, + { + value: "color", + label: "Color 色彩" + }, + { + value: "typography", + label: "Typography 字体" + }, + { + value: "icon", + label: "Icon 图标" + }, + { + value: "button", + label: "Button 按钮" + } + ] + }, + { + value: "form", + label: "Form", + children: [ + { + value: "radio", + label: "Radio 单选框" + }, + { + value: "checkbox", + label: "Checkbox 多选框" + }, + { + value: "input", + label: "Input 输入框" + }, + { + value: "input-number", + label: "InputNumber 计数器" + }, + { + value: "select", + label: "Select 选择器" + }, + { + value: "cascader", + label: "Cascader 级联选择器" + }, + { + value: "switch", + label: "Switch 开关" + }, + { + value: "slider", + label: "Slider 滑块" + }, + { + value: "time-picker", + label: "TimePicker 时间选择器" + }, + { + value: "date-picker", + label: "DatePicker 日期选择器" + }, + { + value: "datetime-picker", + label: "DateTimePicker 日期时间选择器" + }, + { + value: "upload", + label: "Upload 上传" + }, + { + value: "rate", + label: "Rate 评分" + }, + { + value: "form", + label: "Form 表单" + } + ] + }, + { + value: "data", + label: "Data", + children: [ + { + value: "table", + label: "Table 表格" + }, + { + value: "tag", + label: "Tag 标签" + }, + { + value: "progress", + label: "Progress 进度条" + }, + { + value: "tree", + label: "Tree 树形控件" + }, + { + value: "pagination", + label: "Pagination 分页" + }, + { + value: "badge", + label: "Badge 标记" + } + ] + }, + { + value: "notice", + label: "Notice", + children: [ + { + value: "alert", + label: "Alert 警告" + }, + { + value: "loading", + label: "Loading 加载" + }, + { + value: "message", + label: "Message 消息提示" + }, + { + value: "message-box", + label: "MessageBox 弹框" + }, + { + value: "notification", + label: "Notification 通知" + } + ] + }, + { + value: "navigation", + label: "Navigation", + children: [ + { + value: "menu", + label: "NavMenu 导航菜单" + }, + { + value: "tabs", + label: "Tabs 标签页" + }, + { + value: "breadcrumb", + label: "Breadcrumb 面包屑" + }, + { + value: "dropdown", + label: "Dropdown 下拉菜单" + }, + { + value: "steps", + label: "Steps 步骤条" + } + ] + }, + { + value: "others", + label: "Others", + children: [ + { + value: "dialog", + label: "Dialog 对话框" + }, + { + value: "tooltip", + label: "Tooltip 文字提示" + }, + { + value: "popover", + label: "Popover 弹出框" + }, + { + value: "card", + label: "Card 卡片" + }, + { + value: "carousel", + label: "Carousel 走马灯" + }, + { + value: "collapse", + label: "Collapse 折叠面板" + } + ] + } + ] + }, + { + value: "ziyuan", + label: "资源", + children: [ + { + value: "axure", + label: "Axure Components" + }, + { + value: "sketch", + label: "Sketch Templates" + }, + { + value: "jiaohu", + label: "组件交互文档" + } + ] + } +]; + +options.list = list; +options.copyTimes = 1000; +const mock = mockUtil.buildMock(options); +mock.push({ + path: "/select/cascadeData", + method: "get", + handle() { + return { + code: 0, + msg: "success", + data: dictData + }; + } +}); + +export default mock; diff --git a/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue b/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue index bfcedeaf..b73fbd76 100644 --- a/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue +++ b/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue @@ -13,7 +13,7 @@ import { useFs } from "@fast-crud/fast-crud"; import createCrudOptions from "./crud"; export default defineComponent({ - name: "FormLayout", + name: "FormLayoutGrid", setup() { const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions }); // 页面打开后获取列表数据 diff --git a/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx b/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx index 04f75b32..250e323d 100644 --- a/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx @@ -1,5 +1,16 @@ import * as api from "./api"; -import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud"; +import { + AddReq, + compute, + CreateCrudOptionsProps, + CreateCrudOptionsRet, + DelReq, + dict, + EditReq, + UserPageQuery, + UserPageRes, + utils +} from "@fast-crud/fast-crud"; export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet { const pageRequest = async (query: UserPageQuery): Promise => { @@ -38,7 +49,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti customClass: "page-layout", onOpened(context) { getFormWrapperRef().formOptions.display = context.options.initial?.display; - console.log("form opened", context, getFormData()); + utils.logger.log("form opened", context, getFormData()); } } }, @@ -57,7 +68,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti valueChange(context) { const { value } = context; getFormWrapperRef().formOptions.display = value; - console.log("valueChange", value, context); + utils.logger.log("valueChange", value, context); } } }, diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx b/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx index ab1058b7..308cfe72 100644 --- a/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx +++ b/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx @@ -78,16 +78,11 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti }, content: { title: "详情", - type: ["editor-wang5", "colspan"], + type: "editor-wang5", form: { - itemProps: { labelWidth: "0px" } - } - }, - product: { - title: "未分组字段", - type: ["text", "colspan"], - form: { - helper: "未分组的字段会显示在这里，一般来说你应该把所有字段都编入分组内" + col: { + span: 24 + } } } } diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue b/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue index ba6f9e54..085c09bd 100644 --- a/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue +++ b/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue @@ -15,7 +15,7 @@