|
|
|
@@ -16,7 +16,13 @@ |
|
|
|
<div class="text_concenter">
|
|
|
|
<div v-show="isShowMatrixTemplatePane">
|
|
|
|
<div class="searhNodeNameconcenter">
|
|
|
|
<el-input placeholder="矩阵搜索" prefix-icon="icon font_family icon-icon_sousuo searchsize" class="el-input_mini" v-model="searhNodeName" @keyup.enter.native="searhTempNode"></el-input>
|
|
|
|
<el-input
|
|
|
|
placeholder="矩阵搜索"
|
|
|
|
prefix-icon="icon font_family icon-icon_sousuo searchsize"
|
|
|
|
class="el-input_mini"
|
|
|
|
v-model="searhNodeName"
|
|
|
|
@keyup.enter.native="searhTempNode"
|
|
|
|
></el-input>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@@ -31,7 +37,12 @@ |
|
|
|
<div class="gundontiao" v-loading="loading">
|
|
|
|
<!-- 固定table -->
|
|
|
|
<div class="fixtable">
|
|
|
|
<table class="bg1" cellspacing="0" cellpadding="0" v-show="listMatirxPermission != ''">
|
|
|
|
<table
|
|
|
|
class="bg1"
|
|
|
|
cellspacing="0"
|
|
|
|
cellpadding="0"
|
|
|
|
v-show="!!nodeList.length"
|
|
|
|
>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
@@ -46,79 +57,183 @@ |
|
|
|
<div class="row-w-60 col-h-60 bg_druk">输出</div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<div class="row-w-130 col-h-60" style="background-color: rgb(255, 210, 78);">矩阵节点</div>
|
|
|
|
<div
|
|
|
|
class="row-w-130 col-h-60"
|
|
|
|
style="background-color: rgb(255, 210, 78)"
|
|
|
|
>
|
|
|
|
矩阵节点
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<table class="bg2" cellspacing="0" cellpadding="0">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td :id="codeItem.sysCode" style="background-color:#e2e2e2" v-for="codeItem in listMatirxPermission" :key="codeItem.id">
|
|
|
|
<div class="row-w-130 col-h-30 bg_write">编码{{ codeItem.sysCode }}</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td :id="nameItem.sysCode" v-for="nameItem in listMatirxPermission" :key="nameItem.id">
|
|
|
|
<div class="row-w-130 col-h-60 bg_druk">{{ nameItem.nodeName }}</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td
|
|
|
|
:id="node.id"
|
|
|
|
style="background-color: #e2e2e2"
|
|
|
|
v-for="(node, idx) in nodeList"
|
|
|
|
:key="node.id"
|
|
|
|
:class="
|
|
|
|
searchedNodeIds.indexOf(node.id) !== -1 ? 'highlight' : ''
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<div class="row-w-130 col-h-30 bg_write">
|
|
|
|
<div class="mark">{{ idx + 1 }}</div>
|
|
|
|
<!-- 编码{{ node.id }} -->
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td
|
|
|
|
:id="node.id"
|
|
|
|
v-for="node in nodeList"
|
|
|
|
:key="node.id"
|
|
|
|
:class="
|
|
|
|
searchedNodeIds.indexOf(node.id) !== -1 ? 'highlight' : ''
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<div class="row-w-130 col-h-60 bg_druk">
|
|
|
|
<div class="mark">{{ node.name }}</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<table class="bg3" cellspacing="0" cellpadding="0">
|
|
|
|
<tbody>
|
|
|
|
<tr v-for="(PermissionItem, permIndex) in listMatirxPermission" :id="PermissionItem.sysCode" :key="PermissionItem.id" class="tdheight">
|
|
|
|
<td ><div class="row-w-60 col-h-60 bg_write">{{ permIndex }}</div></td>
|
|
|
|
<td ><div class="row-w-130 col-h-60 bg_gray_th">{{ PermissionItem.nodeName }}</div></td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
<tr
|
|
|
|
v-for="(node, nodeIdx) in nodeList"
|
|
|
|
:id="node.id"
|
|
|
|
:key="node.id"
|
|
|
|
class="tdheight"
|
|
|
|
>
|
|
|
|
<td
|
|
|
|
:class="
|
|
|
|
searchedNodeIds.indexOf(node.id) !== -1 ? 'highlight' : ''
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<div class="row-w-60 col-h-60 bg_write">
|
|
|
|
<div class="mark">{{ nodeIdx + 1 }}</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td
|
|
|
|
:class="
|
|
|
|
searchedNodeIds.indexOf(node.id) !== -1 ? 'highlight' : ''
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<div class="row-w-130 col-h-60 bg_gray_th">
|
|
|
|
<div class="mark">{{ node.name }}</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<table class="bg4" cellspacing="0" cellpadding="0">
|
|
|
|
<tbody>
|
|
|
|
<tr v-for="(PermissionItem, permIndex) in listMatirxPermission" :id="PermissionItem.sysCode" :key="PermissionItem.id">
|
|
|
|
<td :id="listMatirxPermission[permNodeIndex].sysCode" v-for="(permNodeItem,
|
|
|
|
permNodeIndex) in PermissionItem.listNodePerm" :key="permNodeItem.id"
|
|
|
|
<table class="bg4 table-unit" cellspacing="0" cellpadding="0">
|
|
|
|
<tbody>
|
|
|
|
<tr
|
|
|
|
v-for="(nodeReceive, nodeReceiveIdx) in nodeList"
|
|
|
|
:id="nodeReceive.id"
|
|
|
|
:key="`row_${nodeReceive.id}`"
|
|
|
|
>
|
|
|
|
<template v-for="(nodeSend, nodeSendIdx) in nodeList">
|
|
|
|
<td
|
|
|
|
:key="`${nodeReceive.id}_${nodeSend.id}`"
|
|
|
|
v-if="nodeSendIdx === nodeReceiveIdx"
|
|
|
|
class="matixEquallyName"
|
|
|
|
>
|
|
|
|
<div class="row-w-130 col-h-58">
|
|
|
|
<div
|
|
|
|
class="nullbg"
|
|
|
|
style="text-align: center; font-size: 12px"
|
|
|
|
>
|
|
|
|
{{ nodeSend.name }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td
|
|
|
|
v-else
|
|
|
|
:id="nodeSend.id"
|
|
|
|
:key="`${nodeReceive.id}_${nodeSend.id}`"
|
|
|
|
@contextmenu="
|
|
|
|
MatrixLookInfoMenu(
|
|
|
|
$event,
|
|
|
|
permNodeIndex,
|
|
|
|
permNodeItem,
|
|
|
|
PermissionItem
|
|
|
|
nodeSend,
|
|
|
|
nodeReceive,
|
|
|
|
)
|
|
|
|
"
|
|
|
|
"
|
|
|
|
:class="
|
|
|
|
(permNodeIndex % 2 == 1 && permNodeIndex > permIndex) ||
|
|
|
|
(permIndex % 2 == 1 && permNodeIndex < permIndex)
|
|
|
|
? 'matixTdColor'
|
|
|
|
: permNodeIndex == permIndex
|
|
|
|
? 'matixEquallyName'
|
|
|
|
: 'whiteSpace'
|
|
|
|
[
|
|
|
|
(nodeSendIdx % 2 == 1 && nodeSendIdx > nodeReceiveIdx) ||
|
|
|
|
(nodeReceiveIdx % 2 == 1 && nodeSendIdx < nodeReceiveIdx)
|
|
|
|
? 'matixTdColor'
|
|
|
|
: 'whiteSpace',
|
|
|
|
searchedNodeIds.indexOf(nodeSend.id) !== -1 ||
|
|
|
|
searchedNodeIds.indexOf(nodeReceive.id) !== -1
|
|
|
|
? 'highlight'
|
|
|
|
: '',
|
|
|
|
]
|
|
|
|
.filter((a) => a)
|
|
|
|
.join(' ')
|
|
|
|
"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="row-w-130 col-h-58">
|
|
|
|
<i :key="permNodeIndex2" v-for="(permNodeItem2, permNodeIndex2) in listCodeComputed(PermissionItem.listNodePerm,listMatirxPermission[permNodeIndex].sysCode)">
|
|
|
|
<div><i :class="permNodeItem2.permission == 1 ? 'icon font_family icon-icon_zhuanchu circle_actived ': 'icon font_family icon-icon_zhuanchu circle_defualt'" v-if="permNodeIndex > permIndex"></i> </div>
|
|
|
|
<div><i :class="permNodeItem2.permission == 1 ? 'icon font_family icon-icon_zhuanru circle_actived ': 'icon font_family icon-icon_zhuanru circle_defualt'" v-if="permNodeIndex < permIndex"></i></div>
|
|
|
|
<div><i class="" v-if="permNodeIndex == permIndex"></i></div>
|
|
|
|
</i>
|
|
|
|
<div class="nullbg" v-if="
|
|
|
|
PermissionItem.sysCode ==
|
|
|
|
listMatirxPermission[permNodeIndex].sysCode
|
|
|
|
" style="text-align: center;font-size: 12px;">
|
|
|
|
{{ PermissionItem.nodeName }}
|
|
|
|
<div class="mark">
|
|
|
|
<i
|
|
|
|
v-for="unit in listCodeComputed(
|
|
|
|
nodeSend,
|
|
|
|
nodeReceive,
|
|
|
|
)"
|
|
|
|
:key="unit.Id"
|
|
|
|
>
|
|
|
|
<div>
|
|
|
|
<i
|
|
|
|
:class="
|
|
|
|
unit.Permission == 1
|
|
|
|
? 'icon font_family icon-icon_zhuanchu circle_actived '
|
|
|
|
: 'icon font_family icon-icon_zhuanchu circle_defualt'
|
|
|
|
"
|
|
|
|
v-if="nodeSendIdx > nodeReceiveIdx"
|
|
|
|
></i>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<i
|
|
|
|
:class="
|
|
|
|
unit.Permission == 1
|
|
|
|
? 'icon font_family icon-icon_zhuanru circle_actived '
|
|
|
|
: 'icon font_family icon-icon_zhuanru circle_defualt'
|
|
|
|
"
|
|
|
|
v-if="nodeSendIdx < nodeReceiveIdx"
|
|
|
|
></i>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<i class="" v-if="nodeSendIdx == nodeReceiveIdx"></i>
|
|
|
|
</div>
|
|
|
|
</i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</td>
|
|
|
|
</template>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<!-- 矩阵文件夹 -->
|
|
|
|
<context-menu class="automenu" id="MatrixLookInfoMenu" :show="MatrixLookInfoMenuVisible" @update:show="show => (MatrixLookInfoMenuVisible = show)">
|
|
|
|
<context-menu
|
|
|
|
class="automenu"
|
|
|
|
id="MatrixLookInfoMenu"
|
|
|
|
:show="MatrixLookInfoMenuVisible"
|
|
|
|
@update:show="(show) => (MatrixLookInfoMenuVisible = show)"
|
|
|
|
>
|
|
|
|
<ul>
|
|
|
|
<li class="menu__item">{{ matrixVerticalName }}</li>
|
|
|
|
<li class="menu__item">
|
|
|
|
<el-button :class="btnMatrixLookInfo" @click="matrixRightNodeClick">输出数据</el-button>
|
|
|
|
<el-button
|
|
|
|
:class="btnMatrixLookInfo"
|
|
|
|
@click="matrixRightNodeClick"
|
|
|
|
>输出数据</el-button
|
|
|
|
>
|
|
|
|
</li>
|
|
|
|
<li class="menu__item">{{ matrixHorizontalName }}</li>
|
|
|
|
</ul>
|
|
|
|
@@ -129,246 +244,314 @@ |
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Vue from "vue";
|
|
|
|
import fileUploader from "@/components/fileUploader/Index";
|
|
|
|
import * as services from '@/services/template';
|
|
|
|
Vue.use(fileUploader);
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
MatrixLookInfoMenuVisible: false,
|
|
|
|
isShowListTemplatePane: true,
|
|
|
|
isShowMatrixTemplatePane: false,
|
|
|
|
isShowXmindBtn: false,
|
|
|
|
el_formLabelcolor: "textlabelgray", //textlabelgray表单label为灰色字 textlabelblock 表单label为黑色字
|
|
|
|
listMatirxPermission: [], //矩阵文件夹权限数据
|
|
|
|
matrixRightNodeData: "", //矩阵文件夹右键节点数据
|
|
|
|
searhNodeName: "", //矩阵搜索
|
|
|
|
matrixVerticalName: "", //矩阵竖排名称 右键table显示
|
|
|
|
matrixHorizontalName: "", //矩阵横排名称 右键table显示
|
|
|
|
btnMatrixLookInfo: "martixLeaveColor",
|
|
|
|
eidtModelpane: false, // 模板默认非编辑状态
|
|
|
|
tempName: this.$route.params.name,
|
|
|
|
tempId: this.$route.params.id,
|
|
|
|
loading:false
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created: function () {
|
|
|
|
this.scanMatrix();
|
|
|
|
import Vue from "vue";
|
|
|
|
import fileUploader from "@/components/fileUploader/Index";
|
|
|
|
import * as services from "@/services/template";
|
|
|
|
import { notify } from "@/utils/tool";
|
|
|
|
Vue.use(fileUploader);
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
MatrixLookInfoMenuVisible: false,
|
|
|
|
isShowListTemplatePane: true,
|
|
|
|
isShowMatrixTemplatePane: false,
|
|
|
|
isShowXmindBtn: false,
|
|
|
|
el_formLabelcolor: "textlabelgray", //textlabelgray表单label为灰色字 textlabelblock 表单label为黑色字
|
|
|
|
listMatirxPermission: [], //矩阵文件夹权限数据
|
|
|
|
matrixRightNodeData: "", //矩阵文件夹右键节点数据
|
|
|
|
searhNodeName: "", //矩阵搜索
|
|
|
|
matrixVerticalName: "", //矩阵竖排名称 右键table显示
|
|
|
|
matrixHorizontalName: "", //矩阵横排名称 右键table显示
|
|
|
|
btnMatrixLookInfo: "martixLeaveColor",
|
|
|
|
// eidtModelpane: false, // 模板默认非编辑状态
|
|
|
|
tempName: this.$route.params.name,
|
|
|
|
tempId: this.$route.params.id,
|
|
|
|
loading: false,
|
|
|
|
|
|
|
|
/*---------- ----------*/
|
|
|
|
nodeList: [],
|
|
|
|
unitMap: {},
|
|
|
|
searchedNodeIds: [], // 被搜索命中的节点id列表
|
|
|
|
targetUnit: {}, // 点击弹窗使用的单元数据
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created: function () {
|
|
|
|
this.scanMatrix();
|
|
|
|
},
|
|
|
|
//方法
|
|
|
|
methods: {
|
|
|
|
/**
|
|
|
|
* 查看矩阵
|
|
|
|
*/
|
|
|
|
scanMatrix: function () {
|
|
|
|
if (this.listMatirxPermission.length == 0) {
|
|
|
|
this.getMatirxPermission();
|
|
|
|
}
|
|
|
|
this.isShowMatrixTemplatePane = true;
|
|
|
|
},
|
|
|
|
//方法
|
|
|
|
methods: {
|
|
|
|
/**
|
|
|
|
* 查看矩阵
|
|
|
|
*/
|
|
|
|
scanMatrix: function () {
|
|
|
|
if (this.listMatirxPermission.length == 0) {
|
|
|
|
this.getMatirxPermission();
|
|
|
|
}
|
|
|
|
this.isShowMatrixTemplatePane = true;
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 矩阵鼠标进入事件
|
|
|
|
*/
|
|
|
|
matirxMouseEnter: function (topIndex, item) {
|
|
|
|
this.MatrixLookInfoMenuVisible = false;
|
|
|
|
this.mousueCheckChangeColor(topIndex, "orange");
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 鼠标选中改变border颜色
|
|
|
|
*/
|
|
|
|
mousueCheckChangeColor: function (Index, color) {
|
|
|
|
var currColor = "";
|
|
|
|
if (color == "orange") {
|
|
|
|
currColor = "2px solid orange";
|
|
|
|
} else if (color == "green") {
|
|
|
|
currColor = "2px solid green";
|
|
|
|
}
|
|
|
|
//竖排选中变色
|
|
|
|
for (var j = 0; j < document.querySelectorAll("td").length; j++) {
|
|
|
|
document.querySelectorAll("td")[j].style.border = "";
|
|
|
|
if (
|
|
|
|
document.querySelectorAll("td")[j].id ==
|
|
|
|
this.listMatirxPermission[Index].sysCode
|
|
|
|
) {
|
|
|
|
document.querySelectorAll("td")[j].style.border = currColor;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//横排选中变色
|
|
|
|
for (var k = 0; k < document.querySelectorAll("tr").length; k++) {
|
|
|
|
document.querySelectorAll("tr")[k].style.border = "";
|
|
|
|
if (
|
|
|
|
document.querySelectorAll("tr")[k].id ==
|
|
|
|
this.listMatirxPermission[Index].sysCode
|
|
|
|
) {
|
|
|
|
document.querySelectorAll("tr")[k].style.border = currColor;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/*
|
|
|
|
* 搜索模板节点
|
|
|
|
*/
|
|
|
|
searhTempNode: function () {
|
|
|
|
for (var i = 0; i < this.listMatirxPermission.length; i++) {
|
|
|
|
if (
|
|
|
|
this.listMatirxPermission[i].nodeName
|
|
|
|
.toLowerCase()
|
|
|
|
.indexOf(this.searhNodeName) != -1
|
|
|
|
) {
|
|
|
|
this.mousueCheckChangeColor(i, "orange");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/*
|
|
|
|
*矩阵文件夹右键更换状态
|
|
|
|
*/
|
|
|
|
matrixRightNodeClick: function () {
|
|
|
|
var thisApp = this;
|
|
|
|
if (thisApp.matrixRightNodeData.permission == 0) {
|
|
|
|
thisApp.matrixRightNodeData.permission = 1;
|
|
|
|
} else if (thisApp.matrixRightNodeData.permission == 1) {
|
|
|
|
thisApp.matrixRightNodeData.permission = 0;
|
|
|
|
}
|
|
|
|
this.$axios({
|
|
|
|
method: "put",
|
|
|
|
url: encodeURI(
|
|
|
|
process.env.API_HOST +
|
|
|
|
"Templates/nodes/perms/" +
|
|
|
|
thisApp.matrixRightNodeData.permid
|
|
|
|
),
|
|
|
|
data: thisApp.matrixRightNodeData
|
|
|
|
})
|
|
|
|
.then(function (response) {
|
|
|
|
thisApp.$notify({
|
|
|
|
title: "恭喜您",
|
|
|
|
message: response.data.message,
|
|
|
|
type: "success",
|
|
|
|
offset: 100,
|
|
|
|
duration: 2500
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.catch(function (error) {
|
|
|
|
console.log(error);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 获取矩阵文件夹权限数据
|
|
|
|
*/
|
|
|
|
async getMatirxPermission () {
|
|
|
|
const res = await services.queryFileExchange(this.tempId);
|
|
|
|
if(res.Code !== 0) return;
|
|
|
|
const data = res.Data || [];
|
|
|
|
debugger;
|
|
|
|
// for (var i = 0; i < data.length; i++) {
|
|
|
|
// this.listMatirxPermission.push(data[i]);
|
|
|
|
// this.getData(data[i]);
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 递归获获取矩阵数据
|
|
|
|
*/
|
|
|
|
getData: function (currData) {
|
|
|
|
if (currData.listChildren.length > 0) {
|
|
|
|
for (var j = 0; j < currData.listChildren.length; j++) {
|
|
|
|
this.listMatirxPermission.push(currData.listChildren[j]);
|
|
|
|
this.getData(currData.listChildren[j]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 取消鼠标监听事件-菜单栏
|
|
|
|
*/
|
|
|
|
foo() {
|
|
|
|
this.closeMenu();
|
|
|
|
document.removeEventListener("click", this.foo); // 要及时关掉监听
|
|
|
|
this.tableRightEventData = [];
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 矩阵模板右键
|
|
|
|
*/
|
|
|
|
MatrixLookInfoMenu(event, permNodeIndex, permNodeItem, PermissionItem) {
|
|
|
|
this.loading=true;
|
|
|
|
this.closeMenu();
|
|
|
|
this.MatrixLookInfoMenuVisible = true; // 显示模态窗口，跳出自定义菜单栏
|
|
|
|
// this.mousueCheckChangeColor(permNodeIndex, "green");
|
|
|
|
PermissionItem.listNodePerm.forEach(realPermItem => {
|
|
|
|
if (
|
|
|
|
realPermItem.permCode ==
|
|
|
|
this.listMatirxPermission[permNodeIndex].sysCode
|
|
|
|
) {
|
|
|
|
permNodeItem = realPermItem;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if (permNodeItem.permission == 1) {
|
|
|
|
this.btnMatrixLookInfo = "btnMatrixLookInfo";
|
|
|
|
} else {
|
|
|
|
this.btnMatrixLookInfo = "martixLeaveColor";
|
|
|
|
}
|
|
|
|
this.matrixVerticalName = this.listMatirxPermission[
|
|
|
|
permNodeIndex
|
|
|
|
].nodeName;
|
|
|
|
this.matrixHorizontalName = PermissionItem.nodeName;
|
|
|
|
var menu = document.querySelector("#MatrixLookInfoMenu");
|
|
|
|
this.styleMenu(menu);
|
|
|
|
this.matrixRightNodeData = permNodeItem;
|
|
|
|
this.loading=false;
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 关闭矩阵模板右键
|
|
|
|
*/
|
|
|
|
closeMenu() {
|
|
|
|
this.MatrixLookInfoMenuVisible = false;
|
|
|
|
},
|
|
|
|
styleMenu(menu) {
|
|
|
|
if (event.clientX > 1800) {
|
|
|
|
menu.style.left = event.clientX - 100 + "px";
|
|
|
|
} else {
|
|
|
|
menu.style.left = event.clientX + 1 + "px";
|
|
|
|
/**
|
|
|
|
* 鼠标选中改变border颜色
|
|
|
|
*/
|
|
|
|
// mousueCheckChangeColor: function (Index, color) {
|
|
|
|
// var currColor = "";
|
|
|
|
// if (color == "orange") {
|
|
|
|
// currColor = "2px solid orange";
|
|
|
|
// } else if (color == "green") {
|
|
|
|
// currColor = "2px solid green";
|
|
|
|
// }
|
|
|
|
// //竖排选中变色
|
|
|
|
// for (var j = 0; j < document.querySelectorAll("td").length; j++) {
|
|
|
|
// document.querySelectorAll("td")[j].style.border = "";
|
|
|
|
// if (
|
|
|
|
// document.querySelectorAll("td")[j].id ==
|
|
|
|
// this.listMatirxPermission[Index].sysCode
|
|
|
|
// ) {
|
|
|
|
// document.querySelectorAll("td")[j].style.border = currColor;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// //横排选中变色
|
|
|
|
// for (var k = 0; k < document.querySelectorAll("tr").length; k++) {
|
|
|
|
// document.querySelectorAll("tr")[k].style.border = "";
|
|
|
|
// if (
|
|
|
|
// document.querySelectorAll("tr")[k].id ==
|
|
|
|
// this.listMatirxPermission[Index].sysCode
|
|
|
|
// ) {
|
|
|
|
// document.querySelectorAll("tr")[k].style.border = currColor;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
/*
|
|
|
|
* 搜索模板节点
|
|
|
|
*/
|
|
|
|
searhTempNode: function () {
|
|
|
|
const keywords = this.searhNodeName;
|
|
|
|
const searchedNodeIds = [];
|
|
|
|
if (!keywords) {
|
|
|
|
this.searchedNodeIds = searchedNodeIds;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.nodeList.some((node, i) => {
|
|
|
|
// 这里先处理成只找一个
|
|
|
|
if (node.name.toLowerCase().indexOf(keywords) !== -1) {
|
|
|
|
// this.mousueCheckChangeColor(i, "orange");
|
|
|
|
searchedNodeIds.push(node.id);
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
document.addEventListener("click", this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
|
|
|
|
if (event.clientY > 700) {
|
|
|
|
if (this.MatrixLookInfoMenuVisible == true) {
|
|
|
|
menu.style.top = event.clientY - 145 + "px";
|
|
|
|
} else {
|
|
|
|
menu.style.top = event.clientY - 30 + "px";
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
menu.style.top = event.clientY - 55 + "px";
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
this.searchedNodeIds = searchedNodeIds;
|
|
|
|
},
|
|
|
|
/*
|
|
|
|
*矩阵文件夹右键更换状态
|
|
|
|
*/
|
|
|
|
async matrixRightNodeClick() {
|
|
|
|
const targetUnit = this.targetUnit;
|
|
|
|
const cloneUnit = Object.assign({}, targetUnit);
|
|
|
|
cloneUnit.Permission = cloneUnit.Permission === 1 ? 0 : 1;
|
|
|
|
const res = await services.fileExchange(cloneUnit);
|
|
|
|
if (res.Code !== 0) return;
|
|
|
|
notify.success("更新成功");
|
|
|
|
// 复制回给源数据以更新视图
|
|
|
|
Object.assign(targetUnit, cloneUnit);
|
|
|
|
},
|
|
|
|
// matrixRightNodeClickOld: function () {
|
|
|
|
// var thisApp = this;
|
|
|
|
// if (thisApp.matrixRightNodeData.permission == 0) {
|
|
|
|
// thisApp.matrixRightNodeData.permission = 1;
|
|
|
|
// } else if (thisApp.matrixRightNodeData.permission == 1) {
|
|
|
|
// thisApp.matrixRightNodeData.permission = 0;
|
|
|
|
// }
|
|
|
|
// this.$axios({
|
|
|
|
// method: "put",
|
|
|
|
// url: encodeURI(
|
|
|
|
// process.env.API_HOST +
|
|
|
|
// "Templates/nodes/perms/" +
|
|
|
|
// thisApp.matrixRightNodeData.permid
|
|
|
|
// ),
|
|
|
|
// data: thisApp.matrixRightNodeData,
|
|
|
|
// })
|
|
|
|
// .then(function (response) {
|
|
|
|
// thisApp.$notify({
|
|
|
|
// title: "恭喜您",
|
|
|
|
// message: response.data.message,
|
|
|
|
// type: "success",
|
|
|
|
// offset: 100,
|
|
|
|
// duration: 2500,
|
|
|
|
// });
|
|
|
|
// })
|
|
|
|
// .catch(function (error) {
|
|
|
|
// console.log(error);
|
|
|
|
// });
|
|
|
|
// },
|
|
|
|
/**
|
|
|
|
* 获取矩阵文件夹权限数据
|
|
|
|
*/
|
|
|
|
async getMatirxPermission() {
|
|
|
|
this.loading = true;
|
|
|
|
const templateId = this.tempId;
|
|
|
|
const [unitListRes, nodeTreeDataRes] = await Promise.all([
|
|
|
|
services.queryFileExchange(templateId),
|
|
|
|
services.queryTemplateNodeByTemplateId(templateId),
|
|
|
|
]);
|
|
|
|
const nodeList = flattenNodeTree(nodeTreeDataRes.Data || {});
|
|
|
|
const unitList = unitListRes.Data || [];
|
|
|
|
this.loading = false;
|
|
|
|
this.nodeList = nodeList;
|
|
|
|
this.unitMap = unitList.reduce((h, unit) => {
|
|
|
|
// SysCode为资源提供方
|
|
|
|
// PermCode为资源接受方
|
|
|
|
const key = `${unit.SysCode}->${unit.PermCode}`;
|
|
|
|
h[key] = unit;
|
|
|
|
return h;
|
|
|
|
}, {});
|
|
|
|
|
|
|
|
// for (var i = 0; i < data.length; i++) {
|
|
|
|
// this.listMatirxPermission.push(data[i]);
|
|
|
|
// this.getData(data[i]);
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 递归获获取矩阵数据
|
|
|
|
*/
|
|
|
|
getData: function (currData) {
|
|
|
|
if (currData.listChildren.length > 0) {
|
|
|
|
for (var j = 0; j < currData.listChildren.length; j++) {
|
|
|
|
this.listMatirxPermission.push(currData.listChildren[j]);
|
|
|
|
this.getData(currData.listChildren[j]);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/*
|
|
|
|
* 获取模板编码
|
|
|
|
*/
|
|
|
|
getDetailIndustryFullCode: function (index) {
|
|
|
|
if (index === "") {
|
|
|
|
this.currTemplateFullCode = this.listSonIndustry[
|
|
|
|
this.newTemplateData.detailIndustryID
|
|
|
|
].data.fullCode;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 取消鼠标监听事件-菜单栏
|
|
|
|
*/
|
|
|
|
foo() {
|
|
|
|
this.closeMenu();
|
|
|
|
document.removeEventListener("click", this.foo); // 要及时关掉监听
|
|
|
|
this.tableRightEventData = [];
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 矩阵模板右键
|
|
|
|
*/
|
|
|
|
MatrixLookInfoMenu(event, nodeSend, nodeReceive) {
|
|
|
|
this.loading = true;
|
|
|
|
this.closeMenu();
|
|
|
|
this.MatrixLookInfoMenuVisible = true; // 显示模态窗口，跳出自定义菜单栏
|
|
|
|
const unitMap = this.unitMap;
|
|
|
|
const key = `${nodeSend.id}->${nodeReceive.id}`;
|
|
|
|
const targetUnit = unitMap[key];
|
|
|
|
// this.mousueCheckChangeColor(permNodeIndex, "green");
|
|
|
|
// PermissionItem.listNodePerm.forEach((realPermItem) => {
|
|
|
|
// if (
|
|
|
|
// realPermItem.permCode ==
|
|
|
|
// this.listMatirxPermission[permNodeIndex].sysCode
|
|
|
|
// ) {
|
|
|
|
// permNodeItem = realPermItem;
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
if (targetUnit.Permission == 1) {
|
|
|
|
this.btnMatrixLookInfo = "btnMatrixLookInfo";
|
|
|
|
} else {
|
|
|
|
this.btnMatrixLookInfo = "martixLeaveColor";
|
|
|
|
}
|
|
|
|
this.matrixVerticalName = nodeSend.name;
|
|
|
|
this.matrixHorizontalName = nodeReceive.name;
|
|
|
|
var menu = document.querySelector("#MatrixLookInfoMenu");
|
|
|
|
this.styleMenu(menu);
|
|
|
|
this.targetUnit = targetUnit;
|
|
|
|
// this.matrixRightNodeData = permNodeItem;
|
|
|
|
this.loading = false;
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 关闭矩阵模板右键
|
|
|
|
*/
|
|
|
|
closeMenu() {
|
|
|
|
this.MatrixLookInfoMenuVisible = false;
|
|
|
|
},
|
|
|
|
styleMenu(menu) {
|
|
|
|
if (event.clientX > 1800) {
|
|
|
|
menu.style.left = event.clientX - 100 + "px";
|
|
|
|
} else {
|
|
|
|
menu.style.left = event.clientX + 1 + "px";
|
|
|
|
}
|
|
|
|
document.addEventListener("click", this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
|
|
|
|
if (event.clientY > 700) {
|
|
|
|
if (this.MatrixLookInfoMenuVisible == true) {
|
|
|
|
menu.style.top = event.clientY - 145 + "px";
|
|
|
|
} else {
|
|
|
|
this.currTemplateFullCode = this.listDetailIndustry[
|
|
|
|
index
|
|
|
|
].data.fullCode;
|
|
|
|
menu.style.top = event.clientY - 30 + "px";
|
|
|
|
}
|
|
|
|
this.newTemplateData.fullCode =
|
|
|
|
this.currTemplateFullCode + this.newTemplateData.customCode;
|
|
|
|
} else {
|
|
|
|
menu.style.top = event.clientY - 55 + "px";
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
listCodeComputed: function (data, code) {
|
|
|
|
return function (data, code) {
|
|
|
|
return data.filter(function (dept) {
|
|
|
|
return dept.permCode == code;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
/*
|
|
|
|
* 获取模板编码
|
|
|
|
*/
|
|
|
|
// getDetailIndustryFullCode: function (index) {
|
|
|
|
// if (index === "") {
|
|
|
|
// this.currTemplateFullCode = this.listSonIndustry[
|
|
|
|
// this.newTemplateData.detailIndustryID
|
|
|
|
// ].data.fullCode;
|
|
|
|
// } else {
|
|
|
|
// this.currTemplateFullCode = this.listDetailIndustry[
|
|
|
|
// index
|
|
|
|
// ].data.fullCode;
|
|
|
|
// }
|
|
|
|
// this.newTemplateData.fullCode =
|
|
|
|
// this.currTemplateFullCode + this.newTemplateData.customCode;
|
|
|
|
// },
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
listCodeComputed: function () {
|
|
|
|
return function (nodeSend, nodeReceive) {
|
|
|
|
const unitMap = this.unitMap;
|
|
|
|
const key = `${nodeSend.id}->${nodeReceive.id}`
|
|
|
|
return [unitMap[key]];
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
function flattenNodeTree(nodeTreeData) {
|
|
|
|
return recursionFlatten(nodeTreeData.children, []);
|
|
|
|
}
|
|
|
|
|
|
|
|
function recursionFlatten(nodeList, outputList) {
|
|
|
|
if (!nodeList || nodeList.length === 0) return outputList;
|
|
|
|
nodeList.forEach((node) => {
|
|
|
|
// 重新构建节点数据
|
|
|
|
const newNode = {
|
|
|
|
id: node.id,
|
|
|
|
name: node.topic,
|
|
|
|
// todo 是否是嵌套模板, 后面再看怎么处理
|
|
|
|
isNest: node.isNest,
|
|
|
|
};
|
|
|
|
outputList.push(newNode);
|
|
|
|
recursionFlatten(node.children, outputList);
|
|
|
|
});
|
|
|
|
return outputList;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
table td:hover {
|
|
|
|
color: red;
|
|
|
|
cursor: pointer;
|
|
|
|
/* background-color: orange; */
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
td.highlight {
|
|
|
|
.mark {
|
|
|
|
background-color: rgba(#ffdc00, 0.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.table-unit {
|
|
|
|
td:not(.matixEquallyName):hover .mark {
|
|
|
|
background-color: rgba(#ffdc00, 0.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.gundontiao ::v-deep .el-loading-mask {
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
}
|
|
|
|
.btnMatrixLookInfo {
|
|
|
|
background-color: #9B59B6;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
.menu__item {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
</style> |
unknown
4 år sedan