admin-sjzx/src/views/system/bpm/form/index.vue

<!--流程表单-->
<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 { deleteForm, getById } from '@/api/bpm-boot/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()
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
                //         getById(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 => {
                        deleteForm(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>