|
|
@@ -0,0 +1,268 @@
|
|
|
+<template>
|
|
|
+ <div class="form-wrap">
|
|
|
+ <el-form
|
|
|
+ class="search-box"
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :inline="true">
|
|
|
+ <div class="block-title">
|
|
|
+ 查询条件
|
|
|
+ </div>
|
|
|
+ <el-form-item
|
|
|
+ label="起始时间"
|
|
|
+ prop="timeBegin">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.timeBegin"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择日期时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="截止时间"
|
|
|
+ prop="timeEnd">
|
|
|
+ <el-date-picker
|
|
|
+ default-time="23:59:59"
|
|
|
+ v-model="form.timeEnd"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择日期时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="持卡人姓名"
|
|
|
+ prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入持卡人姓名">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="卡名"
|
|
|
+ prop="cardName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.cardName"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入卡名">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="证件号"
|
|
|
+ prop="idcard">
|
|
|
+ <el-input
|
|
|
+ v-model="form.idcard"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入证件号">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="性别"
|
|
|
+ prop="sex">
|
|
|
+ <el-select
|
|
|
+ v-model="form.sex"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ :value="0"
|
|
|
+ label="女">
|
|
|
+ </el-option>
|
|
|
+ <el-option
|
|
|
+ :value="1"
|
|
|
+ label="男">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <div
|
|
|
+ class="btn-wrap"
|
|
|
+ style="margin-bottom:20px">
|
|
|
+ <el-button
|
|
|
+ @click="reset">
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ :disabled="loading"
|
|
|
+ type="primary"
|
|
|
+ @click="handleSearch">
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="reportExport">
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div class="table-box">
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableData">
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="核销时间"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="持卡人姓名"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="cardName"
|
|
|
+ label="卡名"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="idcard"
|
|
|
+ label="证件号"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="性别"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.sex === 1 ? '男' : '女' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="照片"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ v-if="scope.row.imgUrl"
|
|
|
+ style="width: 60px; height: 60px"
|
|
|
+ :src="scope.row.imgUrl"
|
|
|
+ :preview-src-list="[scope.row.imgUrl]"
|
|
|
+ fit="cover">
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :current-page.sync="form.pageNum"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="form.pageSize"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="getList()"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getWlkData } from '@/api/wlkData'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'WlkDetail',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ selectedStat: null,
|
|
|
+ form: {
|
|
|
+ id: 0,
|
|
|
+ export: false,
|
|
|
+ exportDetail: false,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ timeBegin: new Date(moment().startOf('day').subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss')),
|
|
|
+ timeEnd: new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')),
|
|
|
+ name: '',
|
|
|
+ cardName: '',
|
|
|
+ idcard: '',
|
|
|
+ sex: ''
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setStatRow (row) {
|
|
|
+ this.selectedStat = row
|
|
|
+ // 设置查询时间为选中的核销日期当天
|
|
|
+ this.form.timeBegin = new Date(moment(row.checkDate).startOf('day').format('YYYY-MM-DD HH:mm:ss'))
|
|
|
+ this.form.timeEnd = new Date(moment(row.checkDate).endOf('day').format('YYYY-MM-DD HH:mm:ss'))
|
|
|
+ this.form.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ reset () {
|
|
|
+ this.$refs.form.resetFields()
|
|
|
+ },
|
|
|
+ handleSearch () {
|
|
|
+ this.form.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleSizeChange (size) {
|
|
|
+ this.form.pageSize = size
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ reportExport () {
|
|
|
+ this.$confirm('是否要导出明细数据', '确认提示', {
|
|
|
+ confirmButtonText: '是',
|
|
|
+ cancelButtonText: '否',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.handleExport({
|
|
|
+ ...this.form,
|
|
|
+ export: true,
|
|
|
+ exportDetail: true
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.handleExport({
|
|
|
+ ...this.form,
|
|
|
+ export: true,
|
|
|
+ exportDetail: false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleExport (params) {
|
|
|
+ const exportParams = { ...params }
|
|
|
+ if (exportParams.timeBegin) {
|
|
|
+ exportParams.timeBegin = moment(exportParams.timeBegin).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ } else {
|
|
|
+ exportParams.timeBegin = ''
|
|
|
+ }
|
|
|
+ if (exportParams.timeEnd) {
|
|
|
+ exportParams.timeEnd = moment(exportParams.timeEnd).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ } else {
|
|
|
+ exportParams.timeEnd = ''
|
|
|
+ }
|
|
|
+ getWlkData(exportParams).then(() => {
|
|
|
+ this.$message.success('导出成功。')
|
|
|
+ }, () => {
|
|
|
+ this.$message.error('导出失败。')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList () {
|
|
|
+ this.loading = true
|
|
|
+ const params = { ...this.form }
|
|
|
+
|
|
|
+ if (params.timeBegin) {
|
|
|
+ params.timeBegin = moment(params.timeBegin).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ } else {
|
|
|
+ params.timeBegin = ''
|
|
|
+ }
|
|
|
+
|
|
|
+ if (params.timeEnd) {
|
|
|
+ params.timeEnd = moment(params.timeEnd).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ } else {
|
|
|
+ params.timeEnd = ''
|
|
|
+ }
|
|
|
+
|
|
|
+ getWlkData(params).then(res => {
|
|
|
+ this.total = res.data.total || 0
|
|
|
+ this.tableData = res.data.records || []
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+</style>
|