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" style="width: 50rem;">
					<!-- <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 class="generalModel_state_item">
					<!-- <span>{{$t('allOrder.Time')}}:</span> -->
					<input type="Number" :placeholder="$t('Generate.jsContent3')" v-model="orderId">
				</div>
			</div>
			<div class="generalModel_search">
				<div class="gallery_btn" @click="searchAllOrderList()">{{ $t('account.search') }}</div>
				<!-- <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: false,
					current: currentPage,
					pageSize: pageSize,
					total: total,
					showQuickJumper: true,
					bordered: false,
					size:'small',
					position:['bottomCenter']
				}"
			>
				<template
					#bodyCell="{ column, text, record, index }"
				>
					<div
						class="operate_list"
						v-if="column?.Operations"
					>
						<div class="operate_item"><a v-if="text" :href="text" target="_blank">LINK</a><span v-else>\</span></div>
					</div>
				</template>
				<template #itemRender="{ type, originalElement }">
					{{ type }}
				</template>
			</a-table>
			<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }" :columns="columns" :data-source="collectionList" /> -->
		</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: "id",
                    key: "id",
                },
				{
                    title: useI18n().t('allOrder.Time'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: useI18n().t('allOrder.Money'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "amount",
                    key: "amount",
                },
                {
                    title: useI18n().t('allOrder.PaymentMethods'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "paymentMethod",
                    key: "paymentMethod",
                },
                {
                    title: useI18n().t('allOrder.State'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "state",
                    key: "state",
                },
                {
                    title: useI18n().t('allOrder.OrderType'),
                    align: "center",
                    ellipsis: true,
                    dataIndex: "orderType",
                    key: "orderType",
                },
				{
                    title: useI18n().t('allOrder.Receipt'),
                    align: "center",
                    ellipsis: true,
					Operations:true,
                    dataIndex: "invoiceLink",
                    key: "invoiceLink",
                },

                // {
                //     title: useI18n().t("HistoryPage.Operations"),
                //     key: "operation",
                //     align: "center",
                //     // slots:{customRender:'action'}
                //     Operations: true,
                // },
            ];
        });
        let dataList: any = ref([]);
        let rangePickerValue: any = ref([]);
        let orderId: 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',
			},
		])
		let selectedRowKey = ref([])
		const onSelectChange= (selectedRowKeys:any,)=>{
			selectedRowKey.value = selectedRowKeys
		}
        return {
            columns,
            dataList,
            renameData,
			rangePickerValue,
			orderId,
			collectionList,
            userInfo,
			currentState,
			state,
			t,
			selectedRowKey,
			onSelectChange,
        };
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            historyTableHeight: 0,
            searchCollectionName: "",
        };
    },
    mounted() {
    },
    methods: {
		init(id:any){
			this.currentPage = 1
			this.pageSize = 10
			this.orderId = id
			nextTick(()=>{
				let historyTable: any = this.$refs.historyTable;
				this.historyTableHeight = historyTable.clientHeight - 100;
			})
			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,
				id:this.orderId
			}
			// 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{
					rv.content.forEach((item:any) => item.key = item.id);
					this.collectionList = rv.content
					this.total = rv.total
				}
				
            });
        },
    },
});
</script>
<style lang="less" scoped>
.allOrder_page{
	padding: 0 !important;
	flex: 1;
}
.generalModel_page {
	.generalModel_state_item{
	}
}
</style>