优化修改去掉缓存逻辑

src/utils/cacheHelper.ts

@@ -1,18 +0,0 @@
-import mitt from 'mitt'
-
-export const EVENT_ENUM = {
-	UPDATE_CACHE: 'updateCache'
-}
-
-export const EVENT_BUS = mitt()
-
-// 触发缓存更新
-export const cacheTriggerFunc = () => {
-	EVENT_BUS.emit(EVENT_ENUM.UPDATE_CACHE, {})
-}
-
-export default {
-	EVENT_ENUM,
-	EVENT_BUS,
-	cacheTriggerFunc
-}

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

@@ -1,24 +1,15 @@
 <script setup name="BasicInfo">
 import { storeToRefs } from 'pinia'
 import useFlowStore from '@/store/modules/flow'
-import { ref, nextTick, onMounted, computed, watch, onBeforeUnmount } from 'vue'
+import { ref, nextTick, onMounted, computed, watch } from 'vue'
 import UseSelect from '@/components/scWorkflow/select'
 import flowDefinition from '@/api/flow/definition'
 import process from '@/api/flow/process'
 import { useRoute } from 'vue-router'
-import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
+import { flowIconPrefix } from '@/utils/index'
 const route = useRoute()
-
-// 缓存 start
-import { EVENT_ENUM, EVENT_BUS, cacheTriggerFunc } from '@/utils/cacheHelper'
 const flowStore = useFlowStore()
-const { flowName, flowProcessId } = storeToRefs(flowStore)
-const cacheLoading = ref(false)
-const cacheLoadingNum = ref(600)
-const cacheLoadingFr = 1000
-const cacheLoadingIndex = ref(null)
-const cacheIndex = ref(null) // 缓存索引
-const cacheUpdateFr = 3000 // 缓存更新频率
+const { flowName, flowProcessId, basicInfo } = storeToRefs(flowStore)
 // 缓存 end
 const visiblePopover = ref(false)
 const selectVisible = ref(false)
