gold-vue/src/views/history/newHistory.vue

<template>
    <el-card class="card1">
        <el-text size="large">姓名：</el-text>
        <el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 12vw;margin-right:1vw"
            clearable></el-input>

        <el-text size="large">精网号：</el-text>
        <el-input v-model="searchObj.jwcode" placeholder="请输入精网号" style="width: 12vw;margin-right:1vw"
            clearable></el-input>

        <el-text size="large" style="width: 80px">更新时间：</el-text>
        <el-date-picker v-model="dateRange" type="datetimerange" :default-time="defaultTime" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间" style="width: 25vw;margin-right:1vw" />

        <el-button type="primary" @click="get">查询</el-button>
        <el-button type="success" @click="resetSearch">重置</el-button>
    </el-card>

    <el-card class="card2" style="margin-top:10px" v-show="tableData.length > 0">
        <el-table :data="tableData" style="width: 82vw;height:60vh">
            <el-table-column type="index" label="序号" width="100" header-align="center" align="center">
                <template #default="scope">
                    {{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="客户姓名" width="180" show-overflow-tooltip />
            <el-table-column prop="jwcode" label="精网号" width="180" header-align="center" align="center" />
            <el-table-column prop="num" label="数量" width="180" header-align="center" align="center" />
            <el-table-column prop="updateType" show-overflow-tooltip label="更新类型" width="180" align="center" />
            <el-table-column prop="freeGold" label="免费金币" width="180" align="center" />
            <el-table-column prop="permanentGold" label="永久金币" width="180" align="center" />
            <el-table-column prop="taskGold" label="任务金币" width="180" align="center" />
            <el-table-column prop="operator" label="操作人" width="180" />
            <el-table-column prop="createTime" label="更新时间" width="200" header-align="center" align="center" />
            <el-table-column prop="remark" label="备注" show-overflow-tooltip width="200" align="center" />
        </el-table>
        <el-pagination background style="margin-top:20px" v-model:current-page="pagination.pageNum"
            v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
    </el-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
import moment from 'moment'
import { useAdminStore } from "@/store/index.js"
import { storeToRefs } from "pinia"
import dayjs from 'dayjs'
const adminStore = useAdminStore()
const { adminData, menuTree } = storeToRefs(adminStore)
import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js"
const defaultTime = [
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
]

const tableData = ref([])
const dateRange = ref([])
const searchObj = ref({
    name: '',
    jwcode: ''
})
const pagination = ref({
    pageNum: 1,
    pageSize: 50,
    total: 0
})
//获取新表数据
const get = async function () {
    try {
        if (searchObj.value.name || searchObj.value.jwcode) {
            const startTime = dateRange.value && dateRange.value[0] ? moment(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : ""
            const endTime = dateRange.value && dateRange.value[1] ? moment(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : ""
            const res = await API({
                url: '/history/getNewHistoryRecord',
                data: {
                    ...searchObj.value,
                    startTime: startTime,
                    endTime: endTime,
                    pageNum: pagination.value.pageNum,
                    pageSize: pagination.value.pageSize,
                }
            })
            if (res.code == 200) {
                ElMessage.success('查询成功')
                tableData.value = res.data.list
                console.log('tableData.value', res.data.list)
                pagination.value.total = res.data.total
            }
        } else {
            ElMessage.error('请输入姓名或精网号')
            return
        }
    } catch (e) {
        ElMessage.error(e.message)
    }
}

const resetSearch = function () {
    searchObj.value = {
        name: '',
        jwcode: ''
    }
    dateRange.value = []
}
const handlePageSizeChange = function (val) {
    pagination.value.pageSize = val
    get()

}
const handleCurrentChange = function (val) {
    pagination.value.pageNum = val
    get()
}
</script>

<style scoped lang="scss">

.pagination {
  display: flex;
  margin-top: 1vh;
}


// 搜索的卡片样式
.card1 {
  background: #F3FAFE;
}

// 表单的卡片样式
.card2 {
  background: #E7F4FD;
}


// 表头背景等
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
/* 表格 */
:deep(.el-table__body td) {
  background-color: #F3FAFE !important;
}

/* 表头 */
:deep(.el-table__header th) {
  background-color: #F3FAFE !important;
}

/* 鼠标悬停 */
:deep(.el-table__row:hover > .el-table__cell) {
  background-color: #E5EBFE !important;
}


</style>