123

Surpriseplus

2022-11-12 e3a8cfa1f235815519d281a2f74590c432818a26

123

 src/views/AuthorizationManagement/menuRoleAuthorization.vue

@@ -1,16 +1,15 @@
<template>
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,

          `${$t('operatManage.MenuRoleAuthorization')}`,
        ]"
      ></My-bread>

      <el-divider />
      <div class="menuTreeBox">
        `${$t('operatManage.MenuRoleAuthorization')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="menuTreeBox">
      <div class="left_tree">
        <el-tree
          :data="depList"
          :props="defaultProps"
@@ -24,12 +23,91 @@
        >
        </el-tree>
      </div>
      <div class="right_menu">
        <div
          style="
            font-size: 14px;
            color: #409eff;
            line-height: 1;
            cursor: text;
            position: relative;
            top: 5px;
            margin-left: 10px;
            display: flex;
            align-items: center;
          "
        >
          <span>
            {{
              $t('operatManage.UserRoleAuthorizationObj.PermissionTable')
            }}</span
          >
          <div class="btn" style="margin-left: auto">
            <el-button
              v-if="menuStatus.insert"
              type="primary"
              icon="el-icon-circle-plus-outline"
              size="small"
              :disabled="roleid == null ? true : false"
              @click="adduser"
              style="background: #409eff"
              >{{
                $t('operatManage.UserRoleAuthorizationObj.Added')
              }}</el-button
            >
            <el-button
              v-if="menuStatus.delete"
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deletesUser"
              :disabled="roleid == null ? true : false"
              >{{
                $t('operatManage.UserRoleAuthorizationObj.delete')
              }}</el-button
            >
          </div>
        </div>
        <el-divider class="divider" />
        <el-table
          :data="tableData"
          style="width: 100%"
          height="80%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            type="index"
            :label="$t('dataManage.styleObj.index')"
          />
          <el-table-column
            prop="authName"
            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
          >
          </el-table-column>
        </el-table>

        <div
          style="margin-top: 20px; text-align: center"
          class="pagination_box"
        >
          <el-pagination
            @size-change="userhandleSizeChange"
            @current-change="userhandleCurrentChange"
            :current-page="userlistData.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="userlistData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="usercount"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div class="menuSettings">
      <!-- <div class="title_box">
        <h4>详细信息</h4>
      </div> -->
    <!-- <div class="menuSettings">

      <div
        style="
          font-size: 14px;
@@ -56,6 +134,7 @@
            size="small"
            :disabled="roleid == null ? true : false"
            @click="adduser"
            style="background: #409eff"
            >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button
          >
          <el-button
@@ -71,42 +150,8 @@
      </div>
      <el-divider class="divider" />

      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        height="85%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          background: 'transparent',
        }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          align="center"
          type="index"
          :label="$t('dataManage.styleObj.index')"
        />
        <el-table-column
          prop="authName"
          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
        >
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; text-align: center" class="pagination_box">
        <el-pagination
          @size-change="userhandleSizeChange"
          @current-change="userhandleCurrentChange"
          :current-page="userlistData.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="userlistData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="usercount"
        >
        </el-pagination>
      </div>
    </div>
    </div> -->
    <el-dialog
      :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
      :visible.sync="dialogTableVisible"
@@ -381,94 +426,185 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.menuSettings_box {
  //   background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .menuSettings_tree {
  width: 97%;
  height: 81%;

  position: absolute;
  .menuTreeBox {
    width: 100%;
    height: 91%;
    position: relative;
    width: 30%;
    height: 100%;
    background: rgb(240, 242, 245);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .menuTreeBox {
      height: 90%;
      overflow: auto;
      .el-tree {

    .left_tree {
      width: 30%;
      height: 94%;
      padding: 20px;
      border: 1px solid rgb(202, 201, 204);
      border-radius: 5px;
      float: left;
      overflow-y: auto;
      // 更改指标树图标颜色
      /deep/ .el-tree .el-icon-caret-right:before {
        color: white; /** 这里是要修改图标的颜色 **/
      }
      /deep/ .el-tree {
        color: white; /** 这里是要修改图标的颜色 **/
        background: transparent;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        // /deep/ .el-tree-node__label {
        //   font-size: 18px;
        // }
        /deep/ .el-tree-node {
          padding-top: 10px;
          // padding-bottom: 10px;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin-left: 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }
      }
      /deep/.el-tree-node__content {
        &:hover {
          background-color: rgba(255, 255, 255, 0.3) !important;
        }
      }
      /deep/.el-tree-node.is-current > .el-tree-node__content {
        background-color: rgba(255, 255, 255, 0.3) !important;
        color: #409eff;
      }
    }
  }
  .menuSettings {
    width: 70%;
    border-radius: 10px;
    background: rgb(240, 242, 245);
    margin-left: 10px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;
      display: flex;
      border-radius: 10px;
    .right_menu {
      width: 63%;
      height: 94%;
      padding: 20px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
      border-radius: 5px;
      float: right;
    }
  }
  .table_box {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
    height: 85%;
  /*里面的代码可以根据自己需求去进行更改*/
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 4px;
  }
  .divider {
    margin-top: 8px;
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #8b8b8b;
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }
  ::-webkit-scrollbar-thumb:window-inactive {
    background: #8b8b8b;
    height: 289px;
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #1890ff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
  /*修改table 表体的背景颜色和文字颜色*/
  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // 表头背景色
    th.el-table__cell {
      background-color: #303030;
      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.3) !important;
      // text-align: center;
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 10px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
    }

    /*定义滑块 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
}
.el-table,
.el-table /deep/ .el-table__expanded-cell {
  background-color: transparent;
</style>
<style>
.el-select-dropdown {
  background: #303030 !important;
  border-color: 1px solid !important;
}

.el-table /deep/ th,
.el-table /deep/ tr {
  background-color: transparent;
.el-scrollbar__wrap {
  margin-bottom: -20px !important;
  margin-right: -20px !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}
.el-select-dropdown__item {
  color: white !important;
}
</style>

 src/views/AuthorizationManagement/roleMenuAuthorization.vue

@@ -1,19 +1,193 @@
<template>
  <div class="menuSettings_box">
    <!-- 角色，单位 -->
    <div
      class="menuSettings_tree"
      style="margin-left: 10px; width: calc(50% - 172px)"
    >
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.RoleMenuAuthorization')}`,
        ]"
      ></My-bread>
    <div class="menuSettings_tree">
      <div class="content_box">
        <My-bread
          :list="[
            `${$t('operatManage.operatManage')}`,
            `${$t('operatManage.RoleMenuAuthorization')}`,
          ]"
        ></My-bread>
        <el-divider />
        <el-form ref="form" :model="selFrom">
          <el-form-item label="单位">
            <el-select
              ref="multiSelect"
              style="width: 300px"
              v-model="selFrom.name"
              placeholder="请选择单位名称..."
              @change="chooseCustom('multiSelect')"
            >
              <el-option
                :value="selectTree"
                style="overflow: auto; backgrond: transparent; height: 200px"
                disabled
              >
                <el-tree
                  :data="depList"
                  :props="defaultProps"
                  :check-on-click-node="true"
                  :check-strictly="true"
                  node-key="id"
                  ref="treeForm"
                  @node-click="addAdminHandleNodeClick"
                  :default-expanded-keys="[1]"
                >
                </el-tree>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          style="width: 100%"
          @row-click="singleElection"
          highlight-current-row
          height="83%"
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row.id"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            type="index"
            :label="$t('dataManage.styleObj.index')"
          />
          <el-table-column
            prop="name"
            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="content_box">
        <div
          style="
            font-size: 14px;
            color: #216fe6;
            line-height: 1;
            cursor: text;
            position: relative;
            top: 5px;
            margin-left: 10px;
            display: flex;
            align-items: center;
          "
        >
          <span>
            {{
              $t('operatManage.UserRoleAuthorizationObj.PermissionTable')
            }}</span
          >
        </div>
        <el-divider />
        <div style="height: 90%; overflow-y: auto">
          <el-tree
            :data="menuList"
            :props="defaultMenuProps"
            :show-checkbox="true"
            :check-on-click-node="true"
            :check-strictly="true"
            node-key="id"
            @check="menuTreeCheck"
            ref="treeForm"
            :default-expanded-keys="[1]"
          >
          </el-tree>
        </div>
      </div>
      <div class="content_box">
        <div
          style="
            font-size: 14px;
            color: #216fe6;
            line-height: 1;
            cursor: text;
            position: relative;
            top: 5px;
            margin-left: 10px;
            display: flex;
            align-items: center;
          "
        >
          <span>
            {{
              $t('operatManage.UserRoleAuthorizationObj.PermissionTable')
            }}</span
          >
          <div class="btn" style="margin-left: auto">
            <el-button
              v-if="menuStatus.insert"
              type="primary"
              icon="el-icon-circle-plus-outline"
              size="small"
              @click="adduser"
              :disabled="menuid == null ? true : false"
              style="background-color: #216fe6"
              >{{
                $t('operatManage.UserRoleAuthorizationObj.Added')
              }}</el-button
            >
            <el-button
              v-if="menuStatus.delete"
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deletesUser"
              :disabled="menuid == null ? true : false"
              >{{
                $t('operatManage.UserRoleAuthorizationObj.delete')
              }}</el-button
            >
          </div>
        </div>
        <el-divider class="divider" />
        <el-table
          :data="menuTableData"
          stripe
          style="width: 100%"
          height="80%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            type="index"
            :label="$t('dataManage.styleObj.index')"
          />
          <el-table-column
            prop="name"
            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
          >
          </el-table-column>
        </el-table>

      <el-divider />
      <el-form ref="form" :model="selFrom">
        <div
          style="margin-top: 20px; text-align: center"
          class="pagination_box"
        >
          <el-pagination
            @size-change="authhandleSizeChange"
            @current-change="authhandleCurrentChange"
            :current-page="rolMenuListData.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="rolMenuListData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="roleMenuCount"
          >
          </el-pagination>
        </div>
      </div>
      <!--  -->
      <!-- <el-form ref="form" :model="selFrom">
        <el-form-item label="单位">
          <el-select
            ref="multiSelect"
