|
@@ -3,26 +3,57 @@
|
|
|
<!-- <div :style="'width:' + selectWidth + 'px;height:' + selectHeight + 'px'" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'"> -->
|
|
|
<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 v-if="!multiSelect" :style="'line-height: '+selectHeight+'px'" :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
|
|
|
<ww-open-data type='userName' :openid='selectName'></ww-open-data>
|
|
|
<!-- {{selectName}} -->
|
|
|
</div>
|
|
|
+ <div v-if="multiSelect" :style="'line-height: '+selectHeight+'px;margin-left: -10px'" :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
|
|
|
+ <span v-if="multiSelectList.length > 0">
|
|
|
+ <span v-if="!tile">
|
|
|
+ <span class="all">
|
|
|
+ <ww-open-data type='userName' :openid='multiSelectList[0].name'></ww-open-data>
|
|
|
+ <!-- {{multiSelectList[0].name}} -->
|
|
|
+ <i class="el-icon-error" v-if="!disabled" @click.stop="deleteMultiSelectList('-1')"></i>
|
|
|
+ </span>
|
|
|
+ <span class="all" v-if="multiSelectList.length > 1"> + {{multiSelectList.length - 1}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-if="tile">
|
|
|
+ <span class="all" style="margin-right: 6px" v-for="(items, indexs) in multiSelectList" :key="indexs">
|
|
|
+ <ww-open-data type='userName' :openid='multiSelectList[0].name'></ww-open-data>
|
|
|
+ <!-- {{items.name}} -->
|
|
|
+ <i class="el-icon-error" @click.stop="deleteMultiSelectList(indexs)" v-if="!disabled"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span v-else class="allTwo">{{$t('defaultText.pleaseChoose')}}</span>
|
|
|
+ </div>
|
|
|
<i :class=" move ? 'el-icon-arrow-down iostu iostuHover' : 'el-icon-arrow-down iostu'" v-if="!moveIon"></i>
|
|
|
- <i v-if="moveIon" class="el-icon-circle-close iostu" @click="clearDelete"></i>
|
|
|
+ <i v-if="moveIon" class="el-icon-circle-close iostu" @click.stop="clearDelete"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<transition name="el-zoom-in-top">
|
|
|
<div v-show="show" style="position: relative;z-index: 99;">
|
|
|
<div class="transitionBox">
|
|
|
<ul class="transitionBoxUl">
|
|
|
- <li :class="transitionBoxLiIdx == index ? 'liHover' : ''" v-for="(item, index) in options" :key="index" @mouseover="liMouseOver(index)" @click="liClick(item)">
|
|
|
- <span v-if="item.name">
|
|
|
- <ww-open-data type='userName' :openid='item.name'></ww-open-data>
|
|
|
- </span>
|
|
|
- <span v-if="item.auditorName">
|
|
|
- <ww-open-data type='userName' :openid='item.auditorName'></ww-open-data>
|
|
|
+ <li :class="transitionBoxLiIdx == index ? 'liHover' : ''" v-for="(item, index) in options" :key="index" @mouseover="liMouseOver(index)" @click="liClick(item, index)">
|
|
|
+ <span v-if="!multiSelect">
|
|
|
+ <span v-if="item.name">
|
|
|
+ <ww-open-data type='userName' :openid='item.name'></ww-open-data>
|
|
|
+ </span>
|
|
|
+ <span v-if="item.auditorName">
|
|
|
+ <ww-open-data type='userName' :openid='item.auditorName'></ww-open-data>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span v-if="multiSelect">
|
|
|
+ <span :class="item.flg ? 'hoverSpan hoverSpanHover' : 'hoverSpan'">
|
|
|
+ <span>
|
|
|
+ <ww-open-data type='userName' :openid='item.name'></ww-open-data>
|
|
|
+ <!-- {{item.name}} -->
|
|
|
+ </span>
|
|
|
+ <span v-if="item.flg"><i class="el-icon-check"></i></span>
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- <!-- {{item.name || item.auditorName}} -->
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
@@ -41,7 +72,17 @@ export default {
|
|
|
type: String,
|
|
|
},
|
|
|
subjectId: {
|
|
|
- type: [String, Number]
|
|
|
+ type: [String, Number, Array]
|
|
|
+ },
|
|
|
+ // 是否支持多选
|
|
|
+ multiSelect: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 是否平铺 (需要 multiSelect 为 true)
|
|
|
+ tile: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
},
|
|
|
// 当前页面用到的第几个
|
|
|
distinction: {
|
|
@@ -56,6 +97,11 @@ export default {
|
|
|
type: Boolean,
|
|
|
default: false, // 默认值,不是填写日报
|
|
|
},
|
|
|
+ // 宽度
|
|
|
+ widthStr: {
|
|
|
+ type: String,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
// 剩下统一索引
|
|
|
index: {
|
|
|
type: String
|
|
@@ -89,6 +135,7 @@ export default {
|
|
|
return {
|
|
|
selectWidth: '150',
|
|
|
selectHeight: '28',
|
|
|
+ selectFontSize: '12',
|
|
|
show: false, // 下拉框
|
|
|
options: [], // 列表数据
|
|
|
transitionBoxLiIdx: '', // hover 背景色
|
|
@@ -98,7 +145,8 @@ export default {
|
|
|
dailyListObj: null, // 填写日报的数据
|
|
|
dailyListIndex: null, // 日报点的索引
|
|
|
move: false,
|
|
|
- moveIon: false
|
|
|
+ moveIon: false,
|
|
|
+ multiSelectList: []
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
@@ -125,14 +173,32 @@ export default {
|
|
|
handler(newValue, oldValue) {
|
|
|
console.log(newValue, oldValue)
|
|
|
this.optionsOId = newValue
|
|
|
- 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.multiSelectList = []
|
|
|
+ if(!this.multiSelect) {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.multiSelect) {
|
|
|
+ for(var i in this.options) {
|
|
|
+ for(var j in this.optionsOId) {
|
|
|
+ if(this.options[i].id == this.optionsOId[j] || this.options[i].auditorId == this.optionsOId[j]) {
|
|
|
+ this.multiSelectList.push(this.options[i])
|
|
|
+ this.options[i].flg = true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ },
|
|
|
+ widthStr: {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.selectWidth = newValue
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
created() {},
|
|
@@ -143,21 +209,41 @@ export default {
|
|
|
} else if(this.size == 'small') {
|
|
|
this.selectWidth = '191'
|
|
|
this.selectHeight = '32'
|
|
|
- }
|
|
|
+ } else if(this.size == 'medium') {
|
|
|
+ this.selectWidth = '205'
|
|
|
+ this.selectHeight = '40'
|
|
|
+ this.selectFontSize = '14'
|
|
|
+ }
|
|
|
+ if(this.widthStr) {
|
|
|
+ this.selectWidth = this.widthStr
|
|
|
+ }
|
|
|
+
|
|
|
if(this.subject) {
|
|
|
this.options = JSON.parse(JSON.stringify(this.subject))
|
|
|
}
|
|
|
if(this.subjectId) {
|
|
|
- this.optionsOId = JSON.parse(JSON.stringify(this.subjectId))
|
|
|
- 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.multiSelectList = []
|
|
|
+ if(!this.multiSelect) {
|
|
|
+ this.optionsOId = JSON.parse(JSON.stringify(this.subjectId))
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.multiSelect) {
|
|
|
+ for(var i in this.options) {
|
|
|
+ for(var j in this.optionsOId) {
|
|
|
+ if(this.options[i].id == this.optionsOId[j] || this.options[i].auditorId == this.optionsOId[j]) {
|
|
|
+ this.multiSelectList.push(this.options[i])
|
|
|
+ this.options[i].flg = true
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- console.log(this.subjectId)
|
|
|
+ console.log(this.subject)
|
|
|
this.dailyListIndex = this.idx
|
|
|
- // this.moveIon = JSON.parse(JSON.stringify(this.clearable))
|
|
|
},
|
|
|
methods: {
|
|
|
selectCli() {
|
|
@@ -174,33 +260,59 @@ export default {
|
|
|
this.show = !this.show
|
|
|
this.classDiv = false
|
|
|
this.move = false
|
|
|
+ if(this.multiSelect) {
|
|
|
+ let obj = {
|
|
|
+ // id: nameId,
|
|
|
+ distinction: this.distinction,
|
|
|
+ index: this.index, // 选中的索引
|
|
|
+ other: this.other,
|
|
|
+ arrUserList: this.multiSelectList
|
|
|
+ }
|
|
|
+ this.$emit("selectCal", obj)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
liMouseOver(index) {
|
|
|
this.transitionBoxLiIdx = index
|
|
|
},
|
|
|
- liClick(item) {
|
|
|
+ liClick(item, itemIndex) {
|
|
|
let nameId = item.id || item.auditorId
|
|
|
- if(this.flg) {
|
|
|
- let obj = {
|
|
|
- id: nameId,
|
|
|
- idx: this.dailyListIndex
|
|
|
+ if(!this.multiSelect) {
|
|
|
+ if(this.flg) {
|
|
|
+ let obj = {
|
|
|
+ id: nameId,
|
|
|
+ idx: this.dailyListIndex
|
|
|
+ }
|
|
|
+ this.$emit("selectCatCli", obj);
|
|
|
+ } else {
|
|
|
+ let obj = {
|
|
|
+ id: nameId,
|
|
|
+ distinction: this.distinction,
|
|
|
+ index: this.index, // 选中的索引
|
|
|
+ other: this.other
|
|
|
+ }
|
|
|
+ this.$emit("selectCal", obj)
|
|
|
}
|
|
|
- this.$emit("selectCatCli", obj);
|
|
|
- } else {
|
|
|
- let obj = {
|
|
|
- id: nameId,
|
|
|
- distinction: this.distinction,
|
|
|
- index: this.index, // 选中的索引
|
|
|
- other: this.other
|
|
|
+ this.selectName = item.name || item.auditorName
|
|
|
+ this.transitionBoxLiIdx = ''
|
|
|
+ this.show = false
|
|
|
+ this.classDiv = false
|
|
|
+ this.move = false
|
|
|
+ }
|
|
|
+ if(this.multiSelect) {
|
|
|
+ if(this.options[itemIndex].flg) {
|
|
|
+ this.options[itemIndex].flg = !this.options[itemIndex].flg
|
|
|
+ for(var i in this.multiSelectList) {
|
|
|
+ if(this.multiSelectList[i].id == item.id) {
|
|
|
+ this.multiSelectList.splice(i, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.options[itemIndex].flg = false
|
|
|
+ this.options[itemIndex].flg = !this.options[itemIndex].flg
|
|
|
+ this.multiSelectList.push(item)
|
|
|
}
|
|
|
- this.$emit("selectCal", obj)
|
|
|
}
|
|
|
- this.selectName = item.name || item.auditorName
|
|
|
- this.transitionBoxLiIdx = ''
|
|
|
- this.show = !this.show
|
|
|
- this.classDiv = false
|
|
|
- this.move = false
|
|
|
},
|
|
|
moveIonDiv() {
|
|
|
if(this.clearable) {
|
|
@@ -213,12 +325,54 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
clearDelete() {
|
|
|
- this.selectName = this.$t('defaultText.pleaseChoose')
|
|
|
+ if(!this.multiSelect) {
|
|
|
+ this.selectName = this.$t('defaultText.pleaseChoose')
|
|
|
+ let obj = {
|
|
|
+ name: this.$t('defaultText.pleaseChoose'),
|
|
|
+ id: ''
|
|
|
+ }
|
|
|
+ this.liClick(obj)
|
|
|
+ }
|
|
|
+ if(this.multiSelect) {
|
|
|
+ this.multiSelectList = []
|
|
|
+ let obj = {
|
|
|
+ distinction: this.distinction,
|
|
|
+ index: this.index, // 选中的索引
|
|
|
+ other: this.other,
|
|
|
+ arrUserList: []
|
|
|
+ }
|
|
|
+ for(var i in this.options) {
|
|
|
+ if(this.options[i].flg) {
|
|
|
+ this.options[i].flg = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$emit("selectCal", obj)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteMultiSelectList(str) {
|
|
|
+ let userId
|
|
|
+ if(str == '-1') {
|
|
|
+ userId = this.multiSelectList[0].id
|
|
|
+ this.multiSelectList.splice(0, 1)
|
|
|
+ } else {
|
|
|
+ userId = this.multiSelectList[str].id
|
|
|
+ this.multiSelectList.splice(str, 1)
|
|
|
+ }
|
|
|
+ for(var i in this.options) {
|
|
|
+ if(this.options[i].id == userId) {
|
|
|
+ if(this.options[i].flg) {
|
|
|
+ this.options[i].flg = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
let obj = {
|
|
|
- name: this.$t('defaultText.pleaseChoose'),
|
|
|
- id: ''
|
|
|
+ distinction: this.distinction,
|
|
|
+ index: this.index, // 选中的索引
|
|
|
+ other: this.other,
|
|
|
+ arrUserList: this.multiSelectList
|
|
|
}
|
|
|
- this.liClick(obj)
|
|
|
+ this.$emit("selectCal", obj)
|
|
|
}
|
|
|
},
|
|
|
triggerOption(){
|
|
@@ -325,4 +479,26 @@ export default {
|
|
|
.selecttexXuan {
|
|
|
color: #C0C4CC;;
|
|
|
}
|
|
|
+ .all {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 10px;
|
|
|
+ background: #f4f4f5;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 0px 8px;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ .allTwo {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .hoverSpan {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .hoverSpanHover {
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
</style>
|