表格修改

584911253@qq.com

2023-03-02 8bb00665765e8348aeb3a6e799069287e503e1ab

 src/views/maintenance/downlog.vue

@@ -5,98 +5,125 @@
        `${$t('operatManage.DownloadLog')}`,
      ]"></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">
    <div
      class="inquire subpage_Div"
      ref="container"
    >
      <el-form
        :inline="true"
        ref="sizeForm"
        :model="sizeForm"
      >
        <el-form-item
          prop="uname"
          :label="$t('operatManage.operationLogObj.username')"
        >
          <el-input
            v-model="sizeForm.uname"
            :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          prop="type"
          :label="$t('operatManage.operationLogObj.operationType')"
        >
          <el-select
            :popper-append-to-body="false"
            v-model="sizeForm.type"
            :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
          >
            <el-option
              :label="$t('downlog.type1')"
              value="1"
            />
            <el-option
              :label="$t('downlog.type2')"
              value="2"
            />
            <el-option
              :label="$t('downlog.type3')"
              value="3"
            />
            <el-option
              :label="$t('downlog.type4')"
              value="4"
            />
          </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: 100%"
            type="datetime"
            :popper-class="popperclass"
            :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: 100%"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            @click="onSubmit"
            icon="el-icon-search"
            size="small"
            type="primary"
          >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
          <el-button
            @click="resAllTable"
            icon="el-icon-delete"
            type="info"
            size="small"
          >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
        </el-form-item>
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('operatManage.operationLogObj.username')"
            >
              <el-input
                style="width: 200px"
                size="small"
                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"
                size="small"
                :popper-append-to-body="false"
                v-model="sizeForm.type"
                :placeholder="$t('operatManage.operationLogObj.operationTypeHolder')"
              >
                <el-option
                  :label="$t('downlog.type1')"
                  value="1"
                />
                <el-option
                  :label="$t('downlog.type2')"
                  value="2"
                />
                <el-option
                  :label="$t('downlog.type3')"
                  value="3"
                />
                <el-option
                  :label="$t('downlog.type4')"
                  value="4"
                />
                  <el-option
                  :label="$t('downlog.type5')"
                  value="5"
                />
                  <el-option
                  :label="$t('downlog.type6')"
                  value="6"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="start"
              :label="$t('operatManage.operationLogObj.startTime')"
            >
              <el-date-picker
                  size="small"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.start"
                style="width: 200px"
                type="datetime"
                :popper-class="popperclass"
                :placeholder="$t('operatManage.operationLogObj.startTimeHolder')"
              ></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"
                size="small"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.endTimeHolder')"
              >
              </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="resAllTable"
                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">
    <div class="dividing-line"></div>
    <div
      class="table_box subpage_Div"
      :style="styleVar"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
        height="85%"
        border
        height="calc(100% - 45px)"
      >
        <el-table-column
          align="center"
@@ -147,7 +174,7 @@
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listData.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
@@ -160,9 +187,7 @@

<script>
import MyBread from "../../components/MyBread.vue";
import {
  downlog_selectByPageAndCount
} from "../../api/api";
import { downlog_selectByPageAndCount } from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -171,7 +196,7 @@

  data() {
    return {
      popperclass: '',
      popperclass: "",
      sizeForm: {
        start: null,
        end: null,
@@ -185,12 +210,31 @@
        start: null,
        end: null,
        uname: null,
        type: null
        type: null,
      },
      count: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  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)`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 30}px)`;
      });
    },
    formatSize(row, column) {
      let data = row[column.property];
      if (data == null) {
@@ -199,9 +243,9 @@

      if (data > 1024) {
        var val = data / 1024;
        return val + "GB"
        return val + "GB";
      } else {
        return data + "MB"
        return data + "MB";
      }
    },
    formatType(row, column) {
@@ -211,19 +255,25 @@
      }
      switch (data) {
        case 1:
          return 'Shp文件';
          return "Shp文件";
          break;
        case 2:
          return '专题图';
          return "专题图";
          break;
        case 3:
          return '元数据';
          return "源数据";
          break;
        case 4:
          return '业务数据';
          return "业务数据";
          break;
        case 5:
          return "管道分析";
          break;
        case 6:
          return "统计报告";
          break;
        default:
          return '未知数据';
          return "未知数据";
          break;
      }
    },
@@ -241,7 +291,11 @@
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y + "-" + this.add0(m) + "-" + this.add0(d) +
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
@@ -265,21 +319,21 @@
        start: null,
        end: null,
        uname: null,
        type: null
      }
        type: null,
      };
      this.sizeForm = {
        start: null,
        end: null,
        uname: null,
        type: null,
      }
      };
      this.getAllData();
    },
    onSubmit() {
      this.listData.end = this.sizeForm.end;
      this.listData.start = this.sizeForm.start;
      this.listData.type = this.sizeForm.type;
      this.listData.uname = this.sizeForm.uname
      this.listData.uname = this.sizeForm.uname;
      this.getAllData();
    },

@@ -299,7 +353,15 @@
      }
      this.tableData = data.result;
      this.count = data.count;
    }
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    this.getAllData();
@@ -311,28 +373,22 @@
.logLog_box {
  height: 98%;
  width: 98%;
  padding: 1%;

  padding: 0.5% 1%;
  .el-input {
    width: 300px;
  }
  .inquire {
    padding: 10px;
    margin-top: 20px;
    padding: 0 8px;
    //margin-top: 20px;

    border-radius: 5px;

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

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