|
@@ -0,0 +1,410 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!--用户数据-->
|
|
|
+ <el-col :span="24" :xs="24">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
|
|
|
+ <el-form-item label="房单号:" prop="id">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.id"
|
|
|
+ placeholder="请输入房单号"
|
|
|
+ clearable
|
|
|
+ style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="酒店名称:" prop="shopName">
|
|
|
+ <el-select v-model="queryParams.shopName" clearable placeholder="请输入选择酒店">
|
|
|
+ <el-option
|
|
|
+ v-for="item in hotelsList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="房型:" prop="goodsName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.goodsName"
|
|
|
+ placeholder="请输入房型"
|
|
|
+ clearable
|
|
|
+ style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人:" prop="contactName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.contactName"
|
|
|
+ placeholder="请输入联系人"
|
|
|
+ clearable
|
|
|
+ style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话:" prop="contactMobile" label-width="110px">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.contactMobile"
|
|
|
+ placeholder="请输入联系电话"
|
|
|
+ clearable
|
|
|
+ style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="抵店时间" prop="createTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.createTime"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="订单状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" clearable placeholder="请选择订单状态">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.tourism_ticketOrders_status"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客类" prop="payStatus">
|
|
|
+ <el-select v-model="queryParams.payStatus" clearable placeholder="请选择客类">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.tourism_ticketOrders_payStatus"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="configPermi.export"
|
|
|
+ >导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="index" label="序号" align="center" />
|
|
|
+ <el-table-column label="房单号" align="center" key="id" prop="id" v-if="columns[0].visible" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="酒店名称" align="center" key="shopName" prop="shopName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="房号" align="center" key="goodsName" prop="goodsName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="房型" align="center" key="goodsName1" prop="goodsName1" v-if="columns[3].visible" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="入住价格" align="center" key="quantity" prop="quantity" v-if="columns[4].visible" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="入住天数" align="center" key="realPrice" prop="realPrice" v-if="columns[5].visible" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="入住类型" align="center" key="payStatus" prop="payStatus" v-if="columns[6].visible" :show-overflow-tooltip="true">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="dict.type.tourism_ticketOrders_payStatus" :value="scope.row.payStatus"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="预授权" align="center" key="contactName" prop="contactName" v-if="columns[7].visible"></el-table-column>
|
|
|
+ <el-table-column label="总付押金" align="center" key="contactName1" prop="contactName1" v-if="columns[8].visible"></el-table-column>
|
|
|
+ <el-table-column label="总消费" align="center" key="contactName12" prop="contactName12" v-if="columns[9].visible"></el-table-column>
|
|
|
+ <el-table-column label="客人姓名" align="center" key="contactName13" prop="contactName13" v-if="columns[10].visible"></el-table-column>
|
|
|
+ <el-table-column label="联系电话" align="center" key="contactMobile" prop="contactMobile" v-if="columns[11].visible"></el-table-column>
|
|
|
+ <el-table-column label="下单时间" align="center" key="createTime" prop="createTime" v-if="columns[12].visible"></el-table-column>
|
|
|
+ <el-table-column label="客类" align="center" key="source" prop="source" v-if="columns[13].visible">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="dict.type.tourism_ticketOrders_source" :value="scope.row.source"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" align="center" key="orderStatus" prop="orderStatus" v-if="columns[14].visible">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="dict.type.tourism_ticketOrders_status" :value="scope.row.orderStatus"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ width="180px"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope" >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-document"
|
|
|
+ @click="handleDetails(scope.row)"
|
|
|
+ v-hasPermi="configPermi.details"
|
|
|
+ >详情</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-position"
|
|
|
+ @click="repastOrderAcceptFun(scope.row,12)"
|
|
|
+ v-if="scope.row.orderStatus == 3"
|
|
|
+ v-hasPermi="configPermi.repastOrderAccept"
|
|
|
+ >接单</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-position"
|
|
|
+ @click="repastOrderAcceptFun(scope.row,13)"
|
|
|
+ v-hasPermi="configPermi.repastOrderAccept"
|
|
|
+ v-if="scope.row.orderStatus == 3"
|
|
|
+ >拒单</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="cancelOrderFun(scope.row)"
|
|
|
+ v-hasPermi="configPermi.cancelOrder"
|
|
|
+ >取消</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 详情 -->
|
|
|
+ <detailsBox ref="detailsBox" @refresh="getList"></detailsBox>
|
|
|
+ <!-- 发货 -->
|
|
|
+ <repastOrderAccept ref="repastOrderAccept" @refresh="getList"></repastOrderAccept>
|
|
|
+ <!-- 取消订单 -->
|
|
|
+ <cancelOrder ref="cancelOrder" @refresh="getList"></cancelOrder>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import {
|
|
|
+ listTableApi,
|
|
|
+ delTableParamsApi,
|
|
|
+ } from "@/api/CURD";
|
|
|
+ import detailsBox from "./detailsBox/roomListDetails.vue"
|
|
|
+ import repastOrderAccept from "./formBox/repastOrderAccept.vue";
|
|
|
+ import cancelOrder from "./formBox/cancelOrder.vue";
|
|
|
+ export default {
|
|
|
+ name: "User",
|
|
|
+ dicts: ['tourism_ticketOrders_source','tourism_ticketOrders_status','tourism_ticketOrders_payStatus','tourism_ticketOrders_payWay'],
|
|
|
+ components: {detailsBox,repastOrderAccept,cancelOrder},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "酒店订单",// 通用标题
|
|
|
+ configPermi: {
|
|
|
+ add: [''], // 新增权限
|
|
|
+ details: ['orderManagement:roomList:details'], // 详情权限
|
|
|
+ delect: [''], // 删除权限
|
|
|
+ upload: [''],// 导入权限
|
|
|
+ export: ['orderManagement:roomList:export'],// 导出权限
|
|
|
+ delivery: [''],// 发货
|
|
|
+ repastOrderAccept: ['orderManagement:roomList:repastOrderAccept'],
|
|
|
+ cancelOrder: ['orderManagement:roomList:cancelOrder']
|
|
|
+ },
|
|
|
+ configUrl: {
|
|
|
+ list: '/order/orderInfo/hotelOrderList', // 列表地址
|
|
|
+ delect: '', // 删除地址
|
|
|
+ upload: '',// 导入地址
|
|
|
+ download:'', // 下载模板地址
|
|
|
+ export: '/order/orderInfo/hotelOrderListExport',// 导出地址
|
|
|
+ updateStatusById: '',
|
|
|
+ repastOrderAccept: '/order/orderInfo/repastOrderAccept', // 接单/拒单
|
|
|
+ hotelsList: '/merchant/merchantShop/pageList'
|
|
|
+ },
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 用户表格数据
|
|
|
+ tableList: null,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ dateRange: [],
|
|
|
+ // 控制列表是否显示
|
|
|
+ columns: [
|
|
|
+ { key: 0, label: `房单号`, visible: true },
|
|
|
+ { key: 1, label: `酒店名称`, visible: true },
|
|
|
+ { key: 2.1, label: `房号`, visible: true },
|
|
|
+ { key: 2.2, label: `房型`, visible: true },
|
|
|
+ { key: 3.5, label: `入住价格(元)`, visible: true },
|
|
|
+ { key: 3, label: `入住天数`, visible: true },
|
|
|
+ { key: 4, label: `入住类型`, visible: true },
|
|
|
+ { key: 5.5, label: `预授权`, visible: true },
|
|
|
+ { key: 5, label: `总付押金`, visible: true },
|
|
|
+ { key: 6, label: `总消费(元)`, visible: true },
|
|
|
+ { key: 7, label: `客人姓名`, visible: true },
|
|
|
+ { key: 8, label: `联系电话`, visible: true },
|
|
|
+ { key: 9, label: `下单时间`, visible: true },
|
|
|
+ { key: 10, label: `客类`, visible: true },
|
|
|
+ { key: 11, label: `状态`, visible: true },
|
|
|
+ ],
|
|
|
+ hotelsList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList1()
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询酒店列表 */
|
|
|
+ getList1() {
|
|
|
+ listTableApi(
|
|
|
+ this.configUrl.hotelsList,
|
|
|
+ {
|
|
|
+ shopType: 5,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 9999
|
|
|
+ }).then(response => {
|
|
|
+ this.hotelsList = response.data.rows;
|
|
|
+ }
|
|
|
+ ).catch (error=>{
|
|
|
+ this.hotelsList = []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 查询用户列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ let params = this.paramsFormat({...this.queryParams})
|
|
|
+ listTableApi(
|
|
|
+ this.configUrl.list,{...params}).then(response => {
|
|
|
+ this.tableList = response.data.rows;
|
|
|
+ this.total = response.data.total;
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ ).catch (error=>{
|
|
|
+ console.error('获取列表失败!!!!',error)
|
|
|
+ this.tableList = [];
|
|
|
+ this.total = 0;
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 请求参数格式化 */
|
|
|
+ paramsFormat(data,isPage) {
|
|
|
+ let params = JSON.parse(JSON.stringify({
|
|
|
+ ...data,
|
|
|
+ createBeginTime: data.createTime&&data.createTime[0]?data.createTime[0]:null,
|
|
|
+ createEndTime: data.createTime&&data.createTime[1]?data.createTime[1]:null,
|
|
|
+
|
|
|
+ payBeginTime: data.payTime&&data.payTime[0]?data.payTime[0]:null,
|
|
|
+ payEndTime: data.payTime&&data.payTime[1]?data.payTime[1]:null,
|
|
|
+
|
|
|
+ }))
|
|
|
+ delete params.createTime;
|
|
|
+ delete params.payTime;
|
|
|
+ if(isPage) {
|
|
|
+ delete params.pageSize;
|
|
|
+ delete params.pageNum;
|
|
|
+ }
|
|
|
+ return params
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.dateRange = [];
|
|
|
+ this.queryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ }
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.id);
|
|
|
+ this.single = selection.length != 1;
|
|
|
+ this.multiple = !selection.length;
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ if(this.$refs.addAndEdit) {
|
|
|
+ this.$refs.addAndEdit.initData(this.title + '新增', "ADD",{})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ if(this.$refs.addAndEdit) {
|
|
|
+ this.$refs.addAndEdit.initData(this.title + '编辑', "EDITInit",{...row})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 发货 */
|
|
|
+ repastOrderAcceptFun(row,type) {
|
|
|
+ if(this.$refs.repastOrderAccept) {
|
|
|
+ this.$refs.repastOrderAccept.initData(`${ type == 12 ? '接单' : '拒单' }操作`, "EDIT",{
|
|
|
+ ...row,
|
|
|
+ repastOrderAcceptType: type
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleDetails(row){
|
|
|
+ if(this.$refs.detailsBox) {
|
|
|
+ this.$refs.detailsBox.initData(this.title + '详情',"DEATILSInit", {...row})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const goodsId = row.goodsId || this.ids;
|
|
|
+ this.$modal.confirm('是否确认删除数据项?').then( () => {
|
|
|
+ return delTableParamsApi(this.configUrl.delect,{
|
|
|
+ goodsId: goodsId
|
|
|
+ });
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch((e) => {
|
|
|
+ console.error("删除失败====",e)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ let params = this.paramsFormat({...this.queryParams},true)
|
|
|
+ this.downloadGet(this.configUrl.export, {
|
|
|
+ ...params
|
|
|
+ }, `${this.title }_${new Date().getTime()}.xlsx`)
|
|
|
+ },
|
|
|
+ /** 导入按钮操作 */
|
|
|
+ handleImport() {
|
|
|
+ if(this.$refs.upload) {
|
|
|
+ this.$refs.upload.initData({
|
|
|
+ width: '400px',
|
|
|
+ // 弹出层标题(用户导入)
|
|
|
+ title: this.title + "导入",
|
|
|
+ // 下载模板地址
|
|
|
+ importTemplate: this.configUrl.download,
|
|
|
+ // 上传的地址
|
|
|
+ url: this.configUrl.upload
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 取消订单 */
|
|
|
+ cancelOrderFun(row){
|
|
|
+ this.$refs.cancelOrder.initData(`取消订单操作`, "EDIT",{...row})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|