mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-24 05:46:03 +08:00
优化前段代码
This commit is contained in:
java110
parent
8b5e064612
commit
ca2237a7a7
15176
public/bpmnjs/app.js
15176
public/bpmnjs/app.js
File diff suppressed because one or more lines are too long
@ -5,22 +5,32 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>bpmn-js流程图</title>
|
<title>bpmn-js流程图</title>
|
||||||
<vc:create path="frame/commonTop" location="head"></vc:create>
|
<vc:create path="frame/commonTop" location="head"></vc:create>
|
||||||
|
|
||||||
<link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css" />
|
<link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css" />
|
||||||
<link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css" />
|
<link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css" />
|
||||||
<link rel="stylesheet" href="vendor/bpmn-js-properties-panel/assets/bpmn-js-properties-panel.css" />
|
<link rel="stylesheet" href="vendor/bpmn-js-properties-panel/assets/bpmn-js-properties-panel.css" />
|
||||||
|
<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css" />
|
||||||
|
<link rel="stylesheet" href="/css/vc-ui.css" />
|
||||||
|
<script src="/js/bootstrap/jquery-3.3.1.min.js"></script>
|
||||||
<script src="/js/vue/vue.min.js"></script>
|
<script src="/js/vue/vue.min.js"></script>
|
||||||
<script src="/js/vue/vue-resource.min.js"></script>
|
<script src="/js/vue/vue-resource.min.js"></script>
|
||||||
|
<script src="/js/bootstrap/bootstrap.min.js"></script>
|
||||||
<link rel="stylesheet" href="app.css" />
|
<link rel="stylesheet" href="app.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<vc:create path="frame/bodyTop"></vc:create>
|
<vc:create path="frame/bodyTop"></vc:create>
|
||||||
<div class="content with-diagram" id="js-drop-zone">
|
<div class="content with-diagram" id="js-drop-zone">
|
||||||
<div id="component" class="message intro">
|
|
||||||
<div class="note">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="message error">
|
<div class="message error">
|
||||||
<div class="note">
|
<div class="note">
|
||||||
<p>出错了.</p>
|
<p>出错了.</p>
|
||||||
@ -34,6 +44,10 @@
|
|||||||
|
|
||||||
<div class="canvas" id="js-canvas"></div>
|
<div class="canvas" id="js-canvas"></div>
|
||||||
<div class="properties-panel-parent" id="js-properties-panel"></div>
|
<div class="properties-panel-parent" id="js-properties-panel"></div>
|
||||||
|
|
||||||
|
<div id="component">
|
||||||
|
<vc:create path="property/bpmnjsInit"></vc:create>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="buttons">
|
<ul class="buttons">
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
//发送get请求
|
//发送get请求
|
||||||
let _modelId = vc.getParam('modelId');
|
let _modelId = vc.getParam('modelId');
|
||||||
let _param = {
|
let _param = {
|
||||||
'xml': _xml.replaceAll('Process_1',"java110_" + vc.getParam('flowId')),
|
'xml': _xml.replaceAll('Process_1', "java110_" + vc.getParam('flowId')),
|
||||||
'svg': svg
|
'svg': svg
|
||||||
};
|
};
|
||||||
vc.http.apiPost('/activiti/model/' + _modelId + '/save',
|
vc.http.apiPost('/activiti/model/' + _modelId + '/save',
|
||||||
|
|||||||
5
public/components/property/bpmnjsInit/bpmnjsInit.html
Normal file
5
public/components/property/bpmnjsInit/bpmnjsInit.html
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<div>
|
||||||
|
<vc:create path="property/chooseFlowElementCondition"></vc:create>
|
||||||
|
|
||||||
|
<vc:create path="property/selectStaff"></vc:create>
|
||||||
|
</div>
|
||||||
65
public/components/property/bpmnjsInit/bpmnjsInit.js
Normal file
65
public/components/property/bpmnjsInit/bpmnjsInit.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
(function (vc) {
|
||||||
|
|
||||||
|
vc.extends({
|
||||||
|
data: {
|
||||||
|
bpmnjsInfo: {
|
||||||
|
condition: '',
|
||||||
|
staffId: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_initMethod: function () {
|
||||||
|
$that._initBpmnjs();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'bpmnjsInfo.staffId': {
|
||||||
|
deep: true,
|
||||||
|
handler: function () {
|
||||||
|
let camundaAssignee = document.querySelector('#camunda-assignee');
|
||||||
|
camundaAssignee.value = $that.bpmnjsInfo.staffId;
|
||||||
|
//创建输入框修改事件
|
||||||
|
let changeEvent = document.createEvent("HTMLEvents");
|
||||||
|
changeEvent.initEvent("change", true, true);
|
||||||
|
//触发修改事件，触发绑定的事件，更新数据
|
||||||
|
camundaAssignee.dispatchEvent(changeEvent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_initEvent: function () {
|
||||||
|
//初始化侦听
|
||||||
|
vc.on('bpmnjs', 'index', function (_data) {
|
||||||
|
let camCondition = document.querySelector('#cam-condition');
|
||||||
|
camCondition.value = _data.condition;
|
||||||
|
//创建输入框修改事件
|
||||||
|
let changeEvent = document.createEvent("HTMLEvents");
|
||||||
|
changeEvent.initEvent("change", true, true);
|
||||||
|
//触发修改事件，触发绑定的事件，更新数据
|
||||||
|
camCondition.dispatchEvent(changeEvent);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_initBpmnjs: function () {
|
||||||
|
window._elementEvent = function (e) {
|
||||||
|
console.log('元素被点击', e);
|
||||||
|
// 线表达式 onclick 处理
|
||||||
|
let camCondition = document.querySelector('#cam-condition')
|
||||||
|
if (camCondition) {
|
||||||
|
camCondition.onclick = function () {
|
||||||
|
vc.emit('chooseFlowElementCondition', 'openModal', {
|
||||||
|
condition: camCondition.value
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let camundaAssignee = document.querySelector('#camunda-assignee');
|
||||||
|
if (camundaAssignee) {
|
||||||
|
camundaAssignee.onclick = function () {
|
||||||
|
vc.emit('selectStaff', 'openStaff', $that.bpmnjsInfo);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
})(window.vc);
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
<div id="chooseFlowElementConditionModel" class="modal fade" role="dialog" aria-labelledby="exampleModalLabel"
|
||||||
|
aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body">
|
||||||
|
<h3 class="m-t-none m-b ">选择条件</h3>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-2 col-form-label">条件类型</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<select class="custom-select" v-model="chooseFlowElementConditionInfo.flag">
|
||||||
|
<option selected disabled value="">必填，请选择条件类型</option>
|
||||||
|
<option value="Auto">通用</option>
|
||||||
|
<option value="Custom">手工输入</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row" v-if="chooseFlowElementConditionInfo.flag == 'Auto'">
|
||||||
|
<label class="col-sm-2 col-form-label">表达式</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<select class="custom-select" v-model="chooseFlowElementConditionInfo.condition">
|
||||||
|
<option selected disabled value="">必填，请选择表达式</option>
|
||||||
|
<option value="${auditCode=='1100'}">同意</option>
|
||||||
|
<option value="${auditCode=='1200'}">退回上一节点</option>
|
||||||
|
<option value="${auditCode=='1400'}">退回至提交者</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row" v-else>
|
||||||
|
<label class="col-sm-2 col-form-label">表达式</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input placeholder="输入表达式" type="text" v-model="chooseFlowElementConditionInfo.condition"
|
||||||
|
class="form-control form-control-sm">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<button class="btn btn-primary float-right" type="button" v-on:click="chooseFlowCondition()"><i
|
||||||
|
class="fa fa-check"></i> 确定</button>
|
||||||
|
<button type="button" class="btn btn-warning float-right" style="margin-right:20px;"
|
||||||
|
data-dismiss="modal">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
(function (vc) {
|
||||||
|
|
||||||
|
vc.extends({
|
||||||
|
data: {
|
||||||
|
chooseFlowElementConditionInfo: {
|
||||||
|
flag: 'Auto',
|
||||||
|
condition: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_initMethod: function () {
|
||||||
|
},
|
||||||
|
_initEvent: function () {
|
||||||
|
vc.on('chooseFlowElementCondition', 'openModal', function (_param) {
|
||||||
|
$that.clearAddActivitiesRuleInfo();
|
||||||
|
vc.copyObject(_param, $that.chooseFlowElementConditionInfo);
|
||||||
|
$('#chooseFlowElementConditionModel').modal('show');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
chooseFlowCondition: function () {
|
||||||
|
vc.emit('bpmnjs', 'index', $that.chooseFlowElementConditionInfo);
|
||||||
|
$('#chooseFlowElementConditionModel').modal('hide');
|
||||||
|
},
|
||||||
|
clearAddActivitiesRuleInfo: function () {
|
||||||
|
vc.component.chooseFlowElementConditionInfo = {
|
||||||
|
condition: '',
|
||||||
|
flag: 'Auto',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
})(window.vc);
|
||||||
@ -12,7 +12,7 @@
|
|||||||
<div class=" staff padding padding-top-xs">
|
<div class=" staff padding padding-top-xs">
|
||||||
<div class=" padding overflow-hidden"
|
<div class=" padding overflow-hidden"
|
||||||
:class="{'select':selectStaffInfo.curCompanyId == item.orgId}"
|
:class="{'select':selectStaffInfo.curCompanyId == item.orgId}"
|
||||||
v-for="(item,index) in selectStaffInfo.companys" @click="_changeCompany(item)">
|
v-for="(item,index) in selectStaffInfo.companys" @click="_changeCompany(item)" style="cursor:pointer">
|
||||||
<span>
|
<span>
|
||||||
<i class="fa fa-building-o margin-right-xs" aria-hidden="true"></i>
|
<i class="fa fa-building-o margin-right-xs" aria-hidden="true"></i>
|
||||||
{{item.orgName}}
|
{{item.orgName}}
|
||||||
@ -25,7 +25,7 @@
|
|||||||
<div class="padding-left staff padding padding-top-xs">
|
<div class="padding-left staff padding padding-top-xs">
|
||||||
<div class=" padding overflow-hidden"
|
<div class=" padding overflow-hidden"
|
||||||
:class="{'select':selectStaffInfo.curDepartmentId == item.orgId}"
|
:class="{'select':selectStaffInfo.curDepartmentId == item.orgId}"
|
||||||
v-for="(item,index) in selectStaffInfo.departments" @click="_changeDepartment(item)">
|
v-for="(item,index) in selectStaffInfo.departments" @click="_changeDepartment(item)" style="cursor:pointer">
|
||||||
<span>
|
<span>
|
||||||
<i class="fa fa-sitemap margin-right-xs" aria-hidden="true"></i>
|
<i class="fa fa-sitemap margin-right-xs" aria-hidden="true"></i>
|
||||||
{{item.orgName}}
|
{{item.orgName}}
|
||||||
@ -39,7 +39,7 @@
|
|||||||
<div class=" padding overflow-hidden"
|
<div class=" padding overflow-hidden"
|
||||||
:class="{'select':selectStaffInfo.curStaffId == item.staffId}"
|
:class="{'select':selectStaffInfo.curStaffId == item.staffId}"
|
||||||
v-for="(item,index) in selectStaffInfo.staffs"
|
v-for="(item,index) in selectStaffInfo.staffs"
|
||||||
@click="_changeStaff(item)"
|
@click="_changeStaff(item)" style="cursor:pointer"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<i class="fa fa-user margin-right-xs" aria-hidden="true"></i>
|
<i class="fa fa-user margin-right-xs" aria-hidden="true"></i>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user