vue2-client 0.1.1 → 1.2.0

package/src/base-client/plugins/authority-plugin.js

@@ -0,0 +1,167 @@
+/**
+ * 获取路由需要的权限
+ * @param permissions
+ * @param route
+ * @returns {Permission}
+ */
+const getRoutePermission = (permissions, route) => permissions.find(item => item.id === route.meta.authority.permission)
+/**
+ * 获取路由需要的角色
+ * @param roles
+ * @param route
+ * @returns {Array[Role]}
+ */
+const getRouteRole = (roles, route) => {
+  const requiredRoles = route.meta.authority.role
+  return requiredRoles ? roles.filter(item => requiredRoles.findIndex(required => required === item.id) !== -1) : []
+}
+/**
+ * 判断是否已为方法注入权限认证
+ * @param method
+ * @returns {boolean}
+ */
+const hasInjected = (method) => method.toString().indexOf('//--auth-inject') !== -1
+
+/**
+ * 操作权限校验
+ * @param authConfig
+ * @param permission
+ * @param role
+ * @param permissions
+ * @param roles
+ * @returns {boolean}
+ */
+const auth = function (authConfig, permission, role, permissions, roles) {
+  const { check, type } = authConfig
+  if (check && typeof check === 'function') {
+    return check.apply(this, [permission, role, permissions, roles])
+  }
+  if (type === 'permission') {
+    return checkFromPermission(check, permission)
+  } else if (type === 'role') {
+    return checkFromRoles(check, role)
+  } else {
+    return checkFromPermission(check, permission) || checkFromRoles(check, role)
+  }
+}
+
+/**
+ * 检查权限是否有操作权限
+ * @param check 需要检查的操作权限
+ * @param permission 权限
+ * @returns {boolean}
+ */
+const checkFromPermission = function (check, permission) {
+  return permission && permission.operation && permission.operation.indexOf(check) !== -1
+}
+
+/**
+ * 检查 roles 是否有操作权限
+ * @param check 需要检查的操作权限
+ * @param roles 角色数组
+ * @returns {boolean}
+ */
+const checkFromRoles = function (check, roles) {
+  if (!roles) {
+    return false
+  }
+  for (const role of roles) {
+    const { operation } = role
+    if (operation && operation.indexOf(check) !== -1) {
+      return true
+    }
+  }
+  return false
+}
+
+const checkInject = function (el, binding, vnode) {
+  const type = binding.arg
+  const check = binding.value
+  const instance = vnode.context
+  const $auth = instance.$auth
+  if (!$auth || !$auth(check, type)) {
+    addDisabled(el)
+  } else {
+    removeDisabled(el)
+  }
+}
+
+const addDisabled = function (el) {
+  if (el.tagName === 'BUTTON') {
+    el.disabled = true
+  } else {
+    el.classList.add('disabled')
+  }
+  el.setAttribute('title', '无此权限')
+}
+
+const removeDisabled = function (el) {
+  el.disabled = false
+  el.classList.remove('disabled')
+  el.removeAttribute('title')
+}
+
+const AuthorityPlugin = {
+  install (Vue) {
+    Vue.directive('auth', {
+      bind (el, binding, vnode) {
+        setTimeout(() => checkInject(el, binding, vnode), 10)
+      },
+      componentUpdated (el, binding, vnode) {
+        setTimeout(() => checkInject(el, binding, vnode), 10)
+      },
+      unbind (el) {
+        removeDisabled(el)
+      }
+    })
+    Vue.mixin({
+      beforeCreate () {
+        if (this.$options.authorize) {
+          const authorize = this.$options.authorize
+          Object.keys(authorize).forEach(key => {
+            if (this.$options.methods[key]) {
+              const method = this.$options.methods[key]
+              if (!hasInjected(method)) {
+                let authConfig = authorize[key]
+                authConfig = (typeof authConfig === 'string') ? { check: authConfig } : authConfig
+                const { check, type, onFailure } = authConfig
+                this.$options.methods[key] = function () {
+                  // --auth-inject
+                  if (this.$auth(check, type)) {
+                    return method.apply(this, arguments)
+                  } else {
+                    if (onFailure && typeof onFailure === 'function') {
+                      this[`$${check}Failure`] = onFailure
+                      return this[`$${check}Failure`](check)
+                    } else {
+                      this.$message.error(`对不起，您没有操作权限：${check}`)
+                    }
+                    return 0
+                  }
+                }
+              }
+            }
+          })
+        }
+      },
+      methods: {
+        /**
+         * 操作权限校验
+         * @param check 需要校验的操作名
+         * @param type 校验类型，通过 permission 校验，还是通过 role 校验。
+         * 如未设置，则自动识别，如匹配到当前路由 permission 则 type = permission，否则 type = role
+         * @returns {boolean} 是否校验通过
+         */
+        $auth (check, type) {
+          const permissions = this.$store.getters['account/permissions']
+          const roles = this.$store.getters['account/roles']
+          const permission = getRoutePermission(permissions, this.$route)
+          const role = getRouteRole(roles, this.$route)
+          return auth.apply(this, [{ check, type }, permission, role, permissions, roles])
+        }
+      }
+    })
+  }
+}
+
+export default AuthorityPlugin

