nezha-nezha-fronted/nezha-fronted/src/components/page/config/terminalLog.vue

<template>
  <div>
    <nzDetailView
      v-loading="detailViewLoading || tools.loading"
      v-if="detailType !== 'list'"
      :api="url"
      ref="detailList"
      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
      :from="fromRoute.terminalLog"
      :search-msg="searchMsg"
      :detailType="detailType"
      :detailViewRightObj="detailViewRightObj"
      :dataLength="tableData.length"
      @search="search"
      @changeDetailType="changeDetailType"
    >
      <template v-slot:top-tool-left>
        <!--        <detailViewTopSearch :selectValue.sync="selectValue" :detailSearchList="detailSearchList" @reload="reloadTable" />-->
      </template>
      <template v-slot:top-tool-right>
      </template>
      <template v-slot:nz-detail-view-list>
        <terminalLogDetail
          class="data-detail"
          ref="dataDetail"
          :orderByFa="orderBy"
          v-loading="tools.loading"
          :loading="tools.loading"
          :detailViewRightObj="detailViewRightObj"
          :api="url"
          :table-data="tableData"
          @detailViewRightShow = 'detailViewRightShow'
          @orderDetail="orderDetail"
        >
        </terminalLogDetail>
      </template>
      <!-- 分页组件 -->
      <template v-slot:pagination>
        <el-pagination
          @current-change="pageNo"
          :current-page.sync="pageObj.pageNo"
          :page-size="20"
          :total="pageObj.total"
          layout="prev, slot, next"
          small
        >
          <template>
            <el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
            <span class="jump-pages">/&nbsp{{pageObj.pages}}</span>
          </template>
        </el-pagination>
      </template>
    </nzDetailView>
    <nz-data-list
      ref="dataList"
      :api="url"
      v-show="detailType === 'list'"
      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
      :custom-table-title.sync="tools.customTableTitle"
      :from="fromRoute.terminalLog"
      @search="search"
      :search-msg="searchMsg"
      :detailType="detailType"
      @changeDetailType="changeDetailType"
      @getTableData="getTableData"
    >
      <template v-slot:default="slotProps">
        <terminal-log-table
          ref="dataTable"
          v-loading="tools.loading"
          :loading="tools.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
          :height="mainTableHeight"
          :now-time="nowTime"
          :table-data="tableData"
          :terminalLog="true"
          @del="del"
          @edit="edit"
          @orderBy="tableDataSort"
          @reload="getTableData"
          @shutdown="shutdown"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></terminal-log-table>
      </template>
      <!-- 分页组件 -->
      <template v-slot:pagination>
        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
      </template>
    </nz-data-list>
  </div>
</template>
<script>
import nzDataList from '@/components/common/table/nzDataList'
import dataListMixin from '@/components/common/mixin/dataList'
import terminalLogTable from '@/components/common/table/settings/terminalLogTable'
import nzDetailView from '@/components/common/detailView/nzDetailView'
import detailViewMixin from '@/components/common/mixin/detailViewMixin'
import terminalLogDetail from '@/components/common/detailView/list/terminalLogDetail/terminalLogDetail'
import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'
import routerPathParams from '@/components/common/mixin/routerPathParams'

