front-end/admin-update/src/views/order/list.vue

<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap order-list-wrap" @load="onLoad">
			<!-- tabs -->
			<template #slot-tabs="{ scope }">
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="handleClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="`${item.text}(${item.val})`"
						:name="item.key"
					></el-tab-pane>
				</el-tabs>
			</template>

			<!-- 单号 -->
			<template #table-column-orderSn="{scope}">
				<el-link
					:underline="false"
					@click="detailShowFn(scope.row)"
					style="font-size:12px;display:inline-block;"
					>{{ scope.row.orderSn }}</el-link
				>
			</template>

			<!-- 订花人 -->
			<template #table-column-bookName="{scope}">
				<div class="book-wrap">
					<cl-avatar shape="circle" :size="20" :src="scope.row.bookAvatar"></cl-avatar>
					<div>{{ scope.row.bookName }}</div>
				</div>
			</template>

			<!-- 订花人手机号 -->
			<template #table-column-bookMobile="{scope}">
				<div v-if="scope.row.bookMobile == ''">-</div>
				<div v-else>{{ scope.row.bookMobile }}</div>
			</template>

			<!-- 收花人 -->
			<template #table-column-receiveUserName="{scope}">
				<div v-if="scope.row.receiveUserName == ''">-</div>
				<div v-else>{{ scope.row.receiveUserName }}</div>
			</template>

			<!-- 收花人电话 -->
			<template #table-column-receiveMobile="{scope}">
				<div v-if="scope.row.receiveMobile == ''">-</div>
				<div v-else>{{ scope.row.receiveMobile }}</div>
			</template>

			<!-- 状态 -->
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 1">待配送</el-tag>
				<el-tag v-else-if="scope.row.status == 2">配送中</el-tag>
				<el-tag v-else-if="scope.row.status == 3">待通知</el-tag>
				<el-tag v-else-if="scope.row.status == 4">已取消</el-tag>
				<el-tag v-else-if="scope.row.status == 5">已完成</el-tag>
				<el-tag v-else>待付款</el-tag>
			</template>

			<!-- 进度 -->
			<template #table-column-currentFlow="{scope}">
				<div class="steps-wrap" @click="shipDrawFn(scope.row)" style="cursor:pointer;">
					<el-steps
						:space="200"
						:active="parseInt(scope.row.currentFlow)"
						align-center
						finish-status="success"
						size="mini"
					>
						<el-step
							title=""
							v-for="(item, index) in parseInt(scope.row.totalFlow)"
							:key="index"
						></el-step>
					</el-steps>
				</div>
				<!-- <div>{{ scope.row.currentFlow }}</div> -->
			</template>

			<!-- 送达时间 -->
			<template #table-column-reachTime="{scope}">
				<span v-if="scope.row.sendType == 0">-</span>
				<span v-else>
					<span v-if="scope.row.reachTime == ''">-</span>
					<span v-else>{{ scope.row.reachTime }}</span>
				</span>
			</template>

			<!-- 通知送到 -->
			<template #table-column-inform="{scope}">
				<span v-if="scope.row.sendType == 0">-</span>
				<span v-else>
					<i
						class="el-icon-success"
						v-if="scope.row.inform == 1"
						style="color:#67C23A;font-size:19px;"
					></i>
					<i class="el-icon-success" v-else style="color:#C0C4CC;font-size:19px;"></i>
				</span>
			</template>

			<!-- 操作 -->
			<template #slot-column-option="{scope}">
				<template v-if="scope.row.status == 0">
					<el-button type="text" size="small" disabled>自取</el-button>
					<el-button type="text" size="small" disabled>发货</el-button>
				</template>

				<template v-else-if="['4', '5', '6'].indexOf(scope.row.status) != -1"> </template>
				<template v-else>
					<template v-if="scope.row.currentFlow == 1">
						<el-popover placement="top" width="160" :ref="'popover-' + scope.row.id">
							<p>确认已自取？</p>
							<div style="text-align: right; margin: 0">
								<el-button
									size="mini"
									type="text"
									@click="selfGetCancel(scope.row.id)"
									>取消</el-button
								>
								<el-button
									type="primary"
									size="mini"
									@click="noSendShipFn(scope.row)"
									>确定</el-button
								>
							</div>
							<el-button slot="reference" size="mini" type="primary" plain
								>自取</el-button
							>
						</el-popover>

						<el-button
							@click="shipDrawFn(scope.row)"
							size="mini"
							type="primary"
							plain
							style="margin-left:14px;"
							>发货</el-button
						>
					</template>
					<template v-else>
						<el-button size="mini" type="primary" plain @click="shipDrawFn(scope.row)"
							>继续</el-button
						>
					</template>
				</template>
			</template>
		</x-crud>
		<!-- 用户详情 -->
		<order-detail ref="orderDetail" :orderOperate="optionData" />
		<!-- 发货状态 -->
		<sel-order ref="selOrder" :id="optionData.id" @song-success="onSongSuccess" />
	</div>
