作者 小范

新增流實例管理界面

1 import http from './http.js' 1 import http from './http.js'
2 -let baseUrl = 'wlpt-custom-service-workflow/deployment' 2 +let baseUrl = 'wlpt-custom-service-workflow'
3 3
4 4
5 -export const deployment = params => { return http.get(`${baseUrl}/deployment`, params); }; 5 +export const deployment = params => { return http.get(`${baseUrl}/deployment/deployment`, params); };
  6 +export const del = params => { return http.post(`${baseUrl}/deployment/del`, params); };
  7 +
  8 +export const instanceList = params => { return http.get(`${baseUrl}/process/instanceList`, params); };
  9 +
@@ -90,6 +90,8 @@ import configure from './views/airtransport/configure.vue' @@ -90,6 +90,8 @@ import configure from './views/airtransport/configure.vue'
90 import queryConfigure from './views/airtransport/queryConfigure.vue' 90 import queryConfigure from './views/airtransport/queryConfigure.vue'
91 import transit from './views/transit/transit.vue' 91 import transit from './views/transit/transit.vue'
92 import technological from './views/technological/technological.vue' 92 import technological from './views/technological/technological.vue'
  93 +import example from './views/technological/example.vue'
  94 +
93 95
94 import departure from './views/airtransport/departure.vue' 96 import departure from './views/airtransport/departure.vue'
95 import declare from './views/airtransport/declare.vue' 97 import declare from './views/airtransport/declare.vue'
@@ -454,7 +456,10 @@ let routes = [ @@ -454,7 +456,10 @@ let routes = [
454 iconCls: 'el-icon-goods', 456 iconCls: 'el-icon-goods',
455 children: [ 457 children: [
456 {path:'/technological',component:technological,name:'部署管理'}, 458 {path:'/technological',component:technological,name:'部署管理'},
  459 + {path:'/example',component:example,name:'部署实例管理'},
  460 +
457 ] 461 ]
  462 +
458 }, 463 },
459 { 464 {
460 path: '/out', 465 path: '/out',
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <!--检索条件-->
  5 + <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
  6 + <el-col :span="6">
  7 + <el-input v-model="queryinfo.processInstanceId " placeholder="实例ID" style="width: 200px" clearable>
  8 + <template slot="prepend">实例ID</template>
  9 + </el-input>
  10 + </el-col>
  11 + <el-col :span="7">
  12 + <el-input v-model="queryinfo.processDefinitionKey" placeholder="实例关键字" style="width: 220px" clearable>
  13 + <template slot="prepend">实例关键字</template>
  14 + </el-input>
  15 + </el-col>
  16 + <el-col :span="8">
  17 + <el-button type="primary" v-on:click="getList">查询</el-button>
  18 + </el-col>
  19 + </el-row>
  20 + <el-row>
  21 + <el-table
  22 + v-loading="tableloading"
  23 + :data="tableData"
  24 + style="width: 100%"
  25 + :default-sort = "{prop: 'date', order: 'descending'}"
  26 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
  27 + <el-table-column type="expand">
  28 + <template slot-scope="props">
  29 + <el-form label-position="left" style="margin-left: -700px" inline class="demo-table-expand">
  30 + <el-row>
  31 + <el-form-item label="变量数量:">
  32 + <span>{{ props.row.variableCount }}</span>
  33 + </el-form-item>
  34 + </el-row>
  35 + <el-row>
  36 + <el-form-item label="瞬时变量:">
  37 + <span>{{ JSON.stringify(props.row.transientVariables) }}</span>
  38 + </el-form-item>
  39 + </el-row>
  40 + </el-form>
  41 + </template>
  42 + </el-table-column>
  43 + <el-table-column
  44 + label="实例名称"
  45 + prop="processDefinitionName"
  46 + width="160">
  47 + </el-table-column>
  48 + <el-table-column
  49 + label="开始时间"
  50 + prop="startTime"
  51 + width="160">
  52 + </el-table-column>
  53 + <el-table-column
  54 + label="执行中"
  55 + prop="isActive">
  56 + </el-table-column>
  57 + <el-table-column
  58 + label="是否结束"
  59 + prop="isEnded">
  60 + </el-table-column>
  61 + <el-table-column
  62 + label="租户"
  63 + prop="tenantId">
  64 + </el-table-column>
  65 + <el-table-column
  66 + label="流程状态"
  67 + prop="suspensionState">
  68 + <template slot-scope="scope">
  69 + <span v-if="scope.row.suspensionState ==='1'">活跃</span>
  70 + <span v-if="scope.row.suspensionState ==='2'">中断</span>
  71 + </template>
  72 + </el-table-column>
  73 + <el-table-column
  74 + label="实例关键字"
  75 + prop="processDefinitionKey">
  76 + </el-table-column>
  77 + </el-table>
  78 + </el-row>
  79 + <!--分页模块-->
  80 + <el-row style="float: right;margin-top: 20px">
  81 + <el-col>
  82 + <div class="block">
  83 + <el-pagination
  84 + @size-change="handleSizeChange"
  85 + @current-change="handleCurrentChange"
  86 + :current-page="queryinfo.pageNum"
  87 + :page-sizes="[10, 20, 30, 40]"
  88 + :page-size="queryinfo.pageSize"
  89 + layout="total, sizes, prev, pager, next, jumper"
  90 + :total="total">
  91 + </el-pagination>
  92 + </div>
  93 + </el-col>
  94 + </el-row>
  95 + </el-main>
  96 + </el-container>
  97 +</template>
  98 +
  99 +<script>
  100 + import {instanceList} from "../../api/technological";
  101 +
  102 + export default {
  103 + name: "example",
  104 + data(){
  105 + return{
  106 + queryinfo: {
  107 + processInstanceId:'',
  108 + processDefinitionKey:'',
  109 + pageNum:1,
  110 + pageSize:10,
  111 + },
  112 + total:0,
  113 + tableData: [],
  114 + tableloading:false,
  115 + }
  116 + },
  117 + mounted() {
  118 + this.getList();
  119 + },
  120 + methods: {
  121 +// 分页
  122 + handleSizeChange(val) {
  123 + this.queryinfo.pageSize= val
  124 + this.getList()
  125 + },
  126 + handleCurrentChange(val) {
  127 + this.queryinfo.pageNum = val
  128 + this.getList()
  129 + },
  130 + getList() {
  131 + const _this = this
  132 + this.tableloading = true;
  133 + instanceList(this.queryinfo).then((response) => {
  134 + console.log(response);
  135 + const res = response.data
  136 + if (res.code != '200') {
  137 + return _this.$message.error('获取消息收发记录,失败!')
  138 + }
  139 + // 获取列表数据
  140 + _this.tableData = res.data;
  141 + // 获取列表的总记录数
  142 +
  143 + _this.total = res.total
  144 + this.tableloading = false;
  145 + _this.$message.success('获取消息收发记录,成功!')
  146 + }).catch(error => {
  147 +
  148 + // 关闭加载
  149 + _this.$message.error(error.toString())
  150 + this.tableloading = false;
  151 +
  152 + })
  153 + },
  154 + }
  155 + }
  156 +</script>
  157 +
  158 +<style scoped>
  159 + .demo-table-expand {
  160 + font-size: 0;
  161 + }
  162 + .demo-table-expand label {
  163 + width: 90px;
  164 + color: #99a9bf;
  165 + }
  166 + .demo-table-expand .el-form-item {
  167 + margin-right: 0;
  168 + margin-bottom: 0;
  169 + width: 50%;
  170 + }
  171 +</style>
@@ -31,7 +31,8 @@ @@ -31,7 +31,8 @@
31 > 31 >
32 <el-table-column 32 <el-table-column
33 prop="name" 33 prop="name"
34 - label="名称"> 34 + label="名称"
  35 + width="160">
35 </el-table-column> 36 </el-table-column>
36 <el-table-column 37 <el-table-column
37 prop="category" 38 prop="category"
@@ -43,25 +44,29 @@ @@ -43,25 +44,29 @@
43 </el-table-column> 44 </el-table-column>
44 <el-table-column 45 <el-table-column
45 prop="id" 46 prop="id"
46 - label="id"> 47 + label="id"
  48 + width="160"
  49 + show-overflow-tooltip>
47 </el-table-column> 50 </el-table-column>
48 <el-table-column 51 <el-table-column
49 prop="deploymentTime" 52 prop="deploymentTime"
50 - label="时间"> 53 + label="时间"
  54 + width="160">
51 </el-table-column> 55 </el-table-column>
52 <el-table-column 56 <el-table-column
53 prop="filePath" 57 prop="filePath"
54 label="文件路径"> 58 label="文件路径">
55 </el-table-column> 59 </el-table-column>
56 -<!-- <el-table-column-->  
57 -<!-- fixed="right"-->  
58 -<!-- label="操作"-->  
59 -<!-- width="150">-->  
60 -<!-- <template slot-scope="scope">-->  
61 -<!-- <el-button type="success" size="small" @click="toEditDialog(scope.row)">编辑</el-button>-->  
62 -<!-- <el-button type="danger" size="small" @click="del(scope.$index,scope.row)">删除</el-button>-->  
63 -<!-- </template>-->  
64 -<!-- </el-table-column>--> 60 + <el-table-column
  61 + fixed="right"
  62 + label="操作"
  63 + width="280">
  64 + <template slot-scope="scope">
  65 + <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>
  66 + <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>
  67 + <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>
  68 + </template>
  69 + </el-table-column>
65 </el-table> 70 </el-table>
66 </template> 71 </template>
67 </el-row> 72 </el-row>
@@ -87,7 +92,7 @@ @@ -87,7 +92,7 @@
87 </template> 92 </template>
88 93
89 <script> 94 <script>
90 - import {deployment} from "../../api/technological"; 95 + import {deployment, del} from "../../api/technological";
91 96
92 97
93 export default { 98 export default {
@@ -141,7 +146,46 @@ @@ -141,7 +146,46 @@
141 146
142 }) 147 })
143 }, 148 },
144 - 149 + //删除
  150 + remove(index,row){
  151 + // 弹框询问是否删除?
  152 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  153 + confirmButtonText: '确定删除',
  154 + cancelButtonText: '取消',
  155 + type: 'warning'
  156 + }
  157 + ).then(() => {
  158 + del({id:row.id,cascade:false}).then((response) => {
  159 + let res = response.data;
  160 + this.$message.success(res.msg);
  161 + this.getList();
  162 + }).catch(error => {
  163 + this.$message.error(res.msg);
  164 + });
  165 + }).catch(() => {
  166 + });
  167 + },
  168 + removeDel(index,row){
  169 + // 弹框询问是否删除?
  170 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  171 + confirmButtonText: '确定删除',
  172 + cancelButtonText: '取消',
  173 + type: 'warning'
  174 + }
  175 + ).then(() => {
  176 + del({id:row.id,cascade:true}).then((response) => {
  177 + let res = response.data;
  178 + this.$message.success(res.msg);
  179 + this.getList();
  180 + }).catch(error => {
  181 + this.$message.error(res.msg);
  182 + });
  183 + }).catch(() => {
  184 + });
  185 + },
  186 + sendForm(){
  187 + this.$router.push({path:'/example',query:{processDefinitionKey:this.queryinfo.key}});
  188 + }
145 } 189 }
146 } 190 }
147 </script> 191 </script>
1 { 1 {
2 - "nmmsVer": "1.18" 2 + "nmmsVer": "1.19"
3 } 3 }