277 lines
6.6 KiB
Vue
277 lines
6.6 KiB
Vue
<!-- form表单中下拉框样式的组件-->
|
||
<template>
|
||
<div>
|
||
<van-field
|
||
readonly
|
||
:class="readonly ? 'field-readonly' : 'not-field-readonly'"
|
||
clickable
|
||
name="picker"
|
||
:value="showValue"
|
||
v-bind="$attrs"
|
||
v-on="childListeners"
|
||
@click="showPickerFunc"
|
||
:rules="rules"
|
||
/>
|
||
<van-popup v-model="showPicker" style="height: 50vh" :class="{'dict-checkbox-field-popup': multiple}" position="bottom">
|
||
<!--background="#3074F6"-->
|
||
<van-search
|
||
v-if="canSearch"
|
||
v-model="searchValue"
|
||
placeholder="请输入搜索关键词"
|
||
input-align="left"
|
||
@search="onSearch"
|
||
@clear="onClear"
|
||
/>
|
||
<template v-if="!multiple">
|
||
<van-picker
|
||
show-toolbar
|
||
:columns="columnDataShow"
|
||
@confirm="onConfirm"
|
||
@cancel="showPicker = false"
|
||
:value-key="showKey"
|
||
>
|
||
</van-picker>
|
||
</template>
|
||
<template v-if="multiple">
|
||
<div class="item-ope">
|
||
<span class="van-picker__cancel" @click="onCancel">取消</span>
|
||
<span class="van-picker__confirm" @click="onConfirm">确认</span>
|
||
</div>
|
||
<van-checkbox-group class="dict-checkbox-group" v-model="checkedArr" ref="checkboxGroup">
|
||
<van-checkbox
|
||
v-for="(item) in columnDataShow"
|
||
:key="item[valueKey]"
|
||
:name="item[valueKey]"
|
||
shape="square"
|
||
>
|
||
{{ item[showKey] }}
|
||
</van-checkbox>
|
||
</van-checkbox-group>
|
||
</template>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: 'PickerField',
|
||
props: {
|
||
value: {
|
||
type: [String, Number, Object],
|
||
required: false
|
||
},
|
||
columnData: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => {
|
||
return [
|
||
// {name: '1name', value: '1', text: 3},
|
||
// {name: '2name', value: '2', text: 3},
|
||
]
|
||
}
|
||
},
|
||
rules: {
|
||
type: [Array, null],
|
||
required: false,
|
||
default: null
|
||
},
|
||
// 默认是否有其他值
|
||
valueKey: {
|
||
type: String,
|
||
required: false,
|
||
default: 'value'
|
||
},
|
||
// picker中显示的key值
|
||
showKey: {
|
||
type: String,
|
||
required: false,
|
||
default: 'name'
|
||
},
|
||
readonly: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false
|
||
},
|
||
// 是否多选
|
||
multiple: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false
|
||
},
|
||
// 是否可以查询
|
||
canSearch: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: true
|
||
},
|
||
// 当值不存在于下拉框中，是否要回显传的value
|
||
needShowValue: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
showPicker: false,
|
||
showValue: '', // 当前显示的input的值
|
||
searchValue: '', // 查询的字段
|
||
columnDataShow: [], // 当前显示的下拉框数据
|
||
checkedArr: [] // 选中的数据，在多选的情况下使用
|
||
}
|
||
},
|
||
watch: {
|
||
value: {
|
||
immediate: true,
|
||
handler: function () {
|
||
this.initVal()
|
||
// console.log('--------value----------', this.value)
|
||
}
|
||
},
|
||
columnData: {
|
||
immediate: true,
|
||
handler: function () {
|
||
this.columnDataShow = this.columnData
|
||
this.initVal()
|
||
// console.log('--------columnData----------', this.columnData)
|
||
}
|
||
},
|
||
showPicker (val) {
|
||
this.searchValue = ''
|
||
if (val) {
|
||
this.columnDataShow = [...this.columnData]
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 透传给下级组件的事件，需要排除本组件使用的change事件
|
||
childListeners () {
|
||
// const vm = this
|
||
const result = Object.assign({},
|
||
this.$listeners
|
||
)
|
||
delete result.change
|
||
return result
|
||
}
|
||
},
|
||
methods: {
|
||
showPickerFunc () {
|
||
if (this.readonly || this.$attrs.disabled) return
|
||
this.showPicker = true
|
||
},
|
||
initVal () {
|
||
if (!this.multiple) {
|
||
if (this.value) {
|
||
let item
|
||
if (this.columnData.length > 0) {
|
||
item = this.columnData.find(tt => (tt[this.valueKey] + '') === (this.value + ''))
|
||
}
|
||
// 如果下拉列表中没有这一项，就回显值
|
||
if (!item) {
|
||
this.showValue = this.needShowValue ? this.value : ''
|
||
} else {
|
||
this.showValue = (item || {})[this.showKey]
|
||
}
|
||
} else {
|
||
this.showValue = ''
|
||
}
|
||
} else {
|
||
// 多选下拉框
|
||
if (this.value) {
|
||
this.checkedArr = this.value.split(',')
|
||
const showArr = []
|
||
this.checkedArr.map(item => {
|
||
const column = this.columnData.find(tt => (tt[this.valueKey] + '') === (item + ''))
|
||
if (column) {
|
||
showArr.push((column || {})[this.showKey])
|
||
}
|
||
this.showValue = showArr.join('，')
|
||
})
|
||
} else {
|
||
this.showValue = ''
|
||
this.checkedArr = []
|
||
}
|
||
}
|
||
},
|
||
onConfirm (value) {
|
||
console.log('--------------')
|
||
if (!value) return
|
||
if (this.multiple) {
|
||
if (this.checkedArr.length === 0) {
|
||
this.$toast('请至少选择一条数据')
|
||
return
|
||
}
|
||
this.showPicker = false
|
||
this.$emit('change', this.checkedArr.join())
|
||
} else {
|
||
if (!this.valueKey) {
|
||
this.$emit('change', value)
|
||
} else {
|
||
this.showValue = value[this.showKey]
|
||
this.$emit('change', value[this.valueKey])
|
||
}
|
||
this.showPicker = false
|
||
}
|
||
},
|
||
onCancel () {
|
||
this.showPicker = false
|
||
},
|
||
onSearch (val) {
|
||
if (val) {
|
||
this.columnDataShow = this.columnData.filter(tt => tt[this.showKey].indexOf(val) > -1)
|
||
} else {
|
||
this.columnDataShow = [...this.columnData]
|
||
}
|
||
},
|
||
onClear () {
|
||
this.columnDataShow = [...this.columnData]
|
||
}
|
||
|
||
},
|
||
model: {
|
||
prop: 'value',
|
||
event: 'change'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
/deep/ .dict-checkbox-field-popup {
|
||
height: 375px;
|
||
font-size: 16px;
|
||
|
||
.item-ope {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
}
|
||
|
||
.dict-checkbox-group {
|
||
padding: @pad-base;
|
||
height: calc(100% - 44px - 2 * @pad-base - 54px);
|
||
overflow: auto;
|
||
|
||
div + div {
|
||
margin-top: @pad-base;
|
||
}
|
||
}
|
||
}
|
||
|
||
.not-field-readonly {
|
||
/deep/ .van-field__control{
|
||
color: #1D2129 !important;
|
||
}
|
||
}
|
||
|
||
.field-readonly {
|
||
/deep/ .van-field__control{
|
||
color: #969799 !important;
|
||
}
|
||
}
|
||
</style>
|