角色管理 查询与认定 表格宽度自增

src/views/SystemManage/RoleManage.vue

@@ -27,9 +27,9 @@
           <div
             class="default-role-item"
             v-for="(item, index) in defaultRoleBtns"
-            :key="index"
-            :class="{ active: item.flag }"
-            @click="chooseDefaultRoleItem(index)"
+            :key="item.id"
+            :class="{ active: item.id === defaultRoleItemIndex }"
+            @click="chooseDefaultRoleItem(item)"
           >
             {{ item.name }}
           </div>
@@ -38,12 +38,19 @@
           <div
             class="diy-role-item"
             v-for="(item, index) in diyRoleList"
-            :key="index"
-            :class="{ active: item.flag === true }"
-            @click="chooseDiyRoleItem(index)"
+            :key="item.id"
+            :class="{ active: item.id === diyRoleItemIndex }"
+            @click="chooseDiyRoleItem(item.id)"
           >
+            <div v-show="item.id !== diyRoleItemIndex" class="diy-edit-title">
               {{ item.name }}
-            <!--            <div class="diy-edit-title">{{ item.name }}</div>-->
+            </div>
+            <el-input
+              v-show="item.id === diyRoleItemIndex"
+              size="mini"
+              class="diy-edit-title"
+              v-model="item.name"
+            ></el-input>
             <div class="diy-edit-btn">
               <img class="img" :src="editurl" @click="editDiyRoleItem(index)" />
             </div>
