Merge branch 'feature/everrightForm' into middle-feat

# Conflicts:
#	src/views/approve/launch/ItemDrawer.vue
#	src/views/flow/create/components/FormDesign.vue
#	src/views/flow/create/index.vue

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/components/scWorkflow/nodes/approver.vue

@@ -120,7 +120,7 @@
 						<!-- 表单设置 -->
 						<div v-show="radio1 === '2'">
 							<el-table ref="multipleTableRef" :data="form.extendConfig.formConfig" style="width: 100%">
-								<el-table-column property="title" label="表单字段" align="center" />
+								<el-table-column property="label" label="表单字段" align="center" />
 								<el-table-column align="center">
 									<template #header>操作权限</template>
 									<template #default="scope">
@@ -219,15 +219,18 @@ export default {
 			if (this.form.extendConfig) {
 				formConfig = this.form.extendConfig.formConfig
 			}
-			const operateTable = JSON.parse(this.processForm).map(item => {
+			const { formStructure } = JSON.parse(this.processForm)
+			const { fields } = formStructure
+			const operateTable = fields.map(item => {
 				let opera = '1'
 				formConfig.map(i => {
-					if (item.field === i.field) {
+					if (item.id === i.id) {
 						opera = i.opera
 					}
 				})
-				return { title: item.title, field: item.field, opera: opera }
+				return { label: item.label, id: item.id, opera: opera }
 			})
+			console.log(operateTable, '====operateTable====')
 			this.form.extendConfig = { formConfig: operateTable }
 			this.drawer = true
 		},

src/store/modules/flow.ts

@@ -25,7 +25,7 @@ export const useFlowStore = defineStore({
 
 			cacheSwitch: false, // 缓存开关
 			modelContent: '', // 流程模型定义JSON内容
-			processForm: '[]', // 流程定义表单
+			processForm: '{}', // 流程定义表单
 			processSetting: {
 				allowRevocation: true, // 允许撤销审批中的申请
 				allowRevocationDay: true, // 允许撤销指定天内通过的审批

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/approve/components/approvedContent.vue

@@ -38,7 +38,10 @@
 					<div class="scroll-wrap">
 						<!-- 表单 -->
 						<div v-loading="validateForm.loading" class="form-wrap">
-							<FormCreate v-show="validateForm.rule.length" v-model:api="validateForm.api" :option="validateForm.option" :rule="validateForm.rule" />
+							<!--
+              <FormCreate v-show="validateForm.rule.length" v-model:api="validateForm.api" :option="validateForm.option" :rule="validateForm.rule" />
+              -->
+							<er-form-preview ref="EReditorRef" :is-show-complete-button="false" />
 							<LeNoData v-if="!validateForm.rule.length" message="表单无数据" />
 						</div>
 
@@ -126,7 +129,7 @@
 										<el-icon><Plus /></el-icon>
 										加签
 									</el-dropdown-item>
-									<el-dropdown-item @click.native="openComment('loseSignVisible')" v-if="false">
+									<el-dropdown-item v-if="false" @click.native="openComment('loseSignVisible')">
 										<el-icon><Minus /></el-icon>
 										减签
 									</el-dropdown-item>
@@ -196,6 +199,7 @@ import RollbackDialog from './rollbackDialog'
 import viewForm from '@/utils/form'
 import { storeToRefs } from 'pinia'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { erFormPreview } from 'everright-formeditor'
 
 defineProps({
 	/**
@@ -227,7 +231,9 @@ const activeData = ref([])
 const currentType = ref(null)
 const currentFormData = ref({})
 // 当前form 表单数据字符串
-let cur_processForm_str = '[]'
+let cur_processForm_str =
+	'{"formStructure":{"list":[{"type":"inline","columns":["G87FL_bjPlVjZjSd2P3SE"],"style":{},"id":"XqyjpOONTVRdA9XeA667G","key":"inline_XqyjpOONTVRdA9XeA667G"},{"type":"inline","columns":["fg_137feCy7pJSJs9sOaU"],"style":{},"id":"RsbiEBhHked3LYw_GDwYt","key":"inline_RsbiEBhHked3LYw_GDwYt"}],"config":{"isSync":true,"pc":{"size":"default","labelPosition":"left","completeButton":{"text":"提交","color":"","backgroundColor":""}},"mobile":{"labelPosition":"left","completeButton":{"text":"提交","color":"","backgroundColor":""}}},"fields":[{"type":"input","label":"姓名","icon":"input","key":"input_name","id":"G87FL_bjPlVjZjSd2P3SE","options":{"clearable":true,"isShowWordLimit":false,"renderType":1,"disabled":false,"showPassword":false,"defaultValue":"","placeholder":"请输入","labelWidth":100,"isShowLabel":true,"required":false,"min":null,"max":null},"style":{"width":{"pc":"100%","mobile":"100%"}}},{"type":"input","label":"别名","icon":"input","key":"input_alias","id":"fg_137feCy7pJSJs9sOaU","options":{"clearable":true,"isShowWordLimit":false,"renderType":1,"disabled":false,"showPassword":false,"defaultValue":"","placeholder":"请输入","labelWidth":100,"isShowLabel":true,"required":false,"min":null,"max":null},"style":{"width":{"pc":"100%","mobile":"100%"}}}],"data":{},"logic":{}},"formData":{"input_name":"罗小胖","input_alias":"luoxiaopang"}}'
+const EReditorRef = ref()
 const taskId = computed(() => {
 	return currentTaskRow.value.taskId || ''
 })
@@ -337,6 +343,9 @@ const getTaskDetail = () => {
 						showValue
 					}
 				})*/
+				const { formStructure, formData } = JSON.parse(cur_processForm_str)
+				EReditorRef.value.setData(formStructure, formData)
+				return
 				const forms = JSON.parse(data.formContent)
 				cur_processForm_str = data.formContent
 				if (Array.isArray(forms)) {

src/views/approve/launch/ItemDrawer.vue

@@ -10,7 +10,8 @@
 		<div v-if="validateForm.loading" v-loading="true" class="local_loading"></div>
 		<div class="info-wrap">
 			<el-divider content-position="left">{{ record.processName }}表单</el-divider>
-			<FormCreate v-model:api="validateForm.api" class="form-wrap" :option="validateForm.option" :rule="validateForm.rule" />
+			<FormCreate v-if="false" v-model:api="validateForm.api" class="form-wrap" :option="validateForm.option" :rule="validateForm.rule" />
+			<er-form-preview ref="EReditorRef" :is-show-complete-button="false" />
 			<el-divider content-position="left">审批流程</el-divider>
 			<el-timeline class="timeline-wrap">
 				<el-timeline-item v-for="(v, index) in processTimelineList" :key="index">
@@ -63,10 +64,13 @@
 <script setup lang="ts">
 import model from '@/api/flow/process'
 import viewForm from '@/utils/form'
+import { erFormPreview } from 'everright-formeditor'
+import 'Everright-formEditor/dist/style.css'
 import { ref, shallowRef, computed, reactive, watchEffect } from 'vue'
 import { ElMessage } from 'element-plus'
 import UseSelect from '@/components/scWorkflow/select.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
+const EReditorRef = ref()
 type Props = {
 	modelValue: boolean
 	record: { processId: string; processName: string; [key: string]: any }
@@ -129,17 +133,22 @@ const validateForm = ref({
 })
 
 const onSubmit = async () => {
+	// todo 这里还需要做表单校验
+	const formData = EReditorRef.value.getData()
+	// console.log(formData)
 	const api = validateForm.value.api
-	await api.validate()
-	const values = api.formData()
+	// await api.validate()
+	// const values = api.formData()
 	// console.warn(values, 'values')
 	const processId = props.record.processId
 	validateForm.value.loading = true
-	const processForm: any[] = JSON.parse(cur_processForm_str)
-	processForm.forEach(v => {
-		// 填写的数据存储(local_: 本地数据处理标识)
-		v.local_value = values[v.field]
-	})
+	let processForm = JSON.parse(cur_processForm_str)
+	processForm = { ...processForm, formData }
+	// processForm.forEach(v => {
+	// 	// 填写的数据存储(local_: 本地数据处理标识)
+	// 	v.local_value = values[v.field]
+	// })
+	console.log(processForm, '===========')
 	const _assigneeMap = assigneeMap.value
 	const assigneeMap_ = Object.keys(_assigneeMap).reduce((obj, key) => {
 		const _o = _assigneeMap[key]
@@ -165,7 +174,7 @@ const onSubmit = async () => {
 }
 
 // 当前form 表单数据字符串
-let cur_processForm_str = '[]'
+let cur_processForm_str = '{}'
 const processChecked = reactive<{ [key: string]: any }>({
 	/*'local_条件分支_期限': '短期'*/
 })
@@ -302,13 +311,15 @@ Promise.all([
 			const modelContent = JSON.parse(res.modelContent)
 			local_workflow = modelContent.nodeConfig ?? modelContent.childNode
 		} catch (e) {}*/
-		cur_processForm_str = res.processForm || '[]'
+		cur_processForm_str = res.processForm || '{}'
 		// const x = JSON.parse(cur_processForm_str)
 		// x[0].validate = [{ required: true, message: '请输入商品简介', trigger: 'blur' }]
 
 		// processForm 动态表单
 		// validateForm.value.rule = [...JSON.parse(cur_processForm_str) /*, { ...workflowItem, value: local_workflow }*/ /*, { type: 'input', field: 'test_3' }*/]
-		validateForm.value.rule = JSON.parse(cur_processForm_str)
+		const { formStructure } = JSON.parse(cur_processForm_str)
+		EReditorRef.value.setData(formStructure)
+		// validateForm.value.rule = JSON.parse(cur_processForm_str)
 	})
 ]).finally(() => {
 	validateForm.value.loading = false

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

@@ -1,59 +1,47 @@
-<script setup name="FormDesign">
-import FcDesigner from '@/components/FormCreateDesigner/FcDesigner.vue'
+<script setup>
+import { onBeforeUnmount, 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'
-
+import { ElMessage } from 'element-plus'
 const flowStore = useFlowStore()
 const { processForm } = storeToRefs(flowStore)
-const designer = ref()
 
-const exportJsonEv = async json => {
-	designer.value.saveAsForm()
-}
+const EReditorRef = ref()
 
-// 保存当前的表单数据
-const exportJson = async json => {
-	processForm.value = JSON.stringify(json)
-}
+const handleListener = obj => {}
 
-/**
- * 1、拿到store中的值，然后循环判表单字段的Id是否唯一
- * 2、如果不唯一，提示用户需要重新填写表单字段Id
- */
-const validate = () => {
-	// 根据后续的业务需求 调整 validate 的功能
-	exportJsonEv()
-	return new Promise((resolve, reject) => {
-		const finallyFormData = JSON.parse(processForm.value)
-		const fields = finallyFormData.map(item => item.field)
-		const bool = fields.length === [...new Set(fields)].length
-		if (bool) {
-			resolve(true)
-		} else {
-			reject(false)
-		}
-	})
+// 保存当前的表单数据 processForm.value = '{formStructure: 表单结构值, formData: {}}
+const exportJsonEv = () => {
+	const formStructure = EReditorRef.value.getData()
+	const finallyForm = { formStructure, formData: {} }
+	processForm.value = JSON.stringify(finallyForm)
 }
-const updateCompInfo = () => {
-	if (processForm.value) {
-		designer.value.initForm(processForm.value || [])
+
+onBeforeUnmount(() => {
+	const formData = EReditorRef.value.getData()
+	if (formData.hasOwnProperty('fields')) {
+		// 离开前 做处理
+		// const { fields } = formData
+		// console.log(fields.length, '=======')
+	} else {
+		ElMessage.error(`表单设计有误，请重新配置`)
 	}
-}
+})
+
 // 初始化的时候，渲染当前组件的值
 onMounted(() => {
-	updateCompInfo()
+	if (processForm.value) {
+		const { formStructure } = JSON.parse(processForm.value)
+		EReditorRef.value.setData(formStructure)
+	}
 })
 
 defineExpose({
-	exportJsonEv,
-	validate,
-	updateCompInfo
+	exportJsonEv
 })
 </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/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>

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>