feat:加入表单设计器

src/views/flow/form/designForm.vue

@@ -0,0 +1,68 @@
+<template>
+	<el-drawer v-model="visibleDialog" title="查看详情" size="100%" @close="handleCancel">
+		<div>
+			<er-form-editor ref="EReditorRef" :is-show-i18n="false" :file-upload-u-r-i="uploadFileApi" @listener="handleListener" />
+		</div>
+	</el-drawer>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { erFormEditor } from '@ER/formEditor'
+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 myProps = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	}
+})
+
+const handleListener = obj => {}
+
+const handleCancel = () => {
+	$myEmit('update:modelValue', false)
+}
+
+// computed
+const visibleDialog = computed({
+	get() {
+		return myProps.modelValue
+	},
+	set(val) {
+		$myEmit('update:modelValue', val)
+	}
+})
+</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;
+	}
+}
+
+: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;
+}
+</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">
+						<el-icon class="ibt0" @click="visibleDesignForm = !visibleDesignForm">
 							<Money />
 						</el-icon>
 					</el-tooltip>
@@ -125,6 +125,7 @@
 		/>
 
 		<!-- 表单设计Dialog -->
+		<design-form ref="designForm" v-model="visibleDesignForm"></design-form>
 	</div>
 </template>
 <script lang="tsx" setup>
@@ -135,9 +136,11 @@ import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete, Edit } from '@element-plus/icons-vue'
 import StatusIndicator from '@/components/StatusIndicator/index.vue'
+import DesignForm from './designForm.vue'
 
 const visible = ref(false) // 弹窗显示隐藏
 const visibleTemplate = ref(false) // 弹窗显示隐藏
+const visibleDesignForm = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
 const activeData = ref({})
 const activeDataTemplate = ref({})