朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 77aced2fb17a8f5846c808a9cdcdb4b0eb024a79 1 个父辈 2d05bf73

新增流實例管理界面

内嵌 并排对比
正在显示 5 个修改的文件 包含 241 行增加 和 17 行删除
import http from './http.js'
let baseUrl = 'wlpt-custom-service-workflow/deployment'
let baseUrl = 'wlpt-custom-service-workflow'
export const deployment = params => { return http.get(`${baseUrl}/deployment`, params); };
export const deployment = params => { return http.get(`${baseUrl}/deployment/deployment`, params); };
export const del = params => { return http.post(`${baseUrl}/deployment/del`, params); };
export const instanceList = params => { return http.get(`${baseUrl}/process/instanceList`, params); };
... ...
... ... @@ -90,6 +90,8 @@ import configure from './views/airtransport/configure.vue'
import queryConfigure from './views/airtransport/queryConfigure.vue'
import transit from './views/transit/transit.vue'
import technological from './views/technological/technological.vue'
import example from './views/technological/example.vue'
import departure from './views/airtransport/departure.vue'
import declare from './views/airtransport/declare.vue'
... ... @@ -454,7 +456,10 @@ let routes = [
iconCls: 'el-icon-goods',
children: [
{path:'/technological',component:technological,name:'部署管理'},
{path:'/example',component:example,name:'部署实例管理'},
]
},
{
path: '/out',
... ...
<template>
<el-container>
<el-main>
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.processInstanceId " placeholder="实例ID" style="width: 200px" clearable>
<template slot="prepend">实例ID</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryinfo.processDefinitionKey" placeholder="实例关键字" style="width: 220px" clearable>
<template slot="prepend">实例关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getList">查询</el-button>
</el-col>
</el-row>
<el-row>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" style="margin-left: -700px" inline class="demo-table-expand">
<el-row>
<el-form-item label="变量数量：">
<span>{{ props.row.variableCount }}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="瞬时变量：">
<span>{{ JSON.stringify(props.row.transientVariables) }}</span>
</el-form-item>
</el-row>
</el-form>
</template>
</el-table-column>
<el-table-column
label="实例名称"
prop="processDefinitionName"
width="160">
</el-table-column>
<el-table-column
label="开始时间"
prop="startTime"
width="160">
</el-table-column>
<el-table-column
label="执行中"
prop="isActive">
</el-table-column>
<el-table-column
label="是否结束"
prop="isEnded">
</el-table-column>
<el-table-column
label="租户"
prop="tenantId">
</el-table-column>
<el-table-column
label="流程状态"
prop="suspensionState">
<template slot-scope="scope">
<span v-if="scope.row.suspensionState ==='1'">活跃</span>
<span v-if="scope.row.suspensionState ==='2'">中断</span>
</template>
</el-table-column>
<el-table-column
label="实例关键字"
prop="processDefinitionKey">
</el-table-column>
</el-table>
</el-row>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import {instanceList} from "../../api/technological";
export default {
name: "example",
data(){
return{
queryinfo: {
processInstanceId:'',
processDefinitionKey:'',
pageNum:1,
pageSize:10,
},
total:0,
tableData: [],
tableloading:false,
}
},
mounted() {
this.getList();
},
methods: {
// 分页
handleSizeChange(val) {
this.queryinfo.pageSize= val
this.getList()
},
handleCurrentChange(val) {
this.queryinfo.pageNum = val
this.getList()
},
getList() {
const _this = this
this.tableloading = true;
instanceList(this.queryinfo).then((response) => {
console.log(response);
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data;
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
}
}
</script>
<style scoped>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
... ...
... ... @@ -31,7 +31,8 @@
>
<el-table-column
prop="name"
label="名称">
label="名称"
width="160">
</el-table-column>
<el-table-column
prop="category"
... ... @@ -43,25 +44,29 @@
</el-table-column>
<el-table-column
prop="id"
label="id">
label="id"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="deploymentTime"
label="时间">
label="时间"
width="160">
</el-table-column>
<el-table-column
prop="filePath"
label="文件路径">
</el-table-column>
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label="操作"-->
<!-- width="150">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button type="success" size="small" @click="toEditDialog(scope.row)">编辑</el-button>-->
<!-- <el-button type="danger" size="small" @click="del(scope.$index,scope.row)">删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
fixed="right"
label="操作"
width="280">
<template slot-scope="scope">
<el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>
<el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>
<el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
... ... @@ -87,7 +92,7 @@
</template>
<script>
import {deployment} from "../../api/technological";
import {deployment, del} from "../../api/technological";
export default {
... ... @@ -141,7 +146,46 @@
})
},
//删除
remove(index,row){
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
del({id:row.id,cascade:false}).then((response) => {
let res = response.data;
this.$message.success(res.msg);
this.getList();
}).catch(error => {
this.$message.error(res.msg);
});
}).catch(() => {
});
},
removeDel(index,row){
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
del({id:row.id,cascade:true}).then((response) => {
let res = response.data;
this.$message.success(res.msg);
this.getList();
}).catch(error => {
this.$message.error(res.msg);
});
}).catch(() => {
});
},
sendForm(){
this.$router.push({path:'/example',query:{processDefinitionKey:this.queryinfo.key}});
}
}
}
</script>
... ...
{
"nmmsVer": "1.18"
"nmmsVer": "1.19"
}
... ...