优化 crud 模块

This commit is contained in:
icssoa 2021-04-05 17:00:08 +08:00
parent dd4d25e215
commit 8e1a4a4705
10 changed files with 56 additions and 52 deletions

View File

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

View File

@ -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")}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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: () => {

View File

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

View File

@ -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}`);
} }