@@ -44,38 +218,7 @@
        </el-form-item>
      </el-form>
      <div style="height: 75%">
        <el-table
          :data="tableData"
          style="width: 100%"
          @row-click="singleElection"
          highlight-current-row
          height="85%"
          :header-cell-style="{
            background: 'transparent',
          }"
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row.id"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            type="index"
            :label="$t('dataManage.styleObj.index')"
          />
          <el-table-column
            prop="name"
            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
          >
          </el-table-column>
        </el-table>

      </div>
      <div style="margin-top: 20px; text-align: center" class="pagination_box">
        <el-pagination
@@ -88,11 +231,11 @@
          :total="roleDepCount"
        >
        </el-pagination>
      </div>
      </div> -->
    </div>

    <!-- 菜单表 -->
    <div
    <!-- <div
      class="menuSettings_tree"
      style="margin-left: 10px; width: calc(50% - 172px)"
    >
@@ -133,9 +276,7 @@
    </div>

    <div class="menuSettings">
      <!-- <div class="title_box">
        <h4>详细信息</h4>
      </div> -->

      <div
        style="
          font-size: 14px;
@@ -212,7 +353,7 @@
        >
        </el-pagination>
      </div>
    </div>
    </div> -->
    <el-dialog
      :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
      :visible.sync="dialogTableVisible"
