|
@@ -1,8 +1,8 @@
|
|
<template>
|
|
<template>
|
|
<div tabindex="0" @blur="selectClihide()" style="display: inline-block;position: relative;">
|
|
<div tabindex="0" @blur="selectClihide()" style="display: inline-block;position: relative;">
|
|
<div :class="disabled ? 'disabledTrue' : 'disabledFalse'" @mouseenter="moveIonDiv" @mouseleave="outIonDiv">
|
|
<div :class="disabled ? 'disabledTrue' : 'disabledFalse'" @mouseenter="moveIonDiv" @mouseleave="outIonDiv">
|
|
- <div :style="`width:${selectWidth}px;height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'">
|
|
|
|
- <div :style="'line-height: '+selectHeight+'px'" :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
|
|
|
|
|
|
+ <div :style="`width:${selectWidth}px;height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click.stop="selectCli" :ref="disabled ? '' : 'selectDiv'">
|
|
|
|
+ <div :style="'line-height: '+selectHeight+'px;font-size: '+selectFontSize+'px;'" :class="(selectName == $t('defaultText.pleaseChoose') || selectName == $t('qing-xuan-ze-bu-men')) ? 'selecttex selecttexXuan' : 'selecttex'">
|
|
<ww-open-data type='departmentName' :openid='selectName'></ww-open-data>
|
|
<ww-open-data type='departmentName' :openid='selectName'></ww-open-data>
|
|
<!-- {{selectName}} -->
|
|
<!-- {{selectName}} -->
|
|
</div>
|
|
</div>
|
|
@@ -106,12 +106,17 @@ export default {
|
|
widthStr: {
|
|
widthStr: {
|
|
type: String,
|
|
type: String,
|
|
default: false
|
|
default: false
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ // 默认文字
|
|
|
|
+ selectNameChuan: {
|
|
|
|
+ type: String
|
|
|
|
+ },
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
selectWidth: '150',
|
|
selectWidth: '150',
|
|
selectHeight: '28',
|
|
selectHeight: '28',
|
|
|
|
+ selectFontSize: '12',
|
|
show: false, // 下拉框
|
|
show: false, // 下拉框
|
|
options: [], // 列表数据
|
|
options: [], // 列表数据
|
|
transitionBoxLiIdx: '-1', // hover 背景色
|
|
transitionBoxLiIdx: '-1', // hover 背景色
|
|
@@ -131,8 +136,8 @@ export default {
|
|
watch: {
|
|
watch: {
|
|
subject: {
|
|
subject: {
|
|
handler(newValue, oldValue) {
|
|
handler(newValue, oldValue) {
|
|
- console.log(newValue, '看看值')
|
|
|
|
this.options = newValue
|
|
this.options = newValue
|
|
|
|
+ console.log(this.options, '我收到的数据')
|
|
if(newValue) {
|
|
if(newValue) {
|
|
|
|
|
|
}
|
|
}
|
|
@@ -150,36 +155,40 @@ export default {
|
|
console.log(newValue, oldValue)
|
|
console.log(newValue, oldValue)
|
|
this.optionsOId = newValue
|
|
this.optionsOId = newValue
|
|
if(this.optionsOId) {
|
|
if(this.optionsOId) {
|
|
- for(let i in this.options) {
|
|
|
|
- if(this.options[i].id == this.optionsOId || this.options[i].auditorId == this.optionsOId) {
|
|
|
|
- this.selectName = this.options[i].name || this.options[i].auditorName
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ this.traverseArr(this.options, this.optionsOId)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
widthStr: {
|
|
widthStr: {
|
|
handler(newValue, oldValue) {
|
|
handler(newValue, oldValue) {
|
|
- console.log('卧槽')
|
|
|
|
this.selectWidth = newValue
|
|
this.selectWidth = newValue
|
|
},
|
|
},
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- created() {},
|
|
|
|
- mounted() {
|
|
|
|
|
|
+ created() {
|
|
|
|
+ console.log(this.size)
|
|
if(this.size == 'mini') {
|
|
if(this.size == 'mini') {
|
|
this.selectWidth = '150'
|
|
this.selectWidth = '150'
|
|
this.selectHeight = '28'
|
|
this.selectHeight = '28'
|
|
} else if(this.size == 'small') {
|
|
} else if(this.size == 'small') {
|
|
this.selectWidth = '191'
|
|
this.selectWidth = '191'
|
|
this.selectHeight = '32'
|
|
this.selectHeight = '32'
|
|
- }
|
|
|
|
|
|
+ } else if(this.size == 'medium') {
|
|
|
|
+ this.selectWidth = '205'
|
|
|
|
+ this.selectHeight = '40'
|
|
|
|
+ this.selectFontSize = '14'
|
|
|
|
+ }
|
|
if(this.widthStr) {
|
|
if(this.widthStr) {
|
|
- console.log('one')
|
|
|
|
this.selectWidth = this.widthStr
|
|
this.selectWidth = this.widthStr
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ if(this.selectNameChuan) {
|
|
|
|
+ this.selectName = this.selectNameChuan
|
|
|
|
+ }
|
|
if(this.subject) {
|
|
if(this.subject) {
|
|
this.options = JSON.parse(JSON.stringify(this.subject))
|
|
this.options = JSON.parse(JSON.stringify(this.subject))
|
|
|
|
+ console.log(this.options, '我收到的数据')
|
|
}
|
|
}
|
|
if(this.subjectId) {
|
|
if(this.subjectId) {
|
|
this.optionsOId = JSON.parse(JSON.stringify(this.subjectId))
|
|
this.optionsOId = JSON.parse(JSON.stringify(this.subjectId))
|
|
@@ -189,13 +198,28 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- console.log(this.subjectId)
|
|
|
|
this.dailyListIndex = this.idx
|
|
this.dailyListIndex = this.idx
|
|
|
|
+ console.log(this.selectWidth, this.selectHeight)
|
|
// this.moveIon = JSON.parse(JSON.stringify(this.clearable))
|
|
// this.moveIon = JSON.parse(JSON.stringify(this.clearable))
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ // 循环取值
|
|
|
|
+ traverseArr(arr, idd){
|
|
|
|
+ console.log(arr, idd, '传过来的值')
|
|
|
|
+ let id = idd[0]
|
|
|
|
+ if(arr) {
|
|
|
|
+ for(var i in arr) {
|
|
|
|
+ if(arr[i].value == id) {
|
|
|
|
+ this.selectName = arr[i].label
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if(arr[i].children) {
|
|
|
|
+ this.traverseArr(arr[i].children, idd)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
selectCli() {
|
|
selectCli() {
|
|
- console.log('我被你触发了')
|
|
|
|
if(!this.disabled) {
|
|
if(!this.disabled) {
|
|
this.$refs.selectDiv.focus()
|
|
this.$refs.selectDiv.focus()
|
|
this.classDiv = !this.classDiv
|
|
this.classDiv = !this.classDiv
|
|
@@ -205,10 +229,13 @@ export default {
|
|
},
|
|
},
|
|
selectClihide() {
|
|
selectClihide() {
|
|
if(this.classDiv) {
|
|
if(this.classDiv) {
|
|
- this.transitionBoxLiIdx = ''
|
|
|
|
- this.show = !this.show
|
|
|
|
- this.classDiv = false
|
|
|
|
- this.move = false
|
|
|
|
|
|
+ let that = this
|
|
|
|
+ setTimeout(function () {
|
|
|
|
+ that.transitionBoxLiIdx = ''
|
|
|
|
+ that.show = !that.show
|
|
|
|
+ that.classDiv = false
|
|
|
|
+ that.move = false
|
|
|
|
+ }, 100)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
liMouseOver(index, item) {
|
|
liMouseOver(index, item) {
|
|
@@ -223,6 +250,7 @@ export default {
|
|
},
|
|
},
|
|
// 点击
|
|
// 点击
|
|
liClist(item) {
|
|
liClist(item) {
|
|
|
|
+ console.log('我被你点击了')
|
|
if(!item.children) {
|
|
if(!item.children) {
|
|
this.selectName = item.label
|
|
this.selectName = item.label
|
|
let obj = {
|
|
let obj = {
|
|
@@ -235,14 +263,16 @@ export default {
|
|
this.selectName = item.label
|
|
this.selectName = item.label
|
|
let obj = {
|
|
let obj = {
|
|
id: item.value,
|
|
id: item.value,
|
|
- distinction: this.distinction
|
|
|
|
|
|
+ distinction: this.distinction,
|
|
|
|
+ item: item
|
|
}
|
|
}
|
|
this.$emit('vueCasader', obj)
|
|
this.$emit('vueCasader', obj)
|
|
|
|
+ } else {
|
|
|
|
+ this.transitionBoxLiIdx = ''
|
|
|
|
+ this.show = !this.show
|
|
|
|
+ this.classDiv = false
|
|
|
|
+ this.move = false
|
|
}
|
|
}
|
|
- this.transitionBoxLiIdx = ''
|
|
|
|
- this.show = !this.show
|
|
|
|
- this.classDiv = false
|
|
|
|
- this.move = false
|
|
|
|
},
|
|
},
|
|
// 接受子组件传过来的值
|
|
// 接受子组件传过来的值
|
|
cascaderOptionClick(item) {
|
|
cascaderOptionClick(item) {
|
|
@@ -267,7 +297,9 @@ export default {
|
|
label: this.$t('defaultText.pleaseChoose'),
|
|
label: this.$t('defaultText.pleaseChoose'),
|
|
value: ''
|
|
value: ''
|
|
}
|
|
}
|
|
- this.show = true
|
|
|
|
|
|
+ this.show = false
|
|
|
|
+ this.classDiv = false
|
|
|
|
+ this.move = false
|
|
this.liClist(obj)
|
|
this.liClist(obj)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -344,7 +376,7 @@ export default {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin: 5px 0;
|
|
margin: 5px 0;
|
|
// box-shadow: 0 2px 12px #dfdfdf;
|
|
// box-shadow: 0 2px 12px #dfdfdf;
|
|
- max-height: 274px;
|
|
|
|
|
|
+ height: 274px;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
z-index: 500 !important;
|
|
z-index: 500 !important;
|
|
}
|
|
}
|