Просмотр исходного кода

Merge branch 'superman' of http://git.shengws.com/zhangbj/xt_vue into superman

XMLWAN 4 лет назад
Родитель
Сommit
1106234320
9 измененных файлов: 669 добавлений и 186 удалений
  1. Двоичные данные
      src/assets/img/pc1.png
  2. Двоичные данные
      src/assets/img/pc2.png
  3. Двоичные данные
      src/assets/img/pc3.png
  4. Двоичные данные
      src/assets/img/pc4.png
  5. Двоичные данные
      src/assets/img/pc5.png
  6. 35 35
      src/views/layout/Layout.vue
  7. 272 93
      src/xt_pages/role/components/EditRole.vue
  8. 151 0
      src/xt_pages/role/components/PermissionSettings.vue
  9. 211 58
      src/xt_pages/role/role.vue

Двоичные данные
src/assets/img/pc1.png Просмотреть файл


Двоичные данные
src/assets/img/pc2.png Просмотреть файл


Двоичные данные
src/assets/img/pc3.png Просмотреть файл


Двоичные данные
src/assets/img/pc4.png Просмотреть файл


Двоичные данные
src/assets/img/pc5.png Просмотреть файл


+ 35 - 35
src/views/layout/Layout.vue Просмотреть файл

@@ -1,24 +1,24 @@
1 1
 <template>
2 2
   <div class="app-wrapper" :class="classObj">
3 3
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
4
-      <navbar></navbar>
4
+    <navbar></navbar>
5 5
 
6 6
     <div class="Header-container">
7
-    <sidebar class="sidebar-container"></sidebar>
8
-    <div class="main-container">
9
-      <tags-view></tags-view>
10
-      <app-main></app-main>
7
+      <sidebar class="sidebar-container"></sidebar>
8
+      <div class="main-container">
9
+        <tags-view></tags-view>
10
+        <app-main></app-main>
11
+      </div>
11 12
     </div>
12
-   </div>
13 13
   </div>
14 14
 </template>
15 15
 
16 16
 <script>
17
-import { Navbar, Sidebar, AppMain, TagsView } from './components'
18
-import ResizeMixin from './mixin/ResizeHandler'
17
+import { Navbar, Sidebar, AppMain, TagsView } from "./components";
18
+import ResizeMixin from "./mixin/ResizeHandler";
19 19
 
20 20
 export default {
21
-  name: 'layout',
21
+  name: "layout",
22 22
   components: {
23 23
     Navbar,
24 24
     Sidebar,
@@ -28,47 +28,47 @@ export default {
28 28
   mixins: [ResizeMixin],
29 29
   computed: {
30 30
     sidebar() {
31
-      return this.$store.state.app.sidebar
31
+      return this.$store.state.app.sidebar;
32 32
     },
33 33
     device() {
34
-      return this.$store.state.app.device
34
+      return this.$store.state.app.device;
35 35
     },
36 36
     classObj() {
37 37
       return {
38 38
         hideSidebar: !this.sidebar.opened,
39 39
         openSidebar: this.sidebar.opened,
40 40
         withoutAnimation: this.sidebar.withoutAnimation,
41
-        mobile: this.device === 'mobile'
42
-      }
41
+        mobile: this.device === "mobile"
42
+      };
43 43
     }
44 44
   },
45 45
   methods: {
46 46
     handleClickOutside() {
47
-      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
47
+      this.$store.dispatch("closeSideBar", { withoutAnimation: false });
48 48
     }
49 49
   }
50
-}
50
+};
51 51
 </script>
52 52
 
53 53
 <style rel="stylesheet/scss" lang="scss" scoped>
54
-  @import "src/styles/mixin.scss";
55
-  .app-wrapper {
56
-    @include clearfix;
57
-    // position: relative;
58
-    height: 100%;
59
-    width: 100%;
60
-    // &.mobile.openSidebar{
61
-    //   position: fixed;
62
-    //   top: 0;
63
-    // }
64
-  }
65
-  .drawer-bg {
66
-    background: #000;
67
-    opacity: 0.3;
68
-    width: 100%;
69
-    top: 0;
70
-    height: 100%;
71
-    position: absolute;
72
-    z-index: 999;
73
-  }
54
+@import "src/styles/mixin.scss";
55
+.app-wrapper {
56
+  @include clearfix;
57
+  // position: relative;
58
+  height: 100%;
59
+  width: 100%;
60
+  // &.mobile.openSidebar{
61
+  //   position: fixed;
62
+  //   top: 0;
63
+  // }
64
+}
65
+.drawer-bg {
66
+  background: #000;
67
+  opacity: 0.3;
68
+  width: 100%;
69
+  top: 0;
70
+  height: 100%;
71
+  position: absolute;
72
+  z-index: 999;
73
+}
74 74
 </style>