@@ -527,94 +668,237 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.menuSettings_box {
  //   background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  height: 81%;
  width: 97%;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  .menuSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: rgb(240, 242, 245);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .menuTreeBox {
      height: 90%;
      overflow: auto;
      .el-tree {
        background: transparent;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        // /deep/ .el-tree-node__label {
        //   font-size: 18px;
        // }
        /deep/ .el-tree-node {
          padding-top: 10px;
          // padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
    .content_box {
      padding: 10px;
      width: 31%;
      height: 720px;
      border: 1px solid rgb(202, 201, 204);
      border-radius: 5px;
      /deep/ .el-input__inner {
        background-color: transparent !important;
        border: 1px solid;
        color: white;
      }
      /deep/.el-form-item__label {
        color: white;
      }
      /*修改table 表体的背景颜色和文字颜色*/
      /deep/ .el-table {
        background-color: transparent;

        th,
        td {
          background-color: transparent;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        .el-table__expanded-cell {
          background-color: transparent !important;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);

        // 表头背景色
        th.el-table__cell {
          background-color: #303030;
          color: #fff;
        }
        .btnBox {
          margin-left: 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }
        tr > td {
          background-color: #303030;
          color: #fff;
        }

        // hover效果
        tr:hover > td {
          background-color: rgba(255, 255, 255, 0.1) !important;
        }

        tbody tr:hover {
          background-color: rgba(255, 255, 255, 0.1) !important;
          // text-align: center;
        }

        // 滚动条宽高
        .el-table__body-wrapper::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }

        .el-table__body-wrapper::-webkit-scrollbar {
          width: 5px;
          /*滚动条宽度*/
          height: 10px;
          /*滚动条高度*/
        }
        /*定义滚动条轨道 内阴影+圆角*/
        .el-table__body-wrapper::-webkit-scrollbar-track {
          box-shadow: 0px 1px 3px #216fe6 inset;
          /*滚动条的背景区域的内阴影*/
          border-radius: 10px;
        }

        /*定义滑块 内阴影+圆角*/
        .el-table__body-wrapper::-webkit-scrollbar-thumb {
          box-shadow: 0px 1px 3px #216fe6 inset;
          border-radius: 6px;
          background-color: #216fe6;
        }
      }
    }
  }
  .menuSettings {
    width: calc(50% - 172px);
    border-radius: 10px;
    background: rgb(240, 242, 245);
    margin-left: 10px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;
      display: flex;
  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // 表头背景色
    th.el-table__cell {
      background-color: #303030;
      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      // text-align: center;
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 10px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
    }

    /*定义滑块 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
  .table_box {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
    height: 85%;
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #1890ff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
  .divider {
    margin-top: 8px;
  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
}
.el-table,
.el-table /deep/ .el-table__expanded-cell {
  background-color: transparent;
</style>
<style>
.el-tree .el-icon-caret-right:before {
  color: white !important; /** 这里是要修改图标的颜色 **/
}
.el-tree {
  color: white !important; /** 这里是要修改图标的颜色 **/
  background: transparent !important;
}
.el-tree-node__content {
  background: transparent !important;
}

.el-table /deep/ th,
.el-table /deep/ tr {
  background-color: transparent;
.el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #409eff;
}
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 4px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #8b8b8b;
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #8b8b8b;
  height: 289px;
}
.el-select-dropdown {
  background: #303030;
  border-color: white;
}
/* //右侧和下方的白边 */
.el-scrollbar__wrap {
  margin-bottom: -20px !important;
  margin-right: -20px !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}
.el-select-dropdown__item {
  color: white;
}
</style>

 src/views/AuthorizationManagement/roleResAuthorization.vue

@@ -1,6 +1,177 @@
<template>
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <div class="content_box">
        <My-bread
          :list="[
            `${$t('operatManage.operatManage')}`,
            `${$t('operatManage.RoleResAuthorization')}`,
          ]"
        ></My-bread>
        <el-divider />
        <div style="height: 90%; overflow-y: auto">
          <el-tree
            :data="depList"
            :props="defaultProps"
            :show-checkbox="true"
            :check-on-click-node="true"
            :check-strictly="true"
            node-key="id"
            @check="treeCheck"
            ref="treeForm"
            :default-expanded-keys="[1]"
          >
          </el-tree>
        </div>
      </div>
      <div class="content_box">
        <div
          style="
            font-size: 14px;
            color: #216fe6;
            line-height: 1;
            cursor: text;
            position: relative;
            top: 10px;
            margin-left: 10px;
          "
        >
          {{ $t('operatManage.UserRoleAuthorizationObj.RoleTable') }}
        </div>
        <el-divider />
        <el-table
          :data="tableData"
          style="width: 100%"
          @row-click="singleElection"
          highlight-current-row
          height="84%"
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row.id"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            type="index"
            :label="$t('dataManage.styleObj.index')"
          />
          <el-table-column
            prop="name"
            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
          >
          </el-table-column>
        </el-table>
        <div
          style="text-align: center; margin-top: 20px"
          class="pagination_box"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listData.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="userlistData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
      </div>
      <div class="content_box">
        <div
          style="
            font-size: 14px;
            color: #216fe6;
            line-height: 1;
            cursor: text;
            position: relative;
            top: 5px;
            margin-left: 10px;
            display: flex;
            align-items: center;
          "
        >
          <span>
            {{ $t('operatManage.UserRoleAuthorizationObj.userTable') }}</span
          >
          <div class="btn" style="margin-left: auto">
            <el-button
              v-if="menuStatus.insert"
              type="primary"
              icon="el-icon-circle-plus-outline"
              size="mini"
              :disabled="roleid == null ? true : false"
              style="background: #216fe6"
              @click="adduser"
              >{{
                $t('operatManage.UserRoleAuthorizationObj.Added')
              }}</el-button
            >
            <el-button
              v-if="menuStatus.delete"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deletesUser"
              :disabled="roleid == null ? true : false"
              >{{
                $t('operatManage.UserRoleAuthorizationObj.delete')
              }}</el-button
            >
          </div>
        </div>
        <el-divider />

        <el-table
          :data="usertableData"
          stripe
          style="width: 100%"
          height="82%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            type="index"
            :label="$t('dataManage.styleObj.index')"
          />
          <el-table-column
            prop="resName"
            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
          >
          </el-table-column>
          <el-table-column
            prop="server"
            :label="$t('operatManage.UserRoleAuthorizationObj.server')"
          >
          </el-table-column>
        </el-table>

        <div
          style="margin-top: 20px; text-align: center"
          class="pagination_box"
        >
          <el-pagination
            @size-change="userhandleSizeChange"
            @current-change="userhandleCurrentChange"
            :current-page="userlistData.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="userlistData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="usercount"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- <div class="menuSettings_tree">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
@@ -54,7 +225,7 @@
      >
        <el-table-column align="center" width="55">
          <template slot-scope="scope">
            <!-- 可以手动的修改label的值，从而控制选择哪一项 -->

            <el-radio
              class="radio"
              v-model="templateSelection"
@@ -88,9 +259,6 @@
      </div>
    </div>
    <div class="menuSettings">
      <!-- <div class="title_box">
        <h4>详细信息</h4>
      </div> -->
      <div
        style="
          font-size: 14px;
@@ -170,7 +338,7 @@
        >
        </el-pagination>
      </div>
    </div>
    </div> -->
    <el-dialog
      :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
      :visible.sync="dialogTableVisible"
@@ -476,94 +644,184 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.menuSettings_box {
  //   background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  height: 81%;
  width: 97%;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  .menuSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: rgb(240, 242, 245);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .menuTreeBox {
      height: 90%;
      overflow: auto;
      .el-tree {
        background: transparent;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        // /deep/ .el-tree-node__label {
        //   font-size: 18px;
        // }
        /deep/ .el-tree-node {
          padding-top: 10px;
          // padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
    .content_box {
      padding: 10px;
      width: 31%;
      height: 720px;
      border: 1px solid rgb(202, 201, 204);
      border-radius: 5px;
      /deep/ .el-input__inner {
        background-color: transparent !important;
        border: 1px solid;
        color: white;
      }
      /deep/.el-form-item__label {
        color: white;
      }
      /*修改table 表体的背景颜色和文字颜色*/
      /deep/ .el-table {
        background-color: transparent;

        th,
        td {
          background-color: transparent;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        .el-table__expanded-cell {
          background-color: transparent !important;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);

        // 表头背景色
        th.el-table__cell {
          background-color: #303030;
          color: #fff;
        }
        .btnBox {
          margin-left: 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }
        tr > td {
          background-color: #303030;
          color: #fff;
        }

        // hover效果
        tr:hover > td {
          background-color: rgba(255, 255, 255, 0.1) !important;
        }

        tbody tr:hover {
          background-color: rgba(255, 255, 255, 0.1) !important;
          // text-align: center;
        }

        // 滚动条宽高
        .el-table__body-wrapper::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }

        .el-table__body-wrapper::-webkit-scrollbar {
          width: 5px;
          /*滚动条宽度*/
          height: 10px;
          /*滚动条高度*/
        }
        /*定义滚动条轨道 内阴影+圆角*/
        .el-table__body-wrapper::-webkit-scrollbar-track {
          box-shadow: 0px 1px 3px #216fe6 inset;
          /*滚动条的背景区域的内阴影*/
          border-radius: 10px;
        }

        /*定义滑块 内阴影+圆角*/
        .el-table__body-wrapper::-webkit-scrollbar-thumb {
          box-shadow: 0px 1px 3px #216fe6 inset;
          border-radius: 6px;
          background-color: #216fe6;
        }
      }
    }
  }
  .menuSettings {
    width: calc(50% - 172px);
    border-radius: 10px;
    background: rgb(240, 242, 245);
    margin-left: 10px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;
      display: flex;
  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // 表头背景色
    th.el-table__cell {
      background-color: #303030;
      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      // text-align: center;
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 10px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
    }

    /*定义滑块 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
  .table_box {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
    height: 85%;
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #1890ff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
  .divider {
    margin-top: 8px;
  /deep/ .el-dialog {
    background: #303030;
  }
}
.el-table,
.el-table /deep/ .el-table__expanded-cell {
  background-color: transparent;
}

.el-table /deep/ th,
.el-table /deep/ tr {
  background-color: transparent;
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
}
</style>

 src/views/AuthorizationManagement/userRoleAuthorization.vue

@@ -116,7 +116,7 @@
            size="small"
            :disabled="roleid == null ? true : false"
            @click="adduser"
            style="ba"
            style="background: #409eff"
            >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button
          >
          <el-button

 src/views/maintenance/blackwhiteList.vue

@@ -148,7 +148,7 @@
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 40px" class="pagination_box">
          <div style="margin-top: 20px" class="pagination_box">
            <el-pagination
              @size-change="BhandleSizeChange"
              @current-change="BhandleCurrentChange"
@@ -213,7 +213,7 @@
            </el-form-item>
          </el-form>
        </div>
        <div class="table_box">
        <div class="table_box1">
          <el-table :data="WTableData" stripe     @selection-change="blackSelectionChange" style="width: 100%" height="85%">
               <el-table-column type="selection" width="55" />
            <el-table-column
@@ -270,7 +270,7 @@
            </el-table-column>
          </el-table>
          </el-table>
          <div style="margin-top: 40px" class="pagination_box">
          <div style="margin-top: 20px" class="pagination_box">
            <el-pagination
              @size-change="WhandleSizeChange"
              @current-change="WhandleCurrentChange"
@@ -596,10 +596,10 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.logLog_box {
  background: rgb(240, 242, 245);

  border-radius: 10px;
  height: 100%;
  padding: 10px;

  box-sizing: border-box;
  .el-input {
    width: 300px;
@@ -607,24 +607,140 @@
  .inquire {
    padding: 10px;
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;

  }
  .table_box {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
    height: 70%;
    height: 410px;
  }
  .table_box1{
padding: 10px;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
    height: 460px;
  }
  .text-center {
    text-align: center;
  }
  .el-tab-pane {
    height: 82vh;
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #1890ff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
/deep/
.el-tabs__item {
     color: #409eff;
}
    /deep/.el-form-item__label {
      color: white;
    }
    /deep/ .el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
 /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
/deep/.el-tabs__active-bar{
      background: #409eff;
}
 /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

      th,
      td {
        background-color: transparent;
      }
      .el-table__expanded-cell {
        background-color: transparent !important;
      }

      // 表头背景色
      th.el-table__cell {
        background-color: #303030;
        color: #fff;
      }
      tr > td {
        background-color: #303030;
        color: #fff;
      }

      // hover效果
      tr:hover > td {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        // text-align: center;
      }

      // 滚动条宽高
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 10px;
        /*滚动条高度*/
      }
      /*定义滚动条轨道 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #216fe6 inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #216fe6 inset;
        border-radius: 6px;
        background-color: #216fe6;
      }
    }
}
</style>

 src/views/maintenance/databaseMonitoring.vue

@@ -1,14 +1,12 @@
<template>
  <div class="databaseMonitoring_box">
    <div class="table_box">
      <iframe
        id="iframe"
        :src="sql_Url"
        style="height: 100%"
        width="100%"
        frameborder="0"
      ></iframe>
    </div>
    <iframe
      id="iframe"
      :src="sql_Url"
      style="height: 100%"
      width="100%"
      frameborder="0"
    ></iframe>
  </div>
</template>

@@ -46,18 +44,10 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.databaseMonitoring_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  height: 81%;
  width: 97%;
  position: absolute;
  box-sizing: border-box;
  .table_box {
    height: 90%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: hidden;
  }
}
</style>

 src/views/maintenance/eventlogManage.vue

@@ -52,7 +52,6 @@
              :label="$t('operatManage.operationLogObj.download')"
              value="6"
            />
           
          </el-select>
        </el-form-item>
        <el-form-item
@@ -85,16 +84,16 @@
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" icon="el-icon-search">{{
            $t("operatManage.operationLogObj.inquire")
            $t('operatManage.operationLogObj.inquire')
          }}</el-button>
          <el-button @click="onEmpty('formData2')" icon="el-icon-delete">{{
            $t("operatManage.operationLogObj.empty")
            $t('operatManage.operationLogObj.empty')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table :data="tableData" stripe style="width: 100%" height="85%">
      <el-table :data="tableData" style="width: 100%" height="85%">
        <el-table-column
          align="center"
          type="index"
@@ -147,8 +146,8 @@
</template>

<script>
import MyBread from "../../components/MyBread.vue";
import { resOpSelectByPageAndCount } from "../../api/api";
import MyBread from '../../components/MyBread.vue';
import { resOpSelectByPageAndCount } from '../../api/api';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -170,7 +169,7 @@
  methods: {
    //格式化时间
    add0(m) {
      return m < 10 ? "0" + m : m;
      return m < 10 ? '0' + m : m;
    },
    //格式化时间
    format(shijianchuo) {
@@ -183,7 +182,7 @@
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y + "-" + this.add0(m) + "-" + this.add0(d)
        y + '-' + this.add0(m) + '-' + this.add0(d)
        // " " +
        // this.add0(h) +
        // ":" +
@@ -205,25 +204,25 @@
      let data;
      switch (row[column.property]) {
        case 0:
          data = "其它";
          data = '其它';
          break;
        case 1:
          data = "查看";
          data = '查看';
          break;
        case 2:
          data = "新增";
          data = '新增';
          break;
        case 3:
          data = "修改";
          data = '修改';
          break;
        case 4:
          data = "删除";
          data = '删除';
          break;
        case 5:
          data = "上传";
          data = '上传';
          break;
        case 6:
          data = "下载";
          data = '下载';
          break;
      }
      return data;
@@ -254,7 +253,7 @@
      const data = await resOpSelectByPageAndCount(this.listData);
      console.log(data);
      if (data.code != 200) {
        return this.$message.error("列表调用失败");
        return this.$message.error('列表调用失败');
      }
      this.tableData = data.result;
      this.count = data.count;
@@ -268,10 +267,9 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.logLog_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;

  box-sizing: border-box;
  .el-input {
    width: 300px;
@@ -281,21 +279,117 @@
    overflow: auto;
    padding: 10px;
    margin-top: 20px;
    background: #fff;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
    .el-form-item {
      margin: 7px;
    }
    /deep/.el-form-item__label {
      color: white;
    }
    /deep/ .el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
  }
  .table_box {
   overflow: auto;
    overflow: auto;
    height: 70%;
    padding: 10px;
    background: #fff;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    height: 480px;
    /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

      th,
      td {
        background-color: transparent;
      }
      .el-table__expanded-cell {
        background-color: transparent !important;
      }

      // 表头背景色
      th.el-table__cell {
        background-color: #303030;
        color: #fff;
      }
      tr > td {
        background-color: #303030;
        color: #fff;
      }

      // hover效果
      tr:hover > td {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        // text-align: center;
      }

      // 滚动条宽高
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 10px;
        /*滚动条高度*/
      }
      /*定义滚动条轨道 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #216fe6 inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #216fe6 inset;
        border-radius: 6px;
        background-color: #216fe6;
      }
    }
    .pagination_box {
      /deep/.el-input__inner {
        background-color: transparent !important;
        border: 1px solid;
        color: white;
      }
      /deep/.el-pagination__total {
        color: white;
      }
      /deep/.el-pagination__jump {
        color: white;
      }
      /deep/.el-pager li.active {
        color: #1890ff;
      }
      /deep/.el-pager li {
        color: white;
        background: transparent;
      }
      /deep/.el-pager li {
        color: white;
      }
      /deep/.btn-prev {
        background: transparent;
      }
      /deep/.btn-next {
        background: transparent;
      }
    }
  }
  .text-center {
    text-align: center;

 src/views/maintenance/logLog.vue

@@ -76,7 +76,7 @@
    </div>
    <!-- 表格显示 -->
    <div class="table_box">
      <el-table :data="tableData" stripe style="width: 100%" height="85%">
      <el-table :data="tableData" stripe style="width: 100%" height="80%">
        <el-table-column
          width="150"
          type="index"
@@ -262,15 +262,14 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.logLog_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;

  box-sizing: border-box;
  .inquire {
    padding: 10px;
    margin-top: 20px;
    background: #fff;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
@@ -280,14 +279,109 @@
      margin-bottom: 20px;
      font-size: 14px;
    }
    /deep/.el-form-item__label {
      color: white;
    }
    /deep/ .el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
  }
  .table_box {
    padding: 10px;
    background: #fff;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
    height: 70%;
    height: 480px;
    /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

      th,
      td {
        background-color: transparent;
      }
      .el-table__expanded-cell {
        background-color: transparent !important;
      }

      // 表头背景色
      th.el-table__cell {
        background-color: #303030;
        color: #fff;
      }
      tr > td {
        background-color: #303030;
        color: #fff;
      }

      // hover效果
      tr:hover > td {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        // text-align: center;
      }

      // 滚动条宽高
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 10px;
        /*滚动条高度*/
      }
      /*定义滚动条轨道 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #216fe6 inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #216fe6 inset;
        border-radius: 6px;
        background-color: #216fe6;
      }
    }
    .pagination_box {
      /deep/.el-input__inner {
        background-color: transparent !important;
        border: 1px solid;
        color: white;
      }
      /deep/.el-pagination__total {
        color: white;
      }
      /deep/.el-pagination__jump {
        color: white;
      }
      /deep/.el-pager li.active {
        color: #1890ff;
      }
      /deep/.el-pager li {
        color: white;
        background: transparent;
      }
      /deep/.el-pager li {
        color: white;
      }
      /deep/.btn-prev {
        background: transparent;
      }
      /deep/.btn-next {
        background: transparent;
      }
    }
  }
  .text-center {
    text-align: center;

 src/views/maintenance/mochaitmo.vue

@@ -26,6 +26,24 @@
          <user-role-authorization
            v-if="setMenuFlag == '7'"
          ></user-role-authorization>
          <menu-role-authorization
            v-if="setMenuFlag == '8'"
          ></menu-role-authorization>
          <role-menu-authorization v-if="setMenuFlag == '9'">
          </role-menu-authorization>
          <role-res-authorization
            v-if="setMenuFlag == '10'"
          ></role-res-authorization>
          <log-log v-if="setMenuFlag == '11'"> </log-log>
          <operation-log v-if="setMenuFlag == '12'"></operation-log>
          <eventlog-manage v-if="setMenuFlag == '13'"></eventlog-manage>
          <tokentool v-if="setMenuFlag == '14'"></tokentool>
          <blackwhite-list v-if="setMenuFlag == '15'"></blackwhite-list>
          <database-monitoring v-if="setMenuFlag == '16'"></database-monitoring>
          <system-monitoring v-if="setMenuFlag == '17'"></system-monitoring>
          <parameter-configuration
            v-if="setMenuFlag == '18'"
          ></parameter-configuration>
        </div>
      </el-card>
    </div>
@@ -39,7 +57,18 @@
import resourceManage from '@/views/userManage/resourceManage.vue'; //资源管理
import roleManage from '@/views/userManage/roleManage.vue'; //角色管理
import authorityManage from '@/views/userManage/authorityManage.vue'; //权限管理
import userRoleAuthorization from '@/views/AuthorizationManagement/userRoleAuthorization.vue'; //权限管理
import userRoleAuthorization from '@/views/AuthorizationManagement/userRoleAuthorization.vue'; //用户角色授权
import menuRoleAuthorization from '@/views/AuthorizationManagement/menuRoleAuthorization.vue'; //菜单权限授权
import roleMenuAuthorization from '@/views/AuthorizationManagement/roleMenuAuthorization.vue'; //角色菜单授权
import roleResAuthorization from '@/views/AuthorizationManagement/roleResAuthorization.vue'; //角色资源授权
import logLog from '@/views/maintenance/logLog.vue'; //登录日志
import operationLog from '@/views/maintenance/operationLog.vue'; //操作日志
import eventlogManage from '@/views/maintenance/eventlogManage.vue'; //资源日志
import tokentool from '@/views/maintenance/tokentool.vue'; //令牌管理
import blackwhiteList from '@/views/maintenance/blackwhiteList.vue'; //黑白名单
import databaseMonitoring from '@/views/maintenance/databaseMonitoring.vue'; //数据库监控
import systemMonitoring from '@/views/maintenance/systemMonitoring.vue'; //系统监控
import parameterConfiguration from '@/views/maintenance/parameterConfiguration.vue'; //系统配置
import { selectMenuRecursive } from '../../api/api';

export default {
@@ -51,6 +80,17 @@
    roleManage,
    authorityManage,
    userRoleAuthorization,
    menuRoleAuthorization,
    roleMenuAuthorization,
    roleResAuthorization,
    logLog,
    operationLog,
    eventlogManage,
    tokentool,
    blackwhiteList,
    databaseMonitoring,
    systemMonitoring,
    parameterConfiguration,
  },
  data() {
    return {
@@ -83,6 +123,12 @@
    //树点击
    handleNodeClick(data) {
      this.$store.state.currentPerms = data.perms;
      var index = data.url;
      if (index != null) {
        if (index.indexOf('http') != -1) {
          this.$store.commit('getIframe', data.url);
        }
      }

      switch (data.cnName) {
        case '菜单管理':
@@ -106,6 +152,39 @@
        case '用户角色授权':
          this.setMenuFlag = '7';
          break;
        case '菜单权限授权':
          this.setMenuFlag = '8';
          break;
        case '角色菜单授权':
          this.setMenuFlag = '9';
          break;
        case '角色资源授权':
          this.setMenuFlag = '10';
          break;
        case '登录日志':
          this.setMenuFlag = '11';
          break;
        case '操作日志':
          this.setMenuFlag = '12';
          break;
        case '资源日志':
          this.setMenuFlag = '13';
          break;
        case '令牌管理':
          this.setMenuFlag = '14';
          break;
        case '黑/白名单':
          this.setMenuFlag = '15';
          break;
        case '数据库监控':
          this.setMenuFlag = '16';
          break;
        case '系统监控':
          this.setMenuFlag = '17';
          break;
        case '系统配置':
          this.setMenuFlag = '18';
          break;
      }
    },
  },

 src/views/maintenance/operationLog.vue

@@ -9,7 +9,7 @@
    <el-divider />
    <div class="inquire">
      <div class="herder_box">
        {{ $t("operatManage.operationLogObj.queryRegion") }}
        {{ $t('operatManage.operationLogObj.queryRegion') }}
      </div>
      <el-form ref="formData3" :model="form" :inline="true">
        <el-form-item
@@ -91,16 +91,16 @@
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" icon="el-icon-search">{{
            $t("operatManage.operationLogObj.inquire")
            $t('operatManage.operationLogObj.inquire')
          }}</el-button>
          <el-button @click="onEmpty('formData3')" icon="el-icon-delete">{{
            $t("operatManage.operationLogObj.empty")
            $t('operatManage.operationLogObj.empty')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table :data="tableData" stripe style="width: 100%" height="85%">
      <el-table :data="tableData" style="width: 100%" height="85%">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column
          :label="$t('operatManage.operationLogObj.num')"
@@ -175,8 +175,8 @@
</template>

<script>
import MyBread from "../../components/MyBread.vue";
import { operateSelectByPageAndCount } from "../../api/api";
import MyBread from '../../components/MyBread.vue';
import { operateSelectByPageAndCount } from '../../api/api';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -198,7 +198,7 @@
  methods: {
    //格式化时间
    add0(m) {
      return m < 10 ? "0" + m : m;
      return m < 10 ? '0' + m : m;
    },
    //格式化时间
    format(shijianchuo) {
@@ -211,7 +211,7 @@
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y + "-" + this.add0(m) + "-" + this.add0(d)
        y + '-' + this.add0(m) + '-' + this.add0(d)
        // " " +
        // this.add0(h) +
        // ":" +
@@ -233,25 +233,25 @@
      let data;
      switch (row[column.property]) {
        case 0:
          data = "其它";
          data = '其它';
          break;
        case 1:
          data = "查看";
          data = '查看';
          break;
        case 2:
          data = "新增";
          data = '新增';
          break;
        case 3:
          data = "修改";
          data = '修改';
          break;
        case 4:
          data = "删除";
          data = '删除';
          break;
        case 5:
          data = "上传";
          data = '上传';
          break;
        case 6:
          data = "下载";
          data = '下载';
          break;
      }
      return data;
@@ -267,8 +267,8 @@
    onEmpty(formData1) {
      this.$refs[formData1].resetFields(); //重置表单数据
      // this.form = {}
      this.form.start =null
      this.form.end =null
      this.form.start = null;
      this.form.end = null;
    },
    onSubmit() {
      this.listData = { ...this.listData, ...this.form };
@@ -277,9 +277,9 @@
    },
    async getList() {
      const data = await operateSelectByPageAndCount(this.listData);
     

      if (data.code != 200) {
        return this.$message.error("列表调用失败");
        return this.$message.error('列表调用失败');
      }
      this.tableData = data.result;
      this.count = data.count;
@@ -293,16 +293,13 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.operationLog_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .inquire {
    padding: 10px;
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
@@ -312,14 +309,109 @@
      margin-bottom: 20px;
      font-size: 14px;
    }
    /deep/.el-form-item__label {
      color: white;
    }
    /deep/ .el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
  }
  .table_box {
    padding: 10px;
    background: #fff;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);

    overflow: auto;
    height: 70%;
    height: 480px;
    /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

      th,
      td {
        background-color: transparent;
      }
      .el-table__expanded-cell {
        background-color: transparent !important;
      }

      // 表头背景色
      th.el-table__cell {
        background-color: #303030;
        color: #fff;
      }
      tr > td {
        background-color: #303030;
        color: #fff;
      }

      // hover效果
      tr:hover > td {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        // text-align: center;
      }

      // 滚动条宽高
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 10px;
        /*滚动条高度*/
      }
      /*定义滚动条轨道 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #216fe6 inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #216fe6 inset;
        border-radius: 6px;
        background-color: #216fe6;
      }
    }
    .pagination_box {
      /deep/.el-input__inner {
        background-color: transparent !important;
        border: 1px solid;
        color: white;
      }
      /deep/.el-pagination__total {
        color: white;
      }
      /deep/.el-pagination__jump {
        color: white;
      }
      /deep/.el-pager li.active {
        color: #1890ff;
      }
      /deep/.el-pager li {
        color: white;
        background: transparent;
      }
      /deep/.el-pager li {
        color: white;
      }
      /deep/.btn-prev {
        background: transparent;
      }
      /deep/.btn-next {
        background: transparent;
      }
    }
  }
  .text-center {
    text-align: center;

 src/views/maintenance/parameterConfiguration.vue

@@ -8,7 +8,7 @@
    ></My-bread>
    <el-divider />
    <div class="parameterConfiguration">
      <el-table :data="tableData" style="width: 100%" fit>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          type="index"
@@ -247,15 +247,13 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.parameterConfiguration_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;

  box-sizing: border-box;
  .parameterConfiguration {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    height: 86%;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
@@ -267,9 +265,97 @@
      display: flex;
      justify-content: center;
    }
    /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

      th,
      td {
        background-color: transparent;
      }
      .el-table__expanded-cell {
        background-color: transparent !important;
      }

      // 表头背景色
      th.el-table__cell {
        background-color: #303030;
        color: #fff;
      }
      tr > td {
        background-color: #303030;
        color: #fff;
      }

      // hover效果
      tr:hover > td {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        // text-align: center;
      }

      // 滚动条宽高
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 10px;
        /*滚动条高度*/
      }
      /*定义滚动条轨道 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #216fe6 inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #216fe6 inset;
        border-radius: 6px;
        background-color: #216fe6;
      }
    }
  }
  .pagination_box {
    margin-top: 20px;
  }

  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #1890ff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
}
</style>

 src/views/maintenance/systemMonitoring.vue

@@ -643,10 +643,9 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.systemMonitoring_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
@@ -662,7 +661,7 @@
      padding-top: 30px;
      width: 33%;
      height: 100%;
      background: #fff;

      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
      .top_box {
@@ -677,14 +676,14 @@
        .Syslabel {
          font-family: sans-serif;
          font-size: 13px;
          color: gray;
          color: white;
          text-align: left;
          // margin-left: 20px;
        }
        .details {
          font-family: sans-serif;
          font-size: 31px;
          color: #1b1e21;
          color: white;
          text-align: center;
          letter-spacing: 2px;
        }
@@ -696,7 +695,7 @@
      .bottom_box {
        border-top: 1px solid rgb(202, 201, 204);
        text-align: center;
        color: #6c757d;
        color: white;
        font-size: 14px;
      }
    }

 src/views/maintenance/tokentool.vue

@@ -571,10 +571,9 @@
//@import url(); 引入公共css类

.tokentool_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;

  box-sizing: border-box;
  .el-input {
    width: 745px;
@@ -585,7 +584,7 @@
  .inquire {
    padding: 10px;
    margin-top: 20px;
    background: #fff;

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 10px;
@@ -598,14 +597,109 @@
    .el-select {
      width: 200px;
    }
    /deep/.el-form-item__label {
      color: white;
    }
    /deep/ .el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
  }
  .table_box {
    padding: 10px;
    background: #fff;
    height: 68%;

    height: 450px;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 10px;
    /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

      th,
      td {
        background-color: transparent;
      }
      .el-table__expanded-cell {
        background-color: transparent !important;
      }

      // 表头背景色
      th.el-table__cell {
        background-color: #303030;
        color: #fff;
      }
      tr > td {
        background-color: #303030;
        color: #fff;
      }

      // hover效果
      tr:hover > td {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
        // text-align: center;
      }

      // 滚动条宽高
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 10px;
        /*滚动条高度*/
      }
      /*定义滚动条轨道 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #216fe6 inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
      }

      /*定义滑块 内阴影+圆角*/
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #216fe6 inset;
        border-radius: 6px;
        background-color: #216fe6;
      }
    }
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #1890ff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
}
</style>

 src/views/userManage/authorityManage.vue

