mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-16 16:42:50 +00:00
优化 crud 模块
This commit is contained in:
parent
dd4d25e215
commit
8e1a4a4705
@ -39,12 +39,7 @@
|
|||||||
|
|
||||||
<!-- MP3 -->
|
<!-- MP3 -->
|
||||||
<div class="mp3">
|
<div class="mp3">
|
||||||
<audio
|
<audio :ref="setRefs('sound')" :src="NotifyMp3" controls style="display: none"></audio>
|
||||||
:ref="setRefs('sound')"
|
|
||||||
style="display: none"
|
|
||||||
src="../static/notify.mp3"
|
|
||||||
controls
|
|
||||||
></audio>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -61,6 +56,7 @@ import Message from "./message.vue";
|
|||||||
import Input from "./input.vue";
|
import Input from "./input.vue";
|
||||||
import { parseContent } from "../utils";
|
import { parseContent } from "../utils";
|
||||||
import { useRefs } from "/@/core";
|
import { useRefs } from "/@/core";
|
||||||
|
import NotifyMp3 from "../static/notify.mp3";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "cl-chat",
|
name: "cl-chat",
|
||||||
@ -255,6 +251,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
NotifyMp3,
|
||||||
refs,
|
refs,
|
||||||
session,
|
session,
|
||||||
sessionVisible,
|
sessionVisible,
|
||||||
|
|||||||
@ -14,7 +14,7 @@ export default defineComponent({
|
|||||||
const { refs, setRefs }: any = useRefs();
|
const { refs, setRefs }: any = useRefs();
|
||||||
|
|
||||||
// 菜单是否可见
|
// 菜单是否可见
|
||||||
const visible = ref<boolean>(props.visible);
|
const visible2 = ref<boolean>(props.visible);
|
||||||
|
|
||||||
// 按钮列表
|
// 按钮列表
|
||||||
const list = ref<Array<ContextMenuItem>>([]);
|
const list = ref<Array<ContextMenuItem>>([]);
|
||||||
@ -58,7 +58,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
// 关闭菜单
|
// 关闭菜单
|
||||||
function close() {
|
function close() {
|
||||||
visible.value = false;
|
visible2.value = false;
|
||||||
ids.value = "";
|
ids.value = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,7 +95,7 @@ export default defineComponent({
|
|||||||
stopDefault(event);
|
stopDefault(event);
|
||||||
|
|
||||||
// 显示菜单
|
// 显示菜单
|
||||||
visible.value = true;
|
visible2.value = true;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
close
|
close
|
||||||
@ -124,7 +124,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(function () {
|
onMounted(function () {
|
||||||
if (visible.value) {
|
if (visible2.value) {
|
||||||
// 添加到 body 下
|
// 添加到 body 下
|
||||||
document.body.appendChild(refs.value["context-menu"]);
|
document.body.appendChild(refs.value["context-menu"]);
|
||||||
// 关闭事件
|
// 关闭事件
|
||||||
@ -139,7 +139,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
refs,
|
refs,
|
||||||
visible,
|
visible2,
|
||||||
ids,
|
ids,
|
||||||
style,
|
style,
|
||||||
list,
|
list,
|
||||||
@ -193,7 +193,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
ctx.visible && (
|
ctx.visible2 && (
|
||||||
<div
|
<div
|
||||||
class="cl-context-menu"
|
class="cl-context-menu"
|
||||||
ref={ctx.setRefs("context-menu")}
|
ref={ctx.setRefs("context-menu")}
|
||||||
|
|||||||
@ -62,7 +62,7 @@ export default defineComponent({
|
|||||||
const browser = inject("browser") as Browser;
|
const browser = inject("browser") as Browser;
|
||||||
|
|
||||||
// 是否全屏
|
// 是否全屏
|
||||||
const fullscreen = ref<boolean>(false);
|
const fullscreen = ref<boolean>(props.props.fullscreen);
|
||||||
|
|
||||||
// 是否可见
|
// 是否可见
|
||||||
const visible = ref<boolean>(props.modelValue);
|
const visible = ref<boolean>(props.modelValue);
|
||||||
@ -114,6 +114,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onOpen() {
|
function onOpen() {
|
||||||
|
// 初始值
|
||||||
|
fullscreen.value = props.props.fullscreen;
|
||||||
|
|
||||||
|
// 是否缓存
|
||||||
if (!props.keepAlive) {
|
if (!props.keepAlive) {
|
||||||
cacheKey.value += 1;
|
cacheKey.value += 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -105,6 +105,10 @@ export default defineComponent({
|
|||||||
done();
|
done();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onClosed() {
|
||||||
|
tabActive.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
// 表单关闭前事件
|
// 表单关闭前事件
|
||||||
function beforeClose() {
|
function beforeClose() {
|
||||||
if (conf.on?.close) {
|
if (conf.on?.close) {
|
||||||
@ -167,7 +171,7 @@ export default defineComponent({
|
|||||||
for (const i in conf) {
|
for (const i in conf) {
|
||||||
switch (i) {
|
switch (i) {
|
||||||
case "items":
|
case "items":
|
||||||
conf.items = options.items || [];
|
conf.items = cloneDeep(options.items || []);
|
||||||
break;
|
break;
|
||||||
case "title":
|
case "title":
|
||||||
case "width":
|
case "width":
|
||||||
@ -240,6 +244,7 @@ export default defineComponent({
|
|||||||
open,
|
open,
|
||||||
beforeClose,
|
beforeClose,
|
||||||
close,
|
close,
|
||||||
|
onClosed,
|
||||||
done,
|
done,
|
||||||
clear,
|
clear,
|
||||||
submit,
|
submit,
|
||||||
@ -470,7 +475,8 @@ export default defineComponent({
|
|||||||
props: {
|
props: {
|
||||||
...dialog.props,
|
...dialog.props,
|
||||||
"before-close": ctx.beforeClose
|
"before-close": ctx.beforeClose
|
||||||
}
|
},
|
||||||
|
onClosed: ctx.onClosed
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
default() {
|
default() {
|
||||||
|
|||||||
@ -24,7 +24,7 @@ export default defineComponent({
|
|||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
const crud = inject("crud") as Crud;
|
const crud = inject("crud") as Crud;
|
||||||
|
|
||||||
const list = ref<Array<any>>([]);
|
const list2 = ref<Array<any>>([]);
|
||||||
|
|
||||||
// 更新数据列表
|
// 更新数据列表
|
||||||
const update = () => {
|
const update = () => {
|
||||||
@ -41,7 +41,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 默认选择
|
// 默认选择
|
||||||
list.value = (props.list || []).map((e: any) => {
|
list2.value = (props.list || []).map((e: any) => {
|
||||||
e.active = arr.some((v) => v === e.value);
|
e.active = arr.some((v) => v === e.value);
|
||||||
return e;
|
return e;
|
||||||
});
|
});
|
||||||
@ -57,14 +57,14 @@ export default defineComponent({
|
|||||||
if (props.multiple) {
|
if (props.multiple) {
|
||||||
item.active = true;
|
item.active = true;
|
||||||
} else {
|
} else {
|
||||||
list.value.map((e: any) => {
|
list2.value.map((e: any) => {
|
||||||
e.active = e.value == item.value;
|
e.active = e.value == item.value;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 过滤未选中的
|
// 过滤未选中的
|
||||||
const selection = list.value.filter((e: any) => e.active).map((e: any) => e.value);
|
const selection = list2.value.filter((e: any) => e.active).map((e: any) => e.value);
|
||||||
// 处理多选情况
|
// 处理多选情况
|
||||||
const value = props.multiple ? selection : selection[0];
|
const value = props.multiple ? selection : selection[0];
|
||||||
|
|
||||||
@ -92,7 +92,7 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
list,
|
list2,
|
||||||
selectItem
|
selectItem
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -100,7 +100,7 @@ export default defineComponent({
|
|||||||
render(ctx: any) {
|
render(ctx: any) {
|
||||||
return (
|
return (
|
||||||
<div class="cl-query">
|
<div class="cl-query">
|
||||||
{ctx.list.map((item: any, index: number) => {
|
{ctx.list2.map((item: any, index: number) => {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
class={{ "is-active": item.active }}
|
class={{ "is-active": item.active }}
|
||||||
|
|||||||
4
src/cool/modules/crud/types/form.d.ts
vendored
4
src/cool/modules/crud/types/form.d.ts
vendored
@ -37,8 +37,8 @@ export interface Form {
|
|||||||
op?: any;
|
op?: any;
|
||||||
dialog?: {
|
dialog?: {
|
||||||
props?: any;
|
props?: any;
|
||||||
hiddenControls: boolean;
|
hiddenControls?: boolean;
|
||||||
controls: Array<"fullscreen" | "close">;
|
controls?: Array<"fullscreen" | "close">;
|
||||||
};
|
};
|
||||||
_data?: any;
|
_data?: any;
|
||||||
}
|
}
|
||||||
|
|||||||
2
src/cool/modules/crud/types/render.d.ts
vendored
2
src/cool/modules/crud/types/render.d.ts
vendored
@ -1,4 +1,4 @@
|
|||||||
import { ComponentOptions } from "vue-demi";
|
import { ComponentOptions } from "vue";
|
||||||
|
|
||||||
export interface Options extends ComponentOptions {
|
export interface Options extends ComponentOptions {
|
||||||
name: string;
|
name: string;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { isFunction, isString, isObject } from "./index";
|
import { isFunction, isString, isObject, isEmpty } from "./index";
|
||||||
import { h, resolveComponent, toRaw } from "vue";
|
import { h, resolveComponent, toRaw } from "vue";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -20,19 +20,6 @@ const parseNode = (vnode: any, options: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (scope) {
|
|
||||||
// 添加双向绑定
|
|
||||||
vnode.modelValue = scope[prop];
|
|
||||||
vnode["onUpdate:modelValue"] = function (val: any) {
|
|
||||||
scope[prop] = val;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件实例渲染,转普通对象
|
|
||||||
if (vnode.render) {
|
|
||||||
return h(toRaw(vnode));
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件参数
|
// 组件参数
|
||||||
const props = {
|
const props = {
|
||||||
...vnode,
|
...vnode,
|
||||||
@ -40,8 +27,22 @@ const parseNode = (vnode: any, options: any) => {
|
|||||||
...vnode.props
|
...vnode.props
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 删除多余数据
|
||||||
delete props._children;
|
delete props._children;
|
||||||
|
|
||||||
|
if (props && scope) {
|
||||||
|
// 添加双向绑定
|
||||||
|
props.modelValue = scope[prop];
|
||||||
|
props["onUpdate:modelValue"] = function (val: any) {
|
||||||
|
scope[prop] = val;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件实例渲染,转普通对象
|
||||||
|
if (props.render) {
|
||||||
|
return h(toRaw(props));
|
||||||
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return h(resolveComponent(vnode.name), props, {
|
return h(resolveComponent(vnode.name), props, {
|
||||||
default: () => {
|
default: () => {
|
||||||
|
|||||||
@ -21,7 +21,14 @@ export default defineComponent({
|
|||||||
{
|
{
|
||||||
label: "姓名",
|
label: "姓名",
|
||||||
prop: "name",
|
prop: "name",
|
||||||
minWidth: 120
|
minWidth: 120,
|
||||||
|
component: {
|
||||||
|
name: "el-input",
|
||||||
|
props: {
|
||||||
|
size: "mini",
|
||||||
|
clearable: true
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "存款",
|
label: "存款",
|
||||||
@ -57,17 +64,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
onMounted(function () {
|
onMounted(function () {});
|
||||||
setTimeout(() => {
|
|
||||||
console.log("隐藏昵称");
|
|
||||||
refs.value.table.hiddenColumn("name");
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
console.log("显示昵称");
|
|
||||||
refs.value.table.showColumn("name");
|
|
||||||
}, 1000);
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
refs,
|
refs,
|
||||||
|
|||||||
@ -26,8 +26,7 @@ export default function () {
|
|||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
d.meta.iframeUrl = url;
|
d.meta.iframeUrl = url;
|
||||||
d.component = () =>
|
d.component = () => import(`/$/base/pages/iframe/index.vue`);
|
||||||
import(`/$/base/pages/iframe/index.vue`);
|
|
||||||
} else {
|
} else {
|
||||||
d.component = () => import(/* @vite-ignore */ `/@/${url}`);
|
d.component = () => import(/* @vite-ignore */ `/@/${url}`);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user