调整运维管理部分页面格式

王旭

2023-02-16 c40e3de17653a10a06ead765813783a5614a32ce

 src/views/maintenance/logLog.vue

@@ -1,124 +1,106 @@
<template>
  <div class="logLog_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.logLog')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">

      <el-form
        :inline="true"
        ref="sizeForm"
        :model="sizeForm"
      >
        <el-form-item
          prop="uname"
          :label="$t('operatManage.operationLogObj.username')"
        >
          <el-input
          style="width:200px"
            v-model="sizeForm.uname"
            :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          prop="type"
          :label="$t('operatManage.operationLogObj.operationType')"
        >
          <el-select
          style="width:200px"
           :popper-append-to-body="false"
            v-model="sizeForm.type"
            :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
          >
            <el-option
              :label="$t('loglog.login')"
              value="1"
            />
            <el-option
              :label="$t('loglog.checkout')"
              value="2"
            />
            <el-option
              :label="$t('loglog.logout')"
              value="3"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="start"
          :label="$t('operatManage.operationLogObj.startTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.start"
            style="width:200px"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          prop="end"
          :label="$t('operatManage.operationLogObj.endTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.end"
            style="width:200px"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="float:right">
          <el-button
            @click="onSubmit"
            icon="el-icon-search"
            size="small"
            type="primary"
          >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
          <el-button
            @click="onEmpty('sizeForm')"
            icon="el-icon-delete"
            type="info"
            size="small"
          >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
        </el-form-item>
    <div class="inquire subpage_Div" ref="container">
      <el-form :inline="true" ref="sizeForm" :model="sizeForm">
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('operatManage.operationLogObj.username')"
            >
              <el-input
                style="width: 200px"
                v-model="sizeForm.uname"
                :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
              />
            </el-form-item>
            <el-form-item
              prop="type"
              :label="$t('operatManage.operationLogObj.operationType')"
            >
              <el-select
                style="width: 200px"
                :popper-append-to-body="false"
                v-model="sizeForm.type"
                :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
              >
                <el-option :label="$t('loglog.login')" value="1" />
                <el-option :label="$t('loglog.checkout')" value="2" />
                <el-option :label="$t('loglog.logout')" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="start"
              :label="$t('operatManage.operationLogObj.startTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.start"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              prop="end"
              :label="$t('operatManage.operationLogObj.endTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.end"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button
                @click="onSubmit"
                icon="el-icon-search"
                size="small"
                type="primary"
                >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
              >
              <el-button
                @click="onEmpty('sizeForm')"
                icon="el-icon-delete"
                type="info"
                size="small"
                >{{ $t("operatManage.operationLogObj.empty") }}</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格显示 -->
    <div class="table_box subpage_Div">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="80%"
      >
    <div class="table_box subpage_Div" :style="styleVar">
      <el-table :data="tableData" style="width: 100%" height="calc(100% - 57px)">
        <el-table-column
          width="150"
          type="index"
          :label="$t('loglog.serialnumber')"
        />
        <el-table-column
          prop="uname"
          :label="$t('loglog.username')"
        />
        <el-table-column prop="uname" :label="$t('loglog.username')" />
        <el-table-column
          prop="appid"
          :label="$t('loglog.applicationProgram')"
          :formatter="formatAppid"
        />
        <el-table-column
          prop="ip"
          :label="$t('loglog.ipadress')"
        />
        <el-table-column
          prop="descr"
          :label="$t('loglog.describe')"
        />
        <el-table-column prop="ip" :label="$t('loglog.ipadress')" />
        <el-table-column prop="descr" :label="$t('loglog.describe')" />
        <el-table-column
          prop="optime"
          :formatter="formatData"
@@ -136,10 +118,7 @@
        />
      </el-table>
      <!-- 分页 -->
      <div
        style="margin-top: 40px"
        class="pagination_box"
      >
      <div style="margin-top: 25px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -179,9 +158,31 @@
        pageSize: 10,
      },
      count: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    //格式化列表
    formatType(row, column) {
      let data;
@@ -282,6 +283,10 @@
      this.count = data.count;
    },
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
@@ -303,22 +308,18 @@
  padding: 1%;

  .inquire {
    padding: 10px;
    margin-top: 10px;
   
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 10px;
    /deep/.el-form-item {
      margin-bottom: 10px;
    margin-bottom: 20px;
    .el-form-item {
      margin-bottom: 5px;
    }
  }
  .table_box {
    padding: 10px;
    border-radius: 5px;
    overflow: auto;
    height: 60%;
  }

  .text-center {
    text-align: center;
  }