aizuda-web-vue3/src/views/approve/launch/ItemDrawer.vue

<template>
	<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)" />-->
		<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">
					<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 }}
						<!-- {{ v.local_name }} -->
						<div style="display: flex; align-items: center; gap: 6px">
							<el-button :icon="Plus" style="width: 32px" @click="selectHandler" />
							<FlowNodeAvatar v-for="(item, index) in userList" id="1" :key="index" style="margin-top: 5px" />
						</div>
					</template>
				</el-timeline-item>
			</el-timeline>
		</div>
	</el-drawer>
	<use-select ref="useSelectRef"></use-select>
</template>
<script setup lang="ts">
import model from '@/api/flow/process'
import viewForm from '@/utils/form'
import { ref, inject, shallowRef, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import UseSelect from '@/components/scWorkflow/select.vue'
import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
type Props = {
	modelValue: boolean
	record: { processId: string; [key: string]: any }
}
const props = defineProps<Props>()
/*const props = withDefaults(defineProps<Props>(), {
	modelValue: false
})*/
const emit = defineEmits<{
	'update:modelValue': [bool: boolean] // 具名元组语法
	update: [value: string]
}>()
const updateModelValue = (bool: boolean) => emit('update:modelValue', bool)
const userList = ref([])
const useSelectRef = ref()
const selectHandler = () => {
	useSelectRef.value.open(1, userList.value)
}
const FormCreate = viewForm.$form()
const formOption = ref({
	// resetBtn: { show: true },
	onSubmit(formData) {
		// console.error(formData, 'formData')
		const processId = props.record.processId
		formOption.value.submitBtn.loading = true
		const processForm: any[] = JSON.parse(cur_processForm_str)
		processForm.forEach(v => {
			// 填写的数据存储(local_: 本地数据处理标识)
			v.local_value = formData[v.field]
		})
		model
			.processLaunchApi({
				processId, // 流程ID
				processForm: JSON.stringify(processForm) // 流程表单JSON内容 & local_value 保存
			})
			.then(res => {
				ElMessage.success('提交成功')
				updateModelValue(false)
			})
			.finally(() => {
				formOption.value.submitBtn.loading = false
			})
	},
	submitBtn: { loading: false }
	/*formData: {
		local_workflow: {},
		test_3: 'eeeee'
	}*/
})
/*const formData = ref({
	local_workflow: {}
})*/
/*const workflowItem = computed(() => {
  return {
    type:'ScWorkflow',
    field: 'local_workflow'
  }
})*/
/*const workflowItem = {
	type: 'ScWorkflow',
	field: 'local_workflow'
}
const formRule = shallowRef([workflowItem])*/
// 当前form 表单数据字符串
let cur_processForm_str = '[]'
const formRule = shallowRef([])
const loading = ref(true)
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 = {}
	try {
		console.log(JSON.parse(res.modelContent))
		const modelContent = JSON.parse(res.modelContent)
		local_workflow = modelContent.nodeConfig ?? modelContent.childNode
	} catch (e) {}
	// formOption.value.formData = { local_workflow, test_3: 'eeeee' }
	cur_processForm_str = res.processForm || '[]'
	// processForm 动态表单
	formRule.value = [...JSON.parse(cur_processForm_str) /*, { ...workflowItem, value: local_workflow }*/ /*, { type: 'input', field: 'test_3' }*/]
	// loading.value = false
	// console.error(formData.value, 'formData.value')
})
</script>
<style lang="scss">
.local-launch_drawer-wrap {
	.el-drawer__header {
		display: flex;
		padding: 16px 24px;
		align-items: center;
		justify-content: space-between;
		background-color: var(--el-color-info-light-9);
		text-align: left;
		/* margin-right: 0; */
		margin-bottom: 0;
	}
	.el-drawer__close-btn {
		padding: 0;
		margin-right: -12px;
	}
	.el-drawer__body {
		position: relative;
		//display: flex;
		//flex-direction: column;
	}
	.local_loading {
		position: absolute;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, 0.05);
	}
}
</style>
<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>