+ 272 - 93
src/xt_pages/role/components/EditRole.vue Просмотреть файл

@@ -1,113 +1,292 @@
1 1
 <template>
2
-    <el-dialog title='新增角色' width="600px" :visible.sync="visible" :before-close="_close">
3
-        <el-form :model="form" :rules="rules" ref="form" label-width="90px">
2
+  <el-dialog title="新增用户" width="660px" :visible.sync="visible" :before-close="_close">
3
+    <!-- <el-form :model="form" :rules="rules" ref="form" label-width="90px">
4 4
             <el-form-item label="角色名称 : " prop="name">
5 5
                 <el-input v-model="form.name" placeholder="" maxlength="30" ></el-input>
6 6
             </el-form-item>
7 7
             <el-form-item label="角色描述 : " prop="intro">
8 8
                 <el-input type="textarea" v-model="form.intro" placeholder="" resize="none" rows="4" ></el-input>
9 9
             </el-form-item>
10
-        </el-form>
11
-        <div slot="footer" class="dialog-footer">
12
-            <el-button @click="hide">取 消</el-button>
13
-            <el-button type="primary" @click="submitAction()">保 存</el-button>
10
+    </el-form>-->
11
+    <div class="chooseuser">
12
+      <span style="color:#303133">选择用户:</span>
13
+      <el-radio v-model="checked" label="1">从已有员工中选择</el-radio>
14
+      <el-radio v-model="checked" label="2">新增员工</el-radio>
15
+    </div>
16
+    <div v-if="checked == '1'" class="roleContent">
17
+      <div class="roleContentLeft">
18
+        <p style="color:#303133">选择:</p>
19
+        <div class="chooseBox">
20
+          <div>
21
+            <el-checkbox
22
+              :indeterminate="isIndeterminate"
23
+              v-model="checkAll"
24
+              @change="handleCheckAllChange"
25
+            >全选</el-checkbox>
26
+          </div>
27
+          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
28
+            <!-- <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> -->
29
+            <div class="checkone" v-for="city in cities" :key="city">
30
+              <el-checkbox :label="city">
31
+                <img src="https://kuyi.shengws.com/S1.png" alt />
32
+                <span>名字</span>
33
+              </el-checkbox>
34
+            </div>
35
+          </el-checkbox-group>
14 36
         </div>
15
-    </el-dialog>
37
+      </div>
38
+      <div class="roleContentRight">
39
+        <p style="color:#303133">已选:</p>
40
+        <div class="chooseBox">
41
+          <div class="hasChoosedOne">
42
+            <img src="https://kuyi.shengws.com/S1.png" alt />
43
+            <span>名字</span>
44
+          </div>
45
+        </div>
46
+      </div>
47
+    </div>
48
+    <div v-if="checked == '2'" class="newStaff">
49
+      <el-form
50
+        :model="ruleForm"
51
+        :rules="newrules"
52
+        label-position="right"
53
+        label-width="80px"
54
+        style="width:40%"
55
+      >
56
+        <el-form-item label="姓名" prop="name">
57
+          <el-input v-model="ruleForm.name"></el-input>
58
+        </el-form-item>
59
+        <el-form-item label="手机号" prop="phone">
60
+          <el-input v-model="ruleForm.phone"></el-input>
61
+        </el-form-item>
62
+        <el-form-item label="职位">
63
+          <el-input></el-input>
64
+        </el-form-item>
65
+      </el-form>
66
+      <div class="newItem">
67
+        <p style="width:80px;text-align:right;padding-right:8px">
68
+          <i class="el-icon-circle-plus" style="font-size:20px;color:#338AFB"></i>
69
+        </p>
70
+        <p style="color:#409FFF">继续新增员工</p>
71
+      </div>
72
+    </div>
73
+    <div slot="footer" class="dialog-footer">
74
+      <el-button @click="hide">取 消</el-button>
75
+      <el-button type="primary" @click="submitAction()">保 存</el-button>
76
+    </div>
77
+  </el-dialog>
16 78
 </template>
