🎉 升级适配NutFlow工作流设计器

dev
smallchill 4 years ago
parent 915cf06bec
commit f651dbd065
  1. BIN
      public/cdn/nutflow/wf-design-base/fonts/bpmn.08b5f281.eot
  2. BIN
      public/cdn/nutflow/wf-design-base/fonts/bpmn.3c4c9f45.woff2
  3. BIN
      public/cdn/nutflow/wf-design-base/fonts/bpmn.acbc6cbd.woff
  4. BIN
      public/cdn/nutflow/wf-design-base/fonts/bpmn.f922519e.ttf
  5. BIN
      public/cdn/nutflow/wf-design-base/fonts/codicon.22349029.ttf
  6. BIN
      public/cdn/nutflow/wf-design-base/fonts/fontawesome-webfont.674f50d2.eot
  7. BIN
      public/cdn/nutflow/wf-design-base/fonts/fontawesome-webfont.af7ae505.woff2
  8. BIN
      public/cdn/nutflow/wf-design-base/fonts/fontawesome-webfont.b06871f2.ttf
  9. BIN
      public/cdn/nutflow/wf-design-base/fonts/fontawesome-webfont.fee66e71.woff
  10. 224
      public/cdn/nutflow/wf-design-base/img/bpmn.1381b44e.svg
  11. 2671
      public/cdn/nutflow/wf-design-base/img/fontawesome-webfont.912ec66d.svg
  12. 25
      public/cdn/nutflow/wf-design-base/index.umd.min.js
  13. 1
      public/index.html
  14. 24
      src/api/flow/flow.js
  15. 123
      src/components/flow-design/main.vue
  16. 2
      src/config/website.js
  17. 4
      src/main.js
  18. 44
      src/views/flow/manager.vue
  19. 712
      src/views/flow/model.vue
  20. 46
      src/views/work/claim.vue
  21. 41
      src/views/work/done.vue
  22. 5
      src/views/work/process/leave/detail.vue
  23. 15
      src/views/work/process/leave/form.vue
  24. 5
      src/views/work/process/leave/handle.vue
  25. 41
      src/views/work/send.vue
  26. 39
      src/views/work/start.vue
  27. 46
      src/views/work/todo.vue

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 130 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 434 KiB

File diff suppressed because one or more lines are too long

@ -109,6 +109,7 @@
<script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/element-ui/2.15.1/index.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/avue/2.8.25/avue.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/nutflow/wf-design-base/index.umd.min.js" charset="utf-8"></script>
</body>
</html>

@ -97,3 +97,27 @@ export const deleteProcessInstance = (params) => {
params
})
}
export const submitModel = (data) => {
return request({
url: '/api/blade-flow/model/submit',
method: 'post',
data
})
}
export const detail = (params) => {
return request({
url: '/api/blade-flow/model/detail',
method: 'get',
params
})
}
export const modelView = (params) => {
return request({
url: '/api/blade-flow/process/model-view',
method: 'get',
params
})
}

@ -0,0 +1,123 @@
<template>
<div>
<el-dialog v-if="isDialog"
:visible.sync="visible"
append-to-body
destroy-on-close
title="流程图展示"
width="70%"
custom-class="flow-design-dialog">
<wf-design-base ref="bpmn"
style="height: 60vh;"
:options="option"></wf-design-base>
</el-dialog>
<div v-else>
<wf-design-base v-if="visible"
ref="bpmn"
style="height: 60vh;"
:options="option"></wf-design-base>
</div>
</div>
</template>
<script>
import {modelView} from '@/api/flow/flow'
export default {
name: 'flowDesign',
props: {
isDialog: {
type: Boolean,
default: false
},
isDisplay: {
type: Boolean,
default: false
},
processInstanceId: String,
processDefinitionId: String,
},
data() {
return {
visible: false,
option: {
mode: 'view'
}
}
},
watch: {
isDisplay: {
handler(val) {
this.visible = val
},
immediate: true
},
visible: {
handler(val) {
this.$emit('update:is-display', val)
}
},
processInstanceId: {
handler(val) {
if (!val) return
this.getDetail({processInstanceId: this.processInstanceId})
},
immediate: true
},
processDefinitionId: {
handler(val) {
if (!val) return
this.getDetail({processDefinitionId: this.processDefinitionId})
},
immediate: true
}
},
methods: {
getDetail(params) {
modelView(params).then(res => {
const data = res.data.data
const {xml, flow} = data
this.$set(this.option, 'xml', xml)
if (flow) {
const flows = []
flow.forEach(f => {
let {endTime} = f
const ff = {
id: f.historyActivityId,
class: (!endTime && f.historyActivityType !== 'candidate') ? 'nodePrimary' : ''
}
if (f.historyActivityType === 'sequenceFlow') ff.class = 'lineWarn'
else if (!ff.class && f.historyActivityType !== 'candidate') ff.class = 'nodeSuccess'
const index = flows.findIndex(fl => fl.id === f.historyActivityId)
if (index !== -1) flows.splice(index, 1, ff)
else flows.push(ff)
})
this.$set(this.option, 'flows', flows)
}
})
}
}
}
</script>
<style lang="scss">
.flow-design-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
.el-dialog__body {
flex: 1;
overflow: auto;
}
}
</style>

