feat: 系统表单保存

src/views/flow/test/businessLaunch.vue

@@ -36,26 +36,17 @@
 </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'
+import { nextTick, onMounted, ref, markRaw, defineAsyncComponent, provide } from 'vue'
 
 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 = '{}'
@@ -75,6 +66,9 @@ const modelContentConfig = ref<ModelContentConfig | any>({})
 const dyVueComponent = ref(undefined)
 const dyVueComponentRef = ref()
 const flowTrendRef = ref()
+const dyVueForm = ref({})
+
+provide('dyVueForm', dyVueForm) // 这里主要是存放动态的form的属性值
 
 const onSubmit = async () => {
 	const processId = props.record.processId
@@ -113,7 +107,7 @@ const onSubmit = async () => {
 	} else {
 		const formData = dyVueComponentRef.value.getData()
 		const testData = {
-			formStructure: '表单主体vue地址',
+			formStructure: '@/views/flow/test/test1.vue',
 			formData: formData
 		}
 		params = {
@@ -152,10 +146,21 @@ const getDetailInfo = () => {
 		const { formStructure } = JSON.parse(cur_processForm_str)
 		EReditorRef.value.setData(formStructure)
 	} else {
-		dyVueComponent.value = markRaw(defineAsyncComponent(() => import('./test1.vue')))
+		// dyVueForm.value = {
+		// 	dy: {
+		// 		name: '测试名字',
+		// 		region: 1,
+		// 		delivery: true,
+		// 		type: ['1'],
+		// 		resource: 'Sponsor',
+		// 		desc: '啦啦啦'
+		// 	}
+		// }
+		dyVueComponent.value = markRaw(defineAsyncComponent(() => import('@/views/flow/test/test1.vue')))
 	}
 	validateForm.value.loading = false
 }
+
 onMounted(() => {
 	nextTick(() => {
 		getDetailInfo()

src/views/flow/test/test1.vue

@@ -5,36 +5,25 @@
 		</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-option label="1" value="shanghai" />
+				<el-option label="2" 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 label="1" name="type"> Online activities </el-checkbox>
+				<el-checkbox label="2" name="type"> Promotion activities </el-checkbox>
+				<el-checkbox label="3" name="type"> Offline activities </el-checkbox>
+				<el-checkbox label="4" 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 label="Sponsor">Sponsor</el-radio>
+				<el-radio label="Venue">Venue</el-radio>
 			</el-radio-group>
 		</el-form-item>
 		<el-form-item label="Activity form">
@@ -44,26 +33,25 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { reactive, ref, defineExpose, inject, nextTick, onMounted, watch } from 'vue'
+import { get, set } from 'lodash'
 
-// do not use same name with ref
-const form = reactive({
-	name: '',
-	region: '',
-	date1: '',
-	date2: '',
-	delivery: false,
-	type: [],
-	resource: '',
-	desc: ''
-})
+const dyVueForm = inject('dyVueForm')
 
-const onSubmit = () => {
-	console.log('submit!')
-}
+const form = ref(get(dyVueForm.value, 'dy', dyVueForm.value))
+set(dyVueForm.value, 'dy', form.value)
+
+watch(
+	() => get(dyVueForm.value, 'dy'),
+	vl => (form.value = vl)
+)
+watch(
+	() => form.value,
+	v => set(dyVueForm.value, 'dy', v)
+)
 
 const getData = () => {
-	return form
+	return form.value
 }
 
 defineExpose({

src/views/flow/test/test2.vue

@@ -0,0 +1,55 @@
+<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="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: '',
+	delivery: false,
+	type: [],
+	resource: '',
+	desc: ''
+})
+const getData = () => {
+	return form
+}
+
+defineExpose({
+	// 把数据暴露给父节点使用
+	getData
+})
+</script>