Merge 66613f0373 into de8a38d6ec

src/components/Tinymce/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tinymce-container editor-container">
+  <div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
     <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
     <div class="editor-custom-btn-container">
       <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
@@ -43,7 +43,8 @@ export default {
     return {
       hasChange: false,
       hasInit: false,
-      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
+      fullscreen: false
     }
   },
   watch: {
@@ -91,6 +92,11 @@ export default {
             this.hasChange = true
             this.$emit('input', editor.getContent())
           })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
+          })
         }
         // 整合七牛上传
         // images_dataimg_filter(img) {
@@ -168,6 +174,10 @@ export default {
   top: 4px;
   /*z-index: 2005;*/
 }
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
 .editor-upload-btn {
   display: inline-block;
 }

src/components/Tinymce/toolbar.js

@@ -1,6 +1,6 @@
 // Here is a list of the toolbar
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
 
-const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak fullscreen insertdatetime media table emoticons forecolor backcolor']
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
 
 export default toolbar

src/directive/permission/index.js

@@ -0,0 +1,13 @@
+import permission from './permission'
+
+const install = function(Vue) {
+  Vue.directive('permission', permission)
+}
+
+if (window.Vue) {
+  window['permission'] = permission
+  Vue.use(install); // eslint-disable-line
+}
+
+permission.install = install
+export default permission

src/directive/permission/permission.js

@@ -0,0 +1,23 @@
+
+import store from '@/store'
+
+export default{
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const roles = store.getters && store.getters.roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionRoles = value
+
+      const hasPermission = roles.some(role => {
+        return permissionRoles.includes(role)
+      })
+
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+    }
+  }
+}

src/filters/index.js

@@ -1,3 +1,6 @@
+// set function parseTime,formatTime to filter
+export { parseTime, formatTime } from '@/utils'
+
 function pluralize(time, label) {
   if (time === 1) {
     return time + label
@@ -16,67 +19,8 @@ export function timeAgo(time) {
   }
 }
 
-export function parseTime(time, cFormat) {
-  if (arguments.length === 0) {
-    return null
-  }
-
-  if ((time + '').length === 10) {
-    time = +time * 1000
-  }
-
-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    date = new Date(parseInt(time))
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    let value = formatObj[key]
-    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return time_str
-}
-
-export function formatTime(time, option) {
-  time = +time * 1000
-  const d = new Date(time)
-  const now = Date.now()
-
-  const diff = (now - d) / 1000
-
-  if (diff < 30) {
-    return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
-  } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
-  } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
-  }
-  if (option) {
-    return parseTime(time, option)
-  } else {
-    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
-  }
-}
-
 /* 数字 格式化*/
-export function nFormatter(num, digits) {
+export function numberFormatter(num, digits) {
   const si = [
     { value: 1E18, symbol: 'E' },
     { value: 1E15, symbol: 'P' },
@@ -93,12 +37,6 @@ export function nFormatter(num, digits) {
   return num.toString()
 }
 
-export function html2Text(val) {
-  const div = document.createElement('div')
-  div.innerHTML = val
-  return div.textContent || div.innerText
-}
-
 export function toThousandslsFilter(num) {
   return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }

src/lang/en.js

@@ -4,6 +4,8 @@ export default {
     introduction: 'Introduction',
     documentation: 'Documentation',
     permission: 'Permission',
+    pagePermission: 'Page Permission',
+    directivePermission: 'Directive Permission',
     icons: 'Icons',
     components: 'Components',
     componentIndex: 'Introduction',

src/lang/zh.js

@@ -4,6 +4,8 @@ export default {
     introduction: '简述',
     documentation: '文档',
     permission: '权限测试页',
+    pagePermission: '页面权限',
+    directivePermission: '指令权限',
     icons: '图标',
     components: '组件',
     componentIndex: '介绍',

src/router/index.js

@@ -67,16 +67,28 @@ export const asyncRouterMap = [
     path: '/permission',
     component: Layout,
     redirect: '/permission/index',
-    meta: { roles: ['admin'] }, // you can set roles in root nav
+    alwaysShow: true, // will always show the root menu
+    meta: {
+      title: 'permission',
+      icon: 'lock',
+      roles: ['admin', 'editor'] // you can set roles in root nav
+    },
     children: [{
-      path: 'index',
-      component: _import('permission/index'),
-      name: 'permission',
+      path: 'page',
+      component: _import('permission/page'),
+      name: 'pagePermission',
       meta: {
-        title: 'permission',
-        icon: 'lock',
+        title: 'pagePermission',
         roles: ['admin'] // or you can only set roles in sub nav
       }
+    }, {
+      path: 'directive',
+      component: _import('permission/directive'),
+      name: 'directivePermission',
+      meta: {
+        title: 'directivePermission'
+        // if do not set roles, means: this page does not require permission
+      }
     }]
   },
 

src/views/permission/components/SwitchRoles.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
+    {{$t('permission.switchRoles')}}：
+    <el-radio-group v-model="switchRoles">
+      <el-radio-button label="editor"></el-radio-button>
+      <el-radio-button label="admin"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    roles() {
+      return this.$store.getters.roles
+    },
+    switchRoles: {
+      get() {
+        return this.roles[0]
+      },
+      set(val) {
+        this.$store.dispatch('ChangeRoles', val).then(() => {
+          this.$emit('change')
+        })
+      }
+    }
+  }
+}
+</script>

src/views/permission/directive.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+
+    <div :key="key" style="margin-top:30px;">
+      <span v-permission="['admin']" class="permission-alert">
+        Only <el-tag class="permission-tag" size="small">admin</el-tag> can see this
+      </span>
+      <span v-permission="['editor']" class="permission-alert">
+        Only <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+      <span v-permission="[]" class="permission-alert">
+        Both <el-tag class="permission-tag" size="small">admin</el-tag> and <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import permission from '@/directive/permission/index.js' // 权限判断指令
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'directivePermission',
+  components: { SwitchRoles },
+  directives: { permission },
+  data() {
+    return {
+      key: 1 // 为了能每次切换权限的时候重新初始化指令
+    }
+  },
+  methods: {
+    handleRolesChange() {
+      this.key++
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.app-container {
+  /deep/ .permission-alert {
+    width: 320px;
+    margin-top: 30px;
+    background-color: #f0f9eb;
+    color: #67c23a;
+    padding: 8px 16px;
+    border-radius: 4px;
+    display: block;
+  }
+  /deep/ .permission-tag{
+    background-color: #ecf5ff;
+  }
+}
+</style>
+

src/views/permission/index.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="app-container">
-    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
-    {{$t('permission.switchRoles')}}：
-    <el-radio-group v-model="switchRoles">
-      <el-radio-button label="editor"></el-radio-button>
-    </el-radio-group>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default{
-  name: 'permission',
-  data() {
-    return {
-      switchRoles: ''
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  },
-  watch: {
-    switchRoles(val) {
-      this.$store.dispatch('ChangeRoles', val).then(() => {
-        this.$router.push({ path: '/permission/index?' + +new Date() })
-      })
-    }
-  }
-}
-</script>

src/views/permission/page.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+  </div>
+</template>
+
+<script>
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'pagePermission',
+  components: { SwitchRoles },
+  methods: {
+    handleRolesChange() {
+      this.$router.push({ path: '/permission/index?' + +new Date() })
+    }
+  }
+}
+</script>