|
|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <div class="luckDraw">
|
|
|
+ <div class="luckDraw_title">
|
|
|
+ <span class="text">中奖名单</span>
|
|
|
+ </div>
|
|
|
+ <div class="luckDraw_select">
|
|
|
+ <el-input v-model="form.text1" placeholder="请输入中奖姓名" clearable></el-input>
|
|
|
+ <el-button type="primary" @click="selectClick" :loading="selectLoading">
|
|
|
+ <i class="el-icon-search"></i> 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="exportData()" :loading="downloadLoading">
|
|
|
+ <i class="el-icon-document"></i> 导出(Excel)
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="luckDraw_table">
|
|
|
+ <el-table
|
|
|
+ ref="tab"
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%;"
|
|
|
+ border
|
|
|
+ :height="height"
|
|
|
+ :stripe="true"
|
|
|
+ :highlight-current-row="false"
|
|
|
+ :row-style="tableRowStyle"
|
|
|
+ :header-cell-style="tableHeaderColor"
|
|
|
+ :loading="tableLoading"
|
|
|
+ element-tableLoading-text="玩命加载中"
|
|
|
+ element-tableLoading-spinner="el-icon-tableLoading"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ fixed="left"
|
|
|
+ width="50"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ sortable
|
|
|
+ v-for="(item,i) in tablehead"
|
|
|
+ :key="i"
|
|
|
+ :prop="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ :min-width="item.width || width">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="fy">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="pageSizes"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ :hide-on-single-page="true">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import luckDrawTableHead from './luckDrawTableHead'
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ //查询按钮的状态
|
|
|
+ selectLoading:false,
|
|
|
+ //导出按钮的状态
|
|
|
+ downloadLoading:false,
|
|
|
+ //导出excel文件的名字
|
|
|
+ tableTitle:'中奖名单',
|
|
|
+ //表格的高度
|
|
|
+ height:null,
|
|
|
+ //表格的每一列的宽度,若没有再表头设置则采用
|
|
|
+ width:150,
|
|
|
+ //总条目数
|
|
|
+ total:null,
|
|
|
+ //每页显示条目个数
|
|
|
+ pageSize: 100,
|
|
|
+ //每一页面的显示的条目个数数组
|
|
|
+ pageSizes: [50, 100, 200, 300],
|
|
|
+ //当前页数
|
|
|
+ currentPage: 1,
|
|
|
+ //表格的加载状态
|
|
|
+ tableLoading: false,
|
|
|
+ //查询条件
|
|
|
+ form:{
|
|
|
+ text1:null,
|
|
|
+ },
|
|
|
+ //后端给的数据
|
|
|
+ tableData1:[],
|
|
|
+ //表格渲染的数据
|
|
|
+ tableData:[],
|
|
|
+ //表格的表头数据
|
|
|
+ tablehead:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.tablehead = luckDrawTableHead.luckDrawTableHead;
|
|
|
+ //动态监听页面的高度，如果改变则改变
|
|
|
+ window.addEventListener("resize", this.getHeight);
|
|
|
+ this.getHeight();
|
|
|
+ this.initialization();
|
|
|
+ this.changeList();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getHeight(){
|
|
|
+ this.height = window.innerHeight - 200
|
|
|
+ },
|
|
|
+ initialization(){
|
|
|
+ let arr;
|
|
|
+ for(var i = 0 ;i<1000;i++){
|
|
|
+ let num = i + 1;
|
|
|
+ arr = {
|
|
|
+ prop1:'测试' + num,
|
|
|
+ }
|
|
|
+ this.tableData1.push(arr)
|
|
|
+ }
|
|
|
+ this.total = this.tableData1.length;
|
|
|
+ },
|
|
|
+ //查询事件
|
|
|
+ selectClick(){
|
|
|
+ this.selectLoading = true;
|
|
|
+ console.log(this.form)
|
|
|
+ this.selectLoading = false;
|
|
|
+ },
|
|
|
+ //行间样式
|
|
|
+ tableRowStyle(){
|
|
|
+ return 'background-color:#CCF1FF;color:#000;text-align:center;height:10px'
|
|
|
+ },
|
|
|
+ //表头样式
|
|
|
+ tableHeaderColor(){
|
|
|
+ return 'background-color:#0C2278;color:#fff;text-align:center;height:20px'
|
|
|
+ },
|
|
|
+ changeList(){
|
|
|
+ if(this.tableData1.length){
|
|
|
+ this.tableData = [];
|
|
|
+ var x = (this.currentPage - 1) * this.pageSize;
|
|
|
+ var y = this.currentPage * this.pageSize;
|
|
|
+ if(x >= this.total){
|
|
|
+ x = this.total;
|
|
|
+ }
|
|
|
+ if(y >= this.total){
|
|
|
+ y = this.total
|
|
|
+ }
|
|
|
+ for(x;x<y;x++){
|
|
|
+ this.tableData.push(this.tableData1[x])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableLoading = false;
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.tableLoading = true;
|
|
|
+ this.pageSize = val
|
|
|
+ this.changeList();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.tableLoading = true;
|
|
|
+ this.currentPage = val
|
|
|
+ this.changeList();
|
|
|
+ },
|
|
|
+ exportData(){
|
|
|
+ if(this.tableData.length){
|
|
|
+ let tHeader = [];
|
|
|
+ let filterVal = [];
|
|
|
+ this.tablehead.filter( (item,i) =>{
|
|
|
+ tHeader.push(item.label);
|
|
|
+ filterVal.push(item.prop);
|
|
|
+ } )
|
|
|
+ this.export2Excel(tHeader,filterVal,this.tableData);
|
|
|
+ }else{
|
|
|
+ this.$alert('没有查询到数据，不能使用导出功能', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ export2Excel(tHeader,filterVal,dataTabel) {
|
|
|
+ var that = this;
|
|
|
+ this.downloadLoading = true
|
|
|
+ require.ensure([], () => {
|
|
|
+ const { export_json_to_excel } = require("@/assets/excel/Export2Excel.js"); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
|
|
|
+ let list = dataTabel;
|
|
|
+ let data = that.formatJson(filterVal, list);
|
|
|
+ export_json_to_excel(tHeader, data, that.tableTitle); // 导出的表格名称
|
|
|
+ });
|
|
|
+ this.downloadLoading = false;
|
|
|
+ },
|
|
|
+ //3.格式转换
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
+ return jsonData.map((v) => filterVal.map((j) => v[j]));
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .luckDraw{
|
|
|
+ .luckDraw_title{
|
|
|
+ width: 100%;height: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 46px;
|
|
|
+ font-weight: 900;
|
|
|
+ color: red;
|
|
|
+
|
|
|
+ }
|
|
|
+ .luckDraw_select{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;height: 60px;
|
|
|
+ padding-left: 50px;
|
|
|
+ .el-input{
|
|
|
+ width: 200px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fy{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
