Adam / gulu-admin

Blame view

src/views/permission/directive.vue 3.16 KB
edit raw normal view history
d7d9c38c2   Adam   auto commit the c... 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
  <template>
    <div class="app-container">
      <switch-roles @change="handleRolesChange" />
      <div :key="key" style="margin-top:30px;">
        <div>
          <span v-permission="['admin']" class="permission-alert">
            Only
            <el-tag class="permission-tag" size="small">admin</el-tag> can see this
          </span>
          <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
            v-permission="['admin']"
          </el-tag>
        </div>
  
        <div>
3d3cdb68f   Adam   auto commit the c... 
16
 
          <span v-permission="['runner']" class="permission-alert">
d7d9c38c2   Adam   auto commit the c... 
17
 
            Only
3d3cdb68f   Adam   auto commit the c... 
18
 
            <el-tag class="permission-tag" size="small">runner</el-tag> can see this
d7d9c38c2   Adam   auto commit the c... 
19
 
          </span>
3d3cdb68f   Adam   auto commit the c... 
20
21
 
          <el-tag v-permission="['runner']" class="permission-sourceCode" type="info">
            v-permission="['runner']"
d7d9c38c2   Adam   auto commit the c... 
22
23
24
25
 
          </el-tag>
        </div>
  
        <div>
3d3cdb68f   Adam   auto commit the c... 
26
 
          <span v-permission="['admin','shoper']" class="permission-alert">
d7d9c38c2   Adam   auto commit the c... 
27
28
 
            Both
            <el-tag class="permission-tag" size="small">admin</el-tag> and
3d3cdb68f   Adam   auto commit the c... 
29
 
            <el-tag class="permission-tag" size="small">shoper</el-tag> can see this
d7d9c38c2   Adam   auto commit the c... 
30
 
          </span>
3d3cdb68f   Adam   auto commit the c... 
31
32
 
          <el-tag v-permission="['admin','shoper']" class="permission-sourceCode" type="info">
            v-permission="['admin','shoper']"
d7d9c38c2   Adam   auto commit the c... 
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
          </el-tag>
        </div>
      </div>
  
      <div :key="'checkPermission'+key" style="margin-top:60px;">
        <aside>
          {{ $t('permission.tips') }}
          <br> e.g.
        </aside>
  
        <el-tabs type="border-card" style="width:550px;">
          <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
            Admin can see this
            <el-tag class="permission-sourceCode" type="info">
              v-if="checkPermission(['admin'])"
            </el-tag>
          </el-tab-pane>
3d3cdb68f   Adam   auto commit the c... 
50
51
 
          <el-tab-pane v-if="checkPermission(['shoper'])" label="Shoper">
            Shoper can see this
d7d9c38c2   Adam   auto commit the c... 
52
 
            <el-tag class="permission-sourceCode" type="info">
3d3cdb68f   Adam   auto commit the c... 
53
 
              v-if="checkPermission(['shoper'])"
d7d9c38c2   Adam   auto commit the c... 
54
55
 
            </el-tag>
          </el-tab-pane>
3d3cdb68f   Adam   auto commit the c... 
56
57
 
          <el-tab-pane v-if="checkPermission(['admin','runner'])" label="Admin-OR-Runner">
            Both admin or runner can see this
d7d9c38c2   Adam   auto commit the c... 
58
 
            <el-tag class="permission-sourceCode" type="info">
3d3cdb68f   Adam   auto commit the c... 
59
 
              v-if="checkPermission(['admin','runner'])"
d7d9c38c2   Adam   auto commit the c... 
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
            </el-tag>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </template>
  
  <script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import checkPermission from '@/utils/permission' // 权限判断函数
  import SwitchRoles from './components/SwitchRoles'
  
  export default {
    name: 'DirectivePermission',
    components: { SwitchRoles },
    directives: { permission },
    data() {
      return {
        key: 1 // 为了能每次切换权限的时候重新初始化指令
      }
    },
    methods: {
      checkPermission,
      handleRolesChange() {
        this.key++
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .app-container {
    /deep/ .permission-alert {
      width: 320px;
      margin-top: 15px;
      background-color: #f0f9eb;
      color: #67c23a;
      padding: 8px 16px;
      border-radius: 4px;
      display: inline-block;
    }
    /deep/ .permission-sourceCode {
      margin-left: 15px;
    }
    /deep/ .permission-tag {
      background-color: #ecf5ff;
    }
  }
  </style>