修改功能样式

chenzeping

2021-03-15 3ca24d97c52399dcbd93165bf5c01e2ee2af7823

 src/components/panel/MenuTopic.vue

@@ -6,19 +6,18 @@
           style=""
           @click="toggle()">
      <div id="menu-special-context" class="menu-special-context">
          <el-checkbox-button  v-show="isShow" class="menu-special-item" v-model="specialAll.check" :checked="specialAll.checked" @change="checkedSpecialChangeAll(specialAll)">
            <div style="height: 1rem;width: 1rem;display: inline-flex;">     <img :src="specialAll.icon" ></div>
            {{ specialAll.name }}</el-checkbox-button>
          <el-checkbox-button v-show="isShow" class="menu-special-item" v-model="topicSelectAll.check" :checked="topicSelectAll.checked" @change="checkedSpecialChangeAll(topicSelectAll)">
            <div style="height: 16px;width: 17px;display: inline-flex;"><img style="width : 100%" :src="topicSelectAll.icon" ></div>
            {{ topicSelectAll.name }}</el-checkbox-button>

        <el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="checkedList" size="medium"  @change="checkedGroupSpecialChange">
          <el-checkbox-button class="menu-special-item"  v-for="item in specialList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
            <div style="height: 1rem;width: 1rem;display: inline-flex;">     <img :src="item.icon" ></div>
        <el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="topicCheckedList" size="medium" @change="checkedGroupSpecialChange">
          <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
            <div style="height: 16px;width: 17px;display: inline-flex;"><img style="width : 100%" :src="item.icon" ></div>
            {{item.name}}</el-checkbox-button>
        </el-checkbox-group>
<!--        <ul class="menu-special-item" v-for="item in SpecialList" :key="item.id">-->
<!--          <li style="display: inline-flex;vertical-align: middle">-->
<!--            <div style="height: 1rem;width: 1rem;">     <img :src="item.icon" ></div>-->

<!--            <a>{{ item.name }}</a>-->
<!--          </li>-->
<!--        </ul>-->
@@ -28,70 +27,16 @@
</template>

<script>

import { TopicSelectAll, TopicList } from '../../conf/Topic'
export default {
  name: 'MenuTopic',
  data () {
    return {
      isShow: false,
      isIndeterminate: true,
      checkedList: [],
      specialAll: {
        name: '全选',
        check: false,
        icon: '/assets/images/menu/special.png'
      },
      specialList: [{
        name: '污染源',
        id: 1,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '废水监测',
        id: 2,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '废气监测',
        id: 3,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '固废管理',
        id: 4,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '环境风险',
        id: 5,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '土壤及地下水',
        id: 6,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '污雨水管网',
        id: 7,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '预警报警',
        id: 8,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '指标统计',
        id: 9,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '应急地图',
        id: 10,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }]
      topicCheckedList: [],
      topicSelectAll: TopicSelectAll,
      topicList: TopicList
    }
  },
  computed: {
@@ -99,33 +44,21 @@
  methods: {
    toggle () {
      this.isShow = !this.isShow
      // console.log('toggle')
      // const el = document.getElementById('menu-special-context')
      // console.log(el.clientWidth + ':' + el.offsetHeight)
      // if (el.clientWidth > 0) {
      //   el.style.width = '0'
      // } else {
      //   el.style.width = 'auto'
      // }
    },
    checkedGroupSpecialChange (val) {
      const len = val.length
      this.specialAll.check = len === this.specialList.length
      this.isIndeterminate = len > 0 && len < this.specialList.length
      this.topicSelectAll.check = len === this.topicList.length
      this.isIndeterminate = len > 0 && len < this.topicList.length
      this.$store.commit('setTopic', this.topicCheckedList)
    },
    checkedSpecialChangeAll (val) {
      // this.checkedCities = val ? this.cities.map(item => item.id) : []
      // this.isIndeterminate = false
      // let list = []
      // if (val === true) {
      //   list = this.specialList.map(item => item.name)
      // }

      this.checkedList = val.check ? this.specialList.map(item => item.name) : []
      this.topicCheckedList = val.check ? this.topicList.map(item => item) : []
      this.isIndeterminate = false
      this.$store.commit('setTopic', this.topicCheckedList)
    },
    checkedSpecialChange (item) {
      console.log(item)
    checkedSpecialChange () {
      console.log(this.topicCheckedList)
      // this.$store.commit('setTopic', this.topicCheckedList)
    }
  }