package/src/base-client/plugins/i18n-extend.js

@@ -0,0 +1,32 @@
+// 语句模式
+const MODE = {
+  STATEMENTS: 's', // 语句模式
+  PHRASAL: 'p' // 词组模式
+}
+
+const VueI18nPlugin = {
+  install: function (Vue) {
+    Vue.mixin({
+      methods: {
+        $ta (syntaxKey, mode) {
+          const _mode = mode || MODE.STATEMENTS
+          const keys = syntaxKey.split('|')
+          const _this = this
+          const locale = this.$i18n.locale
+          let message = ''
+          const splitter = locale == 'US' ? ' ' : ''
+          // 拼接 message
+          keys.forEach(key => {
+            message += _this.$t(key) + splitter
+          })
+          // 英文环境语句模式下，转换单词大小写
+          if (keys.length > 0 && _mode == MODE.STATEMENTS && locale == 'US') {
+            message = message.charAt(0).toUpperCase() + message.toLowerCase().substring(1)
+          }
+          return message
+        }
+      }
+    })
+  }
+}
+export default VueI18nPlugin

package/src/base-client/plugins/index.js

@@ -0,0 +1,21 @@
+import GetLoginInfoService from '@vue2-client/base-client/plugins/GetLoginInfoService'
+import GetAppDataService from '@vue2-client/base-client/plugins/AppData'
+import getConfig from '@vue2-client/base-client/plugins/Config'
+import moment from '@vue2-client/base-client/plugins/moment'
+
+import VueI18nPlugin from './i18n-extend'
+import AuthorityPlugin from './authority-plugin'
+import TabsPagePlugin from './tabs-page-plugin'
+
+const Plugins = {
+  install: function (Vue) {
+    Vue.use(GetLoginInfoService)
+    Vue.use(GetAppDataService)
+    Vue.use(getConfig)
+    Vue.use(moment)
+    Vue.use(VueI18nPlugin)
+    Vue.use(AuthorityPlugin)
+    Vue.use(TabsPagePlugin)
+  }
+}
+export default Plugins

package/src/{plugins → base-client/plugins}/moment.js

@@ -1,8 +1,8 @@
-import moment from 'moment'
-
-const momentPluging = {
-  install (Vue) {
-    Vue.moment = Vue.prototype.$moment = moment
-  }
-}
-export default momentPluging
+import moment from 'moment'
+
+const momentPluging = {
+  install (Vue) {
+    Vue.moment = Vue.prototype.$moment = moment
+  }
+}
+export default momentPluging

package/src/base-client/plugins/tabs-page-plugin.js

@@ -0,0 +1,38 @@
+const TabsPagePlugin = {
+  install (Vue) {
+    Vue.mixin({
+      methods: {
+        $closePage (closeRoute, nextRoute) {
+          const event = new CustomEvent('page:close', { detail: { closeRoute, nextRoute } })
+          window.dispatchEvent(event)
+        },
+        $refreshPage (route) {
+          const path = typeof route === 'object' ? route.path : route
+          const event = new CustomEvent('page:refresh', { detail: { pageKey: path } })
+          window.dispatchEvent(event)
+        },
+        $openPage (route, title) {
+          this.$setPageTitle(route, title)
+          this.$router.push(route)
+        },
+        $setPageTitle (route, title) {
+          if (title) {
+            let path = typeof route === 'object' ? route.path : route
+            path = path && path.split('?')[0]
+            this.$store.commit('setting/setCustomTitle', { path, title })
+          }
+        }
+      },
+      computed: {
+        customTitle () {
+          const customTitles = this.$store.state.setting.customTitles
+          const path = this.$route.path.split('?')[0]
+          const custom = customTitles.find(item => item.path === path)
+          return custom && custom.title
+        }
+      }
+    })
+  }
+}
+
+export default TabsPagePlugin

package/src/bootstrap.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import { loadRoutes, loadGuards, setAppOptions } from '@vue2-client/utils/routerUtil'
+import { loadInterceptors } from '@vue2-client/utils/request'
+import guards from '@vue2-client/router/guards'
+import interceptors from '@vue2-client/utils/axios-interceptors'
+
+/**
+ * 启动引导方法
+ * 应用启动时需要执行的操作放在这里
+ * @param router 应用的路由实例
+ * @param store 应用的 vuex.store 实例
+ * @param i18n 应用的 vue-i18n 实例
+ * @param i18n 应用的 message 实例
+ */
+function bootstrap ({ router, store, i18n, message }) {
+  Vue.$store = store
+  // 设置应用配置
+  setAppOptions({ router, store, i18n })
+  // 加载 axios 拦截器
+  loadInterceptors(interceptors, { router, store, i18n, message })
+  // 加载路由
+  loadRoutes()
+  // 加载路由守卫
+  loadGuards(guards, { router, store, i18n, message })
+}
+
+export default bootstrap

