love-donation-portal/src/views/base/trainingPerson-list.vue

<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="false"
      style="text-align: left;"
      @close="closeDialog"
      :close-on-click-modal="false"
      width="900px"
    >
      <div class="user-panel" v-loading="loading">
        <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
            <el-form-item label="姓名" prop="name">
                <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input type="text" size="mini" v-model="queryModel.phone"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button
                type="primary"
                size="mini"
                icon="ios-search"
                @click="changePage(1)"
                :loading="loading"
            >查询</el-button>&nbsp;
            <el-button
                type="info"
                size="mini"
                style="margin-left: 8px"
                @click="handleReset('queryForm')"
            >重置</el-button>&nbsp;
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-table
        :data="tableData"
        style="min-height:400px;"
        v-loading="loading"
        stripe
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column  prop="workPersonName"  label="姓名"></el-table-column>
            <el-table-column  prop="phone"  label="联系电话"></el-table-column>
            <el-table-column  prop="gender"  label="性别">
                <template slot-scope="{row}">
                    <span v-if="row.gender=='0'">男</span>
                    <span v-else-if="row.gender=='1'">女</span>
                </template>
            </el-table-column>
            <el-table-column  prop="age"  label="年龄"></el-table-column>
            <el-table-column  prop="createTime"  label="报名时间"></el-table-column>

            <!-- <el-table-column label="操作" width="250">
            <template slot-scope="{row}">
                <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
            </el-table-column> -->
        </el-table>
        <el-pagination
            style="text-align: center;"
            :current-page.sync="pageIndex"
            :total="totalElements"
            :page-sizes="pageSizeList"
            @current-change="changePage"
            @size-change="pageSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
      </span>
    </el-dialog>
  </template>
  <script>
  import trainingPersonApi from "@/api/base/trainingPerson";
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
            submitting: false,
            queryModel: {
                name:"",
                phone:"",
            },
            showDialog: true,
            loading: false,
            tableData: [],
            pageIndex: 1,
            pageSize: 10,
            totalPages: 0,
            totalElements: 0,
            field: "",
            direction: "",
            pageSizeList: [10, 20, 30],
            multipleSelection: [],
      };
    },
    created() {

    },
    methods: {
      closeDialog() {
        this.$emit("close", false);
      },
      changePage(pageIndex) {
        var self = this;
  
        console.log(pageIndex);
  
        self.pageIndex = pageIndex;
        var formData = new FormData();
  
        formData.append("pageIndex", self.pageIndex);
        formData.append("pageSize", self.pageSize);
  
        formData.append("trainingId", self.businessKey);
        formData.append("name", self.queryModel.name);
        formData.append("phone", self.queryModel.phone);
  
        self.loading = true;
  
        trainingPersonApi.pageList(formData).then(function(response) {
          self.loading = false;
  
          var jsonData = response.data;
  
          if(jsonData.result){
            var pageInfo = jsonData.data;
  
            self.tableData = pageInfo.data;
            self.totalPages = pageInfo.totalPages;
            self.totalElements = pageInfo.recordsTotal;
          }
          else {
            self.$message({
                message: jsonData.message + "",
                type: "warning"
              });
          }
        }).catch((error)=>{
          self.loading = false;
        });
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      },
      pageSizeChange(pageSize) {
        this.pageSize = pageSize;
      },
      sortChange(data) {
        this.field = data.column.field;
        this.direction = data.order == "ascending" ? "asc" : "desc";
  
        this.changePage(this.pageIndex);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
    async mounted() {
      var self = this;
      self.changePage(1);
    },
    components: {
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  </style>