rollback
parent
4fdd9fbaae
commit
0f9db0e0ab
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="van-dropdown-menu">
|
||||||
|
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||||
|
<div role="button" tabindex="0" class="van-dropdown-menu__item">
|
||||||
|
<div class="van-dropdown-menu__title" :class="[ showSelectMultiple ? 'van-dropdown-menu__title--active van-dropdown-menu__title--down' : '' ]" @click="selectActive()">
|
||||||
|
<div class="van-ellipsis">{{ selectName }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="showSelectMultiple" class="btn_left">
|
||||||
|
<span v-if="!all" @click="toggleAll()">全选</span>
|
||||||
|
<span v-if="all" @click="toggleFalseAll()">取消全选</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="showSelectMultiple" class="btn_true" @click="submitSelect()">确定</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="showSelectMultiple" class="van-dropdown-item van-dropdown-item--down" style="top: 40.9531px;">
|
||||||
|
<div ref="content" class="van-popup van-popup--bottom van-dropdown-item__content">
|
||||||
|
|
||||||
|
<van-checkbox-group v-model="checked" res="checkboxGroup" @change="selectDataOptsChange">
|
||||||
|
<div v-for="(item,index) in selectDataOpts" :key="typeof item === 'object' ? item[options.value] : item" role="button" :tabindex="index" class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
<van-checkbox :name="typeof item === 'object' ? item[options.value] : item" checked-color="var(--theme-color)">{{ index+1 }}.{{ typeof item === 'object' ? item[options.label] : item }}</van-checkbox></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</van-checkbox-group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script >
|
||||||
|
import { Checkbox, CheckboxGroup, DropdownMenu, DropdownItem } from 'vant'
|
||||||
|
import { PopupManager } from "element-ui/lib/utils/popup";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CopyCode',
|
||||||
|
components: {
|
||||||
|
VanCheckbox: Checkbox,
|
||||||
|
VanCheckboxGroup: CheckboxGroup,
|
||||||
|
// eslint-disable-next-line
|
||||||
|
VanDropdownMenu: DropdownMenu,
|
||||||
|
// eslint-disable-next-line
|
||||||
|
VanDropdownItem: DropdownItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
selectName: {
|
||||||
|
type: String,
|
||||||
|
default: '全部'
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
otherName: {
|
||||||
|
type: String,
|
||||||
|
default: '供应商'
|
||||||
|
},
|
||||||
|
checkedList: {
|
||||||
|
type: Array,
|
||||||
|
default: function() { return [] }
|
||||||
|
},
|
||||||
|
selectDataOpts: {
|
||||||
|
type: Array,
|
||||||
|
default: function() { return [] }
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
label: 'name',
|
||||||
|
value: 'id'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
multipleLimit: {
|
||||||
|
type: Number,
|
||||||
|
default: 50
|
||||||
|
}
|
||||||
|
// showSelectMultiple: {
|
||||||
|
// type: Boolean,
|
||||||
|
// default: false
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
zIndex: PopupManager.nextZIndex(),
|
||||||
|
showSelectMultiple: false,
|
||||||
|
checked: [],
|
||||||
|
all: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.checked = this.checkedList
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectActive() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.showSelectMultiple = !this.showSelectMultiple
|
||||||
|
},
|
||||||
|
toggleAll() {
|
||||||
|
const data = []
|
||||||
|
for (let i = 0; i < this.selectDataOpts.length; i++) {
|
||||||
|
data.push(typeof this.selectDataOpts[i] === 'object' ? this.selectDataOpts[i][this.options.value] : this.selectDataOpts[i])
|
||||||
|
}
|
||||||
|
this.all = true
|
||||||
|
this.checked = data
|
||||||
|
},
|
||||||
|
toggleFalseAll() {
|
||||||
|
this.all = false
|
||||||
|
this.checked = []
|
||||||
|
},
|
||||||
|
submitSelect() {
|
||||||
|
this.showSelectMultiple = false
|
||||||
|
this.$emit('confirm', this.checked)
|
||||||
|
// this.selectNameData()
|
||||||
|
},
|
||||||
|
cancelSelect() {
|
||||||
|
this.showSelectMultiple = false
|
||||||
|
},
|
||||||
|
selectDataOptsChange(data) {
|
||||||
|
this.selectNameData()
|
||||||
|
},
|
||||||
|
selectNameData() {
|
||||||
|
if (!this.checked.length || this.selectDataOpts.length === this.checked.length) {
|
||||||
|
this.$emit('selectMutiple', { checked: this.checked, name: '全部' + this.otherName })
|
||||||
|
} else {
|
||||||
|
this.$emit('selectMutiple', { checked: this.checked, name: '已选中（' + this.checked.length + ')' + this.otherName })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCopy() {
|
||||||
|
},
|
||||||
|
onError() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.copy{
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
.blank{
|
||||||
|
position: relative;
|
||||||
|
width:100%;
|
||||||
|
height:60px;
|
||||||
|
}
|
||||||
|
.btn_true{
|
||||||
|
width:60px;
|
||||||
|
height:30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color:var(--theme-color);
|
||||||
|
color:#fff;
|
||||||
|
position: absolute;
|
||||||
|
text-align:center;
|
||||||
|
line-height:30px;
|
||||||
|
right:10px;
|
||||||
|
font-size:14px;
|
||||||
|
top:10px;
|
||||||
|
}
|
||||||
|
.btn_left{
|
||||||
|
width:60px;
|
||||||
|
height:30px;
|
||||||
|
position: absolute;
|
||||||
|
text-align:center;
|
||||||
|
line-height:30px;
|
||||||
|
left:10px;
|
||||||
|
font-size:14px;
|
||||||
|
top:10px;
|
||||||
|
}
|
||||||
|
.block_content{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
.flex_bottom{
|
||||||
|
position: absolute ;
|
||||||
|
bottom:-10px;
|
||||||
|
left:0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue