You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
21 KiB
437 lines
21 KiB
<template> |
|
<a-card :bordered="false"> |
|
<!--流程申请选择--> |
|
<a-input-search style="margin-bottom: 10px;margin-right:10px;width: 200px" v-model="searchProcessKey" |
|
placeholder="输入流程名称" @search="onSearchProcess" /> |
|
<a-button @click="onSearchProcess(searchProcessKey)" type="primary">查询</a-button> |
|
<a-button @click="onSearchProcess('')" style="margin-left: 1%">重置</a-button> |
|
<a-button @click="handleToApplyList" type="primary" style="float: right;">前往我的申请列表</a-button> |
|
<a-empty description="无流程可供选择" v-if="activeKeyAll.length==0" /> |
|
<div v-else > |
|
<a-collapse v-model="activeKey"> |
|
<a-collapse-panel v-for="(value, index) in activeKeyAll" :header="filterDictText(dictOptions,value) ||'未分类'" :key="value" > |
|
<a-list :grid="{ gutter: 20,column:4}" :dataSource="processDataMap[value]"> |
|
<template slot="renderItem" slot-scope="item" > |
|
<a-card v-if="item.name=='预算计划采购流程'" style="margin-bottom: 1%" v-has="'applyHome:planAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='物资入库流程'" v-has="'applyHome:warehousingAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='物资出库流程'" v-has="'applyHome:deliberyAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='物资调拨流程'" v-has="'applyHome:allotAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='物资报废流程'" v-has="'applyHome:srcapAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='权限授权流程'" v-has="'applyHome:authAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='民爆采购流程'" style="margin-bottom: 1%" v-has="'industrial:planAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='民爆入库流程'" v-has="'industrial:warehousingAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='民爆出库流程'" v-has="'industrial:deliberyAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='民爆报废流程'" v-has="'industrial:srcapAdd'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
<a-card v-if="item.name=='民爆归还流程'" v-has="'industrial:restore'" hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px','width':'24%','display': 'inline-block','margin-right':'1%'}" :headStyle="{'border-radius':'12px'}"> |
|
<div slot="title"> |
|
<a-row style="text-align: center;"> |
|
<!-- <a-col span="12" :title="item.name">{{item.name}} </a-col>--> |
|
<!--<a-col span="12" style="text-align: center;">--> |
|
<a href="javascript:void (0)" style="color: white;font-size: 18px;font-weight: bolder;">{{item.name}}</a> |
|
<!-- <a href="javascript:void (0)" @click="chooseProcess(item)">{{item.name}}</a>--> |
|
<!--</a-col>--> |
|
</a-row> |
|
</div> |
|
<!-- <b>版本：</b>v.{{item.version}} |
|
<br/> |
|
<b>说明：</b>{{item.description}}--> |
|
</a-card> |
|
</template> |
|
</a-list> |
|
</a-collapse-panel> |
|
</a-collapse> |
|
</div> |
|
<!--流程表单--> |
|
<a-modal |
|
:destroyOnClose="false" |
|
:title="lcModa.title" |
|
:visible="lcModa.visible" |
|
switchFullscreen |
|
:footer="null" |
|
:maskClosable="false" |
|
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }" |
|
width="80%" |
|
@cancel="close" |
|
> |
|
<component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent" :hieg = "lcModa.hieg" |
|
:processData="lcModa.processData" :isNew = "lcModa.isNew" :pictureId="lcModa.pictureId" :procInstId="lcModa.procInstId" |
|
@afterSubmit="afterSub" @close="closeThis"> |
|
</component> |
|
</a-modal> |
|
</a-card> |
|
|
|
</template> |
|
|
|
<script> |
|
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin' |
|
import JEllipsis from '@/components/jeecg/JEllipsis' |
|
import JTreeSelect from '@/components/jeecg/JTreeSelect' |
|
import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil' |
|
import historicDetail from '@/views/activiti/historicDetail' |
|
import hasPermission, { filterGlobalPermission, filterNodePermission } from '../../utils/hasPermission' |
|
export default { |
|
name: "applyHome", |
|
mixins:[activitiMixin], |
|
components: { |
|
JEllipsis |
|
,JTreeSelect |
|
,historicDetail |
|
}, |
|
data () { |
|
return { |
|
description: '所有', |
|
dictOptions:[], |
|
disableSubmit: false, |
|
hasVaule:[], |
|
url: { |
|
getProcessDataList: "/activiti_process/listData", |
|
getFirstNode:'/actProcessIns/getFirstNode', |
|
applyBusiness:'/actBusiness/apply', |
|
getProcessNodeByDepart: '/activiti_process/getProcessNodeByDepart' |
|
}, |
|
// 查询条件 |
|
queryParam: { |
|
createTimeRange:[], |
|
keyWord:'', |
|
}, |
|
// 表头 |
|
labelCol: { |
|
xs: { span: 4 }, |
|
sm: { span: 4 }, |
|
}, |
|
wrapperCol: { |
|
xs: { span: 20 }, |
|
sm: { span: 20 }, |
|
}, |
|
processModalVisible: null, |
|
activeKeyAll: [], |
|
activeKey: [], |
|
processDataMap: {}, |
|
searchProcessKey: null, |
|
addApplyLoading: false, |
|
lcModa: { |
|
title:'', |
|
hieg:true, |
|
disabled:false, |
|
visible:false, |
|
formComponent : null, |
|
isNew : false, |
|
pictrueId:'', |
|
procInstId:'' |
|
}, |
|
colors:["#ced4fc", |
|
"#fad172", |
|
"#46cea8", |
|
"#b1d5e0", |
|
"#e4b8f1", |
|
"#fa8e8e", |
|
"#4bfceb","#fd7186","#f9d500","#7191e4","#8759ff","#fc7798","#00bf50","#b7d264"] |
|
} |
|
}, |
|
computed:{ |
|
}, |
|
mounted() { |
|
this.initDictConfig() |
|
this.getProcessList() |
|
}, |
|
methods: { |
|
|
|
initDictConfig() { |
|
//初始化字典 - 流程分类 |
|
initDictOptions('bpm_process_type').then((res) => { |
|
if (res.success) { |
|
this.dictOptions = res.result; |
|
} |
|
}); |
|
}, |
|
closeThis(){ |
|
this.lcModa.visible=false |
|
this.lcModa.disabled = false |
|
}, |
|
close(){ |
|
this.$confirm({ |
|
title: "关闭", |
|
content: `确定关闭当前页面？`, |
|
centered: true, |
|
onOk: () => { |
|
this.lcModa.visible=false |
|
this.lcModa.disabled = false |
|
}, |
|
}) |
|
}, |
|
filterDictText(dictOptions, text) { |
|
// console.log("-=-=",dictOptions,text); |
|
if (dictOptions instanceof Array) { |
|
for (let dictItem of dictOptions) { |
|
if (text === dictItem.value) { |
|
return dictItem.text |
|
} |
|
} |
|
} |
|
return text||text=='null'?'':text |
|
}, |
|
/*加载流程列表*/ |
|
getProcessList() { |
|
this.addApplyLoading = true; |
|
this.getAction(this.url.getProcessDataList,{status:1,roles:true}).then(res => { |
|
this.activeKeyAll = []; |
|
if (res.success) { |
|
var result = res.result||[]; |
|
if (result.length>0){ |
|
// console.log("====================",result); |
|
//14种颜色的循环 |
|
for (let i in result){ |
|
this.$set(result[i],'color',this.colors[i%14]) |
|
} |
|
let searchProcessKey = this.searchProcessKey; |
|
if (searchProcessKey){ //过滤条件 |
|
result = _.filter(result, function(o) { return o.name.indexOf(searchProcessKey)>-1; }); |
|
} |
|
this.processDataMap = _.groupBy(result,'categoryId'); |
|
// console.log("111111111111",this.categoryId) |
|
// console.log("===================",this.processDataMap,"=====================") |
|
|
|
// console.log("=======",this.processDataMap.wuzi) |
|
for (const categoryId in this.processDataMap) { |
|
this.activeKeyAll.push(categoryId) |
|
} |
|
this.activeKey = this.activeKeyAll; |
|
// console.log("=====================",this.activeKey) |
|
} |
|
this.processModalVisible = true; |
|
}else { |
|
this.$message.warning(res.message) |
|
} |
|
}).finally(()=>this.addApplyLoading = false); |
|
}, |
|
onSearchProcess(value) { |
|
this.searchProcessKey = value; |
|
this.getProcessList() |
|
}, |
|
/*验证流程表单是否配置人员*/ |
|
getNodeData(row,v,callback){ |
|
return new Promise((resolve, reject) => { |
|
let ss = false; |
|
let _this = this; |
|
_this.postFormAction(_this.url.getProcessNodeByDepart,{ |
|
id:v.id, |
|
departId:row |
|
}).then(res => { |
|
if (res.success) { |
|
// 转换null为"" |
|
// console.log("res.result",res.result); |
|
let arry=[]; |
|
for (let i = 0; i < res.result.length; i++) { |
|
if (i!=0&&i!=res.result.length-1){ |
|
arry.push(res.result[i]) |
|
} |
|
} |
|
_this.nodeList=arry; |
|
if (arry.length>0){ |
|
// console.log(_this.nodeList[0],"用户信息！") |
|
// if (!_this.nodeList[0].users[0]){ |
|
// _this.$message.warning(v.name+"审批人员未配置,请配置后在申请！！！"); |
|
// ss= true; |
|
// } |
|
} |
|
} |
|
resolve(callback(ss)); |
|
}); |
|
}); |
|
|
|
}, |
|
async chooseProcess(v) { |
|
// console.log("人员信息===",v); |
|
let userInfo = sessionStorage.getItem('USER_INFORMATION'); |
|
let res = JSON.parse(userInfo); |
|
// console.log("人员信息",res); |
|
let re = false; |
|
if(v.name != "预算计划采购流程" && v.name != "权限授权流程" && res.post != "系统管理员"){ |
|
await this.getNodeData(res.departIds,v,(result) => { |
|
// console.log("-===========",result); |
|
if(result){ |
|
re = true; |
|
} |
|
}); |
|
} |
|
if (!re){ |
|
if (!v.routeName) { |
|
this.$message.warning( |
|
"该流程信息未配置表单，请联系开发人员！" |
|
); |
|
return; |
|
} |
|
this.lcModa.formComponent = this.getFormComponent(v.routeName).component; |
|
this.lcModa.title = '发起流程：'+v.name; |
|
this.lcModa.isNew = true; |
|
this.lcModa.hieg = true; |
|
this.lcModa.pictureId=v.id; |
|
this.lcModa.procInstId=''; |
|
this.lcModa.processData = v; |
|
this.lcModa.visible = true; |
|
} |
|
console.log("发起",v) |
|
}, |
|
/*提交成功申请后*/ |
|
afterSub(formData){ |
|
this.lcModa.visible = false; |
|
this.$message.success("操作成功！请前往我的申请列表提交审批！") |
|
}, |
|
/*前往我的申请页面*/ |
|
handleToApplyList() { |
|
this.$router.push({path:'/activiti/applyList'}) |
|
} |
|
} |
|
} |
|
</script> |
|
<style scoped> |
|
@import '~@assets/less/common.less'; |
|
|
|
.forRadius { |
|
border-radius: 5px; |
|
} |
|
/deep/.ant-modal { |
|
overflow-y: hidden; |
|
} |
|
/deep/.ant-modal-content{ |
|
height: 100%; |
|
overflow-y: scroll; |
|
} |
|
/deep/.ant-modal-body{ |
|
height: 100%; |
|
/*overflow-y: scroll;*/ |
|
} |
|
/deep/.ant-modal{ |
|
top:45px |
|
} |
|
</style> |