school-manage/src/views/app/bill/current/current.vue

<style lang="less">
	@import "@/styles/table-common.less";
	@import "./logiticsCompany.less";
</style>
<template>
	<div class="search">
		<Card>
			<Row>
				<Form ref="searchForm" :model="searchForm" inline :label-width="100">
					<FormItem label="选择时间" prop="settlementDate">
						<DatePicker @on-change="changeDate" type="date" placeholder="请选择时间" style="width: 200px" />
					</FormItem>
					<FormItem style="margin-left: -35px" class="br">
						<Button @click="getDataList" type="primary" icon="ios-search">搜索</Button>
					</FormItem>
				</Form>
			</Row>
			<Row align="middle" justify="space-between" class="operation">
				<div>
					<Button @click="oneSettlement" icon="md-folder-open">结算</Button>
				</div>
			</Row>
			<Alert show-icon v-show="openTip">
				已选择
				<span class="select-count">{{ selectList.length }}</span> 项
				<a class="select-clear" @click="clearSelectAll">清空</a>
			</Alert>
			<Table :loading="loading" border :columns="columns" :data="data"
				@on-selection-change="allSelect" ref="table"></Table>
			<!-- <Row type="flex" justify="end" class="page">
				<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
					@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
					size="small" show-total show-elevator show-sizer></Page>
			</Row> -->
		</Card>
	</div>
</template>

<script>
	import {
		getBillList,
		settlementConfirm
	} from "@/api/app";
	export default {
		name: "logiticsCompany",
		components: {},
		data() {
			return {
				dictData: [{
					title: "全部",
					value: ""
				}, {
					title: "待确认",
					value: 0
				}, {
					title: "待结算",
					value: 1
				}, {
					title: "已打款",
					value: 2
				}],
				openTip: true,
				loading: true,
				reading: false,
				drop: false,
				selectList: [],
				searchForm: {
					regionId:JSON.parse(this.getStore("user")).departmentId,
					settlementDate:''
				},
				form: {},
				columns: [{
						type: "selection",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						type: "index",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						title: "账单周期",
						key: "billTime",
						minWidth: 100,
					},
					{
						title: "店铺名称",
						key: "shopName",
						minWidth: 100,
					},
					{
						title: "订单数量",
						key: "recordCount",
						minWidth: 150,
					},
					{
						title: "商品原价",
						key: "totalBaseAmount",
						width: 100,
					},
					{
						title: "商家营收",
						key: "totalSettlementAmount",
						width: 150,
					},
					{
						title: "平台营收",
						key: "totalCommissionAmount",
						width: 150,
					},
					{
						title: "操作",
						key: "action",
						width: 200,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h(
									"a", {
										on: {
											click: () => {
												this.stationBinding(params.row);
											},
										},
									},
									"详情"
								)
							]);
						},
					},
				],
				data: [],
				total: 0,
				Visiable: false,
			};
		},
		methods: {
			init() {
				this.searchForm.settlementDate = this.getTime()
				this.getDataList();
			},
			changeDate(v){
				this.searchForm.settlementDate = v
			},
			getTime() {
				const date = new Date();
				// 减去一天的毫秒数（24 * 60 * 60 * 1000），但更稳妥的方式是用 setDate
				date.setDate(date.getDate() - 1);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			allSelect(v){
				this.selectList = v
			},
			oneSettlement(){
				let data = {
					shopIds:[],
					settlementDate:this.searchForm.settlementDate,
					regionId:JSON.parse(this.getStore("user")).departmentId
				}
				for(let i=0;i<this.selectList.length;i++){
					data.shopIds.push(this.selectList[i].shopId)
				}
				settlementConfirm(data).then((res) => {
					this.loading = false;
					if (res.success) {
						this.$Message.success("结算成功");
					}
				});
			},
			clearSelectAll(){
				this.$refs.table.selectAll(false);
			},
			getDataList() {
				// 多条件搜索用户列表
				this.loading = true;
				getBillList(this.searchForm).then((res) => {
					this.loading = false;
					if (res.success) {
						this.data = res.result
						this.data.billTime = this.searchForm.settlementDate
					}
				});
			}
		},
		mounted() {
			this.init();
		},
	};
</script>