FE-V2-PC/src/views/tableDemo.vue

<template>
  <div class="tableDemo">
    <div class="table-for-max-box">
      <div class="table-title-box">
        <p>模块菜单</p>
        <p>权限</p>
      </div>
      <div class="table-for-big-box" v-for="(maxItem,maxIndex) in menuList" :key="maxIndex">
        <div class="max-title-box" :class="!maxItem.children?'max-title-box-null':''">
          <p><el-checkbox v-model="maxItem.checkType">{{maxItem.menuName}}</el-checkbox></p>
        </div>
        <div class="max-right-box">
          <div class="big-box" v-for="(bigItem,bigIndex) in maxItem.children" :key="bigIndex">
            <div class="big-title-box" :class="!bigItem.children?'big-title-box-null':''">
              <p><el-checkbox v-model="bigItem.checkType">{{bigItem.menuName}}</el-checkbox></p>
            </div>
            <div class="big-right-box" v-if="bigItem.children">
              <div class="min-box" v-for="(minItem,minIndex) in bigItem.children" :key="minIndex">
                <div class="min-title-box">
                  <p><el-checkbox v-model="minItem.checkType">{{minItem.menuName}}</el-checkbox></p>
                </div>
                <div class="min-right-box" v-if="minItem.checkType">
                  <div class="scope-box">
                    <p>
                      <el-checkbox v-model="minItem.scopeCheckType" style="margin-right:40px;">数据范围</el-checkbox>
                      <el-select v-model="minItem.value" :disabled="!minItem.scopeCheckType" placeholder="请选择">
                        <el-option :key="0" label="所有数据" :value="0"></el-option>
                        <el-option :key="1" label="本部门及下级部门数据" :value="1"></el-option>
                        <el-option :key="2" label="本部门及指定部门数据" :value="2"></el-option>
                        <el-option :key="3" label="当前账号数据" :value="3"></el-option>
                      </el-select>
                    </p>
                  </div>
                  <div class="permission-box">
                    <p class="check-left-p"><el-checkbox v-model="minItem.permissionCheckType">管理权限</el-checkbox></p>
                    <div class="check-button-box" :class="minItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
                      <img v-if="!minItem.permissionCheckType" src="@/assets/ZDimages/icon_11.png">
                      <img v-if="minItem.permissionCheckType" src="@/assets/ZDimages/icon_13.png">
                      <p>详细配置</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="big-right-box-null" v-if="!bigItem.children&&bigItem.checkType">
              <div class="scope-box">
                <p>
                  <el-checkbox v-model="bigItem.scopeCheckType" style="margin-right:40px;">数据范围</el-checkbox>
                  <el-select v-model="bigItem.value" :disabled="!bigItem.scopeCheckType" placeholder="请选择">
                    <el-option :key="0" label="所有数据" :value="0"></el-option>
                    <el-option :key="1" label="本部门及下级部门数据" :value="1"></el-option>
                    <el-option :key="2" label="本部门及指定部门数据" :value="2"></el-option>
                    <el-option :key="3" label="当前账号数据" :value="3"></el-option>
                  </el-select>
                </p>
              </div>
              <div class="permission-box">
                <p class="check-left-p"><el-checkbox v-model="bigItem.permissionCheckType">管理权限</el-checkbox></p>
                <div class="check-button-box" :class="bigItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
                  <img v-if="!bigItem.permissionCheckType" src="@/assets/ZDimages/icon_11.png">
                  <img v-if="bigItem.permissionCheckType" src="@/assets/ZDimages/icon_13.png">
                  <p>详细配置</p>
                </div>
              </div>
            </div>
          </div>
          <p class="big-box-null" v-if="!maxItem.children&&maxItem.menuName == '数据可视化'">数据可视化大屏查看权限</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { listMenu} from "@/api/system/menu";
  export default {
    name: "tableDemo",
    data() {
      return {
        menuList:[],
      }
    },
    created() {
      this.getList();
    },
    mounted(){

    },
    methods: {
      /** 查询菜单列表 */
      getList() {
        this.loading = true;
        listMenu(this.queryParams).then(response => {
          this.menuList = this.handleTree(response.data, "menuId");
          this.loading = false;
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .tableDemo{
    height:100%;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    padding:20px!important;
    overflow: hidden!important;
    .table-for-max-box{
      border:1px solid #D7D7D7;
      overflow-y: scroll;
      *{
        margin:0;
        padding:0;
      }
      .table-title-box{
        background: rgba(1,131,250,0.1);
        display: flex;
        p{
          font-size:14px;
          font-weight:700;
          color:#333;
          line-height:48px;
          padding-left:20px;
        }
        p:nth-child(1){
          width:615px;
          border-right:1px solid #D7D7D7;
        }
      }
      .table-for-big-box{
        border-top:1px solid #D7D7D7;
        display: flex;
        font-size:14px;
        .max-title-box-null{
          width:615px!important;
        }
        .max-title-box{
          width:230px;
          border-right:1px solid #D7D7D7;
          min-height:48px;
          position: relative;
          p{
            position: absolute;
            top:50%;
            left:20px;
            height:18px;
            line-height:18px;
            margin-top:-9px;
          }
        }
        .max-right-box{
          flex:5;
          min-height:48px;
          .big-box:nth-child(1){
            border:none!important;
          }
          .big-box-null{
            line-height:48px;
            margin-left:20px;
            color:#606266;
          }
          .big-box{
            display: flex;
            border-top:1px solid #D7D7D7;
            .big-title-box-null{
              width:385px!important;
            }
            .big-title-box{
              width:180px;
              border-right:1px solid #D7D7D7;
              min-height:48px;
              position: relative;
              overflow: hidden;
              p{
                position: absolute;
                top:50%;
                left:20px;
                height:48px;
                line-height:48px;
                margin-top:-24px;
              }
            }
            .big-right-box-null{
              display: flex;
              .scope-box{
                width:430px;
                position: relative;
                overflow: hidden;
                border-right:1px solid #D7D7D7;
                p{
                  position: absolute;
                  top:50%;
                  left:20px;
                  height:48px;
                  line-height:48px;
                  margin-top:-24px;
                }
              }
              .permission-box{
                flex:1;
                position: relative;
                overflow: hidden;
                display: flex;
                .check-left-p{
                  margin-left:20px;
                  height:48px;
                  line-height:48px;
                }
                .check-button-box{
                  width:130px;
                  height:36px;
                  margin:6px 0 0 36px;
                  line-height:36px;
                  display: flex;
                  color:#333;
                  cursor: pointer;
                  img{
                    width:16px;
                    height:16px;
                    margin:10px 14px 0 19px;
                  }
                }
                .check-button-box-colorA{
                  background: #CCE6FE;
                  color:#0183FA;
                }
                .check-button-box-colorB{
                  background: #E0E0E0;
                  color:#333;
                }
              }
            }
            .big-right-box{
              flex:5;
              min-height:48px;
              .min-box:nth-child(1){
                border:none!important;
              }
              .min-box{
                display: flex;
                border-top:1px solid #D7D7D7;
                .min-title-box{
                  width:205px;
                  border-right:1px solid #D7D7D7;
                  min-height:48px;
                  position: relative;
                  overflow: hidden;
                  p{
                    position: absolute;
                    top:50%;
                    left:20px;
                    height:48px;
                    line-height:48px;
                    margin-top:-24px;
                  }
                }
                .min-right-box{
                  flex:5;
                  min-height:48px;
                  display: flex;
                  .scope-box{
                    width:430px;
                    position: relative;
                    overflow: hidden;
                    border-right:1px solid #D7D7D7;
                    p{
                      position: absolute;
                      top:50%;
                      left:20px;
                      height:48px;
                      line-height:48px;
                      margin-top:-24px;
                    }
                  }
                  .permission-box{
                    flex:1;
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    .check-left-p{
                      margin-left:20px;
                      height:48px;
                      line-height:48px;
                    }
                    .check-button-box{
                      width:130px;
                      height:36px;
                      margin:6px 0 0 36px;
                      line-height:36px;
                      display: flex;
                      color:#333;
                      cursor: pointer;
                      img{
                        width:16px;
                        height:16px;
                        margin:10px 14px 0 19px;
                      }
                    }
                    .check-button-box-colorA{
                      background: #CCE6FE;
                      color:#0183FA;
                    }
                    .check-button-box-colorB{
                      background: #E0E0E0;
                      color:#333;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<style>
  .scope-box .el-input--medium .el-input__inner{
    height:36px!important;
  }
  .scope-box .el-input--medium .el-input__icon {
    line-height: 46px;
  }
</style>