form回显

src/utils/formCreate.ts

@@ -4,54 +4,55 @@
 
 // 编码表单 Conf
 export const encodeConf = (designerRef: object) => {
-  // @ts-ignore
+    // @ts-ignore
-  return JSON.stringify(designerRef.value.getOption())
+    return JSON.stringify(designerRef.value.getOption())
 }
 
 // 编码表单 Fields
 export const encodeFields = (designerRef: object) => {
-  // @ts-ignore
+    // @ts-ignore
-  const rule = designerRef.value.getRule()
+    const rule = designerRef.value.getRule()
-  const fields: string[] = []
+    const fields: string[] = []
-  rule.forEach((item) => {
+    rule.forEach(item => {
-    fields.push(JSON.stringify(item))
+        fields.push(JSON.stringify(item))
-  })
+    })
-  return fields
+    return fields
 }
 
 // 解码表单 Fields
 export const decodeFields = (fields: string[]) => {
-  const rule: object[] = []
+    const rule: object[] = []
-  fields.forEach((item) => {
+    fields.forEach(item => {
-    rule.push(JSON.parse(item))
+        rule.push(JSON.parse(item))
-  })
+    })
-  return rule
+    return rule
 }
 
 // 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
 export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
-  // @ts-ignore
+    // @ts-ignore
-  designerRef.value.setOption(JSON.parse(conf))
+    designerRef.value.setOption(JSON.parse(conf))
-  // @ts-ignore
+    // @ts-ignore
-  designerRef.value.setRule(decodeFields(fields))
+    designerRef.value.setRule(decodeFields(fields))
 }
 
 // 设置表单的 Conf 和 Fields，适用 form-create 场景
-export const setConfAndFields2 = (
+export const setConfAndFields2 = (detailPreview: object, conf: string, fields: string[], value?: object) => {
-  detailPreview: object,
+    if (isRef(detailPreview)) {
-  conf: string,
+        detailPreview = detailPreview.value
-  fields: string[],
+    }
-  value?: object
-) => {
-  if (isRef(detailPreview)) {
-    detailPreview = detailPreview.value
-  }
-  // @ts-ignore
-  detailPreview.option = JSON.parse(conf)
-  // @ts-ignore
-  detailPreview.rule = decodeFields(fields)
-  if (value) {
     // @ts-ignore
-    detailPreview.value = value
+    detailPreview.option = JSON.parse(conf)
-  }
+    // @ts-ignore
+    detailPreview.rule = decodeFields(fields)
+    if (value) {
+        // @ts-ignore
+        detailPreview.value = value
+    }
+}
+
+// 清除表单的 Conf 和 Fields，适用 form-create 场景
+export const resetConfAndFields = (detailPreview: object) => {
+    // @ts-ignore
+    detailPreview.value = {}
 }

src/views/system/bpm/processInstance/detail/ProcessInstanceTaskList.vue

@@ -89,7 +89,7 @@
     <!-- 弹窗：子任务  -->
     <TaskSignList ref='taskSignListRef' @success='refresh' />
     <!-- 弹窗：表单 -->
-    <el-dialog title='表单详情' v-model='taskFormVisible' width='750'>
+    <el-dialog title='表单详情' v-model='taskFormVisible' width='750' @closed="closeForm">
         <form-create ref='fApi' v-model='taskForm.value' :option='taskForm.option' :rule='taskForm.rule' />
     </el-dialog>
 </template>
@@ -100,7 +100,7 @@ import { propTypes } from '@/utils/propTypes'
 import { isEmpty } from '@/utils/is'
 import TaskSignList from './dialog/TaskSignList.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import { setConfAndFields2 } from '@/utils/formCreate'
+import { setConfAndFields2 ,resetConfAndFields} from '@/utils/formCreate'
 
 defineOptions({ name: 'BpmProcessInstanceTaskList' })
 
@@ -204,7 +204,7 @@ const taskForm = ref({
     value: {}
 }) // 流程任务的表单详情
 const taskFormVisible = ref(false)
-const handleFormDetail = async row => {
+const handleFormDetail = async (row:any) => {
     // 设置表单
     setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
     // 弹窗打开
@@ -215,6 +215,10 @@ const handleFormDetail = async row => {
     fApi.value?.fapi?.resetBtn.show(false)
     fApi.value?.fapi?.disabled(true)
 }
+//关闭表单
+const closeForm=()=>{
+  resetConfAndFields(taskForm)
+}
 
 /** 刷新数据 */
 const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调