zfire-newmall-admin/src/views/mallManagement/tenancyManagement/tenancyOrder/index.vue

<template>
	<div>
		<div v-if="!isShowDetail" class="app-container">
			<div class="screen-container">
				<el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
					<el-row :gutter="20">
						<el-col :xs="24" :sm="12" :lg="6">
							<el-form-item label="订单号" prop="orderId">
								<el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :lg="6">
							<el-form-item label="商品名称" prop="goodsName">
								<el-input v-model="screenForm.goodsName" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :lg="6">
							<el-form-item label="会员昵称" prop="memberName">
								<el-input v-model="screenForm.memberName" placeholder="请输入会员昵称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :lg="6">
							<el-form-item label="手机号" prop="phone">
								<el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :lg="6">
							<el-form-item label="创建时间" prop="createDate" style="height: 33px;">
								<el-date-picker v-model="screenForm.createDate" type="datetimerange"
									value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :lg="6">
							<el-form-item label="支付时间" prop="payDate" style="height: 33px;">
								<el-date-picker v-model="screenForm.payDate" type="datetimerange"
									value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :lg="6" class="tr">
							<el-form-item label="">
								<el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
								<el-button size="small" @click="resetScreenForm">清空</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<div class="tabs-container order-tabs-container clearfix">
				<el-tabs v-model="screenForm.status" type="card" @tab-click="changeTabs" class="fl"
					style="margin-right: 20px">
					<el-tab-pane label="全部" name=""></el-tab-pane>
					<el-tab-pane label="待确认" name="WAIT"></el-tab-pane>
					<el-tab-pane label="待开始" name="WAIT_START"></el-tab-pane>
					<el-tab-pane label="租凭中" name="LEASE"></el-tab-pane>
					<el-tab-pane label="已到期-待回收" name="OVER"></el-tab-pane>
					<el-tab-pane label="已到期-已回收" name="RECOVER"></el-tab-pane>
					<el-tab-pane label="已取消" name="CANCEL"></el-tab-pane>
				</el-tabs>
				<el-button @click="isShowDetail = true;formType = 0">新增租赁单</el-button>
			</div>
			<div class="order-main-container">
				<div class="table-top">
					<el-row style="width:100%">
						<el-col :span="3">
							<span class="item product">商品</span>
						</el-col>
						<el-col :span="3" style="text-align: right"><span class="item">总租金（元）</span></el-col>
						<el-col :span="3" style="text-align: center"><span class="item">订金（元）</span></el-col>
						<el-col :span="7" style="text-align: center"><span class="item">收货信息</span></el-col>
						<el-col :span="2" style="text-align: center"><span class="item">租金（元）/月</span></el-col>
						<el-col :span="2" style="text-align: center"><span class="item">订单状态</span></el-col>
						<el-col :span="4" style="text-align: center"><span class="item">操作</span></el-col>
					</el-row>
				</div>
				<div class="order-item" v-for="order in dataList" :key="order.orderId">
					<div class="order-top">
						<span><b>订单号</b>：{{ order.id }}</span>
						<span><b>下单时间</b>：{{ order.createTime }}</span>
						<span><b>起租时间</b>：{{ order.startDate }}</span>
						<span><b>结束时间</b>：{{ order.endDate }}</span>
						<div class="fr">
							<el-link type="primary" v-if="$restrict('orderNote')" :underline="false"
								@click="showRemark(order)">订单备注</el-link>
							<el-link type="primary" v-if="$restrict('detail')" :underline="false"
								 @click="confirmOrder(order.id)">查看详情</el-link>
							<!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
						</div>
					</div>
					<div class="order-content">
						<el-row style="width:100%;">
							<el-col :span="6" style="height: 100%;">
								<div class="col-item-pro">
									<div class="pro-item">
										<div class="left">
											<div class="image">
												<img :src="order.categoryUrl" style="height:80px;width: 80px;">
											</div>
											<div class="main" style="justify-content: center;">
												<span>{{ order.goodsLeaseName }}</span>
												<span>x{{ order.qty }}</span>
											</div>
										</div>
										<div class="right"
											style="display: flex;flex-direction: column;justify-content: center;">
											<span>{{order.totalAmount}}</span>
											<span>总租金</span>
										</div>
									</div>
								</div>
							</el-col>
							<el-col :span="3" style="height: 100%;">
								<div class="col-item">
									<div>{{ order.bookAmount }}</div>
									<span>订金</span>
								</div>
							</el-col>
							<el-col :span="7" style="height: 100%;">
								<div class="col-item">
									<div>{{ order.userName }}/{{ order.userMobile }}</div>
									<div class="ellipsis-2">
										{{ order.province + order.city + order.area + order.street + order.userAddress}}
									</div>
								</div>
							</el-col>
							<el-col :span="2" style="height: 100%;">
								<div class="col-item">
									<div class="totalprice">￥{{ order.leasePrice }}</div>
								</div>
							</el-col>
							<el-col :span="2" style="height: 100%;">
								<div class="col-item">
									<div :style="{'color': filterStatus(order,'color')}">
										{{ filterStatus(order,'name') }}</div>
								</div>
							</el-col>
							<el-col :span="4" style="height: 100%;">
								<div class="col-item">
									<div class="operate">
										<el-button v-if="order.status === 'WAIT'" @click="confirmOrder(order.id)" type="text" size="small">确定租赁</el-button>
										<el-button v-if="order.status === 'LEASE' || order.status === 'OVER'" @click="confirmOrder(order.id)" type="text" size="small">确认回收</el-button>
										<el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder(order.id)"
											v-if="order.status === 'WAIT'">
											<el-button slot="reference" type="text" size="small">取消订单</el-button>
										</el-popconfirm>
										<el-button v-if="order.status === 'LEASE'" @click="confirmOrder(order.id)" type="text" size="small">报修</el-button>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
				<div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
			</div>
			<div class="pagination clearfix">
				<div class="fr">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
						layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
					</el-pagination>
				</div>
			</div>
		</div>
		<detail v-else :id="id" @back="backList" :formType="formType" :title="'租赁订单' + formDialogTitles[formType]">
		</detail>
	</div>

