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.
325 lines
9.1 KiB
325 lines
9.1 KiB
<template>
|
|
<div class="process-dep-container">
|
|
<div class="head-container">
|
|
<div class="head-left">
|
|
<el-button size="mini" @click="handleDeloy">
|
|
<i class="iconfont icon-xinzeng" />
|
|
部署
|
|
</el-button>
|
|
<el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].suspensionState === 1)" @click="activateHandle(1)">
|
|
<i class="iconfont icon-jihuo" />
|
|
激活
|
|
</el-button>
|
|
<el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].suspensionState === 2)" @click="activateHandle(2)">
|
|
<i class="iconfont icon-guaqi" />
|
|
挂起
|
|
</el-button>
|
|
<el-button size="mini" :disabled="selectedItem.length===0" @click="downloadModel(selectedItem[0])">
|
|
<i class="iconfont icon-daochu" />
|
|
导出
|
|
</el-button>
|
|
</div>
|
|
<div class="head-right">
|
|
<el-select v-model="query.suspensionState" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="queryState">
|
|
<i slot="prefix" class="iconfont icon-zhuangtai" />
|
|
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="process-dep-main">
|
|
<ul class="process-list">
|
|
<li v-for="(item,index) in flowableList" :key="index" :class="isActive === index ? 'active-li': ''" @click="selectProcess(item,index)">
|
|
<p>{{ item.deployName }}</p>
|
|
<span :class="item.suspensionState === 1 ? 'process-on': 'process-off'" />
|
|
</li>
|
|
</ul>
|
|
<div v-if="isHasModel" class="process-info">
|
|
<div class="process-info-txt">
|
|
<div class="info-left">
|
|
<p>当前版本：
|
|
<el-select v-model="versionNew" style="width:70px;" @change="selectVersion">
|
|
<el-option
|
|
v-for="item in versionOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</p>
|
|
<p>部署时间：<span>{{ modelInfo.deploymentTime | parseTime }}</span></p>
|
|
</div>
|
|
<div class="info-right ">
|
|
<p>运行中：<span>{{ modelInfo.runCount }}</span></p>
|
|
<p>已完成：<span>{{ modelInfo.completeCount }}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="process-info-img">
|
|
<img src="~@/assets/images/system/process-img.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<eForm ref="mform" @refresh="getList" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchInitFlowAll, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml, FetchGenProcessDiagram } from '@/api/system/flowable'
|
|
import { downloadFile } from '@/utils/index'
|
|
import eForm from './module/form'
|
|
export default {
|
|
name: 'ProcessDeployment',
|
|
components: { eForm },
|
|
data() {
|
|
return {
|
|
flowableList: [],
|
|
query: {
|
|
suspensionState: null
|
|
},
|
|
isActive: -1,
|
|
isHasModel: false,
|
|
selectedItem: [],
|
|
modelInfo: {},
|
|
allVersionModel: [],
|
|
versionOptions: [],
|
|
versionNew: null,
|
|
exportVisible: false,
|
|
activateName: '',
|
|
enabledTypeOptions: [
|
|
{ key: null, display_name: '全部' },
|
|
{ key: 1, display_name: '启用' },
|
|
{ key: 2, display_name: '挂起' }
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList(suspensionState) {
|
|
this.selectedItem = []
|
|
this.isActive = -1
|
|
this.isHasModel = false
|
|
FetchInitFlowAll({ 'suspensionState': suspensionState }).then((res) => {
|
|
this.flowableList = res
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
queryState(val) {
|
|
this.getList(val)
|
|
},
|
|
selectProcess(item, index) {
|
|
this.selectedItem = []
|
|
this.selectedItem.push(item)
|
|
this.isActive = index
|
|
this.isHasModel = true
|
|
this.modelInfo = item
|
|
FetchAllByKey({ 'key': item.modelKey }).then(res => {
|
|
this.allVersionModel = res
|
|
this.versionOptions = res.map(item => {
|
|
const json = {}
|
|
json.value = item.version
|
|
json.label = item.version
|
|
return json
|
|
})
|
|
this.versionNew = item.version
|
|
FetchGenProcessDiagram({ 'processId': item.procdefId }).then((res) => {
|
|
console.log(res)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
selectVersion(val) {
|
|
this.allVersionModel.filter((item, index) => {
|
|
if (item.version === val) {
|
|
this.modelInfo = item
|
|
}
|
|
})
|
|
},
|
|
handleDeloy() {
|
|
this.$refs.mform.uploadVisible = true
|
|
if (this.isActive !== -1) {
|
|
this.$refs.mform.form.name = this.selectedItem[0].deployName
|
|
}
|
|
},
|
|
activateHandle(type) {
|
|
if (type === 1) {
|
|
this.activateName = '激活'
|
|
} else {
|
|
this.activateName = '挂起'
|
|
}
|
|
this.$confirm('此操作将' + this.activateName + '“' + this.selectedItem[0].modelName + '”' + '<span>你是否还要继续？</span>', '提示', {
|
|
confirmButtonText: '继续',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: true
|
|
}).then(() => {
|
|
const params = {
|
|
'procdefId': this.selectedItem[0].procdefId,
|
|
'type': type
|
|
}
|
|
FetchSuspendActivate(params).then(res => {
|
|
if (res === 'SUCCESS') {
|
|
this.getList()
|
|
}
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
downloadModel(data) {
|
|
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
|
|
confirmButtonText: '继续',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: true
|
|
}).then(() => {
|
|
const params = {
|
|
'deployId': data.deployId
|
|
}
|
|
const name = data.modelName
|
|
FetchLeadingOutModelXml(params).then(result => {
|
|
downloadFile(result, name, 'xml')
|
|
}).catch(() => {
|
|
this.$message.error('下载失败，请检查好网络后重新下载')
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
[data-theme=dark] .process-dep-main{
|
|
background-color: transparent;
|
|
border-top: 1px solid #113d72;
|
|
.process-list{
|
|
box-shadow: 5px 2px 10px 1px rgba(15,164,222,.16);
|
|
li{
|
|
&.active-li,
|
|
&:hover{
|
|
background: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
[data-theme=light] .process-dep-main{
|
|
background-color: #F5F5F5;
|
|
border: 1px solid #E6E8ED;
|
|
.process-list{
|
|
background-color: #fff;
|
|
box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
|
|
li{
|
|
color: #0C0E1E;
|
|
&.active-li,
|
|
&:hover{
|
|
background-color: #E8F2FF;
|
|
}
|
|
}
|
|
|
|
}
|
|
.process-info-txt{
|
|
color: #0C0E1E;
|
|
span{
|
|
color: #545B65;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-theme=light] .head-container{
|
|
margin: 20px 0 !important;
|
|
}
|
|
.process-dep-container{
|
|
min-height: calc(100vh - 300px);
|
|
}
|
|
.head-container{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.head-left{
|
|
width: 342px;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
::v-deep .el-button--mini{
|
|
padding: 7px;
|
|
}
|
|
}
|
|
.head-right{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.filter-item{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.process-dep-main{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
height: calc(100vh - 283px);
|
|
|
|
.process-list{
|
|
width: 342px;
|
|
li{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
p{
|
|
flex: 1;
|
|
}
|
|
span{
|
|
display: block;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
&.process-on{
|
|
background-color: #3FE246;
|
|
}
|
|
&.process-off{
|
|
background-color: #ED4A41;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.process-info{
|
|
flex: 1;
|
|
padding:10px 30px;
|
|
.process-info-txt{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
margin-bottom: 10px;
|
|
.info-left{
|
|
width: 50%;
|
|
}
|
|
.info-right{
|
|
width: 50%;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
.process-info-img{
|
|
height: calc(100vh - 374px);
|
|
& img{
|
|
display: block;
|
|
height: 100%;
|
|
border: 1px solid #E6E8ED;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|