17 79
 
18 80
 <script>
19
-import {addRole, modifyRole} from '@/api/role/role'
81
+import { addRole, modifyRole } from "@/api/role/role";
20 82
 
21 83
 export default {
22
-    name: 'EditRole',
23
-    data() {
24
-        return {
25
-            form: {
26
-                id: 0,
27
-                name: '',
28
-                intro: ''
29
-            },
30
-            'visible': false,
31
-            rules: {
32
-                name: [
33
-                    {required: true, message: '请输入角色名称', trigger: 'blur'},
34
-                    {max: 10, message: '10个字以内', trigger: 'blur'}
35
-                ],
36
-                intro: [
37
-                    {required: true, message: '请输入角色说明', trigger: 'blur'},
38
-                ]
39
-            }
40
-        }
84
+  name: "EditRole",
85
+  data() {
86
+    return {
87
+      form: {
88
+        id: 0,
89
+        name: "",
90
+        intro: ""
91
+      },
92
+      visible: false,
93
+      rules: {
94
+        name: [
95
+          { required: true, message: "请输入角色名称", trigger: "blur" },
96
+          { max: 10, message: "10个字以内", trigger: "blur" }
97
+        ],
98
+        intro: [{ required: true, message: "请输入角色说明", trigger: "blur" }]
99
+      },
100
+
101
+      //
102
+      checked: "1",
103
+      checkAll: false,
104
+      checkedCities: [],
105
+      cities: ["上海", "北京", "广州", "深圳"],
106
+      isIndeterminate: true,
107
+      ruleForm: {
108
+        name: "",
109
+        phone: "",
110
+        position: ""
111
+      },
112
+      newrules: {
113
+        name: [
114
+          { required: true, message: "请输入角色名称", trigger: "blur" },
115
+          { max: 10, message: "10个字以内", trigger: "blur" }
116
+        ],
117
+        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }]
118
+      }
119
+    };
120
+  },
121
+  methods: {
122
+    _close: function(done) {
123
+      this.clear();
124
+      done();
125
+    },
126
+    clear: function() {
127
+      this.form.id = 0;
128
+      this.form.name = "";
129
+      this.form.intro = "";
130
+    },
131
+    show() {
132
+      this.clear();
133
+      this.visible = true;
134
+    },
135
+    hide() {
136
+      this.clear();
137
+      this.visible = false;
41 138
     },
42
-    methods: {
43
-        _close: function(done) {
44
-            this.clear()
45
-            done()
46
-        },
47
-        clear: function() {
48
-            this.form.id = 0
49
-            this.form.name = ''
50
-            this.form.intro = ''
51
-        },
52
-        show() {
53
-            this.clear()
54
-            this.visible = true
55
-        },
56
-        hide() {
57
-            this.clear()
58
-            this.visible = false
59
-        },
60
-        modify(id, name, intro) {
61
-            this.form.id = id
62
-            this.form.name = name
63
-            this.form.intro = intro
64
-            this.visible = true
65
-        },
66
-        submitAction() {
67
-            this.$refs.form.validate((valid) => {
68
-                if (valid) { // 验证通过
69
-                    if (this.form.id === 0) { // 新增 role
70
-                        addRole(this.form.name, this.form.intro).then(rs => {
71
-                            var resp = rs.data
72
-                            if (resp.state === 1) {
73
-                                var new_id = resp.data.id
74
-                                var new_name = resp.data.name
75
-                                var new_intro = resp.data.intro
76
-                                var new_status = resp.data.status
77
-                                this.$emit('did-add-role', new_id, new_name, new_intro, new_status)
139
+    modify(id, name, intro) {
140
+      this.form.id = id;
141
+      this.form.name = name;
142
+      this.form.intro = intro;
143
+      this.visible = true;
144
+    },
145
+    submitAction() {
146
+      this.$refs.form.validate(valid => {
147
+        if (valid) {
148
+          // 验证通过
149
+          if (this.form.id === 0) {
150
+            // 新增 role
151
+            addRole(this.form.name, this.form.intro)
152
+              .then(rs => {
153
+                var resp = rs.data;
154
+                if (resp.state === 1) {
155
+                  var new_id = resp.data.id;
156
+                  var new_name = resp.data.name;
157
+                  var new_intro = resp.data.intro;
158
+                  var new_status = resp.data.status;
159
+                  this.$emit(
160
+                    "did-add-role",
161
+                    new_id,
162
+                    new_name,
163
+                    new_intro,
164
+                    new_status
165
+                  );
78 166
 
79
-                                this.hide()
80
-                                
81
-                            } else {
82
-                                this.$message.error(resp.msg)
83
-                            }
84
-                            
85
-                        }).catch(err => {
86
-                            this.$message.error(err)
87
-                        })
88
-                        
89
-                    } else { // 修改 role
90
-                        modifyRole(this.form.id, this.form.name, this.form.intro).then(rs => {
91
-                            var resp = rs.data
92
-                            if (resp.state === 1) {
93
-                                this.$emit('did-edit-role', this.form.id, this.form.name, this.form.intro)
94
-                                this.hide()
95
-                                
96
-                            } else {
97
-                                this.$message.error(resp.msg)
98
-                            }
99
-                            
100
-                        }).catch(err => {
101
-                            this.$message.error(err)
102
-                        })
103
-                    }
104
-                    
105
-                } else { // 验证失败
106
-                    return false
167
+                  this.hide();
168
+                } else {
169
+                  this.$message.error(resp.msg);
170
+                }
171
+              })
172
+              .catch(err => {
173
+                this.$message.error(err);
174
+              });
175
+          } else {
176
+            // 修改 role
177
+            modifyRole(this.form.id, this.form.name, this.form.intro)
178
+              .then(rs => {
179
+                var resp = rs.data;
180
+                if (resp.state === 1) {
181
+                  this.$emit(
182
+                    "did-edit-role",
183
+                    this.form.id,
184
+                    this.form.name,
185
+                    this.form.intro
186
+                  );
187
+                  this.hide();
188
+                } else {
189
+                  this.$message.error(resp.msg);
107 190
                 }
108
-            })
191
+              })
192
+              .catch(err => {
193
+                this.$message.error(err);
194
+              });
195
+          }
196
+        } else {
197
+          // 验证失败
198
+          return false;
109 199
         }
200
+      });
201
+    },
202
+    handleCheckAllChange(val) {
203
+      this.checkedCities = val ? this.cities : [];
204
+      this.isIndeterminate = false;
205
+    },
206
+    handleCheckedCitiesChange(value) {
207
+      let checkedCount = value.length;
208
+      this.checkAll = checkedCount === this.cities.length;
209
+      this.isIndeterminate =
210
+        checkedCount > 0 && checkedCount < this.cities.length;
110 211
     }
111
-}
212
+  }
213
+};
112 214
 </script>
113 215
 
216
+
217
+
218
+<style lang="scss" scoped>
219
+.roleContent {
220
+  margin-top: 20px;
221
+  display: flex;
222
+  justify-content: space-between;
223
+  .roleContentLeft {
224
+    .chooseBox {
225
+      width: 280px;
226
+      height: 320px;
227
+      overflow-y: auto;
228
+      border: 1px solid rgba(235, 238, 240, 1);
229
+      margin-top: 26px;
230
+      padding: 20px;
231
+      .checkone {
232
+        display: flex;
233
+        align-items: center;
234
+        height: 50px;
235
+      }
236
+      .el-checkbox__label {
237
+        display: flex;
238
+        align-items: center;
239
+        img {
240
+          width: 30px;
241
+          height: 30px;
242
+          margin-right: 10px;
243
+        }
244
+      }
245
+    }
246
+  }
247
+  .roleContentRight {
248
+    .chooseBox {
249
+      width: 280px;
250
+      height: 320px;
251
+      overflow-y: auto;
252
+      border: 1px solid rgba(235, 238, 240, 1);
253
+      margin-top: 26px;
254
+      padding: 20px;
255
+      .hasChoosedOne {
256
+        display: flex;
257
+        align-items: center;
258
+        height: 50px;
259
+        img {
260
+          width: 30px;
261
+          height: 30px;
262
+          margin-right: 10px;
263
+        }
264
+      }
265
+    }
266
+  }
267
+}
268
+.newStaff {
269
+  margin-top: 26px;
270
+  .newItem {
271
+    display: flex;
272
+    align-items: center;
273
+  }
274
+}
275
+</style>
276
+
277
+<style lang="scss">
278
+.roleContent {
279
+  .roleContentLeft {
280
+    .chooseBox {
281
+      .el-checkbox {
282
+        display: flex;
283
+        align-items: center;
284
+      }
285
+      .el-checkbox__label {
286
+        display: flex;
287
+        align-items: center;
288
+      }
289
+    }
290
+  }
291
+}
292
+</style>

+ 151 - 0
src/xt_pages/role/components/PermissionSettings.vue Просмотреть файл

@@ -0,0 +1,151 @@
1
+<template>
2
+  <el-dialog class="settingDialog" title="角色权限配置" width="750px" :visible.sync="visible">
3
+    <div class="roleSettings">
4
+      <div class="roleName">
5
+        <div class="roleNameLeft">
6
+          <p>角色名称</p>
7
+          <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
8
+        </div>
9
+        <p style="color:#338AFB">删除该角色</p>
10
+      </div>
11
+      <div class="roleMain">
12
+        <div class="roleMainLeft">
13
+          <p class="roletitle">选择权限</p>
14
+          <div class="roleMainLeftBox">
15
+            <el-tree
16
+              :props="defaultProps"
17
+              :data="data"
18
+              :default-checked-keys="data"
19
+              node-key="id"
20
+              ref="tree"
21
+              default-expand-all
22
+              show-checkbox
23
+            >
24
+              <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
25
+                                <span>{{ data.name }}</span>
26
+              </span>-->
27
+            </el-tree>
28
+          </div>
29
+        </div>
30
+        <div class="roleMainRight">
31
+          <div class="hasChoose">已选择权限</div>
32
+          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
33
+        </div>
34
+      </div>
35
+    </div>
36
+  </el-dialog>
37
+</template>
38
+
39
+
40
+<script>
41
+export default {
42
+  data() {
43
+    return {
44
+      visible: false,
45
+      data: [
46
+        {
47
+          id: 1,
48
+          label: "一级 2",
49
+          children: [
50
+            {
51
+              id: 3,
52
+              label: "二级 2-1",
53
+              children: [
54
+                {
55
+                  id: 4,
56
+                  label: "三级 3-1-1"
57
+                },
58
+                {
59
+                  id: 5,
60
+                  label: "三级 3-1-2"
61
+                }
62
+              ]
63
+            },
64
+            {
65
+              id: 2,
66
+              label: "二级 2-2",
67
+              children: [
68
+                {
69
+                  id: 6,
70
+                  label: "三级 3-2-1"
71
+                },
72
+                {
73
+                  id: 7,
74
+                  label: "三级 3-2-2"
75
+                }
76
+              ]
77
+            }
78
+          ]
79
+        }
80
+      ],
81
+      defaultProps: {
82
+        children: "children",
83
+        label: "label"
84
+      }
85
+    };
86
+  },
87
+  methods: {
88
+    show() {
89
+      this.visible = true;
90
+    }
91
+  }
92
+};
93
+</script>
94
+
95
+<style lang="scss" scoped>
96
+.roleSettings {
97
+  .roleName {
98
+    display: flex;
99
+    align-items: center;
100
+    justify-content: space-between;
101
+  }
102
+  .roleNameLeft {
103
+    display: flex;
104
+    align-items: center;
105
+    p {
106
+      width: 100px;
107
+    }
108
+  }
109
+  .roleMain {
110
+    display: flex;
111
+    justify-content: space-between;
112
+    margin-top: 18px;
113
+    .roleMainLeft {
114
+      display: flex;
115
+      .roletitle {
116
+        width: 74px;
117
+      }
118
+      .roleMainLeftBox {
119
+        width: 300px;
120
+        height: 706px;
121
+        overflow-y: auto;
122
+        border: 1px solid rgba(234, 238, 240, 1);
123
+        border-radius: 4px;
124
+        padding: 20px 0 0 10px;
125
+      }
126
+    }
127
+    .roleMainRight {
128
+      width: 280px;
129
+      height: 706px;
130
+      overflow-y: auto;
131
+      border: 1px solid rgba(235, 238, 240, 1);
132
+      color: #303133;
133
+      .hasChoose {
134
+        height: 42px;
135
+        line-height: 42px;
136
+        padding-left: 20px;
137
+        background: #f6f8f9;
138
+      }
139
+    }
140
+  }
141
+}
142
+</style>
143
+
144
+
145
+<style lang="scss">
146
+.settingDialog {
147
+  .el-dialog__body {
148
+    max-height: 600px !important;
149
+  }
150
+}
151
+</style>

+ 211 - 58
src/xt_pages/role/role.vue Просмотреть файл

@@ -8,11 +8,10 @@
8 8
         icon="el-icon-circle-plus"
9 9
         style="float:right;"
10 10
         @click="addRoleAction"
11
-        >新增</el-button
12
-      >
11
+      >新增</el-button>
13 12
     </div>
14 13
     <div class="app-container">
15
-      <el-table
14
+      <!-- <el-table
16 15
         :data="roles"
17 16
         v-loading="loading_roles"
18 17
         border
@@ -22,24 +21,11 @@
22 21
           color: '#606266'
23 22
         }"
