aizuda-web-vue3/src/views/flow/test/businessLaunch.vue

<template>
	<el-drawer
		:close-on-click-modal="false"
		class="local-launch_drawer-wrap"
		:title="record.processName"
		:model-value="modelValue"
		size="760px"
		@update:model-value="updateModelValue"
	>
		<div v-if="validateForm.loading" v-loading="true" class="local_loading"></div>

		<div class="info-wrap">
			<el-divider content-position="left">{{ record.processName }}表单</el-divider>
			<!-- 表单设计 -->
			<template v-if="record.formTemplate.type === 0">
				<div class="self-Everright-formEditor">
					<er-form-preview ref="EReditorRef" :is-show-complete-button="false" :file-upload-u-r-i="uploadFileApi" />
				</div>
			</template>

			<!-- vue自定义 -->
			<template v-if="record.formTemplate.type === 1">
				<component :is="dyVueComponent"></component>
			</template>

			<el-divider content-position="left">审批流程</el-divider>
			<flow-trend ref="flowTrendRef" v-model="modelContentConfig"></flow-trend>
			<el-divider></el-divider>
		</div>

		<template #footer>
			<el-button @click="updateModelValue(false)">{{ $t('le.btn.cancel') }}</el-button>
			<el-button :disabled="validateForm.loading" type="primary" style="margin-left: 8px" @click="onSubmit">{{ $t('le.btn.confirm') }}</el-button>
		</template>
	</el-drawer>
</template>

<script setup lang="ts">
import model from '@/api/flow/process'
import purchaseOrder from '@/api/test/purchaseOrder'
import { nextTick, onMounted, ref, markRaw, defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { erFormPreview } from '@ER/formEditor'
import FlowTrend from '@/components/Flow/FlowTrend.vue'
import type { ModelContentConfig } from '@/views/approve/components/config.ts'

type Props = {
	modelValue: boolean
	record: { processId: string; processName: string; [key: string]: any }
}
type Assignee = {
	type: 1 | 3 // 1: 用户 3: 角色
	assignees: { [key: string]: any /*name, id*/ }
	disabled?: boolean
	selectOpts?: any
	// minSelected?: number
	// maxSelected?: number
}

// 当前form 表单数据字符串
let cur_processForm_str = '{}'

const updateModelValue = (bool: boolean) => emit('update:modelValue', bool)
const props = defineProps<Props>()
const emit = defineEmits<{
	'update:modelValue': [bool: boolean] // 具名元组语法
	update: [value: string]
}>()
const validateForm = ref({ loading: false })

const { VITE_APP_BASE_API } = import.meta.env
const uploadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/upload`)
const EReditorRef = ref()
const modelContentConfig = ref<ModelContentConfig | any>({})
const dyVueComponent = ref(undefined)
const flowTrendRef = ref()

const onSubmit = async () => {
	const processId = props.record.processId
	const form = EReditorRef.value.getSelfFormRef()
	form.validate((valid: any) => {
		if (valid) {
			// 表单验证通过 进行保存
			validateForm.value.loading = true
			const formData = EReditorRef.value.getData()
			let processForm = JSON.parse(cur_processForm_str)
			processForm = { ...processForm, formData }
			// 这里要从子节点获取流程图信息 进行保存
			const _assigneeMap = flowTrendRef.value.getAssigneeMap()
			const assigneeMap_ = Object.keys(_assigneeMap).reduce((obj, nodeKey: string) => {
				const _o = _assigneeMap[nodeKey]
				obj[nodeKey] = {
					assigneeList: _o.assignees,
					type: _o.type
				}
				return obj
			}, {} as { [nodeKey: string]: any })
			const params = {
				id: props.record.rowId,
				test: 'formTemplate',
				processStart: {
					processId, // 流程ID
					processForm: JSON.stringify(processForm), // 流程表单JSON内容 & local_value 保存
					assigneeMap: assigneeMap_
				}
			}
			purchaseOrder
				.postlaunchApi(params)
				.then(res => {
					ElMessage.success('提交成功')
					updateModelValue(false)
				})
				.finally(() => {
					validateForm.value.loading = false
				})
		}
	})
}

// 获取当前表单中的详情
const getDetailInfo = () => {
	validateForm.value.loading = true
	let modelContent_config = {}
	const modelContent = JSON.parse(props.record.modelContent) // modelContent 这个是后台返回来的
	modelContent_config = modelContent.nodeConfig ?? modelContent.childNode
	modelContentConfig.value = modelContent_config
	const { content, type } = props.record.formTemplate
	if (!type) {
		// type: 0 表单设计  1 vue自定义表单
		cur_processForm_str = content || '{}' //  processForm 这个是后台返回来的
		const formStructure = JSON.parse(cur_processForm_str)
		EReditorRef.value.setData(formStructure)
	} else {
		dyVueComponent.value = markRaw(defineAsyncComponent(() => import('./test1.vue')))
	}
	validateForm.value.loading = false
}
onMounted(() => {
	nextTick(() => {
		getDetailInfo()
	})
})
</script>

<style lang="scss">
// 和ItemDrawer一样可以公用，待提取
.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;
	}
	.el-drawer__footer {
		border-top: 1px solid var(--el-border-color-lighter);
		padding: 12px 24px;
	}
	.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 {
	.form-wrap {
		flex: 1;
	}

	// 修改everright 表单的样式
	.self-Everright-formEditor {
		:deep(.Everright-formEditor-selectElement) {
			padding: 0px 16px;
		}
	}
}
</style>