|
|
|
@ -2,31 +2,25 @@ |
|
|
|
<div class="process-dep-container"> |
|
|
|
<div class="head-container"> |
|
|
|
<div class="head-left"> |
|
|
|
<el-button size="mini" @click="handleForm(0)"> |
|
|
|
<el-button size="mini" @click="handleDeloy"> |
|
|
|
<i class="iconfont icon-xinzeng" /> |
|
|
|
新增 |
|
|
|
部署 |
|
|
|
</el-button> |
|
|
|
<el-button size="mini" :disabled="selectedItem.length === 0" @click="handleForm(1,selectedItem)"> |
|
|
|
<i class="iconfont icon-bianji" /> |
|
|
|
编辑 |
|
|
|
</el-button> |
|
|
|
<el-button size="mini" @click="exportVisible=true"> |
|
|
|
<i class="iconfont icon-daochu" /> |
|
|
|
导出 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<div class="head-right" style="display:flex; justify-content: space-between;"> |
|
|
|
<div class="head-operation"> |
|
|
|
<el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].state === 1)" @click="activateHandle(1)"> |
|
|
|
<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].state === 0)" @click="activateHandle(0)"> |
|
|
|
<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> |
|
|
|
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px"> |
|
|
|
<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> |
|
|
|
@ -34,20 +28,29 @@ |
|
|
|
</div> |
|
|
|
<div class="process-dep-main"> |
|
|
|
<ul class="process-list"> |
|
|
|
<li v-for="(item,index) in jsonList" :key="index" :class="isActive === index ? 'active-li': ''" @click="selectProcess(item,index)"> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
<span :class="item.state ? 'process-on': 'process-off'" /> |
|
|
|
<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 class="process-info"> |
|
|
|
<div v-if="isHasModel" class="process-info"> |
|
|
|
<div class="process-info-txt"> |
|
|
|
<div class="info-left"> |
|
|
|
<p>当前版本：<span>1.0</span></p> |
|
|
|
<p>部署时间：<span>2022-10-01 10:00:05</span></p> |
|
|
|
<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>2</span></p> |
|
|
|
<p>已完成：<span>5</span></p> |
|
|
|
<p>运行中：<span>{{ modelInfo.runCount }}</span></p> |
|
|
|
<p>已完成：<span>{{ modelInfo.completeCount }}</span></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="process-info-img"> |
|
|
|
@ -55,95 +58,137 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<eForm ref="mform" /> |
|
|
|
<!-- 导出dialog --> |
|
|
|
<el-dialog class="tip-dialog" :visible.sync="exportVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="提示"> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<div class="tip-content"> |
|
|
|
<p class="tipMsg">此操作将导出所选数据</p> |
|
|
|
<span>你是否还要继续?</span> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="text" @click="exportVisible = false">取消</el-button> |
|
|
|
<el-button type="primary" @click="toExport(crud.selections)">继续</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<!-- 激活挂起dialog --> |
|
|
|
<el-dialog class="tip-dialog" :visible.sync="activateVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="提示"> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<div class="tip-content"> |
|
|
|
<p class="tipMsg">此操作将{{ activateName }} “ {{ selectedItem.length !== 0 ? selectedItem[0].name : '' }} ”</p> |
|
|
|
<span>你是否还要继续?</span> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="text" @click="activateVisible = false">取消</el-button> |
|
|
|
<el-button type="primary" @click="activateVisible = false">继续</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<eForm ref="mform" @refresh="getList" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import eForm from './module/form.vue' |
|
|
|
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 { |
|
|
|
jsonList: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: '流程A', |
|
|
|
state: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: '流程B', |
|
|
|
state: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: '流程C', |
|
|
|
state: 0 |
|
|
|
} |
|
|
|
], |
|
|
|
flowableList: [], |
|
|
|
query: { |
|
|
|
enabled: 'true' |
|
|
|
suspensionState: null |
|
|
|
}, |
|
|
|
isActive: -1, |
|
|
|
isHasModel: false, |
|
|
|
selectedItem: [], |
|
|
|
modelInfo: {}, |
|
|
|
allVersionModel: [], |
|
|
|
versionOptions: [], |
|
|
|
versionNew: null, |
|
|
|
exportVisible: false, |
|
|
|
activateVisible: false, |
|
|
|
activateName: '', |
|
|
|
enabledTypeOptions: [ |
|
|
|
{ key: 'true', display_name: '启用' }, |
|
|
|
{ key: 'false', display_name: '挂起' } |
|
|
|
{ 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) |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleForm(type) { |
|
|
|
selectVersion(val) { |
|
|
|
this.allVersionModel.filter((item, index) => { |
|
|
|
if (item.version === val) { |
|
|
|
this.modelInfo = item |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleDeloy() { |
|
|
|
this.$refs.mform.uploadVisible = true |
|
|
|
if (type === 0) { |
|
|
|
this.$refs.mform.title = '新增流程' |
|
|
|
} else { |
|
|
|
this.$refs.mform.title = '编辑流程' |
|
|
|
if (this.isActive !== -1) { |
|
|
|
this.$refs.mform.form.name = this.selectedItem[0].deployName |
|
|
|
} |
|
|
|
}, |
|
|
|
activateHandle(type) { |
|
|
|
this.activateVisible = true |
|
|
|
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(() => { |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -194,14 +239,21 @@ export default { |
|
|
|
} |
|
|
|
.head-container{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
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; |
|
|
|
margin-left: 30px; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
.filter-item{ |
|
|
|
margin-right: 0; |
|
|
|
|
