|
@@ -1,169 +1,203 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div class="m-container">
|
|
|
- <h2>
|
|
|
- <div class="squrt"></div>抽奖记录
|
|
|
- </h2>
|
|
|
- <!-- 搜索标题 -->
|
|
|
- <save-form :inline="true"
|
|
|
- class="searchForm"
|
|
|
- ref="searchForm"
|
|
|
- @submit="search"
|
|
|
- @reset="onReset"
|
|
|
- :model="searchForm">
|
|
|
- <el-form-item prop="userId">
|
|
|
- <el-input v-model.number="searchForm.userId" maxlength="9" clearable placeholder="请输入学生编号" type="number"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="name">
|
|
|
- <el-input v-model.trim="searchForm.name" clearable
|
|
|
- placeholder="请输入奖项名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="time">
|
|
|
- <el-date-picker
|
|
|
- style="width: 100%"
|
|
|
- v-model="time"
|
|
|
- :picker-options="{ firstDayOfWeek: 1 }"
|
|
|
- @change="onDateChange"
|
|
|
- type="daterange"
|
|
|
- clearable
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="抽奖开始日期"
|
|
|
- end-placeholder="抽奖结束日期">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="organId">
|
|
|
- <el-select class="multiple"
|
|
|
- v-model.trim="searchForm.organId"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- placeholder="请选择分部">
|
|
|
- <el-option v-for="(item,index) in selects.branchs"
|
|
|
- :key="index"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button native-type="submit" type="danger">搜索</el-button>
|
|
|
- <el-button native-type="reset" type="primary">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </save-form>
|
|
|
- <!-- 列表 -->
|
|
|
- <div class="tableWrap">
|
|
|
- <el-table :data="tableList"
|
|
|
- :header-cell-style="{background:'#EDEEF0',color:'#444'}">
|
|
|
- <el-table-column align="center"
|
|
|
- prop="userId"
|
|
|
- label="学员编号">
|
|
|
- <template slot-scope="scope">
|
|
|
- <copy-text>{{ scope.row.userId }}</copy-text>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="user.username"
|
|
|
- label="学员姓名"></el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="user.phone"
|
|
|
- label="手机号码"></el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="user.organName"
|
|
|
- label="所属分部"></el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="luckDrawPrize.name"
|
|
|
- label="奖项">
|
|
|
- <template slot-scope="scope">
|
|
|
- <copy-text>{{ scope.row.luckDrawPrize.name }}</copy-text>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center"
|
|
|
- prop="createOn"
|
|
|
- label="抽奖时间">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination sync :total.sync="pageInfo.total"
|
|
|
- :page.sync="pageInfo.page"
|
|
|
- :limit.sync="pageInfo.limit"
|
|
|
- :page-sizes="pageInfo.page_size"
|
|
|
- @pagination="getList" />
|
|
|
- </div>
|
|
|
+ <div class="m-container">
|
|
|
+ <!-- <h2>
|
|
|
+ <div class="squrt"></div>
|
|
|
+ 抽奖记录
|
|
|
+ </h2> -->
|
|
|
+ <el-page-header @back="goBack" content="抽奖记录" class="setTrophy" />
|
|
|
+ <!-- 搜索标题 -->
|
|
|
+ <save-form
|
|
|
+ :inline="true"
|
|
|
+ class="searchForm"
|
|
|
+ ref="searchForm"
|
|
|
+ @submit="search"
|
|
|
+ @reset="onReset"
|
|
|
+ :model="searchForm"
|
|
|
+ >
|
|
|
+ <el-form-item prop="userId">
|
|
|
+ <el-input
|
|
|
+ v-model.number="searchForm.userId"
|
|
|
+ maxlength="9"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入学生编号"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="searchForm.name"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入奖项名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="time">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="time"
|
|
|
+ :picker-options="{ firstDayOfWeek: 1 }"
|
|
|
+ @change="onDateChange"
|
|
|
+ type="daterange"
|
|
|
+ clearable
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="抽奖开始日期"
|
|
|
+ end-placeholder="抽奖结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="organId">
|
|
|
+ <el-select
|
|
|
+ class="multiple"
|
|
|
+ v-model.trim="searchForm.organId"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="请选择分部"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in selects.branchs"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button native-type="submit" type="danger">搜索</el-button>
|
|
|
+ <el-button native-type="reset" type="primary">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </save-form>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <div class="tableWrap">
|
|
|
+ <el-table
|
|
|
+ :data="tableList"
|
|
|
+ :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" prop="userId" label="学员编号">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <copy-text>{{ scope.row.userId }}</copy-text>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="user.username"
|
|
|
+ label="学员姓名"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="user.phone"
|
|
|
+ label="手机号码"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="user.organName"
|
|
|
+ label="所属分部"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column align="center" prop="luckDrawPrize.name" label="奖项">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <copy-text>{{ scope.row.luckDrawPrize.name }}</copy-text>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="createOn" label="抽奖时间">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ sync
|
|
|
+ :total.sync="pageInfo.total"
|
|
|
+ :page.sync="pageInfo.page"
|
|
|
+ :limit.sync="pageInfo.limit"
|
|
|
+ :page-sizes="pageInfo.page_size"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import pagination from "@/components/Pagination/index";
|
|
|
-import { luckDrawLogList } from './api'
|
|
|
-import dayjs from 'dayjs';
|
|
|
-import cleanDeep from 'clean-deep';
|
|
|
+import { Searchs } from "@/helpers";
|
|
|
+import { luckDrawLogList } from "./api";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import cleanDeep from "clean-deep";
|
|
|
export default {
|
|
|
- components: { pagination },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- time: null,
|
|
|
- searchForm: {
|
|
|
- userId: null,
|
|
|
- name: null,
|
|
|
- startDate: null,
|
|
|
- organId: null,
|
|
|
- endDate: null
|
|
|
- },
|
|
|
- tableList: [],
|
|
|
- organList: null,
|
|
|
- pageInfo: {
|
|
|
- // 分页规则
|
|
|
- limit: 10, // 限制显示条数
|
|
|
- page: 1, // 当前页
|
|
|
- total: 1, // 总条数
|
|
|
- page_size: [10, 20, 40, 50] // 选择限制显示条数
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
- created () {
|
|
|
- // 设置默认为当前周
|
|
|
+ components: { pagination },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ time: null,
|
|
|
+ searchForm: {
|
|
|
+ userId: null,
|
|
|
+ name: null,
|
|
|
+ startDate: null,
|
|
|
+ organId: null,
|
|
|
+ endDate: null,
|
|
|
+ },
|
|
|
+ tableList: [],
|
|
|
+ organList: null,
|
|
|
+ pageInfo: {
|
|
|
+ // 分页规则
|
|
|
+ limit: 10, // 限制显示条数
|
|
|
+ page: 1, // 当前页
|
|
|
+ total: 1, // 总条数
|
|
|
+ page_size: [10, 20, 40, 50], // 选择限制显示条数
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {
|
|
|
+ // 设置默认为当前周
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {
|
|
|
+ let query = this.$route.query;
|
|
|
+ this.searchForm.groupId = Number(query.groupId);
|
|
|
+ const searchs = new Searchs(this.$route.path);
|
|
|
+ if (searchs.get().form?.groupId) {
|
|
|
+ this.searchForm.groupId = searchs.get().form?.groupId;
|
|
|
+ }
|
|
|
+ console.log(this.searchForm.groupId);
|
|
|
+ this.__init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async __init() {
|
|
|
+ // 获取分部
|
|
|
+ this.$store.dispatch("setBranchs");
|
|
|
+ this.getList();
|
|
|
},
|
|
|
- //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted () {
|
|
|
- this.__init()
|
|
|
- this.getList()
|
|
|
+ onDateChange(value) {
|
|
|
+ let searchForm = this.searchForm;
|
|
|
+ searchForm.startDate = null;
|
|
|
+ searchForm.endDate = null;
|
|
|
+ if (value) {
|
|
|
+ searchForm.startDate = dayjs(value[0]).format("YYYY-MM-DD");
|
|
|
+ searchForm.endDate = dayjs(value[1]).format("YYYY-MM-DD") + " 23:59:59";
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
- async __init() {
|
|
|
- // 获取分部
|
|
|
- this.$store.dispatch('setBranchs')
|
|
|
- },
|
|
|
- onDateChange(value) {
|
|
|
- let searchForm = this.searchForm
|
|
|
- searchForm.startDate = null
|
|
|
- searchForm.endDate = null
|
|
|
- if(value) {
|
|
|
- searchForm.startDate = dayjs(value[0]).format('YYYY-MM-DD')
|
|
|
- searchForm.endDate = dayjs(value[1]).format('YYYY-MM-DD') + ' 23:59:59'
|
|
|
- }
|
|
|
- },
|
|
|
- async getList() {
|
|
|
- let params = Object.assign({}, this.searchForm)
|
|
|
- params.rows = this.pageInfo.limit
|
|
|
- params.page = this.pageInfo.page
|
|
|
- await luckDrawLogList(cleanDeep(params)).then(res => {
|
|
|
- if (res.code == 200 && res.data) {
|
|
|
- this.tableList = res.data.rows
|
|
|
- this.pageInfo.total = res.data.total
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- search() {
|
|
|
- this.pageInfo.page = 1
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- onReset() {
|
|
|
- this.$refs.searchForm.resetFields()
|
|
|
- this.time = null
|
|
|
- this.searchForm.startDate = null
|
|
|
- this.searchForm.endDate = null
|
|
|
- this.pageInfo.page = 1
|
|
|
- this.getList()
|
|
|
+ async getList() {
|
|
|
+ let params = Object.assign({}, this.searchForm);
|
|
|
+ params.rows = this.pageInfo.limit;
|
|
|
+ params.page = this.pageInfo.page;
|
|
|
+ await luckDrawLogList(cleanDeep(params)).then((res) => {
|
|
|
+ if (res.code == 200 && res.data) {
|
|
|
+ this.tableList = res.data.rows;
|
|
|
+ this.pageInfo.total = res.data.total;
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.pageInfo.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ onReset() {
|
|
|
+ this.$refs.searchForm.resetFields();
|
|
|
+ this.time = null;
|
|
|
+ this.searchForm.startDate = null;
|
|
|
+ this.searchForm.endDate = null;
|
|
|
+ this.pageInfo.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ this.$router.push("/luckyDraw/lotteryManager");
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
@@ -172,4 +206,8 @@ export default {
|
|
|
top: 3px;
|
|
|
right: 2px;
|
|
|
}
|
|
|
-</style>
|
|
|
+.setTrophy {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|