aida_front/src/component/Pay/allOrder.vue

<template>
    <div class="allOrder_page generalModel_page">
		<div class="generalModel_table_search">
			<div class="generalModel_state">
				<div class="generalModel_state_item">
					<span>{{$t('allOrder.Time')}}:</span>
						<a-range-picker
						class="range_picker"
						v-model:value="rangePickerValue"
						:placeholder="[
							$t('HistoryPage.StartDate'),
							$t('HistoryPage.EndDate'),
						]"
						:show-time="{ format: 'HH:mm:ss' }"
						format="YYYY-MM-DD HH:mm:ss"
						valueFormat="YYYY-MM-DD HH:mm:ss"
					>
						<template #suffixIcon>
							<span
								class="icon iconfont range_picker_icon icon-rili"
							></span>
						</template>
					</a-range-picker>
				</div>
			</div>
			<div class="generalModel_search">
				<div
					class="generalModel_search_item"
					@click="searchAllOrderList()"
				>
					<span
						class="icon iconfont icon-sousuo"
					></span>
				</div>
			</div>
		</div>
		<div class="generalModel_table_content" ref="historyTable">
			<a-table
				:columns="columns"
				:data-source="collectionList"
				: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.Serial'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "orderNo",
                    key: "orderNo",
                },
                {
                    title: useI18n().t('allOrder.Title'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "title",
                    key: "title",
                },
                {
                    title: useI18n().t('allOrder.Money'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "totalFee",
                    key: "totalFee",
                },
                {
                    title: useI18n().t('allOrder.Payment'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "paymentType",
                    key: "paymentType",
                },
                {
                    title: useI18n().t('allOrder.State'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "orderStatus",
                    key: "orderStatus",
                },

                // {
                //     title: useI18n().t("HistoryPage.Operations"),
                //     key: "operation",
                //     align: "center",
                //     // slots:{customRender:'action'}
                //     Operations: true,
                // },
            ];
        });
        let dataList: any = ref([]);
        let rangePickerValue: any = ref([]);
        let collectionList: any = ref([]);
        let userInfo: any = {};
		let currentState = ref({
			value:'income',
		})
		let state:any = ref([
			{
				label:'Income',
				value:'income',
			},
			{
				label:'Expend',
				value:'expend',
			},
		])
        return {
            columns,
            dataList,
            renameData,
			rangePickerValue,
			collectionList,
            userInfo,
			currentState,
			state,
			t,
        };
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            historyTableHeight: 0,
            searchCollectionName: "",
        };
    },
    mounted() {
        // let historyTable: any = this.$refs.historyTable;
        // this.historyTableHeight = historyTable.clientHeight - 130;
		this.getAllOrderList()
		nextTick(()=>{
			let historyTable: any = this.$refs.historyTable;
			this.historyTableHeight = historyTable.clientHeight - 130;
		})
    },
    methods: {
		init(){
			this.currentPage = 1
			this.pageSize = 10
			this.getAllOrderList()
		},
        //改变页码
        changePage(e: any) {
            this.currentPage = e.current
            this.pageSize = e.pageSize
            this.getAllOrderList();
        },
		//查询列表
		searchAllOrderList() {
            this.currentPage = 1;
            this.getAllOrderList();
        },
		//获取列表
        getAllOrderList() {
			let startDate: any = this.rangePickerValue[0]?this.rangePickerValue[0] : "";
            let endDate: any = this.rangePickerValue[1]?this.rangePickerValue[1] : "";
			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.orderInfoList,data).then((rv: any) => {
				if(this.currentPage > 1 && rv.content.length == 0){
					this.currentPage = 1
					this.getAllOrderList()
				}else{
					this.collectionList = rv.content
					this.total = rv.total
				}
				
            });
        },
    },
});
</script>
<style lang="less">
.allOrder_page{
	padding: 0 !important;
	flex: 1;
}
.generalModel_page {
}
</style>