@@ -277,12 +277,12 @@
<script>
import moment from 'moment';
import MyBread from '../../components/MyBread.vue';
import { select_Auth_ByPageAndCount, insertAuth,updateAuth,deleteAuths } from '../../api/api.js';
import { select_Auth_ByPageAndCount, insertAuth, updateAuth, deleteAuths } from '../../api/api.js';
export default {
  components: { MyBread },
  data() {
    return {
       menuStatus: {
      menuStatus: {
        delete: false,
        insert: false,
        update: false,
@@ -299,32 +299,34 @@
      tableData: [],
      itemdetail: {},
      upform: {},
        multipleSelection: [],
      multipleSelection: [],
      count: 0,

      listData: {
        name: null,
        pageIndex: 1,
        pageSize: 10,
      },
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  defaultProps: {
    children: 'children',
    label: 'label',
  },

  created() {
    var val = this.$store.state.currentPerms;
     var permsEntity = this.$store.state.permsEntity;
      for (var i = 0; i < permsEntity.length; i++) {
        if (permsEntity[i].perms == val) {
          this.showPermsMenu(permsEntity[i]);
    var permsEntity = this.$store.state.permsEntity;
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        this.showPermsMenu(permsEntity[i]);

        }
      }
    }
    this.getRoleTabelData();
  },
  methods: {
     showPermsMenu(res) {
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
          this.menuStatus.delete = true;
@@ -337,7 +339,7 @@
          break;
      }
    },
   async DelFromData(){
    async DelFromData() {
      var std = [];
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
@@ -356,7 +358,7 @@
        });
      }
    },
     handleSelectionChange(val) {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submitForm(formName) {
@@ -364,16 +366,16 @@

    },
    resetForm(formName) {
      this.ruleForm ={}
      this.ruleForm = {}
      this.getRoleTabelData();
    },
     EditFromDataClose(){
    EditFromDataClose() {
      this.EditFormdialog = false;
      this.upform ={};
     },
    async EditFromData(){
        const data = await updateAuth(this.upform);
        if (data.code == 200) {
      this.upform = {};
    },
    async EditFromData() {
      const data = await updateAuth(this.upform);
      if (data.code == 200) {
        this.EditFormdialog = false;
        this.upform = {};
        this.$message({
@@ -434,7 +436,7 @@
      if (this.listData.tab == '') {
        delete this.listData.tab;
      }
    this.listData.name = this.ruleForm.name;
      this.listData.name = this.ruleForm.name;
      const data = await select_Auth_ByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
@@ -490,7 +492,7 @@

    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
        /*修改table 表体的背景颜色和文字颜色*/
    /*修改table 表体的背景颜色和文字颜色*/
    /deep/ .el-table {
      background-color: transparent;

@@ -551,7 +553,7 @@
  }
  .pagination_box {
    margin-top: 20px;
       /deep/.el-input__inner {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;

 src/views/userManage/resourceManage.vue

@@ -519,12 +519,13 @@
        pageIndex: 1,
        pageSize: 10,
      },
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  defaultProps: {
    children: 'children',
    label: 'label',
  },

  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
@@ -877,7 +878,7 @@
  }
  .pagination_box {
    margin-top: 20px;
     /deep/.el-input__inner {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;

 src/views/userManage/roleManage.vue

@@ -59,7 +59,6 @@
    <div class="table_box">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="99%"