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