element-ui的table页远程搜索实现

/ vuewebgin / 没有评论 / 162浏览

demo

环境

Element ui + Axios + Gin + Gorm

ui

采用容器布局在table之上去平行分布 《添加主机》和《搜索主机》按钮

<template>
  <div >
<!--    <el-button type="success">{{userInfo.nickname}}</el-button>-->
    <el-row class="tac">
      <el-container>
        <!--    <el-header>-->
        <!--      header-->
        <!--    </el-header>-->
        <el-main>
          <el-row>
            <el-col :span="24">   <!--占整行-->
              <el-row>
                <el-col :span="4" >
                  <el-button type="primary" icon="el-icon-plus"  @click="AddHost">增加服务器</el-button>
                </el-col>
                <el-col :span="20" >
                  <!-- 搜索与添加区域 -->
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-input prefix-icon="el-icon-search" placeholder="请输入搜索机器IP" v-model="queryInfo.query" clearable @clear="getSearchInfo()">
                        <el-button icon="el-icon-search"></el-button>
                      </el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="success" icon="el-icon-search" @click="getSearchInfo">搜索</el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <el-col :span="4">
      </el-col>
      <el-col class="content-right" :span="24">
        <el-card shadow="hover">
        <el-table
          v-loading="loading"
          element-loading-text="🐱 喵~ 玩命加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :highlight-current-row=true
          :stripe=true
          :show-header=true
          :header-cell-style="{background:'#bfeeee',color:'#1b1f1e'}"
          :data="receiverInfos" style="width: auto">
          <el-table-column
            label="IP"
            prop="Ip">
          </el-table-column>
          <el-table-column
            label="DC"
            prop="Dc">
          </el-table-column>
          <el-table-column
            label="所属项目"
            prop="Projectname">
          </el-table-column>
          <el-table-column
            label="基础服务"
            prop="Baseservice">
          </el-table-column>
          <el-table-column
            label="CPU"
            prop="Cpucores"
            width="50">
          </el-table-column>
          <el-table-column
            label="CPU负载"
            prop="Cpuload1"
            width="100">
            <template  slot-scope="scope">
              <el-tag   type="warning"  v-if="scope.row.Cpuload1 >=0.1"> 💥{{scope.row.Cpuload1}} </el-tag>
              <el-tag   type="success"  v-if="scope.row.Cpuload1 < 0.1"> {{scope.row.Cpuload1}} </el-tag>
              <!--              <el-tag   :type="parseInt(scope.row.Ramusedpercent) >'80' ? 'warning' : 'success'" >{{scope.row.Ramusedpercent}}</el-tag>-->
            </template>
          </el-table-column>
          <el-table-column
            label="硬盘大小"
            prop="Disktotalgb"
            width="80">
          </el-table-column>
          <el-table-column
            label="硬盘使用率"
            prop="Diskusedpercent"
            width="100">
            <template  slot-scope="scope">
              <el-tag   type="warning"  v-if="parseInt(scope.row.Diskusedpercent) >=80"> 💥{{scope.row.Diskusedpercent}} </el-tag>
              <el-tag   type="success"  v-if="parseInt(scope.row.Diskusedpercent) < 80"> {{scope.row.Diskusedpercent}} </el-tag>
              <!--              <el-tag   :type="parseInt(scope.row.Ramusedpercent) >'80' ? 'warning' : 'success'" >{{scope.row.Ramusedpercent}}</el-tag>-->
            </template>
          </el-table-column>
          <el-table-column
            label="内存大小"
            prop="Ramtotalmb"
            width="80">
          </el-table-column>
          <el-table-column
            label="内存使用率"
            prop="Ramusedpercent"
            width="100">
            <template  slot-scope="scope">
                            <el-tag   type="warning"  v-if="parseInt(scope.row.Ramusedpercent) >= 28"> 💥{{scope.row.Ramusedpercent}} </el-tag>
                            <el-tag   type="success"  v-if="parseInt(scope.row.Ramusedpercent) < 28"> {{scope.row.Ramusedpercent}} </el-tag>