24 23
       >
25
-        <el-table-column
26
-          label="角色名称"
27
-          prop="name"
28
-          min-width="20%"
29
-          align="center"
30
-        ></el-table-column>
31
-        <el-table-column
32
-          label="角色描述"
33
-          prop="intro"
34
-          min-width="25%"
35
-          align="center"
36
-        ></el-table-column>
24
+        <el-table-column label="角色名称" prop="name" min-width="20%" align="center"></el-table-column>
25
+        <el-table-column label="角色描述" prop="intro" min-width="25%" align="center"></el-table-column>
37 26
         <el-table-column label="状态" min-width="15%" align="center">
38 27
           <template slot-scope="scope">
39
-            <div
40
-              v-if="scope.row.status == 1"
41
-              style="color: #67C23A; font-size:20px;"
42
-            >
28
+            <div v-if="scope.row.status == 1" style="color: #67C23A; font-size:20px;">
43 29
               <li class="el-icon-success"></li>
44 30
             </div>
45 31
             <div v-else style="color: #F56C6C; font-size:20px;">
@@ -49,28 +35,12 @@
49 35
         </el-table-column>
50 36
         <el-table-column label="操作" width="180" align="center">
51 37
           <template slot-scope="scope">
52
-            <router-link
53
-              :to="{ path: '/role/perview', query: { id: scope.row.id } }"
54
-            >
55
-              <el-tooltip
56
-                class="item"
57
-                effect="dark"
58
-                content="权限设置"
59
-                placement="top"
60
-              >
61
-                <el-button
62
-                  type="warning"
63
-                  icon="el-icon-setting"
64
-                  size="small"
65
-                ></el-button>
38
+            <router-link :to="{ path: '/role/perview', query: { id: scope.row.id } }">
39
+              <el-tooltip class="item" effect="dark" content="权限设置" placement="top">
40
+                <el-button type="warning" icon="el-icon-setting" size="small"></el-button>
66 41
               </el-tooltip>
