feat: 动态表单字段Id唯一值校验

src/views/flow/create/components/FormDesign.vue

@@ -7,13 +7,27 @@ import { onMounted, ref } from 'vue'
 const flowStore = useFlowStore()
 const { processForm } = storeToRefs(flowStore)
 const designer = ref()
+
 const exportJsonEv = async json => {
 	designer.value.saveAsForm()
 }
+
+// 保存当前的表单数据
 const exportJson = async json => {
 	processForm.value = JSON.stringify(json)
 }
 
+/**
+ * 1、拿到store中的值，然后循环判表单字段的Id是否唯一
+ * 2、如果不唯一，提示用户需要重新填写表单字段Id
+ */
+const validateOnlyEv = () => {
+	const finallyFormData = JSON.parse(processForm.value)
+	const fields = finallyFormData.map(item => item.field)
+	return fields.some((item, index) => fields.indexOf(item) !== index) // 如果发现重复项，返回true；否则，返回false
+}
+
+// 初始化的时候，渲染当前组件的值
 onMounted(() => {
 	if (processForm.value) {
 		designer.value.initForm(processForm.value || [])
@@ -21,7 +35,8 @@ onMounted(() => {
 })
 
 defineExpose({
-	exportJsonEv
+	exportJsonEv,
+	validateOnlyEv
 })
 </script>
 

src/views/flow/create/index.vue

@@ -43,6 +43,7 @@ import FormDesignTab from './components/FormDesign.vue'
 import { useRoute, useRouter } from 'vue-router'
 import process from '@/api/flow/process'
 import useStore from '@/store'
+import { ElMessage } from 'element-plus'
 const { tagsView } = useStore()
 const router = useRouter()
 const route = useRoute()
@@ -116,7 +117,7 @@ const submitHandler = async () => {
 	removeCurTab()
 }
 
-// 切换选项卡
+// 切换选项卡之前，做相应的保存操作
 const changeTab = () => {
 	if (activeName.value === '表单设计') {
 		dyncComponent.value.exportJsonEv()
@@ -127,6 +128,13 @@ const changeTab = () => {
 
 const activeComponent = item => {
 	changeTab()
+	// 这里针对表单设计单独处理,如果不符合条件,则不允许切换
+	if (activeName.value === '表单设计') {
+		const leavePageFlag = dyncComponent.value.validateOnlyEv() // FormDesign.vue中的方法
+		if (leavePageFlag) {
+			return ElMessage.error(`请确认当前表单中的字段Id值是唯一的`)
+		}
+	}
 	activeName.value = item.label
 }