<template>
|
<div>
|
<el-dialog
|
:title="`流程启动：` + projectInfo.projectName"
|
:visible.sync="show"
|
width="1050px"
|
:destroy-on-close="true"
|
:close-on-click-modal="false"
|
:before-close="handleClose">
|
<div>
|
<div style="display: flex; flex-direction: row; justify-content: center; align-items: center;font-size: 24px">
|
<div>当前流程：</div>
|
<div v-if="nowProcessDefId">{{selectProcessName}}<span v-if="nowProcessInsId" style="color: red">（运行中）</span></div>
|
<div v-else>未绑定流程</div>
|
</div>
|
</div>
|
<div style="margin-top: 10px">
|
<el-form :inline="true" :model="queryParams" size="small">
|
<el-form-item label="流程名称">
|
<el-input placeholder="流程名称搜索" clearable @clear="search" v-model="queryParams.name"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="margin-top: 0px">
|
<el-table
|
ref="myTable"
|
:data="processList"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="handleSelectionChange">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
:show-overflow-tooltip="true"
|
min-width="200"
|
label="流程名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="version"
|
label="流程版本"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="category"
|
label="流程类型"
|
>
|
</el-table-column>
|
<el-table-column label="项目类型" >
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_project_type"
|
:value="scope.row.projectType"
|
>
|
</dict-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="资金类型" >
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_funding_type"
|
:value="scope.row.fundType"
|
>
|
</dict-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="投资类别" >
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_investment_type"
|
:value="scope.row.investType"
|
>
|
</dict-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="重点分类" >
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_key_categories"
|
:value="scope.row.importanceType"
|
>
|
</dict-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="queryParams.currentPage"
|
:limit.sync="queryParams.pageSize"
|
:page-sizes="[8]"
|
@pagination="getList"
|
/>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="danger" v-loading="startLoading" @click="startProcess" :disabled="(nowProcessInsId !== '') || (selectProcessDefId === '')">启动流程</el-button>
|
<el-button type="primary" v-loading="setLoading" @click="changeProcess" :disabled="((nowProcessDefId === selectProcessDefId) && nowProcessInsId !== '') || selectProcessDefId === '' || nowProcessInsId === ''">流程变更</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {projectSetProcess, startProcess} from "@/api/projectProcess/projectProcess";
|
import {getProcessConfigInfoPage} from "@/api/projectProcess/processConfigInfo";
|
|
export default {
|
dicts: ['sys_project_type', 'sys_funding_type', 'sys_investment_type', 'sys_key_categories'],
|
name: "RunProcess",
|
props: {
|
show: {
|
required: true,
|
type: Boolean
|
},
|
projectInfo: {
|
required: true, // 项目id、名称
|
type: Object
|
},
|
nowProcessDefId: { // 当前项目绑定的定义id
|
required: true,
|
type: String
|
},
|
nowProcessInsId: { // 当前项目绑定的实例id
|
required: true,
|
type: String
|
},
|
projectType: {
|
required: true,
|
type: String
|
}
|
},
|
watch: {
|
// 监听回显值
|
projectInfo: {
|
handler(newVal, oldVal) {
|
console.log("传入值：", newVal, this.processList)
|
this.setSelect(this.nowProcessDefId)
|
},
|
deep: true
|
},
|
processList: {
|
handler(newVal, oldVal) {
|
this.setSelect(this.nowProcessDefId)
|
},
|
deep: true
|
}
|
},
|
data() {
|
return {
|
startLoading: false,
|
setLoading: false,
|
processList: [],
|
total:0,
|
queryParams: {
|
pageSize: 8,
|
currentPage: 1,
|
name: ""
|
},
|
selectProcessDefId: '', // 组件内部选中的流程id
|
selectProcessName: '', // 组件内部选中的流程id
|
}
|
},
|
created() {
|
this.getList()
|
console.log(this.nowProcessInsId, typeof this.nowProcessInsId, "wwwww")
|
},
|
methods: {
|
search() {
|
this.queryParams.currentPage = 1
|
this.getList()
|
},
|
getList() {
|
getProcessConfigInfoPage(this.queryParams).then(res => {
|
this.processList = res.data;
|
this.total = res.total
|
});
|
},
|
setSelect(value) {
|
console.log("调用值：", value)
|
this.processList.forEach((item,index) => {
|
console.log(item.id, value, item.id === value)
|
if(item.id === value){
|
this.selectProcessName = item.name
|
this.$nextTick(() => {
|
this.$refs.myTable.toggleRowSelection(item);
|
})
|
}
|
})
|
},
|
// 实现el-table单选
|
handleSelectionChange(val) {
|
console.log(val, "选中")
|
if (val.length > 1) {
|
this.$refs.myTable.clearSelection();
|
this.$refs.myTable.toggleRowSelection(val[val.length - 1]);
|
}
|
if(val.length != 0){
|
this.selectProcessDefId = val[val.length - 1].id;
|
console.log("选中id：", this.selectProcessDefId)
|
}
|
},
|
// 启动流程
|
startProcess() {
|
this.startLoading = true
|
const data = {
|
projectId: this.projectInfo.projectId,
|
processDefId: this.selectProcessDefId,
|
projectType: this.projectType
|
}
|
startProcess(data).then(res => {
|
this.$message.success(res.msg);
|
this.startLoading = false
|
this.handleClose()
|
})
|
},
|
// 变更流程
|
changeProcess() {
|
if (!this.selectProcessDefId) {
|
this.$message.error("选则一个流程后才能变更")
|
return
|
}
|
const data = {
|
projectId: this.projectInfo.projectId,
|
processDefId: this.selectProcessDefId,
|
projectType: this.projectType
|
}
|
this.setLoading = true
|
projectSetProcess(data).then(res => {
|
this.$message.success("变更成功")
|
this.setLoading = false
|
this.handleClose()
|
})
|
},
|
handleClose() {
|
this.selectProcessDefId = ""
|
this.selectProcessName = ""
|
this.$emit("close")
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/ .el-table__header-wrapper .el-checkbox{
|
display:none
|
}
|
</style>
|