67 42
             </router-link>
68
-            <el-tooltip
69
-              class="item"
70
-              effect="dark"
71
-              content="编辑"
72
-              placement="top"
73
-            >
43
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
74 44
               <el-button
75 45
                 type="primary"
76 46
                 size="small"
@@ -79,12 +49,7 @@
79 49
               ></el-button>
80 50
             </el-tooltip>
81 51
 
82
-            <el-tooltip
83
-              class="item"
84
-              effect="dark"
85
-              content="移除"
86
-              placement="top"
87
-            >
52
+            <el-tooltip class="item" effect="dark" content="移除" placement="top">
88 53
               <el-button
89 54
                 type="danger"
90 55
                 size="small"
@@ -94,12 +59,7 @@
94 59
               ></el-button>
95 60
             </el-tooltip>
96 61
 
97
-            <el-tooltip
98
-              class="item"
99
-              effect="dark"
100
-              content="恢复"
101
-              placement="top"
102
-            >
62
+            <el-tooltip class="item" effect="dark" content="恢复" placement="top">
103 63
               <el-button
104 64
                 type="info"
105 65
                 size="small"
@@ -122,26 +82,160 @@
122 82
             layout="total, prev, pager, next, jumper"
123 83
           ></el-pagination>
124 84
         </el-col>
