feat: 表单提交 【人员 角色】100%，标识字段类型+时间戳 100%

src/components/Flow/FlowStatusStamp.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="flow-stamp-container">
-		<img v-if="status == FlowStatusEnum.ACTIVE" :style="style" src="@/assets/images/flw01.svg" />
-		<img v-else-if="status == FlowStatusEnum.COMPLETE" :style="style" src="@/assets/images/flw03.svg" />
-		<img v-else-if="status == FlowStatusEnum.REJECT" :style="style" src="@/assets/images/flw04.svg" />
-		<img v-else-if="status == FlowStatusEnum.REVOKE" :style="style" src="@/assets/images/flw02.svg" />
-		<img v-else-if="status == FlowStatusEnum.TIMEOUT" :style="style" src="@/assets/images/flw05.svg" />
-		<img v-else-if="status == FlowStatusEnum.TERMINATE" :style="style" src="@/assets/images/flw06.svg" />
+		<LeIcon v-if="status == FlowStatusEnum.ACTIVE" :style="style" icon-class="icon-status-flw01" />
+		<LeIcon v-if="status == FlowStatusEnum.COMPLETE" :style="style" icon-class="icon-status-flw03" />
+		<LeIcon v-if="status == FlowStatusEnum.REJECT" :style="style" icon-class="icon-status-flw04" />
+		<LeIcon v-if="status == FlowStatusEnum.REVOKE" :style="style" icon-class="icon-status-flw02" />
+		<LeIcon v-if="status == FlowStatusEnum.TIMEOUT" :style="style" icon-class="icon-status-flw05" />
+		<LeIcon v-if="status == FlowStatusEnum.TERMINATE" :style="style" icon-class="icon-status-flw06" />
 	</div>
 </template>
 

src/components/packages/formEditor/components/CompleteButton.vue

@@ -3,53 +3,48 @@ import { ref, unref, inject } from 'vue'
 import _ from 'lodash-es'
 import hooks from '@ER/hooks'
 export default {
-  name: 'er-CompleteButton'
+	name: 'ErCompleteButton'
 }
 </script>
 <script setup>
 const ER = inject('Everright')
 const props = defineProps({
-  handle: {
-    type: Object
-  },
-  mode: {
-    type: String,
-    default: 'edit'
-  }
+	handle: {
+		type: Object
+	},
+	mode: {
+		type: String,
+		default: 'edit'
+	}
 })
 const ns = hooks.useNamespace('CompleteButton')
-const {
-  state,
-  isPc
-} = hooks.useTarget()
+const { state, isPc } = hooks.useTarget()
 const element = ref('')
