aida_front/src/component/Pay/creditsDetail.vue

<template>
    <div class="creditsDetail_page generalModel_page">
		<div class="generalModel_table_search">
			<div class="generalModel_state">
				<div class="generalModel_state_item">
					<!-- <span>Time:</span> -->
						<a-range-picker
						class="range_picker"
						v-model:value="rangePickerValue"
						:placeholder="[
							$t('HistoryPage.StartDate'),
							$t('HistoryPage.EndDate'),
						]"
						valueFormat="YYYY-MM-DD"
					>
						<template #suffixIcon>
							<span
								class="icon iconfont range_picker_icon icon-rili"
							></span>
						</template>
					</a-range-picker>
				</div>
				<div class="generalModel_state_item">
					<!-- <span>State:</span> -->
					<a-select v-model:value="currentState.value" style="width:25rem" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
				</div>
			</div>

			
			<div class="generalModel_search">
				<div class="gallery_btn" @click="searchcreditsDetailList()">Search</div>
				<!-- <div
					class="generalModel_search_item"
					@click="searchcreditsDetailList()"
				>
					<span
						class="icon iconfont icon-sousuo"
					></span>
				</div> -->
			</div>
		</div>
		<div class="generalModel_table_content" ref="historyTable">
			<a-table
				:columns="columns"
				:data-source="creditsDetailList"
				:scroll="{ y: historyTableHeight }"
				@change="changePage"
				:pagination="{
					showSizeChanger: true,
					current: currentPage,
					pageSize: pageSize,
					total: total,
					showQuickJumper: true,
					bordered: false,
				}"
			>
				<template
					#bodyCell="{ column, text, record, index }"
				>
					<div
						class="operate_list"
						v-if="column?.Operations"
					>
						<!-- <div
							v-if="record.orderStatus == '支付成功'"
							class="operate_item"
							@click="refund(record)"
						>
							refund
						</div> -->
						<!-- <div class="operate_item">{{ $t('HistoryPage.Delete') }}</div> -->
					</div>
				</template>
			</a-table>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, computed } from "vue";
import { Https } from "@/tool/https";
import { useI18n } from "vue-i18n";
export default defineComponent({
    components: {
    },
    setup() {
        let renameData: any = ref({}); //修改名字选中的数据
		const {t} = useI18n()
        const columns: any = computed(() => {
            return [
				{
                    title: useI18n().t('allOrder.changedCredits'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "changedCredits",
                    key: "changedCredits",
                },
                {
                    title: useI18n().t('allOrder.changeEvent'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "changeEvent",
                    key: "changeEvent",
                },
                {
                    title: useI18n().t('allOrder.createTime'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: useI18n().t('allOrder.credits'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "credits",
                    key: "credits",
                },

                // {
                //     title: useI18n().t("HistoryPage.Operations"),
                //     key: "operation",
                //     align: "center",
                //     // slots:{customRender:'action'}
                //     Operations: true,
                // },
            ];
        });
        let dataList: any = ref([]);
        let rangePickerValue: any = ref([]);
        let creditsDetailList: any = ref([]);
        let userInfo: any = {};
		let currentState = ref({
			value:'income',
		})
		let state:any = ref([
			{
				label:useI18n().t('allOrder.Income'),
				value:'income',
			},
			{
				label:useI18n().t('allOrder.Expend'),
				value:'expend',
			},
		])
        return {
            columns,
            dataList,
            renameData,
			rangePickerValue,
			creditsDetailList,
            userInfo,
			currentState,
			state,
			t,
        };
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            historyTableHeight: 0,
            searchCollectionName: "",
        };
    },
    mounted() {
        
		// this.getCreditsDetailList()
    },
    methods: {
		init(){
			this.currentPage = 1
			this.pageSize = 10
			this.getCreditsDetailList()
			nextTick(()=>{
				let historyTable: any = this.$refs.historyTable;
				this.historyTableHeight = historyTable.clientHeight - 130;
			})
		},
        //改变页码
        changePage(e: any) {
            this.currentPage = e.current
            this.pageSize = e.pageSize
            this.getCreditsDetailList();
        },
		//查询列表
		searchcreditsDetailList() {
            this.currentPage = 1;
            this.getCreditsDetailList();
        },
		//获取列表
        getCreditsDetailList() {
			let startTime = '00:00:00'
			let endTime = '00:00:00'
			let startDate: any = this.rangePickerValue[0]
                ? this.rangePickerValue[0]+' '+startTime
                : "";
            let endDate: any = this.rangePickerValue[1]
                ? this.rangePickerValue[1]+' '+endTime
                : "";
			let data = {
				endTime: endDate,
				isIncome: this.currentState.value == 'income'?true:false,
				page:this.currentPage,
                size:this.pageSize,
				startTime: startDate
			}
			// getCreditsDetail
			// orderInfoList
            Https.axiosPost(Https.httpUrls.getCreditsDetail,data).then((rv: any) => {
				if(this.currentPage > 1 && rv.content.length == 0){
					this.currentPage = 1
					this.getCreditsDetailList()
				}else{
					this.creditsDetailList = rv.content
					this.total = rv.total
				}
				
            });
        },
    },
});
</script>
<style lang="less">
.creditsDetail_page {
	padding: 0 !important;
	flex: 1;
}
</style>