权限管理页面

Surpriseplus

2022-09-22 5e3c04ba085abe1bd1cec0645cfe39f8f2975593

权限管理页面

 src/assets/lang/en.js

@@ -391,6 +391,7 @@
      roleSetting: 'roleSetting',
      one: 'A picture',
    },
    authorityManage: 'Permission management',
  },
};


 src/assets/lang/zh.js

@@ -271,6 +271,7 @@
  userManage: {
    userManage: '用户管理',
    userInfoManage: '用户信息管理',
    authorityManage: '权限管理',
    userInfoObj: {
      userStatus: '用户状态',
      all: '全部',

 src/components/navMenu.vue

@@ -18,117 +18,120 @@
        >
          <el-submenu index="3" class="faSub">
            <template slot="title">
              <span>{{ $t("synthesis.synthesis") }}</span>
              <span>{{ $t('synthesis.synthesis') }}</span>
            </template>
            <el-menu-item index="Synthesis">{{
              $t("synthesis.synthesis")
              $t('synthesis.synthesis')
            }}</el-menu-item>
            <el-menu-item index="Thematic">{{
              $t("synthesis.themaic")
              $t('synthesis.themaic')
            }}</el-menu-item>
            <el-menu-item index="Archive">{{
              $t("synthesis.archive")
              $t('synthesis.archive')
            }}</el-menu-item>
          </el-submenu>
          <el-submenu index="1" class="faSub">
            <template slot="title">
              <span>{{ $t("dataManage.dataManage") }}</span>
              <span>{{ $t('dataManage.dataManage') }}</span>
            </template>
            <el-menu-item index="catalogueManage">{{
              $t("dataManage.catalogueManage")
              $t('dataManage.catalogueManage')
            }}</el-menu-item>
            <el-menu-item index="dataUpdata">{{
              $t("dataManage.dataUpdata")
              $t('dataManage.dataUpdata')
            }}</el-menu-item>
            <el-menu-item index="metadataManage">{{
              $t("dataManage.metadataManage")
              $t('dataManage.metadataManage')
            }}</el-menu-item>
            <el-menu-item index="dataLoading">{{
              $t("dataManage.dataLoading")
              $t('dataManage.dataLoading')
            }}</el-menu-item>
            <el-menu-item index="SpatialData">{{
              $t("dataManage.SpatialData")
              $t('dataManage.SpatialData')
            }}</el-menu-item>
            <el-menu-item index="versionManage">{{
              $t("dataManage.versionManage")
              $t('dataManage.versionManage')
            }}</el-menu-item>
            <el-menu-item index="dictionaryManage">{{
              $t("dataManage.dictionaryManage")
              $t('dataManage.dictionaryManage')
            }}</el-menu-item>
            <el-menu-item index="styleManage">{{
              $t("dataManage.styleManage")
              $t('dataManage.styleManage')
            }}</el-menu-item>
          </el-submenu>
          <el-submenu index="2" class="faSub">
            <template slot="title">
              <span>{{ $t("operatManage.operatManage") }}</span>
              <span>{{ $t('operatManage.operatManage') }}</span>
            </template>
            <el-submenu index="2-2">
              <template slot="title">{{
                $t("operatManage.systemLayout")
                $t('operatManage.systemLayout')
              }}</template>
              <el-menu-item index="menuSettings">{{
                $t("operatManage.menuSettings")
                $t('operatManage.menuSettings')
              }}</el-menu-item>
              <el-menu-item index="parameterConfiguration">{{
                $t("operatManage.parameterConfiguration")
                $t('operatManage.parameterConfiguration')
              }}</el-menu-item>
              <el-menu-item index="rests">{{
                $t("operatManage.rests")
                $t('operatManage.rests')
              }}</el-menu-item>
            </el-submenu>
            <el-menu-item index="authorityManagement">{{
              $t("operatManage.authorityManagement")
              $t('operatManage.authorityManagement')
            }}</el-menu-item>
            <el-menu-item index="safetyManagement">{{
              $t("operatManage.safetyManagement")
              $t('operatManage.safetyManagement')
            }}</el-menu-item>
            <el-submenu index="2-5">
              <template slot="title">{{
                $t("operatManage.operationMonitoring")
                $t('operatManage.operationMonitoring')
              }}</template>
              <el-menu-item index="eventlogManage">{{
                $t("operatManage.eventlogManage")
                $t('operatManage.eventlogManage')
              }}</el-menu-item>
              <el-menu-item index="logLog">{{
                $t("operatManage.logLog")
                $t('operatManage.logLog')
              }}</el-menu-item>
              <el-menu-item index="operationLog">{{
                $t("operatManage.operationLog")
                $t('operatManage.operationLog')
              }}</el-menu-item>
              <el-menu-item index="databaseMonitoring">{{
                $t("operatManage.databaseMonitoring")
                $t('operatManage.databaseMonitoring')
              }}</el-menu-item>
              <el-menu-item index="systemMonitoring">{{
                $t("operatManage.systemMonitoring")
                $t('operatManage.systemMonitoring')
              }}</el-menu-item>
              <el-menu-item index="blackwhiteList"
                >{{ $t("operatManage.blackwhiteList") }}
                >{{ $t('operatManage.blackwhiteList') }}
              </el-menu-item>
              <el-menu-item index="tokentool">{{
                $t("operatManage.tokentool")
                $t('operatManage.tokentool')
              }}</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="4" class="faSub">
            <template slot="title">
              <span>{{ $t("userManage.userManage") }}</span>
              <span>{{ $t('userManage.userManage') }}</span>
            </template>
            <el-menu-item index="userInfoManage">{{
              $t("userManage.userInfoManage")
              $t('userManage.userInfoManage')
            }}</el-menu-item>
            <el-menu-item index="orgManage">{{
              $t("userManage.orgManage")
              $t('userManage.orgManage')
            }}</el-menu-item>
            <el-menu-item index="userAuditing">{{
              $t("userManage.userAuditing")
              $t('userManage.userAuditing')
            }}</el-menu-item>
            <el-menu-item index="roleManage">{{
              $t("userManage.roleManage")
              $t('userManage.roleManage')
            }}</el-menu-item>
            <el-menu-item index="groupManage">{{
              $t("userManage.groupManage")
              $t('userManage.groupManage')
            }}</el-menu-item>
            <el-menu-item index="authorityManage">{{
              $t('userManage.authorityManage')
            }}</el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="5" class="faSub">
@@ -160,45 +163,45 @@

<script>
export default {
  name: "navMenu",
  name: 'navMenu',
  //import引入的组件需要注入到对象中才能使用
  data() {
    return {
      lang: "en",
      lang: 'en',
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      if (
        keyPath[1] != "dataLoading" &&
        keyPath[1] != "2-2" &&
        keyPath[1] != "2-5"
        keyPath[1] != 'dataLoading' &&
        keyPath[1] != '2-2' &&
        keyPath[1] != '2-5'
      )
        this.$router.push(keyPath[1]);
    },
    handleClose(key, keyPath) {
      if (
        keyPath[1] != "dataLoading" &&
        keyPath[1] != "2-5" &&
        keyPath[1] != "2-2"
        keyPath[1] != 'dataLoading' &&
        keyPath[1] != '2-5' &&
        keyPath[1] != '2-2'
      )
        this.$router.push(keyPath[1]);
    },
    handleselect(index) {
      if (index != null) {
        this.$emit("shwoMapView", false);
        this.$emit('shwoMapView', false);
      }
    },
    showChange() {
      this.$emit("shwoMapView", true);
      this.$emit('shwoMapView', true);
    },
    switchLang() {
      if (this.lang == "en") {
      if (this.lang == 'en') {
        this.$i18n.locale = this.lang;
        this.lang = "zh";
        this.lang = 'zh';
      } else {
        this.$i18n.locale = this.lang;
        this.lang = "en";
        this.lang = 'en';
      }
    },
  },

 src/router/index.js

@@ -1,21 +1,21 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import login from "../components/login";
import Synthesis from "../views/Synthesis/index.vue"; //综合展示
import Thematic from "../views/Thematic/index.vue"; //专题地图
import Archive from "../views/Archive/index.vue"; //资料馆
import menuSettings from "@/views/maintenance/menuSettings.vue"; //菜单设置
import rests from "@/views/maintenance/rests.vue"; //其他
import authorityManagement from "@/views/maintenance/authorityManagement.vue"; //权限管理
import safetyManagement from "@/views/maintenance/safetyManagement.vue"; //安全管理
import operationLog from "@/views/maintenance/operationLog.vue"; //操作日志
import eventlogManage from "@/views/maintenance/eventlogManage.vue"; //事件日志管理
import blackwhiteList from "@/views/maintenance/blackwhiteList.vue"; //登录日志
import logLog from "@/views/maintenance/logLog.vue"; //登录日志
import systemMonitoring from "@/views/maintenance/systemMonitoring.vue"; //系统监控
import databaseMonitoring from "@/views/maintenance/databaseMonitoring.vue"; //数据库监控
import parameterConfiguration from "@/views/maintenance/parameterConfiguration.vue"; //参数配置
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import login from '../components/login';
import Synthesis from '../views/Synthesis/index.vue'; //综合展示
import Thematic from '../views/Thematic/index.vue'; //专题地图
import Archive from '../views/Archive/index.vue'; //资料馆
import menuSettings from '@/views/maintenance/menuSettings.vue'; //菜单设置
import rests from '@/views/maintenance/rests.vue'; //其他
import authorityManagement from '@/views/maintenance/authorityManagement.vue'; //权限管理
import safetyManagement from '@/views/maintenance/safetyManagement.vue'; //安全管理
import operationLog from '@/views/maintenance/operationLog.vue'; //操作日志
import eventlogManage from '@/views/maintenance/eventlogManage.vue'; //事件日志管理
import blackwhiteList from '@/views/maintenance/blackwhiteList.vue'; //登录日志
import logLog from '@/views/maintenance/logLog.vue'; //登录日志
import systemMonitoring from '@/views/maintenance/systemMonitoring.vue'; //系统监控
import databaseMonitoring from '@/views/maintenance/databaseMonitoring.vue'; //数据库监控
import parameterConfiguration from '@/views/maintenance/parameterConfiguration.vue'; //参数配置
import tokentool from '@/views/maintenance/tokentool.vue'; //token å·¥å…·

//数据管理模块
@@ -29,11 +29,12 @@
import styleManage from '../views/datamanage/styleManage.vue'; //数据管理-样式管理
import addStyle from '../views/datamanage/addStyle.vue'; //数据管理-样式管理-添加样式

import userInfoManage from '../views/userManage/userInfoManage.vue'// ç”¨æˆ·ç®¡ç†æ¨¡å—
import orgManage from '../views/userManage/orgManage.vue'// ç”¨æˆ·ç®¡ç†æ¨¡å—
import userAuditing from '../views/userManage/userAuditing.vue'// ç”¨æˆ·ç®¡ç†æ¨¡å—
import roleManage from '../views/userManage/roleManage.vue'// ç”¨æˆ·ç®¡ç†æ¨¡å—
import groupManage from '../views/userManage/groupManage.vue'// ç”¨æˆ·ç®¡ç†æ¨¡å—
import userInfoManage from '../views/userManage/userInfoManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import orgManage from '../views/userManage/orgManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import userAuditing from '../views/userManage/userAuditing.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import roleManage from '../views/userManage/roleManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import groupManage from '../views/userManage/groupManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import authorityManage from '@/views/userManage/authorityManage.vue'; //用户管理-权限管理

// ç¾¤ç»„管理
Vue.use(VueRouter);
@@ -206,30 +207,30 @@
        },
      },
      {
        path: "/eventlogManage",
        path: '/eventlogManage',
        component: eventlogManage,
        name: "eventlogManage",
        name: 'eventlogManage',
        meta: {
          title: "事件日志管理",
          title: '事件日志管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: "/logLog",
        path: '/logLog',
        path: '/logLog',
        component: logLog,
        name: 'logLog',
        meta: {
          title: "事件日志管理",
          title: '事件日志管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: "/blackwhiteList",
        path: '/blackwhiteList',
        component: blackwhiteList,
        name: "blackwhiteList",
        name: 'blackwhiteList',
        meta: {
          title: "黑/白名单",
          title: '黑/白名单',
          title: '登录日志',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
@@ -306,6 +307,7 @@
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },

      {
        path: '/groupManage',
        component: groupManage,
@@ -315,6 +317,15 @@
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/authorityManage',
        component: authorityManage,
        name: 'authorityManage',
        meta: {
          title: '权限管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
    ],
  },
];

 src/views/userManage/authorityManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,261 @@
<template>
  <div class="power_box">
    <My-bread
      :list="[
        `${$t('userManage.userManage')}`,
        `${$t('userManage.authorityManage')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="power_quire">
      <el-form ref="form" :model="form" label-width="100px" :inline="true">
        <el-form-item :label="$t('common.username')">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" plain>{{
            $t('common.iquery')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          :label="$t('operatManage.ELM.index')"
          width="70px"
        />
        <el-table-column
          prop="date"
          align="center"
          :label="$t('userManage.userInfoObj.username')"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          :label="$t('userManage.userInfoObj.affiliatedUnit')"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          align="center"
          :label="$t('userManage.userInfoObj.mobileNumber')"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          align="center"
          :label="$t('userManage.userInfoObj.post')"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          :label="$t('userManage.userInfoObj.userstate')"
        >
        </el-table-column>
        <el-table-column
          prop="zip"
          align="center"
          :label="$t('userManage.userInfoObj.addtime')"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          :label="$t('common.operate')"
          width="170px"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="warning"
              size="small"
              >{{ $t('common.edit') }}</el-button
            >
            <el-button type="danger" size="small">{{
              $t('common.delete')
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="9"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="isTransfer"
      width="800px"
      append-to-body
    >
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
      >
      </el-tree>
      <el-button type="primary" size="small">{{
        $t('common.confirm')
      }}</el-button>
      <el-button type="info" size="small">{{ $t('common.close') }}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import MyBread from '../../components/MyBread.vue';
export default {
  components: { MyBread },
  data() {
    return {
      form: {},
      isTransfer: false,
      dialogTitle: '',
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 å¼„',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 å¼„',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 å¼„',
          zip: 200333,
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 å¼„',
          zip: 200333,
        },
      ],
    };
  },
  defaultProps: {
    children: 'children',
    label: 'label',
  },
  methods: {
    handleClick(row) {
      console.log(row);
      this.dialogTitle = row.name;
      this.isTransfer = true;
    },
  },
};
</script>

<style lang="less" scoped>
.power_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .el-input {
    width: 300px;
  }
  .power_quire {
    overflow: auto;
    padding: 8px;
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    padding-top: 25px;
    margin-bottom: 20px;
  }
  .table_box {
    height: 68%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
  }
  .pagination_box {
    margin-top: 20px;
  }
}
</style>

 src/views/userManage/userInfoManage.vue

@@ -116,7 +116,7 @@
          prop="largeModuleName"
          :label="$t('userManage.userInfoObj.state')"
        >
          <template scope="scope">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.largeModuleName == '正常'" type="success">{{
              scope.row.largeModuleName
            }}</el-tag>