fix: 修复由于 er-form-editor 插件内嵌 提供的数据 修改后 无法同步导致 涉及options 派发新值 无法完成的问题

src/components/packages/formEditor/index.vue

@@ -440,10 +440,10 @@ const setData1 = data => {
 	// console.log(newData.list[0].columns[0].list[0][0].columns[0])
 	isShow.value = false
 	// console.log(data.list.slice(data.list.length - 1))
-	state.store = newData.list
+	state.store = newData.list || []
 	// state.store = data.list.slice(data.list.length - 1)
-	state.config = newData.config
-	state.data = newData.data
+	state.config = newData.config || {}
+	state.data = newData.data || {}
 	state.fields = newData.fields
 	state.logic = newData.logic
 	setSelection(state.config)
@@ -494,13 +494,6 @@ const getData = () => {
 	}
 }
 const setData = props.layoutType === 1 ? setData1 : setData2
-defineExpose({
-	switchPlatform(platform) {
-		switchPlatform(platform)
-	},
-	setData,
-	getData
-})
 const handleOperation = (type, val) => {
 	switch (type) {
 		case 1:
@@ -571,6 +564,14 @@ provide('Everright', {
 	getData,
 	dictParentList
 })
+defineExpose({
+	switchPlatform(platform) {
+		switchPlatform(platform)
+	},
+	setData,
+	getData,
+	handleOperation
+})
 </script>
 <template>
 	<el-dialog v-model="state.previewVisible" destroy-on-close fullscreen :class="[ns.e('previewDialog')]" @closed="previewPlatform = pc">

src/layout/components/AppMain.vue

@@ -5,7 +5,7 @@
 		<router-view v-slot="{ Component, route }">
 			<transition :name="pageAnimateMode" mode="out-in">
 				<keep-alive :include="cachedViews">
-					<component :is="Component" :key="route.fullPath" />
+					<component :is="Component" :key="getCompKey(route)" />
 				</keep-alive>
 			</transition>
 		</router-view>
@@ -19,11 +19,17 @@
 import { computed, watch } from 'vue'
 import useStore from '@/store'
 import Footer from '@/layout/components/Footer/index.vue'
+import { AppRouteRecordRaw } from '@/router/types'
 import Tabs from '@/layout/components/Tabs/index.vue'
 import MaximizeQuit from './MaximizeQuit.vue'
 const { tagsView, setting } = useStore()
 const tabsVisible = computed(() => setting.tabsVisible)
 const cachedViews = computed(() => tagsView.cachedViews)
+
+const getCompKey = (route: AppRouteRecordRaw) => {
+	if (route.name === 'flow_create_index') return route.path
+	return route.fullPath
+}
 const pageAnimateMode = computed(() => (setting.animate ? setting.animateMode : undefined))
 watch(
 	() => setting.contentMaximize,

src/store/modules/flow.ts

@@ -1,52 +1,57 @@
 import { defineStore } from 'pinia'
 
+const initialState = () => {
+	return {
+		processType: '', // child: 子流程，main: 主流程 business: 业务流程
+		storeInfoName: '',
+		processId: '',
+		processKey: '', // 唯一标识
+		processName: '', // 流程定义名称
+		processIcon: 'approval', // 流程图标
+		categoryId: '', // 流程组分类ID
+		remark: '', // 备注说明
+		createTime: '', // 创建时间
+		useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
+		formId: undefined, //业务审批 表单Id
+		// processActorList: [
+		// 	{
+		// 		actorId: 0, // 参与者ID
+		// 		actorName: '', // 参与者
+		// 		actorType: 0 // 参与者类型 0，用户 1，部门 2，用户组
+		// 	}
+		// ], // 流程参与者，当使用范围为指定人员时候设置
+		processPermissionList: [], // 流程定义权限
+
+		cacheSwitch: false, // 缓存开关
+		modelContent: '', // 流程模型定义JSON内容
+		// processForm: {}, // 流程定义表单
+		processForm: '{}', // 流程定义表单
+		businessForm: {},
+		processSetting: {
+			allowRevocation: true, // 允许撤销审批中的申请
+			allowRevocationDay: true, // 允许撤销指定天内通过的审批
+			allowUpdateDay: true, // 允许修改指定天内通过的审批
+			allowDelegate: true, // 允许代他人提交
+			allowBatchOperate: true, // 允许审批人批量处理
+			secondOperatePrompt: true, // 开启秒批提示
+			repeatOperateSkip: true // 重复审批跳过
+		} //流程定义配置
+	}
+}
 // 审核条目
 export const useFlowStore = defineStore({
 	id: 'flow',
-	state: () => {
-		return {
-			processType: '', // child: 子流程，main: 主流程 business: 业务流程
-			storeInfoName: '',
-			processId: '',
-			processKey: '', // 唯一标识
-			processName: '', // 流程定义名称
-			processIcon: 'approval', // 流程图标
-			categoryId: '', // 流程组分类ID
-			remark: '', // 备注说明
-			createTime: '', // 创建时间
-			useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
-			formId: undefined, //业务审批 表单Id
-			// processActorList: [
-			// 	{
-			// 		actorId: 0, // 参与者ID
-			// 		actorName: '', // 参与者
-			// 		actorType: 0 // 参与者类型 0，用户 1，部门 2，用户组
-			// 	}
-			// ], // 流程参与者，当使用范围为指定人员时候设置
-			processPermissionList: [], // 流程定义权限
-
-			cacheSwitch: false, // 缓存开关
-			modelContent: '', // 流程模型定义JSON内容
-			// processForm: {}, // 流程定义表单
-			processForm: '{}', // 流程定义表单
-			businessForm: {},
-			processSetting: {
-				allowRevocation: true, // 允许撤销审批中的申请
-				allowRevocationDay: true, // 允许撤销指定天内通过的审批
-				allowUpdateDay: true, // 允许修改指定天内通过的审批
-				allowDelegate: true, // 允许代他人提交
-				allowBatchOperate: true, // 允许审批人批量处理
-				secondOperatePrompt: true, // 开启秒批提示
-				repeatOperateSkip: true // 重复审批跳过
-			} //流程定义配置
-		}
-	},
+	state: initialState,
 	getters: {},
 	actions: {
 		initState(title: string) {
 			console.log('init materialInfoStore')
 			this.storeInfoName = title || '流程审核'
 		},
+		// 数据重置
+		reset() {
+			Object.assign(this, initialState())
+		},
 		// 表单信息
 		setProcessForm(value: any) {
 			this.processForm = value

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

@@ -35,20 +35,11 @@ const validate = () => {
 	})
 }
 
-// onBeforeUnmount(() => {
-// 	const formData = EReditorRef.value.getData()
-// 	if (formData.hasOwnProperty('fields')) {
-// 		// 离开前 做处理
-// 		// const { fields } = formData
-// 		// console.log(fields.length, '=======')
-// 	} else {
-// 		ElMessage.error(`表单设计有误，请重新配置`)
-// 	}
-// })
-
 const updateCompInfo = () => {
 	if (processForm.value) {
 		// {formStructure: 表单结构值, formData: {}}
+		// 清空-原始数据
+		EReditorRef.value?.handleOperation(2)
 		const { formStructure } = JSON.parse(processForm.value)
 		EReditorRef.value.setData(formStructure || {})
 	}
@@ -58,7 +49,16 @@ const updateCompInfo = () => {
 onMounted(() => {
 	updateCompInfo()
 })
-
+// onBeforeUnmount(() => {
+// 	const formData = EReditorRef.value.getData()
+// 	if (formData.hasOwnProperty('fields')) {
+// 		// 离开前 做处理
+// 		// const { fields } = formData
+// 		// console.log(fields.length, '=======')
+// 	} else {
+// 		ElMessage.error(`表单设计有误，请重新配置`)
+// 	}
+// })
 defineExpose({
 	exportJsonEv,
 	validate,

src/views/flow/create/index.vue

@@ -31,14 +31,14 @@
 				<el-button v-show="!isView" type="primary" @click="submitHandler">发布</el-button>
 			</div>
 		</div>
-		<div class="create-approval-main">
+		<div v-loading="loading" class="create-approval-main">
 			<component :is="item.component" v-for="(item, idx) in componentsArr" v-show="item.value === activeTab" ref="compRefs" :key="idx" />
 		</div>
 	</div>
 </template>
 
-<script setup name="flow_create">
-import { computed, nextTick, ref } from 'vue'
+<script setup name="flow_create_index">
+import { computed, nextTick, ref, onActivated } from 'vue'
 import { storeToRefs } from 'pinia'
 import useFlowStore from '@/store/modules/flow'
 import BasicInfoTab from './components/BasicInfo.vue'
@@ -54,6 +54,7 @@ const { tagsView } = useStore()
 const router = useRouter()
 const route = useRoute()
 const flowStore = useFlowStore()
+const loading = ref(false)
 const { categoryId, processId, processIcon, processKey, processName, remark, modelContent, processForm, processSetting, processPermissionList } =
 	storeToRefs(flowStore)
 const compRefs = ref() // 实例化子组件
@@ -187,40 +188,66 @@ const queryObj = computed(() => route.query)
 const isView = computed(() => {
 	return queryObj.value?.view === '1'
 })
-const getCurrentProcessDetailEv = () => {
-	flowStore.setProcessType('main')
+
+const lastId = ref()
+const getCurrentProcessDetailEv = async () => {
 	let _id = queryObj.value.id
-	if (_id) {
-		cache_components.value = {}
-		process.processDetailApi(_id).then(res => {
-			processId.value = res.processId
-			categoryId.value = res.categoryId
-			processIcon.value = res.processIcon
-			processKey.value = res.processKey
-			processName.value = res.processName
-			remark.value = res.remark
-			let nodeConfig = JSON.parse(res.modelContent).nodeConfig
-			modelContent.value = JSON.stringify(nodeConfig)
-			processForm.value = res.processForm
-			flowStore.setProcessSetting(res.processSetting)
-			processPermissionList.value = (res.processPermissionList || []).map(i => ({
-				...i,
-				id: i.userId,
-				name: i.userName
-			}))
-			// 默认执行一次保存
-			const _refs = compRefs.value
-			for (let i = 0; i < _refs.length; i++) {
-				const updateCompInfo = compRefs.value[i]?.updateCompInfo
-				if (updateCompInfo) {
-					updateCompInfo()
+	if (lastId.value !== _id) {
+		activeTab.value = '基础信息'
+		lastId.value = _id
+		flowStore.$reset()
+		flowStore.setProcessType('main')
+		if (_id) {
+			loading.value = true
+			cache_components.value = {}
+			process
+				.processDetailApi(_id)
+				.then(res => {
+					processId.value = res.processId
+					categoryId.value = res.categoryId
+					processIcon.value = res.processIcon
+					processKey.value = res.processKey
+					processName.value = res.processName
+					remark.value = res.remark
+					let nodeConfig = JSON.parse(res.modelContent).nodeConfig
+					modelContent.value = JSON.stringify(nodeConfig)
+					processForm.value = res.processForm
+					flowStore.setProcessSetting(res.processSetting)
+					processPermissionList.value = (res.processPermissionList || []).map(i => ({
+						...i,
+						id: i.userId,
+						name: i.userName
+					}))
+					// 默认执行一次保存
+					const _refs = compRefs.value
+					for (let i = 0; i < _refs.length; i++) {
+						const updateCompInfo = compRefs.value[i]?.updateCompInfo
+						if (updateCompInfo) {
+							updateCompInfo()
+						}
+					}
+				})
+				.finally(() => {
+					loading.value = false
+				})
+		} else {
+			nextTick(() => {
+				// 默认执行一次保存
+				const _refs = compRefs.value
+				for (let i = 0; i < _refs.length; i++) {
+					const updateCompInfo = compRefs.value[i]?.updateCompInfo
+					if (updateCompInfo) {
+						updateCompInfo()
+					}
 				}
-			}
-		})
+			})
+		}
 	}
 }
-
 getCurrentProcessDetailEv()
+onActivated(() => {
+	getCurrentProcessDetailEv()
+})
 </script>
 
 <style scoped lang="scss">