making_friends-portal/src/views/base/activityMember-list.vue

<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="true"
      append-to-body
      style="text-align:left;"
      width="800px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div class="user-panel" v-loading="loading">
    <el-row class="button-group">
      <el-button
          type="primary"
          size="small"
          plain
          icon="el-icon-upload"
          @click="exportXls"
      >导出数据</el-button>
    </el-row>
        <el-table
        ref="formTable"
        :data="tableData"
        v-loading="loading"
        stripe
      >
        <el-table-column
          prop="realName"
          label="会员姓名"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="报名时间"
          width="160"
        ></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 activityMemberApi from "@/api/base/activityMember";
  
  export default {
    props: ["businessKey", "title"],
    computed: {
        ruleValidate (){
          var rules = null;
          rules = {
              address: [
                  { required: true, message: "活动地址不能为空", trigger: "blur" }
              ],
              title: [
                  { required: true, message: "活动名称不能为空", trigger: "blur" }
              ],
          };
          return rules;
        }
    },
    data() {
      return {
        showDialog: true,
        loading: false,
        submitting: false,
        formModel: {
          id:"",
          titel:"",
          content:"",
          images:"",
          author:"",
          isShow:false
        },
        tableData: [],
        treeData: [],
        pageIndex: 1,
        pageSize: 10,
        totalPages: 0,
        totalElements: 0,
        field: "",
        direction: "",
        pageSizeList: [10, 20, 30],
        multipleSelection: [],
      };
    },
    methods: {
      closeDialog() {
        this.$emit("close", false);
      },
      pageSizeChange(pageSize) {
        this.pageSize = pageSize;
      },
      changePage(pageIndex,exportFlag) {
        var self = this;
  
        self.loading = true;
  
        self.pageIndex = pageIndex;
        var formData = new FormData();
  
        formData.append("pageIndex", self.pageIndex);
        if(exportFlag!=null){
          formData.append("exportFlag", exportFlag);
          formData.append("pageSize", 10000);
        }
        else{
            formData.append("pageSize", self.pageSize);
        }
        formData.append("activityId", self.businessKey);
  
        activityMemberApi
          .pageList(formData)
          .then(function (response) {
            self.loading = false;
  
            var jsonData = response.data;

            if(exportFlag){
                  //导出
                  self.$message({
                      showClose: true,
                      type: "success",
                      message: `报表已生成，<a href="${jsonData.data}">请点击链接下载</a>`,
                      dangerouslyUseHTMLString: true,
                      duration: 30000
                  });
              }
              else{
                  //分页查看
                  var page = jsonData.data;
                  
                  self.tableData = page.data;
                  self.totalPages = page.totalPages;
                  self.totalElements = page.recordsTotal;
              }
          })
          .catch((error) => {
            self.loading = false;
            // self.$message.error(error + "");
          });
      },
      exportXls() {
        this.changePage(1,true);
      },
    },
    created() {
    },
    mounted: function () {
      this.changePage(1);
    },
  };
  </script>
  
  <style rel="stylesheet/scss" lang="scss" scoped>
  .user-panel {
    margin: 10px auto;
  }
  .input-form-main{
      width: 300px;
  }
  .link-span{
      margin-right: 20px;
  }
  .el-form-item{
      margin-bottom: 25px;
  }
  </style>