school-manage/src/views/sys/order-manage/orderManage.vue

<style lang="less">
	@import "@/styles/table-common.less";
	@import "./orderManage.less";
</style>
<template>
	<div class="search">
		<Card>
			<Tabs v-model="tabName" :animated="false" @on-click="changeOrderTab">
				<TabPane label="饭团订单" name="1"></TabPane>
				<TabPane label="快递订单" name="2"></TabPane>
				<TabPane label="跑腿订单" name="3"></TabPane>
			</Tabs>
			<Tabs v-model="tabName1" :animated="false" @on-click="changeTab">
				<TabPane label="全部" name="10"></TabPane>
				<TabPane label="待支付" name="0"></TabPane>
				<TabPane label="待成团" name="1"></TabPane>
				<TabPane label="待消费" name="2"></TabPane>
				<TabPane label="待接单" name="3"></TabPane>
				<TabPane label="待取货" name="4"></TabPane>
				<TabPane label="待送达" name="5"></TabPane>
				<TabPane label="已完成" name="6"></TabPane>
				<TabPane label="待退款" name="7"></TabPane>
				<TabPane label="已退款" name="8"></TabPane>
				<TabPane label="已取消" name="9"></TabPane>
				<TabPane label="售后中" name="11"></TabPane>
				<TabPane label="已售后" name="12"></TabPane>
			</Tabs>
			<Row v-show="openSearch" @keydown.enter.native="handleSearch">
				<Form ref="searchForm" :model="searchForm" inline :label-width="100">
					
					<FormItem label="店铺名称" prop="orderLogistics">
						<Input type="text" v-model="searchForm.shopName" clearable placeholder="请输入店铺名称"
							style="width: 200px" />
					</FormItem>
					<FormItem label="收货人手机号" prop="kdOrderId1">
						<Input type="text" v-model="searchForm.receiverPhone" clearable placeholder="请输入店铺名称"
							style="width: 200px" />
					</FormItem>
					<FormItem style="margin-left: -35px" class="br">
						<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
						<Button @click="handleReset">重置</Button>
					</FormItem>
				</Form>
			</Row>
			<Row align="middle" justify="space-between" class="operation">
				<div class="icons">
					<Tooltip content="刷新" placement="top" transfer>
						<Icon type="md-refresh" size="18" class="item" @click="getLogisticsInfo" />
					</Tooltip>
					<Tooltip :content="openSearch ? '关闭搜索' : '开启搜索'" placement="top" transfer>
						<Icon type="ios-search" size="18" class="item tip" @click="openSearch = !openSearch" />
					</Tooltip>
					<Tooltip :content="openTip ? '关闭提示' : '开启提示'" placement="top" transfer>
						<Icon type="md-bulb" size="18" class="item tip" @click="openTip = !openTip" />
					</Tooltip>
					<Tooltip content="表格密度" placement="top" transfer>
						<Dropdown @on-click="changeTableSize" trigger="click">
							<Icon type="md-list" size="18" class="item" />
							<DropdownMenu slot="list">
								<DropdownItem :selected="tableSize == 'default'" name="default">默认</DropdownItem>
								<DropdownItem :selected="tableSize == 'large'" name="large">宽松</DropdownItem>
								<DropdownItem :selected="tableSize == 'small'" name="small">紧密</DropdownItem>
							</DropdownMenu>
						</Dropdown>
					</Tooltip>
				</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" :size="tableSize" sortable="custom"
				@on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
			<Row type="flex" justify="end" class="page">
				<Page :current="searchForm.pageNum" :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>
		<!-- 订单详情 -->
		<Modal :title="订单详情" v-model="Visiable" :mask-closable="false" :scrollabele="true" :width="1000">
			<logistics-address v-if="Visiable" ref="dialog"></logistics-address>
			<div slot="footer" v-show="Visiable">
				<Button type="text" @click="Visiable = false">关闭</Button>
			</div>
		</Modal>

		<addEdit :data="form" :type="showType" v-model="showOrder" @on-submit="getLogisticsInfo" />
	</div>
</template>

