流程分类的增删改查

This commit is contained in:
2024-05-13 18:36:19 +08:00
parent 3784bd1efe
commit df20141670
12 changed files with 758 additions and 401 deletions

View File

@@ -0,0 +1,112 @@
<!--模型分类的新增编辑弹出框-->
<template>
<el-dialog
draggable
class='cn-operate-dialog'
v-model='machineVisible'
:title='title'
style='width: 415px; height: 350px'
top='30vh'
>
<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='分类标识' prop='code'>
<el-input v-model='form.code' placeholder='请输入分类标识' clearable />
</el-form-item>
<el-form-item label='分类描述' prop='description'>
<el-input v-model='form.description' placeholder='请输入分类描述' clearable type='textarea'>
</el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class='dialog-footer'>
<el-button @click='machineVisible = false'>取消</el-button>
<el-button type='primary' @click='submit'>确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import { ref, reactive, inject } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore'
import { addCategory, updateCategory } from '@/api/bpm-boot/category'
const tableStore = inject('tableStore') as TableStore
const machineVisible = ref(false)
const title = ref('')
const formRef = ref()
const regex = /^[+]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?$/
// 注意不要和表单ref的命名冲突
const form = reactive({
id: '',
name: '',
code: '',
description: ''
})
//form表单校验规则
const rules = {
name: [{ required: true, message: '分类名不能为空', trigger: 'blur' }],
code: [{ required: true, message: '分类标识不能为空', trigger: 'blur' }]
}
const open = (text: string, data?: any) => {
title.value = text
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
} else {
resetForm()
// 在此处恢复默认表单
for (let key in form) {
form[key] = ''
}
}
machineVisible.value = true
}
//重置表单内容
const resetForm = () => {
if (formRef.value) {
formRef.value.resetFields()
}
}
/**
* 提交用户表单数据
*/
const submit = () => {
formRef.value.validate(async (valid: any) => {
if (valid) {
if (form.id) {
await updateCategory(form)
} else {
await addCategory(form)
}
ElMessage.success('保存成功')
tableStore.index()
machineVisible.value = false
}
})
}
defineExpose({ open })
</script>
<style scoped>
.el-upload-list__item {
transition: none !important;
}
.el-select {
min-width: 180px;
}
</style>

View File

@@ -0,0 +1,113 @@
<!--流程分类页面-->
<template>
<div class='default-main'>
<TableHeader>
<template v-slot:select>
<el-form-item label='流程分类'>
<el-input
v-model='tableStore.table.params.searchValue'
clearable
placeholder='请输入分类名称'
/>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type='primary' class='ml10' @click='add' :icon='Plus'>新增</el-button>
</template>
</TableHeader>
<!--表格-->
<Table ref='tableRef'></Table>
<!--弹出框-->
<category-popup ref='categoryPopup' />
</div>
</template>
<script setup lang='ts'>
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { useRouter } from 'vue-router'
import { deleteSgMachine } from '@/api/advance-boot/sgGroven/sgMachine'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import CategoryPopup from '@/views/system/bpm/category/categoryPopup.vue'
import { deleteCategory } from '@/api/bpm-boot/category'
defineOptions({
name: 'bpmCategory'
})
const { push } = useRouter()
const categoryPopup = ref()
const tableStore = new TableStore({
url: '/bpm-boot/bpm/category/list',
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 80 },
{ title: '分类名称', field: 'name', minWidth: 130 },
{ title: '分类标识', field: 'code', minWidth: 130 },
{ title: '分类描述', field: 'description', minWidth: 170 },
{ title: '创建时间', field: 'createTime', minWidth: 170 },
{
title: '操作',
align: 'center',
minWidth: '150',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'update',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
categoryPopup.value.open('修改流程分类', row)
}
},
{
name: 'update',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗?'
},
click: row => {
deleteCategory(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]
}
}
}
})
onMounted(() => {
// 加载数据
tableStore.index()
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
const add = () => {
categoryPopup.value.open('新增流程分类')
}
</script>

View File

@@ -1,69 +1,85 @@
<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-form-item label='流程标识' prop='key'>
<el-input
v-model='formData.key'
disabled
/>
</el-form-item>
<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='name'>
<el-input
v-model='formData.name'
:disabled='!!formData.id'
clearable
placeholder='请输入流程名称'
/>
</el-form-item>
<el-form-item label='表单类型' prop='formType'>
<el-radio-group v-model='formData.formType'>
<el-radio border label='10'>流程表单</el-radio>
<el-radio border label='20'>业务表单</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='流程标识' prop='key'>
<el-input
v-model='formData.key'
: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 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 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='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-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' />
</el-form-item>
<el-form-item label='流程表单' prop='formId'>
<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>
</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'
@@ -85,55 +101,56 @@ const formRef = ref()
const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const formData = reactive({
id: '',
key: '',
name: '',
category: '',
icon: '',
description: '',
formId: ''
id: '',
key: '',
name: '',
category: '',
icon: '',
description: '',
formType: '20',
formCustomCreatePath: '',
formCustomViewPath: '',
formId: ''
})
//form表单校验规则
const rules = {
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
category: [{ required: true, message: '流程分类不能为空', trigger: 'change' }],
formId: [{ required: true, message: '流程表单不能为空', trigger: 'change' }]
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
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
})
//默认选中第一个tab
if (data) {
// 表单赋值
for (let key in formData) {
formData[key] = data[key]
}
} else {
resetForm()
// 在此处恢复默认表单
for (let key in formData) {
formData[key] = ''
}
//随机一个key给该模型
formData.key = `Process_${new Date().getTime()}`
await getCategorySimpleList().then(res => {
categoryList.value = res.data
})
//默认选中第一个tab
if (data) {
// 表单赋值
for (let key in formData) {
formData[key] = data[key]
}
dialogVisible.value = true
} else {
resetForm()
// 在此处恢复默认表单
for (let key in formData) {
formData[key] = ''
}
//随机一个key给该模型
formData.formType = '20'
}
dialogVisible.value = true
}
@@ -141,25 +158,25 @@ 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 })
@@ -167,10 +184,10 @@ defineExpose({ open })
<style scoped>
.el-upload-list__item {
transition: none !important;
transition: none !important;
}
.el-select {
min-width: 180px;
min-width: 180px;
}
</style>

View File

@@ -87,9 +87,6 @@ const tableStore = new TableStore({
}
],
beforeSearchFun: () => {
if (tableStore.table.params.addr) {
tableStore.table.params.addrStrOption = tableStore.table.params.addr.map(tempArray => tempArray.join('/'))
}
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]

View File

@@ -63,9 +63,6 @@ const tableStore = new TableStore({
}
],
beforeSearchFun: () => {
if (tableStore.table.params.addr) {
tableStore.table.params.addrStrOption = tableStore.table.params.addr.map(tempArray => tempArray.join('/'))
}
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]