1

lxl

2022-09-21 34b348ecbdaa67d3e419ca0c80e209e6f77022e1

1

 src/assets/lang/en.js

@@ -11,6 +11,8 @@
    selectdate: 'Please select a date',
    pleaseInput: 'Please input',
    update: 'Modify',
    append: 'Append',
    operate: 'Operate',
  },
  dataManage: {
    dataManage: 'Data Manage',
@@ -38,11 +40,11 @@
      search: 'search',
      reset: 'reset',
      all: 'all',
      one: "A picture",
      add: "add",
      delete: "delete",
      edit: "edit",
      query: "query",
      one: 'A picture',
      add: 'add',
      delete: 'delete',
      edit: 'edit',
      query: 'query',
      please: 'please choose',
      usernameInfo: 'username,Chinese name,or phonetic initial',
      index: 'index',
@@ -60,41 +62,42 @@
    operationMonitoring: 'Operation Monitoring',
    systemMonitoring: 'System Monitoring',
    systemMonitoringObj: {
      totalMemory: "totalMemory",
      haveBeenUsed: "haveBeenUsed",
      usageRate: "usageRate",
      systemMemory: "systemMemory",
      CPUusage: "CPUusage",
      CPUsystemUsage: "CPUsystemUsage",
      numberOfExceptions: "numberOfExceptions",
      numberOfAbnormalSystems: "numberOfAbnormalSystems",
      serviceAarm: "serviceAarm",
      serviceResourceAlarm: "serviceResourceAlarm",
      serviceResourceStatus: "serviceResourceStatus",
      userOperationBehavior: "userOperationBehavior",
      resourceInvocationStatus: "resourceInvocationStatus",
      resourceCallStatistics: "resourceCallStatistics",
      inquire: "inquire",
      EnterTheUserName: "Enter The UserName",
      EnterTheResourceID: "Enter The Resource ID",
      EnterTheUserChineseName: "Enter the user name, Chinese name or Pinyin first letter query",
      onlinePersonnel: "onlinePersonnel",
      userID: "userID",
      username: "username",
      onlineTime: "onlineTime",
      abnormalResources: "abnormalResources",
      resourceID: "resourceID",
      resourceName: "resourceName",
      resourceState: "resourceState",
      abnormaltime: "abnormaltime",
      totalMemory: 'totalMemory',
      haveBeenUsed: 'haveBeenUsed',
      usageRate: 'usageRate',
      systemMemory: 'systemMemory',
      CPUusage: 'CPUusage',
      CPUsystemUsage: 'CPUsystemUsage',
      numberOfExceptions: 'numberOfExceptions',
      numberOfAbnormalSystems: 'numberOfAbnormalSystems',
      serviceAarm: 'serviceAarm',
      serviceResourceAlarm: 'serviceResourceAlarm',
      serviceResourceStatus: 'serviceResourceStatus',
      userOperationBehavior: 'userOperationBehavior',
      resourceInvocationStatus: 'resourceInvocationStatus',
      resourceCallStatistics: 'resourceCallStatistics',
      inquire: 'inquire',
      EnterTheUserName: 'Enter The UserName',
      EnterTheResourceID: 'Enter The Resource ID',
      EnterTheUserChineseName:
        'Enter the user name, Chinese name or Pinyin first letter query',
      onlinePersonnel: 'onlinePersonnel',
      userID: 'userID',
      username: 'username',
      onlineTime: 'onlineTime',
      abnormalResources: 'abnormalResources',
      resourceID: 'resourceID',
      resourceName: 'resourceName',
      resourceState: 'resourceState',
      abnormaltime: 'abnormaltime',
    },
    logLog: 'ConLog',
    operationLog: 'Operation Log',
    databaseMonitoring: 'Database Monitoring',
    blackwhiteList: "Black/White List",
    blackwhiteList: 'Black/White List',
    BWL: {
      blackList: "blackList",
      whiteList: "whiteList",
      blackList: 'blackList',
      whiteList: 'whiteList',
      blackListIP: 'blackListIP',
      whiteListIP: 'whiteListIP',
      listIPInfo: 'listIPInfo',
@@ -110,7 +113,7 @@
      change: 'change',
      search: 'search',
      reset: 'reset',
      index: "index",
      index: 'index',
      serviceName: 'serviceName',
      accessSourceSystem: 'accessSourceSystem',
      IPRequest: 'IPRequest',
@@ -119,9 +122,9 @@
      serviceSystemRequest: 'serviceSystemRequest',
      blackListStatus: 'blackListStatus',
      operate: 'operate',
      effectiveDate: "effectiveDate",
      requestUser: "requestUser",
      tokenInfo: "tokenInfo",
      effectiveDate: 'effectiveDate',
      requestUser: 'requestUser',
      tokenInfo: 'tokenInfo',
      whiteListStatus: 'whiteListStatus',
    },
    tokentool: 'Token Tool',
@@ -265,17 +268,46 @@
  userManage: {
    userManage: 'User Manage',
    userInfoManage: 'User Information Manage',
    userInfoObj: {
      userStatus: 'User Status',
      all: 'All',
      normal: 'Normal',
      disable: 'Disable',
      delete: 'Delete',
      apply: 'Apply',
      rejection: 'Rejection',
      companyName: 'Company name',
      userexport: 'Excel user export',
      userinput: 'Excel user input',
      chineseName: 'Chinese Name [User Name]',
      affiliatedUnit: 'Affiliated unit [on-the-job]',
      mobileNumber: 'Mobile number [receive SMS]',
      state: 'State',
      post: 'Post',
      addtime: 'Add Time',
    },
    orgManage: 'Org Manage',
    userAuditing: 'User Auditing',
    UA: {
      userName: "userName",
      userState: "userState",
      unitName: "unitName",
      pass: "pass",
      deny: "deny",
      query: "query",
      reset: "reset",
      ChineseName: "ChineseName【username】"
      userName: "User Name",
      usernameInfo: '',
      all: "all",
      approvalPassed: "The Approval Passed",
      disable: "The disabled",
      delete: "The deleted",
      pendingReview: "Pending Review",
      auditFailed: "The Audit Failed",
      userState: "User State",
      unitName: "Unit Name",
      pass: "Pass",
      deny: "Deny",
      query: "Query",
      reset: "Reset",
      ChineseName: "ChineseName【username】",
      affiliatedUnit: 'Affiliated Unit',
      auditUser: 'Audit User',
      auditDate: 'Audit Date',
      state: 'State',
    },
    roleManage: 'Role Manage',
    RM: {
@@ -288,7 +320,6 @@
      Permission: "Permission",
      resourcePermission: "Resource Permission",
      groupSetting: "groupSetting",
      operate: 'operate',
      one: 'one',
    },
    groupManage: 'groupManage',
@@ -302,11 +333,9 @@
      applicationName: "applicationName",
      userSetting: "userSetting",
      roleSetting: "roleSetting",
      operate: 'operate',
      one: 'A picture',
    },
  },

};

