新建/编辑标识项做了表单校验；新建/编辑标识项，保存时做了数据重组操作；

src/views/assess/totalIndex/component/addSign.vue

@@ -1,21 +1,21 @@
 <template>
 	<div class="system-add-user-container">
-		<el-dialog title="新建标识项" v-model="isShowDialog" width="569px">
-			<el-form :model="ruleForm" size="default" label-width="90px">
+		<el-dialog :title="isEdit?'编辑标识项':'新建标识项'" v-model="isShowDialog" width="569px">
+			<el-form ref="ruleTagRef" :rules="rules" :model="ruleForm" size="default" label-width="90px">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="标识" required>
-							<el-input v-model="ruleForm.userName" placeholder="请输入标识" clearable></el-input>
+						<el-form-item label="标识" prop="name">
+							<el-input v-model="ruleForm.name" placeholder="请输入标识" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="名称" required>
-							<el-input v-model="ruleForm.phone" placeholder="请输入名称" clearable></el-input>
+						<el-form-item label="名称" prop="title">
+							<el-input v-model="ruleForm.title" placeholder="请输入名称" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item class="has-symbol" label="权重" required>
-							<el-input v-model="ruleForm.email" placeholder="请输入权重" clearable></el-input>
+						<el-form-item class="has-symbol" label="权重" prop="weight">
+							<el-input v-model="ruleForm.weight" placeholder="请输入权重" clearable></el-input>
 							<span class="symbol">%</span>
 						</el-form-item>
 					</el-col>
@@ -29,18 +29,18 @@
 
 				</div>
 				<div class="add-value-range-wrap">
-					<section class="add-value-range-item" v-for="(item, index) in ruleForm.list" :key="index">
+					<section class="add-value-range-item" v-for="(item, index) in ruleForm.ranges" :key="index">
 						<div class="left-wrap">
 							<span class="symbol">*</span>
 							<span class="label">取值范围</span>
-							<el-input size="small" v-model="item.minVal" placeholder="请输入最小值" clearable></el-input>
+							<el-input size="small" v-model="item.start_value" placeholder="请输入最小值" clearable></el-input>
 							<span> ～ </span>
-							<el-input size="small" v-model="item.maxVal" placeholder="请输入最大值" clearable></el-input>
+							<el-input size="small" v-model="item.end_value" placeholder="请输入最大值" clearable></el-input>
 						</div>
 						<div class="right-wrap">
 							<span class="symbol">*</span>
 							<span class="label">得分</span>
-							<el-input size="small" v-model="item.score" placeholder="请输入得分" clearable></el-input>
+							<el-input size="small" v-model="item.base_value" placeholder="请输入得分" clearable></el-input>
 						</div>
 						<el-button @click="deleteRange(index)" size="small" type="danger">删除</el-button>
 
@@ -50,7 +50,7 @@
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
+					<el-button type="primary" @click="onSubmit(ruleTagRef)" size="default">保 存</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -58,66 +58,79 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus';
 
 // 定义接口来定义对象的类型
 interface DeptData {
-	deptName: string;
-	createTime: string;
-	status: boolean;
-	sort: number | string;
-	describe: string;
-	id: number;
-	children?: DeptData[];
-}
-interface RangeData {
-	minVal: number | string;
-	maxVal: number | string;
-	score: number | string;
+	start_value: string;
+	end_value: string;
+	base_value: string;
 }