<!--              <el-tag   :type="parseInt(scope.row.Ramusedpercent) >'80' ? 'warning' : 'success'" >{{scope.row.Ramusedpercent}}</el-tag>-->
            </template>
          </el-table-column>
          <el-table-column
            label="Agent版本"
            prop="Agentversion"
            width="100">
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="更新时间"
            prop="UpdatedAt">
            <template slot-scope="scope">
              <el-tag    >{{dateTimeFormat(scope.row.CreatedAt)}} </el-tag>
              <!--            {{ dateTimeFormat(scope.row.CreatedAt) }}-->
            </template>
          </el-table-column>
          <el-table-column
            align="right">
            <template slot-scope="scope">
<!--              <el-button-->
<!--                size="mini"-->
<!--                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>-->
              <el-button
                size="mini"
                type="danger"
                @click="handleSetOffline(scope.$index, scope.row)">下架</el-button>
            </template>
          </el-table-column>
        </el-table>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes,prev, pager, next"
              :total="total"
              prev-text="上一页"
              next-text="下一页">
            </el-pagination>
          </div>
          <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
              <!--        <el-form-item label="编号">-->
              <!--          <el-input v-model="form.id"></el-input>-->
              <!--        </el-form-item>-->
              <el-form-item label="数据中心">
                <el-input v-model="form.dc" width="100"></el-input>
              </el-form-item>
              <el-form-item label="ip">
                <el-input v-model="form.ip" width="300"></el-input>
              </el-form-item>
              <el-form-item label="user">
                <el-input v-model="form.user" width="100"></el-input>
              </el-form-item>
              <el-form-item label="SSH端口">
                <el-input v-model="form.sshport" width="100"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="save" :loading="DownloadLoading" >确 定</el-button>
      </span>
          </el-dialog>
          </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//main.js文件引入了 但是一直报错,在这里再次引入正常运行代码 ????
import Vue from "vue"
Vue.prototype.$http = require("axios")

