/* ********** */
|
Root = window.top.Root;
|
RootRole = window.top.RootRole;
|
dataRoot = window.top.dataRoot;
|
dataRootFields = window.top.dataRootFields;
|
buttonsconfig = window.top.buttonsconfig;
|
Server = window.top.Server;
|
|
Sortable = window.top.Sortable;
|
system_config = window.top.config.system_config;
|
|
//显示大小基准
|
//分辨率基准
|
var screen_draft = [1920, 1080];
|
//var screen_draft = [1366, 768];
|
//可视范围基准
|
var wh_draft = [1366, 728];
|
var h_language = localStorage.getItem("userlanguage") || "zh";
|
|
dateFormat = window.top.dateFormat;
|
|
/* 流程架构 */
|
Vue.component("h-flow", {
|
template: [
|
'<div :class="[\'z_left_menu_tree\', isCheckbox ? \'z_left_menu_checkbox\' : \'\']">',
|
'<div v-if="isfilter" style="height: 38px; line-height: 38px; padding: 0px 12px;">',
|
'<el-input placeholder="输入关键字搜索" v-model="filterText"></el-input>',
|
'</div>',
|
|
'<div v-if="treeheight" :style="{height: treeheight - 38 + \'px\', overflow: \'auto\'}">',
|
'<el-tree ref="hierTree" class="filter-tree" :node-key="nodekey" :indent="indent" ',
|
' :default-expand-all="defaultExpandAll" ',
|
' highlight-current ',
|
' :data="treeData" ',
|
' show-checkbox ',
|
' :accordion="accordion" ',
|
' :expand-on-click-node="expandOnClickNode" ',
|
' :current-node-key="currentnodekey" ',
|
' :default-expanded-keys="defaultExpandedKeys" ',
|
' :default-checked-keys="selectCheckedKeys" ',
|
' :filter-node-method="filterNode" ',
|
' :icon-class="iconclass" ',
|
' :icon-expanded-class="iconExpandedClass" ',
|
' :draggable="isDraggable" ',
|
' :allow-drop="allowDrop" ',
|
' :allow-drag="allowDrag" ',
|
' :check-strictly="checkstrictly"',
|
' :check-on-click-node="checkOnClickNode"',
|
|
' @node-drag-end="handleDragEnd" ',
|
' @node-drop="handleDrop" ',
|
' @node-click="nodeClick" ',
|
' @check-change="checkClick" ',
|
' >',
|
'<span class="custom-tree-node z_menu_tree" slot-scope="{ node, data, itm }"',
|
' @mouseenter="node_isShow(data, true)"',
|
' @mouseleave="node_isShow(data, false)"',
|
'>',
|
'<span>',
|
// '<div class="nodeLabel nodeLabel_l" style="height: 32px; line-height: 32px;">',
|
// '</div>',
|
|
// '<div class="nodeLabel z_left_menu_tree_txt">',
|
// '<i v-if="!node.isLeaf" :class="!node.expanded ? \'el-icon-plus\':\'el-icon-minus\'" style="font-size: 12px; margin-right: 10px; border: 1px solid #a7a9a9; color: #a7a9a9;"></i>',
|
// '<i v-else-if="!data.parent_id" style="font-size: 12px;"></i>',
|
// '<i v-else style="font-size: 12px; margin-right: 10px;"></i>',
|
// '</div>',
|
'<div v-if="data.nodeformatfield" class="nodeLabel z_left_menu_tree_txt">',
|
'<span>{{ data[data.nodeformatfield] }}</span>',
|
'</div>',
|
'<div v-else class="nodeLabel z_left_menu_tree_txt">',
|
'<span v-for="(nodeTxt, k) in treeTxtList">',
|
'<span v-if="nodeTxt.type == \'value\'">{{ nodeTxt.value }}</span>',
|
'<span v-else-if="nodeTxt.type == \'field\'">{{ data[nodeTxt.value] }}</span>',
|
'</span>',
|
// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="data.isBadge ? true : false" is-dot class="item">',
|
// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
|
// '</el-badge>',
|
'</div>',
|
'<template v-if="markfields && markfields.length" v-for="(markfield, mfk) in markfields">',
|
// 标记
|
'<div v-if="markfield.field && data[markfield.field]" class="nodeLabel z_left_menu_tree_txt">',
|
'<el-tag v-if="markfield.isclick" :type="markfield.tagtype" size="mini"',
|
'@click.stop="onMarkClick(markfield, data, node)" class="z_node_button_mb">{{markfield.name ? markfield.name : data[markfield.field]}}</el-tag>',
|
|
'<el-tag v-else size="mini" :type="markfield.tagtype" class="z_node_button_mt">{{markfield.name ? markfield.name : data[markfield.field]}}</el-tag>',
|
'</div>',
|
'</template>',
|
|
'<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
|
'</el-badge>',
|
'</span>',
|
'<span v-if="data.isnotnode_edit || (markdelfield && data[markdelfield])">',
|
'</span>',
|
'<span v-else>',
|
'<div :ref="data.id" v-show="false" class="nodeLabel" style="max-width: 128px;">',
|
'<template v-if="maxlevel" >',
|
'<el-button v-if="node.level < maxlevel && (!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
|
'@click.stop="addNode(data,node)" class="z_node_button aaa1" icon="el-icon-circle-plus-outline">',
|
'</el-button>',
|
'</template>',
|
'<template v-else>',
|
'<el-button v-if="(!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
|
'@click.stop="addNode(data,node)" class="z_node_button bbb" icon="el-icon-circle-plus-outline">',
|
'</el-button>',
|
'</template>',
|
|
// '<el-button v-if="editTreeButton.edit.isshow && !data.edit_disabled" type="text" ',
|
'<el-button v-if="editTreeButton.edit.isshow && !data.isnot_nodeedit" type="text" ',
|
'@click.stop="editNode(data,node)" class="z_node_button" icon="el-icon-edit">',
|
'</el-button>',
|
'<el-button v-if="!(data.children && data.children.length) && editTreeButton.del.isshow && !data.isnot_nodedel" type="text" ',
|
'@click.stop="delNode(data,node)" class="z_node_button" icon="el-icon-delete">',
|
'</el-button>',
|
'</div>',
|
|
/* '<div class="nodeLabel" style="margin-right: 30px;">',
|
// '<span v-if="!node.isLeaf && !data.badgeval">{{data.children.length}}</span>',
|
// '<span v-if="!node.isLeaf && data.badgeval">{{data.badgeval}}</span>',
|
'</div>', */
|
'</span>',
|
'</span>',
|
'</el-tree>',
|
'</div>',
|
|
'<div v-else>',
|
'<el-tree ref="hierTree" class="filter-tree" :node-key="nodekey" :indent="indent" ',
|
' :default-expand-all="defaultExpandAll" ',
|
' highlight-current ',
|
' :data="treeData" ',
|
' show-checkbox ',
|
' :accordion="accordion" ',
|
' :draggable="isDraggable" ',
|
' :expand-on-click-node="expandOnClickNode" ',
|
' :current-node-key="currentnodekey" ',
|
' :default-expanded-keys="defaultExpandedKeys" ',
|
' :default-checked-keys="selectCheckedKeys" ',
|
' :filter-node-method="filterNode" ',
|
' :icon-class="iconclass" ',
|
' :icon-expanded-class="iconExpandedClass" ',
|
' :allow-drop="allowDrop" ',
|
' :allow-drag="allowDrag" ',
|
' :check-strictly="checkstrictly"',
|
' :check-on-click-node="checkOnClickNode"',
|
|
' @node-drag-end="handleDragEnd" ',
|
' @node-drop="handleDrop" ',
|
' @node-click="nodeClick" ',
|
' @check-change="checkClick" ',
|
' >',
|
'<span class="custom-tree-node z_menu_tree" slot-scope="{ node, data, itm }"',
|
' @mouseenter="node_isShow(data, true)"',
|
' @mouseleave="node_isShow(data, false)"',
|
'>',
|
'<span>',
|
// '<div class="nodeLabel nodeLabel_l" style="height: 32px; line-height: 32px;">',
|
// '</div>',
|
|
// '<div class="nodeLabel z_left_menu_tree_txt">',
|
// '<i v-if="!node.isLeaf" :class="!node.expanded ? \'el-icon-plus\':\'el-icon-minus\'" style="font-size: 12px; margin-right: 10px; border: 1px solid #a7a9a9; color: #a7a9a9;"></i>',
|
// '<i v-else-if="!data.parent_id" style="font-size: 12px;"></i>',
|
// '<i v-else style="font-size: 12px; margin-right: 10px;"></i>',
|
// '</div>',
|
'<div class="nodeLabel z_left_menu_tree_txt">',
|
'<span v-for="(nodeTxt, k) in treeTxtList">',
|
'<span v-if="nodeTxt.type == \'value\'">{{ nodeTxt.value }}</span>',
|
'<span v-else-if="nodeTxt.type == \'field\'">{{ data[nodeTxt.value] }}</span>',
|
'</span>',
|
// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="data.isBadge ? true : false" is-dot class="item">',
|
// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
|
// '</el-badge>',
|
'</div>',
|
'<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
|
'</el-badge>',
|
'</span>',
|
'<span v-if="!data.isnotnode_edit">',
|
'<div :ref="data.id" v-show="false" class="nodeLabel" style="max-width: 128px;">',
|
'<template v-if="maxlevel" >'+
|
'<el-button v-if="node.level < maxlevel && (!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
|
'@click.stop="addNode(data,node)" class="z_node_button aaa2" icon="el-icon-circle-plus-outline">',
|
'</el-button>',
|
'</template>'+
|
'<template v-else>'+
|
'<el-button v-if="(!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
|
'@click.stop="addNode(data,node)" class="z_node_button bbb" icon="el-icon-circle-plus-outline">',
|
'</el-button>',
|
'</template>'+
|
|
// '<el-button v-if="editTreeButton.edit.isshow && !data.edit_disabled" type="text" ',
|
'<el-button v-if="editTreeButton.edit.isshow && !data.isnot_nodeedit" type="text" ',
|
'@click.stop="editNode(data,node)" class="z_node_button" icon="el-icon-edit">',
|
'</el-button>',
|
'<el-button v-if="!(data.children && data.children.length) && editTreeButton.del.isshow && !data.isnot_nodedel" type="text" ',
|
'@click.stop="delNode(data,node)" class="z_node_button" icon="el-icon-delete">',
|
'</el-button>',
|
'</div>',
|
|
/* '<div class="nodeLabel" style="margin-right: 30px;">',
|
// '<span v-if="!node.isLeaf && !data.badgeval">{{data.children.length}}</span>',
|
// '<span v-if="!node.isLeaf && data.badgeval">{{data.badgeval}}</span>',
|
'</div>', */
|
'</span>',
|
'</span>',
|
'</el-tree>',
|
'</div>',
|
'</div>'].join(""),
|
props: {
|
flowData: Array, // 全部节点
|
highlightData: Array, // 高亮节点
|
isReadonly: {//是否只读
|
type: Boolean,
|
default: false
|
},
|
nodeDictionary: { // 节点字典
|
type: Array,
|
default: function(){
|
return [
|
{code: "ApprovalNode", name: "审批人"},
|
{code: "ConditionsNode", name: "条件分支"},
|
]
|
}
|
},
|
|
isDraggable: {//是否可拖拽节点
|
type: Boolean,
|
default: false
|
},
|
draggableType: {// 允许拖拽节泛范围， sameLevel同级拖拽，
|
type: String,
|
default: ""
|
},
|
|
isCheckbox: {//是否显示复选框
|
type: Boolean,
|
default: false
|
},
|
checkstrictly: {//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
|
type: Boolean,
|
default: false
|
},
|
checkOnClickNode: { // 是否可以点击节点进行选中
|
type: Boolean,
|
default: false
|
},
|
isfilter: {//是否可查询
|
type: Boolean,
|
default: false
|
},
|
isfilterchildren: { // 关键字查询结果是否带出子节点
|
type: Boolean,
|
default: true
|
},
|
|
defaultExpandAll: {//是否全部展开
|
type: Boolean,
|
default: true
|
},
|
expandOnClickNode: { // 是否在点击节点的时候展开或者收缩节点
|
type: Boolean,
|
default: false
|
},
|
accordion: {//是否手风琴
|
type: Boolean,
|
default: false
|
},
|
nodekey: { //
|
type: String,
|
default: "id"
|
},
|
markdelfield: { // 标记删除的字段，和标记字段没有关系
|
type: String,
|
default: "is_delete"
|
},
|
markfields: { // 标记字段
|
type: Array,
|
default: function(){
|
return [
|
{
|
field: "is_delete",
|
name: "已删除",
|
tagtype: "danger", // 标记
|
isclick: false,
|
}
|
]
|
}
|
},
|
treeTxtFormatter: {//
|
type: String,
|
default: "#{name}-{name}%"
|
},
|
|
defaultExpandedKeys: {//默认展开节点数组
|
type: Array,
|
default: function(){
|
return [];
|
}
|
},
|
defaultCheckedKeys: {//默认勾选节点数组
|
type: Array,
|
default: function(){
|
return [];
|
}
|
},
|
maxlevel: {//最大层级，可用来控制添加按键的显示
|
type: Number,
|
default: 0
|
},
|
isbottomadd: { // 最底层是否允许添加按键
|
type: Boolean,
|
default: false
|
},
|
currentnodekey: "",//默认选中节点
|
|
editTreeButton: {//编辑界面行按键（编辑，删除）
|
type: Object,
|
default: function(){
|
return {
|
add: {
|
isshow:true,
|
txt:"编辑"
|
},
|
edit: {
|
isshow:true,
|
txt:"编辑"
|
},
|
del: {
|
isshow:true,
|
txt:"删除"
|
},
|
}
|
}
|
},
|
|
treeheight: {// 树容器的高度
|
type: Number,
|
default: 0
|
},
|
},
|
|
data() {
|
return {
|
selectCheckedKeys: clone(this.defaultCheckedKeys),
|
iconclass: "el-icon-plus",
|
iconExpandedClass: "el-icon-minus", // 需要改element-ui中的index.js
|
indent: 24,
|
filterText: "", // 关键字查询
|
filterField: [], // 关键字查询的字段
|
treeTxtList: [
|
{value: "", type: "value/field"}
|
],
|
|
filterDataObj: {}, // 关键字查询的结果对象
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.filterDataObj = {};
|
this.$refs.hierTree.filter(val);
|
},
|
defaultCheckedKeys() {
|
this.selectCheckedKeys = clone(this.defaultCheckedKeys)
|
}
|
},
|
|
mounted() {
|
this.nodeTxtFormatter();
|
},
|
methods: {
|
|
}
|
});
|
|
|
/* 节点（审批人）、、、预览、新增、删除、编辑 */
|
|
|
/* 节点（条件分支） */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//**************通用事件*******************
|
//根据分辨率和基准分辨率设置缩放
|
function bodyScale(el) {
|
var win_ratio = window.devicePixelRatio; // 当前显示设备的物理像素分辨率与CSS像素分辨率之比
|
var screen_width = window.screen.width; //document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
|
var screen_height = window.screen.height; //document.documentElement.clientHeight;//获取当前分辨率下的可是区域宽度
|
var scale_w = screen_width / win_ratio / screen_draft[0]; // 分母——设计稿的分辨率
|
var scale_h = screen_height / win_ratio / screen_draft[1]; // 分母——设计稿的分辨率
|
|
var win_width = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
|
var win_height = document.documentElement.clientHeight;//获取当前分辨率下的可是区域宽度
|
var win_w = win_width / win_ratio / wh_draft[0]; // 分母——设计稿的尺寸
|
var win_h = win_height / win_ratio / wh_draft[1]; // 分母——设计稿的尺寸
|
|
if (scale_w > 1 && scale_h > 1) {
|
el.style.transform = "scale(" + scale_w + "," + scale_h + ")";//放大缩小相应倍数
|
}
|
else {
|
el.style.width = win_width - 2 + "px";
|
el.style.height = win_height - 2 + "px";
|
}
|
|
//el.style.transform = "scale(" + scale_w * win_w + "," + scale_h * win_h + ")";//放大缩小相应倍数
|
//document.getElementById('sys_iframe').style.transform = "scale(" + scale_w + "," + scale_h + ")";//放大缩小相应倍数
|
}
|
|
//滚屏效果
|
const cubic = value => Math.pow(value, 3);
|
const easeInOutCubic = value => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
|
