This commit is contained in:
神仙都没用 2024-05-30 19:48:00 +08:00
parent 48735c2a2f
commit a0b9e23b7c
11 changed files with 101 additions and 85 deletions

View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -21,8 +21,6 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
} }
.preload__wrap { .preload__wrap {
@ -93,7 +91,8 @@
border: 7px solid currentColor; border: 7px solid currentColor;
border-bottom-color: #2f3447 !important; border-bottom-color: #2f3447 !important;
position: relative; 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; bc 2s infinite ease-in;
transform: rotate(0deg); transform: rotate(0deg);
} }

View File

@ -25,7 +25,7 @@
"marked": "^11.1.1", "marked": "^11.1.1",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"monaco-editor": "0.36.0", "monaco-editor": "0.49.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"socket.io-client": "^4.7.2", "socket.io-client": "^4.7.2",

View File

@ -575,6 +575,7 @@ declare namespace ClForm {
showLoading(): void; showLoading(): void;
hideLoading(): void; hideLoading(): void;
setDisabled(flag?: boolean): void; setDisabled(flag?: boolean): void;
invokeData(data: any): void;
setData(prop: string, value: any): void; setData(prop: string, value: any): void;
bindForm(data: obj): void; bindForm(data: obj): void;
getForm(prop?: string): any; getForm(prop?: string): any;

View File

@ -1,6 +1,6 @@
{ {
"name": "@cool-vue/crud", "name": "@cool-vue/crud",
"version": "7.1.19", "version": "7.1.22",
"private": false, "private": false,
"main": "./dist/index.umd.min.js", "main": "./dist/index.umd.min.js",
"typings": "types/index.d.ts", "typings": "types/index.d.ts",

View File

@ -149,8 +149,8 @@ export default defineComponent({
open, open,
close, close,
clear, clear,
reset, ...useApi({ Form }),
...useApi({ Form }) reset
}); });
return () => { return () => {

View File

@ -25,7 +25,7 @@ const ClContextMenu = defineComponent({
default: () => ({}) default: () => ({})
}, },
event: { event: {
type: Object as PropType<ClContextMenu.Event>, type: Object,
default: () => ({}) default: () => ({})
} }
}, },
@ -90,7 +90,40 @@ const ClContextMenu = defineComponent({
} }
// 打开 // 打开
function open(event: ClContextMenu.Event, options: ClContextMenu.Options = {}) { function open(event: any, options: ClContextMenu.Options = {}) {
// 阻止默认事件
stopDefault(event);
// 显示
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 } = el;
if (top + h2 > h1) {
top = h1 - h2 - 5;
}
if (left + w2 > w1) {
left = w1 - w2 - 5;
}
style.left = left + "px";
style.top = top + "px";
// 点击样式 // 点击样式
if (options?.hover) { if (options?.hover) {
const d = options.hover === true ? {} : options.hover; const d = options.hover === true ? {} : options.hover;
@ -109,41 +142,13 @@ const ClContextMenu = defineComponent({
// 自定义样式 // 自定义样式
if (options?.class) { if (options?.class) {
addClass( addClass(el, options.class);
refs["context-menu"].querySelector(".cl-context-menu__box"),
options.class
);
} }
// 菜单列表 // 菜单列表
if (options?.list) { if (options?.list) {
list.value = parseList(options.list); list.value = parseList(options.list);
} }
// 阻止默认事件
stopDefault(event);
// 显示
visible.value = true;
nextTick(() => {
let left = event.pageX;
let top = event.pageY;
const { clientHeight: h1, clientWidth: w1 } = event.target?.ownerDocument.body;
const { clientHeight: h2, clientWidth: w2 } =
refs["context-menu"].querySelector(".cl-context-menu__box");
if (top + h2 > h1) {
top = h1 - h2 - 5;
}
if (left + w2 > w1) {
left = w1 - w2 - 5;
}
style.left = left + "px";
style.top = top + "px";
}); });
return { return {
@ -258,7 +263,7 @@ const ClContextMenu = defineComponent({
}); });
export const ContextMenu = { export const ContextMenu = {
open(event: ClContextMenu.Event, options: ClContextMenu.Options) { open(event: any, options: ClContextMenu.Options) {
const vm = h(ClContextMenu, { const vm = h(ClContextMenu, {
show: true, show: true,
event, event,

View File

@ -16,6 +16,7 @@ export function useApi({ Form }: { Form: Vue.Ref<any> }) {
"collapseItem", "collapseItem",
"getForm", "getForm",
"setForm", "setForm",
"invokeData",
"setData", "setData",
"setConfig", "setConfig",
"setOptions", "setOptions",

View File

@ -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) { function submit(callback?: fn) {
// 验证表单 // 验证表单
@ -151,36 +184,8 @@ export default defineComponent({
deep(e); deep(e);
}); });
// 处理 "-" 多层级 // 处理数据
for (const i in d) { invokeData(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];
}
}
const submit = callback || config.on?.submit; const submit = callback || config.on?.submit;
@ -386,13 +391,15 @@ export default defineComponent({
e.props, e.props,
{ {
label() { label() {
return e.renderLabel if (e.renderLabel) {
? renderNode(e.renderLabel, { return renderNode(e.renderLabel, {
scope: form, scope: form,
render: "slot", render: "slot",
slots slots
}) });
: e.label; } else {
return e.label;
}
}, },
default() { default() {
return ( return (
@ -609,6 +616,7 @@ export default defineComponent({
clear, clear,
reset, reset,
submit, submit,
invokeData,
bindForm, bindForm,
showLoading, showLoading,
hideLoading, hideLoading,

View File

@ -18,6 +18,7 @@ import Filter from "./filter";
import Search from "./search"; import Search from "./search";
import ErrorMessage from "./error-message"; import ErrorMessage from "./error-message";
import Row from "./row"; import Row from "./row";
import ContextMenu from "./context-menu";
export const components: { [key: string]: any } = { export const components: { [key: string]: any } = {
Crud, Crud,
@ -38,7 +39,8 @@ export const components: { [key: string]: any } = {
Filter, Filter,
Search, Search,
ErrorMessage, ErrorMessage,
Row Row,
ContextMenu
}; };
export function useComponent(app: App) { export function useComponent(app: App) {

View File

@ -9,7 +9,7 @@ export function setFocus(prop?: string): ClForm.Plugin {
const { refs, setRefs } = useRefs(); const { refs, setRefs } = useRefs();
return ({ exposed, onOpen }) => { return ({ exposed, onOpen }) => {
const name = prop || exposed.config.items[0].prop; const name = prop || exposed.config.items?.[0]?.prop;
let _ref: any; let _ref: any;
if (name) { if (name) {

View File

@ -7,7 +7,7 @@ declare const ClContextMenu: import("vue").DefineComponent<{
default: () => {}; default: () => {};
}; };
event: { event: {
type: PropType<ClContextMenu.Event>; type: ObjectConstructor;
default: () => {}; default: () => {};
}; };
}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ }, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@ -17,15 +17,15 @@ declare const ClContextMenu: import("vue").DefineComponent<{
default: () => {}; default: () => {};
}; };
event: { event: {
type: PropType<ClContextMenu.Event>; type: ObjectConstructor;
default: () => {}; default: () => {};
}; };
}>>, { }>>, {
options: ClContextMenu.Options; options: ClContextMenu.Options;
show: boolean; show: boolean;
event: ClContextMenu.Event; event: Record<string, any>;
}, {}>; }, {}>;
export declare const ContextMenu: { export declare const ContextMenu: {
open(event: ClContextMenu.Event, options: ClContextMenu.Options): ClContextMenu.Exposed; open(event: any, options: ClContextMenu.Options): ClContextMenu.Exposed;
}; };
export default ClContextMenu; export default ClContextMenu;