feat: 流程设计器显示优化
tony
parent
15fd39fe98
commit
bc42ac6005
|
|
@ -41,7 +41,7 @@
|
|||
<div ref="canvas" class="canvas" />
|
||||
</el-main>
|
||||
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
|
||||
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" @dataType="dataType" />
|
||||
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" />
|
||||
</el-aside>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
|
@ -56,7 +56,7 @@ import panel from './PropertyPanel'
|
|||
import BpmData from './BpmData'
|
||||
import getInitStr from './flowable/init'
|
||||
// 引入flowable的节点文件
|
||||
import flowableModdle from './flowable/flowable.json'
|
||||
import FlowableModule from './flowable/flowable.json'
|
||||
export default {
|
||||
name: 'WorkflowBpmnModeler',
|
||||
components: {
|
||||
|
|
@ -115,8 +115,8 @@ export default {
|
|||
translate: ['value', customTranslate]
|
||||
}
|
||||
],
|
||||
moddleExtensions: {
|
||||
flowable: flowableModdle
|
||||
moduleExtensions: {
|
||||
flowable: FlowableModule
|
||||
}
|
||||
})
|
||||
// 新增流程定义
|
||||
|
|
@ -356,17 +356,13 @@ export default {
|
|||
return false
|
||||
},
|
||||
downloadFile(filename, data, type) {
|
||||
var a = document.createElement('a')
|
||||
var url = window.URL.createObjectURL(new Blob([data], { type: type }))
|
||||
const a = document.createElement('a');
|
||||
const url = window.URL.createObjectURL(new Blob([data], {type: type}));
|
||||
a.href = url
|
||||
a.download = filename
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
},
|
||||
/** 获取数据类型 */
|
||||
dataType(data){
|
||||
this.$emit('dataType', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ export default {
|
|||
// Labels
|
||||
'Activate the global connect tool': '激活全局连接工具',
|
||||
'Append {type}': '添加 {type}',
|
||||
'Append Task': '添加任务',
|
||||
'Append Gateway': '添加网关',
|
||||
'Append EndEvent': '添加结束事件',
|
||||
"Append Intermediate/Boundary Event": '添加开始事件',
|
||||
'Add Lane above': '在上面添加道',
|
||||
'Divide into two Lanes': '分割成两个道',
|
||||
'Divide into three Lanes': '分割成三个道',
|
||||
|
|
|
|||
|
|
@ -10,39 +10,39 @@
|
|||
:is-view="false"
|
||||
@save="save"
|
||||
@showXML="showXML"
|
||||
@dataType="dataType"
|
||||
/>
|
||||
<!--在线查看xml-->
|
||||
<el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="60%" append-to-body>
|
||||
<div>
|
||||
<pre v-highlight>
|
||||
<code class="xml">
|
||||
{{xmlContent}}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="70%" class="showAll_dialog">
|
||||
<!-- 设置对话框内容高度 -->
|
||||
<el-scrollbar>
|
||||
<pre v-highlight>
|
||||
<code class="xml">
|
||||
{{xmlData}}
|
||||
</code>
|
||||
</pre>
|
||||
</el-scrollbar>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
|
||||
import bpmnModeler from '@/components/Process/index'
|
||||
import vkbeautify from 'vkbeautify'
|
||||
import Hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/atom-one-dark.css'
|
||||
import vkBeautify from 'vkbeautify'
|
||||
import highlight from 'highlight.js'
|
||||
import 'highlight.js/styles/atelier-savanna-dark.css'
|
||||
|
||||
export default {
|
||||
name: "Model",
|
||||
components: {
|
||||
bpmnModeler,
|
||||
vkbeautify
|
||||
vkBeautify
|
||||
},
|
||||
// 自定义指令
|
||||
directives: {
|
||||
highlight:(el) => {
|
||||
let blocks = el.querySelectorAll('pre code');
|
||||
blocks.forEach((block) => {
|
||||
Hljs.highlightBlock(block)
|
||||
highlight.highlightBlock(block)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
modeler:"",
|
||||
xmlOpen: false,
|
||||
xmlTitle: '',
|
||||
xmlContent: '',
|
||||
xmlData: '',
|
||||
users: [],
|
||||
groups: [],
|
||||
categorys: [],
|
||||
|
|
@ -122,28 +122,59 @@ export default {
|
|||
showXML(data){
|
||||
this.xmlTitle = 'xml查看';
|
||||
this.xmlOpen = true;
|
||||
this.xmlContent = vkbeautify.xml(data);
|
||||
this.xmlData = vkBeautify.xml(data);
|
||||
},
|
||||
/** 获取数据类型 */
|
||||
dataType(data){
|
||||
this.users = [];
|
||||
this.groups = [];
|
||||
if (data) {
|
||||
if (data.dataType === 'dynamic') {
|
||||
if (data.userType === 'assignee') {
|
||||
this.users = [{nickName: "${INITIATOR}", userId: "${INITIATOR}"},
|
||||
{nickName: "#{approval}", userId: "#{approval}"}
|
||||
]
|
||||
} else if (data.userType === 'candidateUsers') {
|
||||
this.users = [ {nickName: "#{approval}", userId: "#{approval}"}]
|
||||
} else {
|
||||
this.groups = [{roleName: "#{approval}", roleId: "#{approval}"}]
|
||||
}
|
||||
} else {
|
||||
this.getDataList()
|
||||
}
|
||||
}
|
||||
}
|
||||
// /** 获取数据类型 */
|
||||
// dataType(data){
|
||||
// this.users = [];
|
||||
// this.groups = [];
|
||||
// if (data) {
|
||||
// if (data.dataType === 'dynamic') {
|
||||
// if (data.userType === 'assignee') {
|
||||
// this.users = [{nickName: "${INITIATOR}", userId: "${INITIATOR}"},
|
||||
// {nickName: "#{approval}", userId: "#{approval}"}
|
||||
// ]
|
||||
// } else if (data.userType === 'candidateUsers') {
|
||||
// this.users = [ {nickName: "#{approval}", userId: "#{approval}"}]
|
||||
// } else {
|
||||
// this.groups = [{roleName: "#{approval}", roleId: "#{approval}"}]
|
||||
// }
|
||||
// } else {
|
||||
// this.getDataList()
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content-box{
|
||||
line-height: 10px;
|
||||
}
|
||||
// 修改对话框高度
|
||||
.showAll_dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
::v-deep .el-dialog {
|
||||
margin: 0 auto !important;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
.el-dialog__body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 54px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
// 下边设置字体，我的需求是黑底白字
|
||||
color: #ffffff;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -232,24 +232,6 @@ export default {
|
|||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||
this.userList = response.rows;
|
||||
this.total = response.total;
|
||||
}
|
||||
);
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.deptId = data.id;
|
||||
this.getList();
|
||||
},
|
||||
/** xml 文件 */
|
||||
getModelDetail(deployId) {
|
||||
// 发送请求，获取xml
|
||||
|
|
@ -360,8 +342,13 @@ export default {
|
|||
this.checkType = "multiple";
|
||||
} else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
|
||||
this.checkSendRole = true;
|
||||
} else if (data.type === 'multiInstance') { // 会签?
|
||||
this.checkSendUser = true;
|
||||
} else if (data.type === 'multiInstance') { // 会签
|
||||
listUser().then(response => {
|
||||
this.taskForm.values = {
|
||||
"userList": response.rows
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -427,24 +414,6 @@ export default {
|
|||
this.variables = variables;
|
||||
}
|
||||
},
|
||||
/** 申请流程表单数据提交 */
|
||||
submitForm(data) {
|
||||
const that = this
|
||||
if (data) {
|
||||
const variables = data.valData;
|
||||
const formData = data.formData;
|
||||
formData.disabled = true;
|
||||
formData.formBtns = false;
|
||||
if (that.taskForm.procDefId) {
|
||||
variables.variables = formData;
|
||||
// 启动流程并将表单数据加入流程变量
|
||||
definitionStart(that.taskForm.procDefId, JSON.stringify(variables)).then(res => {
|
||||
that.$modal.msgSuccess(res.msg);
|
||||
that.goBack();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 驳回任务 */
|
||||
handleReject() {
|
||||
this.rejectOpen = true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue