<template>
|
<div>
|
<a-card>
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
<a-form-model-item prop="key" label="流程KEY">
|
<a-input v-model="queryParam.key" allowClear placeholder="请输入流程KEY" ></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
<a-button @click="searchQuery" type="primary" icon="search" style="margin-right: 8px">查询</a-button>
|
<a-button @click="openModeler" type="primary" icon="vertical-align-bottom">导入流程</a-button>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<a-table
|
:columns="columns"
|
:dataSource="dataSource"
|
rowKey="id"
|
:loading="loading"
|
class="j-table-force-nowrap"
|
:pagination="ipagination"
|
@change="handleTableChange"
|
>
|
<template slot="suspensionState" slot-scope="text,record">
|
<span v-if="record.suspensionState =='1' " style="color: #7ac23c">激活</span>
|
<span v-if="record.suspensionState =='2' " style="color: #ff0000">挂起</span>
|
</template>
|
|
<span slot="action" slot-scope="text, record">
|
|
<a v-if="record.suspensionState =='1' " style="color: #ff0000" @click="updateHandle(record.id,2)">挂起</a>
|
<a v-else style="color: #7ac23c" @click="updateHandle(record.id,1)">激活</a>
|
<a-divider type="vertical" />
|
<a href="javascript:void(0);" @click="getNodeData(record)" >节点设置</a>
|
<a-divider type="vertical"/>
|
<a-dropdown>
|
<a class="ant-dropdown-link">
|
更多 <a-icon type="down"/>
|
</a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a @click="convertToModel(record.id)">转为模型</a>
|
</a-menu-item>
|
<a-menu-item v-if="record.suspensionState =='2' ">
|
<a-popconfirm title="确定删除吗?" @confirm="() => actDelete(record.deploymentId)">
|
<a style="color: red">删除</a>
|
</a-popconfirm>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</span>
|
<a-divider type="vertical" />
|
</a-table>
|
|
<activiti-file-model ref="ativitiFileModel" ></activiti-file-model>
|
<!--节点设置-->
|
<a-modal
|
title="编辑流程节点" width="900px" :maskClosable="false"
|
:confirmLoading="confirmLoading"
|
:visible="showProcessNodeEdit"
|
:footer="null"
|
@cancel="closeNode"
|
>
|
<a-row>
|
<a-col :md="4" :sm="4" style="border-right: 1px solid #999">
|
<!-- 选择流程节点-->
|
<a-steps direction="vertical" :current="current" size="small">
|
<template v-for="item,i in nodeList">
|
<a-step style="cursor: pointer;" :title="item.title"
|
:description="item.description" :status="i==current?'process':'wait'"
|
@click="change_steps(item,i)"/>
|
</template>
|
</a-steps>
|
</a-col>
|
<a-col :md="20" :sm="20">
|
<a-alert message="温馨提示：若流程运行至未分配审批人员的审批节点时，流程将自动中断取消！" banner />
|
<span></span>
|
<a-form :form="nodeForm" v-if="showProcessNodeEdit">
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="节点名称" >
|
<span class="nodespan">{{editNode.title}}</span>
|
</a-form-item>
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="节点类型" >
|
<span class="nodespan">{{dictNodeType[editNode.type]}}</span>
|
</a-form-item>
|
<a-alert type="info" message="每个节点设置，如有修改都请保存一次，跳转节点后数据不会自动保存！" banner />
|
<br/>
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="审批人员" v-show="editNode.type==1">
|
<a-checkbox-group @change="spryType" v-model="spryTypes" >
|
<!-- 0角色 1用户 2部门 3发起人 4发起人的部门负责人-->
|
<a-checkbox value="0"> 根据角色选择 </a-checkbox>
|
<a-checkbox value="1"> 直接选择人员 </a-checkbox>
|
<a-checkbox value="2"> 部门 </a-checkbox>
|
<a-checkbox value="5"> 部门负责人 </a-checkbox>
|
<a-checkbox value="3">
|
发起人
|
<a-tooltip placement="topLeft" title="自动获取发起人">
|
<a-icon type="exclamation-circle" />
|
</a-tooltip>
|
</a-checkbox>
|
<a-checkbox value="4">
|
发起人的部门负责人
|
<a-tooltip placement="topLeft" title="自动获取发起人所在部门的负责人，即其上级领导。（如果其本身就是部门负责人，则指向发起人自己。）">
|
<a-icon type="exclamation-circle" />
|
</a-tooltip>
|
</a-checkbox>
|
<a-checkbox value="6">
|
表单变量
|
<a-tooltip placement="topLeft" title="填写与表单中相对应的变量，role:角色，user:人员：dept:部门：deptManage:部门负责人; 例如：variable:role,variable2:user;">
|
<a-icon type="exclamation-circle" />
|
</a-tooltip>
|
</a-checkbox>
|
|
</a-checkbox-group>
|
</a-form-item>
|
<!-- 0角色 1用户 2部门 3发起人 4发起人的部门负责人-->
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择角色" v-if="spryTypes.indexOf('0')>-1" >
|
<j-select-role v-model="spry.roleIds"/>
|
</a-form-item>
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择人员" v-if="spryTypes.indexOf('1')>-1" >
|
<!-- 通过部门选择用户控件 -->
|
<j-select-user-by-dep v-model="spry.userIds" :multi="true"></j-select-user-by-dep>
|
</a-form-item>
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择部门" v-if="spryTypes.indexOf('2')>-1" >
|
<j-select-depart v-model="spry.departmentIds" :multi="true"></j-select-depart>
|
</a-form-item>
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择部门负责人" v-if="spryTypes.indexOf('5')>-1" >
|
<j-select-depart v-model="spry.departmentManageIds" :multi="true"></j-select-depart>
|
</a-form-item>
|
<a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="输入表单变量" v-if="spryTypes.indexOf('6')>-1" >
|
<a-input v-model="spry.formVariables" :multi="true"></a-input>
|
</a-form-item>
|
<!--btn-->
|
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
|
<a-button @click="sprySubmit" type="primary" html-type="submit" :disabled="editNode.type==0||editNode.type==2||confirmLoading">
|
提交并保存
|
</a-button>
|
|
<a-button @click="closeNode" style="margin-left: 10px">
|
关闭
|
</a-button>
|
</a-form-item>
|
</a-form>
|
</a-col>
|
</a-row>
|
</a-modal>
|
</a-card>
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getAction, deleteAction, postAction ,postFormAction} from '@/api/manage'
|
import { mixinDevice } from '@/utils/mixin'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import ActivitiFileModel from './ActivitiFileModel'
|
import { getModelList } from '@/api/activiti/activiti'
|
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
|
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
|
import JSelectRole from '@/components/jeecgbiz/JSelectRole'
|
import JTreeSelect from '@/components/jeecg/JTreeSelect'
|
import JTreeDict from '@/components/jeecg/JTreeDict'
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
export default {
|
name: 'ActivitiFileList',
|
mixins: [JeecgListMixin, mixinDevice],
|
components: {
|
ActivitiFileModel,JEllipsis,JSelectUserByDep,JSelectRole,JSelectDepart
|
,JTreeSelect,JTreeDict
|
},
|
data() {
|
return {
|
columns: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
}
|
}, {
|
dataIndex: 'deploymentId',
|
title: '流程编号',
|
align: 'center'
|
}, {
|
dataIndex: 'name',
|
title: '流程名称',
|
align: 'center'
|
}, {
|
dataIndex: 'key',
|
title: '流程KEY',
|
align: 'center'
|
}, {
|
dataIndex: 'description',
|
title: '描述信息',
|
align: 'center'
|
}, {
|
title: '是否挂起',
|
dataIndex: 'suspensionState',
|
align: 'center',
|
scopedSlots: { customRender: 'suspensionState' }
|
}, {
|
title: '部署时间',
|
dataIndex: 'deployTime',
|
align: 'center'
|
}, {
|
title: '操作',
|
dataIndex: 'action',
|
width: '150px',
|
align: 'center',
|
scopedSlots: { customRender: 'action' }
|
}],
|
url: {
|
list: 'act/reprocdef/list',
|
delete: '/act/reprocdef/deleteByDeploymentId',
|
convertToModel: '/act/reprocdef/convertToModel',
|
updateHandle: '/act/reprocdef/update',
|
getProcessNode: "/activiti_process/getProcessNode",
|
editNodeUser: "/activiti_process/editNodeUser",
|
},
|
queryParam: {
|
category: '',
|
key: '',
|
name: ''
|
},
|
// 表头
|
labelCol: {
|
xs: { span: 4 },
|
sm: { span: 4 },
|
},
|
wrapperCol: {
|
xs: { span: 20 },
|
sm: { span: 20 },
|
},
|
updateRow: {},
|
confirmLoading: false,
|
current:0,
|
nodeForm: this.$form.createForm(this),
|
nodeList:[],
|
editNode:{},
|
showProcessNodeEdit:false,
|
dictNodeType:{
|
'0':'开始节点',
|
'1':'审批节点',
|
'2':'结束节点',
|
},
|
spryTypes:[],
|
spry:{
|
//选中的用户
|
userIds:'',
|
roleIds:'',
|
departmentIds:'',
|
departmentManageIds:'',
|
formVariables:'',
|
chooseSponsor:false,
|
chooseDepHeader:false,
|
},
|
}
|
},
|
created() {
|
// this.getDataList()
|
},
|
methods: {
|
// 删除
|
actDelete(deploymentId) {
|
deleteAction(this.url.delete, { deploymentId: deploymentId }).then(res => {
|
if (res.success) {
|
this.$message.success(res.message)
|
this.searchQuery()
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
// 转为模型
|
convertToModel(id) {
|
getAction(this.url.convertToModel, { id: id }).then(res => {
|
console.log('转为模型', res)
|
if (res.success) {
|
this.$message.success('操作成功，流程编号:' + res.result.deploymentId)
|
this.searchQuery()
|
} else {
|
this.$message.warning('操作失败，流程编号:' + res.result.deploymentId)
|
}
|
})
|
},
|
// 挂起和激活
|
updateHandle(id, state) {
|
getAction(this.url.updateHandle, { id: id, state: state }).then(res => {
|
console.log('挂起和激活', res)
|
if (res.success) {
|
this.$message.success(res.message)
|
this.searchQuery()
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
// 查询
|
getDataList() {
|
this.loading = true
|
let params = this.queryParam
|
getModelList(this.url.list, params).then(res => {
|
console.log('查询数据', res)
|
this.dataSource = res.result.records
|
this.total = res.result.total
|
this.ipagination.total = res.result.total
|
this.loading = false
|
})
|
},
|
openModeler() {
|
this.$refs.ativitiFileModel.openModel()
|
},
|
|
deployProcess(id) {
|
getAction(this.url.deploy, { id: id }).then(res => {
|
if (res.success) {
|
this.$message.success(res.message)
|
this.searchQuery()
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
/*节点设置*/
|
getNodeData(row){
|
let _this = this;
|
_this.updateRow = row;
|
getAction(_this.url.getProcessNode,{
|
id:row.id
|
}).then(res => {
|
if (res.success) {
|
// 转换null为""
|
_this.nodeList = res.result||[];
|
console.log("_this.nodeList",_this.nodeList);
|
if (_this.nodeList.length>0){
|
_this.editNode = _this.nodeList[_this.current];
|
console.log(_this.current,_this.editNode)
|
_this.showProcessNodeEdit = true;
|
}
|
}else {
|
_this.$message.error(res.message);
|
}
|
});
|
},
|
/*编辑流程节点*/
|
|
change_steps(node,index){
|
this.spryTypes = [];
|
console.log('onChange:', node);
|
this.current = index;
|
this.editNode = node;
|
/* 0角色 1用户 2部门 3发起人 4发起人的部门负责人 5部门的部门负责人*/
|
this.spry.chooseDepHeader = node.chooseDepHeader||false;
|
if (this.spry.chooseDepHeader) this.spryTypes.push('4') ;
|
this.spry.chooseSponsor = node.chooseSponsor||false;
|
if (this.spry.chooseSponsor) this.spryTypes.push('3') ;
|
var userIds = [];
|
for (const user of node.users||[]) {
|
userIds.push(user.username);
|
}
|
this.spry.userIds = userIds.join(",");
|
if (userIds.length>0) this.spryTypes.push('1') ;
|
var roleIds = []
|
for (const role of node.roles||[]) {
|
roleIds.push(role.roleCode)
|
}
|
this.spry.roleIds = roleIds.join(",")
|
if (roleIds.length>0) this.spryTypes.push('0') ;
|
var departmentIds = []
|
for (const department of node.departments||[]) {
|
departmentIds.push(department.id)
|
}
|
this.spry.departmentIds = departmentIds.join(",")
|
if (departmentIds.length>0) this.spryTypes.push('2') ;
|
var departmentManageIds = []
|
for (const departmentManage of node.departmentManages || []){
|
departmentManageIds.push(departmentManage.id);
|
}
|
this.spry.departmentManageIds = departmentManageIds.join(",")
|
if (departmentManageIds.length>0) this.spryTypes.push('5') ;
|
console.log("回显this.spry",this.spry)
|
|
this.spry.formVariables = node.formVariables||'';
|
if (this.spry.formVariables) this.spryTypes.push('6');
|
},
|
spryType(types){
|
/* 0角色 1用户 2部门 3发起人 4发起人的部门负责人 5部门负责人*/
|
// this.spryTypes = types;
|
if (this.spryTypes.indexOf('0')==-1) this.spry.roleIds = '';
|
if (this.spryTypes.indexOf('1')==-1) this.spry.userIds = '';
|
if (this.spryTypes.indexOf('2')==-1) this.spry.departmentIds = '';
|
if (this.spryTypes.indexOf('5')==-1) this.spry.departmentManageIds = '';
|
if (this.spryTypes.indexOf('6')==-1) this.spry.formVariable = '';
|
//是否选中发起人
|
this.spry.chooseSponsor = this.spryTypes.indexOf('3')>-1 ;
|
//是否选中发起人的部门领导
|
this.spry.chooseDepHeader = this.spryTypes.indexOf('4')>-1 ;
|
|
console.log("this.spry",this.spry)
|
},
|
sprySubmit() {
|
var _this = this;
|
if (this.spryTypes.length==0){
|
_this.$message.error("必须选择审批人！");
|
return;
|
}
|
_this.confirmLoading = true;
|
this.spry.nodeId = this.editNode.id;
|
this.spry.procDefId = this.editNode.procDefId;
|
postFormAction(_this.url.editNodeUser,this.spry).then(res => {
|
if (res.success) {
|
_this.$message.success("操作成功");
|
/*保存成功后回显数据*/
|
_this.getNodeData(_this.updateRow);
|
}else {
|
_this.$message.error(res.message);
|
}
|
}).finally(() => _this.confirmLoading = false);
|
},
|
closeNode() {
|
this.showProcessNodeEdit = false,
|
this.current=0,
|
this.spryTypes=[],
|
this.spry={}
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@import '~@assets/less/common.less';
|
.table-operator .ant-btn {
|
margin: 3px 8px 4px 0;
|
}
|
.nodespan{
|
color: #999;
|
}
|
.ant-checkbox-wrapper + .ant-checkbox-wrapper{
|
margin-left: 0;
|
margin-right: 8px;
|
}
|
</style>
|
