通过对elements混入的方式设置一些公共方法

import Vue from 'vue'
import Element from 'element-ui'
import i18n from '@/lang'
// import '../element-variables.scss'

import { closeMenuOnScroll } from '@/mixin/close-menu-onscroll.js'
import message from '@/mixin/message.js'
import dragDialog from '@/mixin/dragDialog.js'
import router from '@/router/router'

import MdElementUi from 'mdzy-component-frontend'
import 'mdzy-component-frontend/dist/mdzy-component-frontend.css'

let ElementConfig = {
  size: 'mini'
}
console.log('%c 第20行', 'color: red; font-size: 2em')
console.log(Element)
// 扩展下拉框选项的过滤方法，使可以匹配非绑定字段的搜索
Element.Option.mixins[Element.Option.mixins.length] = {
  props: {
    optionData: {
      type: Object
    },
    filterVal: {
      type: String
    },
    customFilterMethod: Function
  },
  watch: {
    filterVal: {
      handler(val) {
        if (this.customFilterMethod && val) {
          this.visible = this.visible || this.customFilterMethod(val, this.optionData)
        }
      },
      deep: true,
      immediate: true
    }
  }
}
Element.Select.mixins[Element.Select.mixins.length] = {
  props: {
    onOptionsOneSelect: {
      // 当只有一个选项的时候默认选择第一个选项
      type: Boolean,
      default: false
    },
    bindKey: {
      type: String
    }
  },
  watch: {
    options: {
      handler(val) {
        if (this.onOptionsOneSelect) {
          if (val.length === 1) {
            if (val[0].value && typeof val[0].value === 'string') {
              this.$emit('input', val[0].value)
            }
          }
        }
      },
      deep: true,
      immediate: true
    },
    previousQuery: {
      handler(val) {
        this.$emit('filter-change', val, this.bindKey)
      },
      deep: true,
      immediate: true
    }
  }
}

Element.DatePicker.mixins[Element.DatePicker.mixins.length] = {
  created() {
    let shortcuts = []

    if (!this.pickerOptions.shortcuts) {
      if (this.type === 'date' || this.type === 'datetime') {
        shortcuts = [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }

      if (this.type === 'daterange') {
        shortcuts = [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }

      if (this.type === 'monthrange') {
        shortcuts = [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
      if (shortcuts.length > 0) {
        this.$set(this.pickerOptions, 'shortcuts', shortcuts)
      }
    }
  }
}

// 全局弹窗可以拖动
dragDialog(Element)
// 页面滚动时关闭展开的下拉框，下拉菜单等
closeMenuOnScroll(Element)
// 全局弹窗默认点击外面不关闭
Element.Dialog.props.closeOnClickModal.default = false
// 默认全局弹窗设置为append-to-body
Element.Dialog.props.appendToBody.default = true

Element.MessageBox.setDefaults({
  closeOnClickModal: false,
  closeOnPressEscape: false
})

// console.log(MdElementUi);
try {
  // 拦截button click时间  阻止冒泡
  let _buttonClick = MdElementUi.MdButton.methods.onclick
  MdElementUi.MdButton.methods.onclick = function (e) {
    e.stopPropagation()
    _buttonClick.apply(this, arguments)
  }
} catch {}
if (!MdElementUi.MdButton.mixins) {
  MdElementUi.MdButton.mixins = []
}
MdElementUi.MdButton.mixins[MdElementUi.MdButton.mixins.length] = {
  props: {
    menuCode: {
      type: String,
      default: ''
    },
    menuCodePrifix: {
      //自定义权限前缀，有该值不用路由名拼接
      type: String,
      default: ''
    }
  },
  mounted() {
    // console.log('mounted-button', this.menuCode, router.app._route.name)
    this.initBtnConfig()
  },
  watch: {
    menuCode(val) {
      this.initBtnConfig()
    },
    '$store.state.permissionList': {
      handler(val) {
        this.initBtnConfig()
      }
    }
  },
  activated() {
    // console.log('activated-button', this.menuCode, router.app._route.name)
    this.initBtnConfig()
  },
  methods: {
    initBtnConfig() {
      if (!this.menuCode) return
      if (this.menuCode && this.menuCode === 'alwaysShow') return
      this.$nextTick(() => {
        setTimeout(() => {
          let list = this.$store.state.permissionList || {}
          // 获取当前路由和权限编码
          let routerName = this.menuCodePrifix || router.app._route.name //这个就是用来获取路由name
          let id = routerName + '-' + this.menuCode // 获取到 v-permission的值
          let exit = list[id.toLowerCase()]
          // console.log('idididididid', routerName, id, exit)
          if (!exit) {
            this.$el.style.display = 'none'
            return
          }
          if (this.$el.style.display === 'none') {
            this.$el.style.display = null
          }
          let spanElement = this.$el.querySelector('span')
          let checkboxEl = this.$el.querySelector('.el-checkbox__label')
          if (checkboxEl) {
            spanElement = checkboxEl
          }
          if (!spanElement) return
          if (exit) {
            // 设置按钮的文本内容，并保留icon
            spanElement.innerText = exit[0]
            // 设置按钮的排序
            this.$el.style.order = exit[1]
          }
        })
      })
    }
  }
}

if (!MdElementUi.MdSelect.mixins) {
  MdElementUi.MdSelect.mixins = []
}
MdElementUi.MdSelect.mixins[MdElementUi.MdSelect.mixins.length] = {
  props: {
    groupCode: {
      type: Number | String,
      default: ''
    }
  },
  created() {
    if (this.groupCode) {
      this.$commonMethods.getSelectData(this.groupCode).then((res) => {
        this.computedOptions = res
      })
    }
  }
}
Vue.use(MdElementUi, MdElementUi)
Vue.use(Element, ElementConfig)
message(Vue)

//重写element的$comirm,便于国际化处理
Vue.prototype.$confirm = function (message, title, options) {
  if (options?.cancelButtonText) {
    options.cancelButtonText = i18n.t(options.cancelButtonText)
  }
  if (options?.confirmButtonText) {
    options.confirmButtonText = i18n.t(options.confirmButtonText)
  }
  if (!options.hasOwnProperty('type')) {
    options.type = 'warning'
  }
  return Element.MessageBox.confirm(i18n.t(message), i18n.t(title), options)
}