package/src/components/Charts/Bar.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      height="375"
+      :data="data"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '70']">
+      <v-tooltip />
+      <v-axis />
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Bar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    scale: {
+      type: Array,
+      default: () => {
+        return [{
+          dataKey: 'x',
+          min: 2
+        }, {
+          dataKey: 'y',
+          title: '时间',
+          min: 1,
+          max: 22
+        }]
+      }
+    },
+    tooltip: {
+      type: Array,
+      default: () => {
+        return [
+          'x*y',
+          (x, y) => ({
+            name: x,
+            value: y
+          })
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+    }
+  }
+}
+</script>

package/src/components/Charts/ChartCard.vue

@@ -0,0 +1,120 @@
+<template>
+  <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px', minHeight: '182px' }" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </span>
+        <span class="chart-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
+      <div class="total">
+        <slot name="total">
+          <span>{{ typeof total === 'function' && total() || total }}</span>
+        </slot>
+      </div>
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <div class="field">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ChartCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    total: {
+      type: [Function, Number, String],
+      required: false,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-card-header {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    .meta {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      color: rgba(0, 0, 0, .45);
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+
+  .chart-card-action {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .chart-card-footer {
+    border-top: 1px solid #e8e8e8;
+    padding-top: 9px;
+    margin-top: 8px;
+
+    > * {
+      position: relative;
+    }
+
+    .field {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+  }
+
+  .chart-card-content {
+    margin-bottom: 12px;
+    position: relative;
+    height: 46px;
+    width: 100%;
+
+    .content-fix {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    color: #000;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
+  }
+</style>

package/src/components/Charts/DataUserOrderSituation.vue

@@ -0,0 +1,77 @@
+<template>
+  <div style="margin-top: 100px">
+    <canvas id="OrderSituation" width="350" height="250" top="30"></canvas>
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import { Line } from '@antv/g2plot'
+  import F2 from '@antv/f2/lib/index-all'
+  // eslint-disable-next-line no-unused-vars
+  import _ from 'lodash'
+  export default {
+    name: 'DataUserOrderSituation',
+    data () {
+      return {
+        chart: null
+      }
+    },
+    props: {
+      instructSituation: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      }
+    },
+    mounted () {
+      console.log('instructSituation', this.instructSituation)
+      var v = this
+      this.$nextTick(() => {
+        v.createcon()
+      })
+    },
+    watch: {
+      'instructSituation' () {
+        this.createcon()
+      }
+    },
+    methods: {
+      createcon () {
+        const data = []
+        if (this.chart) {
+          this.chart.clear()
+        }
+        if (this.instructSituation.length > 0) {
+          console.log(this.instructSituation)
+          // eslint-disable-next-line no-unused-vars
+          this.instructSituation.forEach(item => {
+            const re = {
+              genre: item.name,
+              sold: parseFloat(item.cout).toFixed(2)
+            }
+            data.push(re)
+          })
+        }
+        console.log('-00000000', this.instructSituation)
+        this.chart = new F2.Chart({
+          id: 'OrderSituation',
+          pixelRatio: window.devicePixelRatio,
+          aria: true, // 开启无障碍描述生成
+          title: '指令情况' // 图表标题，可被无障碍识别
+        })
+        this.chart.source(data)
+        this.chart.interval()
+          .position('genre*sold')
+          .color('genre')
+
+        this.chart.render()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/Charts/DataUserReporting.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="About">
+    <canvas id="containers" width="350" height="250"></canvas>
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import F2 from '@antv/f2'
+  export default {
+    name: 'Radar',
+    data () {
+      return {
+        chart: null
+      }
+    },
+    props: {
+      reportSituation: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      }
+    },
+    mounted () {
+      var v = this
+      this.$nextTick(() => {
+          v.createcon()
+      })
+     },
+    methods: {
+      createcon () {
+        const data = []
+        if (this.chart) {
+          this.chart.clear()
+        }
+        // eslint-disable-next-line no-const-assign
+        if (this.reportSituation.length > 0) {
+          // eslint-disable-next-line no-unused-vars
+          this.reportSituation.forEach(item => {
+            const re = {
+              genre: item.name,
+              sold: parseFloat(item.cout).toFixed(2)
+            }
+            data.push(re)
+          })
+        }
+        console.log('reportSituation==data', data)
+        this.chart = new F2.Chart({
+          id: 'containers',
+          pixelRatio: window.devicePixelRatio,
+          aria: true, // 开启无障碍描述生成
+          title: '抄表上报' // 图表标题，可被无障碍识别
+        })
+        this.chart.source(data)
+        this.chart.interval()
+          .position('genre*sold')
+          .color('genre')
+
+        this.chart.render()
+      }
+    },
+    watch: {
+      'reportSituation' () {
+        console.log('222.')
+        this.createcon()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>