新增用户角色展示修改

src/layouts/footer/index.vue

@@ -55,7 +55,7 @@ export default {
                 color:#757F8A;
                 font-size: 12px;
                 &:hover{
-                    opacity: .8;
+                    color: #c7c7c7;
                 }
             }
         }

src/pages/user/list/index.vue

@@ -81,7 +81,7 @@
                     <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="handleCurrentChange" :total="total"></el-pagination>
                 </div>
 
-                <el-dialog :title="isDetail ? '查看账号' : (form.userId ? '编辑账号' : '新增账号')" :visible.sync="userVisible" width="500px" @close="closeUser" class="dialog" :close-on-click-modal="false">
+                <el-dialog :title="isDetail ? '查看账号' : (form.userId ? '编辑账号' : '新增账号')" :visible.sync="userVisible" width="576px" @close="closeUser" class="dialog" :close-on-click-modal="false">
                     <el-form ref="form" :model="form" :rules="rules" label-width="110px" label-suffix="：" :disabled="isDetail">
                         <el-form-item prop="account" label="账号">
                             <el-input v-model="form.account" ref="account" placeholder="请输入账号" @change="accountChange"></el-input>
@@ -90,11 +90,13 @@
                             <el-input v-model="form.userName" placeholder="请输入姓名"></el-input>
                         </el-form-item>
                         <el-form-item prop="roleIds" label="账号角色">
-                            <el-checkbox-group v-model="form.roleIds">
-                                <template v-for="(item,index) in roleList">
-                                    <el-checkbox v-if="item.roleName != '超级管理员'" :key="index" :label="item.id">{{item.roleName}}</el-checkbox>
-                                </template>
-                            </el-checkbox-group>
+                            <div class="role-wrap">
+                                <el-checkbox-group v-model="form.roleIds">
+                                    <template v-for="(item,index) in roleList">
+                                        <el-checkbox v-if="item.roleName != '超级管理员'" :key="index" :label="item.id">{{item.roleName}}</el-checkbox>
+                                    </template>
+                                </el-checkbox-group>
+                            </div>
                         </el-form-item>
                         <el-form-item prop="uniqueIdentification" label="唯一标识">
                             <el-input disabled v-model="form.uniqueIdentification" placeholder="唯一标识"></el-input>
@@ -316,8 +318,6 @@ export default {
             this.$get(`${this.api.listRole}?page=1&size=1000&name=&platformId=${Setting.platformId}`).then(res => {
                 const list = res.rolePage.records
                 this.roleList = list
-                const user = list.find(e => e.roleName === '用户')
-                if (user) this.form.roleIds.push(user.id)
             }).catch(res => {})
         },
         resetPassword(row){
@@ -604,5 +604,23 @@ export default {
         .el-input,.el-select{
             width: 100%;
         }
+        .role-wrap {
+            max-height: 130px;
+            padding: 10px 12px 0;
+            background-color: #F5F6FA;
+            border-radius: 4px;
+            overflow: auto;
+        }
+        .el-checkbox {
+            display: inline-flex;
+            width: 33.33%;
+            margin-right: 0;
+        }
+        .el-checkbox__label {
+            max-width: 108px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
 </style>