index.vue

<template>
  <div class="tools_button" :id='elId'>
    <template>
      <el-button-group>
        <template v-for="(item,index) in button_list">
          <el-button  :disabled='disabledItem(item)' v-if="!item.isMore&&showItem(item)" :key="index" size="mini" type="primary" @click.stop="itemClickAction(item)" :icon='item.icon'>
            {{item.label}}
          </el-button>
        </template>
      </el-button-group>
    </template>
    <el-dropdown size="mini" type="primary" v-if="isShowMoreIcon">
      <el-button type="primary" size="mini">
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
    <el-dropdown-menu slot="dropdown">
      <template v-for="(item,index) in button_list">
          <el-dropdown-item :disabled='disabledItem(item)' v-if="item.isMore&&showItem(item)" :key="index" class="eldropdownitem" @click.native="itemClickAction(item)">
            {{item.label}}
          </el-dropdown-item>
      </template>
    </el-dropdown-menu>
  </el-dropdown>
        <jsoneditor
            v-model='jsoneditorVisible'
            :elInfo='elInfo'
            :jsoneditorCloseAfter='jsoneditorCloseAfter'
            :jsoneditorOpenAfter='jsoneditorOpenAfter'
            >
      </jsoneditor>
  </div>
</template>
<script>
import jsoneditor from '../common/jsoneditor'
import ucComponent from '../ucClass/uc_component'
export default {
  name: 'hsButtonGroup',
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  props: {
    elInfo: {},
    allSourceData: {
      default() {
        return {
          config: {},
          sourceData: []
        }
      }
    },
    jsoneditorData: {},
    jsoneditorCloseAfter: {
      default() {
        return () => {}
      }
    },
    jsoneditorOpenAfter: {
      default() {
        return () => {}
      }
    },
    activeManager: {

    },
    bill_status: {

    }
  },
  data() {
    return {
      jsoneditorVisible: false,
      hsActionButtons: [],
      button_list: [
      ],
      isShowMoreIcon: false
    }
  },
  watch: {
    allSourceData: {
      handler: function(newData) {
        this.initConfigData(newData)
      },
      deep: true
    }
  },
  mounted() {
    this.initConfigData(this.allSourceData)
  },
  methods: {
    disabledItem(item) {
      const { disabled } = item
      const type = typeof disabled
      if (type === 'boolean' || type === undefined) {
        return !!disabled
      } else if (type === 'function') {
        const data = {
          item
        }
        return disabled(data)
      }
    },
    showItem(item = {}) {
      const { isHide } = item
      const data = {
        item
      }
      const type = typeof isHide
      if (type === 'boolean' || type === undefined) {
        return !isHide
      } else if (type === 'function') {
        return isHide(data)
      } else {
        return true
      }
    },
    itemClickAction(item) {
      const { click } = item
      const type = typeof click
      if (type === 'string' && click.startsWith('$')) {
        const item_ = Object.assign({}, item)
        item_.click = item_.click.substr(1)
        this.itemClick(item_)
      } else if (type === 'function') { // 调用页面上的action
        const data = {
          item
        }
        click(data)
      }
    },
    itemClick(item) {
      this.$emit('itemClick', item)
    },
    initConfigData(data) {
      const { config } = data
      const buttonList = config.buttonList || this.button_list
      const showButtons = config.showButtons
      if (showButtons && !buttonList.length) {
        this.button_list = [
          {
            'label': '',
            'icon': 'el-icon-refresh',
            'click': '$refresh',
            'isMore': false,
            'isHide': false
          }, {
            'label': '配置',
            'icon': '',
            'click': '$setPageConfig',
            'isHide': false,
            'isMore': true
          }]
      } else {
        this.button_list = buttonList
      }
      const user_info = sessionStorage['user_info']
      if (user_info) {
        const user_info_json = JSON.parse(user_info)
        const { is_admin } = user_info_json
        if (!is_admin) {
          this.button_list = this.button_list.filter(item => item.click !== '$setAction' && item.click !== '$setPageConfig')
        }
      }
      const r = buttonList.find(item => !item.isHide && item.isMore)
      this.isShowMoreIcon = !!r
    }
  }
}
</script>
<style scoped>
.tools_button{
  display: flex;
  min-width: 45px;
  min-height: 30px;
}
.isEmpityStyle{
 width: 40px;
}
.eldropdownitem{
  width:100px;
  padding: 5px;
  text-align: center;
}
</style>