添加流程发布

Author: fengli0208

src/App.vue

@@ -9,3 +9,11 @@
  name: 'app'
  }
 </script>
+
+<style>
+ .toolbar {
+ height: 50px;
+ line-height: 50px;
+ background-color: #ffffff;
+ }
+</style>

src/components/bpmn/VueBpmn.vue

@@ -130,6 +130,9 @@
  }
  },
  processSave(data){
+ let initData = this.initData;
+ data.procId = initData.key;
+ data.name = initData.name;
  this.$emit("processSave",data);
  },
  restart() {

src/components/element/ElementTable.vue

@@ -4,8 +4,17 @@
  <el-table-column v-for="(item,index) in columns" :key="index" :prop="item.key"
  :label="item.title" :formatter="item.formatter">
  <template slot-scope="scope">
- <div v-if="item.formatter" v-html="item.formatter(scope.row,item.key,scope.row[item.key],index)"></div>
- <div v-else>{{scope.row[item.key]}}</div>
+ <div v-if="item.operator">
+ <template v-for="(o,key) in item.operator">
+ <el-button :type="o.type" :key="key" @click="o.click(scope.row)"
+ size="small" v-if="!o.hidden || !o.hidden(scope.row)">{{o.name}}
+ </el-button>
+ </template>
+ </div>
+ <div v-else>
+ <span v-if="!item.formatter">{{scope.row[item.key]}}</span>
+ <span v-else v-html="item.formatter(scope.row,item.key,scope.row[item.key],index)"></span>
+ </div>
  </template>
  </el-table-column>
  </el-table>
@@ -24,7 +33,9 @@
  name: "ElementTable",
  data() {
  return {
- data: {},
+ data: {
+ total: 0
+ },
  page: 1
  }
  },
@@ -41,11 +52,20 @@
  },
  methods: {
  reload(page) {
+ if (!this.url) {
+ return;
+ }
  let that = this;
  this.page = page;
  this.get(this.url, {page: this.page, pageSize: this.pageSize}, res => {
  that.data = res.data;
  })
+ },
+ deploy(row) {
+ console.log(row)
+ },
+ open() {
+ console.log("d")
  }
  }
  }

src/libs/api.js

@@ -2,5 +2,8 @@ export default {
  // deployProcess: "flow/deploy" flowable
  deployProcess: "act/deploy", // activiti
  processList: "process/list",
- processBuffer: "process/buffer"
+ processBuffer: "process/buffer",
+ processRemove: "process/${id}/remove",
+ processDeploy: "process/${id}/deploy",
+ processInstQuery: "process/inst/list",
 }

src/router/router.js

@@ -63,18 +63,25 @@ export const appRouter = [{
 },
  {
  path: '/process',
- icon: 'el-icon-s-help',
+ icon: 'el-icon-s-finance',
  name: 'process',
  title: '流程管理',
  access: 0,
  component: Main,
  children: [{
  path: 'design',
- icon: 'el-icon-s-help',
+ icon: 'el-icon-s-ticket',
  name: 'design',
  title: '流程设计',
  component: () =>
  import ('../views/process/design')
+ },{
+ path: 'inst',
+ icon: 'el-icon-s-claim',
+ name: 'inst',
+ title: '流程实例',
+ component: () =>
+ import ('../views/process/inst')
  }]
  }
 ]

src/views/process/design.vue

@@ -3,11 +3,11 @@
  <div class="toolbar">
  <el-button type="primary" @click="openNewDialog">添加流程</el-button>
  </div>
- <element-table :url="url" :page-size="10" :columns="columns"></element-table>
+ <element-table :url="url" :page-size="10" :columns="columns" ref="elementTable"></element-table>
 
  <el-dialog title="流程图" :visible.sync="dialogVisible" width="1100px">
  <slot name="-" style="border: none;padding: 0px;margin: 0px;">
- <vue-bpmn style="overflow: hidden;height: 700px;" @processSave="processSave"></vue-bpmn>
+ <vue-bpmn style="overflow: hidden;height: 700px;" product="flowable" @processSave="processSave"></vue-bpmn>
  </slot>
  </el-dialog>
  </div>
@@ -30,15 +30,41 @@
  key: 'name',
  title: '流程名称'
  }, {
- key: 'ora',
+ key: 'status',
  title: '状态',
- formatter: (row, key, value, index) => {
- console.log(row)
- console.log(key)
- console.log(value)
- console.log(index)
- return '<button class="el-button" size="mini">dd</button>';
+ formatter: (row, key) => {
+ if (row[key] == 0) {
+ return "未发布";
+ }
+ return "已发布"
  }
+ }, {
+ key: 'ora',
+ title: '操作',
+ operator: [{
+ name: "发布",
+ type: "text",
+ click: (row) => {
+ this.put(this.Apis.processDeploy.replace("${id}", row.id), {}, res => {
+ console.log(res)
+ });
+ },
+ hidden: (row) => {
+ return row.status == 1;
+ }
+ }, {
+ name: "删除",
+ type: "text",
+ click: (row) => {
+ console.log(row);
+ this.delete(this.Apis.processRemove.replace("${id}", row.id), {}, res => {
+ console.log(res)
+ if (res.code == 200) {
+ this.$refs.elementTable.reload();
+ }
+ })
+ }
+ }]
  }]
  }
  },
@@ -53,19 +79,17 @@
  processSave(data) {
  let that = this;
  that.post(this.Apis.processBuffer, data, res => {
- console.log(res)
+ if (res.code == 200) {
+ that.$refs.elementTable.reload();
+ }
  })
+ },
+ deploy() {
+
  }
  }
  }
 </script>
 
 <style scoped>
- .toolbar {
- height: 50px;
- line-height: 50px;
- background-color: #ffffff;
- }
-
-
 </style>

src/views/process/inst.vue

@@ -0,0 +1,40 @@
+<template>
+ <div>
+ <div class="toolbar">
+ <el-button type="primary" @click="openNewDialog">请假申请</el-button>
+ </div>
+ <element-table :url="url" :columns="columns" :page-size="10"></element-table>
+
+ <el-dialog title="请假申请" :visible.sync="dialogVisible">
+ <el-container>
+ dd
+ </el-container>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+ import ElementTable from "../../components/element/ElementTable";
+ export default {
+ name: "inst",
+ data(){
+ return {
+ dialogVisible:false,
+ url:this.Apis.processInstQuery,
+ columns:[]
+ }
+ },
+ components:{
+ ElementTable
+ },
+ methods:{
+ openNewDialog(){
+ this.dialogVisible = true;
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>