ECS5 / ECS5.0Web · Files

<template>
  <div class="interfacel">

    <el-form
      :model="queryConfig"
      :rules="rules"
      ref="queryConfig"
      label-width="100px"
      class="demo-queryConfig"
    >
      <el-row :gutter="10">
        <el-col :span="4">

          <el-form-item :label="$t('logManage.InterfaceName')" prop="name">

            <el-input
              v-model="queryConfig.interfaceName"

              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.InterfaceName')
              "

            ></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="4">

          <el-form-item :label="$t('logManage.sign')" prop="">
            <el-select
              v-model="queryConfig.flag"
              :placeholder="$t('logManage.PleaseSelect') + $t('logManage.sign')"
            >

              <el-option

                v-for="item in optionsFlag"

                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="Url：" prop="">

            <el-input
              v-model="queryConfig.url"
              :placeholder="$t('logManage.PleaseEnter') + 'Url'"
            />

          </el-form-item>
        </el-col>
        <el-col :span="4">

          <el-form-item :label="$t('logManage.RequestMethod')" prop="">

            <el-input
              v-model="queryConfig.method"

              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.RequestMethod')
              "

            />

          </el-form-item>
        </el-col>
        <el-col :span="4">

          <el-form-item
            :label="$t('logManage.timeConsuming')"
            prop="totalMilliseconds"
          >

            <el-input
              v-model="queryConfig.totalMilliseconds"

              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.timeConsuming')
              "

            />

          </el-form-item>
        </el-col>
        <el-col :span="4">

          <el-form-item :label="$t('logManage.request')" prop="">
            <el-input
              v-model="queryConfig.request"
              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.request')
              "
            />

          </el-form-item>
        </el-col>
        <el-col :span="3.5">

          <el-form-item :label="$t('logManage.reply')" prop="">

            <el-input
              v-model="queryConfig.response"

              :placeholder="$t('logManage.PleaseEnter') + $t('logManage.reply')"

            />

          </el-form-item>
        </el-col>
        <el-col :span="3.5">

          <el-form-item :label="$t('logManage.startTime')" prop="">

            <el-date-picker
              v-model="form.startTime"
              type="datetime"

              :placeholder="
                $t('logManage.PleaseSelect') + $t('logManage.startTime')
              "

            />

          </el-form-item>
        </el-col>
        <el-col :span="4">

          <el-form-item :label="$t('logManage.endTime')" prop="">

            <el-date-picker
              v-model="form.endTime"
              type="datetime"

              :placeholder="
                $t('logManage.PleaseSelect') + $t('logManage.endTime')
              "

            />

          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="">
            <el-button
              icon="el-icon-search"
              class="T1"
              @click="btnAction('queryConfig')"
              type="primary"

              size="small"

              >{{ $t("logManage.query") }}</el-button

            >

            <el-button class="T1" size="small" @click="details()">{{
              $t("logManage.queryDetails")
            }}</el-button>

            <el-button
              class="T1"
              size="small"
              icon="el-icon-download"
              @click="ExportList()"

              >{{ $t("logManage.export") }}</el-button

            >

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table">

      <el-table
        :data="tableData"

        border

        highlight-current-row

        :height="TableHeight"

        @selection-change="handleSelectionChange"

        @row-click="handleRowClick"
        ref="multipleTable"

        :header-cell-style="{ color: '#000000' }"

        class="custom-table"

      >

        <el-table-column
          type="selection"
          align="center"
          width="55"
        ></el-table-column>

        <el-table-column
          prop="id"
          :label="$t('logManage.internalID')"
          width="100"
        >

        </el-table-column>
        <el-table-column
          prop="interfaceName"

          :label="$t('logManage.InterfaceName')"

          width="180"

          show-overflow

        >
        </el-table-column>

        <el-table-column prop="url" width="180" label="URL" show-overflow>

        </el-table-column>

        <el-table-column prop="method" :label="$t('logManage.RequestMethod')">
        </el-table-column>
        <el-table-column
          prop="totalMilliseconds"
          :label="$t('logManage.timeConsuming')"
        >

        </el-table-column>

        <el-table-column prop="request" :label="$t('logManage.request')">
        </el-table-column>
        <el-table-column
          prop="response"
          :label="$t('logManage.reply')"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="flag" :label="$t('logManage.sign')">
        </el-table-column>
        <el-table-column prop="requestIp" :label="$t('logManage.RequesterIP')">
        </el-table-column>
        <el-table-column prop="remark" :label="$t('logManage.notes')">
        </el-table-column>
        <el-table-column prop="created" :label="$t('logManage.startTime')">
        </el-table-column>
        <el-table-column prop="createdBy" :label="$t('logManage.founder')">

        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination

          style="margin-top: 15px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"

          :current-page="queryConfig.currentPage"

          :page-sizes="[20, 50, 100]"

          :page-size="queryConfig.pageSize"

          layout="total, sizes, prev, pager, next, jumper"

          :total="total"

        />

      </div>
    </div>

    <el-dialog
      :title="$t('logManage.InterfaceLogDetails')"
      :visible.sync="dialogFormVisible"
    >

      <div class="container" v-for="(item, index) in detailsData" :key="index">

        <div class="box">

          <div class="inner-left">{{ $t("logManage.internalID") }}：</div>

          <div class="inner-right">{{ item.id }}</div>
        </div>
        <div class="box">

          <div class="inner-left">{{ $t("logManage.InterfaceName") }}：</div>

          <div class="inner-right">{{ item.interfaceName }}</div>
        </div>
        <div class="box">

          <div class="inner-left">{{ $t("logManage.timeConsuming") }}：</div>

          <div class="inner-right">{{ item.totalMilliseconds }}</div>
        </div>
        <div class="box">

          <div class="inner-left">{{ $t("logManage.sign") }}：</div>

          <div class="inner-right">{{ item.flag }}</div>
        </div>
        <div class="box">

          <div class="inner-left">{{ $t("logManage.startTime") }}：</div>

          <div class="inner-right">{{ item.created }}</div>
        </div>
        <div class="box">

          <div class="inner-left">{{ $t("logManage.RequesterIP") }}：</div>

          <div class="inner-right">{{ item.requestIp }}</div>
        </div>

        <div class="TextField">

          <div class="inner-left">{{ $t("logManage.request") }}：</div>

          <div class="inner-right">
            <el-input
              type="textarea"

              :rows="6"

              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.request')
              "

              v-model="item.request"
            />
          </div>
        </div>

        <div class="TextField">

          <div class="inner-left">{{ $t("logManage.reply") }}：</div>

          <div class="inner-right">
            <el-input
              type="textarea"

              :rows="6"

              :placeholder="$t('logManage.PleaseEnter') + $t('logManage.reply')"

              v-model="item.response"
            />
          </div>
        </div>

        <div class="TextField">

          <div class="inner-left">{{ $t("logManage.content") }}：</div>

          <div class="inner-right">
            <el-input
              type="textarea"

              :rows="6"

              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.content')
              "

              v-model="item.content"
            />
          </div>
        </div>

        <div class="TextField">

          <div class="inner-left">{{ $t("logManage.notes") }}：</div>

          <div class="inner-right">
            <el-input
              type="textarea"

              :rows="6"

              :placeholder="$t('logManage.PleaseEnter') + $t('logManage.notes')"

              v-model="item.remark"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogFormVisible = false">{{
          $t("logManage.cancel")
        }}</el-button>

      </div>
    </el-dialog>

  </div>
