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
                        maxlength="32"
                        show-word-limit
                        placeholder="请输入表单名称"
                    />
                </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 v-model="detailVisible" title="表单详情" width="800">
            <form-create :option="detailData.option" :rule="detailData.rule" />
        </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'
import { setConfAndFields2 } from '@/utils/formCreate'


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 detailVisible = ref(false)
const detailData = ref({
    rule: [],
    option: {}
})

const tableStore = new TableStore({
    url: '/bpm-boot/bpm/form/list',
    method: 'POST',
    column: [
    { title: '序号',  width: 80,formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      } },
        { 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: '排序', field: 'sort', width: 170 },
        {
             title: '操作',fixed: 'right',
            align: 'center',
            render: 'buttons',
            minWidth: '230',
        
            buttons: [
                {
                    name: 'view',
                    title: '预览',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        //首先根据id查询出详细数据，然后渲染json
                        getById(row.id).then(res => {
                            nextTick(async () => {
                                setConfAndFields2(detailData, res.data.conf, res.data.fields)
                                // 弹窗打开
                                detailVisible.value = true
                            });

                        })
                    }
                },
                {
                    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]
            }
        }

    },
    resetCallback: () => {
      tableStore.table.params.name = ''
    }
})
/** 添加/修改操作表单 */
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>