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">
<head>
<meta charset="utf-8" />
@ -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);
}

View File

@ -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",

View File

@ -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;

View File

@ -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",

View File

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

View File

@ -25,7 +25,7 @@ const ClContextMenu = defineComponent({
default: () => ({})
},
event: {
type: Object as PropType<ClContextMenu.Event>,
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,

View File

@ -16,6 +16,7 @@ export function useApi({ Form }: { Form: Vue.Ref<any> }) {
"collapseItem",
"getForm",
"setForm",
"invokeData",
"setData",
"setConfig",
"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) {
// 验证表单
@ -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,

View File

@ -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) {

View File

@ -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) {

View File

@ -7,7 +7,7 @@ declare const ClContextMenu: import("vue").DefineComponent<{
default: () => {};
};
event: {
type: PropType<ClContextMenu.Event>;
type: ObjectConstructor;
default: () => {};
};
}, () => 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: () => {};
};
event: {
type: PropType<ClContextMenu.Event>;
type: ObjectConstructor;
default: () => {};
};
}>>, {
options: ClContextMenu.Options;
show: boolean;
event: ClContextMenu.Event;
event: Record<string, any>;
}, {}>;
export declare const ContextMenu: {
open(event: ClContextMenu.Event, options: ClContextMenu.Options): ClContextMenu.Exposed;
open(event: any, options: ClContextMenu.Options): ClContextMenu.Exposed;
};
export default ClContextMenu;