feat: 表单流程 处理

src/views/approve/launch/ItemDrawer.vue

@@ -1,13 +1,27 @@
 <template>
-	<el-drawer class="local-launch_drawer-wrap" title="测试表单" :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
+	<el-drawer class="local-launch_drawer-wrap" title="测试表单" :model-value="modelValue" size="760px" @update:model-value="updateModelValue">
 		<!--    <div v-loading="loading" class="local_loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.1)" />-->
-		<FormCreate :option="formOption" :rule="formRule" />
+		<div class="info-wrap">
+			<FormCreate class="form-wrap" :option="formOption" :rule="formRule" />
+			<el-timeline class="timeline-wrap">
+				<el-timeline-item v-for="(v, index) in processTimelineList" :key="index" :timestamp="v.local_name">
+					<template v-if="v.conditionNode === 1">
+						<el-radio-group v-model="processChecked[v.name]" size="small">
+							<el-radio-button v-for="c of v.conditionNodeList" :key="c.name" :label="c.name" />
+						</el-radio-group>
+					</template>
+					<template v-else>
+						{{ v.name }}
+					</template>
+				</el-timeline-item>
+			</el-timeline>
+		</div>
 	</el-drawer>
 </template>
 <script setup lang="ts">
 import model from '@/api/flow/process'
 import viewForm from '@/utils/form'
-import { ref, shallowRef, computed } from 'vue'
+import { ref, shallowRef, computed, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 type Props = {
 	modelValue: boolean
@@ -18,18 +32,29 @@ const props = defineProps<Props>()
 	modelValue: false
 })*/
 const emit = defineEmits<{
-	'update:modelValue': [id: number] // 具名元组语法
+	'update:modelValue': [bool: boolean] // 具名元组语法
 	update: [value: string]
 }>()
+const updateModelValue = (bool: boolean) => emit('update:modelValue', bool)
 const FormCreate = viewForm.$form()
 const formOption = ref({
 	// resetBtn: { show: true },
 	onSubmit(formData) {
 		// console.error(formData, 'formData')
-		setTimeout(() => {
-			ElMessage.success('模拟 提交成功')
-			formOption.value.submitBtn.loading = false
-		}, 500)
+		const processId = props.record.processId
+		formOption.value.submitBtn.loading = true
+		model
+			.processLaunchApi({
+				processId, // 流程ID
+				processForm: JSON.stringify(formData) // 流程表单JSON内容
+			})
+			.then(res => {
+				ElMessage.success('提交成功')
+				updateModelValue(false)
+			})
+			.finally(() => {
+				formOption.value.submitBtn.loading = false
+			})
 	},
 	submitBtn: { loading: false }
 	/*formData: {
@@ -37,9 +62,6 @@ const formOption = ref({
 		test_3: 'eeeee'
 	}*/
 })
-// setTimeout(() => {
-// 	formOption.value.submitBtn.loading = false
-// }, 500)
 /*const formData = ref({
 	local_workflow: {}
 })*/
@@ -55,7 +77,61 @@ const workflowItem = {
 }
 const formRule = shallowRef([workflowItem])
 const loading = ref(true)
-model.processDetailApi(props.record.processId).then(res => {
+const processChecked = reactive({
+	/*'local_条件分支_期限': '短期'*/
+})
+const localProcessData = ref<any[]>([])
+let c_idx = 0
+const packageProcess = (data, list = []) => {
+	return data.reduce((_list, config) => {
+		if (config.conditionNode === 0) {
+			// console.log(config.name, 'name 普通节点名称', config)
+			if (!config.local_name) {
+				// 普通节点 展示 控制
+				config.local_name = (config.nodeAssigneeList || []).map(x => x.name).join(',') || config.name
+			}
+			_list.push(config)
+		} else if (config.conditionNode === 1) {
+			// 自定义标识key
+			if (!config.name) {
+				config.name = `local_${c_idx++}`
+			}
+			// console.log('条件节点', config)
+			_list.push(config)
+			if (Array.isArray(config.conditionNodeList) && config.conditionNodeList.length) {
+				const _val = processChecked[config.name]
+				let condition = config.conditionNodeList[0]
+				if (_val) {
+					config.conditionNodeList.some(_condition => {
+						if (_condition.name === _val) {
+							condition = _condition
+							return true
+						}
+					})
+				} else {
+					// console.error('else......', condition)
+					processChecked[config.name] = condition.name
+				}
+				// console.warn('条件节点', condition.name)
+				if (Array.isArray(condition.childNode) && condition.childNode.length) {
+					packageProcess(condition.childNode, _list)
+				}
+			}
+		}
+		return _list
+	}, list)
+}
+const processTimelineList = computed(() => {
+	return packageProcess(localProcessData.value)
+})
+
+// model.processListNodeMapApi(props.record.processId).then(res => {
+model.processListNodeMapApi('1747258191679991809').then((res: any[]) => {
+	localProcessData.value = res
+	// console.error(localProcessData, 'res..... processListNodeMapApi')
+})
+// model.processDetailApi(props.record.processId).then(res => {
+model.processDetailApi('1747258191679991809').then(res => {
 	console.error(res, '详情 process....', props.record)
 	// modelContent 审批流数据
 	let local_workflow = {}
@@ -66,7 +142,7 @@ model.processDetailApi(props.record.processId).then(res => {
 	} catch (e) {}
 	// formOption.value.formData = { local_workflow, test_3: 'eeeee' }
 	// processForm 动态表单
-	formRule.value = [...JSON.parse(res.processForm || '[]'), { ...workflowItem, value: local_workflow } /*, { type: 'input', field: 'test_3' }*/]
+	formRule.value = [...JSON.parse(res.processForm || '[]') /*, { ...workflowItem, value: local_workflow }*/ /*, { type: 'input', field: 'test_3' }*/]
 	// loading.value = false
 	// console.error(formData.value, 'formData.value')
 })
@@ -105,8 +181,17 @@ model.processDetailApi(props.record.processId).then(res => {
 	}
 }
 </style>
-<!--<style scoped lang="scss">
-:deep(.local-launch_drawer-wrap) {
-	background: #f00;
+<style scoped lang="scss">
+.info-wrap {
+	display: flex;
+	.form-wrap {
+		flex: 1;
+	}
+	.timeline-wrap {
+		margin-left: 8px;
+		flex-shrink: 0;
+		padding: 0;
+		width: 360px;
+	}
 }
-</style>-->
+</style>