<template>
|
<div>
|
<el-row class="container" id="deviceCon">
|
<p-head ref="pHead"></p-head>
|
<el-col :span="24" class="main" id="deviceDrag">
|
<el-aside id="deviceTreeDiv" :class="'menu-expanded'" @contextmenu.prevent.native="rightClick($event)">
|
<div class="search_box">
|
<el-input placeholder="输入关键字进行搜索" v-model="filterText" ></el-input>
|
</div>
|
<el-tree
|
id="deviceTree"
|
class="filter-tree"
|
:filter-node-method="filterNode"
|
:data="treeList"
|
:props="defaultProps"
|
:default-expanded-keys="expandedKeys"
|
highlight-current
|
node-key="id"
|
ref="tree"
|
@node-contextmenu="rightClick"
|
:current-node-key="currentNodekey"
|
:expand-on-click-node="false"
|
@node-click="handleNodeClick"
|
:style="treeHeight">
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>
|
<!-- <img v-if="node.level==1" src="@assets/tree/icon_1.png" alt="">
|
<img v-if="node.level==2" src="@assets/tree/icon_2.png" alt="">
|
<img v-if="node.level==3" src="@assets/tree/icon_3.png" alt=""> -->
|
<i v-if="data.type==1" class="el-icon-files"></i>
|
<!-- <i v-if="node.level==2" class="el-icon-news"></i> -->
|
<i v-if="data.type==2" class="el-icon-reading"></i>
|
{{ node.label }}
|
</span>
|
</span>
|
</el-tree>
|
</el-aside>
|
<div id="deviceResize" class="drag-two-resize"></div>
|
<section id="deviceDoc" class="content-container">
|
<doc-tab
|
id="filesTab"
|
@showDocImportDialog="showDocImportDialog"
|
@setDocClassCode="setDocClassCode"
|
ref="DocTab"
|
v-if="nodeType == 2" v-on:indexChange="setIndex($event)" :baseNode="baseNode"></doc-tab>
|
<div v-if="nodeType == 2" id="tabResize" class="r-resize"></div>
|
<div>
|
<el-col :span="24" id="attributeTab" class="content-wrapper" :style="conheight">
|
<keep-alive>
|
<group-detail-tab v-if="tabType === 1" :baseNode="groupNode"></group-detail-tab>
|
<device-detail-tab v-else-if="tabType === 2" :baseNode="deviceNode"></device-detail-tab>
|
<doc-detail-tab v-else-if="tabType === 3" :baseNode="docNode"></doc-detail-tab>
|
</keep-alive>
|
</el-col>
|
</div>
|
</section>
|
<div class="treeRightMenu">
|
<device-context-menu
|
ref="DeviceContextMenu"
|
@loadTree="loadTree"
|
@showGroupAddDialog="showGroupAddDialog"
|
@showGroupEditDialog="showGroupEditDialog"
|
@showDeviceAddDialog="showDeviceAddDialog"
|
@showDeviceEditDialog="showDeviceEditDialog"
|
@showDeviceAssignDialog="showDeviceAssignDialog"
|
@showDocImportDialog="showDocImportDialog"
|
@showGroupAssignDialog="showGroupAssignDialog"
|
@showGroupAddChildDialog="showGroupAddChildDialog"
|
@deleteDeviceGroup="deleteDeviceGroup"
|
@deleteDevice="deleteDevice"
|
:baseNode="baseNode"
|
/>
|
</div>
|
</el-col>
|
<p-foot></p-foot>
|
</el-row>
|
<!--导入文档-->
|
<el-dialog :visible.sync="docAddVisible" :close-on-click-modal="false" @close="closeUploadDialog" title="导入NC文档" width="680px">
|
<el-row>
|
<table>
|
<tr>
|
<td>{{nodeDetail.nodeNameLabel}} :</td>
|
<td>{{nodeDetail.nodeName}}</td>
|
</tr>
|
</table>
|
<el-upload
|
class="upload-demo"
|
ref="DocUpload"
|
:action="actionUrl"
|
multiple
|
show-file-list
|
:on-change="handleUploadChange"
|
:on-exceed="handleExceed"
|
:limit="50"
|
:file-list="fileList"
|
:http-request="httpRequest"
|
:auto-upload="false">
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
<el-button style="margin-left: 10px;" size="small" :loading="buttonLoading" type="success" @click="submitUpload">上传到服务器</el-button>
|
<div slot="tip" class="el-upload__tip">已选择{{fileList.length}}个文件</div>
|
</el-upload>
|
</el-row>
|
|
</el-dialog>
|
<!--添加分组-->
|
<el-dialog :visible.sync="groupAddVisible" :close-on-click-modal="false" @close="closeDialog('groupAddForm')" title="添加分组" width="480px">
|
<el-form :model="groupAddData" :rules="groupRules" ref="groupAddForm" label-width="80px">
|
<el-form-item label="分组名称" prop="groupName">
|
<el-input placeholder="请输入分组名称" v-model.trim="groupAddData.groupName"></el-input>
|
</el-form-item>
|
<el-form-item label="描述" prop="description">
|
<el-input type="textarea" row="4" resize="none" placeholder="请输入描述信息，最多50字" v-model.trim="groupAddData.description"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="groupAddCommit" :loading="buttonLoading" type="primary" class="btn-custom">
|
<span>保 存</span>
|
</el-button>
|
<el-button @click="closeDialog('groupAddForm')" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
|
</div>
|
</el-dialog>
|
<!--添加子分组-->
|
<el-dialog :visible.sync="groupAddChildVisible" :close-on-click-modal="false" @close="closeDialog('groupAddChildForm')" title="添加子分组" width="480px">
|
<el-form :model="groupAddData" :rules="groupRules" ref="groupAddChildForm" label-width="80px">
|
<el-form-item :label="parentNodeTitle">
|
<el-input v-model.trim="parentNodeName" readOnly></el-input>
|
</el-form-item>
|
<el-form-item label="分组名称" prop="groupName">
|
<el-input placeholder="请输入分组名称" v-model.trim="groupAddData.groupName"></el-input>
|
</el-form-item>
|
<el-form-item label="描述" prop="description">
|
<el-input type="textarea" row="5" resize="none" placeholder="请输入描述信息，最多50字" v-model.trim="groupAddData.description"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="groupAddCommit" :loading="buttonLoading" type="primary" class="btn-custom">
|
<span>保 存</span>
|
</el-button>
|
<el-button @click="closeDialog('groupAddChildForm')" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
|
</div>
|
</el-dialog>
|
<!--编辑分组-->
|
<el-dialog :visible.sync="groupEditVisible" :close-on-click-modal="false" @close="closeDialog('groupEditForm')" title="编辑分组" width="480px">
|
<el-form :model="groupAddData" :rules="groupRules" ref="groupEditForm" label-width="80px">
|
<el-form-item label="分组名称" prop="groupName">
|
<el-input placeholder="请输入分组名称" v-model.trim="groupAddData.groupName"></el-input>
|
</el-form-item>
|
<el-form-item label="描述" prop="description">
|
<el-input type="textarea" row="5" resize="none" placeholder="请输入描述信息，最多50字" v-model.trim="groupAddData.description"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="groupEditCommit" :loading="buttonLoading" type="primary" class="btn-custom">
|
<span>保 存</span>
|
</el-button>
|
<el-button @click="closeDialog('groupEditForm')" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
|
</div>
|
</el-dialog>
|
<!--添加设备-->
|
<el-dialog :visible.sync="deviceAddVisible" :close-on-click-modal="false" title="添加设备" @close="closeDialog(`deviceAddForm`)" width="880px">
|
<el-form :model="deviceAddData" :rules="deviceRules" ref="deviceAddForm" label-width="80px">
|
<el-row>
|
<el-form-item :label="parentNodeTitle">
|
<el-input v-model.trim="parentNodeName" readOnly></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="设备名称" prop="deviceName">
|
<el-input placeholder="请输入设备名称" v-model.trim="deviceAddData.deviceName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备编号" prop="deviceNo">
|
<el-input placeholder="请输入设备名称" v-model.trim="deviceAddData.deviceNo"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="数控系统" prop="controlSystem">
|
<el-input placeholder="请输入数控系统" v-model.trim="deviceAddData.controlSystem"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备型号" prop="deviceModel">
|
<el-input placeholder="请输入设备型号" v-model.trim="deviceAddData.deviceModel"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="链接IP" prop="linkIp">
|
<el-input placeholder="请输入链接IP" v-model.trim="deviceAddData.linkIp"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="连接端口" prop="linkPort">
|
<el-input-number v-model="deviceAddData.linkPort" :min="1" :max="65533" controls-position="right"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item label="所属部门" prop="departId">
|
<el-select v-model="deviceAddData.departId" clearable filterable placeholder="请选择所属部门">
|
<el-option
|
v-for="item in departList"
|
:key="item.departId"
|
:label="`【` +item.departCode + `】` + item.departName"
|
:value="item.departId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="deviceAddCommit" :loading="buttonLoading" type="primary" class="btn-custom">
|
<span>保 存</span>
|
</el-button>
|
<el-button @click="closeDialog(`deviceAddForm`)" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
|
</div>
|
</el-dialog>
|
<!--编辑设备-->
|
<el-dialog :visible.sync="deviceEditVisible" :close-on-click-modal="false" title="添加设备" @close="closeDialog(`deviceEditForm`)" width="880px">
|
<el-form :model="deviceAddData" :rules="deviceRules" ref="deviceEditForm" label-width="80px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="设备名称" prop="deviceName">
|
<el-input placeholder="请输入设备名称" v-model.trim="deviceAddData.deviceName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备编号" prop="deviceNo">
|
<el-input placeholder="请输入设备编号" v-model.trim="deviceAddData.deviceNo"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="数控系统" prop="controlSystem">
|
<el-input placeholder="请输入数控系统" v-model.trim="deviceAddData.controlSystem"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备型号" prop="deviceModel">
|
<el-input placeholder="请输入设备型号" v-model.trim="deviceAddData.deviceModel"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="链接IP" prop="linkIp">
|
<el-input placeholder="请输入链接IP" v-model.trim="deviceAddData.linkIp"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="连接端口" prop="linkPort">
|
<el-input-number v-model="deviceAddData.linkPort" :min="1" :max="65533" controls-position="right"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item label="所属部门" prop="departId">
|
<el-select v-model="deviceAddData.departId" clearable filterable placeholder="请选择所属部门">
|
<el-option
|
v-for="item in departList"
|
:key="item.departId"
|
:label="`【` +item.departCode + `】` + item.departName"
|
:value="item.departId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="deviceEditCommit" :loading="buttonLoading" type="primary" class="btn-custom">
|
<span>保 存</span>
|
</el-button>
|
<el-button @click="closeDialog(`deviceEditForm`)" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
|
</div>
|
|
</el-dialog>
|
<!--分组权限配置-->
|
<el-dialog :visible.sync="groupAssignVisible" class="transfer_dialog" :close-on-click-modal="false" title="分组权限配置" @close="closeAssignDialog" width="50%">
|
<template>
|
|
<el-form :inline="true" class="demo-form-inline">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item :label="parentNodeTitle">
|
<el-input v-model.trim="parentNodeName" readOnly></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="链接IP" prop="linkIp">
|
<el-input placeholder="请输入链接IP" v-model.trim="deviceAddData.linkIp"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="连接端口" prop="linkPort">
|
<el-input-number v-model="deviceAddData.linkPort" :min="1" :max="65533" controls-position="right"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item label="所属部门" prop="departId">
|
<el-select v-model="deviceAddData.departId" clearable filterable placeholder="请选择所属部门">
|
<el-option
|
v-for="item in departList"
|
:key="item.departId"
|
:label="`【` +item.departCode + `】` + item.departName"
|
:value="item.departId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="closeDialog(`deviceEditForm`)" type="primary" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
<el-button @click.native="deviceEditCommit" :loading="buttonLoading" type="primary" class="btn-custom">
|
<span>保 存</span>
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!--分组权限配置-->
|
<el-dialog :visible.sync="groupAssignVisible" class="transfer_dialog" :close-on-click-modal="false" title="分组权限配置" @close="closeAssignDialog" width="50%">
|
<template>
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item :label="parentNodeTitle">
|
<el-input v-model.trim="parentNodeName" readOnly></el-input>
|
</el-form-item>
|
<el-form-item label="是否分配子节点">
|
<el-switch
|
height="40px"
|
line-height="40px"
|
style="display: block"
|
active-color="#13ce66"
|
v-model="relativeFlag"
|
>
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="分配用户" name="users">
|
<template>
|
<div style="text-align: center">
|
<el-transfer
|
style="text-align: left; display: inline-block"
|
v-model="userListKey"
|
:props="{
|
key: 'userId',
|
label: 'label'
|
}"
|
:data="userList"
|
@change="handlerUserListChange"
|
:titles="['未分配用户', '已分配用户']"
|
:button-texts="['移出用户','分配用户']"
|
>
|
</el-transfer>
|
</div>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="分配部门" name="departs">
|
<template>
|
<div style="text-align: center">
|
<el-transfer
|
style="text-align: left; display: inline-block"
|
v-model="departListKey"
|
:props="{
|
key: 'departId',
|
label: 'departName'
|
}"
|
:data="departList"
|
@change="handlerDepartListChange"
|
:titles="['未分配部门', '已分配部门']"
|
:button-texts="['移出部门','分配部门']"
|
>
|
</el-transfer>
|
</div>
|
</template>
|
</el-tab-pane>
|
|
</el-tabs>
|
</template>
|
</el-dialog>
|
<!--设备权限配置-->
|
<el-dialog :visible.sync="deviceAssignVisible" class="transfer_dialog" :close-on-click-modal="false" title="设备权限配置" @close="closeAssignDialog" width="50%">
|
<template>
|
<div style="text-align: center">
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item :label="parentNodeTitle">
|
<el-input v-model.trim="parentNodeName" readOnly></el-input>
|
</el-form-item>
|
</el-form>
|
<el-transfer
|
style="text-align: left; display: inline-block"
|
v-model="userListKey"
|
:props="{
|
key: 'userId',
|
label: 'nickname'
|
}"
|
:data="userList"
|
@change="handlerUserListChange"
|
:titles="['未分配用户', '已分配用户']"
|
:button-texts="['移出角色','分配角色']"
|
>
|
<span slot-scope="{ option }">{{setLabel(option)}}</span>
|
</el-transfer>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import PHead from '@/base/components/head.vue';
|
import PFoot from '@/base/components/foot.vue';
|
import * as deviceApi from '../api/device';
|
import Bus from '@/module/deviceManager/components/bus.js'
|
import { dragTwoColDiv, dragThreeColDiv, dragTwoRowDiv } from "@/common/drag";
|
import DocTab from '@/module/deviceManager/components/doc_tab.vue';
|
import DeviceContextMenu from '@/module/deviceManager/components/device_context_menu.vue';
|
import GroupDetailTab from '@/module/deviceManager/components/group_attribute_info.vue';
|
import DeviceDetailTab from '@/module/deviceManager/components/device_attribute_info.vue';
|
import DocDetailTab from '@/module/deviceManager/components/doc_attribute_info.vue';
|
let _this = {};
|
export default {
|
name: "device_manager",
|
components:{
|
PHead,
|
PFoot,
|
DeviceContextMenu,
|
DocTab,
|
GroupDetailTab,
|
DeviceDetailTab,
|
DocDetailTab,
|
Bus
|
},
|
data() {
|
return {
|
contextQueryParams:{
|
flag:2, //查询按钮的范围 1 菜单 2 对象
|
param:null, //flag 为2时需要传递该参数 该参数与param对应数据id
|
objectId:null, //查询参数，按类型而不同 1 菜单路径 2 对象权限码
|
relativeParam:null,
|
relativeObjectId:null
|
},
|
deleteParam:{
|
id:''
|
},
|
buttonLoading:false,
|
groupAddVisible:false,
|
groupAddChildVisible:false,
|
groupEditVisible:false,
|
groupAssignVisible:false,
|
deviceAddVisible:false,
|
deviceEditVisible:false,
|
deviceAssignVisible:false,
|
docAddVisible : false,
|
docUploadParams : {
|
attributionId:'',
|
attributionType:0,
|
docClassCode:''
|
},
|
nodeDetail: {
|
nodeNameLabel:'设备名称',
|
nodeName:'机加设备'
|
},
|
actionUrl : 'bbbb',
|
activeName:'users',
|
fileList :[],
|
filterText: '',
|
treeList: [],
|
expandedKeys:[],
|
currentNodekey:'',
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
treeHeight:{
|
height:''
|
},
|
conheight:{
|
height:''
|
},
|
nodeEntity:{},
|
nodeType:0,
|
currentNodeType:0,
|
rightcCurrentNodeId:'',
|
currentNodeId:'',
|
tabType:0,
|
baseNode : {
|
index:1,
|
list :''
|
},
|
groupNode:{
|
index:1,
|
list:''
|
},
|
deviceNode:{
|
index:2,
|
list:''
|
},
|
docNode:{
|
index:3,
|
list:''
|
},
|
parentNodeTitle:'',
|
parentNodeName:'',
|
groupAddData:{
|
groupName:'',
|
description:'',
|
parentId:''
|
},
|
defaultGroupAddData:null,
|
groupRules:{
|
groupName:[
|
{required: true, message: '请输入分组名称', trigger: 'blur'}
|
]
|
},
|
deviceAddData:{
|
groupId:'',
|
deviceName:'',
|
deviceNo:'',
|
controlSystem:'',
|
deviceModel:'',
|
linkIp:'',
|
linkPort:'',
|
departId:''
|
},
|
defaultDeviceAddData:null,
|
deviceRules:{
|
deviceName:[
|
{required: true, message: '请输入设备名称', trigger: 'blur'}
|
],
|
deviceNo:[
|
{required: true, message: '请输入设备编号', trigger: 'blur'}
|
],
|
departId:[
|
{required: true, message: '请选择所属部门', trigger: 'change'}
|
],
|
},
|
departList:[],
|
userList:[],
|
departListKey:[],
|
userListKey:[],
|
relativeFlag:false,
|
}
|
},
|
beforeCreate(){
|
_this = this;
|
},
|
methods: {
|
loadTree(){
|
deviceApi.load_tree().then((res) =>{
|
if (res.success) {
|
this.treeList = res.list;
|
this.$nextTick(function () {
|
if (res.list && res.list.length > 0){
|
this.expandedKeys=[res.list[0].id];
|
if (this.rightcCurrentNodeId != null || this.rightcCurrentNodeId != '') {
|
this.expandedKeys.push(this.rightcCurrentNodeId);
|
}
|
this.checkNode(res.list[0].type, res.list[0].id).then((s) =>{
|
if(s.success) {
|
this.baseNode.index = res.list[0].type;
|
this.baseNode.list = res.list[0].entity;
|
if(res.list[0].type === 1) {
|
this.groupNode.list = res.list[0].entity;
|
}else if(res.list[0].type === 2) {
|
this.deviceNode.list = res.list[0].entity;
|
}
|
this.contextQueryParams.objectId = res.list[0].id;
|
this.nodeType = res.list[0].type;
|
this.tabType = res.list[0].type;
|
}else {
|
this.nodeType = 0;
|
this.tabType = 0;
|
//this.$message.error(s.message);
|
}
|
});
|
}
|
})
|
}
|
})
|
},
|
rightClick(MouseEvent, object, Node, element) { // 鼠标右击触发事件
|
if (object == undefined) {
|
this.contextQueryParams.param = 'device_group';
|
this.contextQueryParams.objectId = null;
|
this.rightcCurrentNodeId = null;
|
this.contextQueryParams.relativeParam = null;
|
this.contextQueryParams.relativeObjectId = null;
|
this.contextQueryParams.objectId = null;
|
this.$refs.DeviceContextMenu.blankRightClick(MouseEvent, this.contextQueryParams);
|
}else {
|
this.relativeFlag = true;
|
this.rightcCurrentNodeId = object.id;
|
this.nodeEntity = object.entity;
|
this.currentNodeType = object.type;
|
this.currentNodeId = object.id;
|
if (object.type == 1) {
|
this.contextQueryParams.param = 'device_group';
|
}else if (object.type == 2) {
|
this.contextQueryParams.param = 'device';
|
}
|
this.contextQueryParams.objectId = object.id;
|
this.baseNode.index = object.type;
|
this.baseNode.list = object.entity;
|
this.$refs.DeviceContextMenu.treeRightClick(MouseEvent, object, Node, element, this.contextQueryParams);
|
}
|
},
|
filterNode(value, data) {
|
if (!value)
|
return true;
|
return data.label.indexOf(value) !== -1;
|
},
|
setLabel(info){
|
let departs = JSON.parse(JSON.stringify(info.departs));
|
let label = info.nickname;
|
if (departs.length > 0) {
|
label += '/';
|
label += departs.reduce((pre ,cur) => pre+ '[' + cur.departName + ']','')
|
}
|
return label;
|
},
|
getHeight(){
|
console.log(window.innerHeight);
|
if (this.nodeType == 2) {
|
this.conheight.height=window.innerHeight-500+'px';
|
}else {
|
this.conheight.height=window.innerHeight-500+'px';
|
}
|
this.treeHeight.height=window.innerHeight-150+'px';
|
},
|
handleNodeClick(data, node, tree) {
|
this.currentNodekey=node.id;
|
|
this.checkNode(data.type, data.id).then((res) => {
|
if(res.success) {
|
this.baseNode.index = data.type;
|
this.baseNode.list = data.entity;
|
if(data.type === 1) {
|
this.groupNode.list = data.entity;
|
}else if(data.type === 2) {
|
this.deviceNode.list = data.entity;
|
}
|
if (data.entity.createUser != '') {
|
this.userList.forEach((v, k) => {
|
if (v.userId == data.entity.createUser) {
|
return data.entity.createUser = v.nickname;
|
}
|
});
|
}
|
if (data.entity.updateUser != '') {
|
this.userList.forEach((v, k) => {
|
if (v.userId == data.entity.updateUser) {
|
return data.entity.updateUser = v.nickname;
|
}
|
});
|
}
|
this.contextQueryParams.objectId = data.id;
|
this.nodeType = data.type;
|
this.tabType = data.type;
|
}else {
|
this.nodeType = 0;
|
this.tabType = 0;
|
//this.$message.error(res.message);
|
}
|
});
|
},
|
showGroupAddDialog() {
|
this.groupAddVisible = true;
|
},
|
showGroupAddChildDialog() {
|
this.groupAddChildVisible = true;
|
this.parentNodeTitle='父分组';
|
this.parentNodeName=this.nodeEntity.groupName;
|
this.groupAddData.parentId=this.nodeEntity.groupId;
|
},
|
showGroupEditDialog() {
|
this.groupEditVisible = true;
|
this.groupAddData = Object.assign({}, this.nodeEntity);
|
},
|
showDeviceAddDialog() {
|
this.deviceAddVisible=true;
|
this.deviceAddData.groupId=this.nodeEntity.groupId;
|
this.parentNodeTitle='所属分组';
|
this.parentNodeName=this.nodeEntity.groupName;
|
},
|
showDeviceEditDialog() {
|
this.deviceEditVisible = true;
|
this.deviceAddData = Object.assign({}, this.nodeEntity);
|
},
|
showGroupAssignDialog() {
|
this.groupAssignVisible = true;
|
this.parentNodeTitle='当前分组';
|
this.parentNodeName=this.nodeEntity.groupName;
|
this.getDepartPermList();
|
this.getUserPermList();
|
},
|
showDeviceAssignDialog() {
|
this.deviceAssignVisible = true;
|
this.parentNodeTitle='当前设备';
|
this.parentNodeName=this.nodeEntity.deviceName;
|
this.departListKey = [];
|
this.getUserPermList();
|
},
|
showDocImportDialog(params) {
|
//console.info('打开设备导入文档弹框');
|
params = JSON.parse(JSON.stringify(params));
|
this.docAddVisible = true;
|
this.docUploadParams.attributionType = params.attributionType;
|
this.docUploadParams.attributionId = params.attributionId;
|
this.fileList = [];
|
},
|
setDocClassCode(code) {
|
this.docUploadParams.docClassCode = code;
|
},
|
deleteDeviceGroup(){
|
this.$confirm('删除后不可取消，确认删除吗？', '提示', {}).then(() => {
|
this.deleteParam.id = this.currentNodeId;
|
deviceApi.device_group_delete(this.deleteParam).then((res) => {
|
if (res.success) {
|
this.loadTree();
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
} else if (res.message) {
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
},
|
deleteDevice(){
|
this.$confirm('删除后不可取消，确认删除吗？', '提示', {}).then(() => {
|
this.deleteParam.id = this.currentNodeId;
|
deviceApi.device_delete(this.deleteParam).then((res) => {
|
if (res.success) {
|
this.loadTree();
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
} else if (res.message) {
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
},
|
setIndex(msg){
|
msg = JSON.parse(JSON.stringify(msg));
|
if (msg.list != null) {
|
this.tabType = msg.index;
|
if(msg.index == 1){
|
this.groupNode.list = msg.list;
|
}else if (msg.index == 2) {
|
this.deviceNode.list = msg.list;
|
}else if (msg.index == 3) {
|
this.docNode.list = msg.list;
|
}
|
}
|
},
|
handleUploadChange(file, fileList) {
|
this.fileList = fileList;
|
},
|
handleExceed(files, fileList) {
|
this.$message.warning(`当前限制选择 50 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
},
|
submitUpload() {
|
this.$refs.DocUpload.submit();
|
},
|
httpRequest(uploadfile) {
|
let formData = new FormData();
|
formData.append('file', uploadfile.file);
|
formData.append('attributionId', this.docUploadParams.attributionId);
|
formData.append('attributionType', this.docUploadParams.attributionType);
|
formData.append('docClassCode', this.docUploadParams.docClassCode);
|
deviceApi.doc_upload(formData, uploadfile).then((res) => {
|
if(res.success) {
|
uploadfile.onSuccess();
|
}else {
|
//uploadfile.onError();
|
}
|
});
|
},
|
async checkNode(nodeType, paramId) {
|
return await deviceApi.check_node_invlid(nodeType, paramId);
|
},
|
groupAddCommit() {
|
if(this.groupAddData.parentId && this.groupAddData.parentId !== '') {
|
this.$refs.groupAddChildForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.buttonLoading = true;
|
deviceApi.add_group(this.groupAddData).then((res) => {
|
if(res.success){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog('groupAddChildForm');
|
this.loadTree();
|
}else if(res.message){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
}else {
|
this.$refs.groupAddForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.buttonLoading = true;
|
deviceApi.add_group(this.groupAddData).then((res) => {
|
if(res.success){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog('groupAddForm');
|
this.loadTree();
|
}else if(res.message){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
}
|
},
|
groupEditCommit() {
|
this.$refs.groupEditForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.buttonLoading = true;
|
deviceApi.edit_group(this.nodeEntity.groupId, this.groupAddData).then((res) => {
|
if(res.success){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog('groupEditForm');
|
this.loadTree();
|
}else if(res.message){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
},
|
deviceAddCommit() {
|
this.$refs.deviceAddForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.buttonLoading = true;
|
deviceApi.add_device(this.deviceAddData).then((res) => {
|
if(res.success){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog('deviceAddForm');
|
this.loadTree();
|
}else if(res.message){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
},
|
deviceEditCommit() {
|
this.$refs.deviceEditForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.buttonLoading = true;
|
deviceApi.edit_device(this.nodeEntity.deviceId, this.deviceAddData).then((res) => {
|
if(res.success){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog('deviceEditForm');
|
this.loadTree();
|
}else if(res.message){
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
},
|
closeDialog(formName) {
|
this.buttonLoading = false;
|
//重置form表单，初始化数据
|
this.groupAddVisible = false;
|
this.groupAddChildVisible=false;
|
this.groupEditVisible = false;
|
this.deviceAddVisible = false;
|
this.deviceEditVisible = false;
|
|
this.docAddVisible = false;
|
if(this.$refs[formName]!==undefined){
|
this.$refs[formName].resetFields();
|
}
|
this.groupAddData = JSON.parse(JSON.stringify(this.defaultGroupAddData));
|
this.deviceAddData = JSON.parse(JSON.stringify(this.defaultDeviceAddData));
|
},
|
closeAssignDialog() {
|
this.groupAssignVisible = false;
|
this.deviceAssignVisible=false;
|
this.userListKey = [];
|
this.departListKey = [];
|
},
|
closeUploadDialog() {
|
this.$refs.DocTab.reloadDocData();
|
},
|
getDepartList() {
|
deviceApi.depart_list().then((res)=>{
|
if(res.success && res.list && res.list.length > 0) {
|
this.departList = res.list;
|
}else {
|
this.departList = [];
|
}
|
}).catch((error) => {
|
this.departList = [];
|
})
|
},
|
getUserList() {
|
deviceApi.user_list().then((res)=>{
|
if(res.success && res.list && res.list.length > 0) {
|
res.list.forEach( v =>{
|
let label = v.nickname;
|
if (v.departs.length > 0) {
|
label += '/';
|
label += v.departs.reduce((pre ,cur) => pre+ '[' + cur.departName + ']','')
|
}
|
v.label = label
|
});
|
this.userList = res.list;
|
|
}else {
|
this.userList = [];
|
}
|
}).catch((error) => {
|
this.userList = [];
|
})
|
},
|
getDepartPermList() {
|
let nodeType = this.nodeType;
|
let paramId = '';
|
if(nodeType == 1) {
|
paramId = this.nodeEntity.groupId;
|
}else if(nodeType == 2){
|
paramId = null;
|
}
|
if(paramId && paramId !== '') {
|
deviceApi.group_depart_list(paramId).then((res) => {
|
if(res.success && res.list && res.list.length > 0) {
|
this.departListKey = [];
|
res.list.forEach((v,k) => {
|
this.departListKey.push(v.departId);
|
})
|
}else {
|
this.departListKey = [];
|
}
|
}).catch((error) => {
|
this.departListKey = [];
|
});
|
}
|
},
|
getUserPermList() {
|
let nodeType = this.nodeType;
|
let paramId = '';
|
if(nodeType == 1) {
|
paramId = this.nodeEntity.groupId;
|
}else if(nodeType == 2){
|
paramId = this.nodeEntity.deviceId;
|
}
|
if(paramId && paramId !== '') {
|
deviceApi.user_perm_list(nodeType, paramId).then((res) => {
|
if(res.success && res.list && res.list.length > 0) {
|
this.userListKey = [];
|
res.list.forEach((v,k) => {
|
this.userListKey.push(v.userId);
|
})
|
}else {
|
this.userListKey = [];
|
}
|
}).catch((error) => {
|
this.userListKey = [];
|
});
|
}
|
|
},
|
handlerUserListChange(value, direction, movedKeys) {
|
let nodeType = this.nodeType;
|
let paramId = '';
|
let flag = 0;
|
if(this.relativeFlag) {
|
flag = 1;
|
}else {
|
flag = 2;
|
}
|
if(nodeType == 1) {
|
paramId = this.nodeEntity.groupId;
|
}else if(nodeType == 2){
|
paramId = this.nodeEntity.deviceId;
|
flag = 2;
|
}
|
if(paramId && paramId !== '') {
|
if(direction == 'right') {
|
//添加
|
deviceApi.assign_add_user(nodeType, paramId, flag, movedKeys).then((res) => {
|
if(res.success) {
|
this.$message({
|
type:'success',
|
message:res.message
|
})
|
}else {
|
this.$message({
|
type:'error',
|
message:res.message
|
})
|
}
|
}).catch((error) => {
|
this.$message({
|
type:'error',
|
message:'权限分配异常！'
|
})
|
})
|
}else {
|
//移除
|
deviceApi.assign_remove_user(nodeType, paramId, flag, movedKeys).then((res) => {
|
if(res.success) {
|
this.$message({
|
type:'success',
|
message:res.message
|
})
|
}else {
|
this.$message({
|
type:'error',
|
message:res.message
|
})
|
}
|
}).catch((error) => {
|
this.$message({
|
type:'error',
|
message:'权限分配异常！'
|
})
|
})
|
}
|
}else {
|
this.$message({
|
type:'error',
|
message:'参数错误！'
|
})
|
}
|
},
|
handlerDepartListChange(value, direction, movedKeys) {
|
let nodeType = this.nodeType;
|
let paramId = '';
|
if(nodeType == 1) {
|
paramId = this.nodeEntity.groupId;
|
}else if(nodeType == 2){
|
paramId = null;
|
}
|
let flag = 0;
|
if(this.relativeFlag) {
|
flag = 1;
|
}else {
|
flag = 2;
|
}
|
if(paramId && paramId !== '') {
|
if(direction == 'right') {
|
//添加
|
deviceApi.assign_add_depart(paramId, flag, movedKeys).then((res) => {
|
if(res.success) {
|
this.$message({
|
type:'success',
|
message:res.message
|
})
|
}else {
|
this.$message({
|
type:'error',
|
message:res.message
|
})
|
}
|
}).catch((error) => {
|
this.$message({
|
type:'error',
|
message:'权限分配异常！'
|
})
|
})
|
}else {
|
//移除
|
deviceApi.assign_remove_depart(paramId, flag, movedKeys).then((res) => {
|
if(res.success) {
|
this.$message({
|
type:'success',
|
message:res.message
|
})
|
}else {
|
this.$message({
|
type:'error',
|
message:res.message
|
})
|
}
|
}).catch((error) => {
|
this.$message({
|
type:'error',
|
message:'权限分配异常！'
|
})
|
})
|
}
|
}else {
|
this.$message({
|
type:'error',
|
message:'参数错误！'
|
})
|
}
|
},
|
/*handleGroupTabClick(tab, e) {
|
/!* console.info(tab);
|
console.info(e);
|
debugger;*!/
|
this.activeName = tab.name;
|
}*/
|
},
|
created() {
|
this.defaultGroupAddData = JSON.parse(JSON.stringify(this.groupAddData));
|
this.defaultDeviceAddData = JSON.parse(JSON.stringify(this.deviceAddData));
|
window.addEventListener('resize', this.getHeight);
|
this.getHeight();
|
},
|
mounted() {
|
//树结构
|
this.loadTree();
|
this.getDepartList();
|
this.getUserList();
|
this.$refs.pHead.activeIndex = '/home/device';
|
Bus.$off('setIndex');
|
Bus.$on('setIndex',val =>{//监听first组件的txt事件
|
let msg = JSON.parse(JSON.stringify(val));
|
_this.setIndex(msg);
|
});
|
dragTwoColDiv("deviceDrag", "deviceTreeDiv", "deviceResize", "deviceDoc");
|
},
|
watch: {
|
//结构树搜索框内容
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
},
|
deviceNode:{
|
deep: true, // 深度监听
|
handler(newValue, oldValue) {
|
if (newValue.index != 0) {
|
this.$nextTick(function () {
|
document.getElementById('filesTab').style.height = 452+'px';
|
document.getElementById('deviceDocTable').style.height = 360+'px';
|
dragTwoRowDiv("deviceDoc", "filesTab", "tabResize", "attributeTab");
|
})
|
}
|
}
|
},
|
nodeType(val){
|
if(val !==2){
|
this.conheight.height=window.innerHeight-85+'px';
|
}else{
|
this.conheight.height=window.innerHeight-510+'px';
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: absolute;
|
top: 0px;
|
bottom: 0px;
|
width: 100%;
|
}
|
.main {
|
display: flex;
|
position: absolute;
|
top: 60px;
|
bottom: 0px;
|
overflow: hidden;
|
aside {
|
width: 230px;
|
.el-tree{
|
overflow: auto;
|
}
|
}
|
.drag-two-resize {
|
width: 5px;
|
cursor: w-resize;
|
background: #104AB7;
|
}
|
.r-resize{
|
height: 5px;
|
cursor: s-resize;
|
background: #104AB7;
|
}
|
}
|
.tree-title{
|
background: #ffffff;
|
text-align: center;
|
line-height:4
|
}
|
.search_box{
|
padding: 5%;
|
background-color: #fff;
|
}
|
.menu-expanded {
|
width: 230px;
|
padding: 10px;
|
background-color: #f0f8ff;
|
}
|
.content-container {
|
background: #fff;
|
flex: 1;
|
overflow-x: hidden;
|
overflow-y: auto;
|
padding: 20px;
|
.content-wrapper {
|
background-color: #fff;
|
box-sizing: border-box;
|
padding: 10px 0;
|
}
|
.grid-content {
|
height: 455px;
|
}
|
}
|
.grid-table-height{
|
height: 450px;
|
overflow: auto;
|
}
|
.el-aside {
|
border: 1px solid #ccc;
|
border-right: none;
|
overflow: hidden;
|
}
|
|
.el-main {
|
border: 1px solid #ccc;
|
}
|
|
.menu_item {
|
line-height: 20px;
|
text-align: left;
|
margin-top: 10px;
|
}
|
|
.menu {
|
height: 100px;
|
width: 80px;
|
position: absolute;
|
/* border-radius: 10px;*/
|
border: 1px solid #999999;
|
background-color: #f4f4f4;
|
}
|
.contextmenu {
|
margin: 0;
|
background: #fff;
|
z-index: 3000;
|
position: absolute;
|
list-style-type: none;
|
padding: 5px 0;
|
border-radius: 4px;
|
font-size: 12px;
|
font-weight: 400;
|
color: #333;
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
li {
|
margin: 0;
|
padding: 7px 16px;
|
cursor: pointer;
|
list-style-type:none;
|
font-size:15px
|
}
|
|
li:hover {
|
background-color: #1790ff;
|
color: white;
|
}
|
}
|
.treeRightMenu{
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 100%;
|
}
|
</style>
|
<style>
|
.el-switch{
|
height: 40px;
|
line-height: 40px;
|
}
|
.el-upload-list{
|
max-height: 500px;
|
overflow: auto;
|
}
|
@media screen and (max-height: 760px) {
|
.el-upload-list{
|
max-height: 330px;
|
overflow: auto;
|
}
|
}
|
</style>
|
