<template>
|
<div class="cascader">
|
<el-input v-model="text" :disabled="disabled" @click.native="open()" suffix-icon="el-icon-arrow-down"
|
slot="reference"
|
:placeholder="placeholder"/>
|
<zt-dialog ref="dialog" :append-to-body="true" column="3" :title="title" @confirm="confirm">
|
<el-row>
|
<el-form v-if="!multiple" :inline="true" :model="form" label-width="70px" style="padding: 5px">
|
<zt-form-item :label="$store.state.word.xianhao">
|
<div class="">
|
<el-input @focus="getShipInfoById" v-model="shipName" type="text" :readonly="true"
|
placeholder="请选择" :disabled="disabled || disabledShip"></el-input>
|
</div>
|
</zt-form-item>
|
<zt-form-item label="系统">
|
<div class="" @click="getList(shipId,shipName)">
|
<el-input v-model="sysName" type="text" :readonly="true"
|
:disabled="disabledSys" placeholder="请选择"></el-input>
|
</div>
|
</zt-form-item>
|
<zt-form-item label="分系统">
|
<div>
|
<el-input @focus="getList(sysId,sysName)" v-model="subName" type="text" :readonly="true"
|
:disabled="disabledSub"
|
placeholder="请选择"></el-input>
|
</div>
|
</zt-form-item>
|
<zt-form-item label="设备">
|
<div class="">
|
<el-input v-model="devName" type="text" placeholder="请选择" :readonly="true"
|
:disabled="disabledDev"></el-input>
|
</div>
|
</zt-form-item>
|
<zt-form-item class="searchList-top" style="margin-left:20px">
|
<el-input v-model="searchWord" type="text" placeholder="请输入">
|
<el-button slot="append" @click="query(value,text)" icon="el-icon-search"></el-button>
|
</el-input>
|
</zt-form-item>
|
</el-form>
|
<el-col :span="multiple?'20':'24'">
|
<div>
|
<el-button type="text" class="form-title">请选择{{ dataListName }}</el-button>
|
<div class="list">
|
<ul class="cascader-ul">
|
<li @click="getList(data.id,data.name)"
|
v-for="data of dataList3" :key="data.id" :label="data.id"
|
:style="{'background-color' :
|
shipName!==undefined&&shipName===data.name
|
||sysName!==undefined&&sysName===data.name
|
||subName!==undefined&&subName===data.name
|
||devName!==undefined&&devName===data.name ? 'rgba(123, 224, 244, 0.5)' : ''}"
|
>{{ data.name }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="multiple?'4':'0'">
|
<el-container>
|
<el-main>
|
<el-input class="input-selected" v-model="selectedText" size="small" readonly/>
|
<div style="margin-top: 10px">
|
已选择的设备:
|
<label style="width: 80%;"> {{ devPathName }}</label>
|
</div>
|
</el-main>
|
</el-container>
|
</el-col>
|
</el-row>
|
<el-dialog title="节点列表" append-to-body :visible.sync="innerVisible">
|
<div class="list1 list">
|
<ul class="cascader-ul">
|
<li @click="selectedRow(list.id)" v-for="list in SearchList" :key="list.id" :label="list.id">{{ list.name }}</li>
|
</ul>
|
</div>
|
</el-dialog>
|
</zt-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {debounce} from 'lodash'
|
|
export default {
|
name: 'zt-equipment-select',
|
props: {
|
isShow: {
|
type: String,
|
default: true
|
},
|
value: [String, Array],
|
shipId: {
|
String,
|
default: ''
|
},
|
showLevel: String,
|
title: String,
|
idField: {
|
type: String,
|
default: 'id'
|
},
|
textField: {
|
type: String,
|
default: 'name'
|
},
|
parentIdField: {
|
type: String,
|
default: 'pid'
|
},
|
url: String,
|
// datas: [String, Array],
|
simple: { // 简单模式
|
type: Boolean,
|
default: false
|
},
|
multiple: {
|
type: Boolean,
|
default: false
|
},
|
leafOnly: { // 是否只能选择叶子节点
|
type: Boolean,
|
default: false
|
},
|
checkStrictly: {
|
type: Boolean,
|
default: false
|
},
|
lazy: { // 懒加载子节点
|
type: Boolean,
|
default: false
|
},
|
expandLevel: { // 懒加载展开层级
|
type: Number,
|
default: 0
|
},
|
disabledFilter: Function, // 可选的节点
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
area: {
|
type: String,
|
default: ''
|
},
|
placeholder: String
|
},
|
inject: {
|
elForm: {
|
default: ''
|
}
|
},
|
data() {
|
return {
|
innerVisible:false,
|
dataListName: '',
|
dataList3: [],
|
SearchList: [
|
{id:'1280000000000017917',name:'/系统3-4-2',level:'system1'},
|
{id:'1280000000000017919',name:'/系统3-4-2/设备3-4-2-2',level:'equipment'},
|
{id:'1280000000000017937',name:'/系统3-4-2/设备3-4-2-20',level:'equipment'},
|
{id:'1280000000000017938',name:'/系统3-4-2/设备3-4-2-21',level:'equipment'},
|
|
{id:'1280000000000017998',name:'/系统3-4-3',level:'system1'},
|
{id:'1280000000000018018',name:'/系统3-4-3/设备3-4-3-20',level:'equipment'},
|
{id:'1280000000000018019',name:'/系统3-4-3/设备3-4-3-21',level:'equipment'},
|
],
|
searchWord:'',
|
|
shipId: '',
|
sysId: '',
|
subId: '',
|
devId: '',
|
|
shipName: '',
|
devName: '',
|
sysName: '',
|
subName: '',
|
|
disabledShip: false,
|
disabledSys: false, // 目前未用，注意加上控制
|
disabledSub: false,
|
disabledDev: false, // 目前未用
|
|
|
devPathName: '',// 多选 设备路径集合
|
|
// devTimer: null,
|
// tmpSubVal: '',
|
// tmpDevVal: '',
|
// dataListSubId: '',
|
// seldetailed: false,
|
selectValue: '',
|
|
// datas: [],
|
treeValue: this.value,
|
filterText: '',
|
text: '',
|
// selectTxt2: 'ok',
|
selectedData: []
|
}
|
},
|
computed: {
|
selectedText() {
|
return `已选择（${this.selectedData.length}）`
|
}
|
},
|
watch: {
|
value(val, oldval) { // 传递给tree-selector
|
this.treeValue = val
|
this.$nextTick(() => {
|
//alert('111')
|
this.setTextOnetime()
|
})
|
|
},
|
// 'selectValueShip': function (val, oldval) {
|
// console.log(val, oldval, 'val oldval')
|
// //this.getShipId()
|
// },
|
filterText: debounce(function (val) {
|
this.$refs.tree.filter(val)
|
}, 1000)
|
},
|
mounted() {
|
// this.getShipId()
|
|
},
|
methods: {
|
async query(){
|
if(this.searchWord){
|
let res= await this.$http.get(`/ztProduct/searchNodes?pid=${this.shipId}&name=${this.searchWord}`)
|
console.log(res,'query res')
|
if(res.data.length>0){
|
this.SearchList=res.data
|
this.innerVisible= true
|
}else {
|
this.$alert('没有数据！')
|
}
|
}else{
|
this.$alert('请输入查询的关键字！')
|
}
|
},
|
selectedRow(id){
|
this.value = id
|
this.innerVisible= false
|
},
|
async getShipInfoById() {
|
//alert("getShipId")
|
console.log(this.value,'getShipId this.value')
|
console.log(this.shipId,'getShipId this.shipId')
|
console.log(this.dataList3,'getShipId dataList3')
|
if (!this.value) {
|
if (!this.shipId ) {
|
let res = await this.$http.get('/ztProduct/getShipList', {params: {area: this.area}})
|
// this.dataListShip = res.data
|
this.dataList3 = res.data
|
}
|
this.dataListName = this.$store.state.word.xianhao
|
// console.log(this.dataListShip, 'this.dataListShip this.dataListShip')
|
if (this.shipId) {
|
this.disabledShip = true
|
// this.selectValueShip = this.shipId
|
this.getList(this.shipId)
|
this.dataList3.filter(item => {
|
// console.log(item.id, 'item.id item.id')
|
if (item.id === this.shipId) {
|
this.shipName = item.name
|
}
|
}
|
)
|
console.log(this.shipName, 'this.shipName this.shipName')
|
} else {
|
this.disabledShip = false
|
}
|
this.$nextTick(() => {
|
this.setTextOnetime()
|
})
|
}
|
},
|
open() {
|
let that = this
|
that.searchWord=''
|
//setTimeout(that.setDefault, 2000)
|
if (this.disabled || (this.elForm || {}).disabled) {
|
// 只读
|
} else {
|
console.log(this.value, 'this.value')
|
this.getShipInfoById()
|
this.$refs.dialog.open()
|
}
|
},
|
// 选择列表数据
|
async getList(dataId, dataName) {
|
console.time('select')
|
console.log(dataName, 'dataName')
|
let res = await this.$http.get(`/ztProduct/${dataId}`, null)
|
console.log(res.data, 'res4 res4')
|
if (res.data) {
|
if (res.data.shipProductId != null) { // 有舷号
|
this.shipName = res.data.shipName
|
//this.isshipName = true
|
} else {
|
this.shipName = ''
|
}
|
|
this.shipId = res.data.shipProductId
|
if (res.data.sysProductId != null) { // 有系统
|
this.sysName = res.data.sysName
|
//this.issysName = true
|
} else {
|
this.sysName = ''
|
}
|
|
if (res.data.subSysProductId != null) { // 又有分系统
|
this.subName = res.data.subSysName
|
//this.issubName = true
|
this.disabledSub = false
|
//this.sysId = res.data.sysProductId
|
console.log(this.devId, 'getSysList this.dataList3')
|
} else {
|
this.subName = ''
|
//this.issubName = false
|
this.disabledSub = true
|
//this.devId = res.data.sysProductId
|
console.log(this.devId, 'getSysList this.dataList3')
|
}
|
|
if (res.data.deviceProductId != null) { // 有设备
|
this.devName = res.data.deviceName
|
} else {
|
this.devName = ''
|
}
|
}
|
console.timeEnd('select')
|
|
console.time('select2')
|
// console.log(this.datas, ' datas 系统数据')
|
res = await this.$http.get(`/ztProduct/getSubList?pid=${dataId}`, null) //根据选中列的id获得下级数据
|
if (res.data && res.data.length > 0) { // 下级数据有数据说明还有子级
|
this.dataList3 = res.data
|
console.log(this.dataList3, ' dataList3 系统数据')
|
if (this.dataList3.length > 0) {
|
if (this.dataList3[0].level == 'side') {
|
this.dataListName = this.$store.state.word.xianhao
|
}
|
if (this.dataList3[0].level == 'system1') {
|
this.dataListName = '系统'
|
}
|
if (this.dataList3[0].level == 'system2') {
|
this.dataListName = '分系统或设备'
|
}
|
if (this.dataList3[0].level == 'equipment') {
|
this.dataListName = '设备'
|
}
|
}
|
} else { // 没有下级数据说明此级为最后一级节点
|
if (!this.multiple) { // 单选
|
this.selectedData = []
|
let text = this.dataList3.find(item => item.id === dataId)['name']
|
this.selectedData.push({id: dataId, name: text})
|
this.selectedData = this.selectedData.filter(item => item.id !== this.dataListSubId)
|
console.log(this.selectedData, 'this.selectedData的数据')
|
this.devName = text
|
this.text = text
|
console.log(this.text, 'this.text的数据')
|
} else { // 多选
|
// alert(55)
|
let hasItem = false
|
// this.dataListSubText = ''
|
// this.devName = ''
|
this.selectedData.forEach(d => {
|
if (d.id === dataId) {
|
hasItem = true
|
return
|
}
|
})
|
console.log(hasItem, 'hasItem')
|
if (!hasItem) {
|
// this.dataListSubText = ''
|
let text = this.dataList3.find(item => item.id === dataId)['name']
|
|
this.selectedData.push({id: dataId, name: text})
|
this.selectedData = this.selectedData.filter(item => item.id !== this.dataListSubId)
|
console.log(this.selectedData, 'this.selectedData的数据')
|
this.text = this.text + (this.text === '' ? '' : ',') + text
|
}
|
// this.selectValueDev = this.text
|
// this.seldetailed = false
|
this.devName = this.text
|
console.log(this.text, 'this.text WT wente')
|
}
|
}
|
console.timeEnd('select2')
|
},
|
async setTextOnetime() { // 组件没有初始化时设置text
|
// alert("setTextOnetime")
|
console.time('valueTime')
|
this.selectedData = []
|
if (this.value) {
|
let res = await this.$http.get(`/ztProduct/${this.value}`, null)
|
console.log(res, 'setTextOnetimee /ztProduct/${this.value} res res res res res')
|
if (res.data.id != null) {
|
this.shipName = res.data.shipName
|
this.sysName = res.data.sysName
|
this.subName = res.data.subSysName
|
this.devName = res.data.deviceName
|
|
let res2 = await this.$http.get(`/ztProduct/getSubList?pid=${res.data.pid}`, null)
|
this.dataList3 = res2.data
|
if (this.dataList3.length > 0) {
|
if (this.dataList3[0].level == 'side') {
|
this.dataListName = this.$store.state.word.xianhao
|
}
|
if (this.dataList3[0].level == 'system1') {
|
this.dataListName = '系统'
|
}
|
if (this.dataList3[0].level == 'system2') {
|
this.dataListName = '分系统或设备'
|
}
|
if (this.dataList3[0].level == 'equipment') {
|
this.dataListName = '设备'
|
}
|
}
|
this.selectValue = this.value
|
if (this.devName) {
|
this.selectedData.push({id: res.data.deviceProductId, name: this.devName})
|
}
|
}else {
|
this.value = null
|
this.selectValue = this.value
|
}
|
if (!this.value){
|
this.$tip.alert('选择的设备已经不存在')
|
}
|
console.timeEnd('valueTime')
|
} else {
|
console.time('NoValueTime')
|
this.sysName = ''
|
this.subName = ''
|
this.devName = ''
|
console.timeEnd('NoValueTime')
|
}
|
console.time('TextTime')
|
// this.datas.forEach(d => {
|
// console.log(this.selectedData.findIndex(item => item.id === d.id), 'findIndex')
|
// if (this.selectedData.findIndex(item => item.id === d.id) == -1) {
|
// this.selectedData.push({id: d.id, name: d.name})
|
// }
|
// })
|
// let text = ''
|
// this.selectedData.forEach(d => {
|
// text = text + (text === '' ? '' : ':') + d.name
|
// })
|
this.text = this.devName
|
console.timeEnd('TextTime')
|
},
|
// cancelSelected(data) {
|
// this.selectedData.some((item, i) => {
|
// if (item.id === data.id) {
|
// this.selectedData.splice(i, 1)
|
// //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
|
// return true
|
// }
|
// })
|
// let text = ''
|
// this.selectedData.forEach(d => {
|
// text = text + (text === '' ? '' : ',') + d.name
|
// })
|
// this.text = text
|
// },
|
confirm() {
|
this.selectValue = ''
|
this.selectedData.forEach(d => {
|
this.selectValue = this.selectValue + (this.selectValue === '' ? '' : ',') + d.id
|
return
|
})
|
console.log(this.text, 'confirm this.text')
|
console.log(this.selectValue, 'confirm this.selectValue')
|
if (this.selectValue && this.selectValue != 'undefined') {
|
this.$emit('input', this.selectValue, this.text)
|
this.$emit('confirm', this.selectValue, this.text)
|
this.$refs.dialog.close()
|
}else{
|
this.$tip.alert('请先选择设备再确定')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.cascader ul li {
|
list-style: none;
|
}
|
|
.cascader .el-form {
|
margin-top: 20px;
|
}
|
|
.cascader .el-form-item {
|
margin-top: 100px;
|
}
|
|
/*.cascader .input {*/
|
/*margin-top: 200px;*/
|
/*}*/
|
|
.list {
|
width: 100%;
|
font-size: 16px;
|
border: 1px solid #EBEEF5;
|
color: #303133;
|
-webkit-transition: .3s;
|
transition: .3s;
|
background: #ffffff;
|
box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14);
|
height: 500px;
|
overflow: auto;
|
}
|
|
.cascader-ul {
|
margin: 0;
|
padding: 0;
|
}
|
|
.list ul li {
|
float: left;
|
width: 25%;
|
height: 40px;
|
text-align: left;
|
cursor: pointer;
|
line-height: 40px;
|
padding-left: 10px;
|
/*margin-left: 50px;*/
|
list-style: none;
|
}
|
.list1.list ul li {
|
width: 50%;
|
}
|
.list ul li:hover {
|
background-color: rgba(123, 224, 244, 0.5);
|
}
|
|
.list ul li:active {
|
background-color: rgba(123, 224, 244, 0.5);
|
}
|
|
.cascader .el-textarea__inner {
|
font-size: 30px;
|
}
|
.searchList-top .el-form-item__content .el-input-group{
|
vertical-align: baseline;
|
}
|
</style>
|