export default {
  data() {
    return {
      queryInfo: {
        // 查询参数
        query: '',
      },
      DownloadLoading:false,
      title: "",
      dialogVisible: false,
      loading:false,
      receiverInfos: [],
      form: { dc:"",ip:"",user:'',sshport:''},
      currentPage: 1, //默认显示页面为1
      pagesize: 10, //    每页的数据条数
      total:0
    };
  },
  created() {
    // 获取当前登录的用户信息
    this.userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
    this.getReceiverInfos();
  },
  methods: {
    //
    getSearchInfo(){
      if ( this.queryInfo.query == 0 ){
        this.getReceiverInfos()
      }else{
        return this.$http
          .post("/api/SearchOnlineHost",
            {
              ip: this.queryInfo.query,
            },
          )
          .then(result => {
            if (result.data.code === 200){
              this.$message({
                message: "共搜索到 "+result.data.total+" 条🐱~" ,
                type: "success"
              });
              this.total = result.data.total;
              this.receiverInfos = result.data.data;
              return
            }
          })
          .catch(err => {
            // console.log(error.response.data.errMsg);
            this.$message.error("搜索主机失败 🐱");
          });
      }
    },
    // 时间戳转换
    dateTimeFormat(value) {
      var now = new Date(new Date().getTime()),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate(),
        x = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
      return value.substring(0,19).replace(/T/g,'-')
    },
    // AddHost
    AddHost() {
      // this.form.id = "";
      this.form.dc = "";
      this.form.ip = "";
      this.form.user = "";
      this.form.sshport = "";
      this.title = "增加服务器";
      this.dialogVisible = true;
    },
    save() {
      if (this.title == "增加服务器") {
        this.DownloadLoading= true
        let AddHost = {dc: "", ip: "",user:'',sshport:'' };
        // // user.id = this.form.id;
        AddHost.dc = this.form.dc;
        AddHost.ip= this.form.ip;
        AddHost.user=this.form.user;
        AddHost.sshport=this.form.sshport;
        return this.$http
          .post("/api/AddHost",
            {
              dc: AddHost.dc,
              ip: AddHost.ip,
              user: AddHost.user,
              sshport: AddHost.sshport,
            },
          )
          .then(result => {
            // return
            this.DownloadLoading=false
            if (result.data.status === 200){
              this.$message({
                message: result.data.msg+" 🐱~" ,
                type: "success"
              });
              this.dialogVisible = false;
              this.DownloadLoading=false
              this.getReceiverInfos()
              return
            }else if (result.data.code === "5004") {
              this.loading=false
              this.$message({
                message: result.data.msg+" 🐱~" ,
                type: "error"
              });
              this.dialogVisible = false;
              this.DownloadLoading=false
              this.getReceiverInfos()
              return
            }
          })
          .catch(() => {
            this.loading=false
            this.DownloadLoading=false
            this.getReceiverInfos()
            // console.log(error.response.data.errMsg);
            this.$message.error("添加失败 🐱");
          });
      }
    },
    //每页下拉显示数据
    handleSizeChange: function(size) {
      this.pagesize = size;
      this.getReceiverInfos()
    },
    //点击第几页
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.getReceiverInfos()
    },
    // 选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getReceiverInfos() {
      this.loading=true
      this.$http({
        method: "get",
        url: "/api/GetAllNodeInfo",
        params: {
          currentpage: this.currentPage,
          pagesize:this.pagesize
        },
      })
        .then(result => {
          this.loading=false
          // console.log(result.data);
          this.total = result.data.total;
          this.receiverInfos = result.data.data;
        })
        .catch(err => {
          console.dir(err);
        });
    },
    handleDelete(index, row) {
      this.$message.warning("开发中,先等等~");
      console.log(index, row);
    },
    // 下架
    handleSetOffline(index, rows) {
      // this.userData.splice(index, 1);
      this.$confirm('即将下架, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定的操作(调用接口)
        return this.$http
          .post("/api/SetHostOffline",
            {
              // id:row.ID,
              dc:rows.Dc,
              ip:rows.Ip
            },
          )
          .then(result => {
            if (result.data.code === 20129){
              this.$message({
                message: rows.Ip+" "+result.data.msg+" 🐱~  ",
                type: "success"
              });
              this.getReceiverInfos()
              // this.getUser()
            } else {
              this.$message({
                message: rows.Ip +"   "+" 下架失败!" ,
                type: "error"
              });
              this.getReceiverInfos()
            }
          }).catch(err => {
            // console.log(error.response.data.errMsg);
            this.$message.error("下架失败! 🐱");
            this.getReceiverInfos()
          });
      }).catch(() => {
        //几点取消的提示
        this.$message.success("取消成功 🐱");
        this.getReceiverInfos()
      });
    },

  }
};
</script>

<style lang="less" scoped>
</style>

server

简单分页查询的后端,一律没放到model层

func SearchOnlineHost(c *gin.Context) {
	type SearchOnlineHostStruct struct {
		Ip string `form:"ip" json:"ip" uri:"ip" xml:"ip" binding:"required"`
	}
	var SearchOnlineHostPayload SearchOnlineHostStruct
	if err := c.ShouldBindJSON(&SearchOnlineHostPayload); err != nil {
		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
		return
	}
	var SearchOnlineHostInfo []model.HostInfo
	var total int
	model.DB.Where("ip like ? AND offline = ?", "%"+SearchOnlineHostPayload.Ip+"%", false).Find(&SearchOnlineHostInfo).Count(&total)
	if err := model.DB.Where("ip like ? AND offline = ?", "%"+SearchOnlineHostPayload.Ip+"%", false).Order("updated_at desc").Find(&SearchOnlineHostInfo).Error; err != nil {
		logrus.Error(err)
		return
	} else {
		c.JSON(200, gin.H{
			"code":  e.SUCCESS,
			"data":  SearchOnlineHostInfo,
			"msg":   e.GetMsg(e.SUCCESS),
			"total": total,
		})
	}
}