工作流表单+模型代码提交

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

@@ -0,0 +1,154 @@
+<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>
+
+        <!-- 表单保存的弹窗 -->
+        <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>
+<script lang='ts' setup>
+import { onMounted, ref, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import FcDesigner from '@form-create/designer'
+import { useI18n } from '@/hooks/web/useI18n'
+import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
+import { useTagsViewStore } from '@/stores/modules/tagsView'
+import { useFormCreateDesigner } from '@/components/FormCreate'
+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: '关闭'
+    }
+])
+
+defineOptions({ name: 'BpmFormEditor' })
+
+import { ElMessage } from 'element-plus'
+import { addForm, getById, updateForm } from '@/api/bpm-boot/form'
+
+const { push, currentRoute, go } = useRouter() // 路由
+const { query } = useRoute() // 路由信息
+const { delView } = useTagsViewStore() // 视图操作
+
+const designer = ref() // 表单设计器
+useFormCreateDesigner(designer) // 表单设计器增强
+const dialogVisible = ref(false) // 弹窗是否展示
+const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
+const formData = ref({
+    name: '',
+    status: 1,
+    remark: ''
+})
+const formRules = reactive({
+    name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
+    status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 处理保存按钮 */
+const handleSave = () => {
+    dialogVisible.value = true
+}
+
+type FormVO = {
+    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
+    }
+}
+/** 关闭按钮 */
+const close = () => {
+    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)
+    })
+
+})
+</script>