流程待处理、已处理、以及流程详情页操作回显

src/views/system/bpm/form/editor/index.vue

@@ -1,49 +1,49 @@
 <template>
-    <div>
-        <content-wrap>
-            <!-- 表单设计器 -->
-            <FcDesigner ref='designer' height='780px'>
-                <template #handle>
-                    <el-button round size='small' type='primary' @click='handleSave' class='ml10' :icon='Plus'>保存
-                    </el-button>
-                    <el-button round size='small' type='primary' @click='go(-1)' class='ml10' :icon='Back'>取消
-                    </el-button>
-                </template>
-            </FcDesigner>
-        </content-wrap>
+  <div class='default-main'>
+    <content-wrap>
+      <!-- 表单设计器 -->
+      <FcDesigner ref='designer' height='780px'>
+        <template #handle>
+          <el-button round size='small' type='primary' @click='handleSave' class='ml10' :icon='Plus'>保存
+          </el-button>
+          <el-button round size='small' @click='go(-1)' class='ml10' :icon='Back'>取消
+          </el-button>
+        </template>
+      </FcDesigner>
+    </content-wrap>
 
-        <!-- 表单保存的弹窗 -->
-        <el-dialog v-model='dialogVisible' title='保存表单' class='cn-operate-dialog' style='width: 415px;height: 350px'
-                   top='30vh'>
-            <el-scrollbar>
-                <el-form ref='formRef' :model='formData' :rules='formRules' label-width='80px'>
-                    <el-form-item label='表单名' prop='name'>
-                        <el-input v-model='formData.name' placeholder='请输入表单名' />
-                    </el-form-item>
-                    <el-form-item label='状态' prop='status'>
-                        <el-radio-group v-model='formData.status'>
-                            <el-radio
-                                v-for='dict in options'
-                                :key='dict.value'
-                                :label='dict.value'
-                            >
-                                {{ dict.name }}
-                            </el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label='备注' prop='remark'>
-                        <el-input v-model='formData.remark' placeholder='请输入备注' type='textarea' />
-                    </el-form-item>
-                </el-form>
-            </el-scrollbar>
-            <template #footer>
+    <!-- 表单保存的弹窗 -->
+    <el-dialog v-model='dialogVisible' title='保存表单' class='cn-operate-dialog' style='width: 415px;height: 350px'
+               top='30vh'>
+      <el-scrollbar>
+        <el-form ref='formRef' :model='formData' :rules='formRules' label-width='80px'>
+          <el-form-item label='表单名' prop='name'>
+            <el-input v-model='formData.name' placeholder='请输入表单名' />
+          </el-form-item>
+          <el-form-item label='状态' prop='status'>
+            <el-radio-group v-model='formData.status'>
+              <el-radio
+                  v-for='dict in options'
+                  :key='dict.value'
+                  :label='dict.value'
+              >
+                {{ dict.name }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label='备注' prop='remark'>
+            <el-input v-model='formData.remark' placeholder='请输入备注' type='textarea' />
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <template #footer>
                 <span class='dialog-footer'>
                     <el-button :disabled='formLoading' type='primary' @click='submitForm'>确 定</el-button>
                     <el-button @click='dialogVisible = false'>取 消</el-button>
                 </span>
-            </template>
-        </el-dialog>
-    </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 <script lang='ts' setup>
 import { onMounted, ref, reactive } from 'vue'
@@ -57,14 +57,14 @@ import { Plus, Back } from '@element-plus/icons-vue'
 import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
 
 const options = ref([
-    {
-        value: 1,
-        name: '开启'
-    },
-    {
-        value: 0,
-        name: '关闭'
-    }
+  {
+    value: 1,
+    name: '开启'
+  },
+  {
+    value: 0,
+    name: '关闭'
+  }
 ])
 
 defineOptions({ name: 'BpmFormEditor' })
@@ -81,74 +81,74 @@ useFormCreateDesigner(designer) // 表单设计器增强
 const dialogVisible = ref(false) // 弹窗是否展示
 const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
 const formData = ref({
-    name: '',
-    status: 1,
-    remark: ''
+  name: '',
+  status: 1,
+  remark: ''
 })
 const formRules = reactive({
-    name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
-    status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
+  name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
 /** 处理保存按钮 */
 const handleSave = () => {
-    dialogVisible.value = true
+  dialogVisible.value = true
 }
 
 type FormVO = {
-    id: number
-    name: string
-    conf: string
-    fields: string[]
-    status: number
-    remark: string
-    createTime: string
+  id: number
+  name: string
+  conf: string
+  fields: string[]
+  status: number
+  remark: string
+  createTime: string
 }
 
 /** 提交表单 */
 const submitForm = async () => {
-    // 校验表单
-    if (!formRef) return
-    const valid = await formRef.value.validate()
-    if (!valid) return
-    // 提交请求
-    formLoading.value = true
-    try {
-        const data = formData.value as FormVO
-        data.conf = encodeConf(designer) // 表单配置
-        data.fields = encodeFields(designer) // 表单字段
-        if (!data.id) {
-            await addForm(data)
-            ElMessage.success('保存成功')
-        } else {
-            await updateForm(data)
-            ElMessage.success('更新成功')
-        }
-        dialogVisible.value = false
-        close()
-    } finally {
-        formLoading.value = false
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as FormVO
+    data.conf = encodeConf(designer) // 表单配置
+    data.fields = encodeFields(designer) // 表单字段
+    if (!data.id) {
+      await addForm(data)
+      ElMessage.success('保存成功')
+    } else {
+      await updateForm(data)
+      ElMessage.success('更新成功')
     }
+    dialogVisible.value = false
+    close()
+  } finally {
+    formLoading.value = false
+  }
 }
 /** 关闭按钮 */
 const close = () => {
-    delView(unref(currentRoute))
-    go(-1)
+  delView(unref(currentRoute))
+  go(-1)
 }
 
 /** 初始化 **/
 onMounted(async () => {
-    // 场景一：新增表单
-    const id = query.id as unknown as string
-    if (!id) {
-        return
-    }
-    // 场景二：修改表单
-    await getById(id).then(res => {
-        formData.value = res.data
-        setConfAndFields(designer, res.data.conf, res.data.fields)
-    })
+  // 场景一：新增表单
+  const id = query.id as unknown as string
+  if (!id) {
+    return
+  }
+  // 场景二：修改表单
+  await getById(id).then(res => {
+    formData.value = res.data
+    setConfAndFields(designer, res.data.conf, res.data.fields)
+  })
 
 })
 </script>