Browse Source

feat: 发起审批 审批

lanceJiang 1 year ago
parent
commit
fa55826de6

+ 1 - 1
index.html

@@ -34,7 +34,7 @@
         }
 
         .loader {
-					color: #409eff;
+          color: #409eff;
           font-size: 10px;
           margin: 80px auto;
           position: relative;

+ 1 - 1
src/components/scWorkflow/select.vue

@@ -398,7 +398,7 @@ export default {
 	align-items: center;
 }
 .sc-user-select__selected li .name .el-avatar {
-	background: #409eff;
+	background: var(--el-color-primary);
 	margin-right: 10px;
 }
 .sc-user-select__selected li .name label {

+ 15 - 30
src/views/approve/launch/ItemDrawer.vue

@@ -67,7 +67,6 @@ import { ref, shallowRef, computed, reactive, watchEffect } from 'vue'
 import { ElMessage } from 'element-plus'
 import UseSelect from '@/components/scWorkflow/select.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
-import { approveTypeOptions_config, selectModeOptions_config, setTypeOptions_config } from '@/components/scWorkflow/nodes/config'
 type Props = {
 	modelValue: boolean
 	record: { processId: string; processName: string; [key: string]: any }
@@ -176,39 +175,28 @@ const packageProcess = (data, list = []) => {
 	return data.reduce((_list, config) => {
 		if (config.conditionNode === 0) {
 			console.log(config.name, 'name 普通节点名称', config, data)
-			/* // todo...
-      // 默认用户
-			let type = 1
-			let assignees = config.nodeUserList
-			if (config.nodeRoleList) {
-				// 存在设置角色
-				type = 2
-				assignees = config.nodeRoleList
-			}
-			// userMap.value.set(config.name, { assignees, type })
-			// 流程名称
-			assigneeMap.value[config.name] = { assignees, type }*/
 			// 0,发起人 1,审批人 2,抄送人 3,条件审批 4,条件分支 5,办理子流程 6,定时器在务 7,触发器在务
 			switch (+config.type) {
 				case 0: {
 					// 发起人
-					console.error(1)
+					// console.error('发起人')
 					break
 				}
 				case 1: {
 					// 审批人
-
-					const handleName = setTypeOptions_config[config.setType]
-					// if (config.setType) {
 					// 针对审核人 不同情况控制
 					if (Reflect.has(config, 'setType')) {
-						console.log(handleName, 'handleName', config)
 						let disabled = false
 						let selectOpts = {}
+						const user_fn = () => {
+							assigneeMap.value[config.name] = { assignees: config.nodeUserList, type: 1, disabled, selectOpts }
+						}
 						switch (config.setType) {
 							case 1:
 								// 指定人员 (不允许重新选择) // 但展示
 								disabled = true
+								user_fn()
+								break
 							case 2:
 								// 主管 (不需要选择)
 								break
@@ -220,18 +208,15 @@ const packageProcess = (data, list = []) => {
 								// 发起人自选 (1: 选择一个人, 2: 选择多个人)
 								// const isMultiple = config.selectMode === 2
 								if (config.selectMode === 1) {
-									selectOpts.maxSelected = 1
+									selectOpts = { maxSelected: 1 }
 								}
+								user_fn()
+								break
+							case 5: // 发起人自己 (不能选择)
 								break
-							case 5:
-							// 发起人自己 (不能选择)
-							// break
 							case 6:
 								// 连续多级主管 (不能选择)
 								break
-							default:
-								assigneeMap.value[config.name] = { assignees: config.nodeUserList, type: 1, disabled: false, selectOpts }
-							// 发起的时候不需要选择
 						}
 					}
 					break
@@ -244,27 +229,27 @@ const packageProcess = (data, list = []) => {
 				}
 				/*case 3: {
 					// 条件审批
-					console.error(1)
+					console.error('条件审批')
 					break
 				}
 				case 4: {
 					// 条件分支
-					console.error(1)
+					console.error('条件分支')
 					break
 				}
 				case 5: {
 					// 办理子流程
-					console.error(1)
+					console.error('办理子流程')
 					break
 				}
 				case 6: {
 					// 定时器在务
-					console.error(1)
+					console.error('定时器在务')
 					break
 				}
 				case 7: {
 					// 触发器在务
-					console.error(1)
+					console.error('触发器在务')
 					break
 				}*/
 			}

+ 57 - 34
src/views/flow/create/index.vue

@@ -15,8 +15,8 @@
 					v-for="(item, idx) in componentsArr"
 					:key="idx"
 					class="create-approval-header-tab-item"
-					:class="[item.label === activeName ? 'active' : '']"
-					@click="activeComponent(item)"
+					:class="[item.value === activeTab ? 'active' : '']"
+					@click="activeComponent(idx)"
 				>
 					<span class="create-approval-header-tab-counter">{{ idx + 1 }}</span>
 					<span>{{ item.label }}</span>
@@ -27,13 +27,13 @@
 			</div>
 		</div>
 		<div class="create-approval-main">
-			<component :is="currentComponent" ref="dyncComponent" />
+			<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, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import useFlowStore from '@/store/modules/flow'
 import BasicInfoTab from './components/BasicInfo.vue'
@@ -50,35 +50,37 @@ const route = useRoute()
 const flowStore = useFlowStore()
 const { categoryId, processId, processIcon, processKey, processName, remark, modelContent, processForm, processSetting } = storeToRefs(flowStore)
 
-const dyncComponent = ref() // 实例化子组件
+const compRefs = ref() // 实例化子组件
+const cache_components = ref({})
 const componentsArr = [
 	{
 		component: BasicInfoTab,
 		label: '基础信息',
-		name: '基础信息'
+		value: '基础信息'
 		// ref: 'basicInfoRef'
 	},
 	{
 		component: FormDesignTab,
 		label: '表单设计',
-		name: '表单设计'
+		value: '表单设计'
 		// ref: 'formDesignRef'
 	},
 	{
 		component: FlowDesignTab,
 		label: '流程设计',
-		name: '流程设计'
+		value: '流程设计'
 		// ref: 'flowDesignRef'
 	},
 	{
 		component: ExtendSetTab,
 		label: '扩展设置',
-		name: '扩展设置'
+		value: '扩展设置'
 		// ref: 'extendSetRef'
 	}
 ]
-const activeName = ref('基础信息')
+const activeTab = ref('基础信息')
 const removeCurTab = () => {
+	cache_components.value = {}
 	const _view = tagsView.visitedViews.find(v => v.path === '/flow_create/index')
 	if (_view)
 		tagsView.delView(_view).then(res => {
@@ -88,7 +90,7 @@ const removeCurTab = () => {
 			} else {
 				router.push('/')
 			}
-      flowStore.$reset()
+			flowStore.$reset()
 		})
 }
 const submitHandler = async () => {
@@ -96,8 +98,8 @@ const submitHandler = async () => {
 	// 表单设计
 	// 流程设计
 	// 扩展设置
-	const leavePageFlag = changeTab()
-	if (leavePageFlag) return // 说明表单设计的值有重复的
+	const leavePageFlag = await validateTabs()
+	if (!leavePageFlag) return
 	const params = {
 		categoryId: categoryId.value,
 		processIcon: processIcon.value,
@@ -109,7 +111,7 @@ const submitHandler = async () => {
 		modelContent: JSON.stringify({
 			key: processKey.value,
 			name: processName.value,
-			nodeConfig: JSON.parse(modelContent.value)
+			nodeConfig: JSON.parse(modelContent.value || '{}')
 		}),
 		processSetting: processSetting.value
 	}
@@ -120,37 +122,58 @@ const submitHandler = async () => {
 }
 
 // 切换选项卡之前,做相应的保存操作
-const changeTab = () => {
-	let leavePageFlag = false
-	if (activeName.value === '表单设计') {
-		// 这里针对表单设计单独处理,如果不符合条件,则不允许切换
-		dyncComponent.value.exportJsonEv()
-		leavePageFlag = dyncComponent.value.validateOnlyEv() // FormDesign.vue中的方法
-		if (leavePageFlag) {
-			return ElMessage.error(`表单设计中字段ID不能重复,请确认唯一值`)
-		}
-	} else if (activeName.value === '流程设计') {
-		dyncComponent.value.saveDesign()
+const validateTabs = async () => {
+	const _refs = compRefs.value
+	// await nextTick()
+	for (let i = 0; i < _refs.length; i++) {
+		let bool = true
+		/*// 若没开启过的 tab 需要尝试 进行更新数据
+		if (!cache_components.value[i]) {
+			cache_components.value[i]?.updateCompInfo()
+		}*/
+		const _validate =
+			_refs[i]?.validate ||
+			function () {
+				return Promise.resolve()
+			}
+		await _validate().catch(e => {
+			activeTab.value = componentsArr[i].label
+			// 表单设计 额外 弹窗
+			if (activeTab.value === '表单设计') {
+				ElMessage.error(`表单设计中字段ID不能重复,请确认唯一值`)
+			}
+			bool = false
+		})
+		if (!bool) return false
 	}
-	return leavePageFlag
+	return true
 }
 
-const activeComponent = item => {
-	const leavePageFlag = changeTab()
-	if (!leavePageFlag) {
-		activeName.value = item.label
+const activeComponent = index => {
+	const cur = componentsArr[index]
+	if (activeTab.value !== cur.value) {
+		// 当前缓存
+		if (!cache_components.value[index]) {
+			cache_components.value[index] = true
+			// 更新数据
+			const updateCompInfo = compRefs.value[index]?.updateCompInfo
+      // console.error('刷新数据')
+			// console.error(updateCompInfo, 'updateCompInfo')
+			if (updateCompInfo) {
+				updateCompInfo()
+			}
+		}
+		activeTab.value = cur.value
 	}
 }
 
-const currentComponent = computed(() => {
-	return componentsArr.find(item => item.label === activeName.value)?.component
-})
-
 const queryObj = computed(() => route.query)
 
 const getCurrentProcessDetailEv = () => {
+	// console.error('api 请求')
 	let _id = queryObj.value.id
 	if (_id) {
+		cache_components.value = {}
 		process.processDetailApi(_id).then(res => {
 			processId.value = res.processId
 			categoryId.value = res.categoryId