<template>
|
<div>
|
<el-input v-model="text" @click.native="open()" suffix-icon="el-icon-arrow-down" slot="reference"
|
:placeholder="placeholder"/>
|
<zt-dialog ref="dialog" :append-to-body="true" :title="title" @confirm="confirm">
|
<el-row>
|
<el-col :span="14">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="舷号">
|
<el-select :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="系统">
|
<el-select :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="分系统">
|
<el-select :disabled="disabled" 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="设备">
|
<el-select :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-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: 'ZtTreeDialogSelectorNew',
|
components: {},
|
props: {
|
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
|
},
|
placeholder: String
|
},
|
inject: {
|
elForm: {
|
default: ''
|
}
|
},
|
data() {
|
return {
|
dataListShip: [],
|
dataListSys: [],
|
dataListSub: [],
|
dataListDev: [],
|
selectValueShip: '',
|
selectValueSys: '',
|
selectValueSub: '',
|
selectValueDev: '',
|
disabledShip: 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.setTextOnetime()
|
},
|
filterText: debounce(function (val) {
|
this.$refs.tree.filter(val)
|
}, 1000)
|
},
|
async mounted() {
|
let res = await this.$http.get("/product/getSubList?pid=0", null)
|
this.dataListShip = res.data
|
if (this.shipId){
|
this.disabledShip = true
|
this.selectValueShip = this.shipId
|
this.onSelectedShip(this.selectValueShip)
|
}else{
|
this.disabledShip = false
|
}
|
this.setTextOnetime()
|
},
|
methods: {
|
open() {
|
if (this.disabled || (this.elForm || {}).disabled) {
|
// 只读
|
} else {
|
this.$refs.dialog.open()
|
}
|
},
|
onInputChange(val) {
|
this.$refs.tree.filter(val)
|
},
|
async setTextOnetime() { // 组件没有初始化时设置text
|
if (!this.selectValue) {
|
this.text = ''
|
}
|
this.selectedData = []
|
let res2 = await this.$http.get(`/product/getListByIds?ids=${this.value}`, null)
|
this.datas = res2.data
|
console.log(this.datas,'this.datas')
|
|
this.datas.forEach(d => {
|
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 = ''
|
let res = await this.$http.get(`/product/getSubList?pid=${data}`, null)
|
this.dataListSys = res.data
|
},
|
async onSelectedSys(data) {
|
if (!data)
|
return
|
this.dataListSub = []
|
this.selectValueSub = ''
|
this.dataListDev = []
|
this.selectValueDev = ''
|
let res = await this.$http.get(`/product/getSubList?pid=${data}`, null)
|
console.log(res.data, 'onSelectedSys')
|
if (res.data.length > 0 && res.data[0].level === 'L3')
|
this.dataListSub = res.data
|
else
|
this.dataListDev = res.data
|
},
|
async onSelectedSub(data) {
|
if (!data)
|
return
|
this.dataListDev = []
|
this.selectValueDev = ''
|
let res = await this.$http.get(`/product/getSubList?pid=${data}`, null)
|
this.dataListDev = res.data
|
},
|
async onSelectedDev(data) {
|
console.log(this.multiple, 'this.multiple')
|
console.log(data, '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.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.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.selectValue =''
|
this.selectedData.forEach(d => {
|
this.selectValue = this.selectValue + (this.selectValue===''?'':',')+d.id
|
})
|
this.$emit('input', this.selectValue)
|
this.$emit('confirm', this.selectValue, this.selectedData)
|
this.$refs.dialog.close()
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
|
.tree {
|
border-right: 1px solid #DCDFE6;
|
}
|
|
.input-filter, .input-selected {
|
margin-bottom: 15px;
|
}
|
|
.input-selected input {
|
border-top: none;
|
border-left: none;
|
border-right: none;
|
border-radius: 0px;
|
}
|
|
</style>
|
