| New file |
| | |
| | | <template> |
| | | <view class="oi-data-select"> |
| | | <span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span> |
| | | <view class="uni-stat-box" :class="{'uni-stat__actived': current}"> |
| | | <view class="uni-select" :class="{'uni-select--disabled':disabled}"> |
| | | <view class="uni-select__input-box" @click="toggleSelector"> |
| | | <input class="uni-select__input-text" :class="disabled?'input-disabled':''" v-model="current" |
| | | :placeholder="typePlaceholder" @blur="onBlur" :disabled="disabled || !filterable" /> |
| | | <view v-if="modelValue && clear && !disabled" @click.stop="clearVal"> |
| | | <uni-icons type="clear" color="#c0c4cc" size="24" /> |
| | | </view> |
| | | <view v-else> |
| | | <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector()" /> |
| | | <template v-if="popDown"> |
| | | <view class="uni-select__selector" v-if="showSelector"> |
| | | <view class="uni-popper__arrow"></view> |
| | | <scroll-view scroll-y="true" class="uni-select__selector-scroll"> |
| | | <view class="uni-select__selector-empty" v-if="selections.length === 0"> |
| | | <text>{{emptyTips}}</text> |
| | | </view> |
| | | <view v-else class="uni-select__selector-item" |
| | | :class="item.value == modelValue ?'selected-item':''" v-for="(item,index) in selections" |
| | | :key="index" @click="change(item)"> |
| | | <text |
| | | :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> |
| | | </view> |
| | | </scroll-view> |
| | | </view> |
| | | </template><template v-else> |
| | | <view class="uni-select__selector-top" v-if="showSelector"> |
| | | |
| | | <scroll-view scroll-y="true" class="uni-select__selector-scroll"> |
| | | <view class="uni-select__selector-empty" v-if="selections.length === 0"> |
| | | <text>{{emptyTips}}</text> |
| | | </view> |
| | | <view v-else class="uni-select__selector-item" |
| | | :class="item.value == modelValue ?'selected-item':''" v-for="(item,index) in selections" |
| | | :key="index" @click="change(item)"> |
| | | <text |
| | | :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> |
| | | </view> |
| | | </scroll-view> |
| | | <view class="uni-popper__arrow-top"></view> |
| | | </view> |
| | | </template> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | /** |
| | | * DataChecklist 数据选择器 |
| | | * @description 通过数据渲染的下拉框组件 |
| | | * @property {String} value 默认值 |
| | | * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}] |
| | | * @property {Boolean} clear 是否可以清空已选项 |
| | | * @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效 |
| | | * @property {String} label 左侧标题 |
| | | * @property {String} placeholder 输入框的提示文字 |
| | | * @property {Boolean} disabled 是否禁用 |
| | | * @event {Function} change 选中发生变化触发 |
| | | */ |
| | | |
| | | export default { |
| | | name: "OIDataSelect", |
| | | mixins: [uniCloud.mixinDatacom || {}], |
| | | props: { |
| | | localdata: { |
| | | type: Array, |
| | | default () { |
| | | return [] |
| | | } |
| | | }, |
| | | value: { |
| | | type: [String, Number], |
| | | default: '' |
| | | }, |
| | | modelValue: { |
| | | type: [String, Number], |
| | | default: '' |
| | | }, |
| | | label: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | placeholder: { |
| | | type: String, |
| | | default: '请选择' |
| | | }, |
| | | emptyTips: { |
| | | type: String, |
| | | default: '无选项' |
| | | }, |
| | | clear: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | defItem: { |
| | | type: Number, |
| | | default: 0 |
| | | }, |
| | | filterable: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | // 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}" |
| | | format: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | pointY: 0, |
| | | scrollHeight: 40, |
| | | keyboardHeight: 400, |
| | | windowSize: {}, |
| | | showSelector: false, |
| | | current: '', |
| | | mixinDatacomResData: [], |
| | | apps: [], |
| | | channels: [], |
| | | cacheKey: "OIDataSelect-lastSelectedValue", |
| | | }; |
| | | }, |
| | | created() { |
| | | const _this = this |
| | | this.debounceGet = this.debounce(() => { |
| | | this.query(); |
| | | }, 300); |
| | | if (this.collection && !this.localdata.length) { |
| | | this.debounceGet(); |
| | | } |
| | | |
| | | uni.getSystemInfo({ |
| | | success(e) { |
| | | _this.windowSize = { |
| | | width: e.windowWidth, |
| | | height: e.windowHeight - (e.statusBarHeight || 0) |
| | | } |
| | | }, |
| | | |
| | | }) |
| | | uni.onKeyboardHeightChange((res) => { |
| | | // console.log("onKeyboardHeightChange", res) |
| | | _this.keyboardHeight = res.height; // 单位:px |
| | | |
| | | }); |
| | | }, |
| | | destroyed() { |
| | | uni.offKeyboardHeightChange(() => {}) // |
| | | }, |
| | | computed: { |
| | | typePlaceholder() { |
| | | const text = { |
| | | 'opendb-stat-app-versions': '版本', |
| | | 'opendb-app-channels': '渠道', |
| | | 'opendb-app-list': '应用' |
| | | } |
| | | const common = this.placeholder |
| | | const placeholder = text[this.collection] |
| | | return placeholder ? |
| | | common + placeholder : |
| | | common |
| | | }, |
| | | valueCom() { |
| | | // #ifdef VUE3 |
| | | return this.modelValue; |
| | | // #endif |
| | | // #ifndef VUE3 |
| | | return this.value; |
| | | // #endif |
| | | }, |
| | | textShow() { |
| | | // 长文本显示 |
| | | let text = this.current; |
| | | if (text.length > 10) { |
| | | return text.slice(0, 25) + '...'; |
| | | } |
| | | return text; |
| | | }, |
| | | selections() { |
| | | let list = this.mixinDatacomResData |
| | | if (this.filterable) { |
| | | if (this.current) { |
| | | list = this.mixinDatacomResData.filter((a) => a.text.match(new RegExp(this.current, "i"))) |
| | | |
| | | } |
| | | } |
| | | let height = (list.length * 35) || 35 |
| | | if (height > 200) { |
| | | height = 200 |
| | | } |
| | | this.scrollHeight = height + 10 |
| | | return list |
| | | }, |
| | | popDown() { |
| | | console.log("popDown", this.pointY, this.keyboardHeight, this.scrollHeight, this.windowSize.height) |
| | | if (this.filterable) { |
| | | if (this.pointY + this.scrollHeight > this.windowSize.height - this.keyboardHeight) { |
| | | return false |
| | | } |
| | | } else { |
| | | if (this.pointY + this.scrollHeight > this.windowSize.height) { |
| | | return false |
| | | } |
| | | } |
| | | return true |
| | | |
| | | } |
| | | }, |
| | | |
| | | watch: { |
| | | localdata: { |
| | | immediate: true, |
| | | handler(val, old) { |
| | | if (Array.isArray(val) && old !== val) { |
| | | this.mixinDatacomResData = val |
| | | } |
| | | } |
| | | }, |
| | | valueCom(val, old) { |
| | | this.initDefVal() |
| | | }, |
| | | mixinDatacomResData: { |
| | | immediate: true, |
| | | handler(val) { |
| | | if (val.length) { |
| | | this.initDefVal() |
| | | } |
| | | } |
| | | }, |
| | | |
| | | }, |
| | | methods: { |
| | | debounce(fn, time = 100) { |
| | | let timer = null |
| | | return function(...args) { |
| | | if (timer) clearTimeout(timer) |
| | | timer = setTimeout(() => { |
| | | fn.apply(this, args) |
| | | }, time) |
| | | } |
| | | }, |
| | | // 执行数据库查询 |
| | | query() { |
| | | this.mixinDatacomEasyGet(); |
| | | }, |
| | | // 监听查询条件变更事件 |
| | | onMixinDatacomPropsChange() { |
| | | if (this.collection) { |
| | | this.debounceGet(); |
| | | } |
| | | }, |
| | | initDefVal() { |
| | | let defValue = '' |
| | | if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) { |
| | | defValue = this.valueCom |
| | | } else { |
| | | let strogeValue |
| | | if (this.collection) { |
| | | strogeValue = this.getCache() |
| | | } |
| | | if (strogeValue || strogeValue === 0) { |
| | | defValue = strogeValue |
| | | } else { |
| | | let defItem = '' |
| | | if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) { |
| | | defItem = this.mixinDatacomResData[this.defItem - 1].value |
| | | } |
| | | defValue = defItem |
| | | } |
| | | if (defValue || defValue === 0) { |
| | | this.emit(defValue) |
| | | } |
| | | } |
| | | const def = this.mixinDatacomResData.find(item => item.value === defValue) |
| | | this.current = def ? this.formatItemName(def) : '' |
| | | }, |
| | | |
| | | /** |
| | | * @param {[String, Number]} value |
| | | * 判断用户给的 value 是否同时为禁用状态 |
| | | */ |
| | | isDisabled(value) { |
| | | let isDisabled = false; |
| | | |
| | | this.mixinDatacomResData.forEach(item => { |
| | | if (item.value === value) { |
| | | isDisabled = item.disable |
| | | } |
| | | }) |
| | | |
| | | return isDisabled; |
| | | }, |
| | | onBlur() { |
| | | if (this.modelValue) { |
| | | const def = this.mixinDatacomResData.find(item => item.value === this.modelValue) |
| | | this.current = def ? this.formatItemName(def) : '' |
| | | } else { |
| | | this.current = "" |
| | | } |
| | | }, |
| | | clearVal() { |
| | | this.emit('') |
| | | if (this.collection) { |
| | | this.removeCache() |
| | | } |
| | | }, |
| | | change(item) { |
| | | if (!item.disable) { |
| | | this.showSelector = false |
| | | this.current = this.formatItemName(item) |
| | | this.emit(item.value) |
| | | } |
| | | }, |
| | | emit(val) { |
| | | this.$emit('input', val) |
| | | this.$emit('update:modelValue', val) |
| | | this.$emit('change', val) |
| | | if (this.collection) { |
| | | this.setCache(val); |
| | | } |
| | | }, |
| | | toggleSelector(e) { |
| | | if (this.disabled) { |
| | | return |
| | | } |
| | | |
| | | |
| | | if (!this.showSelector) { |
| | | this.pointY = e.detail.y |
| | | |
| | | } |
| | | this.showSelector = !this.showSelector |
| | | }, |
| | | formatItemName(item) { |
| | | let { |
| | | text, |
| | | value, |
| | | channel_code |
| | | } = item |
| | | channel_code = channel_code ? `(${channel_code})` : '' |
| | | |
| | | if (this.format) { |
| | | // 格式化输出 |
| | | let str = ""; |
| | | str = this.format; |
| | | for (let key in item) { |
| | | str = str.replace(new RegExp(`{${key}}`, "g"), item[key]); |
| | | } |
| | | return str; |
| | | } else { |
| | | return this.collection.indexOf('app-list') > 0 ? |
| | | `${text}(${value})` : |
| | | ( |
| | | text ? |
| | | text : |
| | | `未命名${channel_code}` |
| | | ) |
| | | } |
| | | }, |
| | | // 获取当前加载的数据 |
| | | getLoadData() { |
| | | return this.mixinDatacomResData; |
| | | }, |
| | | // 获取当前缓存key |
| | | getCurrentCacheKey() { |
| | | return this.collection; |
| | | }, |
| | | // 获取缓存 |
| | | getCache(name = this.getCurrentCacheKey()) { |
| | | let cacheData = uni.getStorageSync(this.cacheKey) || {}; |
| | | return cacheData[name]; |
| | | }, |
| | | // 设置缓存 |
| | | setCache(value, name = this.getCurrentCacheKey()) { |
| | | let cacheData = uni.getStorageSync(this.cacheKey) || {}; |
| | | cacheData[name] = value; |
| | | uni.setStorageSync(this.cacheKey, cacheData); |
| | | }, |
| | | // 删除缓存 |
| | | removeCache(name = this.getCurrentCacheKey()) { |
| | | let cacheData = uni.getStorageSync(this.cacheKey) || {}; |
| | | delete cacheData[name]; |
| | | uni.setStorageSync(this.cacheKey, cacheData); |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | $uni-base-color: #6a6a6a !default; |
| | | $uni-main-color: #333 !default; |
| | | $uni-secondary-color: #909399 !default; |
| | | $uni-border-3: #e5e5e5; |
| | | |
| | | /* #ifndef APP-NVUE */ |
| | | @media screen and (max-width: 500px) { |
| | | .hide-on-phone { |
| | | display: none; |
| | | } |
| | | } |
| | | |
| | | /* #endif */ |
| | | .oi-data-select { |
| | | display: flex; |
| | | align-items: center; |
| | | // padding: 15px; |
| | | /* #ifdef H5 */ |
| | | cursor: pointer; |
| | | /* #endif */ |
| | | width: 100%; |
| | | flex: 1; |
| | | box-sizing: border-box; |
| | | |
| | | |
| | | .uni-stat-box { |
| | | width: 100%; |
| | | flex: 1; |
| | | } |
| | | |
| | | .uni-stat__actived { |
| | | width: 100%; |
| | | flex: 1; |
| | | // outline: 1px solid #2979ff; |
| | | } |
| | | |
| | | .uni-label-text { |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | color: $uni-base-color; |
| | | margin: auto 0; |
| | | margin-right: 5px; |
| | | } |
| | | |
| | | .uni-select { |
| | | font-size: 14px; |
| | | border: 1px solid $uni-border-3; |
| | | box-sizing: border-box; |
| | | border-radius: 4px; |
| | | padding: 0 5px; |
| | | padding-left: 10px; |
| | | position: relative; |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | user-select: none; |
| | | /* #endif */ |
| | | flex-direction: row; |
| | | align-items: center; |
| | | border-bottom: solid 1px $uni-border-3; |
| | | width: 100%; |
| | | flex: 1; |
| | | height: 35px; |
| | | |
| | | &--disabled { |
| | | background-color: #f5f7fa; |
| | | cursor: not-allowed; |
| | | } |
| | | } |
| | | |
| | | .uni-select:hover { |
| | | border: 1px solid rgb(41, 121, 255); |
| | | } |
| | | |
| | | |
| | | .uni-select__label { |
| | | font-size: 16px; |
| | | // line-height: 22px; |
| | | height: 35px; |
| | | padding-right: 10px; |
| | | color: $uni-secondary-color; |
| | | } |
| | | |
| | | .uni-select__input-box { |
| | | height: 35px; |
| | | position: relative; |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | /* #endif */ |
| | | flex: 1; |
| | | flex-direction: row; |
| | | align-items: center; |
| | | } |
| | | |
| | | .uni-select__input { |
| | | flex: 1; |
| | | font-size: 14px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | } |
| | | |
| | | .uni-select__input-plac { |
| | | font-size: 14px; |
| | | color: $uni-secondary-color; |
| | | } |
| | | |
| | | .uni-select__selector { |
| | | /* #ifndef APP-NVUE */ |
| | | box-sizing: border-box; |
| | | /* #endif */ |
| | | position: absolute; |
| | | top: calc(100% + 12px); |
| | | left: 0; |
| | | width: 100%; |
| | | background-color: #FFFFFF; |
| | | border: 1px solid #EBEEF5; |
| | | border-radius: 6px; |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | z-index: 3; |
| | | padding: 4px 0; |
| | | } |
| | | |
| | | .uni-select__selector-top { |
| | | /* #ifndef APP-NVUE */ |
| | | box-sizing: border-box; |
| | | /* #endif */ |
| | | position: absolute; |
| | | bottom: calc(100% + 12px); |
| | | left: 0; |
| | | width: 100%; |
| | | background-color: #FFFFFF; |
| | | border: 1px solid #EBEEF5; |
| | | border-radius: 6px; |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | z-index: 3; |
| | | padding: 4px 0; |
| | | } |
| | | |
| | | |
| | | .uni-select__selector-scroll { |
| | | /* #ifndef APP-NVUE */ |
| | | max-height: 200px; |
| | | box-sizing: border-box; |
| | | /* #endif */ |
| | | } |
| | | |
| | | /* #ifdef H5 */ |
| | | @media (min-width: 768px) { |
| | | .uni-select__selector-scroll { |
| | | max-height: 600px; |
| | | } |
| | | } |
| | | |
| | | /* #endif */ |
| | | |
| | | .uni-select__selector-empty, |
| | | .uni-select__selector-item { |
| | | /* #ifndef APP-NVUE */ |
| | | display: flex; |
| | | cursor: pointer; |
| | | /* #endif */ |
| | | line-height: 35px; |
| | | font-size: 14px; |
| | | text-align: center; |
| | | /* border-bottom: solid 1px $uni-border-3; */ |
| | | padding: 0px 10px; |
| | | } |
| | | |
| | | .uni-select__selector-empty { |
| | | color: #666; |
| | | } |
| | | |
| | | .selected-item { |
| | | color: rgb(41, 121, 255); |
| | | } |
| | | |
| | | |
| | | .uni-select__selector-item:hover { |
| | | background-color: #f9f9f9; |
| | | } |
| | | |
| | | .uni-select__selector-empty:last-child, |
| | | .uni-select__selector-item:last-child { |
| | | /* #ifndef APP-NVUE */ |
| | | border-bottom: none; |
| | | /* #endif */ |
| | | } |
| | | |
| | | .uni-select__selector__disabled { |
| | | opacity: 0.4; |
| | | cursor: default; |
| | | } |
| | | |
| | | /* picker 弹出层指向下的通用的指示小三角 */ |
| | | .uni-popper__arrow, |
| | | .uni-popper__arrow::after { |
| | | position: absolute; |
| | | display: block; |
| | | width: 0; |
| | | height: 0; |
| | | border-color: transparent; |
| | | border-style: solid; |
| | | border-width: 6px; |
| | | } |
| | | |
| | | .uni-popper__arrow { |
| | | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
| | | top: -6px; |
| | | left: 10%; |
| | | margin-right: 3px; |
| | | border-top-width: 0; |
| | | border-bottom-color: #EBEEF5; |
| | | } |
| | | |
| | | .uni-popper__arrow::after { |
| | | content: " "; |
| | | top: 1px; |
| | | margin-left: -6px; |
| | | border-top-width: 0; |
| | | border-bottom-color: #fff; |
| | | } |
| | | |
| | | /* picker 弹出层指向上的通用指示小三角 */ |
| | | .uni-popper__arrow-top, |
| | | .uni-popper__arrow-top::after { |
| | | position: absolute; |
| | | display: block; |
| | | width: 0; |
| | | height: 0; |
| | | border-color: transparent; |
| | | border-style: solid; |
| | | border-width: 6px; |
| | | } |
| | | |
| | | .uni-popper__arrow-top { |
| | | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
| | | bottom: -6px; |
| | | left: 10%; |
| | | margin-right: 3px; |
| | | border-bottom-width: 0; |
| | | border-top-color: #EBEEF5; |
| | | } |
| | | |
| | | .uni-popper__arrow-top::after { |
| | | content: " "; |
| | | bottom: 1px; |
| | | margin-left: -6px; |
| | | border-bottom-width: 0; |
| | | border-top-color: #fff; |
| | | } |
| | | |
| | | .uni-select__input-text { |
| | | // width: 280px; |
| | | width: 100%; |
| | | color: $uni-main-color; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | -o-text-overflow: ellipsis; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .input-disabled { |
| | | background-color: #f3f3f3 !important; |
| | | } |
| | | |
| | | .uni-select__input-placeholder { |
| | | color: $uni-base-color; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .uni-select--mask { |
| | | position: fixed; |
| | | top: 0; |
| | | bottom: 0; |
| | | right: 0; |
| | | left: 0; |
| | | z-index: 2; |
| | | } |
| | | } |
| | | |
| | | .large-mode { |
| | | .oi-data-select { |
| | | |
| | | |
| | | .uni-label-text { |
| | | font-size: 24px; |
| | | } |
| | | |
| | | |
| | | .uni-select { |
| | | font-size: 24px; |
| | | height: 32px; |
| | | line-height: 32px; |
| | | height: 45px; |
| | | } |
| | | |
| | | .uni-select__label { |
| | | font-size: 26px; |
| | | height: 45px; |
| | | } |
| | | .uni-select__input-box { |
| | | height: 45px; |
| | | } |
| | | .uni-select__input { |
| | | |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .uni-select__input-plac { |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .uni-select__selector-empty, |
| | | .uni-select__selector-item { |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .uni-select__input-placeholder { |
| | | font-size: 22px; |
| | | } |
| | | } |
| | | } |
| | | </style> |