cz-hjjc-oa/src/components/MobileMultipleSelect/index.vue

<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
    },
    outputType: {
      type: String,
      default: 'array'
    }
    // 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.outputType === 'array' ? this.checked : this.checked.toString())
      // 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>