批量添加验证

Web/package.json

@@ -53,7 +53,8 @@
 		"vue-router": "^4.2.5",
 		"vue-signature-pad": "^3.0.2",
 		"vue3-tree-org": "^4.2.2",
-		"xlsx-js-style": "^1.2.0"
+		"xlsx-js-style": "^1.2.0",
+		"async-validator": "^4.2.5"
 	},
 	"devDependencies": {
 		"@types/lodash-es": "^4.17.12",

Web/src/components/table/TableEditor.vue

@@ -40,6 +40,9 @@
 </template>
 <script lang="ts" setup>
 import { reactive } from 'vue';
+import { ElMessage, dayjs } from 'element-plus';
+import AsyncValidator from 'async-validator'; 
+import { isDate, isString } from 'lodash-es';
 const props = defineProps({
 	value: {
 		type: Array<any>,
@@ -49,6 +52,9 @@ const props = defineProps({
 		type: Array<any>,
 		default: () => [],
 	},
+	rules: {
+		type: Object,
+	},
 	params: {
 		type: Object,
 	},
@@ -75,7 +81,40 @@ function del(record: any, index: number) {
 	emit('update:value', vm.value);
 	emit('delete', { value: vm.value, record });
 }
-function add() {
+async function add() {
+	let msgs: string[] = [];
+
+	for (const field in props.rules) {
+		let rule = props.rules[field];
+
+		let val = vm.formData[field];
+		if(val){
+			if(isDate(val) ){
+			val=dayjs(val).format(props.columns.filter(m=>m.field==field)[0]
+			.format|| 'YYYY-MM-DD'); 
+			vm.formData[field]=val;
+			}else if (!isString(val)) {
+				val= val.toString();
+			}
+		}
+		const validator = new AsyncValidator({
+			[field]: rule,
+		});
+		await validator.validate({ [field]: val }, { firstFields: true }).catch((error: any) => {
+			var _a, _b;
+			const { errors, fields } = error;
+			if (!errors || !fields) {
+				console.error(error);
+			}
+			if (errors) {
+				msgs.push((_b = (_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) != null ? _b : `${field} 必填！`);
+			}
+		});
+	}
+	if (msgs.length > 0) {
+		ElMessage.error(msgs.join('。'));
+		return;
+	}
 	for (const key in props.params) {
 		vm.formData[key] = props.params[key];
 	}

Web/src/views/main/dm_ApplyDemo/component/patchEditDialog.vue

@@ -7,7 +7,7 @@
 					<span>{{ props.title }}</span>
 				</div>
 			</template>
-			<TableEditor :columns="editFormSchema" :v-model:value="vm.value"></TableEditor>
+			<TableEditor :columns="editFormSchema" :v-model:value="vm.value" :rules="rules"></TableEditor>
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="cancel">取 消</el-button>
@@ -45,18 +45,17 @@
 	const ruleForm = ref<any>({});
 	//自行添加其他规则
 	const rules = ref<FormRules>({
+        orgType: [{ required: true, message: '请输入机构类型！', trigger: 'blur',},],
         applyNO: [{ required: true, message: '请输入申请号！', trigger: 'blur',},],
         applicatDate: [{ required: true, message: '请选择申请时间！', trigger: 'change',},],
         amount: [{ required: true, message: '请输入申请金额！', trigger: 'blur',},],
-        remark: [{ required: true, message: '请输入备注！', trigger: 'blur',},],
+  //      remark: [{ required: true, message: '请输入备注！', trigger: 'blur',},],
 	});
  const editFormSchema = [
   {
     label: 'id',
     field: 'id',
     component: 'el-input',
-    required: false,
-    colProps: { span: 6 },
     ifShow: false,
   }, 
   {
@@ -66,43 +65,31 @@
     componentProps: {
       options: dl('org_type'),
     },
-    required: false,
-    colProps: { span: 6 },
   },
   {
     label: '申请号',
     field: 'applyNO',
     component: 'el-input',
-    required: false,
-    colProps: { span: 6 },
   },
   {
     label: '申请时间',
     field: 'applicatDate',
     component: 'el-date-picker',
-    required: false,
-    colProps: { span: 6 },
   },
   {
     label: '申请金额',
     field: 'amount',
     component: 'el-input-number',
-    required: false,
-    colProps: { span: 6 },
   },
   {
     label: '是否通知',
     field: 'isNotice',
     component: 'el-switch',
-    required: false,
-    colProps: { span: 6 },
   },
   {
     label: '备注',
     field: 'remark',
     component: 'el-input',
-    required: false,
-    colProps: { span: 6 },
   },
 ];