yinghe-lowcode-zln/src/utils/mixin.js

基于vue、ant-design-vue,datagrid的低代码平台

import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
import { mapState } from 'vuex'

// const mixinsComputed = Vue.config.optionMergeStrategies.computed
// const mixinsMethods = Vue.config.optionMergeStrategies.methods

const mixin = {
  computed: {
    ...mapState({
      layoutMode: state => state.app.layout,
      navTheme: state => state.app.theme,
      primaryColor: state => state.app.color,
      fontSize: state => state.app.fontSize,
      systemTitle: state => state.app.systemTitle,
      colorWeak: state => state.app.weak,
      fixedHeader: state => state.app.fixedHeader,
      fixSiderbar: state => state.app.fixSiderbar,
      contentWidth: state => state.app.contentWidth,
      autoHideHeader: state => state.app.autoHideHeader,
      sidebarOpened: state => state.app.sidebar,
      keepAlive: state => state.app.keepAlive,
      multiTab: state => state.app.multiTab
    })
  },
  methods: {
    isTopMenu () {
      return this.layoutMode === 'topmenu'
    },
    isSideMenu () {
      return !this.isTopMenu()&&!this.isStructMenu()
    },
    isStructMenu(){
      return this.layoutMode === 'structmenu'
    }
  }
}

const mixinDevice = {
  computed: {
    ...mapState({
      device: state => state.app.device
    })
  },
  methods: {
    isMobile () {
      return this.device === DEVICE_TYPE.MOBILE
    },
    isDesktop () {
      return this.device === DEVICE_TYPE.DESKTOP
    },
    isTablet () {
      return this.device === DEVICE_TYPE.TABLET
    }
  }
}

const AppDeviceEnquire = {
  mounted () {
    const { $store } = this
    deviceEnquire(deviceType => {
      switch (deviceType) {
        case DEVICE_TYPE.DESKTOP:
          $store.commit('TOGGLE_DEVICE', 'desktop')
          $store.dispatch('setSidebar', true)
          break
        case DEVICE_TYPE.TABLET:
          $store.commit('TOGGLE_DEVICE', 'tablet')
          $store.dispatch('setSidebar', false)
          break
        case DEVICE_TYPE.MOBILE:
        default:
          $store.commit('TOGGLE_DEVICE', 'mobile')
          $store.dispatch('setSidebar', true)
          break
      }
    })
  }
}

const ExternalLink = {
  methods: {
    getExternal (route) {
      let link = ''
      const path = route.path || ''
      const meta = route.meta || {}
      const query = route.query || {}
      const matched = route.matched || []
      const tablink = '/external/link'

      // 获取外部链接
      path !== tablink
        ? link = meta.external
        : link = query.from

      // 处理外部链接
      if (link) {
        // 转换为规范的路径 file or http
        if (/^file:\/\/\/|^https?:\/\//.test(link)) {
          link = link.replace(/^([^?]*)\/$/, '$1')
          link = link.replace(/^([^?]*)\/(?=\?)/, '$1')
        } else if (/^\/\/\/.+/.test(link)) {
          link = link.replace(/^([^?]*)\/$/, '$1')
          link = link.replace(/^([^?]*)\/(?=\?)/, '$1')
          link = 'file:' + link
        } else if (/^\/\/.+/.test(link)) {
          link = link.replace(/^([^?]*)\/$/, '$1')
          link = link.replace(/^([^?]*)\/(?=\?)/, '$1')
          link = window.location.protocol + link
        } else if (/^\/.+/.test(link)) {
          link = link.replace(/^\//, '')
          link = link.replace(/^([^?]*)\/$/, '$1')
          link = link.replace(/^([^?]*)\/(?=\?)/, '$1')
          link = window.location.protocol + '//' + window.location.host + '/' + link
        } else if (/\w+/.test(link)) {
          link = link.replace(/^([^?]*)\/$/, '$1')
          link = link.replace(/^([^?]*)\/(?=\?)/, '$1')
          link = window.location.protocol + '//' + link
        }

        // link 转换为 url对象
        const urlSearchArr = []
        const urlLink = new URL(link)
        const urlSearch = urlLink.search
        const urlOrigin = urlLink.origin
        const urlParams = new URLSearchParams(urlSearch)
        let urlPathname = urlLink.pathname.replace(/\/+$/, '')

        // 合并来自于路由中的参数
        if (path !== tablink) {
          const lenth = matched.length - 1
          const route = matched[lenth] || {}
          const param = path.split(route.path)[1]
          if (param) {
            urlPathname = urlPathname + param.replace(/\/+$/, '')
          }
          for (const key in query) {
            if (query[key] !== undefined && query[key] !== null) {
              urlParams.set(key, query[key])
            }
          }
        }

        // 对参数进行默认排序
        urlParams.sort()

        // url参数对象 转换 url参数
        for (const [key, value] of urlParams) {
          urlSearchArr.push(key + '=' + value)
        }

        // 传递 iframe 参数
        urlSearchArr.length > 0
          ? link = urlOrigin + urlPathname + '?' + urlSearchArr.join('&')
          : link = urlOrigin + urlPathname
      }

      // 返回外部链接
      return link
    }
  }
}

 function dateFormat(daterc) {
  if (daterc != null) {
      var date = new Date(daterc)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始，11结束，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
  }
}


export { mixin, mixinDevice, AppDeviceEnquire, ExternalLink, dateFormat}