feat: 新版表单 80%

package.json

@@ -28,6 +28,7 @@
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.4",
+    "everright-formeditor": "^1.3.0-beta.2",
     "js-md5": "^0.7.3",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",

src/styles/reset.scss

@@ -102,6 +102,8 @@ ol,
 ul {
 	box-sizing: border-box;
 	list-style: none;
+	padding: 0px;
+	margin: 0px;
 }
 blockquote,
 q {

src/views/flow/create/components/FormDesign.vue

@@ -1,36 +1,43 @@
-<script setup name="FormDesign">
-import FcDesigner from '@/components/FormCreateDesigner/FcDesigner.vue'
+<script setup>
+import { onMounted, ref } from 'vue'
+import { erFormEditor } from 'everright-formeditor'
+import 'Everright-formEditor/dist/style.css'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
-
 const flowStore = useFlowStore()
 const { processForm } = storeToRefs(flowStore)
-const designer = ref()
 
-const exportJsonEv = async json => {
-	designer.value.saveAsForm()
+const EReditorRef = ref()
+
+const handleListener = obj => {
+	const { data } = obj
+	console.log(data, '....')
 }
 
 // 保存当前的表单数据
-const exportJson = async json => {
-	processForm.value = JSON.stringify(json)
+const exportJsonEv = () => {
+	const formData = EReditorRef.value.getData()
+	processForm.value = JSON.stringify(formData)
+  debugger
 }
 
 /**
- * 1、拿到store中的值，然后循环判表单字段的Id是否唯一
- * 2、如果不唯一，提示用户需要重新填写表单字段Id
+ * 1、拿到store中的值，然后循环判表单字段的Key是否唯一
+ * 2、如果不唯一，提示用户需要重新填写表单字段Key
  */
 const validateOnlyEv = () => {
+	console.log(processForm.value, '======')
+	if (processForm.value === '{}') return false
 	const finallyFormData = JSON.parse(processForm.value)
-	const fields = finallyFormData.map(item => item.field)
+	const fields = finallyFormData.fields.map(item => item.key)
 	return fields.some((item, index) => fields.indexOf(item) !== index) // 如果发现重复项，返回true；否则，返回false
 }
 
 // 初始化的时候，渲染当前组件的值
 onMounted(() => {
+	console.log('onMounted....')
 	if (processForm.value) {
-		designer.value.initForm(processForm.value || [])
+		EReditorRef.value.setData(JSON.parse(processForm.value))
 	}
 })
 
@@ -39,9 +46,6 @@ defineExpose({
 	validateOnlyEv
 })
 </script>
-
 <template>
-	<fc-designer ref="designer" @export-json="exportJson" />
+	<er-form-editor ref="EReditorRef" :is-show-i18n="false" @listener="handleListener" />
 </template>
-
-<style scoped lang="scss"></style>

src/views/flow/create/components/test.vue

@@ -0,0 +1,47 @@
+<script setup name="FormDesign">
+import FcDesigner from '@/components/FormCreateDesigner/FcDesigner.vue'
+import useFlowStore from '@/store/modules/flow'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
+
+const flowStore = useFlowStore()
+const { processForm } = storeToRefs(flowStore)
+const designer = ref()
+
+const exportJsonEv = async json => {
+	designer.value.saveAsForm()
+}
+
+// 保存当前的表单数据
+const exportJson = async json => {
+	processForm.value = JSON.stringify(json)
+}
+
+/**
+ * 1、拿到store中的值，然后循环判表单字段的Id是否唯一
+ * 2、如果不唯一，提示用户需要重新填写表单字段Id
+ */
+const validateOnlyEv = () => {
+	const finallyFormData = JSON.parse(processForm.value)
+	const fields = finallyFormData.map(item => item.field)
+	return fields.some((item, index) => fields.indexOf(item) !== index) // 如果发现重复项，返回true；否则，返回false
+}
+
+// 初始化的时候，渲染当前组件的值
+onMounted(() => {
+	if (processForm.value) {
+		designer.value.initForm(processForm.value || [])
+	}
+})
+
+defineExpose({
+	exportJsonEv,
+	validateOnlyEv
+})
+</script>
+
+<template>
+	<fc-designer ref="designer" @export-json="exportJson" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/flow/create/index.vue

@@ -88,7 +88,7 @@ const removeCurTab = () => {
 			} else {
 				router.push('/')
 			}
-      flowStore.$reset()
+			flowStore.$reset()
 		})
 }
 const submitHandler = async () => {
@@ -127,7 +127,7 @@ const changeTab = () => {
 		dyncComponent.value.exportJsonEv()
 		leavePageFlag = dyncComponent.value.validateOnlyEv() // FormDesign.vue中的方法
 		if (leavePageFlag) {
-			return ElMessage.error(`表单设计中字段ID不能重复，请确认唯一值`)
+			return ElMessage.error(`表单设计中字段Key不能重复，请确认唯一值`)
 		}
 	} else if (activeName.value === '流程设计') {
 		dyncComponent.value.saveDesign()

src/views/flow/group/components/listGroup.vue

@@ -25,7 +25,7 @@
 					<el-space>
 						<el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, idx)"><EditPen /></el-icon>
 					</el-space>
-					<el-space>
+					<el-space style="margin-left: 10px">
 						<el-tooltip effect="dark" content="删除" placement="top">
 							<el-icon :size="16" @click="deleteFlowGroup(item)"><Delete /></el-icon>
 						</el-tooltip>
@@ -61,12 +61,12 @@
 												<el-icon :size="16" @click="updateEv(element.processId)"><EditPen /></el-icon>
 											</el-tooltip>
 										</el-space>
-										<el-space wrap>
+										<el-space wrap style="margin-left: 10px">
 											<el-tooltip effect="dark" content="复制" placement="top">
 												<el-icon :size="16" @click="copyEv(element.processId)"><CopyDocument /></el-icon>
 											</el-tooltip>
 										</el-space>
-										<el-space wrap>
+										<el-space wrap style="margin-left: 10px">
 											<el-tooltip v-if="element.processState === 1" effect="dark" content="禁用" placement="top">
 												<el-icon :size="16" @click="enabledEv(element.processId, 0)"><CircleClose /></el-icon>
 											</el-tooltip>
@@ -74,7 +74,7 @@
 												<el-icon :size="16" @click="enabledEv(element.processId, 1)"><Check /></el-icon>
 											</el-tooltip>
 										</el-space>
-										<el-space wrap>
+										<el-space wrap style="margin-left: 10px">
 											<el-popconfirm title="确定删除当前数据?" @confirm="stopEv(element.processId)">
 												<template #reference>
 													<el-icon :size="16"><Delete /></el-icon>

src/views/flow/group/index.vue

@@ -5,12 +5,12 @@
 				<el-input v-model="keyword" style="width: 200px" placeholder="搜索" clearable @blur="searchProcess" />
 				<div style="margin-left: auto; flex-shrink: 0">
 					<template v-if="!sortFlag">
-						<el-space wrap><el-button @click="addNewGroupEv">新建分组</el-button></el-space>
-						<el-space wrap><el-button @click="changeComponent">分组排序</el-button></el-space>
+						<el-button @click="addNewGroupEv">新建分组</el-button>
+						<el-button @click="changeComponent">分组排序</el-button>
 					</template>
 					<template v-else>
-						<el-space wrap><el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button></el-space>
-						<el-space wrap><el-button type="info" plain @click="changeComponent">取 消</el-button></el-space>
+						<el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button>
+						<el-button type="info" plain @click="changeComponent">取 消</el-button>
 					</template>
 					<el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag" @click="createProcessEv">创建审批</el-button>
 				</div>