@@ -213,16 +220,10 @@ export default {
       editurl: require("@/assets/img/edit.png"),
       funFlag: false,
       dataFlag: false,
+      roles: [],
+      addRoleParams: [],
       // 角色按钮
-      defaultRoleBtns: [
-        { name: "指纹入库员", value: 1, flag: false },
-        { name: "综合认定员", value: 2, flag: false },
-        { name: "高级认定员", value: 3, flag: false },
-        { name: "质量检查员", value: 4, flag: false },
-        { name: "高级质量检查", value: 5, flag: false },
-        { name: "一般管理员", value: 6, flag: false },
-        { name: "超级管理员", value: 7, flag: false }
-      ],
+      defaultRoleBtns: [],
       // 角色权限菜单
       roleMenus: [
         { name: "指掌纹采集", code: 0, flag: false },
@@ -330,14 +331,15 @@ export default {
       roleMenusSelection: [],
       // 自定义的角色组
       diyRoleList: [],
-      diyRoleItemIndex: -1
+      diyRoleItemIndex: -1,
+      defaultRoleItemIndex: -1
     };
   },
   methods: {
     addrole() {
       var role = {
-        name: "do aute officia irure voluptate",
-        permissionIds: []
+        name: "测试角色",
+        permissionIds: [11, 12]
       };
       this.$axios.post("/system/roles", role).then(res => {
         console.info(res);
@@ -354,14 +356,21 @@ export default {
     },
     // 列表
     search() {
-      var role = new URLSearchParams();
-      // role.append('userId', "可选");//根据用户id查询角色信息
-      // role.append('roleId', "可选");//根据角色id查询角色信息
-      // role.append('roleName', "可选");//根据角色名查询角色信息
-      // role.append('permissionName', "可选");//查询角色对应的权限
       this.$axios
-        .post("/login/role/queryRolelist", role)
-        .then(res => {})
+        .get("/system/roles")
+        .then(res => {
+          console.info(res);
+          this.roles = res.data;
+          res.data.forEach((item, index) => {
+            // item.flag = false;
+            console.info(item);
+            if (index < 7) {
+              this.defaultRoleBtns.push(item);
+            } else {
+              this.diyRoleList.push(item);
+            }
+          });
+        })
         .catch(failResponse => {});
     },
     // 删除
@@ -369,61 +378,27 @@ export default {
       console.info("删除数据", id);
       this.diyRoleList.splice(id, 1);
       this.diyRoleItemIndex = -1;
-      // var sysRole = new URLSearchParams();
-      // sysRole.append("roleId", "16");
-      // this.$axios
-      //   .post("/login/role/deleteRoleById", sysRole)
-      //   .then(res => {})
-      //   .catch(failResponse => {});
     },
     // 新增
     add() {
       var roleitem = {
         name: "自定义" + (this.diyRoleList.length + 1),
         flag: false,
-        code: this.diyRoleList.length
+        code: this.diyRoleList.length,
+        edit: false
       };
       this.diyRoleList.push(roleitem);
       console.info("新增数据");
-      // var role = new URLSearchParams();
-      // role.append("roleName", "角色名");
-      // role.append("description", "角色描述");
-      // sffb; //(是否发布:0:未发布,1:已发布),
-      // pid; // (父级角色的id),
-      // isparent; //(是否是父级：0：父级，1：子级),
-      // type角色类型;
-      // this.$axios
-      //   .post("/login/role/add", role)
-      //   .then(res => {
-      //     console.log(res);
-      //     this.$message.success(res.message);
-      //   })
-      //   .catch(failResponse => {});
     },
     // 编辑
     edit() {
       console.info("编辑数据");
-      var role = new URLSearchParams();
-      // 1、进入角色修改界面
-      role.append("roleId", "15");
-      this.$axios
-        .post("/login/role/queryrolesInfo", role)
-        .then(res => {})
-        .catch(failResponse => {});
-
-      var role1 = new URLSearchParams();
-      role1.append("roleId", "15");
-      role1.append("roleName", "修改角色名");
-      role1.append("description", "修改角色描述");
-      this.$axios
-        .post("/login/role/update", role1)
-        .then(res => {})
-        .catch(failResponse => {});
     },
     // 选中默认权限
-    chooseDefaultRoleItem(index) {
+    chooseDefaultRoleItem(item) {
+      this.defaultRoleItemIndex = item.id;
       this.defaultRoleBtns.forEach((roleitem, idx) => {
-        if (idx === index) {
+        if (idx === item.id) {
           roleitem.flag = true;
         } else {
           roleitem.flag = false;
@@ -444,6 +419,7 @@ export default {
     },
     // 编辑
     editDiyRoleItem(id) {
+      this.diyRoleList[id].edit = true;
       console.info("编辑方法");
     },
     funAuth() {
@@ -457,6 +433,9 @@ export default {
       console.info("数据权限");
     }
   },
+  created() {
+    this.search();
+  },
   mounted() {
     this.defaultRoleBtns[0].flag = true;
     this.funFlag = true;

src/views/SystemManage/scss/role.scss

@@ -101,7 +101,7 @@
           color: #055FE7;
         }
         .diy-edit-title{
-          //border: saddlebrown 1px solid;
+          width: 146px;
           height: 19px;
           font-size: 14px;
           color: #333333;
@@ -114,7 +114,7 @@
           box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3);
           border-bottom-left-radius:250px;
           position: relative;
-          right: -55px;
+          right: 0;
           top: -3px;
           .img{
             width: 13px;

src/views/cxyrd/QueryConfirm.vue

 <template>
-  <div class="confirm_base" id="confirm_base">
+  <el-container class="confirm-page" direction="vertical">
     <div class="confirm_header_search">
       <div class="display_style">
         <span><b>查询条件</b></span>
@@ -420,7 +420,7 @@
 
     <el-dialog :visible.sync="historyDialogVisible" style="z-index: 1500">
     </el-dialog>
-  </div>
+  </el-container>
 </template>
 
 <script>
@@ -1461,11 +1461,16 @@ b {
   background: #ddebff;
   border-radius: 4px;
 }
-.confirm_base {
-  height: 100%;
-  background-color: #ffffff;
+
+.confirm-page {
+  width: 100%;
   padding: 24px;
+  font-family: MicrosoftYaHei;
+  div {
+    display: inline-block;
+  }
 }
+
 .display_style {
   display: inline-block;
   margin: 5px 24px 5px 0;