export default {
  name: 'terminalLog',
  components: {
    nzDataList,
    terminalLogTable,
    nzDetailView,
    terminalLogDetail,
    detailViewTopSearch
  },
  mixins: [dataListMixin, detailViewMixin, routerPathParams],
  data () {
    return {
      url: 'terminal/session',
      tableId: 'terminalLogTable', // 需要分页的table的id，用于记录每页数量
      searchMsg: { // 给搜索框子组件传递的信息
        searchLabelList: [
          {
            id: 11,
            name: this.$t('config.terminallog.loginHost'),
            type: 'input',
            label: 'host',
            disabled: false
          }, {
            id: 12,
            name: this.$t('config.terminallog.loginUser'),
            type: 'input',
            label: 'loginUser',
            disabled: false
          }, {
            id: 13,
            name: this.$t('config.terminallog.sourceIp'),
            type: 'input',
            label: 'remoteAddr',
            disabled: false
          }, {
            id: 14,
            name: this.$t('config.terminallog.sourceUser'),
            type: 'input',
            label: 'username',
            disabled: false
          }, {
            id: 15,
            name: this.$t('config.terminallog.uuid'),
            type: 'input',
            label: 'uuid',
            disabled: false
          }, {
            id: 16,
            name: this.$t('config.terminallog.protocol'),
            type: 'selectString',
            label: 'protocol',
            readonly: true,
            disabled: false
          }, {
            id: 17,
            name: this.$t('config.terminallog.status'),
            type: 'terminalStatus',
            label: 'state',
            readonly: true,
            disabled: false
          }
        ]
      },
      nowTime: ''
    }
  },
  methods: {
    getTableData () {
      if (this.orderBy) {
        this.$set(this.searchLabel, 'orderBy', this.orderBy)
      }
      const params = {
        ...this.searchLabel,
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      this.tools.loading = true
      const path = this.fromRoute.terminalLog
      this.updatePath(params, path)
      this.$get(this.url, params).then(response => {
        this.tools.loading = false
        if (response.code === 200) {
          this.tableData = response.data.list
          this.nowTime = this.utcTimeToTimezoneStr(response.time)
          const globalSearchId = this.$store.getters.getGlobalSearchId
          let detailViewRightObj = ''
          if (globalSearchId) {
            detailViewRightObj = this.tableData.find(item => item.id === globalSearchId)
          } else {
            detailViewRightObj = this.tableData[0]
          }
          this.detailViewRightObj = detailViewRightObj
          this.pageObj.total = response.data.total
          this.pageObj.pages = response.data.pages
          if (!this.scrollbarWrap) {
            this.$nextTick(() => {
              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
              this.toTopBtnHandler(this.scrollbarWrap)
            })
          }
        }
      })
    },
    shutdown (record) {
      this.$confirm(this.$t('tip.killTerm'), {
        confirmButtonText: this.$t('tip.yes'),
        cancelButtonText: this.$t('tip.no'),
        type: 'warning'
      }).then(() => {
        this.$put('/terminal/kill', { uuid: record.uuid }).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('config.terminallog.success'))
            this.$refs.dataList.bottomBox.showSubList = false
            this.getTableData()
          } else {
            this.$message.error(this.$t('config.terminallog.killErrorTip'))
          }
        })
      })
    }
  },
  created () {
    const searchKeys = {
      // key: path 键
      // value: vue set 参数
      pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
      pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
      orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
      host: {
        target: this.searchLabel,
        isSearchInput: true,
        propertyName: 'host',
        type: 'string',
        defaultJson: {
          disabled: false,
          id: 11,
          label: 'host',
          name: 'Login host',
          type: 'input',
          val: ''
        },
        jsonKey: 'val'
      },
      username: {
        target: this.searchLabel,
        isSearchInput: true,
        propertyName: 'username',
        type: 'string',
        defaultJson: {
          disabled: false,
          id: 14,
          label: 'username',
          name: 'Source user',
          type: 'input',
          val: ''
        },
        jsonKey: 'val'
      },
      loginUser: {
        target: this.searchLabel,
        isSearchInput: true,
        propertyName: 'loginUser',
        type: 'string',
        defaultJson: {
          disabled: false,
          id: 12,
          label: 'loginUser',
          name: 'Login user',
          type: 'input',
          val: ''
        },
        jsonKey: 'val'
      },
      remoteAddr: {
        target: this.searchLabel,
        isSearchInput: true,
        propertyName: 'remoteAddr',
        type: 'string',
        defaultJson: {
          disabled: false,
          id: 13,
          label: 'remoteAddr',
          name: 'Source IP',
          type: 'input',
          val: ''
        },
        jsonKey: 'val'
      },
      uuid: {
        target: this.searchLabel,
        isSearchInput: true,
        propertyName: 'uuid',
        type: 'string',
        defaultJson: {
          disabled: false,
          id: 15,
          label: 'uuid',
          name: 'UUID',
          type: 'input',
          val: ''
        },
        jsonKey: 'val'
      },
      protocol: {
        target: this.searchLabel,
        isSearchInput: true,
        propertyName: 'protocol',
        type: 'string',
        defaultJson: {
          disabled: false,
          id: 16,
          label: 'protocol',
          name: 'Protocol',
          readonly: true,
          type: 'selectString',
          val: ''
        },
        jsonKey: 'val'
      },
      state: {
        target: this.searchLabel,
        isSearchInput: true,
        propertyName: 'state',
        type: 'number',
        defaultJson: {
          disabled: false,
          id: 17,
          label: 'state',
          name: 'State',
          readonly: true,
          type: 'terminalStatus',
          val: ''
        },
        jsonKey: 'val'
      }
    }
    this.initQueryFromPath(searchKeys)
  }
}
</script>