125
-      </el-row>
85
+      </el-row>-->
126 86
 
127
-      <edit-role
128
-        ref="edit_role"
129
-        @did-add-role="didAddRole"
130
-        @did-edit-role="didModifyRole"
131
-      ></edit-role>
87
+      <edit-role ref="edit_role" @did-add-role="didAddRole" @did-edit-role="didModifyRole"></edit-role>
88
+      <permission-settings ref="permission_settings"></permission-settings>
89
+      <div class="roleBox">
90
+        <div class="roleOne">
91
+          <div class="setting">
92
+            <i class="el-icon-setting"></i>
93
+            <span style="margin-right:20px" @click="onClick">权限配置</span>
94
+          </div>
95
+          <div class="avatar">
96
+            <img src="../../assets/img/pc1.png" alt />
97
+            <p class="avatarname">子管理员</p>
98
+          </div>
99
+          <div class="roleTip">子管理员角色具备平台全部功能的使用权限,请谨慎配置...</div>
100
+          <div class="roleTxt">
101
+            该角色目前已配置
102
+            <span style="color:#4A8AF3">0</span> 个员工
103
+          </div>
104
+          <div class="btnBox">
105
+            <el-button>新增用户</el-button>
106
+            <el-button>用户管理</el-button>
107
+          </div>
108
+        </div>
109
+        <div class="roleOne">
110
+          <div class="setting">
111
+            <i class="el-icon-setting"></i>
112
+            <span style="margin-right:20px">权限配置</span>
113
+          </div>
114
+          <div class="avatar">
115
+            <img src="../../assets/img/pc2.png" alt />
116
+            <p class="avatarname">医生</p>
117
+          </div>
118
+          <div class="roleTip">医生角色能够进行建立患者档案,制定和调整患者透析治疗方案,定期评价病人的透析质量等...</div>
119
+          <div class="roleTxt">
120
+            该角色目前已配置
121
+            <span style="color:#4A8AF3">0</span> 个员工
122
+          </div>
123
+          <div class="btnBox">
124
+            <el-button>新增用户</el-button>
125
+            <el-button>用户管理</el-button>
126
+          </div>
127
+        </div>
128
+        <div class="roleOne">
129
+          <div class="setting">
130
+            <i class="el-icon-setting"></i>
131
+            <span style="margin-right:20px">权限配置</span>
132
+          </div>
133
+          <div class="avatar">
134
+            <img src="../../assets/img/pc3.png" alt />
135
+            <p class="avatarname">护士</p>
136
+          </div>
137
+          <div class="roleTip">护士角色能够进行病人透析管理,以及医院的感染控制与消毒记录等...</div>
138
+          <div class="roleTxt">
139
+            该角色目前已配置
140
+            <span style="color:#4A8AF3">0</span> 个员工
141
+          </div>
142
+          <div class="btnBox">
143
+            <el-button>新增用户</el-button>
144
+            <el-button>用户管理</el-button>
145
+          </div>
146
+        </div>
147
+        <div class="roleOne">
148
+          <div class="setting">
149
+            <i class="el-icon-setting"></i>
150
+            <span style="margin-right:20px">权限配置</span>
151
+          </div>
152
+          <div class="avatar">
153
+            <img src="../../assets/img/pc2.png" alt />
154
+            <p class="avatarname">技师</p>
155
+          </div>
156
+          <div class="roleTip">技师角色能够进行设备的管理,日常维护维修记录等...</div>
157
+          <div class="roleTxt">
158
+            该角色目前已配置
159
+            <span style="color:#4A8AF3">0</span> 个员工
160
+          </div>
161
+          <div class="btnBox">
162
+            <el-button>新增用户</el-button>
163
+            <el-button>用户管理</el-button>
164
+          </div>
165
+        </div>
166
+        <div class="roleOne">
167
+          <div class="setting">
168
+            <i class="el-icon-setting"></i>
169
+            <span style="margin-right:20px">权限配置</span>
170
+          </div>
171
+          <div class="avatar">
172
+            <img src="../../assets/img/pc2.png" alt />
173
+            <p class="avatarname">运营</p>
174
+          </div>
175
+          <div class="roleTip">运营角色能够在SCRM中管理微网站、使用营销工具、做会员管理和分销商品经营的操作...</div>
176
+          <div class="roleTxt">
177
+            该角色目前已配置
178
+            <span style="color:#4A8AF3">0</span> 个员工
179
+          </div>
180
+          <div class="btnBox">
181
+            <el-button>新增用户</el-button>
182
+            <el-button>用户管理</el-button>
183
+          </div>
184
+        </div>
185
+        <div class="roleOne">
186
+          <div class="setting">
187
+            <i class="el-icon-setting"></i>
188
+            <span style="margin-right:20px">权限配置</span>
189
+          </div>
190
+          <div class="avatar">
191
+            <img src="../../assets/img/pc4.png" alt />
192
+            <p class="avatarname">库存</p>
193
+          </div>
194
+          <div class="roleTip">库存角色负责透析耗材的日常管理,对耗材的入库、出库、退库的登记操作...</div>
195
+          <div class="roleTxt">
196
+            该角色目前已配置
197
+            <span style="color:#4A8AF3">0</span> 个员工
198
+          </div>
199
+          <div class="btnBox">
200
+            <el-button>新增用户</el-button>
201
+            <el-button>用户管理</el-button>
202
+          </div>
203
+        </div>
204
+        <div class="roleOne">
205
+          <div class="setting">
206
+            <i class="el-icon-setting"></i>
207
+            <span style="margin-right:20px">权限配置</span>
208
+          </div>
209
+          <div class="avatar">
210
+            <img src="../../assets/img/pc5.png" alt />
211
+            <p class="avatarname">院长</p>
212
+          </div>
213
+          <div class="roleTip">院长角色了解血透患者血液透析质量和相关的大数据,以及掌握透析中心整体运营情况</div>
214
+          <div class="roleTxt">
215
+            该角色目前已配置
216
+            <span style="color:#4A8AF3">0</span> 个员工
217
+          </div>
218
+          <div class="btnBox">
219
+            <el-button>新增用户</el-button>
220
+            <el-button>用户管理</el-button>
221
+          </div>
222
+        </div>
223
+      </div>
132 224
     </div>
