diff --git a/package.json b/package.json index 5001ea1..e008ef2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "front-next", - "version": "0.2.1", + "version": "0.2.2", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit --skipLibCheck && vite build", diff --git a/src/cool/modules/base/views/user.vue b/src/cool/modules/base/views/user.vue index a5c50c0..a03e6f8 100644 --- a/src/cool/modules/base/views/user.vue +++ b/src/cool/modules/base/views/user.vue @@ -410,15 +410,17 @@ export default defineComponent({ async function onRefresh(params: any, { next, render }: any) { const { list } = await next(params); - list.map((e: any) => { - if (e.roleName) { - e.roleNameList = e.roleName.split(","); - } + render( + list.map((e: any) => { + if (e.roleName) { + e.roleNameList = e.roleName.split(","); + } - e.status = Boolean(e.status); - }); + e.status = Boolean(e.status); - render(list); + return e; + }) + ); } // 提交钩子 diff --git a/src/cool/modules/crud/components/crud/helper.ts b/src/cool/modules/crud/components/crud/helper.ts index cfac0ab..ac5e5ee 100644 --- a/src/cool/modules/crud/components/crud/helper.ts +++ b/src/cool/modules/crud/components/crud/helper.ts @@ -125,7 +125,7 @@ export function useRequest({ mitt, props, crud }: any) { type: "warning" }) .then((res: any) => { - if (res === "crudirm") { + if (res === "confirm") { // 验证方法 if (!crud.service[reqName]) { return reject(`Request function '${reqName}' is not fount`); diff --git a/src/cool/modules/crud/components/form/index.tsx b/src/cool/modules/crud/components/form/index.tsx index b138b89..e24f883 100644 --- a/src/cool/modules/crud/components/form/index.tsx +++ b/src/cool/modules/crud/components/form/index.tsx @@ -1,11 +1,11 @@ import { defineComponent, h, inject, nextTick, provide, reactive, ref, watch } from "vue"; import cloneDeep from "clone-deep"; +import { useAction } from "./helper"; import { useRefs, useForm } from "../../hooks/core"; -import { deepMerge, isBoolean, isEmpty, isFunction, isObject, isString } from "../../utils"; +import { deepMerge, isBoolean, isEmpty, isObject, isString } from "../../utils"; import Parse from "../../utils/parse"; import { renderNode } from "../../utils/vnode"; -import { useAction } from "./helper"; -import { Browser } from "../../types"; +import { Browser, Form } from "../../types"; export default defineComponent({ name: "cl-form", @@ -40,18 +40,14 @@ export default defineComponent({ const form = setFormData(); // 表单配置 - const conf = reactive({ + const conf = reactive
({ title: "自定义表单", width: "50%", props: { size: "small", labelWidth: "100px" }, - on: { - open: null, - submit: null, - close: null - }, + on: {}, op: { hidden: false, saveButtonText: "保存", @@ -111,7 +107,7 @@ export default defineComponent({ // 表单关闭前事件 function beforeClose() { - if (conf.on.close) { + if (conf.on?.close) { conf.on.close(close); } else { close(); @@ -135,7 +131,8 @@ export default defineComponent({ saving.value = true; // 表单提交钩子 - if (isFunction(conf.on.submit)) { + if (conf.on?.submit) { + // 拷贝表单值 const d = cloneDeep(form); // 过滤隐藏的表单项 @@ -157,14 +154,16 @@ export default defineComponent({ } // 打开表单 - function open(options?: any) { + function open(options?: Form) { if (!options) { - options = {}; + options = { + items: [] + }; } clear(); - // Merge conf + // 合并配置 for (const i in conf) { switch (i) { case "items": @@ -187,7 +186,7 @@ export default defineComponent({ visible.value = true; // 预设表单值 - if (options.form) { + if (options?.form) { for (const i in options.form) { form[i] = options.form[i]; } @@ -201,15 +200,15 @@ export default defineComponent({ }); // 打开回调 - if (conf.on.open) { - nextTick(() => { + nextTick(() => { + if (conf.on?.open) { conf.on.open(form, { close, submit, done }); - }); - } + } + }); return { showLoading, diff --git a/src/cool/modules/crud/components/table/index.tsx b/src/cool/modules/crud/components/table/index.tsx index d6176fa..f747da8 100644 --- a/src/cool/modules/crud/components/table/index.tsx +++ b/src/cool/modules/crud/components/table/index.tsx @@ -1,17 +1,18 @@ import { defineComponent, h, inject, nextTick, onMounted, ref } from "vue"; +import type { PropType } from "vue"; import ContextMenu from "../context-menu/index"; import { useElTableApi } from "./helper"; -import { cloneDeep, isArray, isEmpty, isFunction, isNull } from "../../utils"; +import { cloneDeep, isArray, isEmpty, isFunction, isNull, isBoolean } from "../../utils"; import { renderNode } from "../../utils/vnode"; import { useRefs } from "../../hooks/core"; -import { Crud, Mitt, Browser } from "../../types"; +import { Crud, Mitt, Browser, TableColumn } from "../../types"; export default defineComponent({ name: "cl-table", props: { columns: { - type: Array, + type: Array as PropType, required: true, default: () => [] }, @@ -62,6 +63,9 @@ export default defineComponent({ sort } = useElTableApi({ refs }); + // 是否可见,用于解决一些显示隐藏的副作用 + const visible = ref(true); + // 列表数据 const data = ref>([]); @@ -246,8 +250,29 @@ export default defineComponent({ }); } + // 显示列 + function showColumn(prop: string | string[], status?: boolean) { + const keys = isArray(prop) ? prop : [prop]; + visible.value = false; + + props.columns + .filter((e) => (e.prop ? keys.includes(e.prop) : false)) + .forEach((e) => { + e.hidden = isBoolean(status) ? status : false; + }); + + nextTick(() => { + visible.value = true; + }); + } + + // 隐藏列 + function hiddenColumn(prop: string | string[]) { + showColumn(prop, true); + } + // 监听事件 - (function mittEvent() { + (function () { // 刷新事件 mitt.on("crud.refresh", ({ list }: any) => { data.value = list; @@ -260,7 +285,7 @@ export default defineComponent({ })(); // 设置请求参数 - (function setParams() { + (function () { const { order, prop } = props.props["default-sort"] || {}; if (order && prop) { @@ -275,9 +300,12 @@ export default defineComponent({ return { refs, + visible, data, maxHeight, setRefs, + showColumn, + hiddenColumn, onSelectionChange, onSortChange, onRowContextMenu, @@ -480,32 +508,36 @@ export default defineComponent({ data={ctx.data}> ); - return h( - ElTable, - { - onSortChange: ctx.onSortChange, - maxHeight: ctx.autoHeight ? ctx.maxHeight : null, - ...ctx.props, - onSelectionChange: ctx.onSelectionChange, - onRowContextmenu: ctx.onRowContextMenu - }, - { - default() { - return renderColumn(); - }, - empty() { - return ( -
{ctx.$slots.empty && ctx.$slots.empty()}
- ); - }, - append() { - return ( -
- {ctx.$slots.append && ctx.$slots.append()} -
- ); - } - } - ); + return ctx.visible + ? h( + ElTable, + { + onSortChange: ctx.onSortChange, + maxHeight: ctx.autoHeight ? ctx.maxHeight : null, + ...ctx.props, + onSelectionChange: ctx.onSelectionChange, + onRowContextmenu: ctx.onRowContextMenu + }, + { + default() { + return renderColumn(); + }, + empty() { + return ( +
+ {ctx.$slots.empty && ctx.$slots.empty()} +
+ ); + }, + append() { + return ( +
+ {ctx.$slots.append && ctx.$slots.append()} +
+ ); + } + } + ) + : null; } }); diff --git a/src/cool/modules/crud/components/upsert/index.tsx b/src/cool/modules/crud/components/upsert/index.tsx index 5262f8d..bbaf741 100644 --- a/src/cool/modules/crud/components/upsert/index.tsx +++ b/src/cool/modules/crud/components/upsert/index.tsx @@ -1,8 +1,9 @@ import { ElMessage } from "element-plus"; import { defineComponent, h, inject, ref } from "vue"; +import type { PropType } from "vue"; import { useFormApi } from "./helper"; import { useForm, useRefs } from "../../hooks/core"; -import { Crud } from "../../types"; +import { Crud, UpsertItem } from "../../types"; export default defineComponent({ name: "cl-upsert", @@ -17,7 +18,7 @@ export default defineComponent({ }, // 表单项 items: { - type: Array, + type: Array as PropType, default: () => [] }, // el-form 参数 @@ -258,7 +259,7 @@ export default defineComponent({ } // 消息事件 - (function mittEvent() { + (function () { mitt.on("crud.add", add); mitt.on("crud.append", append); mitt.on("crud.edit", edit); diff --git a/src/cool/modules/crud/static/index.scss b/src/cool/modules/crud/static/index.scss index f6d2ae3..f5b05b5 100644 --- a/src/cool/modules/crud/static/index.scss +++ b/src/cool/modules/crud/static/index.scss @@ -58,6 +58,10 @@ &__select { margin-right: 10px; + + .el-input__inner { + width: 120px; + } } &__input { diff --git a/src/cool/modules/crud/types/form.d.ts b/src/cool/modules/crud/types/form.d.ts index d11c731..2327cd9 100644 --- a/src/cool/modules/crud/types/form.d.ts +++ b/src/cool/modules/crud/types/form.d.ts @@ -27,12 +27,20 @@ export interface Form { title?: string; width?: string; props?: any; - items?: Array; + items: Array; + form?: any; on?: { open?(form: any, { close, submit, done }: any): void; - close?(): void; + close?(done: Function): void; submit?(data: any, { done, close }: any): void; }; + op?: any; + dialog?: { + props?: any; + hiddenControls: boolean; + controls: Array<"fullscreen" | "close">; + }; + _data?: any; } export interface FormRef { diff --git a/src/cool/modules/crud/types/table.d.ts b/src/cool/modules/crud/types/table.d.ts index 3761b01..7f06972 100644 --- a/src/cool/modules/crud/types/table.d.ts +++ b/src/cool/modules/crud/types/table.d.ts @@ -16,7 +16,9 @@ export interface TableOptions { } export interface TableColumn { + value?: any; type?: "index" | "selection" | "expand" | "op"; + hidden?: boolean | (({ scope }: any) => boolean); component?: RenderOptions; dict?: Array<{ label: string; diff --git a/src/cool/modules/demo/components/crud/table.vue b/src/cool/modules/demo/components/crud/table.vue index afbd34a..3dac1ef 100644 --- a/src/cool/modules/demo/components/crud/table.vue +++ b/src/cool/modules/demo/components/crud/table.vue @@ -1,15 +1,18 @@