<template>
|
<div>
|
<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" :title="title" @confirm="confirm">
|
<!--<ul class="selector-ul-style1 selector-ul-style-first1" v-show="seldetailed">-->
|
<!--<li @click="onSelectedFirstProject(data[idField])" v-for="data in dataListFirstProject" :key="data[idField]"-->
|
<!--:value="data[idField]">{{data[textField]}}</li>-->
|
<!--</ul>-->
|
<el-row>
|
<el-col :span="12">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="专业" label-width="80px">
|
<el-select :disabled="disabled || disabledShip" v-model="selectValueMajor" :value-key="idField"
|
placeholder="选择专业" @change="onSelectedMajor" style="width: 100%">
|
<el-option v-for="data in dataListMajor" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="一级项目" label-width="80px">
|
<!--<el-input ref="inputVal" class="selector-cursor" style="cursor: pointer;" @click="ulClick" @focus="focus" :disabled="disabled" v-model="selectValueFirstProject" placeholder="选择专业"></el-input>-->
|
<!--<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 :disabled="disabled" v-model="selectValueFirstProject" :value-key="idField"
|
placeholder="选择一级项目" @change="onSelectedFirstProject" style="width: 100%">
|
<el-option v-for="data in dataListFirstProject" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<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 :disabled="disabled || disabledSecond" v-model="selectValueSecondProject"
|
:value-key="idField"
|
placeholder="选择二级项目" @change="onSelectedSecondProject" style="width: 100%">
|
<el-option v-for="data in dataListSecondProject" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="三级项目" label-width="80px">
|
<!--<el-input ref="inputVal" class="selector-cursor" style="cursor: pointer;" @click="ulClick" @focus="focus" :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 :disabled="disabled || disabledThird" v-model="selectValueThirdProject" :value-key="idField"
|
placeholder="选择三级项目" @change="onSelectedThirdProject" style="width: 100%">
|
<el-option v-for="data in dataListThirdProject" :key="data[idField]" :label="data[textField]"
|
:value="data[idField]"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<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 :disabled="disabled || disabledFourth" v-model="selectValueFourthProject"
|
:value-key="idField"
|
placeholder="选择四级项目" @change="onSelectedFourthProject" style="width: 100%">
|
<el-option v-for="data in dataListFourthProject" :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="2" style="text-align: center">
|
<zt-button @click="getProjectName" style="margin-top:90px" type="primary"><i class="el-icon-arrow-right"></i>
|
</zt-button>
|
</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 unique(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: 'ZtProjectListSelector',
|
components: {},
|
props: {
|
value: [String, Array],
|
projectId: 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 {
|
seldetailed: false,
|
dataListMajor: [],
|
dataListFirstProject: [],
|
dataListSecondProject: [],
|
dataListThirdProject: [],
|
dataListFourthProject: [],
|
selectValueMajor: '',
|
selectValueFirstProject: '',
|
selectValueSecondProject: '',
|
selectValueThirdProject: '',
|
selectValueFourthProject: '',
|
disabledShip: false,
|
disabledThird: false,
|
disabledFourth: false,
|
disabledSecond: 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() {
|
console.log(this.projectId, 'projectId')
|
let res = await this.$http.get(`/task/projectConstruction/projectMajor/${this.projectId}`)
|
this.dataListMajor = res.data
|
console.log(this.dataListMajor, '专业')
|
if (this.projectId) {
|
// this.disabledShip = true
|
// this.selectValueMajor = this.projectId
|
// console.log(this.projectId, 'this.projectId')
|
// this.onSelectedMajor(this.selectValueMajor)
|
} else {
|
// this.disabledShip = false
|
}
|
this.setTextOnetime()
|
},
|
methods: {
|
unique(arr) {
|
for (let i = 0, len = arr.length; i < len; i++) {
|
for (let j = i + 1, len = arr.length; j < len; j++) {
|
if (arr[i].id === arr[j].id) {
|
// this.text.splice(j,1)
|
arr.splice(j, 1);
|
j--; // 每删除一个数j的值就减1
|
len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
|
}
|
}
|
}
|
return arr;
|
},
|
getProjectName() {
|
if (this.selectValueFourthProject){
|
//this.selectedData = [];
|
let that = this
|
let text = this.dataListFourthProject.find(item => item.id === this.selectValueFourthProject)['name']
|
that.selectedData.push({id: this.selectValueFourthProject, name: text})
|
this.text = this.text + (this.text === '' ? '' : ',') + text
|
// this.selectedData = [];
|
// let text = this.dataListFourthProject.find(item => item.id === this.selectValueFourthProject)['name']
|
// this.selectedData.push({id: this.selectValueFourthProject, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
}
|
if (this.selectValueFourthProject ===''){
|
//this.selectedData = [];
|
if(this.selectValueThirdProject){
|
let text = this.dataListThirdProject.find(item => item.id === this.selectValueThirdProject)['name']
|
this.selectedData.push({id: this.selectValueThirdProject, name: text})
|
this.selectedData=[...new Set(this.selectedData)]
|
this.text = this.text + (this.text === '' ? '' : ',') + text
|
}
|
// this.selectedData = [];
|
// let text = this.dataListFourthProject.find(item => item.id === this.selectValueFourthProject)['name']
|
// this.selectedData.push({id: this.selectValueFourthProject, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
}
|
if (this.selectValueThirdProject ===''){
|
let newData = []
|
if(this.selectValueSecondProject){
|
let text = this.dataListSecondProject.find(item => item.id === this.selectValueSecondProject)['name']
|
console.log(this.dataListSecondProject,'this.dataListSecondProject')
|
console.log(this.selectValueSecondProject,'this.selectValueSecondProject')
|
this.selectedData.push({id: this.selectValueSecondProject, name: text})
|
// for (let i = 0, len = this.selectedData.length; i < len; i++) {
|
// for (let j = i + 1, len = this.selectedData.length; j < len; j++) {
|
// if (this.selectedData[i].id === this.selectedData[j].id) {
|
// this.selectedData.splice(j, 1);
|
// j--; // 每删除一个数j的值就减1
|
// len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
|
// }
|
// }
|
// }
|
console.log(this.selectedData,'二级项目的this.selectedData')
|
this.text = this.text + (this.text === '' ? '' : ',') + text
|
// this.selectedData = [];
|
// let text = this.dataListThirdProject.find(item => item.id === this.selectValueThirdProject)['name']
|
// this.selectedData.push({id: this.selectValueThirdProject, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
}
|
}
|
if (this.selectValueFirstProject === ''){
|
return ''
|
//this.selectedData = [];
|
// let text = this.dataListFirstProject.find(item => item.id === this.selectValueFirstProject)['name']
|
// this.selectedData.push({id: this.selectValueFirstProject, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
}
|
if (this.selectValueSecondProject === ''){
|
// this.selectedData = [];
|
if(this.selectValueFirstProject){
|
let text = this.dataListFirstProject.find(item => item.id === this.selectValueFirstProject)['name']
|
this.selectedData.push({id: this.selectValueFirstProject, name: text})
|
this.selectedData=[...new Set(this.selectedData)]
|
this.text = this.text + (this.text === '' ? '' : ',') + text
|
// let text = this.dataListSecondProject.find(item => item.id === this.selectValueSecondProject)['name']
|
// this.selectedData.push({id: this.selectValueSecondProject, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
// console.log(text,'text')
|
}
|
}
|
this.selectedData=[...new Set(this.selectedData)]
|
// if (!this.multiple) { // 单选
|
// this.selectedData = [];
|
// let text = this.dataListMajor.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.dataListMajor.find(item => item.id === data)['name']
|
// this.selectedData.push({id: data, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
// }
|
// this.dataListMajor = this.text
|
// this.seldetailed = false
|
// console.log(this.text, 'this.text')
|
// }
|
},
|
ulClick() {
|
this.$refs.inputVal.focus()
|
},
|
focus() {
|
this.seldetailed = !this.seldetailed
|
},
|
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 = []
|
if (this.value) {
|
let res2 = await this.$http.get(`/maintain/project-list/getProjectList?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 onSelectedMajor(data) {
|
if (!data)
|
return
|
this.dataListFirstProject = []
|
this.selectValueFirstProject = ''
|
this.dataListSecondProject = []
|
this.selectValueSecondProject = ''
|
this.dataListThirdProject = []
|
this.selectValueThirdProject = ''
|
this.dataListFourthProject = []
|
this.selectValueFourthProject = ''
|
// this.disabledShip = false
|
// this.disabledThird = false
|
// this.disabledFourth = false
|
// this.disabledSecond = false
|
console.log(this.projectId ,'onSelectedMajor, projectId')
|
console.log(this.data ,'onSelectedMajor, projectMajor')
|
let res = await this.$http.get(`/maintain/project-list/getProjectListFirstNode?projectId=${this.projectId}&projectMajor=${data}`)
|
//let res = await this.$http.get(`/product/getSubList?pid=${data}`, null)
|
this.dataListFirstProject = res.data
|
// this.seldetailed = true
|
console.log(res.data, 'this.dataListFirstProject this.dataListFirstProject')
|
},
|
async onSelectedFirstProject(data) {
|
if (!data)
|
return
|
this.dataListSecondProject = []
|
this.selectValueSecondProject = ''
|
this.dataListThirdProject = []
|
this.selectValueThirdProject = ''
|
this.dataListFourthProject = []
|
this.selectValueFourthProject = ''
|
let text = this.dataListFirstProject.find(item => item.id === data)['name']
|
// this.selectValueFirstProject = text
|
// this.seldetailed = false
|
let res = await this.$http.get(`/maintain/project-list/getProjectListSubNode?pid=${data}&isRange=0`)
|
if (res.data.length > 0) {
|
this.dataListSecondProject = res.data
|
console.log(this.dataListSecondProject, 'onSelectedFirstProject')
|
} else {
|
// this.disabledSecond = true
|
// this.disabledThird = true
|
// this.disabledFourth = true
|
// if (!this.multiple) { // 单选
|
// if (!data) {
|
// this.text = ('')
|
// } else {
|
// this.selectedData = [];
|
// let text = this.dataListFirstProject.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.dataListFirstProject.find(item => item.id === data)['name']
|
// this.selectedData.push({id: data, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
// }
|
// this.dataListFirstProject = this.text
|
// this.seldetailed = false
|
// console.log(this.text, 'this.text')
|
// }
|
}
|
},
|
async onSelectedSecondProject(data) {
|
if (!data)
|
return
|
this.dataListThirdProject = []
|
this.selectValueThirdProject = ''
|
this.dataListFourthProject = []
|
this.selectValueFourthProject = ''
|
let res = await this.$http.get(`/maintain/project-list/getProjectListSubNode?pid=${data}&isRange=0`)
|
if (res.data.length > 0) {
|
this.dataListThirdProject = res.data
|
console.log(res.data, 'onSelectedFirstProject')
|
} else {
|
// this.disabledThird = true
|
// this.disabledFourth = true
|
// if (!this.multiple) { // 单选
|
// if (!data) {
|
// this.text = ('')
|
// } else {
|
// this.selectedData = [];
|
// let text = this.dataListSecondProject.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.dataListSecondProject.find(item => item.id === data)['name']
|
// this.selectedData.push({id: data, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
// }
|
// this.dataListSecondProject = this.text
|
// this.seldetailed = false
|
// console.log(this.text, 'this.text')
|
// }
|
}
|
},
|
async onSelectedThirdProject(data) {
|
if (!data)
|
return
|
this.dataListFourthProject = []
|
this.selectValueFourthProject = ''
|
let res = await this.$http.get(`/maintain/project-list/getProjectListSubNode?pid=${data}&isRange=0`)
|
console.log(data ,'onSelectedThirdProject pid')
|
console.log(res ,'onSelectedThirdProject res')
|
|
if (res.data.length > 0) {
|
this.dataListFourthProject = res.data
|
console.log(this.dataListFourthProject, 'this.dataListThirdProject')
|
} else {
|
// this.disabledFourth = true
|
// if (!this.multiple) { // 单选
|
// if (!data) {
|
// this.text = ('')
|
// } else {
|
// this.selectedData = [];
|
// let text = this.dataListThirdProject.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.dataListThirdProject.find(item => item.id === data)['name']
|
// this.selectedData.push({id: data, name: text})
|
// this.text = this.text + (this.text === '' ? '' : ',') + text
|
// }
|
// this.selectValueThirdProject = this.text
|
// this.seldetailed = false
|
// console.log(this.text, 'this.text')
|
// }
|
}
|
},
|
// async onSelectedFourthProject(data) {
|
// if (!this.multiple) { // 单选
|
// if (!data) {
|
// this.text = ('')
|
// } else {
|
// this.selectedData = [];
|
// let text = this.dataListFourthProject.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.dataListFourthProject.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">
|
.selector-ul-style1{
|
position: absolute;
|
padding: 0;
|
height:270px;
|
width:44.5%;
|
list-style: none;
|
overflow: auto;
|
z-index:222;
|
}
|
.selector-ul-style1.selector-ul-style-first1{
|
top:38%;
|
left:88px;
|
}
|
.selector-cursor .el-input__inner{
|
cursor: pointer;
|
}
|
.selector-ul-style1 li{
|
font-size: 14px;
|
padding: 0 20px;
|
height: 34px;
|
cursor: pointer;
|
text-overflow: ellipsis;
|
line-height: 34px;
|
}
|
.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>
|
