feat: 流程 - 基本信息 40%

src/store/modules/flow.ts

@@ -6,29 +6,8 @@ export const useFlowStore = defineStore({
 	state: () => {
 		return {
 			storeInfoName: '',
+			flowName: '流程名称', // 流程名称
 			cacheSwitch: false, // 缓存开关
-			processId: 0, // 流程定义ID
-			processName: '', // 流程定义名称
-			displayName: '', // 流程显示名称
-			processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg', // 流程图标
-			categoryId: 0, // 流程组分类ID
-			useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
-			processActorList: [
-				{
-					actorId: 0, // 参与者ID
-					actorName: '', // 参与者
-					actorType: 0 // 参与者类型 0，用户 1，部门 2，用户组
-				}
-			], // 流程参与者，当使用范围为指定人员时候设置
-			processPermissionList: [
-				{
-					userId: 0, // 用户ID
-					userName: '', // 用户名
-					operateApproval: 0, // 允许编辑/停用/删除审批 0，否 1，
-					operateOwner: 0, // 允许添加/移除审批负责人 0，否 1，是
-					operateData: 0 // 允许审批数据查询与操作 0，否 1，是
-				}
-			], // 流程定义权限
 			modelContent: '', // 流程模型定义JSON内容
 			processForm: '', // 流程定义表单
 			processSetting: {

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

@@ -1,29 +1,20 @@
 <script setup name="BasicInfo">
 import { storeToRefs } from 'pinia'
-import { mapWritableState } from 'pinia'
+import useFlowStore from '@/store/modules/flow'
 import { ref, nextTick, onMounted, computed, watch, onBeforeUnmount } from 'vue'
 import UseSelect from '@/components/scWorkflow/select'
 import flowDefinition from '@/api/flow/definition'
-import useFlowStore from '@/store/modules/flow'
 // 缓存 start
 import { EVENT_ENUM, EVENT_BUS, cacheTriggerFunc } from '@/utils/cacheHelper'
+const flowStore = useFlowStore()
+const { flowName } = storeToRefs(flowStore)
 const cacheLoading = ref(false)
 const cacheLoadingNum = ref(600)
 const cacheLoadingFr = 1000
 const cacheLoadingIndex = ref(null)
-
 const cacheIndex = ref(null) // 缓存索引
 const cacheUpdateFr = 3000 // 缓存更新频率
 // 缓存 end
-
-const props = defineProps({
-	label: {
-		type: String
-	},
-	name: {
-		type: String
-	}
-})
 const visiblePopover = ref(false)
 const selectVisible = ref(false)
 const useSelectRef = ref(null)
@@ -31,19 +22,31 @@ const nodeRoleList = ref([])
 const nodeRoleManageList = ref([])
 const currentNode = ref('nodeRoleList')
 const formRef = ref()
-const form = ref({
-	processIcon: '',
-	processName: 'test@example.com',
-	categoryId: '',
+const options = ref([])
+const flowInfo = ref({
+	processId: 0, // 流程定义ID
+	processName: '', // 流程定义名称
+	displayName: '', // 流程显示名称
+	processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg', // 流程图标
+	categoryId: 0, // 流程组分类ID
 	useScope: 0, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
-	processActorList: [{ actorId: '', actorName: '', actorType: '' }], // 指定人员 id name 参与者类型 0，用户 1，部门 2，用户组
-	processPermissionList: [{ userId: '', userName: '' }], // 流程定义权限
-	displayName: ''
+	processActorList: [
+		{
+			actorId: 0, // 参与者ID
+			actorName: '', // 参与者
+			actorType: 0 // 参与者类型 0，用户 1，部门 2，用户组
+		}
+	], // 流程参与者，当使用范围为指定人员时候设置
+	processPermissionList: [
+		{
+			userId: 0, // 用户ID
+			userName: '', // 用户名
+			operateApproval: 0, // 允许编辑/停用/删除审批 0，否 1，
+			operateOwner: 0, // 允许添加/移除审批负责人 0，否 1，是
+			operateData: 0 // 允许审批数据查询与操作 0，否 1，是
+		}
+	] // 流程定义权限
 })
-const options = ref([])
-
-const flowStore = useFlowStore()
-const { cacheSwitch } = storeToRefs(flowStore)
 const rules = {
 	processIcon: [
 		{
@@ -64,7 +67,6 @@ const rules = {
 		}
 	]
 }
-// const submitHandler = (cb: ((value: any) => any)) => {
 const validate = () => {
 	return new Promise((resolve, reject) => {
 		formRef.value.validate((valid, errObj) => {
@@ -75,7 +77,7 @@ const validate = () => {
 				// return form.value
 				return
 			}
-			return reject([props.name, errObj])
+			return reject(['基本信息', errObj])
 		})
 	})
 }
@@ -113,33 +115,10 @@ const getGroupList = async () => {
 	options.value = data || []
 }
 
-// 重新组装缓存参数
-const cacheParamsAdaptar = () => {
-	const { processName, displayName, processIcon, categoryId, useScope, processActorList, processPermissionList } = flowInfoObj.value
-	return {
-		processName, // 流程定义名称
-		displayName, // 流程显示名称
-		processIcon, // 流程图标
-		categoryId, // 流程组分类ID
-		useScope, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
-		processActorList, // 流程参与者，当使用范围为指定人员时候设置
-		processPermissionList // 流程定义权限
-	}
-}
-
 // 更新申请信息缓存
 const updateRemoteCache = async () => {
-	if (!cacheSwitch.value) {
-		// 缓存开关的关闭，1.初始化 2.查询方案详情之后，更新store之前关闭的。
-		cacheSwitch.value = true
-		console.log('dev.2 updateRemoteCache 缓存开关关闭了，这里打开，但不调用接口')
-		return
-	}
-
-	const params = cacheParamsAdaptar()
-	console.log('dev.2 updateRemoteCache 实际调用接口, params = ', params, new Date().getTime())
-
-	console.log('updateRemoteCache ==== ')
+	const params = flowInfo.value
+	console.log('updateRemoteCache 实际调用接口, params = ', params, new Date().getTime())
 }
 
 const handleRemoteCacheRefresh = () => {
@@ -152,20 +131,20 @@ const handleRemoteCacheRefresh = () => {
 // 初始化缓存倒计时
 const handleCacheLoading = () => {
 	cacheLoading.value = true
-	cacheLoadingNum.value = 1000
+	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)
-			return
 			bindCacheEvt()
 		}
 	}, cacheLoadingFr)
 }
 
 const closeCacheLoading = () => {
+	console.log('组件销毁时： 关闭定时器---------')
 	cacheLoadingIndex.value && clearInterval(cacheLoadingIndex.value)
 }
 
@@ -177,13 +156,9 @@ const bindCacheEvt = () => {
 	})
 }
 
-const test = computed(() => {
-	return { ...mapWritableState(useFlowStore, ['flowInfoObj']) }
-})
-
 // ----- 缓存相关 start ------
 const flowBaseInfoWatcher = computed(() => {
-	const { processName, displayName, processIcon, categoryId, useScope, processActorList, processPermissionList } = flowInfoObj.value
+	const { processName, displayName, processIcon, categoryId, useScope, processActorList, processPermissionList } = flowInfo.value
 	// 只关注参数相关的数据变更
 	const _s = {
 		processName, // 流程定义名称
@@ -194,23 +169,24 @@ const flowBaseInfoWatcher = computed(() => {
 		processActorList, // 流程参与者，当使用范围为指定人员时候设置
 		processPermissionList // 流程定义权限
 	}
-	console.log('dev.1 applyUserInfoWatcher', _s)
+	console.log('第一步：监听的对象属性 ------', _s)
 	return _s
 })
 
 watch(
 	flowBaseInfoWatcher,
 	(newVal, oldVal) => {
-		console.log('dev.2 applyUserInfoWatcher watch', newVal, oldVal)
+		console.log('第二步：执行同步emit方法 ------', newVal, oldVal)
 		cacheTriggerFunc()
 	},
 	{ deep: true }
 )
 
+// 流程名称变化
 watch(
-	nodeRoleList.value,
+	flowInfo.value.displayName,
 	(newVal, oldVal) => {
-		console.log('dev.2 nodeRoleList watch', newVal, oldVal)
+		flowName.value = newVal
 	},
 	{ deep: true }
 )
@@ -237,11 +213,11 @@ defineExpose({
 			{{ cacheLoadingNum }}秒之后开启自动缓存...
 		</div>
 		<div class="base-info-panel">
-			<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
+			<el-form ref="formRef" :model="flowInfo" :rules="rules" label-position="top">
 				<el-form-item label="图标" prop="processIcon">
 					<el-space>
 						<div class="icon-shower">
-							<img :src="flowInfoObj.processIcon" alt="" />
+							<img :src="flowInfo.processIcon" alt="" />
 						</div>
 					</el-space>
 
@@ -259,13 +235,13 @@ defineExpose({
 					</el-popover>
 				</el-form-item>
 				<el-form-item label="名称" prop="processName">
-					<el-input v-model="flowInfoObj.processName" clearable></el-input>
+					<el-input v-model="flowInfo.processName" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="说明" prop="displayName">
-					<el-input v-model="flowInfoObj.displayName" clearable></el-input>
+					<el-input v-model="flowInfo.displayName" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="分组" prop="categoryId">
-					<el-select v-model="flowInfoObj.categoryId">
+					<el-select v-model="flowInfo.categoryId">
 						<el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
 					</el-select>
 				</el-form-item>

src/views/flow/create/index.vue

@@ -5,7 +5,7 @@
 				<el-icon :size="18"><ArrowLeft /></el-icon>
 			</div>
 			<div class="create-approval-header-left-zh">
-				<div class="create-approval-header-name">请假</div>
+				<div class="create-approval-header-name">{{ flowName }}</div>
 				<div class="create-approval-header-time">最近保存：6 分钟前</div>
 			</div>
 			<div class="create-approval-header-tab-list">
@@ -32,11 +32,16 @@
 
 <script setup name="flow_create">
 import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import useFlowStore from '@/store/modules/flow'
 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 {storeToRefs} from "pinia";
 
+const flowStore = useFlowStore()
+const { flowName } = storeToRefs(flowStore)
 const componentsArr = [
 	{
 		component: BasicInfoTab,