+// interface RangeData {
+// 	minVal: number | string;
+// 	maxVal: number | string;
+// 	score: number | string;
+// }
 interface UserState {
 	isShowDialog: boolean;
 	ruleForm: {
-		userName: string;
-		userNickname: string;
-		roleSign: string;
-		department: any;
-		phone: string;
-		email: string;
-		sex: string;
-		password: string;
-		overdueTime: string;
-		status: boolean;
-		describe: string;
-		list: Array<RangeData>;
+		name: string;
+		title: string;
+		weight: string;
+		ranges: Array<DeptData>;
 	};
-	deptData: Array<DeptData>;
+	index: any;
+	isEdit: Boolean;
+	// deptData: Array<DeptData>;
 }
 
 export default defineComponent({
 	name: 'systemAddUser',
-	setup() {
+	setup(prop, { emit }) {
 		const state = reactive<UserState>({
 			isShowDialog: false,
 			ruleForm: {
-				userName: '', // 账户名称
-				userNickname: '', // 用户昵称
-				roleSign: '', // 关联角色
-				department: [], // 部门
-				phone: '', // 手机号
-				email: '', // 邮箱
-				sex: '', // 性别
-				password: '', // 账户密码
-				overdueTime: '', // 账户过期
-				status: true, // 用户状态
-				describe: '', // 用户描述
-				list: []
+				name: '', // 标识
+				title: '', // 名称
+				weight: '', // 权重
+				ranges: []
 			},
-			deptData: [], // 部门数据
+			index: null,
+			isEdit: false
+		});
+		const ruleTagRef = ref<FormInstance>()
+		const rules = reactive<FormRules>({
+			name: [
+				{ required: true, message: '请输入标识', trigger: 'blur' },
+			],
+			title: [
+				{ required: true, message: '请输入名称', trigger: 'blur' },
+			],
+			weight: [
+				{ required: true, message: '请输入权重', trigger: 'blur' },
+			]
 		});
 		// 打开弹窗
-		const openDialog = () => {
+		const openDialog = (row:any, index: any, isEdit: Boolean) => {
+			console.log(row)
+			console.log(index)
+			console.log(isEdit)
+			
+			if(!isEdit) {
+				state.ruleForm = {
+					name: '', // 标识
+					title: '', // 名称
+					weight: '', // 权重
+					ranges: []
+				}
+			}
+			if(row) {
+				state.ruleForm = row
+			}
+			state.index = index
+			state.isEdit = isEdit
 			state.isShowDialog = true;
 		};
 		// 关闭弹窗
@@ -128,68 +141,93 @@ export default defineComponent({
 		const onCancel = () => {
 			closeDialog();
 		};
-		// 新增
-		const onSubmit = () => {
-			closeDialog();
-		};
+		// // 新增
+		// const onSubmit = () => {
+			
+			
+		// };
+		// 保存数据
+		const onSubmit = async (formEl: FormInstance | undefined) => {
+			console.log(formEl)
+			if (!formEl) return
+			await formEl.validate((valid, fields) => {
+				console.log(valid)
+				if (valid) {
+					console.log('submit!')
+					if(state.ruleForm.ranges.length) {
+						let item = state.ruleForm.ranges[state.ruleForm.ranges.length-1]
+						const { start_value, end_value, base_value } = item
+						if(!start_value || !end_value || !base_value.toString()) {
+							ElMessage.error('请完善表单');
+							return 
+						}
+					}
+					emit('handleChange', state.ruleForm, state.index, state.isEdit)
+					closeDialog();
+				} else {
+					console.log('error submit!', fields)
+				}
+			})
+		}
 		// 初始化部门数据
-		const initTableData = () => {
-			state.deptData.push({
-				deptName: 'vueNextAdmin',
-				createTime: new Date().toLocaleString(),
-				status: true,
-				sort: Math.random(),
-				describe: '顶级部门',
-				id: Math.random(),
-				children: [
-					{
-						deptName: 'IT外包服务',
-						createTime: new Date().toLocaleString(),
-						status: true,
-						sort: Math.random(),
-						describe: '总部',
-						id: Math.random(),
-					},
-					{
-						deptName: '资本控股',
-						createTime: new Date().toLocaleString(),
-						status: true,
-						sort: Math.random(),
-						describe: '分部',
-						id: Math.random(),
-					},
-				],
-			});
-			state.ruleForm.list = [{
-				minVal: 10,
-				maxVal: 100,
-				score: 90
-			}]
-		};
+		// const initTableData = () => {
+		// 	state.deptData.push({
+		// 		deptName: 'vueNextAdmin',
+		// 		createTime: new Date().toLocaleString(),
+		// 		status: true,
+		// 		sort: Math.random(),
+		// 		describe: '顶级部门',
+		// 		id: Math.random(),
+		// 		children: [
+		// 			{
+		// 				deptName: 'IT外包服务',
+		// 				createTime: new Date().toLocaleString(),
+		// 				status: true,
+		// 				sort: Math.random(),
+		// 				describe: '总部',
+		// 				id: Math.random(),
+		// 			},
+		// 			{
+		// 				deptName: '资本控股',
+		// 				createTime: new Date().toLocaleString(),
+		// 				status: true,
+		// 				sort: Math.random(),
+		// 				describe: '分部',
+		// 				id: Math.random(),
+		// 			},
+		// 		],
+		// 	});
+		// 	state.ruleForm.list = [{
+		// 		minVal: 10,
+		// 		maxVal: 100,
+		// 		score: 90
+		// 	}]
+		// };
 		const addRange = () => {
-			if(!state.ruleForm.list.length) {
-				state.ruleForm.list.push({
-					minVal: '',
-					maxVal: '',
-					score: ''
+			console.log(state.ruleForm)
+			if(!state.ruleForm.ranges.length) {
+				state.ruleForm.ranges.push({
+					start_value: '',
+					end_value: '',
+					base_value: ''
 				})
 				return
 			}
-			let item = state.ruleForm.list[state.ruleForm.list.length-1]
-			const { minVal, maxVal, score } = item
-			if(!minVal || !maxVal || !score.toString()) {
+			let item = state.ruleForm.ranges[state.ruleForm.ranges.length-1]
+			const { start_value, end_value, base_value } = item
+			if(!start_value || !end_value || !base_value.toString()) {
 				ElMessage.error('请完善表单');
 				return 
 			}
-			state.ruleForm.list.push({
-				minVal: '',
-				maxVal: '',
-				score: ''
+			state.ruleForm.ranges.push({
+				start_value: '',
+				end_value: '',
+				base_value: ''
 			})
 		};
 		const deleteRange = (index: number) => {
 			console.log(index)
-			state.ruleForm.list.splice(index, 1)
+			state.ruleForm.ranges.splice(index, 1)
 			// const { minVal, maxVal, score } = item
 			// if(!minVal || !maxVal || !score.toString()) {
 			// 	ElMessage.error('请完善表单');
@@ -203,9 +241,11 @@ export default defineComponent({
 		};
 		// 页面加载时
 		onMounted(() => {
-			initTableData();
+			// initTableData();
 		});
 		return {
+			rules,
+			ruleTagRef,
 			openDialog,
 			closeDialog,
 			addRange,