浏览代码

修改权限样式

zhaoke 2 年之前
父节点
当前提交
b609101268
共有 2 个文件被更改,包括 93 次插入244 次删除
  1. 3 3
      src/layout/components/Search/index.vue
  2. 90 241
      src/views/authorityManagement/components/authorityHome.vue

+ 3 - 3
src/layout/components/Search/index.vue

@@ -105,7 +105,7 @@ export default {
     clearSearch () {
       this.$emit("clearSearchData", this.input);
     },
-    setSearch(val) {
+    setSearch (val) {
       this.input = val
       this.$emit('getSearchData', this.input)
     }
@@ -186,8 +186,8 @@ export default {
       border: none;
       padding: 0;
       font-size: 14px;
-      height: 32px;
-      line-height: 32px;
+      height: 20px;
+      line-height: 20px;
     }
     .el-input__suffix {
       position: absolute;

+ 90 - 241
src/views/authorityManagement/components/authorityHome.vue

@@ -12,14 +12,11 @@
     <div class="authority-head flex">
       <div class="status flex-wrap">
         <div class="manageTitle">权限项管理</div>
-        <div class="status1"><span class="icon"></span>应用权限项</div>
-        <div class="status2"><span class="icon"></span>普通权限项</div>
+        <div class="status0"><span class="icon"></span>交互权限</div>
+        <div class="status1"><span class="icon"></span>API接口</div>
+        <div class="status2"><span class="icon"></span>数据读写</div>
       </div>
-      <Search
-        @getSearchData="getSearchData"
-        :isTitle="false"
-        @clearSearchData="clearSearchData"
-      />
+      <Search @getSearchData="getSearchData" :isTitle="false" @clearSearchData="clearSearchData" />
     </div>
     <!--权限树-->
     <!-- <div class="authority-content">
@@ -32,152 +29,68 @@
           <div class="grid-content">
             <div class="manageTitle">权限树</div>
             <div class="contentTree">
-              <el-tree
-                ref="tree"
-                :data="dataListTree"
-                :props="defaultProps"
-                node-key="AuthId"
-                :filter-node-method="filterNode"
-                highlight-current
-                :default-expanded-keys="[currentKey]"
-                @node-click="handleNodeClick"
-              >
+              <el-tree ref="tree" :data="dataListTree" :props="defaultProps" node-key="AuthId" :filter-node-method="filterNode" highlight-current :default-expanded-keys="[currentKey]" @node-click="handleNodeClick">
               </el-tree>
             </div>
           </div>
         </el-col>
         <el-col :span="18" class="bodyPart">
-          <div class="grid-contentTop">
+          <!-- <div class="grid-contentTop">
             <div class="manageTitle">当前</div>
             <div class="content">
               <template v-if="currDataArr.length">
                 <el-row>
-                  <el-col
-                    :span="6"
-                    v-for="(data, index) in currDataArr"
-                    :key="data.AuthId"
-                  >
+                  <el-col :span="6" v-for="(data, index) in currDataArr" :key="data.AuthId">
                     <div class="account-left-content-teams">
                       <div class="team">
-                        <div
-                          class="bg"
-                          :class="
+                        <div class="bg" :class="
                             data.Type == 1 || data.Type == 0
                               ? 'status1'
                               : 'status2'
-                          "
-                        ></div>
-                        <div
-                          class="list"
-                          :class="data.QueryTarget == 1 ? 'activeStatus' : ''"
-                        >
+                          "></div>
+                        <div class="list" :class="data.QueryTarget == 1 ? 'activeStatus' : ''">
                           <div class="flex info">
                             <div :title="data.AuthName" class="name">
                               {{ data.AuthName }}
                             </div>
                             <div class="icon">
-                              <el-tooltip
-                                effect="dark"
-                                content="新增应用"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type === 0"
-                                  title="新增应用"
-                                  @click="renderAdd()"
-                                  class="cap cap-plus"
-                                ></span>
+                              <el-tooltip effect="dark" content="新增应用" placement="bottom">
+                                <span v-if="data.Type === 0" title="新增应用" @click="renderAdd()" class="cap cap-plus"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                effect="dark"
-                                content="修改应用"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type === 1"
-                                  title="修改应用"
-                                  @click="renderEdit(data)"
-                                  class="cap cap-edit"
-                                ></span>
+                              <el-tooltip effect="dark" content="修改应用" placement="bottom">
+                                <span v-if="data.Type === 1" title="修改应用" @click="renderEdit(data)" class="cap cap-edit"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                v-is="['authtree_btn_add_auth']"
-                                effect="dark"
-                                content="新增权限项"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type === 2"
-                                  title="新增权限项"
-                                  @click="renderSub(data)"
-                                  class="cap cap-sub"
-                                ></span>
+                              <el-tooltip v-is="['authtree_btn_add_auth']" effect="dark" content="新增权限项" placement="bottom">
+                                <span v-if="data.Type === 2" title="新增权限项" @click="renderSub(data)" class="cap cap-sub"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                v-is="['authtree_btn_update_auth']"
-                                effect="dark"
-                                content="编辑权限项"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type > 2"
-                                  title="编辑权限项"
-                                  @click="renderEdit(data)"
-                                  class="cap cap-edit"
-                                ></span>
+                              <el-tooltip v-is="['authtree_btn_update_auth']" effect="dark" content="编辑权限项" placement="bottom">
+                                <span v-if="data.Type > 2" title="编辑权限项" @click="renderEdit(data)" class="cap cap-edit"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                v-is="['authtree_btn_add_auth']"
-                                effect="dark"
-                                content="新增权限项"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type > 2"
-                                  title="新增权限项"
-                                  @click="renderSub(data)"
-                                  class="cap cap-sub"
-                                ></span>
+                              <el-tooltip v-is="['authtree_btn_add_auth']" effect="dark" content="新增权限项" placement="bottom">
+                                <span v-if="data.Type > 2" title="新增权限项" @click="renderSub(data)" class="cap cap-sub"></span>
                               </el-tooltip>
                             </div>
                           </div>
                           <div v-if="data.Type > 0" class="flex details">
                             <div class="details-msg">
-                              状态:<span
-                                :class="data.Status === 1 ? 'success' : 'error'"
-                                >{{ data.Status === 1 ? "启用" : "禁用" }}</span
-                              >
+                              状态:<span :class="data.Status === 1 ? 'success' : 'error'">{{ data.Status === 1 ? "启用" : "禁用" }}</span>
                             </div>
-                            <div
-                              v-is="['authtree_btn_state_swatch']"
-                              class="details-info"
-                            >
-                              <el-switch
-                                v-model="data.flag"
-                                @change="renderChange(data, index)"
-                                active-color="#2D67E3"
-                              >
+                            <div v-is="['authtree_btn_state_swatch']" class="details-info">
+                              <el-switch v-model="data.flag" @change="renderChange(data, index)" active-color="#2D67E3">
                               </el-switch>
                             </div>
                           </div>
                         </div>
                       </div>
                       <div v-is="['authtree_btn_del_auth']">
-                        <div
-                          v-if="data.Type !== 0 && data.Type !== 2"
-                          @click.stop="onNodeClick(data)"
-                          class="info-close"
-                        >
-                          <i
-                            class="icon el-icon-close"
-                            :class="
+                        <div v-if="data.Type !== 0 && data.Type !== 2" @click.stop="onNodeClick(data)" class="info-close">
+                          <i class="icon el-icon-close" :class="
                               data.Type === 1
                                 ? 'close1'
                                 : data.Type > 2
                                 ? 'close2'
                                 : ''
-                            "
-                          ></i>
+                            "></i>
                         </div>
                       </div>
                     </div>
@@ -188,117 +101,50 @@
                 <NoData :imageWidth="180" :imageHeight="130" />
               </template>
             </div>
-          </div>
+          </div> -->
           <div class="grid-contentBottom">
-            <div class="manageTitle">拥有权限</div>
+            <div class="capTitle flex">
+              <div class="manageTitle">下级权限</div>
+              <div class="btn-create">
+                <el-button size="small" class="btn-white">新增</el-button>
+              </div>
+            </div>
             <div class="content">
               <template v-if="childrenData.length">
                 <el-row :gutter="24">
-                  <el-col
-                    :span="6"
-                    v-for="(data, index) in childrenData"
-                    :key="data.AuthId"
-                  >
-                    <div
-                      @click.stop="childrenClick(data)"
-                      class="account-left-content-teams"
-                    >
+                  <el-col :span="6" v-for="(data, index) in childrenData" :key="data.AuthId">
+                    <div @click.stop="childrenClick(data)" class="account-left-content-teams">
                       <div class="team">
-                        <div
-                          class="bg"
-                          :class="data.Type == 1 ? 'status1' : 'status2'"
-                        ></div>
-                        <div
-                          class="list"
-                          :class="data.QueryTarget == 1 ? 'activeStatus' : ''"
-                        >
+                        <div class="bg" :class="data.Type == 1 ? 'status1' : 'status2'"></div>
+                        <div class="list" :class="data.QueryTarget == 1 ? 'activeStatus' : ''">
                           <div class="flex info">
                             <div :title="data.AuthName" class="name">
                               {{ data.AuthName }}
                             </div>
                             <div class="icon">
-                              <el-tooltip
-                                effect="dark"
-                                content="新增应用"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type === 0"
-                                  title="新增应用"
-                                  @click="renderAdd()"
-                                  class="cap cap-plus"
-                                ></span>
+                              <el-tooltip effect="dark" content="新增应用" placement="bottom">
+                                <span v-if="data.Type === 0" title="新增应用" @click="renderAdd()" class="cap cap-plus"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                effect="dark"
-                                content="修改应用"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type === 1"
-                                  title="修改应用"
-                                  @click="renderEdit(data)"
-                                  class="cap cap-edit"
-                                ></span>
+                              <el-tooltip effect="dark" content="修改应用" placement="bottom">
+                                <span v-if="data.Type === 1" title="修改应用" @click="renderEdit(data)" class="cap cap-edit"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                v-is="['authtree_btn_add_auth']"
-                                effect="dark"
-                                content="新增权限项"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type === 2"
-                                  title="新增权限项"
-                                  @click="renderSub(data)"
-                                  class="cap cap-sub"
-                                ></span>
+                              <el-tooltip v-is="['authtree_btn_add_auth']" effect="dark" content="新增权限项" placement="bottom">
+                                <span v-if="data.Type === 2" title="新增权限项" @click="renderSub(data)" class="cap cap-sub"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                v-is="['authtree_btn_update_auth']"
-                                effect="dark"
-                                content="编辑权限项"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type > 2"
-                                  title="编辑权限项"
-                                  @click="renderEdit(data)"
-                                  class="cap cap-edit"
-                                ></span>
+                              <el-tooltip v-is="['authtree_btn_update_auth']" effect="dark" content="编辑权限项" placement="bottom">
+                                <span v-if="data.Type > 2" title="编辑权限项" @click="renderEdit(data)" class="cap cap-edit"></span>
                               </el-tooltip>
-                              <el-tooltip
-                                v-is="['authtree_btn_add_auth']"
-                                effect="dark"
-                                content="新增权限项"
-                                placement="bottom"
-                              >
-                                <span
-                                  v-if="data.Type > 2"
-                                  title="新增权限项"
-                                  @click="renderSub(data)"
-                                  class="cap cap-sub"
-                                ></span>
+                              <el-tooltip v-is="['authtree_btn_add_auth']" effect="dark" content="新增权限项" placement="bottom">
+                                <span v-if="data.Type > 2" title="新增权限项" @click="renderSub(data)" class="cap cap-sub"></span>
                               </el-tooltip>
                             </div>
                           </div>
                           <div v-if="data.Type > 0" class="flex details">
                             <div class="details-msg">
-                              状态:<span
-                                :class="data.Status === 1 ? 'success' : 'error'"
-                                >{{ data.Status === 1 ? "启用" : "禁用" }}</span
-                              >
+                              状态:<span :class="data.Status === 1 ? 'success' : 'error'">{{ data.Status === 1 ? "启用" : "禁用" }}</span>
                             </div>
-                            <div
-                              v-is="['authtree_btn_state_swatch']"
-                              class="details-info"
-                            >
-                              <el-switch
-                                v-model="data.flag"
-                                @click.stop.native
-                                @change="renderChange(data, index)"
-                                active-color="#2D67E3"
-                              >
+                            <div v-is="['authtree_btn_state_swatch']" class="details-info">
+                              <el-switch v-model="data.flag" @click.stop.native @change="renderChange(data, index)" active-color="#2D67E3">
                               </el-switch>
                             </div>
                           </div>
@@ -308,21 +154,14 @@
                         <i class="icon el-icon-close" :class="data.Type === 1 ? 'close1' : data.Type > 2 ? 'close2' : ''"></i>
                       </div> -->
                       <div v-is="['authtree_btn_del_auth']">
-                        <div
-                          v-if="data.Type !== 0 && data.Type !== 2"
-                          @click.stop="onNodeClick(data)"
-                          class="info-close"
-                        >
-                          <i
-                            class="icon el-icon-close"
-                            :class="
+                        <div v-if="data.Type !== 0 && data.Type !== 2" @click.stop="onNodeClick(data)" class="info-close">
+                          <i class="icon el-icon-close" :class="
                               data.Type === 1
                                 ? 'close1'
                                 : data.Type > 2
                                 ? 'close2'
                                 : ''
-                            "
-                          ></i>
+                            "></i>
                         </div>
                       </div>
                     </div>
@@ -342,15 +181,10 @@
       <div class="airportInfoDialog">
         <div class="title del-title">删除{{ title }}</div>
         <div class="content del-content">
-          <span class="el-icon-error error r10"></span>是否确认删除<span
-            class="error l10"
-            >{{ title }}</span
-          >?
+          <span class="el-icon-error error r10"></span>是否确认删除<span class="error l10">{{ title }}</span>?
         </div>
         <div class="foot Delfoot right t30">
-          <el-button size="medium" class="r24" @click="remove" type="danger"
-            >删除</el-button
-          >
+          <el-button size="medium" class="r24" @click="remove" type="danger">删除</el-button>
           <el-button size="medium" @click="flag = false">取消</el-button>
         </div>
       </div>
@@ -374,7 +208,7 @@ export default {
   name: "Authority",
   components: { OrgTree, Search, Dialog, NoData },
   mixins: [treeData],
-  data() {
+  data () {
     return {
       dataIndex: 1,
       dataNum: 0,
@@ -403,7 +237,7 @@ export default {
   },
   watch: {
     dataList: {
-      handler(val) {
+      handler (val) {
         this.dataListTree = [];
         this.dataListTree.push(_.cloneDeep(val));
       },
@@ -412,7 +246,7 @@ export default {
   },
   methods: {
     //树点击
-    handleNodeClick(data) {
+    handleNodeClick (data) {
       const dataNew = _.cloneDeep(data);
       this.currDataArrId = dataNew.AuthId;
       this.currDataArr = [];
@@ -425,7 +259,7 @@ export default {
       );
     },
     //下级卡片点击
-    childrenClick(data) {
+    childrenClick (data) {
       const dataNew = _.cloneDeep(data);
       this.currDataArrId = dataNew.AuthId;
       this.currDataArr = [];
@@ -440,7 +274,7 @@ export default {
       this.currentKey = dataNew.AuthId;
     },
     //下级关闭
-    childrenRenderChange(data, index) {
+    childrenRenderChange (data, index) {
       try {
         const { OrganId, flag } = data;
         const Status = flag ? 1 : 0;
@@ -462,16 +296,16 @@ export default {
         this.childrenData[index].flag = !flag;
       }
     },
-    filterNode(value, data) {
+    filterNode (value, data) {
       if (!value) return true;
       return data.AuthName.indexOf(value) !== -1;
     },
     // 添加应用
-    renderAdd() {
+    renderAdd () {
       this.$router.push("/authority/appAdd");
     },
     // 修改权限
-    renderEdit(data) {
+    renderEdit (data) {
       if (data.Type === 1) {
         this.$router.push({
           path: "/authority/appEdit",
@@ -493,7 +327,7 @@ export default {
       }
     },
     // 权限树
-    renderSub(data) {
+    renderSub (data) {
       this.$router.push({
         path: "/authority/addPower",
         query: {
@@ -504,13 +338,13 @@ export default {
       });
     },
     // 关闭开启
-    renderChange(data, index) {
+    renderChange (data, index) {
       const { AuthId, flag, Type } = data;
       const Status = flag ? 1 : 0;
       this.handleChange(AuthId, Status, Type, index);
     },
     //删除
-    remove() {
+    remove () {
       if (this.type === 1) {
         this.deleteApp(this.dataId);
       } else {
@@ -518,23 +352,23 @@ export default {
       }
     },
     //查询
-    getSearchData(val) {
+    getSearchData (val) {
       this.$refs.tree.filter(val);
       // this.getAuthTree(val)
     },
     //清除查询
-    clearSearchData() {
+    clearSearchData () {
       this.getAuthTree();
     },
     //节点关闭按钮点击
-    onNodeClick(data) {
+    onNodeClick (data) {
       this.flag = true;
       this.dataId = data.AuthId;
       this.title = data.AuthName;
       this.type = data.Type;
     },
     //获取指定数据
-    decompose(value, key, id) {
+    decompose (value, key, id) {
       let data = _.cloneDeep(value);
       let arr = [];
       for (let i = 0; i < data.length; i++) {
@@ -545,7 +379,7 @@ export default {
       return arr;
     },
     //渲染节点
-    renderContent(h, data) {
+    renderContent (h, data) {
       return (
         <div class="account-left-content-teams">
           <div class="team">
@@ -616,7 +450,7 @@ export default {
     },
     //-----------获取数据------------
     //应用状态变更
-    async handleChange(id, val, type, index) {
+    async handleChange (id, val, type, index) {
       try {
         let res = null;
         if (type === 1) {
@@ -656,7 +490,7 @@ export default {
       }
     },
     //应用删除
-    async deleteApp(id) {
+    async deleteApp (id) {
       try {
         const res = await DeleteApp({
           AppId: id,
@@ -674,7 +508,7 @@ export default {
       }
     },
     //权限项删除
-    async deleteAuth(id) {
+    async deleteAuth (id) {
       try {
         const res = await DeleteAuth({
           AuthId: id,
@@ -723,6 +557,12 @@ export default {
           background: #2d67e3;
         }
       }
+      .status0 {
+        margin-right: 28px;
+        .icon {
+          background: #d8b53b;
+        }
+      }
     }
   }
   .authority-content {
@@ -730,6 +570,9 @@ export default {
     ::v-deep .orgTreeContent {
       padding-top: 110px;
       .account-left-content-teams {
+        .status0 {
+          background: #d8b53b;
+        }
         .status1 {
           background: #58c274;
         }
@@ -771,6 +614,9 @@ export default {
         justify-content: space-between;
       }
     }
+    .capTitle {
+      line-height: 32px;
+    }
     .account-left-content-teams {
       position: relative;
       margin-top: 24px;
@@ -857,6 +703,9 @@ export default {
           height: 4px;
           background: #6f81bc;
         }
+        .status0 {
+          background: #d8b53b;
+        }
         .status1 {
           background: #58c274;
         }
@@ -982,7 +831,7 @@ export default {
 
     .grid-contentBottom {
       width: 100%;
-      height: calc(100% - 240px - 24px);
+      height: 100%;
       background: #ffffff;
       border-radius: 4px;
       padding: 27px 24px;