133 225
   </div>
134 226
 </template>
135 227
 
136 228
 <script>
137 229
 import EditRole from "./components/EditRole.vue";
230
+import PermissionSettings from "./components/PermissionSettings.vue";
138 231
 import { getRoles, setRoleStatus } from "@/api/role/role";
139 232
 import BreadCrumb from "@/xt_pages/components/bread-crumb";
140 233
 
141 234
 export default {
142 235
   components: {
143 236
     EditRole,
144
-    BreadCrumb
237
+    BreadCrumb,
238
+    PermissionSettings
145 239
   },
146 240
   data: function() {
147 241
     return {
@@ -259,6 +353,11 @@ export default {
259 353
     },
260 354
     pageChange: function(nextPage) {
261 355
       this.requestRoleWithPage(nextPage);
356
+    },
357
+    ///
358
+
359
+    onClick() {
360
+      this.$refs.permission_settings.show();
262 361
     }
263 362
   }
264 363
 };
@@ -267,6 +366,60 @@ export default {
267 366
 .el-button + .el-button {
268 367
   margin-left: 0 !important;
269 368
 }
369
+.roleBox {
370
+  display: flex;
371
+  flex-wrap: wrap;
372
+  .roleOne {
373
+    width: 280px;
374
+    height: 350px;
375
+    margin: 0 15px 20px;
376
+    border: 1px solid rgba(235, 238, 240, 1);
377
+    border-radius: 4px;
378
+    overflow: hidden;
379
+  }
380
+  .setting {
381
+    // float: right;
382
+    text-align: right;
383
+    margin-right: 20px;
384
+    margin-top: 20px;
385
+    width: 100%;
386
+    color: #313234;
387
+  }
388
+  .avatar {
389
+    width: 100%;
390
+    display: flex;
391
+    justify-content: space-around;
392
+    flex-direction: column;
393
+    align-items: center;
394
+    img {
395
+      width: 60px;
396
+      height: 60px;
397
+      margin: 10px 0;
398
+    }
399
+    .avatarname {
400
+      font-size: 18px;
401
+    }
402
+  }
403
+  .roleTip {
404
+    width: 82%;
405
+    margin: 20px auto 10px;
406
+    font-size: 14px;
407
+    color: #989898;
408
+  }
409
+  .roleTxt {
410
+    width: 82%;
411
+    margin: 0 auto;
412
+    font-size: 14px;
413
+    color: #666666;
414
+  }
415
+  .btnBox {
416
+    width: 82%;
417
+    margin: 0 auto;
418
+    display: flex;
419
+    justify-content: space-between;
420
+    margin-top: 50px;
421
+  }
422
+}
270 423
 </style>
271 424
 <style>
272 425
 .el-table td,