Modify code organization

cmdb-ui/src/utils/axios.js

@@ -0,0 +1,35 @@
+const VueAxios = {
+  vm: {},
+  // eslint-disable-next-line no-unused-vars
+  install (Vue, instance) {
+    if (this.installed) {
+      return
+    }
+    this.installed = true
+
+    if (!instance) {
+      // eslint-disable-next-line no-console
+      console.error('You have to install axios')
+      return
+    }
+
+    Vue.axios = instance
+
+    Object.defineProperties(Vue.prototype, {
+      axios: {
+        get: function get () {
+          return instance
+        }
+      },
+      $http: {
+        get: function get () {
+          return instance
+        }
+      }
+    })
+  }
+}
+
+export {
+  VueAxios
+}

cmdb-ui/src/utils/device.js

@@ -0,0 +1,33 @@
+import enquireJs from 'enquire.js'
+
+export const DEVICE_TYPE = {
+  DESKTOP: 'desktop',
+  TABLET: 'tablet',
+  MOBILE: 'mobile'
+}
+
+export const deviceEnquire = function (callback) {
+  const matchDesktop = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.DESKTOP)
+    }
+  }
+
+  const matchLablet = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.TABLET)
+    }
+  }
+
+  const matchMobile = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.MOBILE)
+    }
+  }
+
+  // screen and (max-width: 1087.99px)
+  enquireJs
+    .register('screen and (max-width: 576px)', matchMobile)
+    .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet)
+    .register('screen and (min-width: 1200px)', matchDesktop)
+}

cmdb-ui/src/utils/domUtil.js

@@ -0,0 +1,19 @@
+export const setDocumentTitle = function (title) {
+  document.title = title
+  const ua = navigator.userAgent
+  // eslint-disable-next-line
+  const regex = /\bMicroMessenger\/([\d\.]+)/
+  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
+    const i = document.createElement('iframe')
+    i.src = '/favicon.ico'
+    i.style.display = 'none'
+    i.onload = function () {
+      setTimeout(function () {
+        i.remove()
+      }, 9)
+    }
+    document.body.appendChild(i)
+  }
+}
+
+export const domTitle = 'CMDB'

cmdb-ui/src/utils/filter.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+moment.locale('zh-cn')
+
+Vue.filter('NumberFormat', function (value) {
+  if (!value) {
+    return '0'
+  }
+  const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
+  return intPartFormat
+})
+
+Vue.filter('dayjs', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
+  return moment(dataStr).format(pattern)
+})
+
+Vue.filter('moment', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
+  return moment(dataStr).format(pattern)
+})

cmdb-ui/src/utils/helper/permission.js

@@ -0,0 +1,51 @@
+const PERMISSION_ENUM = {
+  'add': { key: 'add', label: '新增' },
+  'delete': { key: 'delete', label: '删除' },
+  'edit': { key: 'edit', label: '修改' },
+  'query': { key: 'query', label: '查询' },
+  'get': { key: 'get', label: '详情' },
+  'enable': { key: 'enable', label: '启用' },
+  'disable': { key: 'disable', label: '禁用' },
+  'import': { key: 'import', label: '导入' },
+  'export': { key: 'export', label: '导出' }
+}
+
+function plugin (Vue) {
+  if (plugin.installed) {
+    return
+  }
+
+  !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
+    $auth: {
+      get () {
+        const _this = this
+        return (permissions) => {
+          const [permission, action] = permissions.split('.')
+          const permissionList = _this.$store.getters.roles.permissions
+          return permissionList.find((val) => {
+            return val.permissionId === permission
+          }).actionList.findIndex((val) => {
+            return val === action
+          }) > -1
+        }
+      }
+    }
+  })
+
+  !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
+    $enum: {
+      get () {
+        // const _this = this;
+        return (val) => {
+          let result = PERMISSION_ENUM
+          val && val.split('.').forEach(v => {
+            result = result && result[v] || null
+          })
+          return result
+        }
+      }
+    }
+  })
+}
+
+export default plugin

cmdb-ui/src/utils/mixin.js

@@ -0,0 +1,76 @@
+// import Vue from 'vue'
+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,
+      colorWeak: state => state.app.weak,
+      fixedHeader: state => state.app.fixedHeader,
+      fixSiderbar: state => state.app.fixSiderbar,
+      fixSidebar: state => state.app.fixSiderbar,
+      contentWidth: state => state.app.contentWidth,
+      autoHideHeader: state => state.app.autoHideHeader,
+      sidebarOpened: state => state.app.sidebar,
+      multiTab: state => state.app.multiTab
+    })
+  },
+  methods: {
+    isTopMenu () {
+      return this.layoutMode === 'topmenu'
+    },
+    isSideMenu () {
+      return !this.isTopMenu()
+    }
+  }
+}
+
+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
+      }
+    })
+  }
+}
+
+export { mixin, AppDeviceEnquire, mixinDevice }

cmdb-ui/src/utils/permissions.js

@@ -0,0 +1,8 @@
+export function actionToObject (json) {
+  try {
+    return JSON.parse(json)
+  } catch (e) {
+    console.log('err', e.message)
+  }
+  return []
+}

cmdb-ui/src/utils/request.js

@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import axios from 'axios'
+import store from '@/store'
+import { VueAxios } from './axios'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
+  timeout: 6000, // 请求超时时间
+  withCredentials: true,
+  crossDomain: true
+})
+
+const err = (error) => {
+  if (error.response) {
+    if (error.response.status === 401) {
+      store.dispatch('Logout')
+    }
+  }
+  return Promise.reject(error)
+}
+
+// request interceptor
+service.interceptors.request.use(config => {
+  const token = Vue.ls.get(ACCESS_TOKEN)
+  if (token) {
+    config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+  }
+  return config
+}, err)
+
+// response interceptor
+service.interceptors.response.use((response) => {
+  return response.data
+}, err)
+
+const installer = {
+  vm: {},
+  install (Vue) {
+    Vue.use(VueAxios, service)
+  }
+}
+
+export {
+  installer as VueAxios,
+  service as axios
+}

cmdb-ui/src/utils/util.js

@@ -0,0 +1,60 @@
+export function timeFix () {
+  const time = new Date()
+  const hour = time.getHours()
+  return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
+}
+
+export function welcome () {
+  const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
+  const index = Math.floor(Math.random() * arr.length)
+  return arr[index]
+}
+
+/**
+ * 触发 window.resize
+ */
+export function triggerWindowResizeEvent () {
+  const event = document.createEvent('HTMLEvents')
+  event.initEvent('resize', true, true)
+  event.eventType = 'message'
+  window.dispatchEvent(event)
+}
+
+export function handleScrollHeader (callback) {
+  let timer = 0
+
+  let beforeScrollTop = window.pageYOffset
+  callback = callback || function () {}
+  window.addEventListener(
+    'scroll',
+    event => {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        let direction = 'up'
+        const afterScrollTop = window.pageYOffset
+        const delta = afterScrollTop - beforeScrollTop
+        if (delta === 0) {
+          return false
+        }
+        direction = delta > 0 ? 'down' : 'up'
+        callback(direction)
+        beforeScrollTop = afterScrollTop
+      }, 50)
+    },
+    false
+  )
+}
+
+/**
+ * Remove loading animate
+ * @param id parent element id or class
+ * @param timeout
+ */
+export function removeLoadingAnimate (id = '', timeout = 1500) {
+  if (id === '') {
+    return
+  }
+  setTimeout(() => {
+    document.body.removeChild(document.getElementById(id))
+  }, timeout)
+}

cmdb-ui/src/utils/utils.less

@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}