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

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

@@ -0,0 +1,157 @@
+<!--流程表单-->
+<template>
+    <div class='default-main'>
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label='表单名称'>
+                    <el-input
+                        v-model='tableStore.table.params.name'
+                        clearable
+                    />
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type='primary' class='ml10' :icon='Plus' @click='openForm'>新增</el-button>
+            </template>
+        </TableHeader>
+        <!--表格-->
+        <Table ref='tableRef'></Table>
+        <!-- 预览表单对话框 -->
+        <el-dialog :title='render.title' v-model='render.visible' width='60%' append-to-body>
+            <v-form-render :form-json='formJson' :form-data='formData' :option-data='optionData' ref='vfRenderRef' />
+        </el-dialog>
+    </div>
+</template>
+<script lang='ts' setup>
+import { Plus } from '@element-plus/icons-vue'
+import TableHeader from '@/components/table/header/index.vue'
+import Table from '@/components/table/index.vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { onMounted, provide, ref, reactive,nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { deleteWFForm, getFormById } from '@/api/process-boot/workflow/form'
+
+
+const { push } = useRouter()
+defineOptions({
+    name: 'category'
+})
+const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
+const formData = reactive({})
+const optionData = reactive({})
+const vfRenderRef = ref(null)
+const render = reactive({
+    visible: false,
+    title: ''
+})
+
+const tableStore = new TableStore({
+    url: '/bpm-boot/bpm/form/list',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', width: 80 },
+        { title: '表单名称', minWidth: '160', field: 'name' },
+        { title: '备注', minWidth: '140', field: 'remark' },
+        { title: '状态', minWidth: '140', field: 'status',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+            },
+            replaceValue: {
+                0: '关闭',
+                1: '开启',
+            }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            render: 'buttons',
+            minWidth: '230',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'view',
+                    title: '预览',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        //首先根据id查询出详细数据，然后渲染json
+                        getFormById(row.id).then(res => {
+                            render.visible = true;
+                            render.title = '查看表单详情';
+                            nextTick(async () => {
+                                vfRenderRef.value.setFormJson(res.data.content || {formConfig: {}, widgetList: []});
+                            });
+
+                        })
+                    }
+                },
+                {
+                    name: 'update',
+                    title: '设计',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        // push(`/admin/form/formDesigner?id=${row.id}`)
+                        openForm(row.id)
+                    }
+                },
+                {
+                    name: 'update',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        deleteWFForm(row.id).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
+        }
+
+    }
+})
+/** 添加/修改操作表单 */
+const openForm = (id?: string) => {
+    const toRouter: { name: string; query?: { id: string } } = {
+        name: 'BpmFormEditor'
+    }
+    // 表单新建的时候id传的是event需要排除
+    if (typeof id === 'string') {
+        toRouter.query = {
+            id
+        }
+    }
+    push(toRouter)
+}
+tableStore.table.params.orderBy = 'desc'
+tableStore.table.params.name = ''
+provide('tableStore', tableStore)
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+</script>
+<style scoped>
+
+</style>