vue-element-equipment-pty/src/views/operationLog/index.vue

<template>
  <div class="pagemain pagelog">
    <div class="pageTitle">
      {{ $t("route.operationLog") }}
    </div>
    <div class="pageCon">
      <el-table
        v-loading="listLoading"
        :data="listData"
        element-loading-text="加载中.."
        :border="true"
        fit
        highlight-current-row
        style="width: 60%; margin-top: 20px"
      >
        <el-table-column align="center" :label="$t('table.number')" width="95">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.name')" align="center" prop="name" />
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="220"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleDetail(scope.row)"
            >
              {{ $t("table.check") }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              style="color: red"
              @click="handleDelete(scope.row, scope.$index)"
            >
              {{ $t("table.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog class="logdialog" :visible.sync="dialogVisible" :title="$t('route.operationLog') + ' ' + rowName" width="75%" :before-close="closeDia" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-scrollbar ref="scrollbar" style="height: 60vh;width:100%;background: #333;" wrap-style="overflow-x:hidden;">
        <div class="logcard" style="white-space: pre-line;" v-html="logData" />
      </el-scrollbar>
      <div class="ftbtnbox">
        <el-checkbox v-model="refreshChecked" class="refreshbox" @change="changeChecked">{{
          $t("table.refresh")
        }}</el-checkbox>
        <el-button class="ftbtn ftbtn2" @click="toTop">{{
          $t("table.toTop")
        }}</el-button>
        <el-button class="ftbtn ftbtn2" @click="toBottom">{{
          $t("table.toBottom")
        }}</el-button>
<!--        <el-button class="ftbtn ftbtn2" @click="clearCon">{{-->
<!--          $t("table.clear")-->
<!--        }}</el-button>-->
        <el-button class="ftbtn ftbtn3" @click="closeDia">{{
          $t("table.close1")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLogList,
  getLogDetail,
  deteleLog
} from '@/api/index.js'
export default {
  name: 'Warning',
  components: {},
  data() {
    return {
      listData: [{}, {}],
      listLoading: true,
      dialogVisible: false,
      rowName: '',
      logData: '',
      refreshChecked: false,
      timer: null
    }
  },
  watch: {
    refreshChecked(val) {
      if (val && this.dialogVisible) {
        this.timer = setInterval(() => {
          this.getLogDetail()
        }, 5000)
      }
    }
  },
  mounted() {
    this.getLogList()
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer)
  },
  methods: {
    // 节目列表
    getLogList() {
      this.listLoading = true
      getLogList({}).then(res => {
        if (res.code === 200) {
          var listData = []
          if (res.data && res.data.names && res.data.names.length > 0) {
            res.data.names.forEach(item => {
              listData.push({
                name: item
              })
            })
          }
          this.listData = listData
        } else {
          this.$message.error(res.message)
        }
      })
      this.listLoading = false
    },
    // 查看详情
    handleDetail(row) {
      this.refreshChecked = false
      this.rowName = row.name
      this.logData = ''
      this.getLogDetail()
    },
    getLogDetail() {
      getLogDetail(this.rowName).then(res => {
        res.replace(/\n|\r\n/g, '<br>')
        this.logData = res
        this.toBottom()
      })
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    // 删除日志
    handleDelete(row) {
      const names = []
      names.push(row.name)
      const params = {
        names: names
      }
      this.$confirm(this.$i18n.t('table.logDeteleTip'), this.$i18n.t('table.tips'), {
        confirmButtonText: this.$i18n.t('table.confirm'),
        cancelButtonText: this.$i18n.t('table.cancel'),
        center: true
      }).then(() => {
        deteleLog(params).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: this.$i18n.t('table.delete') + this.$i18n.t('table.success')
            })
          } else {
            this.$message({
              type: 'success',
              message: this.$i18n.t('table.delete') + this.$i18n.t('table.failed')
            })
          }
          this.getLogList()
        })
      })
    },
    changeChecked(e) {
      this.refreshChecked = e
    },
    toTop() {
      this.$refs['scrollbar'].wrap.scrollTop = 0
    },
    toBottom() {
      this.$refs.scrollbar.wrap.scrollTop = this.$refs.scrollbar.wrap.scrollHeight
    },
    // clearCon() {
    //   this.logData = ''
    // },
    closeDia() {
      this.dialogVisible = false
      this.rowName = ''
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>
<style lang="scss" scoped>

.pagelog{
  ::v-deep .el-dialog__body{
    padding: 10px 20px 20px 20px;
  }

  .logcard{
    padding: 20px;
    color: #FFFFFF;
    line-height: 32px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
  }
  .ftbtnbox{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 18px;
    position: relative;

    .refreshbox{
      position: absolute;
      left: 20px;
      top: 8px;
    }
    .ftbtn{
      width: 120px;
      color: #333;
      font-weight: bold;
    }
    .ftbtn1{
      background: #CFD9DB;
      border: 1px solid #CFD9DB;
    }

    .ftbtn2{
      width: 140px;
      background: #ECF0F1;
      border: 1px solid #ECF0F1;

    }

    .ftbtn3{
      background: #0275A8;
      color: #FFFFFF;
      border: 1px solid #0275A8;

    }
  }

}
</style>