baidaSupplier/src/pages/index/order.vue

<template>
	<div>
		<Card :bordered="false" dis-hover class="mt15">
			<Form ref="orderData" :model="orderData" :label-width="labelWidth" :label-position="labelPosition"
				class="tabform" @submit.native.prevent>
				<div class="acea-row">
					<FormItem label="时间选择：">
						<DatePicker :editable="false" :clearable="true" @on-change="onchangeTime" :value="timeVal"
							format="yyyy/MM/dd HH:mm:ss" type="datetimerange" placement="bottom-start"
							placeholder="自定义时间" style="width: 250px" class="mr30" :options="options"></DatePicker>
					</FormItem>
					<FormItem label="订单审核：">
						<Select v-model="orderData.status" style="width: 250px" class="mr30" clearable
							@on-change="userSearchs" placeholder="全部">
							<Option value="-1">全部</Option>
							<Option value="0">审核中</Option>
							<Option value="1">已通过</Option>
							<Option value="2">未通过</Option>
						</Select>
					</FormItem>
					<Button type="primary" @click="userSearchs" class="ml20">查询</Button>
					<Button @click="reset" class="ml20">重置</Button>
				</div>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="mt15">
			<Table row-key="id" :load-data="handleLoadData" :columns="columns1" :data="orderList" update-show-children>
				<template slot-scope="{ row, index }" slot="action">
					<a v-if="row.hasOwnProperty('level') && row.level < 4" @click="add(row.id)">添加</a>
					<Divider v-if="row.hasOwnProperty('level') && row.level < 4" type="vertical" />
					<a @click="edit(row.id)">编辑</a>
					<Divider v-if="!row.hasOwnProperty('children')" type="vertical" />
					<a v-if="!row.hasOwnProperty('children')" @click="del(row, '删除城市', index)">删除</a>
				</template>
			</Table>
			<div class="acea-row row-right mt15">
				<Page :total="total" :current="orderData.page" show-elevator show-total @on-change="pageChange"
					:page-size="orderData.limit" />
			</div>
		</Card>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import userDetails from "@/components/userDetails/userDetails";
	import timeOptions from "@/utils/timeOptions";
	import util from "@/libs/util";
	import Setting from "@/setting";
	import exportExcel from "@/utils/newToExcel.js";
	import {
		cityApi
	} from "@/api/setting";
	import {
		order_statistics
	} from "@/api/order";
	export default {
		name: "index",
		components: {
			userDetails,
		},
		data() {
			return {
				columns1: [{
						title: "编号",
						key: "id",
						width: 80,
					},
					{
						title: "地区名称",
						key: "label",
						minWidth: 300,
						tree: true
					},
					{
						title: "订单量",
						key: "count",
						minWidth: 100,
					},
					{
						title: "销售额",
						key: "total_price",
						minWidth: 120,
					},
					{
						title: "上级名称",
						key: "parent_name",
						minWidth: 100,
					},
					{
						title: "操作",
						slot: "action",
						// fixed: "right",
						minWidth: 120,
					},
				],
				showSend: false, //显示审核弹窗
				isAll: 0,
				isCheckBox: false,
				checkUidList: [],
				timeVal: [],
				options: timeOptions,
				// 订单列表
				orderData: {
					page: 1,
					limit: 10,
					status: "1",
					start_time: "",
					end_time: "",
					parent_id:""
				},
				orderList: [],
				total: 0,
				loading: false,
			};
		},
		watch: {
			$route() {
				if (this.$route.fullPath === `${Setting.roterPre}/order/list?type=7&status=1`) {
					this.getPath();
				}
			}
		},
		computed: {
			...mapState("store/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 80;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			if (this.$route.fullPath === `${Setting.roterPre}/order/list?type=7&status=1`) {
				this.getPath();
			} else {
				this.getList();
			}
			let data = {
				pid: 0
			}
			this.cityInfo(data);
		},
		mounted() {},
		methods: {
			// 查看更多订单信息
			handleLoadData(item, callback) {
				item._loading = true;
				let pushData = Object.assign({},this.orderData);
				pushData.parent_id = item.id;
				order_statistics(pushData).then(res => {
					item._loading = false;
					callback(res.data);
				}).catch(err => {
					this.loading = false;
					this.$Message.error(err.msg)
				})
			},
			//跳转刷新
			getPath() {
				this.orderData.page = 1;
				this.orderData.status = this.$route.query.status;
				this.getList();
			},
			allReset() {
				this.isAll = 0;
				this.isCheckBox = false;
				this.$refs.xTable.setAllCheckboxRow(false);
				this.checkUidList = [];
			},
			allPages(e) {
				this.isAll = e;
				if (e == 0) {
					this.$refs.xTable.toggleAllCheckboxRow();
					// this.checkboxAll();
				} else {
					if (!this.isCheckBox) {
						this.$refs.xTable.setAllCheckboxRow(true);
						this.isCheckBox = true;
						this.isAll = 1;
					} else {
						this.$refs.xTable.setAllCheckboxRow(false);
						this.isCheckBox = false;
						this.isAll = 0;
					}
					this.checkUidList = []
				}
			},
			reset() {
				this.timeVal = [];
				this.orderData = {
					page: 1,
					limit: 10,
					status: "1",
					start_time: "",
					end_time: "",
					parent_id:""
				};
				this.getList();
			},
			getList(id) {
				this.loading = true;
				if(id){
					this.orderData.parent_id = id;
				}else{
					this.orderData.parent_id = '';
				}
				order_statistics(this.orderData).then(res => {
					let data = res.data;
					this.$set(this, 'orderList', data);
					this.total = 31;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					this.$Message.error(err.msg)
				})
			},
			// 具体日期
			onchangeTime(e) {
				if (e[1].slice(-8) === "00:00:00") {
					e[1] = e[1].slice(0, -8) + "23:59:59";
					this.timeVal = e;
				} else {
					this.timeVal = e;
				}
				this.orderData.start_time = this.timeVal[0] || "";
				this.orderData.end_time = this.timeVal[1] || "";
				this.orderData.page = 1;
				this.allReset();
				this.getList();
			},
			pageChange(index) {
				this.orderData.page = index;
				this.getList();
			},
			userSearchs() {
				this.allReset();
				this.orderData.page = 1;
				this.getList();
			}
		},
	};
</script>

<style lang="stylus" scoped>
	.tdinfo {
		margin-left: 75px;
		margin-top: 16px;
	}

	.expand-row {
		margin-bottom: 16px;
		font-size: 12px;
	}

	.tabBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;

		.alert_img {
			width: 300px;
			height: 300px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.tabBox_img {
			width: 30px;
			height: 30px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.tabBox_tit {
			width: 267px;
			height: 30px;
			line-height: 30px;
			font-size: 12px !important;
			margin: 0 2px 0 10px;
			letter-spacing: 1px;
			box-sizing: border-box;
		}
	}

	.tabBox+.tabBox {
		margin-top: 5px;
	}
</style>