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,6 +43,7 @@ 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)`;
@@ -57,6 +58,7 @@ export default defineComponent({
 
 					// 设置滚动距离
 					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,14 +128,13 @@ 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);
 
@@ -146,12 +145,27 @@ export default defineComponent({
 						}
 					});
 
-						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,