@ -42,8 +42,6 @@ export default {
},
// 第三方系统授权地址
authUrl: 'http://localhost/blade-auth/oauth/render',
// 流程设计器地址
flowDesignUrl: 'http://localhost:9999',
// 报表设计器地址(cloud端口为8108,boot端口为80)
reportUrl: 'http://localhost:8108/ureport',
}

@ -19,6 +19,7 @@ import './styles/common.scss';
import basicBlock from './components/basic-block/main';
import basicContainer from './components/basic-container/main';
import thirdRegister from './components/third-register/main';
import flowDesign from './components/flow-design/main';
import avueUeditor from 'avue-plugin-ueditor';
import website from '@/config/website';
import crudCommon from '@/mixins/crud';
@ -44,11 +45,14 @@ Vue.component('basicContainer', basicContainer);
Vue.component('basicBlock', basicBlock);
Vue.component('thirdRegister', thirdRegister);
Vue.component('avueUeditor', avueUeditor);
Vue.component('flowDesign', flowDesign);
Vue.component('tenantPackage', tenantPackage);
// 加载相关url地址
Object.keys(urls).forEach(key => {
Vue.prototype[key] = urls[key];
});
// 加载NutFlow
Vue.use(window.WfDesignBase);
// 加载website
Vue.prototype.website = website;
// 动态加载阿里云字体库

@ -23,23 +23,20 @@
<template slot-scope="scope" slot="menu">
<el-button type="text"
size="small"
icon="el-icon-refresh"
v-if="permission.flow_manager_state"
plain
class="none-border"
@click.stop="handleState(scope.row,scope.index)">变更状态
</el-button>
<el-button type="text"
size="small"
icon="el-icon-search"
v-if="permission.flow_manager_image"
plain
class="none-border"
@click.stop="handleImage(scope.row,scope.index)">流程图
</el-button>
<el-button type="text"
size="small"
icon="el-icon-delete"
v-if="permission.flow_manager_remove"
plain
class="none-border"
@click.stop="handleSlotDelete(scope.row,scope.index)">删除
</el-button>
</template>
@ -60,27 +57,7 @@
<el-tag>{{row.categoryName}}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程图"
append-to-body
:visible.sync="flowBox"
:fullscreen="true">
<iframe
:src=flowUrl
width="100%"
height="700"
title="流程图"
frameBorder="no"
border="0"
marginWidth="0"
marginHeight="0"
scrolling="no"
allowTransparency="yes">
</iframe>
<span slot="footer"
class="dialog-footer">
<el-button @click="flowBox = false"> </el-button>
</span>
</el-dialog>
<flow-design is-dialog :is-display.sync="flowBox" :process-definition-id="processDefinitionId"></flow-design>
<el-dialog title="流程变更"
append-to-body
:visible.sync="stateBox"
@ -128,8 +105,8 @@
currentPage: 1,
total: 0
},
processDefinitionId: '',
flowBox: false,
flowUrl: '',
stateBox: false,
flowState: '',
stateOptions: [{
@ -153,7 +130,7 @@
viewBtn: false,
delBtn: false,
dialogWidth: 900,
menuWidth: 150,
menuWidth: 250,
dialogClickModal: false,
column: [
{
@ -329,7 +306,7 @@
})
},
handleImage(row) {
this.flowUrl = `/api/blade-flow/process/resource-view?processDefinitionId=${row.id}`;
this.processDefinitionId = row.id;
this.flowBox = true;
},
currentChange(currentPage) {
@ -359,10 +336,3 @@
}
};
</script>
<style>
.none-border {
border: 0;
background-color: transparent !important;
}
</style>

