Merge pull request #15 from icssoa/vue3-ts-vite

添加 form-tabs 验证提示

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"scripts": {
 		"dev": "vite",
 		"build": "vue-tsc --noEmit --skipLibCheck && vite build",

src/cool/modules/crud/components/form-tabs.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
 import { useRefs } from "../hooks/core";
 import { isArray, isEmpty } from "../utils";
 
@@ -43,20 +43,22 @@ export default defineComponent({
 				const index = list.value.findIndex((e) => e.value === val);
 				const item = refs.value[`tab-${index}`];
 
-				// 下划线位置
+				if (item) {
-				line.width = item.clientWidth + "px";
+					// 下划线位置
-				line.transform = `translateX(${item.offsetLeft}px)`;
+					line.width = item.clientWidth + "px";
-				line.backgroundColor = props.color;
+					line.transform = `translateX(${item.offsetLeft}px)`;
+					line.backgroundColor = props.color;
 
-				// 靠左位置
+					// 靠左位置
-				let left: number = item.offsetLeft + item.clientWidth / 2 - 414 / 2 + 15;
+					let left: number = item.offsetLeft + item.clientWidth / 2 - 414 / 2 + 15;
 
-				if (left < 0) {
+					if (left < 0) {
-					left = 0;
+						left = 0;
+					}
+
+					// 设置滚动距离
+					refs.value.tabs.scrollLeft = left;
 				}
-
-				// 设置滚动距离
-				refs.value.tabs.scrollLeft = left;
 			});
 
 			active.value = val;
@@ -64,6 +66,14 @@ export default defineComponent({
 			emit("change", val);
 		}
 
+		// 监听绑定值变化
+		watch(
+			() => props.modelValue,
+			(val: any) => {
+				update(val);
+			}
+		);
+
 		onMounted(function () {
 			if (isArray(props.labels) && props.labels.length > 0) {
 				list.value = props.labels;

src/cool/modules/crud/components/form/index.tsx

@@ -128,30 +128,44 @@ export default defineComponent({
 		}
 
 		// 表单提交
-		function submit() {
+		function submit(callback?: Function) {
 			// 验证表单
-			refs.value.form.validate(async (valid: boolean) => {
+			refs.value.form.validate(async (valid: boolean, error: any) => {
+				console.log(valid, error);
 				if (valid) {
 					saving.value = true;
 
-					// 表单提交钩子
+					// 拷贝表单值
-					if (conf.on?.submit) {
+					const d = cloneDeep(form);
-						// 拷贝表单值
-						const d = cloneDeep(form);
 
-						// 过滤隐藏的表单项
+					// 过滤隐藏的表单项
-						conf.items.forEach((e: any) => {
+					conf.items.forEach((e: any) => {
-							if (e._hidden) {
+						if (e._hidden) {
-								delete d[e.prop];
+							delete d[e.prop];
-							}
+						}
-						});
+					});
 
-						conf.on.submit(d, {
+					const submit = callback || conf.on?.submit;
+
+					// 提交事件
+					if (submit) {
+						submit(d, {
 							done,
 							close
 						});
 					} else {
-						console.error("Submit is not found");
+						console.error("Not found callback function");
+					}
+				} else {
+					// 判断是否使用form-tabs，切换到对应的选项卡
+					const keys = Object.keys(error);
+
+					if (tabActive.value) {
+						const item = conf.items.find((e) => e.prop === keys[0]);
+
+						if (item) {
+							tabActive.value = item.group;
+						}
 					}
 				}
 			});
@@ -275,14 +289,7 @@ export default defineComponent({
 			// 表单项列表
 			const children = ctx.conf.items.map((e: any) => {
 				if (e.type == "tabs") {
-					return (
+					return <cl-form-tabs v-model={ctx.tabActive} {...e.props}></cl-form-tabs>;
-						<cl-form-tabs
-							v-model={ctx.tabActive}
-							{...e.props}
-							onChange={() => {
-								ctx.clearValidate();
-							}}></cl-form-tabs>
-					);
 				}
 
 				// 隐藏处理
@@ -302,12 +309,11 @@ export default defineComponent({
 				}
 
 				return (
-					e._group &&
 					!e._hidden && (
 						<el-col span={24} {...e}>
 							{e.component &&
 								h(
-									<el-form-item></el-form-item>,
+									<el-form-item v-show={e._group}></el-form-item>,
 									{
 										prop: e.prop,
 										rules: e.rules,