246 lines
8.2 KiB
246 lines
8.2 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]"> |
|
<a-list-item slot="renderItem" slot-scope="item" > |
|
<a-card hoverable @click="chooseProcess(item)" class="forRadius" :style="{'background-color':item.color,'border-radius':'12px'}" :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-list-item> |
|
</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' |
|
export default { |
|
name: "applyHome", |
|
mixins:[activitiMixin], |
|
components: { |
|
JEllipsis |
|
,JTreeSelect |
|
,historicDetail |
|
}, |
|
data () { |
|
return { |
|
description: '所有', |
|
dictOptions:[], |
|
disableSubmit: false, |
|
url: { |
|
getProcessDataList: "/activiti_process/listData", |
|
getFirstNode:'/actProcessIns/getFirstNode', |
|
applyBusiness:'/actBusiness/apply', |
|
}, |
|
// 查询条件 |
|
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) { |
|
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() |
|
}, |
|
chooseProcess(v) { |
|
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> |