@ -15,388 +15,468 @@
@on-load="onLoad">
<template slot="menuLeft">
<el-button type="primary"
size="small"
size="mini"
icon="el-icon-circle-plus"
v-if="permission.flow_model_create"
plain
@click="handleCreate">
</el-button>
<el-button type="danger"
size="small"
size="mini"
icon="el-icon-delete"
v-if="permission.flow_model_delete"
plain
@click="handleDelete">
</el-button>
</template>
<template slot-scope="scope" slot="menu">
<template slot-scope="scope"
slot="menu">
<el-button type="text"
size="small"
size="mini"
icon="el-icon-setting"
v-if="permission.flow_model_update"
plain
class="none-border"
@click.stop="handleUpdate(scope.row,scope.index)">配置
</el-button>
<el-button type="text"
size="small"
size="mini"
icon="el-icon-upload2"
v-if="permission.flow_model_deploy"
plain
class="none-border"
@click.stop="handleDeploy(scope.row,scope.index)">部署
</el-button>
<el-button type="text"
size="small"
v-if="permission.flow_model_download"
plain
class="none-border"
@click.stop="handleDownload(scope.row,scope.index)">下载
</el-button>
<el-button type="text"
size="small"
size="mini"
icon="el-icon-delete"
v-if="permission.flow_model_delete"
plain
class="none-border"
@click.stop="handleSlotDelete(scope.row,scope.index)">删除
</el-button>
</template>
<template slot-scope="{row}"
slot="version">
<el-tag>v{{row.version}}</el-tag>
<el-tag>v{{ row.version }}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程配置"
append-to-body
destroy-on-close
:visible.sync="flowBox"
:fullscreen="true">
<iframe
:src=flowUrl
width="100%"
height="700"
title="流程设计器"
frameBorder="no"
border="0"
marginWidth="0"
marginHeight="0"
scrolling="no"
allowTransparency="yes">
</iframe>
:close-on-press-escape="false"
:fullscreen="true"
:before-close="handleNutflowClose"
custom-class="wf-dialog">
<wf-design-base v-if="nutflowOption.step === 1"
class="animated fadeIn"
style="height: calc(100vh - 108px);"
ref="wf-design"
:options="nutflowOption.step1"></wf-design-base>
<wf-design-base v-if="nutflowOption.step === 2"
class="animated fadeIn"
style="height: calc(100vh - 108px);"
ref="wf-design-view"
:options="nutflowOption.step2"></wf-design-base>
<span slot="footer"
class="dialog-footer">
<el-button @click="flowBox = false"> </el-button>
<el-button type="primary" @click="handleRefresh"> </el-button>
class="avue-dialog__footer">
<el-button size="small"
@click="handleNutflowClose(() => {}, true)"> </el-button>
<el-button v-if="nutflowOption.step === 1"
size="small"
type="success"
@click="handleStep(1)"> </el-button>
<el-button v-if="nutflowOption.step === 2"
size="small"
type="success"
@click="handleStep(-1)"> </el-button>
<el-button v-if="nutflowOption.step === 2"
size="small"
type="primary"
@click="handleSubmitModel"> </el-button>
</span>
</el-dialog>
<el-dialog title="流程部署"
append-to-body
:visible.sync="deployBox"
width="20%">
<avue-form ref="form" :option="optionDeploy" v-model="form" @submit="handleSubmit"/>
<avue-form ref="form"
:option="optionDeploy"
v-model="form"
@submit="handleSubmit"/>
<span slot="footer"
class="dialog-footer">
<el-button @click="deployBox = false"> </el-button>
<el-button type="primary" @click="handleDoDeploy" :loading="deployLoading"> </el-button>
<el-button type="primary"
@click="handleDoDeploy"
:loading="deployLoading"> </el-button>
</span>
</el-dialog>
</basic-container>
</template>
<script>
import {mapGetters} from "vuex";
import website from '@/config/website';
import {modelList, removeModel, deployModel} from "@/api/flow/flow";
import {flowCategory} from "@/util/flow";
import {mapGetters} from "vuex";
import {modelList, removeModel, deployModel, submitModel, detail} from "@/api/flow/flow";
import {flowCategory} from "@/util/flow";
export default {
data() {
return {
form: {},
optionDeploy: {
menuBtn: false,
column: [
{
label: "流程类型",
type: "select",
dicUrl: "/api/blade-system/dict/dictionary?code=flow",
props: {
label: "dictValue",
value: "dictKey"
},
dataType: "number",
slot: true,
prop: "categoryValue",
search: true,
span: 24,
rules: [{
required: true,
message: "请选择流程类型",
trigger: "blur"
}]
},
{
label: "流程模式",
prop: "flowMode",
type: "radio",
dicData: [
{
label: "通用流程",
value: 1
},
{
label: "定制流程",
value: 2
}
],
value: 1,
span: 24,
rules: [
{
required: true,
message: '请选择流程模式',
trigger: 'blur'
}
],
export default {
data() {
return {
form: {},
optionDeploy: {
menuBtn: false,
column: [
{
label: "流程类型",
type: "select",
dicUrl: "/api/blade-system/dict/dictionary?code=flow",
props: {
label: "dictValue",
value: "dictKey"
},
{
label: "所属租户",
prop: "tenantId",
type: "tree",
multiple: true,
dicUrl: "/api/blade-system/tenant/select",
props: {
label: "tenantName",
value: "tenantId"
dataType: "number",
slot: true,
prop: "categoryValue",
search: true,
span: 24,
rules: [{
required: true,
message: "请选择流程类型",
trigger: "blur"
}]
},
{
label: "流程模式",
prop: "flowMode",
type: "radio",
dicData: [
{
label: "通用流程",
value: 1
},
display: false,
span: 24,
rules: [
{
required: true,
message: '请选择所属租户',
trigger: 'blur'
}
],
},
],
},
selectionId: '',
selectionList: [],
query: {},
loading: true,
deployLoading: false,
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
deployBox: false,
flowBox: false,
flowUrl: '',
option: {
height: 'auto',
calcHeight: 30,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
selection: true,
editBtn: false,
addBtn: false,
viewBtn: false,
delBtn: false,
dialogWidth: 900,
menuWidth: 150,
dialogClickModal: false,
column: [
{
label: '模型主键',
prop: 'id',
},
{
label: '模型标识',
prop: 'modelKey',
search: true,
width: 150,
},
{
label: '模型名称',
prop: 'name',
search: true,
width: 150,
},
{
label: '流程版本',
prop: 'version',
slot: true,
width: 80,
},
{
label: '创建时间',
prop: 'created',
width: 165,
},
{
label: '更新时间',
prop: 'lastUpdated',
width: 165,
{
label: "定制流程",
value: 2
}
],
value: 1,
span: 24,
rules: [
{
required: true,
message: '请选择流程模式',
trigger: 'blur'
}
],
},
{
label: "所属租户",
prop: "tenantId",
type: "tree",
multiple: true,
dicUrl: "/api/blade-system/tenant/select",
props: {
label: "tenantName",
value: "tenantId"
},
]
display: false,
span: 24,
rules: [
{
required: true,
message: '请选择所属租户',
trigger: 'blur'
}
],
},
],
},
selectionId: '',
selectionList: [],
query: {},
loading: true,
deployLoading: false,
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
deployBox: false,
flowBox: false,
option: {
height: 'auto',
calcHeight: 30,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
selection: true,
editBtn: false,
addBtn: false,
viewBtn: false,
delBtn: false,
dialogWidth: 900,
menuWidth: 200,
dialogClickModal: false,
size: 'mini',
searchSize: 'mini',
column: [
{
label: '模型主键',
prop: 'id',
},
{
label: '模型标识',
prop: 'modelKey',
search: true,
overHidden: true
},
{
label: '模型名称',
prop: 'name',
search: true,
overHidden: true
},
{
label: '流程版本',
prop: 'version',
slot: true,
overHidden: true
},
{
label: '创建时间',
prop: 'created',
overHidden: true
},
{
label: '更新时间',
prop: 'lastUpdated',
overHidden: true
},
]
},
data: [],
nutflowOption: {
process: {},
step: 1,
step1: {
toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
},
data: []
};
},
watch: {
'form.flowMode'() {
this.$refs.form.option.column.filter(item => {
if (item.prop === "tenantId") {
item.display = this.form.flowMode === 2;
}
});
step2: {
mode: 'view',
simulation: true,
minimap: true,
}
}
},
computed: {
...mapGetters(["permission"]),
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(",");
};
},
watch: {
'form.flowMode'() {
this.$refs.form.option.column.filter(item => {
if (item.prop === "tenantId") {
item.display = this.form.flowMode === 2;
}
});
}
},
computed: {
...mapGetters(["permission"]),
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(",");
}
},
methods: {
handleSubmitModel() {
const registry = this.$refs['wf-design-view'].getElementRegistry().getAll()
const {businessObject} = registry[0]
const {id, name, documentation} = businessObject
const description = (documentation && documentation.length > 0) ? documentation[0].text : null
const params = {
...this.nutflowOption.process,
modelKey: id,
name,
description,
modelEditorXml: this.nutflowOption.process.xml
}
submitModel(params).then(() => {
this.$message.success("操作成功")
this.handleNutflowClose()
this.onLoad(this.page, this.query)
})
},
methods: {
handleSubmit(form, done) {
this.deployLoading = true;
deployModel({
modelId: this.selectionId,
category: flowCategory(form.categoryValue),
tenantIds: form.tenantId.join(",")
}).then(res => {
const data = res.data;
if (data.success) {
this.$message({
type: "success",
message: data.msg
});
done();
this.$refs.form.resetForm();
this.deployBox = false;
this.deployLoading = false;
} else {
done();
this.deployLoading = false;
this.$message({
type: "warn",
message: data.msg
});
}
handleStep(step) {
if (step === 1) { //
this.$refs['wf-design'].getData('xml').then(data => {
this.$set(this.nutflowOption.step1, 'xml', data)
this.$set(this.nutflowOption.step2, 'xml', data)
this.$set(this.nutflowOption.process, 'xml', data)
this.$set(this.nutflowOption, 'step', 2)
})
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
} else this.$set(this.nutflowOption, 'step', 1)
},
handleNutflowClose(done, flag) {
const initOption = {
process: {},
step: 1,
step1: {
toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
},
step2: {
mode: 'view',
simulation: true,
minimap: true,
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
if (done || flag) {
this.$confirm('确定要关闭吗?关闭未保存的修改都会丢失。', '警告', {
type: 'warning'
}).then(() => {
this.$set(this, 'nutflowOption', initOption)
if (typeof done == 'function') done()
this.flowBox = false
}).catch(() => {
})
.then(() => {
return removeModel(this.ids);
})
.then(() => {
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
this.onLoad(this.page);
} else {
this.$set(this, 'nutflowOption', initOption)
this.flowBox = false
}
},
handleSubmit(form, done) {
this.deployLoading = true;
deployModel({
modelId: this.selectionId,
category: flowCategory(form.categoryValue),
tenantIds: form.tenantId.join(",")
}).then(res => {
const data = res.data;
if (data.success) {
this.$message({
type: "success",
message: data.msg
});
},
handleCreate() {
this.flowUrl = `${website.flowDesignUrl}/index.html`;
this.flowBox = true;
},
handleUpdate(row) {
this.flowUrl = `${website.flowDesignUrl}/index.html#/editor/${row.id}`;
done();
this.$refs.form.resetForm();
this.deployBox = false;
this.deployLoading = false;
} else {
done();
this.deployLoading = false;
this.$message({
type: "warn",
message: data.msg
});
}
})
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return removeModel(this.ids);
})
.then(() => {
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
this.onLoad(this.page);
});
},
handleCreate() {
this.flowBox = true;
},
handleUpdate(row) {
detail({id: row.id}).then(res => {
const data = res.data.data
const {modelEditorXml} = data
this.$set(this.nutflowOption.step1, 'xml', modelEditorXml)
this.$set(this.nutflowOption, 'process', data)
this.flowBox = true;
},
handleDeploy(row) {
this.deployBox = true;
this.selectionId = row.id;
},
handleDoDeploy() {
this.$refs.form.submit();
},
handleDownload(row) {
window.open(`${website.flowDesignUrl}/app/rest/models/${row.id}/bpmn20`);
},
handleSlotDelete(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
},
handleDeploy(row) {
this.deployBox = true;
this.selectionId = row.id;
},
handleDoDeploy() {
this.$refs.form.submit();
},
handleSlotDelete(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return removeModel(row.id);
})
.then(() => {
return removeModel(row.id);
})
.then(() => {
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
this.onLoad(this.page);
.then(() => {
this.$message({
type: "success",
message: "操作成功!"
});
},
handleRefresh() {
this.flowBox = false;
this.onLoad(this.page);
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
this.loading = true;
modelList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
this.$refs.crud.toggleSelection();
this.onLoad(this.page);
});
}
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
this.loading = true;
modelList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
}
};
}
};
</script>
<style>
.none-border {
border: 0;
background-color: transparent !important;
<style lang="scss">
.wf-dialog {
.el-dialog__body {
padding: 5px;
}
.avue-dialog__footer {
text-align: center;
}
}
</style>

@ -15,24 +15,21 @@
<template slot-scope="scope" slot="menu">
<el-button type="text"
size="small"
icon="el-icon-download"
v-if="permission.work_claim_sign"
plain
class="none-border"
@click.stop="handleClaim(scope.row)">签收
</el-button>
<el-button type="text"
size="small"
icon="el-icon-info"
v-if="permission.work_claim_detail"
plain
class="none-border"
@click.stop="handleDetail(scope.row)">详情
</el-button>
<el-button type="text"
size="small"
icon="el-icon-search"
v-if="permission.work_claim_follow"
plain
class="none-border"
@click.stop="handleImage(scope.row,scope.index)">跟踪
@click.stop="handleImage(scope.row,scope.index)">流程图
</el-button>
</template>
<template slot-scope="{row}"
@ -40,27 +37,7 @@
<el-tag>v{{row.processDefinitionVersion}}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程图"
append-to-body
:visible.sync="flowBox"
:fullscreen="true">
<iframe
:src=flowUrl
width="100%"
height="700"
title="流程图"
frameBorder="no"
border="0"
marginWidth="0"
marginHeight="0"
scrolling="no"
allowTransparency="yes">
</iframe>
<span slot="footer"
class="dialog-footer">
<el-button @click="flowBox = false"> </el-button>
</span>
</el-dialog>
<flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
</basic-container>
</template>
@ -82,8 +59,8 @@
currentPage: 1,
total: 0
},
processInstanceId: '',
flowBox: false,
flowUrl: '',
workBox: false,
option: {
height: 'auto',
@ -100,7 +77,7 @@
viewBtn: false,
delBtn: false,
dialogWidth: 900,
menuWidth: 150,
menuWidth: 200,
dialogClickModal: false,
column: [
{
@ -193,7 +170,7 @@
this.$router.push({path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`});
},
handleImage(row) {
this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
this.processInstanceId = row.processInstanceId;
this.flowBox = true;
},
currentChange(currentPage){
@ -222,10 +199,3 @@
}
};
</script>
<style>
.none-border {
border: 0;
background-color: transparent !important;
}
</style>

@ -16,17 +16,15 @@
<template slot-scope="scope" slot="menu">
<el-button type="text"
size="small"
icon="el-icon-info"
v-if="permission.work_done_detail"
plain
class="none-border"
@click.stop="handleDetail(scope.row)">详情
</el-button>
<el-button type="text"
size="small"
icon="el-icon-search"
v-if="permission.work_done_follow"
plain
class="none-border"
@click.stop="handleImage(scope.row,scope.index)">跟踪
@click.stop="handleImage(scope.row,scope.index)">流程图
</el-button>
</template>
<template slot-scope="{row}"
@ -34,27 +32,7 @@
<el-tag>v{{row.processDefinitionVersion}}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程图"
append-to-body
:visible.sync="flowBox"
:fullscreen="true">
<iframe
:src=flowUrl
width="100%"
height="700"
title="流程图"
frameBorder="no"
border="0"
marginWidth="0"
marginHeight="0"
scrolling="no"
allowTransparency="yes">
</iframe>
<span slot="footer"
class="dialog-footer">
<el-button @click="flowBox = false"> </el-button>
</span>
</el-dialog>
<flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
</basic-container>
</template>
@ -76,8 +54,8 @@
currentPage: 1,
total: 0
},
processInstanceId: '',
flowBox: false,
flowUrl: '',
workBox: false,
option: {
height: 'auto',
@ -169,7 +147,7 @@
this.$router.push({path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`});
},
handleImage(row) {
this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
this.processInstanceId = row.processInstanceId;
this.flowBox = true;
},
currentChange(currentPage){
@ -198,10 +176,3 @@
}
};
</script>
<style>
.none-border {
border: 0;
background-color: transparent !important;
}
</style>

@ -50,8 +50,8 @@
<div slot="header">
<span>流程跟踪</span>
</div>
<el-row type="flex" class="row-bg">
<img :src="src" alt="design">
<el-row class="row-bg">
<flow-design :is-display="true" :process-instance-id="processInstanceId"></flow-design>
</el-row>
</el-card>
</el-form>
@ -85,7 +85,6 @@
init() {
this.processInstanceId = this.$route.params.processInstanceId;
this.businessId = this.$route.params.businessId;
this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}&t=${new Date().getTime()}`;
historyFlowList(this.processInstanceId).then(res => {
const data = res.data;
if (data.success) {

@ -1,7 +1,12 @@
<template>
<basic-container>
<avue-form :option="option" v-model="form" @submit="handleSubmit"/>
</basic-container>
<div>
<basic-container>
<avue-form :option="option" v-model="form" @submit="handleSubmit"/>
</basic-container>
<basic-container>
<flow-design :is-display="true" :process-definition-id="processDefinitionId"></flow-design>
</basic-container>
</div>
</template>
<script>
@ -10,6 +15,7 @@
export default {
data() {
return {
processDefinitionId: '',
form: {},
option: {
group: [
@ -81,6 +87,9 @@
}
}
},
created() {
this.processDefinitionId = this.$route.params.processDefinitionId;
},
methods: {
handleSubmit() {
const params = {

@ -55,8 +55,8 @@
<div slot="header">
<span>流程跟踪</span>
</div>
<el-row type="flex" class="row-bg">
<img :src="src" alt="design">
<el-row class="row-bg">
<flow-design :is-display="true" :process-instance-id="processInstanceId"></flow-design>
</el-row>
</el-card>
</el-form>
@ -104,7 +104,6 @@
this.taskId = this.$route.params.taskId;
this.processInstanceId = this.$route.params.processInstanceId;
this.businessId = this.$route.params.businessId;
this.src = `/api/blade-flow/process/diagram-view?processInstanceId=${this.$route.params.processInstanceId}&t=${new Date().getTime()}`;
historyFlowList(this.processInstanceId).then(res => {
const data = res.data;
if (data.success) {

@ -16,17 +16,15 @@
<template slot-scope="scope" slot="menu">
<el-button type="text"
size="small"
icon="el-icon-info"
v-if="permission.work_send_detail"
plain
class="none-border"
@click.stop="handleDetail(scope.row)">详情
</el-button>
<el-button type="text"
size="small"
icon="el-icon-search"
v-if="permission.work_send_follow"
plain
class="none-border"
@click.stop="handleImage(scope.row,scope.index)">跟踪
@click.stop="handleImage(scope.row,scope.index)">流程图
</el-button>
</template>
<template slot-scope="{row}"
@ -38,27 +36,7 @@
<el-tag>{{row.processIsFinished==='finished' ? '已完成' : '未完成'}}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程图"
append-to-body
:visible.sync="flowBox"
:fullscreen="true">
<iframe
:src=flowUrl
width="100%"
height="700"
title="流程图"
frameBorder="no"
border="0"
marginWidth="0"
marginHeight="0"
scrolling="no"
allowTransparency="yes">
</iframe>
<span slot="footer"
class="dialog-footer">
<el-button @click="flowBox = false"> </el-button>
</span>
</el-dialog>
<flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
</basic-container>
</template>
@ -80,8 +58,8 @@
currentPage: 1,
total: 0
},
processInstanceId: '',
flowBox: false,
flowUrl: '',
workBox: false,
option: {
height: 'auto',
@ -179,7 +157,7 @@
this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
},
handleImage(row) {
this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
this.processInstanceId = row.processInstanceId;
this.flowBox = true;
},
currentChange(currentPage){
@ -208,10 +186,3 @@
}
};
</script>
<style>
.none-border {
border: 0;
background-color: transparent !important;
}
</style>

@ -22,16 +22,14 @@
<template slot-scope="scope" slot="menu">
<el-button type="text"
size="small"
icon="el-icon-video-play"
v-if="permission.work_start_flow"
plain
class="none-border"
@click.stop="handleStart(scope.row)">发起
</el-button>
<el-button type="text"
size="small"
icon="el-icon-search"
v-if="permission.work_start_image"
plain
class="none-border"
@click.stop="handleImage(scope.row,scope.index)">流程图
</el-button>
</template>
@ -52,27 +50,7 @@
<el-tag>{{row.categoryName}}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程图"
append-to-body
:visible.sync="flowBox"
:fullscreen="true">
<iframe
:src=flowUrl
width="100%"
height="700"
title="流程图"
frameBorder="no"
border="0"
marginWidth="0"
marginHeight="0"
scrolling="no"
allowTransparency="yes">
</iframe>
<span slot="footer"
class="dialog-footer">
<el-button @click="flowBox = false"> </el-button>
</span>
</el-dialog>
<flow-design is-dialog :is-display.sync="flowBox" :process-definition-id="processDefinitionId"></flow-design>
</basic-container>
</template>
@ -95,8 +73,8 @@
currentPage: 1,
total: 0
},
processDefinitionId: '',
flowBox: false,
flowUrl: '',
workBox: false,
option: {
height: 'auto',
@ -204,7 +182,7 @@
this.$router.push({path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/form/${row.id}`});
},
handleImage(row) {
this.flowUrl = `/api/blade-flow/process/resource-view?processDefinitionId=${row.id}`;
this.processDefinitionId = row.id;
this.flowBox = true;
},
currentChange(currentPage) {
@ -234,10 +212,3 @@
}
};
</script>
<style>
.none-border {
border: 0;
background-color: transparent !important;
}
</style>

@ -15,24 +15,21 @@
<template slot-scope="scope" slot="menu">
<el-button type="text"
size="small"
icon="el-icon-s-check"
v-if="permission.work_todo_handle"
plain
class="none-border"
@click.stop="handleWork(scope.row)">处理
</el-button>
<el-button type="text"
size="small"
icon="el-icon-info"
v-if="permission.work_todo_detail"
plain
class="none-border"
@click.stop="handleDetail(scope.row)">详情
</el-button>
<el-button type="text"
size="small"
icon="el-icon-search"
v-if="permission.work_todo_follow"
plain
class="none-border"
@click.stop="handleImage(scope.row,scope.index)">跟踪
@click.stop="handleImage(scope.row,scope.index)">流程图
</el-button>
</template>
<template slot-scope="{row}"
@ -40,27 +37,7 @@
<el-tag>v{{row.processDefinitionVersion}}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程图"
append-to-body
:visible.sync="flowBox"
:fullscreen="true">
<iframe
:src=flowUrl
width="100%"
height="700"
title="流程图"
frameBorder="no"
border="0"
marginWidth="0"
marginHeight="0"
scrolling="no"
allowTransparency="yes">
</iframe>
<span slot="footer"
class="dialog-footer">
<el-button @click="flowBox = false"> </el-button>
</span>
</el-dialog>
<flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
</basic-container>
</template>
@ -82,8 +59,8 @@
currentPage: 1,
total: 0
},
processInstanceId: '',
flowBox: false,
flowUrl: '',
workBox: false,
option: {
height: 'auto',
@ -100,7 +77,7 @@
viewBtn: false,
delBtn: false,
dialogWidth: 900,
menuWidth: 150,
menuWidth: 200,
dialogClickModal: false,
column: [
{
@ -179,7 +156,7 @@
this.$router.push({ path: `/work/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}` });
},
handleImage(row) {
this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}`;
this.processInstanceId = row.processInstanceId;
this.flowBox = true;
},
currentChange(currentPage){
@ -208,10 +185,3 @@
}
};
</script>
<style>
.none-border {
border: 0;
background-color: transparent !important;
}
</style>

Loading…
Cancel
Save