-const handleClick = async (type) => {
-  if (props.mode === 'preview') return false
-  try {
-    await Promise.resolve(unref(props.handle).validate())
-    // await ER.checkFieldsValidation()
-    ER.fireEvent('submit', ER.getData())
-  } catch (e) {
-    console.log(e)
-  }
+const handleClick = async type => {
+	if (props.mode === 'preview') return false
+	try {
+		await Promise.resolve(unref(props.handle).validate())
+		// await ER.checkFieldsValidation()
+		ER.fireEvent('submit', ER.getData())
+	} catch (e) {
+		console.log(e)
+	}
 }
 const dataset = process.env.NODE_ENV === 'test' ? { 'data-test': 'er-complete-button' } : {}
 </script>
 <template>
-  <div v-bind="dataset">
-    <div v-if="isPc" style="text-align: center;">
-      <el-button @click="handleClick" :color="state.config[state.platform].completeButton.backgroundColor" type="primary">
-        <span :style="{color: state.config[state.platform].completeButton.color }">{{ state.config[state.platform].completeButton.text }}</span>
-      </el-button>
-    </div>
-    <div v-else>
-      <van-button @click="handleClick" round block type="primary" :color="state.config[state.platform].completeButton.backgroundColor">
-        <span :style="{color: state.config[state.platform].completeButton.color }">{{ state.config[state.platform].completeButton.text }}</span>
-      </van-button>
-    </div>
-  </div>
+	<div v-bind="dataset">
+		<div v-if="isPc" style="text-align: center">
+			<el-button :color="state.config[state.platform].completeButton.backgroundColor" type="primary" @click="handleClick">
+				<span :style="{ color: state.config[state.platform].completeButton.color }">{{ state.config[state.platform].completeButton.text }}</span>
+			</el-button>
+		</div>
+		<div v-else>
+			<van-button round block type="primary" :color="state.config[state.platform].completeButton.backgroundColor" @click="handleClick">
+				<span :style="{ color: state.config[state.platform].completeButton.color }">{{ state.config[state.platform].completeButton.text }}</span>
+			</van-button>
+		</div>
+	</div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/packages/formEditor/components/Panels/Canves/index.jsx

@@ -5,61 +5,69 @@ import CompleteButton from '@ER/formEditor/components/CompleteButton.vue'
 import hooks from '@ER/hooks'
 import _ from 'lodash-es'
 export default defineComponent({
-  name: 'Canves',
-  inheritAttrs: false,
-  customOptions: {},
-  setup () {
-    const ER = inject('Everright')
-    const ns = hooks.useNamespace('Canves')
-    const {
-      state,
-      setSelection,
-      isEditModel,
-      isPc
-    } = hooks.useTarget()
-    const form = ref('')
-    const handleClick = (e) => {
-      setSelection('root')
-    }
-    const renderContent = () => {
-      const TagComponent = resolveComponent(unref(isPc) ? 'el-form' : 'van-form')
-      const typeProps = hooks.useProps(state, state, unref(isPc), true)
-      const Layout = (<LayoutDragGable data-layout-type={'root'} class={[unref(isEditModel) && ns.e('wrap')]} data={state.store} parent={state.store} isRoot></LayoutDragGable>)
-      return (
-        <div>
-          <TagComponent ref={form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
-            {
-              unref(isEditModel) ? Layout : Layout
-            }
-          </TagComponent>
-          {!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={form}/>}
-        </div>
-      )
-    }
-    return () => {
-      return (
-        <ElMain
-          class={
-            [
-              ns.b(),
-              isEditModel.value && ns.e('editModel'),
-              !unref(isPc) && ns.e('mobile'),
-              !unref(isPc) && ns.e(`mobile_layoutType${ER.props.layoutType}`)
-              // ER.props.layoutType === 1  && ns.e('layoutType1')
-            ]}>
-          {unref(isEditModel)
-            ? (
-            <div class={[ns.e('container')]}>
-              <el-scrollbar ref={ER.canvesScrollRef}>
-                <div class={[ns.e('subject')]}>
-                  {renderContent()}
-                </div>
-              </el-scrollbar>
-            </div>
-              )
-            : renderContent()}
-        </ElMain>
-      )
-    }
-  }
+	name: 'Canves',
+	inheritAttrs: false,
+	customOptions: {},
+	setup(props, { expose }) {
+		const ER = inject('Everright')
+		const ns = hooks.useNamespace('Canves')
+		const { state, setSelection, isEditModel, isPc } = hooks.useTarget()
+		const form = ref('')
+		const handleClick = e => {
+			setSelection('root')
+		}
+
+		// 拿到子组件的表单实例
+		const getFormValidateRef = () => {
+			return form.value
+		}
+
+		expose({
+			getFormValidateRef
+		})
+		const renderContent = () => {
+			const TagComponent = resolveComponent(unref(isPc) ? 'el-form' : 'van-form')
+			const typeProps = hooks.useProps(state, state, unref(isPc), true)
+			const Layout = (
+				<LayoutDragGable
+					data-layout-type={'root'}
+					class={[unref(isEditModel) && ns.e('wrap')]}
+					data={state.store}
+					parent={state.store}
+					isRoot
+				></LayoutDragGable>
+			)
+			return (
+				<div>
+					<TagComponent ref={form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
+						{unref(isEditModel) ? Layout : Layout}
+					</TagComponent>
+					{!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={form} />}
+				</div>
+			)
+		}
+		return () => {
+			return (
+				<ElMain
+					class={[
+						ns.b(),
+						isEditModel.value && ns.e('editModel'),
+						!unref(isPc) && ns.e('mobile'),
+						!unref(isPc) && ns.e(`mobile_layoutType${ER.props.layoutType}`)
+						// ER.props.layoutType === 1  && ns.e('layoutType1')
+					]}
+				>
+					{unref(isEditModel) ? (
+						<div class={[ns.e('container')]}>
+							<el-scrollbar ref={ER.canvesScrollRef}>
+								<div class={[ns.e('subject')]}>{renderContent()}</div>
+							</el-scrollbar>
+						</div>
+					) : (
+						renderContent()
+					)}
+				</ElMain>
+			)
+		}
+	}
 })

src/components/packages/formEditor/preview.vue

@@ -32,6 +32,7 @@ const state = reactive({
 	fieldsLogicState: new Map(),
 	remoteValues: new Map()
 })
+const CanvesPanelRef = ref()
 const ns = hooks.useNamespace('Main', state.Namespace)
 hooks.useLogic(state)
 const getData = () => {
@@ -122,14 +123,21 @@ const setData1 = async (data, value) => {
 	}
 }
 const setData = props.layoutType === 1 ? setData1 : setData2
+
+// 获取整个表单的校验方式
+const getSelfFormRef = () => {
+	return CanvesPanelRef.value.getFormValidateRef()
+}
+
 defineExpose({
 	switchPlatform(platform) {
 		state.platform = platform
 	},
 	setData,
-	getData
+	getData,
+	getSelfFormRef
 })
 </script>
 <template>
-	<CanvesPanel v-if="state.store.length"></CanvesPanel>
+	<CanvesPanel v-if="state.store.length" ref="CanvesPanelRef"></CanvesPanel>
 </template>

src/views/approve/components/approvedContent.vue

@@ -274,7 +274,7 @@ const openComment = async (visibleType, item) => {
 			// 点击同意
 			let bool = true
 			if (item === 'agree') {
-				const form = EReditorRef.value.form
+				const form = EReditorRef.value.getSelfFormRef()
 				bool = await form.validate(valid => {
 					if (valid) {
 						// 表单验证通过 进行保存

src/views/approve/launch/ItemDrawer.vue

@@ -11,7 +11,8 @@
 		<div class="info-wrap">
 			<el-divider content-position="left">{{ record.processName }}表单</el-divider>
 			<div class="self-Everright-formEditor">
-				<er-form-preview ref="EReditorRef" :is-show-complete-button="false" :fileUploadURI="uploadFileApi" />
+				<!-- :is-show-complete-button="false" -->
+				<er-form-preview ref="EReditorRef" :is-show-complete-button="false" :file-upload-u-r-i="uploadFileApi" />
 			</div>
 			<el-divider content-position="left">审批流程</el-divider>
 			<el-timeline class="timeline-wrap">
@@ -68,12 +69,13 @@
 </template>
 <script setup lang="ts">
 import model from '@/api/flow/process'
-import { erFormPreview, utils } from '@ER/formEditor'
-import { ref, shallowRef, computed, reactive, watchEffect } from 'vue'
+import { erFormPreview } from '@ER/formEditor'
+// import { erFormPreview } from 'everright-formeditor'
+import { ref, computed, reactive, inject } from 'vue'
 import { ElMessage } from 'element-plus'
 import UseSelect from '@/components/scWorkflow/select.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
-import { approveTypeOptions_config, selectModeOptions_config, setTypeOptions_config } from '@/components/scWorkflow/nodes/config'
+import { setTypeOptions_config } from '@/components/scWorkflow/nodes/config'
 const { VITE_APP_BASE_API } = import.meta.env
 const uploadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/upload`)
 const EReditorRef = ref()
@@ -130,8 +132,7 @@ const validateForm = ref({
 
 const onSubmit = async () => {
 	const processId = props.record.processId
-	console.log(utils, 'utils')
-	const form = EReditorRef.value.form
+	const form = EReditorRef.value.getSelfFormRef()
 	form.validate(valid => {
 		if (valid) {
 			// 表单验证通过 进行保存
@@ -139,7 +140,6 @@ const onSubmit = async () => {
 			const formData = EReditorRef.value.getData()
 			let processForm = JSON.parse(cur_processForm_str)
 			processForm = { ...processForm, formData }
-			console.log(processForm, '===========')
 			const _assigneeMap = assigneeMap.value
 			const assigneeMap_ = Object.keys(_assigneeMap).reduce((obj, key) => {
 				const _o = _assigneeMap[key]

vite.config.ts

@@ -81,14 +81,14 @@ export default defineConfig(({ mode /*command,*/ }: ConfigEnv): UserConfig => {
 					data: { title: viteEnv.VITE_APP_TITLE }
 				}
 			}),
-			svgLoader(),
 			// 使用 svg 图标
 			createSvgIconsPlugin({
 				// 指定需要缓存的图标文件夹
 				iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
 				// 指定symbolId格式
 				symbolId: 'icon-[dir]-[name]'
-			})
+			}),
+			svgLoader()
 		]
 	}
 })