流程标识管理功能新增
This commit is contained in:
63
src/api/bpm-boot/sign.ts
Normal file
63
src/api/bpm-boot/sign.ts
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import createAxios from '@/utils/request'
|
||||||
|
|
||||||
|
import { BPM_BOOT } from '@/utils/constantRequest'
|
||||||
|
|
||||||
|
const MAPPING_PATH = BPM_BOOT + '/bpmSign'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询流程分类数据
|
||||||
|
*/
|
||||||
|
export const listSign = (data: any) => {
|
||||||
|
return createAxios({
|
||||||
|
url: MAPPING_PATH + '/list',
|
||||||
|
method: 'POST',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增流程分类
|
||||||
|
*/
|
||||||
|
export const addSign = (data: any) => {
|
||||||
|
return createAxios({
|
||||||
|
url: MAPPING_PATH + '/add',
|
||||||
|
method: 'POST',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新流程分类
|
||||||
|
*/
|
||||||
|
export const updateSign = (data: any) => {
|
||||||
|
return createAxios({
|
||||||
|
url: MAPPING_PATH + '/update',
|
||||||
|
method: 'POST',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除流程分类
|
||||||
|
*/
|
||||||
|
export const deleteSign = (data: any) => {
|
||||||
|
let ids = [data]
|
||||||
|
return createAxios({
|
||||||
|
url: MAPPING_PATH + '/delete',
|
||||||
|
method: 'POST',
|
||||||
|
data: ids
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询所有流程分类
|
||||||
|
*/
|
||||||
|
export const getSignSimpleList = () => {
|
||||||
|
return createAxios({
|
||||||
|
url: MAPPING_PATH + '/simpleList',
|
||||||
|
method: 'GET'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
7
src/views/pqs/supervise/harmonicSurvey/detail.vue
Normal file
7
src/views/pqs/supervise/harmonicSurvey/detail.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<!--工作流view的路径:/pqs/supervise/harmonicSurvey/detail-->
|
||||||
|
<h1>详细信息回显</h1>
|
||||||
|
</template>
|
||||||
|
<script setup lang='ts'>
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
<undocumented v-if="activeName == '1'" />
|
<undocumented v-if="activeName == '1'" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<!-- <el-tab-pane label="入网评估报告审核" name="2"><network v-if="activeName == '2'" /></el-tab-pane>-->
|
<!-- <el-tab-pane label="入网评估报告审核" name="2"><network v-if="activeName == '2'" /></el-tab-pane>-->
|
||||||
<el-tab-pane label="常态化干扰源用户" name="3"><normal v-if="activeName == '3'" /></el-tab-pane>
|
<el-tab-pane label="常态化干扰源用户管理" name="3"><normal v-if="activeName == '3'" /></el-tab-pane>
|
||||||
<!-- <el-tab-pane label="实测报告审核" name="4"><report v-if="activeName == '4'" /></el-tab-pane>-->
|
<!-- <el-tab-pane label="实测报告审核" name="4"><report v-if="activeName == '4'" /></el-tab-pane>-->
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -40,7 +40,6 @@ const tableStore = inject('tableStore') as TableStore
|
|||||||
const machineVisible = ref(false)
|
const machineVisible = ref(false)
|
||||||
const title = ref('')
|
const title = ref('')
|
||||||
const formRef = ref()
|
const formRef = ref()
|
||||||
const regex = /^[+]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?$/
|
|
||||||
|
|
||||||
// 注意不要和表单ref的命名冲突
|
// 注意不要和表单ref的命名冲突
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
|
|||||||
@@ -28,7 +28,6 @@ import Table from '@/components/table/index.vue'
|
|||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { onMounted, provide, ref } from 'vue'
|
import { onMounted, provide, ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { deleteSgMachine } from '@/api/advance-boot/sgGroven/sgMachine'
|
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
import CategoryPopup from '@/views/system/bpm/category/categoryPopup.vue'
|
import CategoryPopup from '@/views/system/bpm/category/categoryPopup.vue'
|
||||||
@@ -103,7 +102,7 @@ onMounted(() => {
|
|||||||
// 加载数据
|
// 加载数据
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
tableStore.table.params.searchValue = ''
|
tableStore.table.params.name = ''
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
const add = () => {
|
const add = () => {
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ defineOptions({
|
|||||||
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 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 formData = reactive({})
|
||||||
const optionData = reactive({})
|
const optionData = reactive({})
|
||||||
const vfRenderRef = ref(null)
|
const vfRenderRef = ref()
|
||||||
const render = reactive({
|
const render = reactive({
|
||||||
visible: false,
|
visible: false,
|
||||||
title: ''
|
title: ''
|
||||||
@@ -91,7 +91,7 @@ const tableStore = new TableStore({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'update',
|
name: 'update',
|
||||||
title: '设计',
|
title: '设计表单',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-EditPen',
|
icon: 'el-icon-EditPen',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ const tableStore = new TableStore({
|
|||||||
{ title: '模型标识', field: 'key', width: 160 },
|
{ title: '模型标识', field: 'key', width: 160 },
|
||||||
{ title: '模型名称', field: 'name', width: 160 },
|
{ title: '模型名称', field: 'name', width: 160 },
|
||||||
{ title: '流程分类', field: 'categoryName', width: 150 },
|
{ title: '流程分类', field: 'categoryName', width: 150 },
|
||||||
{ title: '表单信息', field: 'formName', width: 170 },
|
{ title: '表单信息', field: 'formName', width: 170, },
|
||||||
{
|
{
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
field: 'createTime',
|
field: 'createTime',
|
||||||
|
|||||||
@@ -6,20 +6,11 @@
|
|||||||
|
|
||||||
<el-form-item label='表单类型' prop='formType'>
|
<el-form-item label='表单类型' prop='formType'>
|
||||||
<el-radio-group v-model='formData.formType'>
|
<el-radio-group v-model='formData.formType'>
|
||||||
<el-radio border label='10'>流程表单</el-radio>
|
|
||||||
<el-radio border label='20'>业务表单</el-radio>
|
<el-radio border label='20'>业务表单</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='key'>
|
|
||||||
<el-input
|
|
||||||
v-model='formData.key'
|
|
||||||
:disabled='!!formData.id'
|
|
||||||
clearable
|
|
||||||
placeholder='请输入流程标识'
|
|
||||||
/>
|
|
||||||
</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'
|
||||||
@@ -49,8 +40,17 @@
|
|||||||
<!-- <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='description'>
|
<el-form-item label='流程标识' prop='key'>
|
||||||
<el-input v-model='formData.description' clearable type='textarea' />
|
<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>
|
||||||
|
|
||||||
<el-form-item label='流程表单' prop='formId' v-if='formData.formType == "10"'>
|
<el-form-item label='流程表单' prop='formId' v-if='formData.formType == "10"'>
|
||||||
@@ -67,7 +67,11 @@
|
|||||||
<!-- <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' />
|
<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>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
@@ -88,10 +92,11 @@ import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删
|
|||||||
import { getFormSimpleList } from '@/api/bpm-boot/form'
|
import { getFormSimpleList } from '@/api/bpm-boot/form'
|
||||||
import { getCategorySimpleList } from '@/api/bpm-boot/category'
|
import { getCategorySimpleList } from '@/api/bpm-boot/category'
|
||||||
import { addModel, updateModel } from '@/api/bpm-boot/model'
|
import { addModel, updateModel } from '@/api/bpm-boot/model'
|
||||||
|
import { getSignSimpleList } from '@/api/bpm-boot/sign'
|
||||||
|
|
||||||
//传入type的名称
|
//传入type的名称
|
||||||
const categoryList = ref()
|
const categoryList = ref()
|
||||||
|
const flowInfo = ref()
|
||||||
const formList = ref()
|
const formList = ref()
|
||||||
|
|
||||||
const title = ref('')
|
const title = ref('')
|
||||||
@@ -115,7 +120,7 @@ const formData = reactive({
|
|||||||
|
|
||||||
//form表单校验规则
|
//form表单校验规则
|
||||||
const rules = {
|
const rules = {
|
||||||
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
|
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' }]
|
||||||
@@ -135,6 +140,10 @@ const open = async (text: string, data?: any) => {
|
|||||||
await getCategorySimpleList().then(res => {
|
await getCategorySimpleList().then(res => {
|
||||||
categoryList.value = res.data
|
categoryList.value = res.data
|
||||||
})
|
})
|
||||||
|
|
||||||
|
await getSignSimpleList().then(res => {
|
||||||
|
flowInfo.value = res.data
|
||||||
|
})
|
||||||
//默认选中第一个tab
|
//默认选中第一个tab
|
||||||
if (data) {
|
if (data) {
|
||||||
// 表单赋值
|
// 表单赋值
|
||||||
@@ -180,6 +189,14 @@ const submit = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
|
|
||||||
|
const changeSign = (event:any) => {
|
||||||
|
//根据选择的流程标识回显查看路径
|
||||||
|
const path = flowInfo.value.filter(item => item.signKey == event)[0].viewPath
|
||||||
|
formData.formCustomCreatePath = path
|
||||||
|
formData.formCustomViewPath = path
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -1,157 +1,157 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='default-main'>
|
<div class='default-main'>
|
||||||
<!--返回按钮-->
|
<!--返回按钮-->
|
||||||
<back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' />
|
<back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' />
|
||||||
<el-tabs type='border-card' v-model='tab'>
|
<el-tabs type='border-card' v-model='tab'>
|
||||||
<el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'>
|
<el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'>
|
||||||
<el-card
|
<el-card
|
||||||
v-for='(item, index) in runningTasks'
|
v-for='(item, index) in runningTasks'
|
||||||
:key='index'
|
:key='index'
|
||||||
v-loading='processInstanceLoading'
|
v-loading='processInstanceLoading'
|
||||||
class='box-card'
|
class='box-card'
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
|
<span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
|
||||||
</template>
|
</template>
|
||||||
<el-col :offset='6' :span='16'>
|
<el-col :offset='6' :span='16'>
|
||||||
<el-form
|
<el-form
|
||||||
:ref="'form' + index"
|
:ref="'form' + index"
|
||||||
:model='auditForms[index]'
|
:model='auditForms[index]'
|
||||||
:rules='auditRule'
|
:rules='auditRule'
|
||||||
label-width='100px'
|
label-width='100px'
|
||||||
>
|
>
|
||||||
<el-form-item v-if='processInstance && processInstance.name' label='流程名'>
|
<el-form-item v-if='processInstance && processInstance.name' label='流程名'>
|
||||||
{{ processInstance.name }}
|
{{ processInstance.name }}
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
|
<el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
|
||||||
{{ processInstance?.startUser.name }}
|
{{ processInstance?.startUser.name }}
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
|
<el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
|
||||||
{{ processInstance?.startUser.deptName }}
|
{{ processInstance?.startUser.deptName }}
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-card v-if='runningTasks[index].formId > 0' class='mb-15px !-mt-10px'>
|
<el-card v-if='runningTasks[index].formId > 0' class='mb-15px !-mt-10px'>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class='el-icon-picture-outline'>
|
<span class='el-icon-picture-outline'>
|
||||||
填写表单【{{ runningTasks[index]?.formName }}】
|
填写表单【{{ runningTasks[index]?.formName }}】
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<form-create
|
<form-create
|
||||||
v-model='approveForms[index].value'
|
v-model='approveForms[index].value'
|
||||||
v-model:api='approveFormFApis[index]'
|
v-model:api='approveFormFApis[index]'
|
||||||
:option='approveForms[index].option'
|
:option='approveForms[index].option'
|
||||||
:rule='approveForms[index].rule'
|
:rule='approveForms[index].rule'
|
||||||
/>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-form-item label='审批建议' prop='reason'>
|
|
||||||
<el-input
|
|
||||||
v-model='auditForms[index].reason'
|
|
||||||
placeholder='请输入审批建议'
|
|
||||||
type='textarea'
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label='抄送人' prop='copyUserIds'>-->
|
|
||||||
<!-- <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>-->
|
|
||||||
<!-- <el-option-->
|
|
||||||
<!-- v-for='item in userOptions'-->
|
|
||||||
<!-- :key='item.id'-->
|
|
||||||
<!-- :label='item.nickname'-->
|
|
||||||
<!-- :value='item.id'-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- </el-select>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
</el-form>
|
|
||||||
<div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
|
|
||||||
|
|
||||||
<el-button
|
|
||||||
type='success'
|
|
||||||
:icon='Select'
|
|
||||||
@click='handleAudit(item, true)'
|
|
||||||
>通过
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<el-button
|
|
||||||
type='danger'
|
|
||||||
:icon='Close'
|
|
||||||
@click='handleAudit(item, false)'
|
|
||||||
>不通过
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<!-- <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
|
|
||||||
<!-- <Icon icon='ep:edit' />-->
|
|
||||||
<!-- 转办-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-button type='primary' @click='handleDelegate(item)'>-->
|
|
||||||
<!-- <Icon icon='ep:position' />-->
|
|
||||||
<!-- 委派-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-button type='primary' @click='handleSign(item)'>-->
|
|
||||||
<!-- <Icon icon='ep:plus' />-->
|
|
||||||
<!-- 加签-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
|
|
||||||
<el-button
|
|
||||||
type='warning'
|
|
||||||
:icon='Back'
|
|
||||||
@click='handleBack(item)'
|
|
||||||
>回退
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-card>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label='申请信息' name='申请信息'>
|
|
||||||
<!-- 申请信息 -->
|
|
||||||
<el-card v-loading='processInstanceLoading' class='box-card'>
|
|
||||||
<template #header>
|
|
||||||
<span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
|
|
||||||
</template>
|
|
||||||
<!-- 情况一:流程表单 -->
|
|
||||||
<el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
|
|
||||||
<form-create
|
|
||||||
v-model='detailForm.value'
|
|
||||||
v-model:api='fApi'
|
|
||||||
:option='detailForm.option'
|
|
||||||
:rule='detailForm.rule'
|
|
||||||
/>
|
|
||||||
</el-col>
|
|
||||||
<!-- 情况二:业务表单 -->
|
|
||||||
<div v-if='processInstance?.processDefinition?.formType === 20'>
|
|
||||||
<BusinessFormComponent :id='processInstance.businessKey' />
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label='审批记录' name='流程审核'>
|
|
||||||
<!-- 审批记录 -->
|
|
||||||
<ProcessInstanceTaskList
|
|
||||||
:loading='tasksLoad'
|
|
||||||
:process-instance='processInstance'
|
|
||||||
:tasks='tasks'
|
|
||||||
@refresh='getTaskList'
|
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-card>
|
||||||
<!-- <el-tab-pane label='流程图'>-->
|
|
||||||
<!-- <!– 高亮流程图 –>-->
|
<el-form-item label='审批建议' prop='reason'>
|
||||||
<!-- <!– <ProcessInstanceBpmnViewer–>-->
|
<el-input
|
||||||
<!-- <!– :id="`${id}`"–>-->
|
v-model='auditForms[index].reason'
|
||||||
<!-- <!– :bpmn-xml="bpmnXml"–>-->
|
placeholder='请输入审批建议'
|
||||||
<!-- <!– :loading="processInstanceLoading"–>-->
|
type='textarea'
|
||||||
<!-- <!– :process-instance="processInstance"–>-->
|
/>
|
||||||
<!-- <!– :tasks="tasks"–>-->
|
</el-form-item>
|
||||||
<!-- <!– />–></el-tab-pane>-->
|
<!-- <el-form-item label='抄送人' prop='copyUserIds'>-->
|
||||||
</el-tabs>
|
<!-- <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>-->
|
||||||
<ContentWrap>
|
<!-- <el-option-->
|
||||||
<!-- 弹窗:转派审批人 -->
|
<!-- v-for='item in userOptions'-->
|
||||||
<TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
|
<!-- :key='item.id'-->
|
||||||
<!-- 弹窗:回退节点 -->
|
<!-- :label='item.nickname'-->
|
||||||
<TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
|
<!-- :value='item.id'-->
|
||||||
<!-- 弹窗:委派,将任务委派给别人处理,处理完成后,会重新回到原审批人手中-->
|
<!-- />-->
|
||||||
<TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
|
<!-- </el-select>-->
|
||||||
<!-- 弹窗:加签,当前任务审批人为A,向前加签选了一个C,则需要C先审批,然后再是A审批,向后加签B,A审批完,需要B再审批完,才算完成这个任务节点 -->
|
<!-- </el-form-item>-->
|
||||||
<TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
|
</el-form>
|
||||||
</ContentWrap>
|
<div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
|
||||||
</div>
|
|
||||||
|
<el-button
|
||||||
|
type='success'
|
||||||
|
:icon='Select'
|
||||||
|
@click='handleAudit(item, true)'
|
||||||
|
>通过
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
type='danger'
|
||||||
|
:icon='Close'
|
||||||
|
@click='handleAudit(item, false)'
|
||||||
|
>不通过
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<!-- <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
|
||||||
|
<!-- <Icon icon='ep:edit' />-->
|
||||||
|
<!-- 转办-->
|
||||||
|
<!-- </el-button>-->
|
||||||
|
<!-- <el-button type='primary' @click='handleDelegate(item)'>-->
|
||||||
|
<!-- <Icon icon='ep:position' />-->
|
||||||
|
<!-- 委派-->
|
||||||
|
<!-- </el-button>-->
|
||||||
|
<!-- <el-button type='primary' @click='handleSign(item)'>-->
|
||||||
|
<!-- <Icon icon='ep:plus' />-->
|
||||||
|
<!-- 加签-->
|
||||||
|
<!-- </el-button>-->
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
type='warning'
|
||||||
|
:icon='Back'
|
||||||
|
@click='handleBack(item)'
|
||||||
|
>回退
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label='申请信息' name='申请信息'>
|
||||||
|
<!-- 申请信息 -->
|
||||||
|
<el-card v-loading='processInstanceLoading' class='box-card'>
|
||||||
|
<template #header>
|
||||||
|
<span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
|
||||||
|
</template>
|
||||||
|
<!-- 情况一:流程表单 -->
|
||||||
|
<el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
|
||||||
|
<form-create
|
||||||
|
v-model='detailForm.value'
|
||||||
|
v-model:api='fApi'
|
||||||
|
:option='detailForm.option'
|
||||||
|
:rule='detailForm.rule'
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
<!-- 情况二:业务表单 -->
|
||||||
|
<div v-if='processInstance?.processDefinition?.formType === 20'>
|
||||||
|
<BusinessFormComponent :id='processInstance.businessKey' />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label='审批记录' name='审批记录'>
|
||||||
|
<!-- 审批记录 -->
|
||||||
|
<ProcessInstanceTaskList
|
||||||
|
:loading='tasksLoad'
|
||||||
|
:process-instance='processInstance'
|
||||||
|
:tasks='tasks'
|
||||||
|
@refresh='getTaskList'
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
<!-- <el-tab-pane label='流程图'>-->
|
||||||
|
<!-- <!– 高亮流程图 –>-->
|
||||||
|
<!-- <!– <ProcessInstanceBpmnViewer–>-->
|
||||||
|
<!-- <!– :id="`${id}`"–>-->
|
||||||
|
<!-- <!– :bpmn-xml="bpmnXml"–>-->
|
||||||
|
<!-- <!– :loading="processInstanceLoading"–>-->
|
||||||
|
<!-- <!– :process-instance="processInstance"–>-->
|
||||||
|
<!-- <!– :tasks="tasks"–>-->
|
||||||
|
<!-- <!– />–></el-tab-pane>-->
|
||||||
|
</el-tabs>
|
||||||
|
<ContentWrap>
|
||||||
|
<!-- 弹窗:转派审批人 -->
|
||||||
|
<TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
|
||||||
|
<!-- 弹窗:回退节点 -->
|
||||||
|
<TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
|
||||||
|
<!-- 弹窗:委派,将任务委派给别人处理,处理完成后,会重新回到原审批人手中-->
|
||||||
|
<TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
|
||||||
|
<!-- 弹窗:加签,当前任务审批人为A,向前加签选了一个C,则需要C先审批,然后再是A审批,向后加签B,A审批完,需要B再审批完,才算完成这个任务节点 -->
|
||||||
|
<TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
|
||||||
|
</ContentWrap>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
|
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
|
||||||
@@ -195,7 +195,7 @@ const tasks = ref<any[]>([]) // 任务列表
|
|||||||
const runningTasks = ref<any[]>([]) // 运行中的任务
|
const runningTasks = ref<any[]>([]) // 运行中的任务
|
||||||
const auditForms = ref<any[]>([]) // 审批任务的表单
|
const auditForms = ref<any[]>([]) // 审批任务的表单
|
||||||
const auditRule = reactive({
|
const auditRule = reactive({
|
||||||
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
|
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
|
||||||
})
|
})
|
||||||
const approveForms = ref<any[]>([]) // 审批通过时,额外的补充信息
|
const approveForms = ref<any[]>([]) // 审批通过时,额外的补充信息
|
||||||
const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
|
const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
|
||||||
@@ -203,210 +203,211 @@ const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
|
|||||||
// ========== 申请信息 ==========
|
// ========== 申请信息 ==========
|
||||||
const fApi = ref<ApiAttrs>() //
|
const fApi = ref<ApiAttrs>() //
|
||||||
const detailForm = ref({
|
const detailForm = ref({
|
||||||
rule: [],
|
rule: [],
|
||||||
option: {},
|
option: {},
|
||||||
value: {}
|
value: {}
|
||||||
}) // 流程实例的表单详情
|
}) // 流程实例的表单详情
|
||||||
|
|
||||||
/** 监听 approveFormFApis,实现它对应的 form-create 初始化后,隐藏掉对应的表单提交按钮 */
|
/** 监听 approveFormFApis,实现它对应的 form-create 初始化后,隐藏掉对应的表单提交按钮 */
|
||||||
watch(
|
watch(
|
||||||
() => approveFormFApis.value,
|
() => approveFormFApis.value,
|
||||||
(value) => {
|
(value) => {
|
||||||
value?.forEach((api) => {
|
value?.forEach((api) => {
|
||||||
api.btn.show(false)
|
api.btn.show(false)
|
||||||
api.resetBtn.show(false)
|
api.resetBtn.show(false)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
/** 处理审批通过和不通过的操作 */
|
/** 处理审批通过和不通过的操作 */
|
||||||
const handleAudit = async (task, pass) => {
|
const handleAudit = async (task, pass) => {
|
||||||
// 1.1 获得对应表单
|
// 1.1 获得对应表单
|
||||||
const index = runningTasks.value.indexOf(task)
|
const index = runningTasks.value.indexOf(task)
|
||||||
const auditFormRef = proxy.$refs['form' + index][0]
|
const auditFormRef = proxy.$refs['form' + index][0]
|
||||||
// 1.2 校验表单
|
// 1.2 校验表单
|
||||||
const elForm = unref(auditFormRef)
|
const elForm = unref(auditFormRef)
|
||||||
if (!elForm) return
|
if (!elForm) return
|
||||||
const valid = await elForm.validate()
|
const valid = await elForm.validate()
|
||||||
if (!valid) return
|
if (!valid) return
|
||||||
|
|
||||||
// 2.1 提交审批
|
// 2.1 提交审批
|
||||||
const data = {
|
const data = {
|
||||||
id: task.id,
|
id: task.id,
|
||||||
reason: auditForms.value[index].reason,
|
reason: auditForms.value[index].reason,
|
||||||
copyUserIds: auditForms.value[index].copyUserIds
|
copyUserIds: auditForms.value[index].copyUserIds
|
||||||
|
}
|
||||||
|
if (pass) {
|
||||||
|
// 审批通过,并且有额外的 approveForm 表单,需要校验 + 拼接到 data 表单里提交
|
||||||
|
const formCreateApi = approveFormFApis.value[index]
|
||||||
|
if (formCreateApi) {
|
||||||
|
await formCreateApi.validate()
|
||||||
|
data.variables = approveForms.value[index].value
|
||||||
}
|
}
|
||||||
if (pass) {
|
await approveTask(data)
|
||||||
// 审批通过,并且有额外的 approveForm 表单,需要校验 + 拼接到 data 表单里提交
|
tab.value = '审批记录'
|
||||||
const formCreateApi = approveFormFApis.value[index]
|
ElMessage.success('审批通过成功')
|
||||||
if (formCreateApi) {
|
} else {
|
||||||
await formCreateApi.validate()
|
await rejectTask(data)
|
||||||
data.variables = approveForms.value[index].value
|
tab.value = '审批记录'
|
||||||
}
|
ElMessage.success('审批不通过成功')
|
||||||
await approveTask(data)
|
}
|
||||||
tab.value = '审批记录'
|
// 2.2 加载最新数据
|
||||||
ElMessage.success('审批通过成功')
|
getDetail()
|
||||||
} else {
|
|
||||||
await rejectTask(data)
|
|
||||||
ElMessage.success('审批不通过成功')
|
|
||||||
}
|
|
||||||
// 2.2 加载最新数据
|
|
||||||
getDetail()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 转派审批人 */
|
/** 转派审批人 */
|
||||||
const taskTransferFormRef = ref()
|
const taskTransferFormRef = ref()
|
||||||
const openTaskUpdateAssigneeForm = (id: string) => {
|
const openTaskUpdateAssigneeForm = (id: string) => {
|
||||||
taskTransferFormRef.value.open(id)
|
taskTransferFormRef.value.open(id)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 处理审批退回的操作 */
|
/** 处理审批委托的操作 */
|
||||||
const taskDelegateForm = ref()
|
const taskDelegateForm = ref()
|
||||||
const handleDelegate = async (task) => {
|
const handleDelegate = async (task) => {
|
||||||
taskDelegateForm.value.open(task.id)
|
taskDelegateForm.value.open(task.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 处理审批退回的操作 */
|
/** 处理审批退回的操作 */
|
||||||
const taskReturnFormRef = ref()
|
const taskReturnFormRef = ref()
|
||||||
const handleBack = async (task: any) => {
|
const handleBack = async (task: any) => {
|
||||||
taskReturnFormRef.value.open(task.id)
|
taskReturnFormRef.value.open(task.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 处理审批加签的操作 */
|
/** 处理审批加签的操作 */
|
||||||
const taskSignCreateFormRef = ref()
|
const taskSignCreateFormRef = ref()
|
||||||
const handleSign = async (task: any) => {
|
const handleSign = async (task: any) => {
|
||||||
taskSignCreateFormRef.value.open(task.id)
|
taskSignCreateFormRef.value.open(task.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 获得详情 */
|
/** 获得详情 */
|
||||||
const getDetail = () => {
|
const getDetail = () => {
|
||||||
// 1. 获得流程实例相关
|
// 1. 获得流程实例相关
|
||||||
getProcessInstance()
|
getProcessInstance()
|
||||||
// 2. 获得流程任务列表(审批记录)
|
// 2. 获得流程任务列表(审批记录)
|
||||||
getTaskList()
|
getTaskList()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 加载流程实例 */
|
/** 加载流程实例 */
|
||||||
const BusinessFormComponent = ref(null) // 异步组件
|
const BusinessFormComponent = ref(null) // 异步组件
|
||||||
const getProcessInstance = async () => {
|
const getProcessInstance = async () => {
|
||||||
try {
|
try {
|
||||||
processInstanceLoading.value = true
|
processInstanceLoading.value = true
|
||||||
let data
|
let data
|
||||||
await getProcessInstanceById(id).then(res => {
|
await getProcessInstanceById(id).then(res => {
|
||||||
data = res.data
|
data = res.data
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
ElMessage.error('查询不到流程信息!')
|
ElMessage.error('查询不到流程信息!')
|
||||||
return
|
return
|
||||||
}
|
|
||||||
processInstance.value = data
|
|
||||||
// 设置表单信息
|
|
||||||
const processDefinition = data.processDefinition
|
|
||||||
if (processDefinition.formType === 10) {
|
|
||||||
setConfAndFields2(
|
|
||||||
detailForm,
|
|
||||||
processDefinition.formConf,
|
|
||||||
processDefinition.formFields,
|
|
||||||
data.formVariables
|
|
||||||
)
|
|
||||||
nextTick().then(() => {
|
|
||||||
fApi.value?.btn.show(false)
|
|
||||||
fApi.value?.resetBtn.show(false)
|
|
||||||
fApi.value?.disabled(true)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// 注意:data.processDefinition.formCustomViewPath 是组件的全路径,例如说:/crm/contract/detail/index.vue
|
|
||||||
// BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
|
|
||||||
BusinessFormComponent.value = registerComponent('/pqs/supervise/interfere/components/undocumented/detail')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载流程图
|
|
||||||
bpmnXml.value = (
|
|
||||||
await getProcessDefinitionById(processDefinition.id)
|
|
||||||
)?.bpmnXml
|
|
||||||
} finally {
|
|
||||||
processInstanceLoading.value = false
|
|
||||||
}
|
}
|
||||||
|
processInstance.value = data
|
||||||
|
// 设置表单信息
|
||||||
|
const processDefinition = data.processDefinition
|
||||||
|
if (processDefinition.formType === 10) {
|
||||||
|
setConfAndFields2(
|
||||||
|
detailForm,
|
||||||
|
processDefinition.formConf,
|
||||||
|
processDefinition.formFields,
|
||||||
|
data.formVariables
|
||||||
|
)
|
||||||
|
nextTick().then(() => {
|
||||||
|
fApi.value?.btn.show(false)
|
||||||
|
fApi.value?.resetBtn.show(false)
|
||||||
|
fApi.value?.disabled(true)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 注意:data.processDefinition.formCustomViewPath 是组件的全路径,例如说:/crm/contract/detail/index.vue
|
||||||
|
// BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
|
||||||
|
BusinessFormComponent.value = registerComponent('/pqs/supervise/interfere/components/undocumented/detail')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载流程图
|
||||||
|
bpmnXml.value = (
|
||||||
|
await getProcessDefinitionById(processDefinition.id)
|
||||||
|
)?.bpmnXml
|
||||||
|
} finally {
|
||||||
|
processInstanceLoading.value = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 加载任务列表 */
|
/** 加载任务列表 */
|
||||||
const getTaskList = async () => {
|
const getTaskList = async () => {
|
||||||
runningTasks.value = []
|
runningTasks.value = []
|
||||||
auditForms.value = []
|
auditForms.value = []
|
||||||
approveForms.value = []
|
approveForms.value = []
|
||||||
approveFormFApis.value = []
|
approveFormFApis.value = []
|
||||||
try {
|
try {
|
||||||
// 获得未取消的任务
|
// 获得未取消的任务
|
||||||
tasksLoad.value = true
|
tasksLoad.value = true
|
||||||
let data
|
let data
|
||||||
await getTaskListByProcessInstanceId(id).then(res => {
|
await getTaskListByProcessInstanceId(id).then(res => {
|
||||||
data = res.data
|
data = res.data
|
||||||
})
|
})
|
||||||
tasks.value = []
|
tasks.value = []
|
||||||
// 1.1 移除已取消的审批
|
// 1.1 移除已取消的审批
|
||||||
data.forEach((task) => {
|
data.forEach((task) => {
|
||||||
if (task.status !== 4) {
|
if (task.status !== 4) {
|
||||||
tasks.value.push(task)
|
tasks.value.push(task)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// 1.2 排序,将未完成的排在前面,已完成的排在后面;
|
// 1.2 排序,将未完成的排在前面,已完成的排在后面;
|
||||||
tasks.value.sort((a, b) => {
|
tasks.value.sort((a, b) => {
|
||||||
// 有已完成的情况,按照完成时间倒序
|
// 有已完成的情况,按照完成时间倒序
|
||||||
if (a.endTime && b.endTime) {
|
if (a.endTime && b.endTime) {
|
||||||
return b.endTime - a.endTime
|
return b.endTime - a.endTime
|
||||||
} else if (a.endTime) {
|
} else if (a.endTime) {
|
||||||
return 1
|
return 1
|
||||||
} else if (b.endTime) {
|
} else if (b.endTime) {
|
||||||
return -1
|
return -1
|
||||||
// 都是未完成,按照创建时间倒序
|
// 都是未完成,按照创建时间倒序
|
||||||
} else {
|
} else {
|
||||||
return b.createTime - a.createTime
|
return b.createTime - a.createTime
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 获得需要自己审批的任务
|
// 获得需要自己审批的任务
|
||||||
loadRunningTask(tasks.value)
|
loadRunningTask(tasks.value)
|
||||||
} finally {
|
} finally {
|
||||||
tasksLoad.value = false
|
tasksLoad.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 设置 runningTasks 中的任务
|
* 设置 runningTasks 中的任务
|
||||||
*/
|
*/
|
||||||
const loadRunningTask = (tasks) => {
|
const loadRunningTask = (tasks) => {
|
||||||
tasks.forEach((task) => {
|
tasks.forEach((task) => {
|
||||||
if (!isEmpty(task.children)) {
|
if (!isEmpty(task.children)) {
|
||||||
loadRunningTask(task.children)
|
loadRunningTask(task.children)
|
||||||
}
|
}
|
||||||
// 2.1 只有待处理才需要
|
// 2.1 只有待处理才需要
|
||||||
if (task.status !== 1 && task.status !== 6) {
|
if (task.status !== 1 && task.status !== 6) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 2.2 自己不是处理人
|
// 2.2 自己不是处理人
|
||||||
if (!task.assigneeUser || task.assigneeUser.id !== userId) {
|
if (!task.assigneeUser || task.assigneeUser.id !== userId) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 2.3 添加到处理任务
|
// 2.3 添加到处理任务
|
||||||
runningTasks.value.push({ ...task })
|
runningTasks.value.push({ ...task })
|
||||||
auditForms.value.push({
|
auditForms.value.push({
|
||||||
reason: '',
|
reason: '',
|
||||||
copyUserIds: []
|
copyUserIds: []
|
||||||
})
|
|
||||||
|
|
||||||
// 2.4 处理 approve 表单
|
|
||||||
if (task.formId && task.formConf) {
|
|
||||||
const approveForm = {}
|
|
||||||
setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
|
|
||||||
approveForms.value.push(approveForm)
|
|
||||||
} else {
|
|
||||||
approveForms.value.push({}) // 占位,避免为空
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 2.4 处理 approve 表单
|
||||||
|
if (task.formId && task.formConf) {
|
||||||
|
const approveForm = {}
|
||||||
|
setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
|
||||||
|
approveForms.value.push(approveForm)
|
||||||
|
} else {
|
||||||
|
approveForms.value.push({}) // 占位,避免为空
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const tab = ref('')
|
const tab = ref('')
|
||||||
@@ -414,17 +415,15 @@ const tab = ref('')
|
|||||||
/** 初始化 */
|
/** 初始化 */
|
||||||
const userOptions = ref([]) // 用户列表
|
const userOptions = ref([]) // 用户列表
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
getDetail()
|
getDetail()
|
||||||
|
// 获得用户列表
|
||||||
// 获得用户列表
|
await getUserSimpleList().then(res => {
|
||||||
await getUserSimpleList().then(res => {
|
userOptions.value = res.data
|
||||||
userOptions.value = res.data
|
})
|
||||||
})
|
if (todo) {
|
||||||
if (todo) {
|
tab.value = '流程审核'
|
||||||
tab.value = '流程审核'
|
} else {
|
||||||
} else {
|
tab.value = '申请信息'
|
||||||
tab.value = '申请信息'
|
}
|
||||||
}
|
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
120
src/views/system/bpm/sign/index.vue
Normal file
120
src/views/system/bpm/sign/index.vue
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
<!--流程分类页面-->
|
||||||
|
<template>
|
||||||
|
<div class='default-main'>
|
||||||
|
<TableHeader>
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form-item label='标识名称'>
|
||||||
|
<el-input
|
||||||
|
v-model='tableStore.table.params.name'
|
||||||
|
clearable
|
||||||
|
placeholder='请输入名称'
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label='标识key'>
|
||||||
|
<el-input
|
||||||
|
v-model='tableStore.table.params.signKey'
|
||||||
|
clearable
|
||||||
|
placeholder='请输入key'
|
||||||
|
/>
|
||||||
|
</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>
|
||||||
|
<!--弹出框-->
|
||||||
|
<sign-popup ref='signPopup' />
|
||||||
|
</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 { ElMessage } from 'element-plus'
|
||||||
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
|
import SignPopup from '@/views/system/bpm/sign/signPopup.vue'
|
||||||
|
import { deleteSign } from '@/api/bpm-boot/sign'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'bpmSign'
|
||||||
|
})
|
||||||
|
|
||||||
|
const { push } = useRouter()
|
||||||
|
const signPopup = ref()
|
||||||
|
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/bpm-boot/bpmSign/list',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{ title: '序号', type: 'seq', width: 80 },
|
||||||
|
{ title: '标识名称', field: 'name', minWidth: 130 },
|
||||||
|
{ title: '标识key', field: 'signKey', minWidth: 130 },
|
||||||
|
{ title: '表单查看地址', field: 'viewPath', minWidth: 200 },
|
||||||
|
{ 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 => {
|
||||||
|
signPopup.value.open('修改流程标识', row)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'update',
|
||||||
|
title: '删除',
|
||||||
|
type: 'danger',
|
||||||
|
icon: 'el-icon-Delete',
|
||||||
|
render: 'confirmButton',
|
||||||
|
popconfirm: {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
confirmButtonType: 'danger',
|
||||||
|
title: '确定删除吗?'
|
||||||
|
},
|
||||||
|
click: row => {
|
||||||
|
deleteSign(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.name = ''
|
||||||
|
tableStore.table.params.signKey = ''
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
const add = () => {
|
||||||
|
signPopup.value.open('新增流程标识')
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
112
src/views/system/bpm/sign/signPopup.vue
Normal file
112
src/views/system/bpm/sign/signPopup.vue
Normal 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='分类key' prop='signKey'>
|
||||||
|
<el-input v-model='form.signKey' placeholder='请输入标识key' clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label='查看表单路径' prop='viewPath'>
|
||||||
|
<el-input v-model='form.viewPath' placeholder='请输入查看表单路径' clearable>
|
||||||
|
</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 { addSign, updateSign } from '@/api/bpm-boot/sign'
|
||||||
|
|
||||||
|
const tableStore = inject('tableStore') as TableStore
|
||||||
|
const machineVisible = ref(false)
|
||||||
|
const title = ref('')
|
||||||
|
const formRef = ref()
|
||||||
|
|
||||||
|
// 注意不要和表单ref的命名冲突
|
||||||
|
const form = reactive({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
signKey: '',
|
||||||
|
viewPath: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
//form表单校验规则
|
||||||
|
const rules = {
|
||||||
|
name: [{ required: true, message: '标识名不能为空', trigger: 'blur' }],
|
||||||
|
signKey: [{ required: true, message: '标识key不能为空', trigger: 'blur' }],
|
||||||
|
viewPath: [{ 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 updateSign(form)
|
||||||
|
} else {
|
||||||
|
await addSign(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>
|
||||||
Reference in New Issue
Block a user