luohe_fronted/src/pages/index/components/ip_white_list.vue

<template>
  <div class="body-wrapper">
    <el-form class="form-wrapper" :inline="true" :model="formInline">
      <el-row>
        <el-col :span="8">
          <el-form-item label="IP地址">
            <el-input v-model="formInline.ipUrl" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" class="query-btn" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="handleAdd">添加白名单</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope" style="display: inline-block">
          <el-button type="primary" @click="handleAudit(scope.row)" slot="reference">修改</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleteRow(scope.row)">
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
                     :current-page.sync="pageNum" :page-size.sync="pageSize">
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      custom-class="audit-dialog">
      <el-form label-position="left" label-width="80px" :model="formLabelAlign">
        <el-form-item label="IP地址">
          <el-input v-model="formLabelAlign.ipUrl"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/api/audit.js";

export default {
  components: {},
  data() {
    return {
      columns: [
        {
          label: 'IP地址',
          key: 'resourceName'
        },
        {
          label: '最后操作时间',
          key: 'resourceType'
        }
      ],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      formInline: {
        ipUrl: ''
      },
      formLabelAlign: {
        ipUrl: ''
      },
      selRow: undefined,
      title: ''
    }
  },
  mounted() {
    this.getTableData()
  },
  watch: {
  },
  methods: {
    handleAudit(row) {
      this.title = '修改白名单'
      this.formLabelAlign.ipUrl = row.resourceName
      this.dialogVisible = true
    },
    indexMethod(index) {
      return this.pageSize * (this.pageNum - 1) + index + 1
    },
    handleAdd () {
      this.title = '添加白名单'
      this.formLabelAlign.ipUrl = ''
      this.dialogVisible = true
    },
    onSubmit () {
      this.getTableData()
    },
    deleteRow (record) {
      console.log(record)
    },
    handlePageChange() {
      this.getTableData()
    },
    handleConfirm() {
      api.applyResource({idUrl: this.ipUrl}).then(res => {
        if(res.success) {
          this.dialogVisible = false
          this.$message({
            message: '添加成功!',
            type: 'success'
          })
          this.getTableData()
        }
      })
    },
    getTableData() {
      const {pageNum, pageSize} = this
      api.applyList({pageNum, pageSize, ipUrl: this.formInline.ipUrl}).then(res => {
        this.tableData = []
        res.data.records.map((item, index) => {
          const newItem = {...item}
          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
          this.tableData.push(newItem)
        })
        this.total = res.data.total
      })
    },
    getApplyTypeText(val) {
      if (!val){
        return '未申请'
      }
      const textMap = {
        1: '待审批',
        2: '审批通过',
        3: '审批驳回'
      }
      return textMap[val]
    },
    handleSearch() {
      this.pageNum = 1
      this.getTableData()
    }
  }
}
</script>
<style  lang="scss" scoped>

.form-wrapper {
  margin-bottom: 20px;
}
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-select {
  height: 40px;
  .el-input__inner {
    height: 40px;
  }
  .el-input__prefix, .el-input__suffix {
    height: 40px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    line-height: 0px;
  }
}
/deep/ .form-wrapper .el-button {
  background: linear-gradient(90deg,#0158d9,#3c97e4);
  width: 100px;
  height: 40px;
}
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
  .search-card{
    margin-bottom: 20px;
    text-align: center;
    .input-wrapper{
      width: 36%;
    }
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
  /deep/ .el-input__inner{
    background: white;
  }
}
</style>