</template>

<script>

import {
  GetDictWithDetailsLangs,
  GetInterfaceLog,

  GetInterfaceLogById,

} from "@/api/logManage/index";

import downloadFile from "@/api/user";

export default {
  data() {
    return {

      tableData: [],

      queryConfig: {
        currentPage: 1,
        pageSize: 20,

        interfaceName: "",
        flag: "",
        url: "",
        method: "",
        totalMilliseconds: 0,
        request: "",
        response: "",

      },

      rules: {
        totalMilliseconds: [

          {
            required: true,
            message: this.$t("logManage.empty"),
            trigger: "blur",
          },

          { validator: this.validateNumber, trigger: "blur" },
        ],
      },

      total: 0,
      form: {
        startTime: this.$moment()
          .subtract(3, "days")
          .format("YYYY-MM-DD 00:00:00"),
        endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
      },

      optionsFlag: [
        {
          value: "",

          label: "",

        },
      ],
      dialogFormVisible: false,
      multipleSelection: [],

      detailsData: [],

      export: "http://localhost:5221/api/Log/ExportInterfaceLog",

    };
  },

  created() {

    this.optionsFlag[0].label = this.$t("taskManage.all");

    this.getFlag("LogLevelFlag");
    this.getTableList();
  },

  computed: {
    TableHeight() {

      return `calc(100vh - 390px )`;

    },
  },

  methods: {

    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },

    //查询按钮
    btnAction(queryConfig) {
      this.$refs[queryConfig].validate((valid) => {
        if (valid) {
          this.getTableList();
        } else {
          return false;
        }
      });
    },
    //类型校验
    validateNumber(rule, value, callback) {
      if (value !== "" && isNaN(value)) {

        return callback(new Error(this.$t("logManage.number")));

      }
      callback(); // 验证通过

    },
    getFlag(data) {
      let params = { Code: data };
      GetDictWithDetailsLangs(params).then((response) => {
        response.data.dictDetails.forEach((x) => {
          this.optionsFlag.push({ value: x.code, label: x.name });
        });
      });
    },

    //表格数据

    getTableList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          interfaceName: this.queryConfig.interfaceName,
          url: this.queryConfig.url,
          request: this.queryConfig.request,
          response: this.queryConfig.response,
          method: this.queryConfig.method,
          flag: this.queryConfig.flag,
          content: "",
          totalMilliseconds: this.queryConfig.totalMilliseconds,
          remark: "",
          begin: this.form.startTime,
          end: this.form.endTime,
        },
      };
      this.listLoading = true;
      GetInterfaceLog(params).then((response) => {
        this.total = response.data.totalCount;
        this.tableData = response.data.data;
        this.listLoading = false;
      });
    },
    //   详情
    details() {
      if (this.multipleSelection.length == 0) {

        this.$alert(
          this.$t("logManage.PleaseSelectApieceOfData"),
          this.$t("logManage.InterfaceLogDetails"),
          {
            confirmButtonText: this.$t("logManage.sure"),
          }
        );

      } else {

        this.detailsData = [];
        let params = {
          id: this.multipleSelection[0].id,
        };
        GetInterfaceLogById(params).then((response) => {
          this.detailsData.push(response.data);
        });

        this.dialogFormVisible = true;
      }
    },

    //导出按钮
    ExportList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          interfaceName: this.queryConfig.interfaceName,
          url: this.queryConfig.url,
          request: this.queryConfig.request,
          response: this.queryConfig.response,
          method: this.queryConfig.method,
          flag: this.queryConfig.flag,
          content: "",
          totalMilliseconds: this.queryConfig.totalMilliseconds,
          remark: "",
          begin: this.form.startTime,
          end: this.form.endTime,
        },
      };

      let text = this.$t("logManage.InterfaceLogData") + ".xlsx";

      // 调用下载函数
      downloadFile(this.export, params, text);
    },

    //获取表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页

    handleSizeChange(val) {
      this.queryConfig.pageSize = val;
      this.queryConfig.currentPage = 1;
      this.getTableList();
    },

    handleCurrentChange(val) {
      this.queryConfig.currentPage = val;

      this.getTableList();
    },
  },

};
</script>

