137 lines
4.8 KiB
Vue
137 lines
4.8 KiB
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='add'>新增</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: '/process-boot/workflow/wfForm/list',
|
|||
|
|
method: 'POST',
|
|||
|
|
column: [
|
|||
|
|
{ title: '序号', type: 'seq', width: 80 },
|
|||
|
|
{ title: '表单名称', minWidth: '160', field: 'name' },
|
|||
|
|
{ title: '备注', minWidth: '140', field: 'remark' },
|
|||
|
|
{
|
|||
|
|
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}`)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
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 add = () => {
|
|||
|
|
push(`/admin/form/formDesigner?id=`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tableStore.table.params.orderBy = 'desc'
|
|||
|
|
tableStore.table.params.name = ''
|
|||
|
|
provide('tableStore', tableStore)
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 加载数据
|
|||
|
|
tableStore.index()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
</style>
|