Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

微调

Browse Source
This commit is contained in:
hongawen
2024-05-15 13:51:55 +08:00
parent 5095592df4
commit 53630dbd8e
1 changed files with 141 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
src/views/system/bpm/model/modelPopup.vue
View File

@@ -1,92 +1,92 @@
<template> <template>
<el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title' <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title'
style='max-width: 450px;height: 450px'> style='max-width: 450px;height: 450px'>
<el-scrollbar> <el-scrollbar>
<el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'> <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
<el-form-item label='表单类型' prop='formType' > <el-form-item label='表单类型' prop='formType'>
<el-radio-group v-model='formData.formType' :disabled='!!formData.id'> <el-radio-group v-model='formData.formType' :disabled='!!formData.id'>
<el-radio border label='20'>业务表单</el-radio> <el-radio border :label='20'>业务表单</el-radio>
<el-radio border label='10'>流程表单</el-radio> <el-radio border :label='10'>流程表单</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label='流程名称' prop='name'> <el-form-item label='流程名称' prop='name'>
<el-input <el-input
v-model='formData.name' v-model='formData.name'
:disabled='!!formData.id' :disabled='!!formData.id'
clearable clearable
placeholder='请输入流程名称' placeholder='请输入流程名称'
/> />
</el-form-item> </el-form-item>
<el-form-item label='流程分类' prop='category'> <el-form-item label='流程分类' prop='category'>
<el-select <el-select
v-model='formData.category' v-model='formData.category'
clearable clearable
placeholder='请选择流程分类' placeholder='请选择流程分类'
style='width: 100%' style='width: 100%'
> >
<el-option <el-option
v-for='category in categoryList' v-for='category in categoryList'
:key='category.id' :key='category.id'
:label='category.name' :label='category.name'
:value='category.id' :value='category.id'
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item v-if='formData.id' label='流程图标' prop='icon'>--> <!-- <el-form-item v-if='formData.id' label='流程图标' prop='icon'>-->
<!-- <UploadImg v-model='formData.icon' :limit='1' height='128px' width='128px' />--> <!-- <UploadImg v-model='formData.icon' :limit='1' height='128px' width='128px' />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label='流程标识' prop='key' v-if='formData.formType == 20'> <el-form-item label='流程标识' prop='key' v-if='formData.formType == 20'>
<el-select v-model='formData.key' clearable style='width: 100%' @change='changeSign'> <el-select v-model='formData.key' clearable style='width: 100%' @change='changeSign'>
<el-option <el-option
v-for='item in flowInfo' v-for='item in flowInfo'
:key='item.id' :key='item.id'
:label='item.name' :label='item.name'
:value='item.signKey' :value='item.signKey'
placeholder='请选择流程标识' placeholder='请选择流程标识'
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label='流程标识' prop='key' v-else> <el-form-item label='流程标识' prop='key' v-else>
<el-input v-model='formData.key' /> <el-input v-model='formData.key' />
</el-form-item> </el-form-item>
<el-form-item label='流程表单' prop='formId' v-if='formData.formType == 10'> <el-form-item label='流程表单' prop='formId' v-if='formData.formType == 10'>
<el-select v-model='formData.formId' clearable style='width: 100%'> <el-select v-model='formData.formId' clearable style='width: 100%'>
<el-option <el-option
v-for='form in formList' v-for='form in formList'
:key='form.id' :key='form.id'
:label='form.name' :label='form.name'
:value='form.id' :value='form.id'
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label='表单提交路由' prop='description'>--> <!-- <el-form-item label='表单提交路由' prop='description'>-->
<!-- <el-input v-model='formData.description' clearable type='textarea' />--> <!-- <el-input v-model='formData.description' clearable type='textarea' />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item v-else label='表单查看路由' prop='formCustomViewPath'> <el-form-item v-else label='表单查看路由' prop='formCustomViewPath'>
<el-input v-model='formData.formCustomViewPath' disabled /> <el-input v-model='formData.formCustomViewPath' disabled />
</el-form-item> </el-form-item>
<el-form-item label='流程描述' prop='description'> <el-form-item label='流程描述' prop='description'>
<el-input v-model='formData.description' clearable type='textarea' /> <el-input v-model='formData.description' clearable type='textarea' />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
<template #footer> <template #footer>
<span class='dialog-footer'> <span class='dialog-footer'>
<el-button @click='dialogVisible = false'>取消</el-button> <el-button @click='dialogVisible = false'>取消</el-button>
<el-button type='primary' @click='submit'>确认</el-button> <el-button type='primary' @click='submit'>确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { ref, inject, reactive, nextTick } from 'vue' import { ref, inject, reactive, nextTick } from 'vue'
@@ -109,60 +109,60 @@ const formRef = ref()
const dialogVisible = ref(false) const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突 // 注意不要和表单ref的命名冲突
const formData = reactive({ const formData = reactive({
id: '', id: '',
key: '', key: '',
name: '', name: '',
category: '', category: '',
icon: '', icon: '',
description: '', description: '',
formType: 20, formType: 20,
formCustomCreatePath: '', formCustomCreatePath: '',
formCustomViewPath: '', formCustomViewPath: '',
formId: '' formId: ''
}) })
//form表单校验规则 //form表单校验规则
const rules = { const rules = {
key: [{ required: true, message: '流程标识不能为空', trigger: 'change' }], key: [{ required: true, message: '流程标识不能为空', trigger: 'change' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }], name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
category: [{ required: true, message: '流程分类不能为空', trigger: 'change' }], category: [{ required: true, message: '流程分类不能为空', trigger: 'change' }],
formType: [{ required: true, message: '表单类型不能为空', trigger: 'change' }] formType: [{ required: true, message: '表单类型不能为空', trigger: 'change' }]
} }
const resetForm = () => { const resetForm = () => {
if (formRef.value) { if (formRef.value) {
formRef.value.resetFields() formRef.value.resetFields()
} }
} }
const open = async (text: string, data?: any) => { const open = async (text: string, data?: any) => {
title.value = text title.value = text
await getFormSimpleList().then(res => { await getFormSimpleList().then(res => {
formList.value = res.data formList.value = res.data
}) })
await getCategorySimpleList().then(res => { await getCategorySimpleList().then(res => {
categoryList.value = res.data categoryList.value = res.data
}) })
await getSignSimpleList().then(res => { await getSignSimpleList().then(res => {
flowInfo.value = res.data flowInfo.value = res.data
}) })
//默认选中第一个tab //默认选中第一个tab
if (data) { if (data) {
// 表单赋值 // 表单赋值
for (let key in formData) { for (let key in formData) {
formData[key] = data[key] formData[key] = data[key]
}
} else {
resetForm()
// 在此处恢复默认表单
for (let key in formData) {
formData[key] = ''
}
//随机一个key给该模型
formData.formType = 20
} }
} else { dialogVisible.value = true
resetForm()
// 在此处恢复默认表单
for (let key in formData) {
formData[key] = ''
}
//随机一个key给该模型
formData.formType = 20
}
dialogVisible.value = true
} }
@@ -170,44 +170,44 @@ const open = async (text: string, data?: any) => {
* 提交用户表单数据 * 提交用户表单数据
*/ */
const submit = () => { const submit = () => {
formRef.value.validate(async (valid: any) => { formRef.value.validate(async (valid: any) => {
if (valid) { if (valid) {
if (formData.id) { if (formData.id) {
await updateModel(formData) await updateModel(formData)
ElMessage.success('更新成功') ElMessage.success('更新成功')
tableStore.index() tableStore.index()
dialogVisible.value = false dialogVisible.value = false
} else { } else {
await addModel(formData).then(res => { await addModel(formData).then(res => {
formData.id = res.data formData.id = res.data
//查询进线数据，避免一直处于loading状态 //查询进线数据，避免一直处于loading状态
ElMessage.success('保存成功') ElMessage.success('保存成功')
tableStore.index() tableStore.index()
dialogVisible.value = false dialogVisible.value = false
}) })
} }
} }
}) })
} }
defineExpose({ open }) defineExpose({ open })
const changeSign = (event:any) => { const changeSign = (event: any) => {
//根据选择的流程标识回显查看路径 //根据选择的流程标识回显查看路径
const path = flowInfo.value.filter(item => item.signKey == event)[0].viewPath const path = flowInfo.value.filter(item => item.signKey == event)[0].viewPath
formData.formCustomCreatePath = path formData.formCustomCreatePath = path
formData.formCustomViewPath = path formData.formCustomViewPath = path
} }
</script> </script>
<style scoped> <style scoped>
.el-upload-list__item { .el-upload-list__item {
transition: none !important; transition: none !important;
} }
.el-select { .el-select {
min-width: 180px; min-width: 180px;
} }
</style> </style>