ZZJ
2022-06-23 feaf0a9778879ef211c5587a513ba4cbdabb52d0
src/pages/syslog/views/operationLog.vue
@@ -23,14 +23,15 @@
            v-model="fuzzySearch"
            size="small"
            class="input-with-select"
            @keyup.enter.native="getOperationLog(1)"
          >
            <span
              class="icon iconfont"
              @click="getOperationLog(1)"
              slot="append"
            >
            <span class="icon iconfont icon_clear" @click="clearSearch" slot="append" v-if="fuzzySearch">
              &#xe785;
            </span>
            <span class="icon iconfont icon_search" @click="getOperationLog(1)" slot="append">
              &#xe714;
            </span>
            <!-- <el-button
              slot="append"
              icon="el-icon-search"
@@ -43,20 +44,9 @@
        <div class="bar">
          <div class="name">操作模块:</div>
          <el-select
            v-model="curModule"
            placeholder="请选择"
            size="small"
            @change="moduleChange"
          >
          <el-select v-model="curModule" placeholder="请选择" size="small" @change="moduleChange" value-key="proc_name">
            <el-option label="全部" :value="''"> </el-option>
            <el-option
              v-for="(item, i) in moduleOptions"
              :key="i"
              :label="item.proc_name"
              :value="item.proc_name"
            >
            </el-option>
            <el-option v-for="(item, i) in moduleOptions" :key="i" :label="item.name_zh" :value="item"> </el-option>
          </el-select>
        </div>
        <div class="bar">
@@ -69,30 +59,13 @@
            @change="getOperationLog(1)"
          >
            <!-- :disabled="gongnengOptions.length==0" -->
            <el-option
              v-for="(item, i) in gongnengOptions"
              :key="i"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
            <el-option v-for="(item, i) in gongnengOptions" :key="i" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </div>
        <div class="bar">
          <div class="name">操作结果:</div>
          <el-select
            v-model="result"
            placeholder="请选择"
            size="small"
            @change="getOperationLog(1)"
          >
            <el-option
              v-for="(item, i) in resultOptions"
              :key="i"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          <el-select v-model="result" placeholder="请选择" size="small" @change="getOperationLog(1)">
            <el-option v-for="(item, i) in resultOptions" :key="i" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
      </div>
@@ -110,8 +83,7 @@
        <template slot="empty">
          <img :src="png" class="empty_img" alt="" />
        </template>
        <el-table-column :align="'center'" label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column :align="'center'" label="序号" type="index" width="50"> </el-table-column>
        <el-table-column
          :align="'center'"
          sortable
@@ -119,41 +91,12 @@
          prop="add_time"
          label="操作时间"
        ></el-table-column>
        <el-table-column
          sortable
          :align="'center'"
          prop="userName"
          label="用户名"
        ></el-table-column>
        <el-table-column
          :align="'center'"
          sortable
          prop="module"
          label="操作模块"
        ></el-table-column>
        <el-table-column
          :align="'center'"
          prop="function"
          label="操作功能"
        ></el-table-column>
        <el-table-column
          :align="'center'"
          sortable
          prop="result"
          label="操作结果"
        ></el-table-column>
        <el-table-column
          :align="'center'"
          prop="msg"
          min-width="100px"
          label="详细信息"
        ></el-table-column>
        <el-table-column
          :align="'center'"
          sortable
          prop="ip"
          label="IP"
        ></el-table-column>
        <el-table-column sortable :align="'center'" prop="userName" label="用户名"></el-table-column>
        <el-table-column :align="'center'" sortable prop="module" label="操作模块"></el-table-column>
        <el-table-column :align="'center'" prop="function" label="操作功能"></el-table-column>
        <el-table-column :align="'center'" sortable prop="result" label="操作结果"></el-table-column>
        <el-table-column :align="'center'" prop="msg" min-width="100px" label="详细信息"></el-table-column>
        <el-table-column :align="'center'" sortable prop="ip" label="IP"></el-table-column>
      </el-table>
    </div>
