修改职员

src/components/permissionlist/index.vue

@@ -4,6 +4,12 @@
     <div class="right">
       <div class="paren_header">
         <p>{{title}}</p>
+        <div v-if="RoleData.length" class="options">
+          <el-select size="medium" @change="upActive" v-model="value" placeholder="请选择">
+            <el-option v-for="item in dataLists" :key="item.AppId" :label="item.AppName" :value="item.AppId">
+            </el-option>
+          </el-select>
+        </div>
       </div>
       <div class="paren_type">
         <ul>
@@ -25,13 +31,13 @@
           </li>
         </ul>
       </div>
-      <div class="paren_list">
+      <!-- <div class="paren_list">
         <ul>
           <li v-for="(item,index) in dataLists" :key="index">
             <div class="up_type" :class="active === index ? 'up_types' : 'up_type'" @click="upActive(item,index)">{{item.AppName}}</div>
           </li>
         </ul>
-      </div>
+      </div> -->
       <template v-if="RoleData.length">
         <div :class="active ? 'bgActive':''" class="paren_content">
           <el-scrollbar style="height:100%">
@@ -104,7 +110,9 @@ export default {
         name: '权限名称'
       }],
       DataList: [],
-      form: {}
+      form: {},
+      value: '',
+      options: []
     }
   },
   components: {
@@ -134,14 +142,15 @@ export default {
         this.dataLists = newDatas
         const goodDatas = this.getData(newDatas[0].AppId)
         this.RoleData = goodDatas
+        this.value = newDatas[0].AppId
       } else {
         this.RoleData = []
         this.dataLists = []
       }
     },
-    upActive (item, index) {
-      this.active = index
-      this.RoleData = this.getData(item.AppId)
+    upActive (val) {
+      console.log(val)
+      this.RoleData = this.getData(val)
     },
     getData (id) {
       const datas = []

src/components/permissionlist/permissionlist.scss

@@ -7,12 +7,13 @@
     background: #ffffff;
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
     border-radius: 16px;
-    padding: 0 32px 0 32px;
+    padding: 15px 32px 0 32px;
     > .paren_header {
       width: 100%;
       height: 57px;
+      line-height: 57px;
       display: flex;
-      align-items: flex-end;
+      justify-content: space-between;
       > p {
         font-size: 24px;
         font-family: Microsoft YaHei;
@@ -22,6 +23,13 @@
         margin-bottom: 0;
       }
     }
+    .options {
+      max-width: 150px;
+      .el-input__inner {
+        background: #f5f7fa;
+        border-radius: 6px;
+      }
+    }
     > .paren_type {
       width: 100%;
       height: 60px;
@@ -240,7 +248,8 @@
 .hucPower {
   .right {
     .paren_content {
-      height: 35%;
+      height: calc(65% - 20px);
+      margin-top: 20px;
     }
   }
 }