<template>
|
<div>
|
<el-input v-show='isShow' v-model="text" :disabled="disabled" @click.native="open()"
|
suffix-icon="el-icon-arrow-down" slot="reference"
|
:placeholder="placeholder"/>
|
|
<zt-dialog class="auto-expand" ref="dialog" :append-to-body="true" :title="title" @confirm="confirm">
|
<!--<div>-->
|
<!--<div class="selector-ul-style" v-show="seldetailed">-->
|
<!--<ul>-->
|
<!--<li @click="onSelectedDev(data[idField])" v-for="data in dataListDev" :key="data[idField]"-->
|
<!--:value="data[idField]">{{data[textField]}}</li>-->
|
<!--</ul>-->
|
<!--<div class="popper-arrow"></div>-->
|
<!--</div>-->
|
<!--</div>-->
|
<el-row>
|
<el-col :span="14">
|
<el-container>
|
<el-main class="is_el-row">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="舷号" label-width="80px">
|
<el-select ref='select_ship' :disabled="disabled || disabledShip" v-model="selectValueShip"
|
:value-key="idField"
|
placeholder="选择舷号" @change="onSelectedShip" style="width: 100%">
|
<el-option v-for="data in dataListShip" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="系统" label-width="80px">
|
<!--<ul class="selector-ul-style">-->
|
<!--<li @click="onSelectedSys(data[idField])" v-for="data in dataListSys" :key="data[idField]"-->
|
<!--:value="data[idField]">{{data[textField]}}</li>-->
|
<!--</ul>-->
|
<el-select ref="select_sys" name="sys" :disabled="disabled" v-model="selectValueSys"
|
:value-key="idField"
|
placeholder="选择系统" @change="onSelectedSys" style="width: 100%">
|
<el-option v-for="data in dataListSys" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="分系统" label-width="80px">
|
<!--<ul class="selector-ul-style">-->
|
<!--<li @click="onSelectedSub(data[idField])" v-for="data in dataListSub" :key="data[idField]"-->
|
<!--:value="data[idField]">{{data[textField]}}</li>-->
|
<!--</ul>-->
|
<el-select ref="select_sub" :disabled="disabled || disabledSub" v-model="selectValueSub"
|
:value-key="idField"
|
placeholder="选择分系统" @change="onSelectedSub" style="width: 100%">
|
<el-option v-for="data in dataListSub" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="设备" label-width="80px">
|
<!--<el-input ref="inputVal" class="selector-cursor" style="cursor: pointer;" :disabled="disabled" v-model="selectValueDev" placeholder="选择设备"></el-input>-->
|
<!--<ul class="selector-ul-style">-->
|
<!--<li @click="onSelectedDev(data[idField])" v-for="data in dataListDev" :key="data[idField]"-->
|
<!--:value="data[idField]">{{data[textField]}}</li>-->
|
<!--</ul>-->
|
<el-select ref="select_device" :disabled="disabled" v-model="selectValueDev" :value-key="idField"
|
placeholder="选择设备" @change="onSelectedDev" style="width: 100%">
|
<el-option v-for="data in dataListDev" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<!-- <el-row>
|
<el-col :span="24">
|
<el-form-item label="子设备" label-width="80px">
|
<!–<ul class="selector-ul-style">–>
|
<!–<li @click="onSelectedDev2(data[idField])" v-for="data in dataListDev2" :key="data[idField]"–>
|
<!–:value="data[idField]">{{data[textField]}}</li>–>
|
<!–</ul>–>
|
<el-select ref="select4" :disabled="disabled" v-model="selectValueDev2" :value-key="idField"
|
placeholder="选择子设备" @change="onSelectedDev2" style="width: 100%">
|
<el-option v-for="data in dataListDev2" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>-->
|
</el-main>
|
</el-container>
|
</el-col>
|
<el-col :span="10">
|
<el-container>
|
<el-main>
|
<el-input class="input-selected" v-model="selectedText" size="small" readonly/>
|
<div v-for="item in selectedData" :key="item[idField]" style="margin-top: 10px">
|
<div>
|
<label style="width: 80%; display: inline-block"> {{ item[textField] }}</label>
|
<el-link v-if="multiple" @click="cancelSelected(item)" type="danger">
|
<i class="el-icon-close" title="删除"></i>
|
</el-link>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
</el-col>
|
</el-row>
|
</zt-dialog>
|
</div>
|
|
</template>
|
<script>
|
import {debounce} from 'lodash'
|
|
export default {
|
name: 'ZtProductDialogSelector',
|
components: {},
|
props: {
|
isShow: {
|
type: String,
|
default: true
|
},
|
value: [String, Array],
|
shipId: String,
|
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: 'sy'
|
},
|
placeholder: String
|
},
|
inject: {
|
elForm: {
|
default: ''
|
}
|
},
|
data() {
|
return {
|
toggleMenu:true,
|
devTimer: null,
|
tmpSubVal: '',
|
tmpDevVal: '',
|
dataListSubId: '',
|
dataListSubText: '',
|
seldetailed: false,
|
dataListShip: [],
|
dataListSys: [],
|
dataListSub: [],
|
dataListDev: [],
|
dataListDev2: [],
|
selectValueShip: '',
|
selectValueSys: '',
|
selectValueSub: '',
|
selectValueDev: '',
|
selectValueDev2: '',
|
disabledShip: false,
|
disabledSub: false,
|
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(() => {
|
this.setTextOnetime(this.toggleMenu)
|
})
|
|
},
|
'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: {
|
/* setDefault() {
|
if (this.tmpDevVal != '') {
|
//alert(this.tmpSubVal)
|
this.selectValueSub = this.tmpSubVal
|
this.selectValueDev = this.tmpDevVal
|
}
|
// window.clearTimeout(this.devTimer)
|
},*/
|
async getShipId() {
|
let res = await this.$http.get("/ztProduct/getShipList", {params:{area:this.area}})
|
this.dataListShip = res.data
|
if (this.shipId) {
|
this.disabledShip = true
|
this.selectValueShip = this.shipId
|
this.onSelectedShip(this.selectValueShip)
|
} else {
|
this.disabledShip = false
|
}
|
this.$nextTick(() => {
|
this.setTextOnetime()
|
})
|
},
|
open() {
|
let that = this
|
this.toggleMenu = true
|
//setTimeout(that.setDefault, 2000)
|
if (this.disabled || (this.elForm || {}).disabled) {
|
// 只读
|
} else {
|
console.log(this.value, 'this.value')
|
this.getShipId()
|
this.$refs.dialog.open()
|
}
|
},
|
onInputChange(val) {
|
this.$refs.tree.filter(val)
|
},
|
async setTextOnetime() { // 组件没有初始化时设置text
|
if (!this.selectValue) {
|
this.text = ''
|
}
|
this.selectedData = []
|
if (this.value) {
|
let res2 = await this.$http.get(`/ztProduct/getListByIds?ids=${this.value}`, null)
|
this.datas = res2.data
|
console.log(this.datas, 'this.datas')
|
if (this.datas.length > 0) {
|
let res = await this.$http.get(`/ztProduct/${this.datas[this.datas.length - 1].id}`, null)
|
console.log(res, 'get product')
|
if (res.data.shipProductId != null) {
|
this.selectValueShip = res.data.shipProductId
|
let res_sys = await this.$http.get(`/ztProduct/getSubList?pid=${this.selectValueShip}`, null)
|
this.dataListSys = res_sys.data
|
}
|
if (res.data.sysProductId != null) {
|
this.selectValueSys = res.data.sysProductId
|
let devicePid = this.selectValueSys
|
if (res.data.subSysProductId != null) {
|
let res_sub = await this.$http.get(`/ztProduct/getSubList?pid=${this.selectValueSys}`, null)
|
this.dataListSub = res_sub.data
|
this.selectValueSub = res.data.subSysProductId
|
devicePid = res.data.subSysProductId
|
//this.tmpSubVal = res.data.subSysProductId
|
}
|
let res_dev = await this.$http.get(`/ztProduct/getSubList?pid=${devicePid}`, null)
|
let isSubDevice = false;
|
for (let item of res_dev.data) {
|
if (item.level == 'system2') {
|
isSubDevice = true
|
break
|
}
|
}
|
if (isSubDevice) {
|
this.dataListSub = res_dev.data
|
if (res.data.deviceProductId != null) {
|
this.selectValueSub = res.data.deviceProductId
|
}
|
}else {
|
this.dataListDev = res_dev.data
|
if (res.data.deviceProductId != null) {
|
this.selectValueDev = res.data.deviceProductId
|
}
|
}
|
}
|
}
|
}else{
|
this.datas=[]
|
//this.dataListShip = []
|
if (this.shipId)
|
this.selectValueShip = this.shipId
|
else
|
this.selectValueShip = ''
|
this.dataListSys = []
|
this.selectValueSys = ''
|
this.dataListSub = []
|
this.selectValueSub = ''
|
this.dataListDev = []
|
this.selectValueDev = ''
|
this.dataListDev2 = []
|
this.selectValueDev2 = ''
|
}
|
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 = text
|
},
|
|
async onSelectedShip(data) {
|
this.dataListSys = []
|
this.selectValueSys = ''
|
this.dataListSub = []
|
this.selectValueSub = ''
|
this.dataListDev = []
|
this.selectValueDev = ''
|
this.dataListDev2 = []
|
this.selectValueDev2 = ''
|
let res = await this.$http.get(`/ztProduct/getSubList?pid=${data}`, null)
|
this.dataListSys = res.data
|
this.$refs.select_sys.toggleMenu()
|
console.log(this.dataListSys, '系统数据')
|
},
|
async onSelectedSys(data) {
|
if (!data)
|
return
|
this.dataListSub = []
|
this.selectValueSub = ''
|
this.dataListDev = []
|
this.selectValueDev = ''
|
this.dataListDev2 = []
|
this.selectValueDev2 = ''
|
let res = await this.$http.get(`/ztProduct/getSubList?pid=${data}`, null)
|
console.log(res.data, 'onSelectedSys')
|
//如果又有分系統又有子系統，就有問題
|
let hasSystem2 = false;
|
for (let item of res.data) {
|
if (item.level == 'system2') {
|
hasSystem2 = true
|
break
|
}
|
}
|
if (hasSystem2) { // 有分系统
|
this.dataListSub = res.data
|
if(this.toggleMenu == true){
|
this.$refs.select_sub.toggleMenu()
|
}
|
//this.disabledSub = false
|
} else {
|
console.log(this.$refs.select_device, 'this.$refs.select_device')
|
if(this.toggleMenu == true){
|
this.$refs.select_device.toggleMenu()
|
}
|
this.seldetailed = true
|
this.dataListDev = res.data
|
// this.disabledSub = true
|
}
|
},
|
async onSelectedSub(data) {
|
if (!data)
|
return
|
this.dataListDev = []
|
this.selectValueDev = ''
|
this.dataListDev2 = []
|
this.selectValueDev2 = ''
|
let res = await this.$http.get(`/ztProduct/getSubList?pid=${data}`, null)
|
this.dataListDev = res.data
|
if (!data) {
|
this.text = ('')
|
} else {
|
this.selectedData = [];
|
this.dataListSubText = this.dataListSub.find(item => item.id === data)['name']
|
this.dataListSubId = this.dataListSub.find(item => item.id === data)['id']
|
this.selectedData.push({id: data, name: this.dataListSubText})
|
this.text = this.dataListSubText
|
console.log(this.dataListSubText, this.dataListSubId, '分系统数据')
|
}
|
if(this.toggleMenu == true){
|
this.$refs.select_device.toggleMenu()
|
}
|
},
|
async onSelectedDev(data) {
|
/* let res = await this.$http.get(`/ztProduct/getSubList?pid=${data}`, null)
|
if (res.data.length > 0) {
|
this.dataListDev = res.data
|
this.$refs.select4.toggleMenu()
|
console.log(this.dataListDev,'this.dataListDev')
|
} else {*/
|
if (!this.multiple) { // 单选
|
if (!data) {
|
this.text = ('')
|
} else {
|
this.selectedData = [];
|
let text = this.dataListDev.find(item => item.id === data)['name']
|
this.selectedData.push({id: data, name: text})
|
this.selectedData = this.selectedData.filter(item => item.id !== this.dataListSubId)
|
//delete this.selectedData
|
console.log(this.selectedData, 'this.selectedData的数据')
|
//delete this.selectedData[0]
|
this.text = text
|
}
|
} else { // 多选
|
// alert(55)
|
let hasItem = false
|
this.dataListSubText = ''
|
this.selectedData.forEach(d => {
|
if (d.id === data) {
|
hasItem = true
|
return
|
}
|
})
|
console.log(hasItem, 'hasItem')
|
if (!hasItem) {
|
this.dataListSubText = ''
|
let text = this.dataListDev.find(item => item.id === data)['name']
|
this.selectedData.push({id: data, 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
|
console.log(this.text, 'this.text WT wente')
|
}
|
//}
|
},
|
async onSelectedDev2(data) {
|
if (!this.multiple) { // 单选
|
if (!data) {
|
this.text = ('')
|
} else {
|
this.selectedData = [];
|
let text = this.dataListDev.find(item => item.id === data)['name']
|
this.selectedData.push({id: data, name: text})
|
this.selectedData = this.selectedData.filter(item => item.id !== this.dataListSubId)
|
this.text = text
|
}
|
} else { // 多选
|
let hasItem = false
|
this.selectedData.forEach(d => {
|
if (d.id === data) {
|
hasItem = true
|
return
|
}
|
})
|
console.log(hasItem, 'hasItem')
|
if (!hasItem) {
|
let text = this.dataListDev.find(item => item.id === data)['name']
|
this.selectedData.push({id: data, name: text})
|
this.selectedData = this.selectedData.filter(item => item.id !== this.dataListSubId)
|
this.text = this.text + (this.text === '' ? '' : ',') + text
|
}
|
console.log(this.text, 'this.text')
|
}
|
},
|
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.toggleMenu =false
|
this.selectValue = ''
|
this.selectedData.forEach(d => {
|
this.selectValue = this.selectValue + (this.selectValue === '' ? '' : ',') + d.id
|
})
|
this.$emit('input', this.selectValue, this.text)
|
this.$emit('confirm', this.selectValue, this.selectedData, this.text)
|
this.$refs.dialog.close()
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
/*.auto-expand .el-select-dropdown.el-popper{*/
|
/*display: block !important;*/
|
/*}*/
|
.is-expand {
|
display: block !important;
|
}
|
|
.selector-ul-style {
|
position: absolute;
|
height: 270px;
|
width: 49%;
|
top: 270px;
|
left: 110px;
|
|
overflow: auto;
|
z-index: 222;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
|
}
|
|
.selector-cursor .el-input__inner {
|
cursor: pointer;
|
}
|
|
.selector-ul-style ul {
|
padding: 0;
|
list-style: none;
|
}
|
|
.selector-ul-style li {
|
font-size: 14px;
|
padding: 0 20px;
|
height: 34px;
|
cursor: pointer;
|
text-overflow: ellipsis;
|
line-height: 34px;
|
}
|
|
.popper-arrow::after {
|
content: '';
|
position: absolute;
|
width: 0;
|
height: 0;
|
border: 50px solid transparent;
|
border-width: 86.6px 50px;
|
border-bottom-color: red;
|
}
|
|
.tree {
|
border-right: 1px solid #DCDFE6;
|
}
|
|
.zt .el-container .is_el-row .el-row {
|
margin-bottom: 0px;
|
}
|
|
.input-filter, .input-selected {
|
margin-bottom: 15px;
|
}
|
|
.input-selected input {
|
border-top: none;
|
border-left: none;
|
border-right: none;
|
border-radius: 0px;
|
}
|
|
</style>
|