@@ -171,15 +114,15 @@
</template>
<script>
import { deleteDate } from "@/api/system";
import { pad0 } from "@/api/utils";
import { queryOperationLog, getOperations, getModules } from "@/api/log";
import { deleteDate } from "@/api/system"
import { pad0 } from "@/api/utils"
import { queryOperationLog, getOperations, getModules } from "@/api/log"
export default {
  name: "operationLog",
  data() {
    return {
      png: "",
      png: require("../../../../public/images/syslog/没数据.png"),
      loading: false,
      loadingText: "",
      input3: "",
@@ -190,16 +133,16 @@
      resultOptions: [
        {
          value: "",
          label: "全部",
          label: "全部"
        },
        {
          value: "成功",
          label: "成功",
          label: "成功"
        },
        {
          value: "失败",
          label: "失败",
        },
          label: "失败"
        }
      ],
      value: "",
      page: 1,
@@ -211,108 +154,106 @@
      timeStart: "",
      timeEnd: "",
      fuzzySearch: "",
      total: 0,
    };
      total: 0
    }
  },
  mounted() {
    this.getTimeRange();
    this.getOperationLog();
    this.getOptions();
    this.getTimeRange()
    this.getOperationLog()
    this.getOptions()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOperationLog();
      this.pageSize = val
      this.getOperationLog()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getOperationLog();
      this.page = val
      this.getOperationLog()
    },
    moduleChange(val) {
      this.getOperationLog(1);
      this.gongneng = "";
      this.getOperationLog(1)
      this.gongneng = ""
      getOperations({
        module: this.curModule,
        module: val.proc_name
      }).then((res) => {
        this.gongnengOptions = res.data;
      });
        this.gongnengOptions = res.data
      })
    },
    getOptions() {
      getModules().then((res) => {
        const indexArr = [];
        const indexArr = []
        res.data.forEach((item, index) => {
          if (item.proc_name == "") {
            indexArr.push(index);
            indexArr.push(index)
          }
        });
        })
        if (indexArr.length != 0) {
          indexArr.forEach((i) => {
            res.data.splice(i);
          });
            res.data.splice(i)
          })
        }
        this.moduleOptions = res.data;
        console.log(this.moduleOptions);
      });
        this.moduleOptions = res.data
      })
    },
    choseRange(item, i) {
      switch (item) {
        case "今日":
          this.getTimeRange();
          break;
          this.getTimeRange(24 * 60 * 60 * 1000)
          break
        case "近三天":
          this.getTimeRange(24 * 60 * 60 * 1000 * 3);
          break;
          this.getTimeRange(24 * 60 * 60 * 1000 * 3)
          break
        case "近七天":
          this.getTimeRange(24 * 60 * 60 * 1000 * 7);
          break;
          this.getTimeRange(24 * 60 * 60 * 1000 * 7)
          break
        case "近一个月":
          this.getTimeRange(24 * 60 * 60 * 1000 * 30);
          break;
          this.getTimeRange(24 * 60 * 60 * 1000 * 30)
          break
        case "近六个月":
          this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6);
          break;
          this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6)
          break
        default:
          break;
          break
      }
      this.getOperationLog(1);
      this.activeDateChoise = i;
      this.getOperationLog(1)
      this.activeDateChoise = i
    },
    getOperationLog(typ) {
      if (typ == 1) {
        this.page = 1;
        this.page = 1
      }
      queryOperationLog({
        timeStart: this.timeStart,
        timeEnd: this.timeEnd,
        page: this.page,
        pageSize: this.pageSize,
        module: this.curModule,
        module: this.curModule.name_zh,
        function: this.gongneng,
        result: this.result,
        fuzzySearch: this.fuzzySearch,
        fuzzySearch: this.fuzzySearch
      }).then((res) => {
        this.tableData = res.data.logs;
        this.total = res.data.total;
        this.png = require("../../../../public/images/syslog/没数据.png");
      });
        this.tableData = res.data.logs
        this.total = res.data.total
      })
    },
    getTimeStr(date) {
      var month = pad0(date.getMonth() + 1); //月
      var day = pad0(date.getDate()); //日
      var hour = pad0(date.getHours()); //时
      var minute = pad0(date.getMinutes()); //分
      var second = pad0(date.getSeconds()); //秒
      return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`;
      var month = pad0(date.getMonth() + 1) //月
      var day = pad0(date.getDate()) //日
      return `${date.getFullYear()}-${month}-${day}`
    },
    getTimeRange(gap) {
      var preDay;
      preDay = gap
        ? new Date(new Date().getTime() - gap)
        : new Date(new Date().setHours(0, 0, 0, 0));
      this.timeStart = this.getTimeStr(preDay);
      var date = new Date()
      var preDay = new Date(new Date().getTime() - gap + 24 * 60 * 60 * 1000)
      this.timeStart = this.getTimeStr(preDay) + " 00:00:00"
      this.timeEnd = this.getTimeStr(date) + " 23:59:59"
    },
  },
};
    clearSearch() {
      this.fuzzySearch = ""
      this.getOperationLog(1)
    }
  }
}
</script>
<style lang="scss">
.op-log {
@@ -376,6 +317,10 @@
        height: 36px;
        display: flex;
        align-items: center;
        .icon_clear:hover {
          color: #4e94ff;
        }
        .input-with-select {
          width: 100%;
@@ -462,6 +407,12 @@
        display: none;
      }
      tr {
        td:first-child {
          border-radius: 4px 0 0 4px;
        }
        td:last-child {
          border-radius: 0 4px 4px 0;
        }
        &.current-row td {
          background-color: #4e94ff !important;
          color: #fff;