1278 lines
51 KiB
Vue
1278 lines
51 KiB
Vue
<template>
|
|
<div>
|
|
<!-- <el-switch style="margin-bottom:0.5%"
|
|
v-model="value"
|
|
active-text="企业系统"
|
|
inactive-text="省级系统"
|
|
>
|
|
</el-switch> -->
|
|
<!-- <span style="margin-left:1%;font-weight:;font-size:14px">过滤筛选: </span> <el-input v-model="searchValue" placeholder="请输入名称或编码进行筛选" style="width:200px"></el-input>
|
|
<el-button @click="queryData()" type="primary" size="mini" style="margin-left:1%;" icon="el-icon-search">查询</el-button> -->
|
|
<el-button v-if="long" @click="AddTypeClick" type="primary" size="mini" icon="el-icon-plus">新增</el-button>
|
|
<!-- <el-button @click="AddTypeClick" type="primary" size="mini" icon="el-icon-plus">新增</el-button> -->
|
|
<el-select
|
|
v-show="false"
|
|
v-model="ExpandedNum"
|
|
@change="handleExpandNumChange"
|
|
placeholder="选择展开级别"
|
|
size="mini"
|
|
style="left: 0; width: 100px"
|
|
>
|
|
<el-option label="不展开" :value="0"></el-option>
|
|
<el-option label="展开1" :value="1"></el-option>
|
|
<el-option label="展开2" :value="2"></el-option>
|
|
<el-option label="展开3" :value="3"></el-option>
|
|
</el-select>
|
|
|
|
<el-table
|
|
stripe
|
|
@header-click="sort"
|
|
:data="tableData"
|
|
highlight-current-row
|
|
:height="tableheight + 'px'"
|
|
v-loading="loading"
|
|
row-key="id"
|
|
:expand-row-keys="expandID"
|
|
header-cell-class-name="table_header"
|
|
border
|
|
lazy
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
>
|
|
<el-table-column
|
|
min-width="150"
|
|
prop="name"
|
|
label="部门名称"
|
|
width="230"
|
|
:show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
<!-- <el-table-column prop="parentNodeID" align="center" label="父节点"></el-table-column> -->
|
|
<!-- <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column> -->
|
|
<el-table-column min-width="100" prop="areaName" align="center" label="区域"></el-table-column>
|
|
<el-table-column min-width="100" prop="type" align="center" label="部门类型">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.type === 0" type="primary" size="small">非自定义</span>
|
|
<span v-if="scope.row.type === 1" type="primary" size="small">web自定义</span>
|
|
<span v-if="scope.row.type === 2" type="primary" size="small">App自定义</span>
|
|
<span v-if="scope.row.type === 3" type="primary" size="small">Web测试</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
min-width="150"
|
|
prop="remark"
|
|
align="center"
|
|
label="部门描述"
|
|
:show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
<el-table-column min-width="80" prop="state" align="center" label="状态">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.state === 0" type="primary" size="small">删除</span>
|
|
<span v-if="scope.row.state === 1" type="primary" size="small">正常</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" width="400">
|
|
<template slot-scope="scope">
|
|
<!-- <el-button @click="relationClick(scope.row)" :disabled="scope.row.children.length !=0" type="primary" size="mini" icon="el-icon-paperclip">绑定监测点</el-button> -->
|
|
<el-button @click="AddClick(scope.row)" type="primary" size="mini" icon="el-icon-plus">
|
|
新增
|
|
</el-button>
|
|
<el-button @click="EditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
|
|
修改
|
|
</el-button>
|
|
<el-button @click="DeleteClick(scope.row)" type="danger" size="mini" icon="el-icon-delete">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
|
|
<!--新增/修改-->
|
|
<el-dialog :close-on-click-modal="false" :title="RowName" :visible.sync="dialogFormVisible" width="30%">
|
|
<el-row :gutter="10">
|
|
<el-form :model="formData">
|
|
<el-col :span="24">
|
|
<el-form-item v-if="t === 'add'" label="父级节点:" :label-width="formLabelWidth">
|
|
<el-input v-model="parentName" disabled placeholder="请输入父级节点"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门编号:" :label-width="formLabelWidth">
|
|
<el-input v-model="formData.code" :disabled="fff" placeholder="请输入部门编号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门名称:" :label-width="formLabelWidth">
|
|
<el-input v-model="formData.name" placeholder="请输入部门名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门类型:" :label-width="formLabelWidth">
|
|
<el-select
|
|
v-model="formData.type"
|
|
@change="changtype"
|
|
:disabled="customDeptOptionflag"
|
|
placeholder="选择部门类型"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in customDeptOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="子类型:" :label-width="formLabelWidth">
|
|
<el-select v-model="formData.specialType" placeholder="选择子类型" style="width: 100%">
|
|
<el-option
|
|
v-for="item in ziDeptOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- :disabled="buquyu"-->
|
|
<el-form-item label="部门区域:" :label-width="formLabelWidth">
|
|
<el-select
|
|
style="width: 100%"
|
|
ref="selectTree1"
|
|
v-model="deptName"
|
|
placeholder="请选择所属部门"
|
|
>
|
|
<el-option :value="deptId" style="height: auto">
|
|
<el-tree
|
|
ref="tree"
|
|
:data="treeData"
|
|
node-key="id"
|
|
accordion
|
|
:default-expanded-keys="idArr"
|
|
:props="defaultProps"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<span class="span-ellipsis" slot-scope="{ node, data }">
|
|
<span :title="data.name">{{ data.name }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="绑定区域:" :label-width="formLabelWidth">
|
|
<el-input v-model="areaName" disabled placeholder="绑定的区域"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门排序:" :label-width="formLabelWidth">
|
|
<el-input v-model="formData.sort" placeholder="请输入部门排序"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门描述:" :label-width="formLabelWidth">
|
|
<el-input
|
|
v-model="formData.remark"
|
|
:rows="2"
|
|
type="textarea"
|
|
placeholder="请输入部门描述"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitEvent" :disabled="panduan">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!--绑定监测测点-->
|
|
<el-dialog :close-on-click-modal="false" :title="RowName" :visible.sync="dialogFormVisible3" width="60%">
|
|
<el-row :gutter="10">
|
|
<el-form :model="areaData">
|
|
<el-col :span="8">
|
|
<!-- <el-form-item :label="name" :label-width="formLabelWidth"> -->
|
|
<span style="font-weight: bold">{{ name }}:</span>
|
|
<el-button
|
|
@click="noReationB"
|
|
style="margin-left: 10%"
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-paperclip"
|
|
>
|
|
未绑定
|
|
</el-button>
|
|
<el-button @click="relationB" type="primary" size="mini" icon="el-icon-paperclip">
|
|
其他绑定
|
|
</el-button>
|
|
<el-col
|
|
v-if="flag"
|
|
style="border: 2px solid #ccc; border-radius: 10px 10px 10px 10px"
|
|
:span="24"
|
|
>
|
|
<el-input
|
|
style="margin-top: 2%"
|
|
placeholder="输入关键字进行过滤1"
|
|
v-model="filterText"
|
|
></el-input>
|
|
<el-tree
|
|
:props="defaultProps1"
|
|
ref="tree"
|
|
:data="unTreeData"
|
|
style="height: 60vh"
|
|
show-checkbox
|
|
node-key="id"
|
|
:default-expanded-keys="unexpandedIds"
|
|
:filter-node-method="filterNode"
|
|
>
|
|
<span class="span-ellipsis" slot-scope="{ node, data }">
|
|
<span :title="data.label">{{ data.label }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-col>
|
|
|
|
<el-col
|
|
v-if="flag1"
|
|
style="border: 2px solid #ccc; border-radius: 10px 10px 10px 10px"
|
|
:span="24"
|
|
>
|
|
<el-input
|
|
style="margin-top: 2%"
|
|
placeholder="输入关键字进行过滤2"
|
|
v-model="filterText2"
|
|
></el-input>
|
|
<el-tree
|
|
ref="tree1"
|
|
:props="defaultProps"
|
|
:data="treeData2"
|
|
style="height: 60vh"
|
|
show-checkbox
|
|
node-key="id"
|
|
:default-expanded-keys="[2, 3]"
|
|
:default-checked-keys="[5]"
|
|
:filter-node-method="filterNode"
|
|
>
|
|
<span class="span-ellipsis" slot-scope="{ node, data }">
|
|
<span :title="data.label">{{ data.label }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-col>
|
|
|
|
<!-- </el-row> -->
|
|
<!-- </el-form-item> -->
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div style="margin-top: 60%; margin-right: 10%">
|
|
<el-form-item label="所属部门:" :label-width="formLabelWidth" style="top: 10%">
|
|
<el-input disabled v-model="areaData.name" placeholder="所属部门"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门区域:" :label-width="formLabelWidth">
|
|
<el-input disabled v-model="areaData.area" placeholder="所属部门区域"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门类型:" :label-width="formLabelWidth">
|
|
<el-select
|
|
v-model="areaData.type"
|
|
disabled
|
|
placeholder="选择部门类型"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in customDeptOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-col :span="24" :offset="2">
|
|
<el-button @click="gotoRight" style="margin-left: 40%" type="primary" size="mini">
|
|
进行绑定 》
|
|
</el-button>
|
|
</el-col>
|
|
<el-col :span="24" :offset="2">
|
|
<el-button
|
|
@click="gotoLeft"
|
|
style="margin-top: 2%; margin-left: 40%"
|
|
type="primary"
|
|
size="mini"
|
|
>
|
|
《 解除绑定
|
|
</el-button>
|
|
</el-col>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<span style="font-weight: bold">目标监测点:</span>
|
|
<el-row :gutter="10">
|
|
<el-col
|
|
style="
|
|
margin-top: 2%;
|
|
margin-right: 10%;
|
|
border: 2px solid #ccc;
|
|
border-radius: 10px 10px 10px 10px;
|
|
"
|
|
:span="24"
|
|
>
|
|
<el-input
|
|
style="margin-top: 2%"
|
|
placeholder="输入关键字进行过滤"
|
|
v-model="filterText"
|
|
></el-input>
|
|
<el-tree
|
|
ref="tree2"
|
|
:data="TargetTreeData"
|
|
style="height: 60vh"
|
|
show-checkbox
|
|
node-key="id"
|
|
:default-expanded-keys="TargetIds"
|
|
>
|
|
<span class="span-ellipsis" slot-scope="{ node, data }">
|
|
<span :title="data.label">{{ data.label }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-form>
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogFormVisible3 = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitEvent2">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog :close-on-click-modal="false" :title="RowName" :visible.sync="dialogFormVisible1" width="60%">
|
|
<el-col :span="5" style="position: absolute; margin-top: 7%; margin-left: 36%">
|
|
<el-form :model="messageInfo">
|
|
<el-form-item label="所属部门:" :label-width="formLabelWidth" style="top: 10%">
|
|
<el-input disabled v-model="messageInfo.name" placeholder="所属部门"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门区域:" :label-width="formLabelWidth">
|
|
<el-input disabled v-model="messageInfo.area" placeholder="所属部门区域"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门类型:" :label-width="formLabelWidth">
|
|
<el-select v-model="messageInfo.type" disabled placeholder="选择部门类型" style="width: 100%">
|
|
<el-option
|
|
v-for="item in customDeptOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
|
|
<div class="box">
|
|
<tree-transfer
|
|
:from_data="fromData2"
|
|
:areaData="messageInfo"
|
|
:to_data="toData"
|
|
:title="['未绑定的监测点', '已绑定的监测点']"
|
|
:button_text="['绑定测点', '解除绑定']"
|
|
:defaultProps="{ label: 'name', children: 'children' }"
|
|
@add-btn="add"
|
|
@remove-btn="remove"
|
|
:mode="mode"
|
|
:renderContentLeft="renderContentLeft"
|
|
:renderContentRight="renderContentRight"
|
|
:defaultExpandedKeys="defaultExpandedKeys"
|
|
:render-content="renderContent"
|
|
height="540px"
|
|
filter
|
|
></tree-transfer>
|
|
<!-- <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
|
|
</tree-transfer> -->
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitArrayLine">提交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
//import treeTransfer from "/src/views/sys/user-boot/dept/transfer-extend"; // 源码位置
|
|
import treeTransfer from 'el-tree-transfer' // 引入
|
|
import {
|
|
deptTree,
|
|
getAreaTree,
|
|
getPidAreaByAreaId,
|
|
addDetp,
|
|
updateDetp,
|
|
selectPid,
|
|
deleteDept,
|
|
getDeptBindDeptLineTree,
|
|
deptBindLine,
|
|
deptDeleteBindLine
|
|
} from '@/api/admin/dept'
|
|
//import pagination from '../../../components/pagination/index'
|
|
import treeSelect from '@riophae/vue-treeselect'
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
export default {
|
|
components: {
|
|
//pagination,
|
|
treeSelect,
|
|
treeTransfer
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
panduan: false,
|
|
buquyu: false,
|
|
butype: false,
|
|
fff: false,
|
|
deptId: '',
|
|
deptName: '',
|
|
messageInfo: {},
|
|
linefalg: false,
|
|
searchValue: '',
|
|
tableheight: undefined,
|
|
customDeptOptionflag: false,
|
|
ziDeptOption: [
|
|
{
|
|
label: '非本部',
|
|
value: 0
|
|
},
|
|
{
|
|
label: '本部',
|
|
value: 1
|
|
}
|
|
],
|
|
|
|
// node_key:'id',
|
|
// 自定义 pid参数名
|
|
// pid: "pid",
|
|
// id:'id',
|
|
defaultExpandedKeys: [],
|
|
formData: {
|
|
area: '',
|
|
name: '',
|
|
pid: -1,
|
|
remark: '',
|
|
sort: 0,
|
|
type: 0,
|
|
code: '',
|
|
specialType: 0
|
|
},
|
|
ExpandedNum: 1,
|
|
showTable: true,
|
|
expandID: [],
|
|
idArr: [],
|
|
areaName: '',
|
|
filterText: '',
|
|
filterText2: '',
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
expandedIds: [],
|
|
checkedIds: [],
|
|
dialogFormVisible: false,
|
|
dialogFormVisible1: false,
|
|
dialogFormVisible3: false,
|
|
loading: false,
|
|
flag: true,
|
|
flag1: false,
|
|
t: '',
|
|
name: '基础监测点',
|
|
areaData: {
|
|
id: undefined,
|
|
deptsName: '',
|
|
customDept: '',
|
|
area: ''
|
|
},
|
|
formLabelWidth: '120px',
|
|
parentName: '',
|
|
value: undefined,
|
|
type: 0,
|
|
row: undefined,
|
|
RowName: '',
|
|
treeData: [],
|
|
unexpandedIds: [],
|
|
uncheckedIds: [],
|
|
defaultProps1: {
|
|
children: 'children',
|
|
label: 'label'
|
|
},
|
|
unTreeData: [
|
|
{
|
|
id: 1,
|
|
pid: 0,
|
|
label: '测试节点1',
|
|
children: [
|
|
{
|
|
id: 33,
|
|
pid: 1,
|
|
label: '二级 2-3',
|
|
children: [
|
|
{
|
|
id: 333,
|
|
pid: 33,
|
|
label: '三级 3-3-1',
|
|
children: []
|
|
},
|
|
{
|
|
id: 334,
|
|
pid: 33,
|
|
label: '三级 3-3-2',
|
|
children: []
|
|
},
|
|
{
|
|
id: 335,
|
|
pid: 33,
|
|
label: '三级 3-3-3',
|
|
children: []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
TargetIds: [],
|
|
TargetTreeData: [
|
|
{
|
|
id: 1,
|
|
pid: 0,
|
|
label: '测试节点2',
|
|
children: [
|
|
{
|
|
id: 11,
|
|
pid: 1,
|
|
label: '二级 2-1',
|
|
children: [
|
|
{
|
|
id: 111,
|
|
pid: 11,
|
|
label: '三级 3-1-1',
|
|
children: []
|
|
},
|
|
{
|
|
id: 112,
|
|
pid: 11,
|
|
label: '三级 3-1-2',
|
|
children: []
|
|
},
|
|
{
|
|
id: 113,
|
|
pid: 11,
|
|
label: '三级 3-1-3',
|
|
children: []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 22,
|
|
pid: 1,
|
|
label: '二级 2-2',
|
|
children: [
|
|
{
|
|
id: 222,
|
|
pid: 22,
|
|
label: '三级 3-2-1',
|
|
children: []
|
|
},
|
|
{
|
|
id: 223,
|
|
pid: 22,
|
|
label: '三级 3-2-2',
|
|
children: []
|
|
},
|
|
{
|
|
id: 224,
|
|
pid: 22,
|
|
label: '三级 3-2-3',
|
|
children: []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 33,
|
|
pid: 1,
|
|
label: '二级 2-2',
|
|
children: [
|
|
{
|
|
id: 333,
|
|
pid: 33,
|
|
label: '三级 3-2-1',
|
|
children: []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
long: true,
|
|
formData: {
|
|
area: undefined,
|
|
name: '',
|
|
type: 0,
|
|
remark: '',
|
|
pid: undefined,
|
|
sort: 0
|
|
},
|
|
customDeptOption: [
|
|
{ value: 0, label: '非自定义' },
|
|
{ value: 1, label: 'web自定义' },
|
|
{ value: 2, label: 'App自定义' },
|
|
{ value: 3, label: 'web测试' }
|
|
],
|
|
pageData: {
|
|
pageNum: 3,
|
|
pageSize: 15,
|
|
total: 0
|
|
},
|
|
tableData: [],
|
|
parentNode: [],
|
|
ids: [],
|
|
nodes: [],
|
|
rightIds: [],
|
|
rightNode: [],
|
|
binId: '',
|
|
mode: 'transfer', // transfer addressList
|
|
fromData2: [], // 穿梭框 - 源数据 - 树形
|
|
toData: [], // 穿梭框 - 目标数据 - 树形
|
|
binData: {
|
|
deptId: undefined,
|
|
deptType: undefined,
|
|
id: '',
|
|
type: 0
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
value(val, newval) {
|
|
if (val) {
|
|
this.type = 1
|
|
// this.tableData=[]
|
|
} else {
|
|
this.type = 0
|
|
// this.tableData=[]
|
|
}
|
|
},
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val)
|
|
},
|
|
filterText2(val) {
|
|
this.$refs.tree1.filter(val)
|
|
},
|
|
ExpandedNum: {
|
|
deep: true,
|
|
handler(val) {
|
|
this.ExpandedNum = val
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// this.tableheight = (getheight()*2.18)
|
|
},
|
|
mounted() {
|
|
this.setHeight()
|
|
window.addEventListener('resize', this.setHeight)
|
|
this.queryData()
|
|
// this.treeLevel()
|
|
//this.queryTreeData()
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setHeight)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.tableheight = window.sessionStorage.getItem('appheight') - 81
|
|
},
|
|
changeMode() {
|
|
if (this.mode == 'transfer') {
|
|
this.mode = 'addressList'
|
|
} else {
|
|
this.mode = 'transfer'
|
|
}
|
|
},
|
|
changtype(val) {
|
|
if (val !== 0) {
|
|
this.buquyu = true
|
|
} else {
|
|
this.buquyu = false
|
|
}
|
|
},
|
|
sort(column, event) {
|
|
this.orderBy = column.order
|
|
this.sortBy = column.property
|
|
// console.log(this.orderBy+'============='+this.sortBy)
|
|
this.queryData()
|
|
},
|
|
//树层级
|
|
treeLevel() {
|
|
//
|
|
var data = [
|
|
{
|
|
id: '6a4367d2b2d9d283bf54f6cd7161d83c',
|
|
pid: 0,
|
|
level: 0,
|
|
name: '测试项目',
|
|
sort: 0,
|
|
children: [
|
|
{
|
|
id: '3d0b4692e4964fdb96f76834e20726fb',
|
|
pid: '6a4367d2b2d9d283bf54f6cd7161d83c',
|
|
level: 1,
|
|
name: '河北省',
|
|
sort: 0,
|
|
children: [
|
|
{
|
|
id: '4468aadc0aa18707bee0824585b7641a',
|
|
pid: '3d0b4692e4964fdb96f76834e20726fb',
|
|
level: 2,
|
|
name: '测试供电公司',
|
|
sort: 0,
|
|
children: [
|
|
{
|
|
id: '47f0fc154f05bce409395ee81927d9ef',
|
|
pid: '4468aadc0aa18707bee0824585b7641a',
|
|
level: 3,
|
|
name: '测试变电站',
|
|
sort: 0,
|
|
children: [
|
|
{
|
|
id: '47547da32c593166bcad93114f7e3df3',
|
|
pid: '47f0fc154f05bce409395ee81927d9ef',
|
|
level: 6,
|
|
name: '测试母线_测试监测点1',
|
|
sort: 0,
|
|
children: []
|
|
},
|
|
{
|
|
id: '47547da32c593166bcad93114f7e3ba2',
|
|
pid: '47f0fc154f05bce409395ee81927d9ef',
|
|
level: 6,
|
|
name: '测试母线_测试监测点2',
|
|
sort: 0,
|
|
children: []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
this.fromData2 = data
|
|
this.TargetTreeData.forEach(m => {
|
|
m.children.forEach(n => {
|
|
n.children.forEach(d => {
|
|
this.TargetIds.push(d.id)
|
|
})
|
|
})
|
|
})
|
|
},
|
|
|
|
//未绑定树设置已勾选的id数组
|
|
setCheckedNodes(nodes) {
|
|
this.uncheckedIds = nodes
|
|
},
|
|
getCheckedKeys(data, keys, key) {},
|
|
//递归未绑定树
|
|
dgtTeeData(n, data) {
|
|
//遍历树 获取id数组
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (data[i].id === n) {
|
|
data.splice(i, 1)
|
|
}
|
|
if (data[i].children) {
|
|
this.dgtTeeData(n, data[i].children)
|
|
}
|
|
}
|
|
return data
|
|
},
|
|
|
|
// 获取选中的未绑定树的节点的id-左
|
|
getChildrenNodesL() {
|
|
this.nodes = this.$refs.tree.getCheckedNodes()
|
|
this.parentNode = this.$refs.tree.getHalfCheckedNodes()
|
|
this.nodes.forEach(item => {
|
|
this.ids.push(item.id)
|
|
})
|
|
},
|
|
// 删除未绑定树方法-左
|
|
deletedId(data, ids) {
|
|
//debugger
|
|
for (var m = 0, n = data.length; m < n; m++) {
|
|
for (var i = 0, j = ids.length; i < j; i++) {
|
|
if (data[m] && data[m].id === ids[i]) {
|
|
data.splice(m, 1)
|
|
}
|
|
}
|
|
if (data[m] && data[m].children.length > 0) {
|
|
this.deletedId(data[m].children, ids)
|
|
}
|
|
}
|
|
return data
|
|
},
|
|
// 未绑定树添加到右边树方法-左
|
|
addId(data, nodes) {
|
|
//debugger
|
|
for (var m = 0, n = data.length; m < n; m++) {
|
|
for (var i = 0, j = nodes.length; i < j; i++) {
|
|
//父级节点相同添加其字节点
|
|
if (data[m] && data[m].pid === nodes[i].pid) {
|
|
if (data[m] && data[m].children.length > 0) {
|
|
data.push(nodes[i].children)
|
|
}
|
|
}
|
|
//父节点不同直接添加其节点
|
|
if (data[m] && data[m].pid != nodes[i].pid) {
|
|
data.push(nodes[i])
|
|
}
|
|
}
|
|
if (data[m] && data[m].children.length > 0) {
|
|
this.addId(data[m].children, nodes)
|
|
}
|
|
}
|
|
return data
|
|
},
|
|
|
|
// 获取选中的目标绑定树的节点的id-右
|
|
getChildrenNodesR() {
|
|
this.rightNode = this.$refs.tree2.getCheckedNodes()
|
|
this.rightNode.forEach(item => {
|
|
this.rightIds.push(item.id)
|
|
})
|
|
},
|
|
// 删除解除绑定树方法-右
|
|
deletedId(data, rightIds) {
|
|
//debugger
|
|
for (var m = 0, n = data.length; m < n; m++) {
|
|
for (var i = 0, j = rightIds.length; i < j; i++) {
|
|
if (data[m] && data[m].id === rightIds[i]) {
|
|
data.splice(m, 1)
|
|
}
|
|
}
|
|
if (data[m] && data[m].children.length > 0) {
|
|
this.deletedId(data[m].children, rightIds)
|
|
}
|
|
}
|
|
return data
|
|
},
|
|
// 点击绑定按钮右移动=删除
|
|
gotoRight() {
|
|
this.getChildrenNodesL()
|
|
// console.log(this.nodes)
|
|
this.unTreeData = this.deletedId(this.unTreeData, this.ids)
|
|
this.TargetTreeData = this.addId(this.TargetTreeData, this.nodes)
|
|
},
|
|
//接除绑定
|
|
gotoLeft() {
|
|
this.getChildrenNodesR()
|
|
this.TargetTreeData = this.deletedId(this.TargetTreeData, this.rightIds)
|
|
},
|
|
submitEvent2() {
|
|
//this.uncheckedIds = this.$refs.tree.getCheckedNodes(false, true).map(node => node.id)
|
|
},
|
|
//获取部门树
|
|
queryData() {
|
|
deptTree().then(response => {
|
|
if (response.code == 'A0000') {
|
|
if (response.data.length > 0) {
|
|
this.long = false
|
|
// response.data.forEach(m=>{
|
|
// if(m.children && m.type==0){
|
|
// this.linefalg = true
|
|
// }else{
|
|
// this.linefalg = false
|
|
// }
|
|
// m.children.forEach(n=>{
|
|
// if(n.children && n.type==0){
|
|
// this.linefalg = true
|
|
// }else{
|
|
// this.linefalg = false
|
|
// }
|
|
// })
|
|
// })
|
|
this.tableData = response.data
|
|
this.handleExpandNumChange()
|
|
let id = '0'
|
|
this.queryTreeData(id)
|
|
}
|
|
}
|
|
if (response.code == 'A0001') {
|
|
this.long = true
|
|
this.tableData = []
|
|
this.handleExpandNumChange()
|
|
let id = '0'
|
|
this.queryTreeData(id)
|
|
}
|
|
})
|
|
},
|
|
//获取最全区域树
|
|
queryTreeData(id) {
|
|
const data = { id: id, type: 0 }
|
|
getAreaTree(data).then(response => {
|
|
if (response.code == 'A0000') {
|
|
this.treeData = response.data
|
|
this.treeData.forEach(m => {
|
|
this.idArr.push(m.id)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getAreaId(id) {
|
|
const data = { id: id, type: 0 }
|
|
getPidAreaByAreaId(data).then(response => {
|
|
if (response.code == 'A0000') {
|
|
this.treeData = response.data
|
|
this.treeData.forEach(m => {
|
|
this.idArr.push(m.id)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//部门绑定区域触发区域树节点
|
|
handleNodeClick(data, node) {
|
|
this.panduan = false
|
|
// console.log(node,data)
|
|
this.deptId = data
|
|
this.$refs.selectTree1.blur()
|
|
this.deptName = data.name
|
|
this.deptId = data.id
|
|
//未绑定的
|
|
if (data.isFalse == 0) {
|
|
this.areaName = data.name
|
|
this.formData.area = data.id
|
|
}
|
|
//已绑定的
|
|
if (data.isFalse == 1) {
|
|
this.$message({
|
|
message: '该区域已经绑定了部门',
|
|
type: 'warning'
|
|
})
|
|
this.panduan = true
|
|
}
|
|
},
|
|
//绑定监测点
|
|
relationClick(row) {
|
|
this.panduan = false
|
|
this.binId = row.id
|
|
this.dialogFormVisible1 = true
|
|
this.RowName = row.name + '绑定监测点'
|
|
this.messageInfo = {
|
|
area: row.areaName,
|
|
type: row.type,
|
|
name: row.name
|
|
}
|
|
this.binData = {
|
|
deptId: row.id,
|
|
deptType: row.type,
|
|
id: row.area,
|
|
type: 0
|
|
}
|
|
this.getDeptBinTree()
|
|
},
|
|
//新增
|
|
AddTypeClick() {
|
|
this.panduan = false
|
|
this.dialogFormVisible = true
|
|
this.areaName = ''
|
|
this.formData.pid = -1
|
|
this.RowName = '部门新增'
|
|
this.parentName = '根节点'
|
|
this.t = 'add'
|
|
this.fff = false
|
|
let id = '0'
|
|
this.queryTreeData(id)
|
|
},
|
|
//行内新增
|
|
AddClick(row) {
|
|
this.fff = false
|
|
if (row.type !== 0) {
|
|
this.buquyu = true
|
|
this.formData.area = row.area
|
|
} else {
|
|
this.buquyu = false
|
|
}
|
|
this.deptName = ''
|
|
this.panduan = false
|
|
this.customDeptOption = [
|
|
{ value: 0, label: '非自定义' },
|
|
{ value: 1, label: 'web自定义' },
|
|
{ value: 2, label: 'App自定义' },
|
|
{ value: 3, label: 'web测试' }
|
|
]
|
|
let id = row.area
|
|
this.queryTreeData(id)
|
|
this.customDeptOptionflag = false
|
|
this.row = row
|
|
this.formData.type = 0
|
|
this.dialogFormVisible = true
|
|
this.areaName = ''
|
|
this.formData.name = ''
|
|
this.formData.remark = ''
|
|
this.RowName = row.name + '部门新增'
|
|
this.formData.pid = row.id
|
|
this.formData.area = row.area
|
|
this.parentName = row.name
|
|
this.formData.code = ''
|
|
this.t = 'add'
|
|
const data = { id: row.pid, type: 0 }
|
|
this.idArr = []
|
|
// getAreaTree(data).then((response) => {
|
|
// if (response.code == "A0000") {
|
|
// this.treeData = response.data;
|
|
// this.treeData.forEach((m) => {
|
|
// this.idArr.push(m.id);
|
|
// });
|
|
// }
|
|
// });
|
|
},
|
|
//修改
|
|
EditClick(row) {
|
|
this.getAreaId(row.area)
|
|
this.fff = false
|
|
this.panduan = false
|
|
if (row.type !== 0) {
|
|
this.customDeptOptionflag = true
|
|
this.customDeptOption = [
|
|
{ value: 0, label: '非自定义' },
|
|
{ value: 1, label: 'web自定义' },
|
|
{ value: 2, label: 'App自定义' },
|
|
{ value: 3, label: 'web测试' }
|
|
]
|
|
} else {
|
|
this.customDeptOptionflag = false
|
|
this.customDeptOption = [
|
|
{ value: 1, label: 'web自定义' },
|
|
{ value: 2, label: 'App自定义' },
|
|
{ value: 3, label: 'web测试' }
|
|
]
|
|
}
|
|
this.dialogFormVisible = true
|
|
this.RowName = row.name + '部门修改'
|
|
this.parentName = row.name
|
|
this.areaName = row.areaName
|
|
this.deptName = row.name
|
|
this.deptId = row.area
|
|
this.t = 'edit'
|
|
this.formData = {
|
|
area: row.area,
|
|
id: row.id,
|
|
pid: row.pid,
|
|
name: row.name,
|
|
type: row.type,
|
|
remark: row.remark,
|
|
sort: row.sort,
|
|
code: row.code,
|
|
specialType: row.specialType
|
|
}
|
|
let id = row.area
|
|
this.queryTreeData(id)
|
|
},
|
|
//删除
|
|
DeleteClick(row) {
|
|
var p = row.id
|
|
var arr = []
|
|
arr.push(p)
|
|
arr = JSON.stringify(arr)
|
|
selectPid(arr).then(response => {
|
|
this.$confirm(response.message + '是否确认删除', '提示', {
|
|
confirmButtonText: '确认删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
deleteDept(arr).then(response => {
|
|
if (response.code == 'A0000') {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功'
|
|
})
|
|
this.queryData()
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
})
|
|
},
|
|
//新增修改提交
|
|
submitEvent() {
|
|
if (this.t == 'add') {
|
|
addDetp(this.formData).then(response => {
|
|
if (response.code == 'A0000') {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '新增成功'
|
|
})
|
|
this.queryData()
|
|
}
|
|
})
|
|
}
|
|
if (this.t == 'edit') {
|
|
updateDetp(this.formData).then(response => {
|
|
if (response.code == 'A0000') {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '修改成功'
|
|
})
|
|
this.queryData()
|
|
}
|
|
})
|
|
}
|
|
this.dialogFormVisible = false
|
|
},
|
|
//获取下来行政区域或企业部门
|
|
getTreeData() {},
|
|
//获取列表
|
|
getQueryDataList() {},
|
|
//未绑定
|
|
noReationB() {
|
|
this.flag1 = false
|
|
this.flag = true
|
|
this.name = '基础监测点'
|
|
},
|
|
//其他绑定
|
|
relationB() {
|
|
this.flag1 = true
|
|
this.flag = false
|
|
this.name = '其他监测点'
|
|
},
|
|
//过滤树节点
|
|
filterNode(value, treeData) {
|
|
if (!value) return true
|
|
return treeData.label.indexOf(value) !== -1
|
|
},
|
|
|
|
showManageDetail(row, expandedRows) {
|
|
// console.log("---------------------------")
|
|
// console.log(expandedRows)
|
|
// console.log("---------------------------")
|
|
if (expandedRows) {
|
|
// alert(22222)
|
|
// alert('触发展开事件')
|
|
// console.log("---------------------------")
|
|
// console.log(event)
|
|
// console.log("---------------------------")
|
|
} else {
|
|
// alert('触发关闭事件')
|
|
}
|
|
},
|
|
//判断需要展开层级
|
|
handleExpandNumChange() {
|
|
if (this.ExpandedNum > 0) {
|
|
this.setExpandKeys(this.tableData)
|
|
}
|
|
},
|
|
//层级展开递归方法
|
|
setExpandKeys(dataList, n) {
|
|
//debugger
|
|
if (!n) n = 1
|
|
for (let i = 0; i < dataList.length; i++) {
|
|
if (n <= this.ExpandedNum) {
|
|
//this.expandID=[]
|
|
this.expandID.push(`${dataList[i].id}`)
|
|
if (dataList[i].hasOwnProperty('children')) {
|
|
const children = dataList[i].children
|
|
this.setExpandKeys(children, n + 1)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
submitArrayLine() {
|
|
var arrids = []
|
|
this.toData.forEach(m => {
|
|
m.children.forEach(n => {
|
|
n.children.forEach(d => {
|
|
d.children.forEach(f => {
|
|
f.children.forEach(p => {
|
|
arrids.push(p.id)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
let data = {
|
|
id: this.binId,
|
|
ids: arrids
|
|
}
|
|
deptBindLine(data).then(response => {
|
|
if (response.code == 'A0000') {
|
|
this.$message.success('部门绑定监测点成功')
|
|
this.dialogFormVisible1 = false
|
|
}
|
|
})
|
|
},
|
|
// 添加按钮
|
|
add(fromData2, toData, obj) {
|
|
// console.log('绑定')
|
|
// console.log("fromData2:", fromData2);
|
|
// console.log("toData:", toData);
|
|
// console.log("obj:", obj);
|
|
},
|
|
// 移除按钮
|
|
remove(fromData2, toData, obj) {
|
|
// console.log('解除绑定')
|
|
// console.log("fromData2:", fromData2);
|
|
// console.log("toData:", toData);
|
|
// console.log("obj:", obj);
|
|
},
|
|
renderContent(h, { node, data, store }) {
|
|
return (
|
|
<span class="custom-tree-node">
|
|
<span>{node.name}</span>
|
|
<span>
|
|
<el-button size="mini" type="text" on-click={() => this.append(data)}>
|
|
Append
|
|
</el-button>
|
|
<el-button size="mini" type="text" on-click={() => this.remove(node, data)}>
|
|
Delete
|
|
</el-button>
|
|
</span>
|
|
</span>
|
|
)
|
|
},
|
|
renderContentLeft(h, { data, node }) {
|
|
return (
|
|
<span class="span-ellipsis">
|
|
<span title={data.name}>{data.name}</span>
|
|
</span>
|
|
)
|
|
},
|
|
renderContentRight(h, { data, node }) {
|
|
return (
|
|
<span class="span-ellipsis">
|
|
<span title={data.name}>{data.name}</span>
|
|
</span>
|
|
)
|
|
},
|
|
getDeptBinTree() {
|
|
getDeptBindDeptLineTree(this.binData).then(response => {
|
|
if (response.code == 'A0000') {
|
|
var nothingBindTree = response.data[0].nothingBindTree
|
|
nothingBindTree[0].pid = 0
|
|
// console.log(nothingBindTree)
|
|
this.fromData2 = nothingBindTree
|
|
var myselfBindTree = response.data[0].myselfBindTree
|
|
myselfBindTree[0].pid = 0
|
|
// console.log(myselfBindTree)
|
|
this.toData = myselfBindTree
|
|
this.fromData2.forEach(m => {
|
|
m.children.forEach(n => {
|
|
n.children.forEach(d => {
|
|
this.defaultExpandedKeys.push(d.id)
|
|
})
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped></style>
|
|
<style lang="less" scoped>
|
|
@import url('../../../styles/comStyle.less');
|
|
::v-deep .el-tree {
|
|
width: 100% !important ;
|
|
overflow: hidden;
|
|
// overflow: scroll;
|
|
}
|
|
::v-deep .el-tree > .el-tree-node {
|
|
display: block !important;
|
|
min-width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
::v-deep .el-tree-node {
|
|
white-space: nowrap !important;
|
|
outline: 0 !important;
|
|
}
|
|
</style>
|