</template>

<script>
import SelOrder from './components/sel-order';
import OrderDetail from './components/order-detail';
export default {
	components: {
		SelOrder,
		OrderDetail
	},
	data() {
		return {
			// x-crud
			app: null,
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1',
					val: 0
				},
				{
					text: '待付款',
					key: '0',
					val: 0
				},
				{
					text: '待配送',
					key: '1',
					val: 0
				},
				{
					text: '配送中',
					key: '2',
					val: 0
				},
				{
					text: '已完结',
					key: '5',
					val: 0
				}
			],
			// dialog
			optionData: {}
			// drawer
			// 详情drawer
			// shipData: []
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.$store.dispatch('getCategory');
			this.$store.dispatch('getUsage');
		},
		//取消自取
		selfGetCancel(id) {
			this.$refs[`popover-` + id].doClose();
		},
		// drawer
		noSendShipFn(item) {
			this.$refs[`popover-` + item.id].doClose();

			this.$service.order.freeShipping({ id: item.id }).then(res => {
				this.$message.success('操作成功！');
				item.currentFlow = 4;
				item.status = '5';
			});
		},
		//发货详情
		shipDrawFn(item) {
			this.optionData = item;
			setTimeout(() => {
				this.$refs.selOrder.init();
			});
		},
		//获取订单详情
		detailShowFn(item) {
			this.optionData = item;
			setTimeout(() => {
				this.$refs.orderDetail.init();
			});
		},
		// dialog
		// crud
		handleClick(tab, e) {
			console.log(tab, e);
			this.app.refresh({ status: this.tabIndex });
		},
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.order)
				.set('table', {
					columns: [
						// {
						// 	type: 'selection',
						// 	align: 'center',
						// 	width: '60'
						// },
						{
							prop: 'orderSn',
							label: '单号',
							align: 'center',
							width: '260'
						},
						{
							prop: 'bookName',
							label: '订花人',
							align: 'center',
							width: '120'
						},
						{
							prop: 'bookMobile',
							label: '手机号',
							align: 'center',
							width: '110'
						},
						{
							prop: 'receiveUserName',
							label: '收花人',
							align: 'center',
							width: '100'
						},
						{
							prop: 'receiveMobile',
							label: '手机号',
							align: 'center',
							width: '110'
						},
						{
							prop: 'reachTime',
							label: '送达时间',
							align: 'center',
							width: 120
						},
						{
							prop: 'prePrice',
							label: '总价',
							align: 'center'
						},
						{
							prop: 'actPrice',
							label: '实付款',
							align: 'center',
							emptyText: '无',
							'min-width': 100
						},
						{
							prop: 'sendNum',
							label: '编号',
							align: 'center',
							width: 80
						},
						{
							prop: 'currentFlow',
							label: '进度',
							align: 'center',
							width: 180
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						},
						{
							prop: 'inform',
							label: '通知送到',
							align: 'center'
						}
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							height: 128,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-column-option']
					}
				})
				.set('search', {
					key: { placeholder: '订单号 / 订花人手机号' }
				})
				.set('layout', [
					['slot-tabs'],
					['search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					// 继续执行刷新
					let { asset } = await next(params);
					this.tabsData[0].val = asset.totalOrder;
					this.tabsData[1].val = asset.unPayOrder;
					this.tabsData[2].val = asset.unSendOrder;
					this.tabsData[3].val = asset.sendingOrder;
					this.tabsData[4].val = asset.finishOrder;
				})
				.done();
			app.refresh({ status: this.tabIndex });
		},
		onSongSuccess() {
			this.app.refresh();
		}
	}
};
</script>
<style lang="scss" scoped>
.book-wrap {
	@include disFlex(center, flex-start);
	& > div {
		margin-left: 6px;
		&:first-child {
			margin-left: 0;
		}
	}
}
.steps-wrap {
	width: 150px;
	//height: 26px;
	margin: 0 auto;
}
</style>

<style lang="scss">
.order-list-wrap {
	.el-step__head.is-process {
		color: #c0c4cc;
		border-color: #c0c4cc;
		.el-step__icon.is-text {
			background-color: #c0c4cc;
		}
	}
	.el-step__head.is-success {
		color: #409eff;
		border-color: #409eff;
		.el-step__icon.is-text {
			background-color: #409eff;
			font-size: 1px;
		}
		.el-step__line {
			background-color: #409eff;
			.el-step__line-inner {
				display: inline-block;
			}
		}
	}
	.el-step__head.is-wait {
		.el-step__icon.is-text {
			background-color: #c0c4cc;
		}
	}
	.el-step__icon-inner {
		font-size: 1px;
		display: none;
	}
	.el-step__icon {
		width: 10px;
		height: 10px;
	}
	.el-step.is-horizontal .el-step__line {
		height: 1px;
		left: 16px;
		right: -16px;
		top: 9px;
	}
}
</style>