优化crud模块

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

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) => {
+			render(
-				if (e.roleName) {
+				list.map((e: any) => {
-					e.roleNameList = e.roleName.split(",");
+					if (e.roleName) {
-				}
+						e.roleNameList = e.roleName.split(",");
+					}
 
-				e.status = Boolean(e.status);
+					e.status = Boolean(e.status);
-			});
 
-			render(list);
+					return e;
+				})
+			);
 		}
 
 		// 提交钩子

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

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, Form } from "../../types";
-import { Browser } from "../../types";
 
 export default defineComponent({
 	name: "cl-form",
@@ -40,18 +40,14 @@ export default defineComponent({
 		const form = setFormData();
 
 		// 表单配置
-		const conf = reactive<any>({
+		const conf = reactive<Form>({
 			title: "自定义表单",
 			width: "50%",
 			props: {
 				size: "small",
 				labelWidth: "100px"
 			},
-			on: {
+			on: {},
-				open: null,
-				submit: null,
-				close: null
-			},
 			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,

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<TableColumn[]>,
 			required: true,
 			default: () => []
 		},
@@ -62,6 +63,9 @@ export default defineComponent({
 			sort
 		} = useElTableApi({ refs });
 
+		// 是否可见，用于解决一些显示隐藏的副作用
+		const visible = ref<boolean>(true);
+
 		// 列表数据
 		const data = ref<Array<any>>([]);
 
@@ -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}></el-table>
 		);
 
-		return h(
+		return ctx.visible
-			ElTable,
+			? h(
-			{
+					ElTable,
-				onSortChange: ctx.onSortChange,
+					{
-				maxHeight: ctx.autoHeight ? ctx.maxHeight : null,
+						onSortChange: ctx.onSortChange,
-				...ctx.props,
+						maxHeight: ctx.autoHeight ? ctx.maxHeight : null,
-				onSelectionChange: ctx.onSelectionChange,
+						...ctx.props,
-				onRowContextmenu: ctx.onRowContextMenu
+						onSelectionChange: ctx.onSelectionChange,
-			},
+						onRowContextmenu: ctx.onRowContextMenu
-			{
+					},
-				default() {
+					{
-					return renderColumn();
+						default() {
-				},
+							return renderColumn();
-				empty() {
+						},
-					return (
+						empty() {
-						<div class="cl-table__empty">{ctx.$slots.empty && ctx.$slots.empty()}</div>
+							return (
-					);
+								<div class="cl-table__empty">
-				},
+									{ctx.$slots.empty && ctx.$slots.empty()}
-				append() {
+								</div>
-					return (
+							);
-						<div class="cl-table__append">
+						},
-							{ctx.$slots.append && ctx.$slots.append()}
+						append() {
-						</div>
+							return (
-					);
+								<div class="cl-table__append">
-				}
+									{ctx.$slots.append && ctx.$slots.append()}
-			}
+								</div>
-		);
+							);
+						}
+					}
+			  )
+			: null;
 	}
 });

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<UpsertItem[]>,
 			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);

src/cool/modules/crud/static/index.scss

@@ -58,6 +58,10 @@
 
 	&__select {
 		margin-right: 10px;
+
+		.el-input__inner {
+			width: 120px;
+		}
 	}
 
 	&__input {

src/cool/modules/crud/types/form.d.ts

@@ -27,12 +27,20 @@ export interface Form {
 	title?: string;
 	width?: string;
 	props?: any;
-	items?: Array<FormItem>;
+	items: Array<FormItem>;
+	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 {

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;

src/cool/modules/demo/components/crud/table.vue

@@ -1,15 +1,18 @@
 <template>
 	<div class="demo-table">
-		<cl-table :columns="columns" />
+		<cl-table :ref="setRefs('table')" :columns="columns" />
 	</div>
 </template>
 
 <script lang="ts">
 import { TableColumn } from "/$/crud/types";
-import { defineComponent, ref } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
+import { useRefs } from "/@/core";
 
 export default defineComponent({
 	setup() {
+		const { refs, setRefs } = useRefs();
+
 		const columns = ref<TableColumn[]>([
 			{
 				type: "selection",
@@ -54,7 +57,21 @@ export default defineComponent({
 			}
 		]);
 
+		onMounted(function () {
+			setTimeout(() => {
+				console.log("隐藏昵称");
+				refs.value.table.hiddenColumn("name");
+
+				setTimeout(() => {
+					console.log("显示昵称");
+					refs.value.table.showColumn("name");
+				}, 1000);
+			}, 1000);
+		});
+
 		return {
+			refs,
+			setRefs,
 			columns
 		};
 	}

src/cool/modules/demo/components/crud/test.vue

@@ -6,6 +6,8 @@
 import { defineComponent, ref } from "vue";
 
 export default defineComponent({
+	name: "crud-test",
+
 	setup() {
 		const value = ref<string>("Value：" + Math.random());