用户管理

lxl

2022-09-21 e8e01f187af137a0a5ba74e00aa211e2e66fe3ae

用户管理

 src/assets/lang/en.js

@@ -233,6 +233,13 @@
    creationtime: 'Creation Time',
    state: 'State',
  },
  userManage: {
    userInfoManage: 'userInfoManage',
    orgManage: 'orgManage',
    userAuditing: 'userAuditing',
    roleManage: 'roleManage',
    groupManage: 'groupManage',
  }
};

export default en;

 src/assets/lang/zh.js

@@ -233,6 +233,14 @@
    creationtime: '创建时间',
    state: '状态',
  },
  userManage:{
    userManage: '用户管理',
    userInfoManage: '用户信息管理',
    orgManage: '组织机构管理',
    userAuditing: '用户审核',
    roleManage: '角色管理',
    groupManage: '群组管理',
  }
};

export default zh;

 src/components/navMenu.vue

@@ -63,9 +63,6 @@
            <template slot="title">
              <span>{{ $t("operatManage.operatManage") }}</span>
            </template>
            <el-menu-item index="userManagement">{{
              $t("operatManage.userManagement")
            }}</el-menu-item>
            <el-submenu index="2-2">
              <template slot="title">{{
                $t("operatManage.systemLayout")
@@ -112,10 +109,26 @@
            </el-submenu>
          </el-submenu>

          <!-- <el-submenu index="4" class="faSub">
            <template slot="title">数据质检</template>
            <el-menu-item index="4-1">数据质检</el-menu-item>
          </el-submenu> -->
          <el-submenu index="4" class="faSub">
            <template slot="title">
              <span>{{ $t("userManage.userManage") }}</span>
            </template>
            <el-menu-item index="userInfoManage">{{
              $t("userManage.userInfoManage")
            }}</el-menu-item>
            <el-menu-item index="orgManage">{{
              $t("userManage.orgManage")
            }}</el-menu-item>
            <el-menu-item index="userAuditing">{{
              $t("userManage.userAuditing")
            }}</el-menu-item>
            <el-menu-item index="roleManage">{{
              $t("userManage.roleManage")
            }}</el-menu-item>
            <el-menu-item index="groupManage">{{
              $t("userManage.groupManage")
            }}</el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="5" class="faSub">
            <template slot="title">数据交换</template>
            <el-menu-item index="5-1">数据分发</el-menu-item>

 src/router/index.js

@@ -5,7 +5,6 @@
import Synthesis from "../views/Synthesis/index.vue"; //综合展示
import Thematic from "../views/Thematic/index.vue"; //专题地图
import Archive from "../views/Archive/index.vue"; //资料馆
import userManagement from "@/views/maintenance/userManagement.vue"; //用户管理
import menuSettings from "@/views/maintenance/menuSettings.vue"; //菜单设置
import rests from "@/views/maintenance/rests.vue"; //其他
import authorityManagement from "@/views/maintenance/authorityManagement.vue"; //权限管理
@@ -21,7 +20,6 @@

//数据管理模块
import catalogueManage from '../views/datamanage/catalogueManage.vue'; //数据管理-目录管理

import dataUpdata from '../views/datamanage/dataUpdata.vue'; //数据管理-数据上传
import dataLoading from '../views/datamanage/dataLoading.vue'; //数据管理-数据入库
import metadataManage from '../views/datamanage/metadataManage.vue'; //数据管理-元数据管理
@@ -31,6 +29,13 @@
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'// ç”¨æˆ·ç®¡ç†æ¨¡å—

// ç¾¤ç»„管理
Vue.use(VueRouter);

const routes = [
@@ -154,15 +159,7 @@
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/userManagement',
        component: userManagement,
        name: 'userManagement',
        meta: {
          title: '用户管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },

      {
        path: '/menuSettings',
        component: menuSettings,
@@ -273,6 +270,51 @@
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/userInfoManage',
        component: userInfoManage,
        name: 'userInfoManage',
        meta: {
          title: '用户信息管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/orgManage',
        component: orgManage,
        name: 'orgManage',
        meta: {
          title: '组织机构管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/userAuditing',
        component: userAuditing,
        name: 'userAuditing',
        meta: {
          title: '用户审核',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/roleManage',
        component: roleManage,
        name: 'roleManage',
        meta: {
          title: '角色管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/groupManage',
        component: groupManage,
        name: 'groupManage',
        meta: {
          title: '群组管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
    ],
  },
];

 src/views/userManage/groupManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,307 @@
<template>
    <div class="logLog_box">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.eventlogManage')}`,
        ]"
      ></My-bread>
      <el-divider />
      <div class="inquire">
        <el-form ref="ruleForm" :model="form" :inline="true">
          <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
            <el-input
              v-model="form.username"
              :placeholder="$t('operatManage.ELM.usernameInfo')"
            />
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
          >
            <el-select
              v-model="form.ownedSystem"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.one')" value="one" />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.operationType')"
            prop="operationType"
          >
            <el-select
              v-model="form.operationType"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.add')" value="add" />
              <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
              <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
              <el-option :label="$t('operatManage.ELM.query')" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('operatManage.ELM.to')"
              :start-placeholder="$t('operatManage.ELM.startDate')"
              :end-placeholder="$t('operatManage.ELM.endDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
            <el-input v-model="form.requestIp" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit"
              ><i class="el-icon-search"></i> &nbsp;{{
                $t("operatManage.ELM.search")
              }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')"
              ><i class="el-icon-delete"></i>&nbsp;{{
                $t("operatManage.ELM.reset")
              }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe style="width: 100%" height="99%">
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="username"
            :label="$t('operatManage.ELM.username')"
          />
          <el-table-column
            align="center"
            prop="ip"
            :label="$t('operatManage.ELM.ip')"
          />
          <el-table-column
            align="center"
            prop="ownedSystem"
            :label="$t('operatManage.ELM.ownedSystem')"
          />
          <el-table-column
            align="center"
            prop="largeModuleName"
            :label="$t('operatManage.ELM.largeModuleName')"
          />
          <el-table-column
            align="center"
            prop="smallModuleName"
            :label="$t('operatManage.ELM.smallModuleName')"
          />
          <el-table-column
            align="center"
            prop="resourceName"
            :label="$t('operatManage.ELM.resourceName')"
          />
          <el-table-column
            align="center"
            prop="date"
            :label="$t('operatManage.ELM.date')"
          />
          <el-table-column
            align="center"
            prop="operationType"
            :label="$t('operatManage.ELM.operationType')"
          />
        </el-table>
        <div style="margin-top: 40px" 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>
      </div>
    </div>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
        },
        tableData: [
          {
            username: "管理员",
            ip: "221.182.31.12",
            date: "2022-08-05",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
        ],
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} æ¡`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    created() {},
  };
  </script>
  <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;
    }
    .inquire {
      height: 110px;
      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;
      }
    }
    .table_box {
      height: 65%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
    .text-center {
      text-align: center;
    }
  }
  </style>
  

 src/views/userManage/orgManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,307 @@
<template>
    <div class="logLog_box">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.eventlogManage')}`,
        ]"
      ></My-bread>
      <el-divider />
      <div class="inquire">
        <el-form ref="ruleForm" :model="form" :inline="true">
          <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
            <el-input
              v-model="form.username"
              :placeholder="$t('operatManage.ELM.usernameInfo')"
            />
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
          >
            <el-select
              v-model="form.ownedSystem"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.one')" value="one" />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.operationType')"
            prop="operationType"
          >
            <el-select
              v-model="form.operationType"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.add')" value="add" />
              <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
              <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
              <el-option :label="$t('operatManage.ELM.query')" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('operatManage.ELM.to')"
              :start-placeholder="$t('operatManage.ELM.startDate')"
              :end-placeholder="$t('operatManage.ELM.endDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
            <el-input v-model="form.requestIp" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit"
              ><i class="el-icon-search"></i> &nbsp;{{
                $t("operatManage.ELM.search")
              }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')"
              ><i class="el-icon-delete"></i>&nbsp;{{
                $t("operatManage.ELM.reset")
              }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe style="width: 100%" height="99%">
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="username"
            :label="$t('operatManage.ELM.username')"
          />
          <el-table-column
            align="center"
            prop="ip"
            :label="$t('operatManage.ELM.ip')"
          />
          <el-table-column
            align="center"
            prop="ownedSystem"
            :label="$t('operatManage.ELM.ownedSystem')"
          />
          <el-table-column
            align="center"
            prop="largeModuleName"
            :label="$t('operatManage.ELM.largeModuleName')"
          />
          <el-table-column
            align="center"
            prop="smallModuleName"
            :label="$t('operatManage.ELM.smallModuleName')"
          />
          <el-table-column
            align="center"
            prop="resourceName"
            :label="$t('operatManage.ELM.resourceName')"
          />
          <el-table-column
            align="center"
            prop="date"
            :label="$t('operatManage.ELM.date')"
          />
          <el-table-column
            align="center"
            prop="operationType"
            :label="$t('operatManage.ELM.operationType')"
          />
        </el-table>
        <div style="margin-top: 40px" 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>
      </div>
    </div>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
        },
        tableData: [
          {
            username: "管理员",
            ip: "221.182.31.12",
            date: "2022-08-05",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
        ],
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} æ¡`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    created() {},
  };
  </script>
  <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;
    }
    .inquire {
      height: 110px;
      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;
      }
    }
    .table_box {
      height: 65%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
    .text-center {
      text-align: center;
    }
  }
  </style>
  

 src/views/userManage/roleManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,308 @@

<template>
    <div class="logLog_box">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.eventlogManage')}`,
        ]"
      ></My-bread>
      <el-divider />
      <div class="inquire">
        <el-form ref="ruleForm" :model="form" :inline="true">
          <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
            <el-input
              v-model="form.username"
              :placeholder="$t('operatManage.ELM.usernameInfo')"
            />
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
          >
            <el-select
              v-model="form.ownedSystem"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.one')" value="one" />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.operationType')"
            prop="operationType"
          >
            <el-select
              v-model="form.operationType"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.add')" value="add" />
              <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
              <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
              <el-option :label="$t('operatManage.ELM.query')" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('operatManage.ELM.to')"
              :start-placeholder="$t('operatManage.ELM.startDate')"
              :end-placeholder="$t('operatManage.ELM.endDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
            <el-input v-model="form.requestIp" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit"
              ><i class="el-icon-search"></i> &nbsp;{{
                $t("operatManage.ELM.search")
              }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')"
              ><i class="el-icon-delete"></i>&nbsp;{{
                $t("operatManage.ELM.reset")
              }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe style="width: 100%" height="99%">
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="username"
            :label="$t('operatManage.ELM.username')"
          />
          <el-table-column
            align="center"
            prop="ip"
            :label="$t('operatManage.ELM.ip')"
          />
          <el-table-column
            align="center"
            prop="ownedSystem"
            :label="$t('operatManage.ELM.ownedSystem')"
          />
          <el-table-column
            align="center"
            prop="largeModuleName"
            :label="$t('operatManage.ELM.largeModuleName')"
          />
          <el-table-column
            align="center"
            prop="smallModuleName"
            :label="$t('operatManage.ELM.smallModuleName')"
          />
          <el-table-column
            align="center"
            prop="resourceName"
            :label="$t('operatManage.ELM.resourceName')"
          />
          <el-table-column
            align="center"
            prop="date"
            :label="$t('operatManage.ELM.date')"
          />
          <el-table-column
            align="center"
            prop="operationType"
            :label="$t('operatManage.ELM.operationType')"
          />
        </el-table>
        <div style="margin-top: 40px" 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>
      </div>
    </div>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
        },
        tableData: [
          {
            username: "管理员",
            ip: "221.182.31.12",
            date: "2022-08-05",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
        ],
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} æ¡`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    created() {},
  };
  </script>
  <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;
    }
    .inquire {
      height: 110px;
      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;
      }
    }
    .table_box {
      height: 65%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
    .text-center {
      text-align: center;
    }
  }
  </style>
  

 src/views/userManage/userAuditing.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,307 @@
<template>
    <div class="logLog_box">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.eventlogManage')}`,
        ]"
      ></My-bread>
      <el-divider />
      <div class="inquire">
        <el-form ref="ruleForm" :model="form" :inline="true">
          <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
            <el-input
              v-model="form.username"
              :placeholder="$t('operatManage.ELM.usernameInfo')"
            />
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
          >
            <el-select
              v-model="form.ownedSystem"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.one')" value="one" />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.operationType')"
            prop="operationType"
          >
            <el-select
              v-model="form.operationType"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.add')" value="add" />
              <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
              <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
              <el-option :label="$t('operatManage.ELM.query')" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('operatManage.ELM.to')"
              :start-placeholder="$t('operatManage.ELM.startDate')"
              :end-placeholder="$t('operatManage.ELM.endDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
            <el-input v-model="form.requestIp" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit"
              ><i class="el-icon-search"></i> &nbsp;{{
                $t("operatManage.ELM.search")
              }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')"
              ><i class="el-icon-delete"></i>&nbsp;{{
                $t("operatManage.ELM.reset")
              }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe style="width: 100%" height="99%">
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="username"
            :label="$t('operatManage.ELM.username')"
          />
          <el-table-column
            align="center"
            prop="ip"
            :label="$t('operatManage.ELM.ip')"
          />
          <el-table-column
            align="center"
            prop="ownedSystem"
            :label="$t('operatManage.ELM.ownedSystem')"
          />
          <el-table-column
            align="center"
            prop="largeModuleName"
            :label="$t('operatManage.ELM.largeModuleName')"
          />
          <el-table-column
            align="center"
            prop="smallModuleName"
            :label="$t('operatManage.ELM.smallModuleName')"
          />
          <el-table-column
            align="center"
            prop="resourceName"
            :label="$t('operatManage.ELM.resourceName')"
          />
          <el-table-column
            align="center"
            prop="date"
            :label="$t('operatManage.ELM.date')"
          />
          <el-table-column
            align="center"
            prop="operationType"
            :label="$t('operatManage.ELM.operationType')"
          />
        </el-table>
        <div style="margin-top: 40px" 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>
      </div>
    </div>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
        },
        tableData: [
          {
            username: "管理员",
            ip: "221.182.31.12",
            date: "2022-08-05",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
        ],
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} æ¡`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    created() {},
  };
  </script>
  <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;
    }
    .inquire {
      height: 110px;
      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;
      }
    }
    .table_box {
      height: 65%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
    .text-center {
      text-align: center;
    }
  }
  </style>
  

 src/views/userManage/userInfoManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,307 @@
<template>
    <div class="logLog_box">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.eventlogManage')}`,
        ]"
      ></My-bread>
      <el-divider />
      <div class="inquire">
        <el-form ref="ruleForm" :model="form" :inline="true">
          <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
            <el-input
              v-model="form.username"
              :placeholder="$t('operatManage.ELM.usernameInfo')"
            />
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
          >
            <el-select
              v-model="form.ownedSystem"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.one')" value="one" />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.operationType')"
            prop="operationType"
          >
            <el-select
              v-model="form.operationType"
              :placeholder="$t('operatManage.ELM.please')"
            >
              <el-option :label="$t('operatManage.ELM.all')" value="all" />
              <el-option :label="$t('operatManage.ELM.add')" value="add" />
              <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
              <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
              <el-option :label="$t('operatManage.ELM.query')" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('operatManage.ELM.to')"
              :start-placeholder="$t('operatManage.ELM.startDate')"
              :end-placeholder="$t('operatManage.ELM.endDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
            <el-input v-model="form.requestIp" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit"
              ><i class="el-icon-search"></i> &nbsp;{{
                $t("operatManage.ELM.search")
              }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')"
              ><i class="el-icon-delete"></i>&nbsp;{{
                $t("operatManage.ELM.reset")
              }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe style="width: 100%" height="99%">
          <el-table-column
            align="center"
            type="index"
            :label="$t('operatManage.ELM.index')"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="username"
            :label="$t('operatManage.ELM.username')"
          />
          <el-table-column
            align="center"
            prop="ip"
            :label="$t('operatManage.ELM.ip')"
          />
          <el-table-column
            align="center"
            prop="ownedSystem"
            :label="$t('operatManage.ELM.ownedSystem')"
          />
          <el-table-column
            align="center"
            prop="largeModuleName"
            :label="$t('operatManage.ELM.largeModuleName')"
          />
          <el-table-column
            align="center"
            prop="smallModuleName"
            :label="$t('operatManage.ELM.smallModuleName')"
          />
          <el-table-column
            align="center"
            prop="resourceName"
            :label="$t('operatManage.ELM.resourceName')"
          />
          <el-table-column
            align="center"
            prop="date"
            :label="$t('operatManage.ELM.date')"
          />
          <el-table-column
            align="center"
            prop="operationType"
            :label="$t('operatManage.ELM.operationType')"
          />
        </el-table>
        <div style="margin-top: 40px" 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>
      </div>
    </div>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
        },
        tableData: [
          {
            username: "管理员",
            ip: "221.182.31.12",
            date: "2022-08-05",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
          {
            date: "2022-08-05",
            username: "管理员",
            ownedSystem: "",
            largeModuleName: "运维监控",
            smallModuleName: "资源操作日志",
            resourceName: "",
            operationType: "查询",
            ip: "221.182.31.12",
          },
        ],
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} æ¡`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    created() {},
  };
  </script>
  <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;
    }
    .inquire {
      height: 110px;
      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;
      }
    }
    .table_box {
      height: 65%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
    .text-center {
      text-align: center;
    }
  }
  </style>