tj

src/views/index/components/luckDraw.vue

@@ -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>