export default en;

 src/assets/lang/zh.js

@@ -11,6 +11,8 @@
    selectdate: '请选择日期',
    pleaseInput: '请输入',
    update: '修改',
    append: '新增',
    operate: '操作',
  },
  dataManage: {
    dataManage: '数据管理',
@@ -38,11 +40,11 @@
      search: '搜索',
      reset: '重置',
      all: '全部',
      one: "一张图",
      add: "新增",
      delete: "删除",
      edit: "修改",
      query: "查询",
      one: '一张图',
      add: '新增',
      delete: '删除',
      edit: '修改',
      query: '查询',
      please: '请选择',
      usernameInfo: '输入用户名、中文名或拼音首字母查询',
      index: '序号',
@@ -60,41 +62,41 @@
    operationMonitoring: '运行监控',
    systemMonitoring: '服务资源实时监控',
    systemMonitoringObj: {
      totalMemory: "总内存",
      haveBeenUsed: "已使用",
      usageRate: "使用率",
      systemMemory: "系统内存",
      CPUusage: "CPU用量",
      CPUsystemUsage: "cpu系统用量",
      numberOfExceptions: "异常个数",
      numberOfAbnormalSystems: "异常系统个数",
      serviceAarm: "服务告警",
      serviceResourceAlarm: "服务资源告警",
      serviceResourceStatus: "服务资源状态",
      userOperationBehavior: "用户操作行为",
      resourceInvocationStatus: "资源调用状态",
      resourceCallStatistics: "资源调用统计",
      inquire: "查询",
      EnterTheUserName: "输入用户名称查询",
      EnterTheResourceID: "输入资源id",
      EnterTheUserChineseName: "输入用户名，中文名或者拼音首字母查询",
      onlinePersonnel: "在线人员",
      userID: "用户ID",
      username: "用户名",
      onlineTime: "上线时间",
      abnormalResources: "异常资源",
      resourceID: "资源ID",
      resourceName: "资源名称",
      resourceState: "资源状态",
      abnormaltime: "异常时间",
      totalMemory: '总内存',
      haveBeenUsed: '已使用',
      usageRate: '使用率',
      systemMemory: '系统内存',
      CPUusage: 'CPU用量',
      CPUsystemUsage: 'cpu系统用量',
      numberOfExceptions: '异常个数',
      numberOfAbnormalSystems: '异常系统个数',
      serviceAarm: '服务告警',
      serviceResourceAlarm: '服务资源告警',
      serviceResourceStatus: '服务资源状态',
      userOperationBehavior: '用户操作行为',
      resourceInvocationStatus: '资源调用状态',
      resourceCallStatistics: '资源调用统计',
      inquire: '查询',
      EnterTheUserName: '输入用户名称查询',
      EnterTheResourceID: '输入资源id',
      EnterTheUserChineseName: '输入用户名，中文名或者拼音首字母查询',
      onlinePersonnel: '在线人员',
      userID: '用户ID',
      username: '用户名',
      onlineTime: '上线时间',
      abnormalResources: '异常资源',
      resourceID: '资源ID',
      resourceName: '资源名称',
      resourceState: '资源状态',
      abnormaltime: '异常时间',
    },
    logLog: '登录日志',
    operationLog: '操作日志',
    databaseMonitoring: '数据库监控',
    blackwhiteList: "黑/白名单",
    blackwhiteList: '黑/白名单',
    BWL: {
      blackList: "黑名单",
      whiteList: "白名单",
      blackList: '黑名单',
      whiteList: '白名单',
      blackListIP: '黑名单IP',
      whiteListIP: '白名单IP',
      listIPInfo: '输入IP查询',
@@ -110,7 +112,7 @@
      change: '修改',
      search: '搜索',
      reset: '重置',
      index: "序号",
      index: '序号',
      serviceName: '服务名称',
      accessSourceSystem: '访问来源系统',
      IPRequest: '申请IP',
@@ -119,9 +121,9 @@
      serviceSystemRequest: '申请服务系统',
      blackListStatus: '黑名单状态',
      operate: '操作',
      effectiveDate: "生效日期",
      requestUser: "申请人",
      tokenInfo: "token信息",
      effectiveDate: '生效日期',
      requestUser: '申请人',
      tokenInfo: 'token信息',
      whiteListStatus: '白名单状态',
    },
    tokentool: 'Token工具',
@@ -265,48 +267,77 @@
  userManage: {
    userManage: '用户管理',
    userInfoManage: '用户信息管理',
    userInfoObj: {
      userStatus: '用户状态',
      all: '全部',
      normal: '正常',
      disable: '禁用',
      delete: '删除',
      apply: '申请',
      rejection: '拒批',
      companyName: '单位名称',
      userexport: 'Excel用户导出',
      userinput: 'Excel用户导入',
      chineseName: '中文名[用户名]',
      affiliatedUnit: '所属单位[在职]',
      mobileNumber: '手机号[接收短信]',
      state: '状态',
      post: '职务',
      addtime: '添加时间',
    },
    orgManage: '组织机构管理',
    userAuditing: '用户审核',
    UA: {
      userName: "用户名称",
      usernameInfo: '输入用户名、中文名或拼音首字母查询',
      all: "全部",
      approvalPassed: "审核已通过",
      disable: "禁用",
      delete: "删除",
      pendingReview: "待审核",
      auditFailed: "审核不通过",
      userState: "用户状态",
      unitName: "单位名称",
      pass: "通过",
      deny: "不通过",
      query: "查询",
      reset: "清除",
      ChineseName:"中文名【用户名】"
      ChineseName: "中文名【用户名】",
      affiliatedUnit: '所属单位（在职）',
      auditUser: '审核人',
      auditDate: '审核时间',
      state: '状态',
      operate: '操作',
    },
    roleManage: '角色管理',
    RM: {
      roleName: "角色名称",
      roleName: '角色名称',
      ownedSystem: '所属系统',
      add: '新增',
      query: "查询",
      reset: "清除",
      index: "序号",
      Permission: "权限",
      resourcePermission: "资源权限",
      groupSetting: "群组设置",
      query: '查询',
      reset: '清除',
      index: '序号',
      Permission: '权限',
      resourcePermission: '资源权限',
      groupSetting: '群组设置',
      operate: '操作',
      one: '一张图',
    },
    groupManage: '群组管理',
    GM: {
      groupName: "群组名称",
      groupName: '群组名称',
      ownedSystem: '所属系统',
      add: '新增',
      query: "查询",
      reset: "清除",
      index: "序号",
      applicationName: "应用系统名称",
      userSetting: "用户设置",
      roleSetting: "角色设置",
      query: '查询',
      reset: '清除',
      index: '序号',
      applicationName: '应用系统名称',
      userSetting: '用户设置',
      roleSetting: '角色设置',
      operate: '操作',
      one: '一张图',
    },
  },

};

