Ver código fonte

fix: 保存时存在两个一样的流程,基础信息改成定时保存100%,表单设计 3秒保存一次 40%

luoyali 1 ano atrás
pai
commit
ff57c51003

+ 2 - 1
src/components/FormCreateDesigner/FcDesigner.vue

@@ -1036,7 +1036,8 @@ export default defineComponent({
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))
 
 		defineExpose({
-			initForm: methods.initForm
+			initForm: methods.initForm,
+      saveFormJson: methods.showJson
 		})
 		return {
 			editorRef,

+ 5 - 0
src/store/modules/flow.ts

@@ -66,6 +66,11 @@ export const useFlowStore = defineStore({
 			}
 			this.basicInfo[key] = value
 		},
+		// 流程ID
+		setFlowProcessId(value: string) {
+			console.log(value, '=======///////===');
+			this.flowProcessId = value
+		},
 		// 表单信息
 		setProcessForm(value: any) {
 			this.processForm = value

+ 14 - 21
src/views/flow/create/components/BasicInfo.vue

@@ -12,7 +12,7 @@ const route = useRoute()
 // 缓存 start
 import { EVENT_ENUM, EVENT_BUS, cacheTriggerFunc } from '@/utils/cacheHelper'
 const flowStore = useFlowStore()
-const { flowName, flowProcessId } = storeToRefs(flowStore)
+const { flowName, flowProcessId, processForm, modelContent } = storeToRefs(flowStore)
 const cacheLoading = ref(false)
 const cacheLoadingNum = ref(600)
 const cacheLoadingFr = 1000
@@ -179,25 +179,12 @@ const getGroupList = async () => {
 }
 
 const initBaseicInfEv = item => {
-	// item = {
-	// 	processId: '1728240012964925441',
-	// 	processForm:yu
-	// 		'[{"type":"input","field":"userName","title":"输入框","info":"","$required":false,"_fc_drag_tag":"input","hidden":false,"display":true}]',
-	// 	processKey: '003key',
-	// 	processName: '003名称',
-	// 	processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart',
-	// 	categoryId: '1725778939021541378',
-	// 	remark: '003说明',
-	// 	useScope: 1,
-	// 	processActorList: [{ actorId: '1705067852272607233', actorName: 'lanceJiang', actorType: 0 }],
-	// 	processPermissionList: [{ userId: '1705067852272607233', userName: 'lanceJiang', operateApproval: 0, operateOwner: 0, operateData: 0 }]
-	// }
 	const { processForm, modelContent, ...rest } = item
 	flowInfo.value = rest
 	flowStore.setProcessForm(processForm)
 	flowStore.setModelContent(modelContent)
-	// updateRemoteCache()
-	flowProcessId.value = queryObj.value.id // 赋值流程id
+	updateRemoteCache()
+	flowStore.setFlowProcessId(queryObj.value.id)
 	if (item.useScope === 1) {
 		nodeRoleList.value = item.processActorList.map(item => {
 			return {
@@ -224,9 +211,16 @@ const initBaseicInfEv = item => {
 // 更新申请信息缓存
 const updateRemoteCache = async () => {
 	try {
-		const params = flowProcessId.value ? { ...flowInfo.value, processId: flowProcessId.value } : flowInfo.value
+		const commonParam = {
+			processForm: processForm.value,
+			modelContent: modelContent.value,
+			...flowInfo.value
+		}
+		const params = flowProcessId.value ? { processId: flowProcessId.value, ...commonParam } : commonParam
+		console.error(params, 'params=======')
+		// return
 		const data = await process.progressCreateApi(params)
-		flowProcessId.value = data
+		flowStore.setFlowProcessId(data)
 		Object.keys(flowInfo.value).forEach(key => {
 			flowStore.setKeysBasicInfo(key, flowInfo.value[key])
 		})
@@ -239,7 +233,7 @@ const updateRemoteCache = async () => {
 const handleRemoteCacheRefresh = () => {
 	cacheIndex.value && clearTimeout(cacheIndex.value)
 	cacheIndex.value = setTimeout(() => {
-		// updateRemoteCache()
+		updateRemoteCache()
 	}, cacheUpdateFr)
 }
 
@@ -280,7 +274,6 @@ const getCurrentProcessDetailEv = id => {
 
 // icon图标点击保存
 const chooseIconEv = item => {
-	// flowStore.setKeysBasicInfo('processIcon', item)
 	flowInfo.value.processIcon = item
 	visiblePopover.value = !visiblePopover.value
 }
@@ -347,7 +340,7 @@ defineExpose({
 
 <template>
 	<div class="base-info">
-		<div v-if="false" style="font-size: 18px; position: absolute; left: 10px; top: 20px; z-index: 9999; color: red">
+		<div style="font-size: 18px; position: absolute; left: 10px; top: 20px; z-index: 9999; color: red">
 			{{ cacheLoadingNum }}秒之后开启自动缓存...
 		</div>
 

+ 1 - 1
src/views/flow/create/components/FlowDesign.vue

@@ -48,9 +48,9 @@ const validate = () => {
 const saveDesign = async jsonStr => {
 	try {
 		const params = {
+      ...basicInfo.value,
 			processId: flowProcessId.value,
 			processForm: processForm.value,
-			...basicInfo.value,
 			modelContent: JSON.stringify(jsonStr)
 		}
 		const res = await process.progressCreateApi(params)

+ 34 - 8
src/views/flow/create/components/FormDesign.vue

@@ -3,38 +3,64 @@ import FcDesigner from '@/components/FormCreateDesigner/FcDesigner.vue'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
 import process from '@/api/flow/process'
-import { onMounted, computed, ref } from 'vue'
+import { onMounted, computed, ref, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 
+const designer = ref()
 const flowStore = useFlowStore()
 const { flowProcessId, basicInfo, processForm } = storeToRefs(flowStore)
-const designer = ref()
+const cacheLoadingIndex = ref(null)
+const cacheIndex = ref(null) // 缓存索引
+const cacheInterView = ref(null)
+const cacheUpdateFr = 3000 // 缓存更新频率
+
+// 当前是否是编辑
+const queryObj = computed(() => route.query)
+
+/* 自动缓存 - 使用定时器 */
 const exportJsonEv = async json => {
-	console.log(json)
+	console.log(json, '每 3s保存 一下 json', flowProcessId.value, basicInfo.value)
 	try {
 		const _json = JSON.stringify(json)
 		const params = {
-			processId: flowProcessId.value,
 			processForm: JSON.stringify(json),
-			...basicInfo.value
+			...basicInfo.value,
+			processId: flowProcessId.value
 		}
 		const res = await process.progressCreateApi(params)
 		flowStore.setProcessForm(_json)
-		flowProcessId.value = res
+		flowStore.setFlowProcessId(res)
 	} catch (e) {
 		console.log(e)
 	}
 }
 
-// 当前是否是编辑
-const queryObj = computed(() => route.query)
+const closeCacheLoading = () => {
+	cacheLoadingIndex.value && clearInterval(cacheLoadingIndex.value)
+}
+
+const handleRemoteCacheRefresh = () => {
+	cacheIndex.value && clearTimeout(cacheIndex.value)
+	cacheIndex.value = setTimeout(() => {
+		// 调子组件 获取最新的数据,缓存
+		cacheInterView.value && clearInterval(cacheInterView.value)
+		cacheInterView.value = setInterval(() => {
+			designer.value.saveFormJson()
+		}, cacheUpdateFr)
+	}, cacheUpdateFr)
+}
 
 onMounted(() => {
+	// handleRemoteCacheRefresh()
 	if (queryObj.value.id) {
 		designer.value.initForm(processForm.value || [])
 	}
 })
+
+onBeforeUnmount(() => {
+	closeCacheLoading()
+})
 </script>
 
 <template>

+ 2 - 2
src/views/flow/create/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="create-approval">
 		<div class="create-approval-header flex flex_align-center">
-			<div class="create-approval-header-back">
+			<div class="create-approval-header-back" v-if="false">
 				<el-icon :size="18"><ArrowLeft /></el-icon>
 			</div>
 			<div class="create-approval-header-left-zh">
@@ -32,7 +32,7 @@
 </template>
 
 <script setup name="flow_create">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import useFlowStore from '@/store/modules/flow'
 import BasicInfoTab from './components/BasicInfo.vue'

+ 6 - 1
src/views/flow/group/index.vue

@@ -36,6 +36,8 @@ import SortGroup from './components/sortGroup'
 import ListGroup from './components/listGroup'
 import flowGroup from '@/api/flow/group'
 import router from '@/router'
+import useFlowStore from '@/store/modules/flow'
+const flowStore = useFlowStore()
 
 const sortFlag = ref(false)
 const dyncComponent = ref() // 实例化子组件
@@ -72,7 +74,10 @@ const searchProcess = async () => {
 }
 
 const createProcessEv = () => {
-	router.push('/flow_create')
+	flowStore.$reset()
+	setTimeout(() => {
+		router.push('/flow_create')
+	}, 0)
 }
 </script>
 <style scoped lang="scss">