156 lines
4.4 KiB
Vue
156 lines
4.4 KiB
Vue
<!--用于表单设计器，提供给-->
|
||
<template>
|
||
<div id='form-designer' ref='formDesignerContent'>
|
||
<v-form-designer ref='vfDesignerRef' :resetFormJson='true' :designer-config='designerConfig'>
|
||
<!-- 自定义按钮插槽 -->
|
||
<template #customToolButtons>
|
||
<el-button link type='primary' :icon='Finished' @click='saveForm'>保存</el-button>
|
||
<el-button link type='primary' :icon='Back' @click='go(-1)'>返回</el-button>
|
||
</template>
|
||
</v-form-designer>
|
||
<el-dialog
|
||
draggable
|
||
class='cn-operate-dialog'
|
||
v-model='formVisible'
|
||
:title='title'
|
||
style='width: 415px; height: 250px'
|
||
top='40vh'
|
||
>
|
||
<el-scrollbar>
|
||
<el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
|
||
<el-form-item label='表单名' prop='name'>
|
||
<el-input v-model='form.name' placeholder='请输入表单名' clearable />
|
||
</el-form-item>
|
||
<el-form-item label='备注'>
|
||
<el-input v-model='form.remark' placeholder='请输入备注' clearable />
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-scrollbar>
|
||
<template #footer>
|
||
<span class='dialog-footer'>
|
||
<el-button @click='formVisible = false'>取消</el-button>
|
||
<el-button type='primary' @click='submit'>确认</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script setup lang='ts'>
|
||
import { Back, Finished } from '@element-plus/icons-vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { mainHeight } from '@/utils/layout'
|
||
import { onMounted, reactive, ref } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { getFormById, addWFForm, updateWFForm } from '@/api/process-boot/workflow/form'
|
||
|
||
defineOptions({
|
||
name: 'formDesginer'
|
||
})
|
||
const vfDesignerRef = ref()
|
||
const { go } = useRouter()
|
||
const { query } = useRoute()
|
||
const formVisible = ref(false)
|
||
const title = ref('新增表单')
|
||
// 表单对象，表单名称、表单备注、表单内容content
|
||
const form = reactive({
|
||
id: '',
|
||
name: '',
|
||
remark: '',
|
||
content: ''
|
||
})
|
||
|
||
//form表单校验规则
|
||
const rules = {
|
||
name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }]
|
||
}
|
||
|
||
|
||
const designerConfig = reactive({
|
||
// 链接信息是否显示
|
||
externalLink: false,
|
||
toolbarMaxWidth: 510,
|
||
// 语言选择下拉是否显示
|
||
languageMenu: false,
|
||
// 模版信息是否显示
|
||
//formTemplates: false,
|
||
// 事件信息是否显示
|
||
//eventCollapse: false,
|
||
// 清空按钮是否显示
|
||
//clearDesignerButton: false,
|
||
// 预览按钮是否显示
|
||
//previewFormButton: false,
|
||
exportCodeButton: true,
|
||
generateSFCButton: false
|
||
})
|
||
|
||
|
||
//初始化页面样式、并初始化页面数据
|
||
const formDesignerContent = ref()
|
||
const getFormInfo = async () => {
|
||
form.id = query.id
|
||
if (form.id.length > 0) {
|
||
//如果Id不为空，则查询该表单的数据，用于回显表单内容
|
||
await getFormById(form.id).then(res => {
|
||
vfDesignerRef.value.setFormJson(res.data.content)
|
||
form.name = res.data.name
|
||
form.remark = res.data.remark
|
||
})
|
||
}else{
|
||
vfDesignerRef.value.clearDesigner()
|
||
form.name = ''
|
||
form.remark = ''
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
formDesignerContent.value.style.maxHeight = mainHeight().height
|
||
formDesignerContent.value.style.overflowY = 'scroll'
|
||
getFormInfo()
|
||
})
|
||
|
||
const saveForm = () => {
|
||
if (!form.id) {
|
||
title.value = '新增表单'
|
||
} else {
|
||
title.value = '修改表单'
|
||
|
||
}
|
||
formVisible.value = true
|
||
}
|
||
|
||
const formRef = ref()
|
||
|
||
/**
|
||
* 提交表单数据
|
||
*/
|
||
const submit = () => {
|
||
const formJson = vfDesignerRef.value.getFormJson()
|
||
form.content = JSON.stringify(formJson)
|
||
formRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
if (form.id) {
|
||
await updateWFForm(form)
|
||
} else {
|
||
await addWFForm(form)
|
||
}
|
||
ElMessage.success('保存成功')
|
||
formVisible.value = false
|
||
go(-1)
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
</script>
|
||
<style scoped>
|
||
|
||
#form-designer {
|
||
padding: 10px;
|
||
overflow: scroll;
|
||
}
|
||
|
||
.layout-container .layout-main {
|
||
overflow: scroll !important;
|
||
}
|
||
|
||
</style> |