feat: 流程 - 基本信息 20%

src/store/modules/flow.ts

@@ -5,7 +5,41 @@ export const useFlowStore = defineStore({
 	id: 'flow',
 	state: () => {
 		return {
-			storeInfoName: ''
+			storeInfoName: '',
+			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: {
+				allowRevocation: true, // 允许撤销审批中的申请
+				allowRevocationDay: true, // 允许撤销指定天内通过的审批
+				allowUpdateDay: true, // 允许修改指定天内通过的审批
+				allowDelegate: true, // 允许代他人提交
+				allowBatchOperate: true, // 允许审批人批量处理
+				secondOperatePrompt: true, // 开启秒批提示
+				repeatOperateSkip: true // 重复审批跳过
+			} //流程定义配置
 		}
 	},
 	getters: {},

src/utils/cacheHelper.ts

@@ -0,0 +1,18 @@
+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,7 +1,21 @@
 <script setup name="BasicInfo">
-import { ref, nextTick, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { mapWritableState } from 'pinia'
+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 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
@@ -27,6 +41,9 @@ const form = ref({
 	displayName: ''
 })
 const options = ref([])
+
+const flowStore = useFlowStore()
+const { cacheSwitch } = storeToRefs(flowStore)
 const rules = {
 	processIcon: [
 		{
@@ -96,8 +113,116 @@ 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 handleRemoteCacheRefresh = () => {
+	cacheIndex.value && clearTimeout(cacheIndex.value)
+	cacheIndex.value = setTimeout(() => {
+		updateRemoteCache()
+	}, cacheUpdateFr)
+}
+
+// 初始化缓存倒计时
+const handleCacheLoading = () => {
+	cacheLoading.value = true
+	cacheLoadingNum.value = 1000
+	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 = () => {
+	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()
+	})
+}
+
+const test = computed(() => {
+	return { ...mapWritableState(useFlowStore, ['flowInfoObj']) }
+})
+
+// ----- 缓存相关 start ------
+const flowBaseInfoWatcher = computed(() => {
+	const { processName, displayName, processIcon, categoryId, useScope, processActorList, processPermissionList } = flowInfoObj.value
+	// 只关注参数相关的数据变更
+	const _s = {
+		processName, // 流程定义名称
+		displayName, // 流程显示名称
+		processIcon, // 流程图标
+		categoryId, // 流程组分类ID
+		useScope, // 使用范围 0，全员 1，指定人员（业务关联） 2，均不可提交
+		processActorList, // 流程参与者，当使用范围为指定人员时候设置
+		processPermissionList // 流程定义权限
+	}
+	console.log('dev.1 applyUserInfoWatcher', _s)
+	return _s
+})
+
+watch(
+	flowBaseInfoWatcher,
+	(newVal, oldVal) => {
+		console.log('dev.2 applyUserInfoWatcher watch', newVal, oldVal)
+		cacheTriggerFunc()
+	},
+	{ deep: true }
+)
+
+watch(
+	nodeRoleList.value,
+	(newVal, oldVal) => {
+		console.log('dev.2 nodeRoleList watch', newVal, oldVal)
+	},
+	{ deep: true }
+)
+// ----- 缓存相关 end ------
+
 onMounted(() => {
 	getGroupList()
+	handleCacheLoading()
+})
+
+onBeforeUnmount(() => {
+	closeCacheLoading()
 })
 
 defineExpose({
@@ -108,12 +233,15 @@ defineExpose({
 
 <template>
 	<div class="base-info">
+		<div v-if="cacheLoading" style="font-size: 18px; position: absolute; left: 10px; top: 20px; z-index: 9999; color: red">
+			{{ cacheLoadingNum }}秒之后开启自动缓存...
+		</div>
 		<div class="base-info-panel">
 			<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
 				<el-form-item label="图标" prop="processIcon">
 					<el-space>
 						<div class="icon-shower">
-							<img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg" alt="" />
+							<img :src="flowInfoObj.processIcon" alt="" />
 						</div>
 					</el-space>
 
@@ -131,13 +259,13 @@ defineExpose({
 					</el-popover>
 				</el-form-item>
 				<el-form-item label="名称" prop="processName">
-					<el-input v-model="form.processName" clearable></el-input>
+					<el-input v-model="flowInfoObj.processName" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="说明" prop="displayName">
-					<el-input v-model="form.displayName" clearable></el-input>
+					<el-input v-model="flowInfoObj.displayName" clearable></el-input>
 				</el-form-item>
 				<el-form-item label="分组" prop="categoryId">
-					<el-select v-model="form.categoryId">
+					<el-select v-model="flowInfoObj.categoryId">
 						<el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
 					</el-select>
 				</el-form-item>
@@ -175,7 +303,7 @@ defineExpose({
 				</el-form-item>
 			</el-form>
 		</div>
-		<use-select v-if="selectVisible" ref="useSelectRef" @closed="selectVisible = false" @contentEv="selectContentEv"></use-select>
+		<use-select v-if="selectVisible" ref="useSelectRef" @closed="selectVisible = false" @content-ev="selectContentEv"></use-select>
 	</div>
 </template>
 
@@ -195,6 +323,7 @@ defineExpose({
 	text-align: center;
 	overflow-y: auto;
 	background-color: #eff0f1;
+	position: relative;
 	&-panel {
 		display: inline-block;
 		width: 1128px;

src/views/flow/create/index.vue

@@ -67,7 +67,7 @@ const activeName = ref('基础信息')
 
 const submitHandler = () => {}
 
-const activeComponent = (item) => {
+const activeComponent = item => {
 	activeName.value = item.label
 }