web-mobile/src/components/tag-sec-select.vue

<template>
  <div id="tag-sec-select">
    <el-row style="background:#fff;min-height:3.5rem;padding: 0.5rem 0;">
      <el-col :span="5" style="font-size: 0.875rem;padding-left: 0.6rem;padding-top:0.5rem;" v-if="title">{{ title }}</el-col>
      <el-col :span="title ? 18 : 24" style="text-align:left;padding-bottom:1rem;" @click.native="changeDisplay">
        <span v-if="selected.length <= 0" style="color:#bbb;">
          {{ placeholder }}
        </span>
        <span v-else>
          <span v-for="(item, index) in selected" :key="index" style="margin-right:0.1rem;">
            {{ item.label }}
          </span>
        </span>
      </el-col>
    </el-row>
    <el-dialog title="请选择" :visible.sync="dialog" :fullscreen="true" :show-close="false">
      <el-row style="background:#ffffff;">
        <el-col :span="24" v-if="selectList.length > 0">
          <el-tag v-for="(item, index) in selected" :key="index" @click="tagClose(item)" style="margin-right:0.8rem;" :disable-transitions="true">
            {{ item.label }}
          </el-tag>
        </el-col>
        <el-col :span="24" style="width:100%;text-align:center;" v-else>请选择</el-col>
      </el-row>
      <el-row :gutter="10" class="selectCard">
        <el-col :span="6" class="firstMenu">
          <el-menu background-color="#eeeeee" text-color="#000" active-text-color="#409EFF" @select="selectMenu">
            <el-menu-item v-for="(item, index) in firstList" :key="index" :index="item.value">
              <template v-slot="title">
                {{ item.label }}
              </template>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="18" style="padding:1rem 1rem;">
          <el-row type="flex" style="margin-bottom:1rem;" v-if="secondList.length > 0">
            <el-switch v-model="allSelect" active-text="全选" inactive-text="" @change="childrenSelect"> </el-switch>
          </el-row>
          <el-checkbox-group v-model="selectList" @change="selectChange">
            <el-col :span="6" v-for="(item, index) in secondList" :key="index" class="word">
              <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row class="btn__row">
        <el-col :span="23">
          <el-button type="info" @click="dialog = false" style="width:100%;border-radius: 30px">返回</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'tag-sec-select',
  props: {
    title: { type: String },
    selected: { type: Array, default: () => [] }, //已选项
    placeholder: { type: String, default: '请选择' }, //提示
    firstList: { type: Array, default: () => [] }, //一级选项列表
    secondList: { type: Array, default: () => [] }, //二级选项列表
    type: { type: String, default: '' },
  },
  components: {},
  data: () => ({
    dialog: false,
    selectList: [],
    displayList: [],
    allSelect: false,
  }),
  watch: {
    selected: {
      handler(value, oval) {
        let dif = _.difference(value, oval);
        if (dif.length > 0) {
          this.defaultProcess();
        }
      },
    },
  },
  created() {
    if (this.selected.length > 0) {
      this.defaultProcess();
    }
  },
  computed: {},
  methods: {
    async selectMenu(value) {
      if (value !== '0') {
        this.cleanUnlimited();
        await this.$emit('listChange', { value: value, type: this.type });
      } else {
        this.$set(this, `displayList`, [{ label: '不限专业', value: '0' }]);
        this.$set(this, `selectList`, [{ label: '不限专业', value: '0' }]);
        this.$emit('selectChange', { value: [{ label: '不限专业', value: '0' }], type: this.type });
      }
      this.checkIsAll();
    },
    //选项操作
    selectChange() {
      let newArr = [];
      this.selectList.map(item => {
        let result = this.secondList.filter(fil => fil.value === item);
        if (result.length > 0) {
          result.forEach(res => {
            newArr.push(res);
          });
        } else {
          result = this.displayList.filter(fil => fil.value === item);
          if (result.length > 0) {
            result.forEach(res => {
              newArr.push(res);
            });
          }
        }
      });
      this.disFilter(newArr);
      this.checkIsAll();
    },
    //不限专业
    cleanUnlimited() {
      let result = this.displayList.filter(item => item.value !== '0');
      this.$set(this, `displayList`, result);
      this.$set(this, `allSelect`, false);
    },
    //全/反选
    childrenSelect(value) {
      //本子列表全选及反选
      let newArr = [];
      let result = [];
      this.secondList.map(item => {
        newArr.push(item.value);
      });
      if (value) {
        result = _.uniq(_.concat(this.selectList, newArr));
      } else {
        result = _.differenceWith(this.selectList, newArr);
      }
      this.$set(this, `selectList`, result);
      this.selectChange();
    },
    //该页选择全部选项,自动切换全选;该页未全部选择,去掉全选
    checkIsAll() {
      if (this.secondList.length > 0) {
        let result = true;
        for (const item of this.secondList) {
          let i = 0;
          for (i = 0; i < this.selectList.length; i++) {
            const select = this.selectList[i];
            if (item.value === select) {
              break;
            }
          }
          if (i === this.selectList.length) {
            result = false;
            break;
          }
        }
        this.$set(this, `allSelect`, result);
      }
    },
    //显示/隐藏选择面板
    changeDisplay() {
      this.$set(this, `dialog`, !this.dialog);
    },
    //初始化处理
    defaultProcess() {
      //处理复选框
      let select = this.selected.map(item => item.value);
      this.$set(this, `selectList`, select);
      //处理显示
      this.$set(this, `displayList`, this.selected);
    },
    //显示处理;选择值
    disFilter(value) {
      this.$emit('selectChange', { value: value, type: this.type });
      this.$set(this, `displayList`, value);
    },
    //关闭标签方法
    tagClose(value) {
      //取消选择
      let leastList = this.selectList.filter(item => item !== value.value);
      let leastDisplayList = this.displayList.filter(item => item.value !== value.value);
      this.$set(this, `selectList`, leastList);
      this.disFilter(leastDisplayList);
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu-item {
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}
.btn__row {
  padding-top: 1rem;
}
</style>