房间操作列增加查看订单按钮

src/router/index.js

@@ -148,6 +148,21 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/order/order-index',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:order:list'],
+    children: [
+      {
+        path: 'roomId/:roomId(\\d+)',
+        component: () => import('@/views/system/order/roomOrderIndex'),
+        name: 'order',
+        meta: {title: '查看订单', activeMenu: '/system/room'}
+      }
+    ]
+  },
+
 
   {
     path: '/system/dict-data',

src/views/system/order/roomOrderIndex.vue

+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+        >关闭
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" :data="orderList">
+      <el-table-column label="订单流水号" align="center" prop="orderNo" width="150"/>
+      <el-table-column label="订单类型" align="center" prop="orderType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.store_order_type" :value="scope.row.orderType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="会员昵称" align="center" prop="consumerName"/>
+      <el-table-column label="手机号" align="center" prop="consumerPhone" width="110"/>
+      <el-table-column label="门店名称" align="center" prop="storeName" width="120"/>
+      <el-table-column label="房间名称" align="center" prop="roomName" width="120"/>
+      <el-table-column label="套餐名称" align="center" prop="packName" width="120"/>
+      <el-table-column label="套餐金额" align="center" prop="packPrice" width="100"/>
+      <el-table-column label="优惠券名称" align="center" prop="couponName" width="100"/>
+      <el-table-column label="优惠券金额" align="center" prop="couponPrice" width="100"/>
+      <el-table-column label="预约开始时间" align="center" prop="preStartDate" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.preStartDate, '{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="预约结束时间" align="center" prop="preEndDate" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.preEndDate, '{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="到店时间" align="center" prop="arrivalTime" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.arrivalTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="开始时间" align="center" prop="startDate" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="结束时间" align="center" prop="endDate" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单总价" align="center" prop="totalPrice"/>
+      <el-table-column label="实际支付金额" align="center" prop="payPrice" width="100"/>
+      <el-table-column label="支付时间" align="center" prop="payTime" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单时长(H)" align="center" prop="timeLong" width="90"/>
+      <el-table-column label="支付类型" align="center" prop="payType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.store_pay_ways" :value="scope.row.payType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="支付状态" align="center" prop="payStatus">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.order_pay_status" :value="scope.row.payStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="订单状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.order_status_admin" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="下单时间" align="center" prop="createTime" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark"/>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import {listOrder, repealOrder} from "@/api/system/order";
+import {allList} from "@/api/system/store";
+import {queryRoom} from "@/api/system/room";
+import {query} from "@/api/system/pack";
+import {queryCouponList} from "@/api/system/consumerCoupon";
+
+export default {
+  name: "Order",
+  dicts: ['sys_normal_disable', 'store_order_type', 'store_coupon_type', 'store_is_use_coupon', 'store_order_status', 'store_pay_ways', 'order_pay_status', 'order_status_admin'],
+  data() {
+    return {
+      repealOpen: false,
+      repealForm: {
+        orderNo: '',
+        isReverseconsume: 0,
+        remark: ''
+      },
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      id: null,
+      statusList: [
+        {
+          label: '是',
+          value: 1
+        },
+        {
+          label: '否',
+          value: 0
+        }
+      ],
+      modify: true,
+      options: [],
+      roomList: [],
+      packList: [],
+      couponList: [],
+      rooms: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      //订单总价
+      totalPrice: 0,
+      //实际支付金额
+      payPrice: 0,
+      usedAmount: 0,
+      usedPayAmount: 0,
+      refundAmount: 0,
+      refundPayAmount: 0,
+      // 订单表格数据
+      orderList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      dateValue: null,
+      preDate: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderType: null,
+        serialNumber: null,
+        consumerId: null,
+        consumerName: null,
+        description: null,
+        originalPrice: null,
+        payWays: null,
+        realPrice: null,
+        isUseCoupon: null,
+        couponType: null,
+        couponName: null,
+        couponId: null,
+        status: null,
+        startDate: null,
+        endDate: null,
+        preStartDate: null,
+        preEndDate: null,
+        orderNo: null,
+        roomId: null,
+        consumerPhone: null,
+        storeId: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      repealRules: {
+        remark: [
+          {required: true, message: "备注不能为空", trigger: "blur"}
+        ]
+      },
+      refundTitle: "",
+      refundOpen: false,
+      // 表单参数
+      refundForm: {},
+    };
+  },
+  created() {
+    const roomId = this.$route.params && this.$route.params.roomId;
+    if (roomId) {
+      this.queryParams.roomId = roomId;
+      this.getList();
+    }
+    this.onGetRoomList();
+    this.onGetAllStoreList();
+    this.onGetPackList();
+    this.onGetCouponList();
+  },
+  methods: {
+    onGetAllStoreList() {
+      allList().then(res => {
+        this.options = res.data
+      })
+    },
+    onGetCouponList() {
+      queryCouponList().then(res => {
+        this.couponList = res.data
+      })
+    },
+    onGetRoomList() {
+      queryRoom().then(res => {
+        this.roomList = res.data
+      })
+    },
+    onGetPackList() {
+      query().then(res => {
+        this.packList = res.data
+      })
+    },
+    /** 查询订单列表 */
+    getList() {
+      this.queryParams.status = 10;
+      listOrder(this.queryParams).then(response => {
+        this.orderList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 返回按钮
+    handleClose() {
+      const obj = {path: "/share/room"};
+      this.$tab.closeOpenPage(obj);
+    },
+    // 字典翻译
+    orderStatusFormat(value) {
+      return this.selectDictLabel(this.dict.type.order_status_admin, value);
+    },
+  }
+};
+</script>

src/views/system/room/index.vue

@@ -163,6 +163,14 @@
             @click="handleDevice(scope.row)"
             v-hasPermi="['system:room:edit']"
           >设备配置</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-user"
+            @click="handleOrder(scope.row)"
+            v-hasPermi="['system:store:edit']"
+          >查看订单
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -584,6 +592,10 @@ export default {
       this.$store.dispatch('room/setRoomId', row.id);
       this.$store.dispatch('room/setShowDeviceList', true);
     },
+    handleOrder(row) {
+      const roomId = row.id;
+      this.$router.push("/order/order-index/roomId/" + roomId);
+    },
     submitPackForm() {
       this.$refs["packForm"].validate(valid => {
         if (valid) {