孙向锦 / SunvoteEducation

Blame view

src/views/role/index.vue 3.38 KB
Edit Raw Normal View History
be966eff   jack   1.添加文件 
1
2
3
4
5
6
 
  <template>
    <div style="height:calc(100vh - 50px);overflow:auto;">
      <Dec :content="content" />
  
      <div class="app-container">
        <div class="btn-grooup">
a61d16e2   jack   1.更新文件 
7
 
          <el-button type="primary" @click="addRole">新建角色</el-button>
be966eff   jack   1.添加文件 
8
9
10
 
          <el-button type="primary" @click="copyRole">复制权限新建角色</el-button>
        </div>
        <el-row style="height:calc(100% - 55px)">
a61d16e2   jack   1.更新文件 
11
 
          <el-col :span="6" style="height:100%;border-right:1px solid #ccc;">
be966eff   jack   1.添加文件 
12
13
14
15
16
17
18
19
20
21
22
23
24
 
            <ListBox
              ref="listbox"
              title="角色列表"
              title-bg="#ccc"
              :data="listData"
              active-color="rgb(64, 158, 255)"
              :acitve-index="1"
              @clicklist="clicklist"
              @removelist="removelist"
              @submitname="submitname"
            />
          </el-col>
          <el-col :span="18" style="padding:0 15px;height:100%">
a61d16e2   jack   1.更新文件 
25
26
27
 
            <p style="line-height:50px;margin:0;">角色名称：<el-input v-model="listData[clickindex].name" size="small" style="width:200px;" /></p>
  
            <el-tabs type="card">
be966eff   jack   1.添加文件 
28
 
              <el-tab-pane label="页面权限">
a61d16e2   jack   1.更新文件 
29
30
31
32
33
34
35
36
37
38
39
 
                <div style="height:calc(100vh - 360px);overflow:auto;">
                  <el-tree
                    :data="treedata"
                    show-checkbox
                    node-key="id"
                    :default-expanded-keys="[2]"
                    :default-checked-keys="[5]"
                    :default-expand-all="true"
                    :props="defaultProps"
                  />
                </div>
be966eff   jack   1.添加文件 
40
41
42
 
              </el-tab-pane>
            </el-tabs>
a61d16e2   jack   1.更新文件 
43
 
            <div style="line-height:50px;text-align:center;"><el-button type="primary">保存</el-button></div>
be966eff   jack   1.添加文件 
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
 
          </el-col>
        </el-row>
  
      </div>
    </div>
  </template>
  
  <script>
  import Dec from '@/components/Dec'
  import ListBox from '@/components/ListBox'
  export default {
    name: 'Role',
    components: {
      Dec,
      ListBox
    },
    data() {
      return {
        content: '角色用来控制不同的用户可以受用哪些功能权限',
        clickindex: 0,
        listData: [
          { id: 1, name: '班主任' },
          { id: 2, name: '任课老师' }
        ],
        treedata: [{
          id: 1,
          label: '账号管理',
          children: [{
            id: 4,
            label: '角色管理'
          }, {
            id: 5,
            label: '账号管理'
          }]
        }, {
          id: 2,
          label: '一级 2'
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
  
    methods: {
      removelist(index) {
        this.listData.splice(index, 1)
      },
      clicklist(index) {
        this.clickindex = index
      },
      copyRole() {
        if (this.clickindex < this.listData.length) {
a61d16e2   jack   1.更新文件 
108
109
 
          // const name = this.listData[this.clickindex].name
          this.$refs.listbox.addList('未命名')
be966eff   jack   1.添加文件 
110
111
112
113
 
        } else {
          this.$message.error('请选择复制对象')
        }
      },
a61d16e2   jack   1.更新文件 
114
115
116
 
      addRole() {
        this.$refs.listbox.addList('未命名')
      },
be966eff   jack   1.添加文件 
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
      submitname(index) {
        this.listData[index].edit = false
      }
  
    }
  }
  </script>
  <style scoped>
    .app-container{
      max-width: 1100px;
      height: calc(100% - 65px);
      background: #fff;
      margin:0 auto;
      margin-top:15px;
    }
    .btn-grooup{
      padding-bottom: 15px;
    }
  </style>