index.vue 8.72 KB

Edit Raw Blame History Permalink

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">日志查询分析</span></div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          >

          <el-table-column
            label="序号"
            min-width="80"
          >
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
          </el-table-column>
          <el-table-column
            label="请求时间"
            prop="createTime"
            min-width="250"
          >
          </el-table-column>
          <el-table-column
            label="请求用户"
            prop="name"
            min-width="200"
          >

          </el-table-column>
          <el-table-column
            label="请求IP"
            prop="ip"
            min-width="300"
          >

          </el-table-column>
          <el-table-column
            label="请求设备"
            prop="browserName"
            min-width="250"
          >
          </el-table-column>
          <el-table-column
            prop="url"
            label="请求地址"
           min-width="300"
          >

          </el-table-column>
          <el-table-column
            prop="type"
            label="请求类型"
            min-width="150"
          >
          <template slot-scope="scope">
            {{scope.row.type == '1'?'平台端':scope.row.type == '2'?'商家端':'C端'}}
          </template>
          </el-table-column>
<el-table-column
            prop="time"
            label="请求耗时"
            min-width="100"
          >
          <template slot-scope="scope">
            {{scope.row.time}}秒
          </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="auto"
            min-width="80">
            <template slot-scope="scope">
              <div @click="delList(scope.row)" class="tableBtn greens">删除</div>

            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="fenye">
          <div style="line-height: 34px">显示第1到第10条记录</div>
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            small
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total,sizes,prev, pager,next"
            :total="total "
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div> -->

        <!-- 新建商家弹框 -->
        <el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'"  :visible.sync="ggXin" custom-class="diaslog_zhong" style="padding: 0;" width="80%" class="dialog_css_Xq"  center :close-on-click-modal="false" :show-close="false"	>
                    <div >
                          <div style="margin-bottom: 20px;">
                          <el-form ref="form" :model="formInline" label-width="80px">
                            <el-form-item label="渠道名称">
                              <el-input v-model="formInline.name" :disabled="index == 1?false:index == 2?true:false"  size="mini" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="渠道类型">
                              <el-select v-model="formInline.createUser" placeholder="请选择" size="mini"
                              :disabled="index == 1?false:index == 2?true:false"
                                style="width:100%">
                                <el-option label="APP" value="APP" />
                              </el-select>
                            </el-form-item>

                      <el-form-item label="备注">
                              <el-input type="textarea" v-model="formInline.textarea"  :rows="4" :disabled="index == 1?false:index == 2?true:false"></el-input>
                            </el-form-item>

                          </el-form>

                          </div>
                          <div style="display: flex;justify-content: flex-end;">
                            <el-button plain @click="closeFn(1)" size="mini" style="background-color: #fff;color: #000;width: 70px;height: 30px;border-color: #B2B2B2;">返回</el-button>
                            <el-button plain @click="bianji()" v-if="index == 2" size="mini" style="background-color: #3F9B6A;color: #fff;width: 70px;height: 30px;border-color: #3F9B6A;">编辑</el-button>
                          <el-button plain @click="addCheck(0)" v-if="index!= 2" size="mini" style="background-color: #3F9B6A;color: #fff;width: 70px;height: 30px;border-color: #3F9B6A;">确定</el-button>
                            </div>
                    </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
import {logQuery,deleteList} from '../../../api/online.js'
export default {
  data () {
    return {
      rules: {},
      currentPage: 1,
      total: 100,
      flag: false,
      pageSize: 10,
      ggXin: false,
      index:1,
      formInline: {
        merchantName: '', // 商家名称
        storeId: '', // 编码
        contacts: '', // 联系人
        businessEntity: '',//经营主体
        page: 1, // 当前页
        pageSize: 10 // 每页记录数
      },
      tableData: [],
      multipleSelection:0,
      pageindex: {
        page:1,
        pageSize:10,
      },
    }
  },
  computed: {},
  mounted(){
    this.getAll()
  },
  methods: {
  async getAll(){
   const res = await logQuery(this.pageindex)
   this.tableData = res.data.list
    this.total = res.data.list.length
    },
    onSubmit(){

    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    },
    closeFn () {
      this.ggXin = false
      this.index = 1
    },
    delList(item){
          const h = this.$createElement;
          this.$msgbox({
            title: '消息',
            message: h('p', null, [
              h('span', null, '是否删除 '),
            ]),
            showCancelButton: true,
            showClose: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            customClass: 'oe-dialog-btn',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                deleteList({
                 id: item.webLogId
                }).then(res => {
                  this.getAll()
                  done();
                })
              } else {
                done();
              }
            }
          })

    }
  }
}
</script>

<style scoped >
.zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
    position: relative;
  }

/deep/ .el-form-item__content {
  line-height: 0;
}

.tableBtn {
  display: inline-block;
  margin-right: 10px;
}

::v-deep .formSearch {
  position: relative;
  margin-bottom: 20px ;
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 12px;
  justify-content: space-between;
  .el-form-item__label{
    line-height: 28px;
    font-size: 12px;
    color: #000;
    font-weight: 100;
  }
}

.greens {
  color: #3F9B6A;
}

/deep/ .el-table__row {
  font-size: 12px;
}

.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  position: relative;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3F9B6A;
}

.el-row {
  margin-bottom: 20px;
}
:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}

/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}
/deep/ .el-pagination__total{
  margin-top:4px;
}
/deep/ .btn-prev{
  position:absolute ;
  top: 4px;
  right: 266px;
}
/deep/ .el-pager{
  position:absolute ;
  top: 4px;
  right: 40px;
}
/deep/ .btn-next{
  position:absolute;
 top: 4px;
  right: 10px;
}
::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

</style>