From a0b9e23b7cab62205859191328b5dc075c1a7f17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9E=E4=BB=99=E9=83=BD=E6=B2=A1=E7=94=A8?= <615206459@qq.com> Date: Thu, 30 May 2024 19:48:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 7 +- package.json | 2 +- packages/crud/index.d.ts | 1 + packages/crud/package.json | 2 +- packages/crud/src/components/adv/search.tsx | 4 +- .../src/components/context-menu/index.tsx | 73 +++++++++-------- .../crud/src/components/form/helper/api.ts | 1 + packages/crud/src/components/form/index.tsx | 82 ++++++++++--------- packages/crud/src/components/index.tsx | 4 +- packages/crud/src/plugins/index.ts | 2 +- .../types/components/context-menu/index.d.ts | 8 +- 11 files changed, 101 insertions(+), 85 deletions(-) diff --git a/index.html b/index.html index 392df9c..529be85 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -21,8 +21,6 @@ * { margin: 0; padding: 0; - font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", - "Microsoft YaHei", "微软雅黑", Arial, sans-serif; } .preload__wrap { @@ -93,7 +91,8 @@ border: 7px solid currentColor; border-bottom-color: #2f3447 !important; position: relative; - animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67), + animation: + r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67), bc 2s infinite ease-in; transform: rotate(0deg); } diff --git a/package.json b/package.json index 96ac781..1cd3877 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "marked": "^11.1.1", "mitt": "^3.0.1", "mockjs": "^1.1.0", - "monaco-editor": "0.36.0", + "monaco-editor": "0.49.0", "nprogress": "^0.2.0", "pinia": "^2.1.7", "socket.io-client": "^4.7.2", diff --git a/packages/crud/index.d.ts b/packages/crud/index.d.ts index 0cd0146..cebe953 100644 --- a/packages/crud/index.d.ts +++ b/packages/crud/index.d.ts @@ -575,6 +575,7 @@ declare namespace ClForm { showLoading(): void; hideLoading(): void; setDisabled(flag?: boolean): void; + invokeData(data: any): void; setData(prop: string, value: any): void; bindForm(data: obj): void; getForm(prop?: string): any; diff --git a/packages/crud/package.json b/packages/crud/package.json index 76d7a57..67f1a60 100644 --- a/packages/crud/package.json +++ b/packages/crud/package.json @@ -1,6 +1,6 @@ { "name": "@cool-vue/crud", - "version": "7.1.19", + "version": "7.1.22", "private": false, "main": "./dist/index.umd.min.js", "typings": "types/index.d.ts", diff --git a/packages/crud/src/components/adv/search.tsx b/packages/crud/src/components/adv/search.tsx index 8b4e592..cd02a25 100644 --- a/packages/crud/src/components/adv/search.tsx +++ b/packages/crud/src/components/adv/search.tsx @@ -149,8 +149,8 @@ export default defineComponent({ open, close, clear, - reset, - ...useApi({ Form }) + ...useApi({ Form }), + reset }); return () => { diff --git a/packages/crud/src/components/context-menu/index.tsx b/packages/crud/src/components/context-menu/index.tsx index f6944e6..12d2da5 100644 --- a/packages/crud/src/components/context-menu/index.tsx +++ b/packages/crud/src/components/context-menu/index.tsx @@ -25,7 +25,7 @@ const ClContextMenu = defineComponent({ default: () => ({}) }, event: { - type: Object as PropType, + type: Object, default: () => ({}) } }, @@ -90,36 +90,7 @@ const ClContextMenu = defineComponent({ } // 打开 - function open(event: ClContextMenu.Event, options: ClContextMenu.Options = {}) { - // 点击样式 - if (options?.hover) { - const d = options.hover === true ? {} : options.hover; - targetEl = event.target; - - if (targetEl && isString(targetEl.className)) { - if (d.target) { - while (!targetEl.className.includes(d.target)) { - targetEl = targetEl.parentNode; - } - } - - addClass(targetEl, d.className || "cl-context-menu__target"); - } - } - - // 自定义样式 - if (options?.class) { - addClass( - refs["context-menu"].querySelector(".cl-context-menu__box"), - options.class - ); - } - - // 菜单列表 - if (options?.list) { - list.value = parseList(options.list); - } - + function open(event: any, options: ClContextMenu.Options = {}) { // 阻止默认事件 stopDefault(event); @@ -127,12 +98,20 @@ const ClContextMenu = defineComponent({ visible.value = true; nextTick(() => { + const el = refs["context-menu"].querySelector(".cl-context-menu__box"); + + // 计算位置 let left = event.pageX; let top = event.pageY; + // 组件方式用 offset 计算 + if (!props.show) { + left = event.offsetX; + top = event.offsetY; + } + const { clientHeight: h1, clientWidth: w1 } = event.target?.ownerDocument.body; - const { clientHeight: h2, clientWidth: w2 } = - refs["context-menu"].querySelector(".cl-context-menu__box"); + const { clientHeight: h2, clientWidth: w2 } = el; if (top + h2 > h1) { top = h1 - h2 - 5; @@ -144,6 +123,32 @@ const ClContextMenu = defineComponent({ style.left = left + "px"; style.top = top + "px"; + + // 点击样式 + if (options?.hover) { + const d = options.hover === true ? {} : options.hover; + targetEl = event.target; + + if (targetEl && isString(targetEl.className)) { + if (d.target) { + while (!targetEl.className.includes(d.target)) { + targetEl = targetEl.parentNode; + } + } + + addClass(targetEl, d.className || "cl-context-menu__target"); + } + } + + // 自定义样式 + if (options?.class) { + addClass(el, options.class); + } + + // 菜单列表 + if (options?.list) { + list.value = parseList(options.list); + } }); return { @@ -258,7 +263,7 @@ const ClContextMenu = defineComponent({ }); export const ContextMenu = { - open(event: ClContextMenu.Event, options: ClContextMenu.Options) { + open(event: any, options: ClContextMenu.Options) { const vm = h(ClContextMenu, { show: true, event, diff --git a/packages/crud/src/components/form/helper/api.ts b/packages/crud/src/components/form/helper/api.ts index 60d2168..83fb146 100644 --- a/packages/crud/src/components/form/helper/api.ts +++ b/packages/crud/src/components/form/helper/api.ts @@ -16,6 +16,7 @@ export function useApi({ Form }: { Form: Vue.Ref }) { "collapseItem", "getForm", "setForm", + "invokeData", "setData", "setConfig", "setOptions", diff --git a/packages/crud/src/components/form/index.tsx b/packages/crud/src/components/form/index.tsx index f810e57..df5af16 100644 --- a/packages/crud/src/components/form/index.tsx +++ b/packages/crud/src/components/form/index.tsx @@ -113,6 +113,39 @@ export default defineComponent({ } } + // 转换表单值，处理多层级等数据 + function invokeData(d: any) { + for (const i in d) { + if (i.includes("-")) { + // 结构参数 + const [a, ...arr] = i.split("-"); + + // 关键值的key + const k: string = arr.pop() || ""; + + if (!d[a]) { + d[a] = {}; + } + + let f: any = d[a]; + + // 设置默认值 + arr.forEach((e) => { + if (!f[e]) { + f[e] = {}; + } + + f = f[e]; + }); + + // 设置关键值 + f[k] = d[i]; + + delete d[i]; + } + } + } + // 表单提交 function submit(callback?: fn) { // 验证表单 @@ -151,36 +184,8 @@ export default defineComponent({ deep(e); }); - // 处理 "-" 多层级 - for (const i in d) { - if (i.includes("-")) { - // 结构参数 - const [a, ...arr] = i.split("-"); - - // 关键值的key - const k: string = arr.pop() || ""; - - if (!d[a]) { - d[a] = {}; - } - - let f: any = d[a]; - - // 设置默认值 - arr.forEach((e) => { - if (!f[e]) { - f[e] = {}; - } - - f = f[e]; - }); - - // 设置关键值 - f[k] = d[i]; - - delete d[i]; - } - } + // 处理数据 + invokeData(d); const submit = callback || config.on?.submit; @@ -386,13 +391,15 @@ export default defineComponent({ e.props, { label() { - return e.renderLabel - ? renderNode(e.renderLabel, { - scope: form, - render: "slot", - slots - }) - : e.label; + if (e.renderLabel) { + return renderNode(e.renderLabel, { + scope: form, + render: "slot", + slots + }); + } else { + return e.label; + } }, default() { return ( @@ -609,6 +616,7 @@ export default defineComponent({ clear, reset, submit, + invokeData, bindForm, showLoading, hideLoading, diff --git a/packages/crud/src/components/index.tsx b/packages/crud/src/components/index.tsx index d5f38a0..b23c344 100644 --- a/packages/crud/src/components/index.tsx +++ b/packages/crud/src/components/index.tsx @@ -18,6 +18,7 @@ import Filter from "./filter"; import Search from "./search"; import ErrorMessage from "./error-message"; import Row from "./row"; +import ContextMenu from "./context-menu"; export const components: { [key: string]: any } = { Crud, @@ -38,7 +39,8 @@ export const components: { [key: string]: any } = { Filter, Search, ErrorMessage, - Row + Row, + ContextMenu }; export function useComponent(app: App) { diff --git a/packages/crud/src/plugins/index.ts b/packages/crud/src/plugins/index.ts index 56700c9..4f9510e 100644 --- a/packages/crud/src/plugins/index.ts +++ b/packages/crud/src/plugins/index.ts @@ -9,7 +9,7 @@ export function setFocus(prop?: string): ClForm.Plugin { const { refs, setRefs } = useRefs(); return ({ exposed, onOpen }) => { - const name = prop || exposed.config.items[0].prop; + const name = prop || exposed.config.items?.[0]?.prop; let _ref: any; if (name) { diff --git a/packages/crud/types/components/context-menu/index.d.ts b/packages/crud/types/components/context-menu/index.d.ts index bf7355c..46b60f6 100644 --- a/packages/crud/types/components/context-menu/index.d.ts +++ b/packages/crud/types/components/context-menu/index.d.ts @@ -7,7 +7,7 @@ declare const ClContextMenu: import("vue").DefineComponent<{ default: () => {}; }; event: { - type: PropType; + type: ObjectConstructor; default: () => {}; }; }, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly {}; }; event: { - type: PropType; + type: ObjectConstructor; default: () => {}; }; }>>, { options: ClContextMenu.Options; show: boolean; - event: ClContextMenu.Event; + event: Record; }, {}>; export declare const ContextMenu: { - open(event: ClContextMenu.Event, options: ClContextMenu.Options): ClContextMenu.Exposed; + open(event: any, options: ClContextMenu.Options): ClContextMenu.Exposed; }; export default ClContextMenu;