工作流表单+模型代码提交
This commit is contained in:
154
src/views/system/bpm/form/editor/index.vue
Normal file
154
src/views/system/bpm/form/editor/index.vue
Normal file
@@ -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>
|
||||
157
src/views/system/bpm/form/index.vue
Normal file
157
src/views/system/bpm/form/index.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user