|
|
@@ -1,132 +1,130 @@
|
|
|
<template>
|
|
|
<div class="luckDraw">
|
|
|
<div class="luckDraw_title">
|
|
|
- <span class="text">中奖名单</span>
|
|
|
+ <span class="text">中奖名单</span>
|
|
|
</div>
|
|
|
<div class="luckDraw_select">
|
|
|
- <el-date-picker
|
|
|
- v-model="form.rflDate"
|
|
|
- type="date"
|
|
|
- placeholder="请选择中奖时间">
|
|
|
- </el-date-picker>
|
|
|
- <el-button type="primary" @click="selectClick" :loading="selectLoading">
|
|
|
- <i class="el-icon-search"></i> 查询
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" @click="menuExport" :loading="downloadLoading">
|
|
|
- <i class="el-icon-document"></i> 导出(Excel)
|
|
|
- </el-button>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.rflDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择中奖日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button type="primary" @click="selectClick" :loading="selectLoading">
|
|
|
+ <i class="el-icon-search"></i> 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="menuExport" :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"
|
|
|
- size="mini"
|
|
|
+ <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"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <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
|
|
|
- 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>
|
|
|
+ </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'
|
|
|
-import { renderTime,sjTime } from '@/utils/sharedJsFile'
|
|
|
+import luckDrawTableHead from "./luckDrawTableHead";
|
|
|
+import { renderTime, sjTime } from "@/utils/sharedJsFile";
|
|
|
export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- //查询按钮的状态
|
|
|
- selectLoading:false,
|
|
|
- //导出按钮的状态
|
|
|
- downloadLoading:false,
|
|
|
- //导出excel文件的名字
|
|
|
- tableTitle:'中奖名单',
|
|
|
- //表格的高度
|
|
|
- height:null,
|
|
|
- //表格的每一列的宽度,若没有再表头设置则采用
|
|
|
- width:150,
|
|
|
- //总条目数
|
|
|
- total:null,
|
|
|
- //每页显示条目个数
|
|
|
- pageSize: 100,
|
|
|
- //每一页面的显示的条目个数数组
|
|
|
- pageSizes: [5, 100, 200, 300],
|
|
|
- //当前页数
|
|
|
- currentPage: 1,
|
|
|
- //表格的加载状态
|
|
|
- tableLoading: false,
|
|
|
- //查询条件
|
|
|
- form:{
|
|
|
- rflDate:new Date()
|
|
|
- },
|
|
|
- //表格渲染的数据
|
|
|
- tableData:[],
|
|
|
- //表格的表头数据
|
|
|
- tablehead:[],
|
|
|
- }
|
|
|
- },
|
|
|
- created(){
|
|
|
- this.tablehead = luckDrawTableHead.luckDrawTableHead;
|
|
|
- //动态监听页面的高度，如果改变则改变
|
|
|
- window.addEventListener("resize", this.getHeight);
|
|
|
- this.getHeight();
|
|
|
- this.initialization();
|
|
|
- },
|
|
|
- methods:{
|
|
|
- menuExport() {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //查询按钮的状态
|
|
|
+ selectLoading: false,
|
|
|
+ //导出按钮的状态
|
|
|
+ downloadLoading: false,
|
|
|
+ //导出excel文件的名字
|
|
|
+ tableTitle: "中奖名单",
|
|
|
+ //表格的高度
|
|
|
+ height: null,
|
|
|
+ //表格的每一列的宽度,若没有再表头设置则采用
|
|
|
+ width: 150,
|
|
|
+ //总条目数
|
|
|
+ total: null,
|
|
|
+ //每页显示条目个数
|
|
|
+ pageSize: 100,
|
|
|
+ //每一页面的显示的条目个数数组
|
|
|
+ pageSizes: [5, 100, 200, 300],
|
|
|
+ //当前页数
|
|
|
+ currentPage: 1,
|
|
|
+ //表格的加载状态
|
|
|
+ tableLoading: false,
|
|
|
+ //查询条件
|
|
|
+ form: {
|
|
|
+ rflDate: new Date(),
|
|
|
+ },
|
|
|
+ //表格渲染的数据
|
|
|
+ tableData: [],
|
|
|
+ //表格的表头数据
|
|
|
+ tablehead: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.tablehead = luckDrawTableHead.luckDrawTableHead;
|
|
|
+ //动态监听页面的高度，如果改变则改变
|
|
|
+ window.addEventListener("resize", this.getHeight);
|
|
|
+ this.getHeight();
|
|
|
+ this.initialization();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ menuExport() {
|
|
|
if (this.tableData.length < 1) {
|
|
|
this.$message.error("当前无数据可供导出!");
|
|
|
return false;
|
|
|
}
|
|
|
let data = [];
|
|
|
let i = 0;
|
|
|
- this.tableData.forEach((e)=>{
|
|
|
- i++;
|
|
|
- data.push({
|
|
|
- '序号':i,
|
|
|
- '单位':e.empDept,
|
|
|
- '工号':e.empNo,
|
|
|
- '姓名':e.empName,
|
|
|
- '电话号码':e.cellPhoneNo,
|
|
|
- '中奖等级':e.prizeDesc,
|
|
|
- '中奖时间':e.rflDate,
|
|
|
- })
|
|
|
- })
|
|
|
+ this.tableData.forEach((e) => {
|
|
|
+ i++;
|
|
|
+ data.push({
|
|
|
+ 序号: i,
|
|
|
+ 单位: e.empDept,
|
|
|
+ 工号: e.empNo,
|
|
|
+ 姓名: e.empName,
|
|
|
+ 电话号码: e.cellPhoneNo,
|
|
|
+ 中奖等级: e.prizeDesc,
|
|
|
+ 中奖时间: e.rflDate,
|
|
|
+ });
|
|
|
+ });
|
|
|
// 表格标题
|
|
|
var dataTitle = this.tableTitle;
|
|
|
// 配置文件类型
|
|
|
@@ -157,7 +155,7 @@ export default {
|
|
|
// 居中
|
|
|
horizontal: "center",
|
|
|
vertical: "center",
|
|
|
- indent: 0
|
|
|
+ indent: 0,
|
|
|
},
|
|
|
};
|
|
|
var tmpdata = json[0];
|
|
|
@@ -292,110 +290,137 @@ export default {
|
|
|
}, 100);
|
|
|
},
|
|
|
|
|
|
- getHeight(){
|
|
|
- this.height = window.innerHeight - 200
|
|
|
- },
|
|
|
- initialization(){
|
|
|
- this.axios.get('/icore.icp.web/game/v1/rflemplotterys/?rflDate=&pageNum='+this.currentPage+'&pageSize='+this.pageSize+'&lotteryResult=1').then((res)=>{
|
|
|
- this.tableData = res.data.data.list
|
|
|
- this.total = res.data.data.total;
|
|
|
- })
|
|
|
- },
|
|
|
- //查询事件
|
|
|
- selectClick(){
|
|
|
- this.selectLoading = true;
|
|
|
- let Date = renderTime(sjTime(this.form.rflDate)).slice(0,10)
|
|
|
- this.axios.get('/icore.icp.web/game/v1/rflemplotterys/?rflDate='+Date+'&pageNum='+this.currentPage+'&pageSize='+this.pageSize+'&lotteryResult=1').then((res)=>{
|
|
|
- this.tableData = res.data.data.list
|
|
|
- this.total = res.data.data.total;
|
|
|
- })
|
|
|
- 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(){
|
|
|
- this.initialization();
|
|
|
- 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); // 导出的表格名称
|
|
|
+ getHeight() {
|
|
|
+ this.height = window.innerHeight - 200;
|
|
|
+ },
|
|
|
+ initialization() {
|
|
|
+ this.axios
|
|
|
+ .get(
|
|
|
+ "/icore.icp.web/game/v1/rflemplotterys/?rflDate=&pageNum=" +
|
|
|
+ this.currentPage +
|
|
|
+ "&pageSize=" +
|
|
|
+ this.pageSize +
|
|
|
+ "&lotteryResult=1"
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ this.tableData = res.data.data.list;
|
|
|
+ this.total = res.data.data.total;
|
|
|
});
|
|
|
- this.downloadLoading = false;
|
|
|
- },
|
|
|
- //3.格式转换
|
|
|
- formatJson(filterVal, jsonData) {
|
|
|
- return jsonData.map((v) => filterVal.map((j) => v[j]));
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ //查询事件
|
|
|
+ selectClick() {
|
|
|
+ this.selectLoading = true;
|
|
|
+ let Time = renderTime(sjTime(this.form.rflDate)).slice(0, 10);
|
|
|
+ this.axios
|
|
|
+ .get(
|
|
|
+ "/icore.icp.web/game/v1/rflemplotterys/?rflDate=" +
|
|
|
+ Time +
|
|
|
+ "&pageNum=" +
|
|
|
+ this.currentPage +
|
|
|
+ "&pageSize=" +
|
|
|
+ this.pageSize +
|
|
|
+ "&lotteryResult=1"
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ this.tableData = res.data.data.list;
|
|
|
+ this.total = res.data.data.total;
|
|
|
+ });
|
|
|
+ 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() {
|
|
|
+ this.initialization();
|
|
|
+ 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]));
|
|
|
+ },
|
|
|
+ a() {
|
|
|
+ this.height = null;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ document.removeEventListener("resize", this.a);
|
|
|
+ this.a();
|
|
|
+ },
|
|
|
+};
|
|
|
</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%;
|
|
|
- }
|
|
|
+.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>
|
Your Name