export default zh;

 src/views/userManage/groupManage.vue

@@ -75,7 +75,7 @@
        />
        <el-table-column
          fixed="right"
          :label="$t('userManage.GM.operate')"
          :label="$t('common.operate')"
          width="300"
        >
          <template #default>

 src/views/userManage/roleManage.vue

@@ -80,7 +80,7 @@
        />
        <el-table-column
          fixed="right"
          :label="$t('userManage.RM.operate')"
          :label="$t('common.operate')"
          width="300"
        >
          <template #default>

 src/views/userManage/userAuditing.vue

@@ -1,307 +1,205 @@
<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"
  <div class="logLog_box">
    <My-bread
      :list="[
        `${$t('userManage.userManage')}`,
        `${$t('userManage.userAuditing')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire">
      <el-form ref="ruleForm" :model="form" :inline="true">
        <el-form-item :label="$t('userManage.UA.userName')" prop="username">
          <el-input
            v-model="form.username"
            :placeholder="$t('userManage.UA.usernameInfo')"
          />
        </el-form-item>
        <el-form-item :label="$t('userManage.UA.userState')" prop="userState">
          <el-select v-model="form.userState">
            <el-option :label="$t('userManage.UA.all')" value="1" />
            <el-option :label="$t('userManage.UA.approvalPassed')" value="2" />
            <el-option :label="$t('userManage.UA.disable')" value="3" />
            <el-option :label="$t('userManage.UA.delete')" value="4" />
            <el-option :label="$t('userManage.UA.pendingReview')" value="5" />
            <el-option :label="$t('userManage.UA.auditFailed')" value="6" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('userManage.UA.unitName')" prop="unitName">
          <el-input v-model="form.unitName" />
        </el-form-item>
        <br />
        <el-form-item>
          <el-button @click="onSubmit" type="success">{{
            $t("userManage.UA.pass")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" type="danger">
            {{ $t("userManage.UA.deny") }}</el-button
          >
            <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-form-item>
        <el-form-item>
          <el-button @click="onSubmit"
            ><i class="el-icon-search"></i> &nbsp;{{
              $t("userManage.UA.query")
            }}</el-button
          >
            <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-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')"
            ><i class="el-icon-delete"></i>&nbsp;{{
              $t("userManage.UA.reset")
            }}</el-button
          >
          </el-pagination>
        </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        height="99%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column
          align="center"
          prop="username"
          :label="$t('userManage.UA.ChineseName')"
        />
        <el-table-column
          align="center"
          prop="affiliatedUnit"
          :label="$t('userManage.UA.affiliatedUnit')"
        />
        <el-table-column
          align="center"
          prop="state"
          :label="$t('userManage.UA.state')"
        />
        <el-table-column
          align="center"
          prop="auditUser"
          :label="$t('userManage.UA.auditUser')"
        />
        <el-table-column
          align="center"
          prop="auditDate"
          :label="$t('userManage.UA.auditDate')"
        />

        <el-table-column
          fixed="right"
          :label="$t('common.operate')"
          width="300"
        >
          <template #default>
            <el-button type="warning" size="small">{{
              $t("common.update")
            }}</el-button>
            <el-button type="danger" size="small">{{
              $t("common.delete")
            }}</el-button>
          </template>
        </el-table-column>
      </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="0"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  </div>
</template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
import MyBread from "../../components/MyBread.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },

  data() {
    return {
      currentPage: 1,
      form: {
        username: "",
        state: "",
        requestIp: "",
        userState: "",
        date: "",
      },
      multipleSelection: [],
      tableData: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
  
    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",
          },
        ],
      };
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    onSubmit() {
      console.log("submit!");
    },
    created() {},
  };
  </script>
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {},
};
</script>
  <style lang="less" scoped>
  //@import url(); 引入公共css类
  .logLog_box {
    background: rgb(240, 242, 245);
    border-radius: 10px;
    height: 100%;
//@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;
    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;
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
    .el-form-item {
      margin: 7px;
    }
  }
  </style>
  .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

@@ -1,307 +1,341 @@
<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')"
  <div class="logLog_box">
    <My-bread
      :list="[
        `${$t('userManage.userManage')}`,
        `${$t('userManage.userInfoManage')}`,
      ]"
    ></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('userManage.userInfoObj.userStatus')"
          prop="ownedSystem"
        >
          <el-select
            v-model="form.ownedSystem"
            :placeholder="$t('userManage.userInfoObj.userStatus')"
          >
            <el-option :label="$t('userManage.userInfoObj.all')" value="all" />
            <el-option
              :label="$t('userManage.userInfoObj.normal')"
              value="normal"
            />
          </el-form-item>
          <el-form-item
            :label="$t('operatManage.ELM.ownedSystem')"
            prop="ownedSystem"
            <el-option
              :label="$t('userManage.userInfoObj.disable')"
              value="disable"
            />
            <el-option
              :label="$t('userManage.userInfoObj.delete')"
              value="delete"
            />
            <el-option
              :label="$t('userManage.userInfoObj.apply')"
              value="apply"
            />
            <el-option
              :label="$t('userManage.userInfoObj.rejection')"
              value="rejection"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('userManage.userInfoObj.companyName')"
          prop="requestIp"
        >
          <el-input
            v-model="form.requestIp"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="success" size="small"
            ><i class="el-icon-plus"></i>&nbsp;{{
              $t('common.append')
            }}</el-button
          >
            <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-button type="primary" size="small">
            {{ $t('userManage.userInfoObj.userinput') }}</el-button
          >
            <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-button type="primary" size="small">
            {{ $t('userManage.userInfoObj.userexport') }}</el-button
          >
          </el-pagination>
        </div>
        </el-form-item>
        <el-form-item style="margin-left: 60%">
          <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"
          width="220px"
          :label="$t('userManage.userInfoObj.chineseName')"
        />
        <el-table-column
          align="center"
          prop="ip"
          width="220px"
          :label="$t('userManage.userInfoObj.affiliatedUnit')"
        />
        <el-table-column
          align="center"
          prop="ownedSystem"
          width="230px"
          :label="$t('userManage.userInfoObj.mobileNumber')"
        />
        <el-table-column
          align="center"
          prop="largeModuleName"
          :label="$t('userManage.userInfoObj.state')"
        >
          <template scope="scope">
            <el-tag v-if="scope.row.largeModuleName == '正常'" type="success">{{
              scope.row.largeModuleName
            }}</el-tag>
            <el-tag v-if="scope.row.largeModuleName == '异常'" type="danger">{{
              scope.row.largeModuleName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="smallModuleName"
          :label="$t('userManage.userInfoObj.post')"
        />
        <el-table-column
          align="center"
          prop="resourceName"
          :label="$t('userManage.userInfoObj.addtime')"
        />
        <el-table-column
          fixed="right"
          :label="$t('common.operate')"
          width="200"
        >
          <template #default>
            <!-- <el-button type="primary" size="small">修改</el-button> -->

            <el-button 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 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>
  </template>
  
  <script>
  import MyBread from "../../components/MyBread.vue";
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      MyBread,
    },
  
    data() {
      return {
        currentPage: 1,
        form: {
          username: "",
          ownedSystem: "",
          requestIp: "",
          operationType: "",
          date: "",
  </div>
</template>

<script>
import MyBread from '../../components/MyBread.vue';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },

  data() {
    return {
      currentPage: 1,
      form: {
        username: '',
        ownedSystem: 'all',
        requestIp: '',
        operationType: '',
        date: '',
      },
      tableData: [
        {
          username: '管理员',
          ip: '221.182.31.12',
          date: '2022-08-05',
          ownedSystem: '',
          largeModuleName: '正常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
        },
        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",
          },
        ],
      };
        {
          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} 条`);
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log("submit!");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    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;
    onSubmit() {
      console.log('submit!');
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
};
</script>
<style>
/deep/ .el-table__fixed-right {
  height: 100% !important;
}
</style>
<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: 8px;
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }
  }
  </style>
  
  .table_box {
    height: 65%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
  }
  .text-center {
    text-align: center;
  }
}
</style>