</template>

<script>
	import {
		getList, cancelOrder
	} from "@/api/tenancyOrder";
	import detail from './detail.vue'
	export default {
		components: {
			detail
		},
		data() {
			return {
				screenForm: { // 筛选表单数据
					orderId: '', // 订单号
					goodsName: '', // 商品名称
					memberName: '', // 会员昵称
					phone: '', // 手机号
					status: '', // 状态
					createDate: '', // 创建时间
					payDate: '', // 支付时间
					evaluateStatus: '', // 评价状态
					sendStatus: '', // 派单异常
					workerOrderNo: '', // 信息编号
				},
				isShowDetail: false,
				id: '',
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页数量
				listTotal: 0, // 列表总数
				dataList: [],
				formDialogTitles: ['新增', '详情'],
				formType: 0,
				formVisible: false,
				typeIndex: '1',
			}
		},
		computed: {
			filterStatus() {
				return function(item, type) {
					if (item.status == 'WAIT') {
						return {
							name: '待确定订单',
							color: '#ff5300'
						} [type]
					} else if (item.status == 'WAIT_START') {
						return {
							name: '待开始',
							color: '#64c842'
						} [type]
					} else if (item.status == 'LEASE') {
						return {
							name: '租赁中',
							color: '#1281ff'
						} [type]
					} else if (item.status == 'OVER') {
						return {
							name: '待回收',
							color: '#9c84fe'
						} [type]
					} else if (item.status == 'RECOVER') {
						return {
							name: '已回收',
							color: '#817f7f'
						} [type]
					}
				}
			}
		},
		created() {
			this.getList();
		},
		methods: {
			backList() {
				this.id = ''
				this.isShowDetail = false;
				this.$refs?.pageRef?.refreshList()
			},
			changeTabs(tab, event) {
				this.getList();
			},
			// 获取数据列表
			getList() {
				// this.listLoading = true;

				let params = {
					orderId: this.screenForm.orderId, // 订单号
					productName: this.screenForm.goodsName, // 商品名称
					userName: this.screenForm.memberName, // 会员昵称
					phone: this.screenForm.phone, // 手机号
					orderStatus: this.screenForm.orderStatus, // 状态
					startCreateTime: this.screenForm.createDate[0] ? this.screenForm.createDate[0] : null, // 创建时间
					endCreateTime: this.screenForm.createDate[1] ? this.screenForm.createDate[1] : null, // 创建时间
					startPayTime: this.screenForm.payDate[0] ? this.screenForm.payDate[0] : null, // 支付时间
					endPayTime: this.screenForm.payDate[1] ? this.screenForm.payDate[1] : null, // 支付时间
					isNegative: this.screenForm.evaluateStatus, // 评价状态
					abnormalDispatch: this.screenForm.sendStatus, // 派单异常
					workerOrderNo: this.screenForm.workerOrderNo, // 信息编号
					pageNum: this.currentPage,
					pageSize: this.pageSize
				};

				getList(params).then(res => {
					res.data.records.forEach(item => {
						item.selected = false;
						// item.websitName = this.handleText(item.websitName);
					});
					this.dataList = res.data.records;
					this.listTotal = res.data.total;
					// this.listLoading = false;
				})
			},
			
			confirmOrder(id){
				this.id = id
				this.formType = 1
				this.isShowDetail = true
			},
			
			cancelOrder(id){
				cancelOrder({
					id
				}).then(res => {
					if(res.code == 200){
						this.$message.success('取消订单成功！')
						this.getList();
					}
				})
			},
			
			// 提交筛选表单
			submitScreenForm() {
				this.currentPage = 1;
				this.getList();
			},

			// 重置筛选表单
			resetScreenForm() {
				this.$refs.screenForm.resetFields();
				this.currentPage = 1;
				this.getList();
			},

			// 更改每页数量
			handleSizeChange(val) {
				this.pageSize = val;
				this.currentPage = 1;
				this.getList();
			},

			// 更改当前页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getList();
			},

			// 获取省市区街道
			getRegion(level = 0, id = 0) {
				getRegion({
					pid: id
				}).then(res => {
					if (level === 0) {
						this.provinceList = res.data;
					} else if (level === 1) {
						this.cityList = res.data;
					} else if (level === 2) {
						this.areaList = res.data;
					} else if (level === 3) {
						this.streetList = res.data;
					}
				})
			},

			// 初始化省市区街道
			initRegion(level, item, id = 0) {
				let {
					province,
					city,
					area,
					street
				} = item;
				let nextId = null;
				getRegion({
					pid: id
				}).then(res => {
					if (level === 0) {
						this.provinceList = res.data;
						nextId = this.addressForm.province = this.provinceList[this.$findElem(this.provinceList,
							'name', province)].id;
					} else if (level === 1) {
						this.cityList = res.data;
						nextId = this.addressForm.city = this.cityList[this.$findElem(this.cityList, 'name', city)]
							.id;
					} else if (level === 2) {
						this.areaList = res.data;
						nextId = this.addressForm.area = this.areaList[this.$findElem(this.areaList, 'name', area)]
							.id;
					} else if (level === 3) {
						this.streetList = res.data;
						nextId = this.addressForm.street = this.streetList[this.$findElem(this.streetList, 'name',
							street)].id;
					}
					if (level < 3) {
						level = level + 1;
						this.initRegion(level, item, nextId);
					}
				})
			},

			// 保存 修改收货地址 表单
			save(cancel) {
				this.$refs.addressForm.validate((valid) => {
					if (valid) {

					}
				})
			},

			// 查看工单
			toWorkOrderDetail(orderId) {
				this.$router.push({
					name: "workOrder_detail",
					query: {
						orderId
					}
				})

			},

			handleRefreshList() {
				this.getList();
				// this.recordSelected = []
				// this.$refs.pageRef.refreshList()
			}

		}
	}
</script>
<style scoped lang="scss">
	.tabs-container {
		margin-bottom: 10px;
	}
</style>