<template>
<Layout style="padding:24px 0 0 0;height:100%;">
<Form inline>
<FormItem label="候选用户" :label-width="80">
<Input clearable v-model="" placeholder="查询候选用户流程" />
</FormItem>
<FormItem label="候选组" :label-width="80">
<Input clearable v-model="" placeholder="查询候选组流程" />
</FormItem>
<FormItem label="流程名称" :label-width="80">
<Input clearable v-model="" placeholder="搜索流程名称" />
</FormItem>
<FormItem label="">
<Button type="primary" icon="ios-search" shape="circle" title="查询" @click="list"></Button>
</FormItem>
</Form>
<Content ref="content" style="padding:0px;background:#fff;height:100%">
<Table :loading="loading" :columns="tableColumns" :data="" :height="tableHeight" border>
<template slot-scope="{ row, index }" slot="action">
<el-dropdown @command="action($event, row)">
<Button type="primary" size="small">
操作
<Icon type="ios-arrow-down"></Icon>
</Button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="diagram">流程图</el-dropdown-item>
<el-dropdown-item command="start">发起流程</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<template slot="footer">
<Page style="margin-left:10px;" :total="" :current="" :page-size="15" @on-change="changePage"></Page>
</template>
</Table>
</Content>
<!-- 流程图对话框 -->
<Modal title="流程图" v-model="diagramModal" width="800px" footer-hide>
<div id="bpmn-viewer" style="width:100%;height:400px;"></div>
</Modal>
<!-- 流程表单对话框 -->
<Modal :title="`${}表单`" v-model="formModal" width="600px" footer-hide>
<process-form :formData="formData" @startProcess="startProcess"></process-form>
</Modal>
</Layout>
</template>
<script language="JavaScript">
import BpmnViewer from 'bpmn-js';
import processForm from './process-form';
export default {
components: {
processForm
},
data() {
return {
tableHeight: 100, // 自适应表格高度
loading: false, // 加载中
diagramModal: false, // 流程显示
formModal: false, // 流程表单显示
tableColumns: [
{
type: 'selection',
width: 80
},
{
title: '流程ID',
key: 'id',
width: 400,
resizable: true
},
{
title: '流程KEY',
key: 'key',
width: 300,
resizable: true
},
{
title: '流程名称',
key: 'name',
width: 'auto',
minWidth: 300,
resizable: true
},
{
title: '流程版本',
key: 'version',
width: 150,
resizable: true
},
{
title: '版本标签',
key: 'versionTag',
width: 150,
resizable: true
},
{
title: '操作',
slot: 'action',
fixed: 'right',
width: 150
}
], // 表格列
// 分页请求
pageRequest: {
page: 1,
rows: 15,
sort: 'id:asc',
condition: {
name: '', // 流程名称
startableUser: '', // 根据用户ID查询可以发起的流程
}
},
// 分页查询结果
pageData: {
page: 1,
total: 2,
content: [] // 表格数据
},
bpmnViewer: null, // bpmn viewer
formData: {}, // 流程表单数据
};
},
computed: {},
watch: {},
created: function() {},
mounted: function() {
this.$nextTick(() => {
this.tableHeight = this.$refs.content.$el.clientHeight;
this.list();
});
},
methods: {
// 获取列表
list: function() {
this.$request.post(
'/admin/sys/workflow/definition/listProcess',
this.pageRequest,
res => {
this.pageData = res.data || this.pageData;
},
false,
false
);
},
action: function(name, row) {
if (name == 'diagram') {
this.showDiagram(row);
} else if (name == 'start') {
// 构造表单
this.getFormData(row);
}
},
showDiagram: function(row) {
this.$request.get(`/admin/sys/workflow/definition/bpmnXml/${}`, {}, res => {
this.diagramModal = true;
this.bpmnViewer && this.bpmnViewer.destroy();
this.bpmnViewer = new BpmnViewer({container:"#bpmn-viewer"});
let result = this.bpmnViewer.importXML(res.data).then(() => {
const bpmnCanvas = this.bpmnViewer.get('canvas');
bpmnCanvas.zoom('fit-viewport');
// 可以根据已办过的活动ID，标记流程跟踪
// ("StartEvent_1", "highlight");
});
}, false, true, true);
},
// 获取流程设计表单数据
getFormData: function(row) {
this.$request.get(`/admin/sys/workflow/task/getStartFormData/${}`, {}, res => {
this.formData = res.data || {};
this.formModal = true;
}, false, true, true);
},
// 发起流程
startProcess: function(data) {
this.$request.post(`/admin/sys/workflow/task/startProcess/${}`, data.obj, res => {
this.formModal = false;
}, true, true, true);
},
// 分页
changePage: function(page) {
this.pageRequest.page = page;
this.list();
}
}
};
</script>
<style lang="scss">
.bjs-powered-by {
display: none;
}
.highlight .djs-visual > :nth-child(1) {
stroke: red ;
}
</style>