mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 14:10:27 +08:00
优化
This commit is contained in:
parent
48735c2a2f
commit
a0b9e23b7c
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
1
packages/crud/index.d.ts
vendored
1
packages/crud/index.d.ts
vendored
@ -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;
|
||||||
|
@ -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",
|
||||||
|
@ -149,8 +149,8 @@ export default defineComponent({
|
|||||||
open,
|
open,
|
||||||
close,
|
close,
|
||||||
clear,
|
clear,
|
||||||
reset,
|
...useApi({ Form }),
|
||||||
...useApi({ Form })
|
reset
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
@ -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,
|
||||||
|
@ -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",
|
||||||
|
@ -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,
|
||||||
|
@ -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) {
|
||||||
|
@ -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) {
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user