feat: 业务流程发起普通表单展示100%

src/views/flow/test/businessLaunch.vue

@@ -12,11 +12,17 @@
 		<div class="info-wrap">
 			<el-divider content-position="left">{{ record.processName }}表单</el-divider>
 			<!-- 表单设计 -->
-			<div class="self-Everright-formEditor">
-				<er-form-preview ref="EReditorRef" :is-show-complete-button="false" :file-upload-u-r-i="uploadFileApi" />
-			</div>
+			<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 v-model="modelContentConfig"></flow-trend>
 			<el-divider></el-divider>
@@ -31,7 +37,7 @@
 
 <script setup lang="ts">
 import model from '@/api/flow/process'
-import { nextTick, onMounted, ref } from 'vue'
+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'
@@ -67,6 +73,7 @@ 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 onSubmit = async () => {
 	const processId = props.record.processId
@@ -118,6 +125,8 @@ const getDetailInfo = () => {
 		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
 }

src/views/flow/test/test1.vue

@@ -0,0 +1,64 @@
+<template>
+	<el-form :model="form" label-width="auto" style="max-width: 600px">
+		<el-form-item label="Activity name">
+			<el-input v-model="form.name" />
+		</el-form-item>
+		<el-form-item label="Activity zone">
+			<el-select v-model="form.region" placeholder="please select your zone">
+				<el-option label="Zone one" value="shanghai" />
+				<el-option label="Zone two" value="beijing" />
+			</el-select>
+		</el-form-item>
+		<el-form-item label="Activity time">
+			<el-col :span="11">
+				<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+			</el-col>
+			<el-col :span="2" class="text-center">
+				<span class="text-gray-500">-</span>
+			</el-col>
+			<el-col :span="11">
+				<el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+			</el-col>
+		</el-form-item>
+		<el-form-item label="Instant delivery">
+			<el-switch v-model="form.delivery" />
+		</el-form-item>
+		<el-form-item label="Activity type">
+			<el-checkbox-group v-model="form.type">
+				<el-checkbox value="Online activities" name="type"> Online activities </el-checkbox>
+				<el-checkbox value="Promotion activities" name="type"> Promotion activities </el-checkbox>
+				<el-checkbox value="Offline activities" name="type"> Offline activities </el-checkbox>
+				<el-checkbox value="Simple brand exposure" name="type"> Simple brand exposure </el-checkbox>
+			</el-checkbox-group>
+		</el-form-item>
+		<el-form-item label="Resources">
+			<el-radio-group v-model="form.resource">
+				<el-radio value="Sponsor">Sponsor</el-radio>
+				<el-radio value="Venue">Venue</el-radio>
+			</el-radio-group>
+		</el-form-item>
+		<el-form-item label="Activity form">
+			<el-input v-model="form.desc" type="textarea" />
+		</el-form-item>
+	</el-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+// do not use same name with ref
+const form = reactive({
+	name: '',
+	region: '',
+	date1: '',
+	date2: '',
+	delivery: false,
+	type: [],
+	resource: '',
+	desc: ''
+})
+
+const onSubmit = () => {
+	console.log('submit!')
+}
+</script>