feat: 表单设计器 100%

src/views/flow/form/designForm.vue

@@ -1,26 +1,38 @@
 <template>
-	<el-drawer v-model="visibleDialog" title="查看详情" size="100%" @close="handleCancel">
+	<el-drawer v-model="visibleDialog" class="custom-adrawer" size="100%" @close="handleCancel">
+		<template #header>
+			<div class="flex flex-pack-justify flex_align-center">
+				<span>查看详情</span>
+				<el-button type="primary" @click="saveDesignEv">保存</el-button>
+			</div>
+		</template>
 		<div>
-			<er-form-editor ref="EReditorRef" :is-show-i18n="false" :file-upload-u-r-i="uploadFileApi" @listener="handleListener" />
+			<er-form-editor ref="EReditorRef" v-if="myProps.modelValue" :is-show-i18n="false" :file-upload-u-r-i="uploadFileApi" @listener="handleListener" />
 		</div>
 	</el-drawer>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { erFormEditor } from '@ER/formEditor'
+import { ElMessage } from 'element-plus'
+import formtemplate from '@/api/flow/formtemplate'
 const { VITE_APP_BASE_API } = import.meta.env
 const EReditorRef = ref()
 const formOptions = ref({})
 const uploadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/upload`)
 
 // 同步值
-const $myEmit = defineEmits(['update:modelValue'])
+const $myEmit = defineEmits(['update:modelValue', 'successFn'])
 
 const myProps = defineProps({
 	modelValue: {
 		type: Boolean,
 		default: false
+	},
+	record: {
+		type: Object,
+		default: () => {}
 	}
 })
 
@@ -30,6 +42,23 @@ const handleCancel = () => {
 	$myEmit('update:modelValue', false)
 }
 
+const saveDesignEv = async () => {
+	const formStructure = EReditorRef.value.getData()
+	const fields = formStructure?.fields || []
+	const bool = fields.length
+	if (!bool) {
+		return ElMessage({
+			message: '请设计您的表单模板内容',
+			type: 'error'
+		})
+	}
+	const content = JSON.stringify(formStructure)
+	await formtemplate.formTemplateAddOrEditSaveApi({ ...myProps.record, content })
+	ElMessage.success(`表单模板设计成功~`)
+	handleCancel()
+	$myEmit('successFn')
+}
+
 // computed
 const visibleDialog = computed({
 	get() {
@@ -39,30 +68,59 @@ const visibleDialog = computed({
 		$myEmit('update:modelValue', val)
 	}
 })
+
+watch(
+	() => myProps.modelValue,
+	(val, oldValue) => {
+		if (val) {
+			nextTick(() => {
+				if (myProps.record?.content) {
+					const formStructure = JSON.parse(myProps.record.content || '{}')
+					EReditorRef.value.setData(formStructure || {})
+				}
+			})
+		}
+	}
+)
 </script>
 
 <style scoped lang="scss">
-.content-title {
-	overflow: hidden;
-	color: #000000d9;
-	font-weight: 500;
-	font-size: 16px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	margin-bottom: 20px;
-	&.mbt20 {
-		margin-top: 20px;
-	}
+.flow-header-box {
+	font-weight: 400;
+	font-size: 14px;
+	border-bottom: 1px solid #e5e6ec;
+	padding: 0 16px;
+	height: 39px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: #86909c;
 }
 
-:deep(.el-drawer__header) {
-	background-color: rgb(245, 245, 245);
-	padding: 0px 20px;
-	height: 50px;
-	color: #000000;
-	margin-bottom: 0px;
-}
-:deep(.el-drawer__title) {
-	font-size: 20px;
+//.custom-adrawer {
+//	&:deep(.el-drawer) {
+//		.el-drawer__header {
+//			background-color: rgb(245, 245, 245);
+//			padding: 0px 20px;
+//			height: 50px;
+//			color: #000000;
+//			margin-bottom: 0px;
+//		}
+//		.el-drawer__title {
+//			font-size: 20px;
+//		}
+//	}
+//}
+:deep(.el-drawer) {
+	.el-drawer__header {
+		background-color: rgb(245, 245, 245);
+		padding: 0px 20px;
+		height: 50px;
+		color: #000000;
+		margin-bottom: 0px;
+	}
+	.el-drawer__title {
+		font-size: 20px;
+	}
 }
 </style>

src/views/flow/form/index.vue

@@ -80,7 +80,7 @@
 
 				<template #actionSlot="scope">
 					<el-tooltip content="设计" placement="bottom" effect="light">
-						<el-icon class="ibt0" @click="visibleDesignForm = !visibleDesignForm">
+						<el-icon class="ibt0" @click="designTemplateEv(scope.row)">
 							<Money />
 						</el-icon>
 					</el-tooltip>
@@ -125,12 +125,12 @@
 		/>
 
 		<!-- 表单设计Dialog -->
-		<design-form ref="designForm" v-model="visibleDesignForm"></design-form>
+		<design-form ref="designForm" v-model="visibleDesignForm" :record="recordObject" @successFn="queryList"></design-form>
 	</div>
 </template>
 <script lang="tsx" setup>
 import formCategory from '@/api/flow/formcategory'
-import formtemplate from '@/api/flow/formtemplate.ts'
+import formtemplate from '@/api/flow/formtemplate'
 import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
@@ -143,6 +143,7 @@ const visibleTemplate = ref(false) // 弹窗显示隐藏
 const visibleDesignForm = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
 const activeData = ref({})
+const recordObject = ref({})
 const activeDataTemplate = ref({})
 const current_mode = ref('') // 当前模式 (tree | table)
 const formsDialog = [
@@ -441,6 +442,11 @@ const tableTemplateEdit = async row => {
 	visibleTemplate.value = true
 }
 
+const designTemplateEv = async row => {
+	recordObject.value = { ...row }
+	visibleDesignForm.value = true
+}
+
 const deleteTemplateItem = async ids => {
 	await formtemplate.formTemplateDeleteApi(ids)
 	updateParams()
@@ -467,7 +473,6 @@ const submitTemplateHandler = async params => {
 	try {
 		formTemplateOptions.value.formConfig.submitLoading = true
 		params.status = params.status ? 1 : 0
-		params.content = JSON.stringify({name: 1, age:2})
 		params.id = activeDataTemplate.value.id ? activeDataTemplate.value.id : null
 		await formtemplate.formTemplateAddOrEditSaveApi(params)
 		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)