<script>
	import {
		getOrderList
	} from "@/api/index";
	import addEdit from "./addEdit.vue";
	import logisticsAddress from "@/views/sys/order-manage/logisticsAddress";
	export default {
		name: "order-manage",
		components: {
			addEdit,
			logisticsAddress,
		},
		data() {
			return {
				tableSize: "default",
				Visiable: false,
				showOrder: false,
				showType: "0",
				openSearch: true,
				openTip: true,
				loading: true,
				drop: false,
				dropDownContent: "展开",
				dropDownIcon: "ios-arrow-down",
				selectList: [],
				searchForm: {
					pageNum: 1,
					pageSize: 10,
					regionId: JSON.parse(this.getStore("user")).departmentId,
					searchType: 0,
					searchStatus:0,
					shopName: "",
					mobile:'',
					userId: ""
				},
				form: {},
				columns: [{
						type: "index",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						title: "订单编号",
						key: "id",
						width: 200,
						align: "center",
					},
					{
						title: "用户账号",
						key: "receiverPhone",
						width: 130,
						align: "center",
					},
					{
						title: "店铺名称",
						key: "shopName",
						width: 200,
						align: "center",
					},
					{
						title: "交易金额",
						key: "companyName",
						width: 100,
						align: "center",
					},
					{
						title: "订单总金额",
						key: "totalAmount",
						width: 130,
						align: "center",
					},
					{
						title: "商家优惠券金额",
						key: "receiverName",
						width: 150,
						align: "center",
					},
					{
						title: "平台优惠券金额",
						key: "weight",
						width: 150,
						align: "center",
					},
					{
						title: "完成支付时间",
						key: "createTime",
						width: 170,
						align: "center",
						render: (h, params) => {
							return h(
								"div",
								this.formatDateTime(params.row.createTime)
							);
						}
					},
					{
						title: "订单状态",
						key: "status",
						width: 130,
						align: "center",
						render: (h, params) => {
							let re = ""
							if (params.row.status == 0) {
								re = "待支付";
							} else if (params.row.status == 1) {
								re = "待成团";
							} else if (params.row.status == 2) {
								re = "待消费";
							} else if (params.row.status == 3) {
								re = "待接单";
							} else if (params.row.status == 4) {
								re = "待取货";
							} else if (params.row.status == 5) {
								re = "待送达";
							} else if (params.row.status == 6) {
								re = "已完成";
							} else if (params.row.status == 7) {
								re = "待退款";
							} else if (params.row.status == 8) {
								re = "已退款";
							} else if (params.row.status == 9) {
								re = "已取消";
							} else if (params.row.status == 11) {
								re = "售后中";
							} else if (params.row.status == 12) {
								re = "已售后";
							}
							return h(
								"div",
								re
							);
						}
					},
					{
						title: "操作",
						key: "action",
						width: 170,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h(
									"a", {
										on: {
											click: () => {
												this.showDetail(params.row);
											},
										},
									},
									"查看详情"
								),
							]);
						},
					},
				],
				data: [],
				total: 0,
			};
		},
		computed: {
			colHidden: function() {
				return this.columns.filter(function(e) {
					return !e.hidden;
				})
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.getLogisticsInfo()
			},
			formatDateTime(isoString) {
				if (!isoString) return ''
				const date = new Date(isoString)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString() //'年'
				let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1)
					.toString() //'月'
				let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString() //'日'
				let single = year + '-' + month + '-' + da //当天
				return single
			},
			//订单状态切换2
			changeTab(v) {
				this.searchForm.pageNum = 1;
				this.searchForm.searchStatus = v;
				this.getLogisticsInfo();
			},
			//订单状态切换1
			changeOrderTab(v){
				console.log(v)
				this.searchForm.pageNum = 1;
				this.searchForm.searchType = v
				this.getLogisticsInfo()
			},
			checkStatus(v) {
				console.log('下拉框选择', v)
				this.searchForm.orderStatus = v
			},
			changePage(v) {
				this.searchForm.pageNum = v;
				this.getLogisticsInfo();
				this.clearSelectAll();
			},
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.getLogisticsInfo();
			},
			changeTableSize(v) {
				this.tableSize = v;
			},
			//查询订单
			getLogisticsInfo() {
				getOrderList(this.searchForm).then((res) => {
					this.loading = false;
					if (res.success) {
						this.data = res.result.records
						this.total = res.result.total;
					}
				});
			},

			handleSearch() {
				this.searchForm.pageNum = 1;
				this.searchForm.pageSize = 10;
				this.getLogisticsInfo();
			},
			handleReset() {
				this.$refs.searchForm.resetFields();
				this.searchForm.pageNum = 1;
				this.searchForm.pageSize = 10;
				// 重新加载数据
				this.getLogisticsInfo();
			},
			changeSort(e) {
				this.searchForm.sort = e.key;
				this.searchForm.order = e.order;
				if (e.order == "normal") {
					this.searchForm.order = "";
				}
				this.getLogisticsInfo();
			},
			
			showDetail(v) {
				// 转换null为""
				for (let attr in v) {
					if (v[attr] == null) {
						v[attr] = "";
					}
				}
				let str = JSON.stringify(v);
				let data = JSON.parse(str);
				this.Visiable = true;
				this.$nextTick(() => {
					this.$refs.dialog.initRecharge(data);
				});
			},
			dropDown() {
				if (this.drop) {
					this.dropDownContent = "展开";
					this.dropDownIcon = "ios-arrow-down";
				} else {
					this.dropDownContent = "收起";
					this.dropDownIcon = "ios-arrow-up";
				}
				this.drop = !this.drop;
			},
			showSelect(e) {
				this.selectList = e;
			},
			clearSelectAll() {
				this.$refs.table.selectAll(false);
			},
		}
	};
</script>