@@ -179,34 +170,11 @@ 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
-	// if (item.useScope === 1) {
-	// 	nodeRoleList.value = item.processActorList.map(item => {
-	// 		return {
-	// 			id: item.actorId,
-	// 			name: item.actorName,
-	// 			actorType: 0
-	// 		}
-	// 	})
-	// }
 
 	if (item.processPermissionList && item.processPermissionList.length) {
 		nodeRoleManageList.value = item.processPermissionList.map(item => {
@@ -236,41 +204,6 @@ const updateRemoteCache = async () => {
 	}
 }
 
-const handleRemoteCacheRefresh = () => {
-	cacheIndex.value && clearTimeout(cacheIndex.value)
-	cacheIndex.value = setTimeout(() => {
-		// updateRemoteCache()
-	}, cacheUpdateFr)
-}
-
-// 初始化缓存倒计时
-const handleCacheLoading = () => {
-	cacheLoading.value = true
-	cacheLoadingNum.value = 5
-	cacheLoadingIndex.value && clearInterval(cacheLoadingIndex.value)
-	cacheLoadingIndex.value = setInterval(() => {
-		cacheLoadingNum.value = cacheLoadingNum.value - 1
-		if (cacheLoadingNum.value <= 0) {
-			cacheLoading.value = false
-			cacheLoadingIndex.value && clearInterval(cacheLoadingIndex.value)
-			bindCacheEvt()
-		}
-	}, cacheLoadingFr)
-}
-
-const closeCacheLoading = () => {
-	console.log('组件销毁时： 关闭定时器---------')
-	cacheLoadingIndex.value && clearInterval(cacheLoadingIndex.value)
-}
-
-const bindCacheEvt = () => {
-	EVENT_BUS.off(EVENT_ENUM.UPDATE_CACHE)
-	EVENT_BUS.on(EVENT_ENUM.UPDATE_CACHE, res => {
-		console.log('dev.2 EVENT_ENUM.UPDATE_CACHE', res)
-		handleRemoteCacheRefresh()
-	})
-}
-
 // 根据id获取详情
 const getCurrentProcessDetailEv = id => {
 	process.processDetailApi(id).then(res => {
@@ -285,34 +218,9 @@ const chooseIconEv = item => {
 	visiblePopover.value = !visiblePopover.value
 }
 
-// ----- 缓存相关 start ------
-const flowBaseInfoWatcher = computed(() => {
-	const { processKey, processName, processIcon, categoryId, remark, processPermissionList } = flowInfo.value
-	// 只关注参数相关的数据变更
-	const _s = {
-		processKey, // 流程显示名称
-		processName, // 流程定义名称
-		processIcon, // 流程图标
-		categoryId, // 流程组分类ID
-		remark, // 备注说明
-		processPermissionList // 流程定义权限
-	}
-	console.log('第一步：监听的对象属性 ------', _s)
-	return _s
-})
-
 // 当前是否是编辑
 const queryObj = computed(() => route.query)
 
-watch(
-	flowBaseInfoWatcher,
-	(newVal, oldVal) => {
-		console.log('第二步：执行同步emit方法 ------', newVal, oldVal)
-		cacheTriggerFunc()
-	},
-	{ deep: true }
-)
-
 // 流程名称变化
 watch(
 	() => flowInfo.value.processName,
@@ -325,7 +233,6 @@ watch(
 
 onMounted(() => {
 	getGroupList()
-	handleCacheLoading()
 	flowStore.$reset() // 重置缓存
 
 	if (queryObj.value.id) {
@@ -333,10 +240,6 @@ onMounted(() => {
 	}
 })
 
-onBeforeUnmount(() => {
-	closeCacheLoading()
-})
-
 defineExpose({
 	formRef,
 	validate
@@ -345,10 +248,6 @@ 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">
-			{{ cacheLoadingNum }}秒之后开启自动缓存...
-		</div>
-
 		<div class="base-info-panel" style="position: relative">
 			<div style="font-size: 18px; position: absolute; right: 10px; top: 20px; z-index: 9999">
 				<el-button type="primary" @click="updateRemoteCache">下一步</el-button>
@@ -357,9 +256,6 @@ defineExpose({
 				<el-form-item label="图标" prop="processIcon">
 					<el-space>
 						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${flowInfo.processIcon}`" />
-						<!--						<div class="icon-shower">
-							<img :src="getAssetsFile(flowInfo.processIcon + '.svg')" :alt="flowInfo.processIcon" />
-						</div>-->
 					</el-space>
 
 					<el-popover placement="right-end" :width="450" trigger="focus" class="base-popover" :visible="visiblePopover">
@@ -367,7 +263,6 @@ defineExpose({
 							<div class="icon-selector-list">
 								<div v-for="item in imgsArr" :key="item" class="icon-selector-item" @click="chooseIconEv(item)">
 									<LeIcon class="icon" :icon-class="`${flowIconPrefix}${item}`" />
-									<!--                  <img :src="getAssetsFile(item + '.svg')" />-->
 								</div>
 							</div>
 						</div>
@@ -377,7 +272,7 @@ defineExpose({
 					</el-popover>
 				</el-form-item>
 				<el-form-item label="唯一标识 key" prop="processKey">
-					<el-input v-model="flowInfo.processKey" clearable></el-input>
+					<el-input v-model="basicInfo.processKey" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="名称" prop="processName">
 					<el-input v-model="flowInfo.processName" clearable></el-input>

src/views/flow/create/index.vue

@@ -38,11 +38,10 @@ import BasicInfoTab from './components/BasicInfo.vue'
 import ExtendSetTab from './components/ExtendSet.vue'
 import FlowDesignTab from './components/FlowDesign.vue'
 import FormDesignTab from './components/FormDesign.vue'
-import { ElMessage } from 'element-plus'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 const flowStore = useFlowStore()
-const { flowName, flowProcessId } = storeToRefs(flowStore)
+const { flowName, basicInfo } = storeToRefs(flowStore)
 const dyncComponent = ref() // 实例化子组件
 const componentsArr = [
 	{
@@ -85,19 +84,13 @@ const submitHandler = () => {
 }
 
 const activeComponent = item => {
-	if (!flowProcessId.value && JSON.stringify(queryObj.value) === '{}') {
-		return ElMessage({
-			message: '请先保存基础信息',
-			type: 'error'
-		})
-	}
+	console.log('====processKey====', basicInfo)
 	activeName.value = item.label
 }
 
 const currentComponent = computed(() => {
 	return componentsArr.find(item => item.label === activeName.value)?.component
 })
-const queryObj = computed(() => route.query)
 </script>
 
 <style scoped lang="scss">