mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 06:02:38 +08:00
优化
This commit is contained in:
parent
48735c2a2f
commit
a0b9e23b7c
@ -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);
|
||||
}
|
||||
|
@ -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",
|
||||
|
1
packages/crud/index.d.ts
vendored
1
packages/crud/index.d.ts
vendored
@ -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;
|
||||
|
@ -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",
|
||||
|
@ -149,8 +149,8 @@ export default defineComponent({
|
||||
open,
|
||||
close,
|
||||
clear,
|
||||
reset,
|
||||
...useApi({ Form })
|
||||
...useApi({ Form }),
|
||||
reset
|
||||
});
|
||||
|
||||
return () => {
|
||||
|
@ -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,
|
||||
|
@ -16,6 +16,7 @@ export function useApi({ Form }: { Form: Vue.Ref<any> }) {
|
||||
"collapseItem",
|
||||
"getForm",
|
||||
"setForm",
|
||||
"invokeData",
|
||||
"setData",
|
||||
"setConfig",
|
||||
"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) {
|
||||
// 验证表单
|
||||
@ -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,
|
||||
|
@ -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) {
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user