<style>

.interfacel {
  width: 100%;
}
.table {
  border: 1px solid #e5e9f2;
}
.pagination-container {
  text-align: center; /* 使分页组件靠右 */
  margin-top: 20px; /* 添加顶部间距 */
}

.container {
  width: 100%; /* 大 div 宽度 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许换行 */
  padding: 10px; /* 内边距 */
  box-sizing: border-box; /* 包含内边距在内 */
}
.box {
  width: 50%; /* 小 div 宽度为 50% */
  height: 50px; /* 小 div 高度 */
  margin: 5px 0; /* 上下外边距 */
  display: flex; /* 嵌套使用 Flexbox */
}
.box1 {
  width: 50%; /* 小 div 宽度为 50% */
  height: 100px; /* 小 div 高度 */
  margin: 5px 0; /* 上下外边距 */
  display: flex; /* 嵌套使用 Flexbox */
}
.inner-left {
  width: 40%; /* 内部左侧 div 宽度为 50% */
  height: 100%; /* 高度为 100% */
  display: flex; /* 使用 Flexbox */
  justify-content: flex-end; /* 内容靠右 */
  align-items: center; /* 垂直居中 */
  padding-right: 5px; /* 右侧内边距 */
}
.inner-right {
  width: 50%; /* 内部右侧 div 宽度为 50% */
  height: 100%; /* 高度为 100% */
  display: flex; /* 使用 Flexbox */
  justify-content: flex-start; /* 内容靠左 */
  align-items: center; /* 垂直居中 */
  padding-left: 5px; /* 左侧内边距 */
}

.demo-ruleForm {
  margin-top: 20px;
}

</style>