|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <!-- 查询区域 -->
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item>
|
|
|
+ <div>
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="list-container">
|
|
|
+ <div class="list-item" v-for="(item, index) in dateList" :key="index" :class="{active: activeIndex === index}" @click="handleClick(index)">
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-range-picker v-show="activeIndex==3" @change="onChange"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item>
|
|
|
+ <a-input placeholder="房间号" v-model="queryParam.roomNumber" allowClear></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item>
|
|
|
+ <a-input placeholder="客人姓名" v-model="queryParam.customerName" allowClear></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="12" :sm="24">
|
|
|
+ <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
|
|
+ <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
|
|
+ <a-button type="primary" @click="searchReset" icon="reload"
|
|
|
+ style="margin-left: 8px">重置</a-button>
|
|
|
+<!-- <a-button style="margin-left: 8px" type="primary" icon="download" @click="handleExportXls('bus_market_agreement_customer_info')">导出</a-button>-->
|
|
|
+<!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
|
|
|
+<!-- <a-button style="margin-left: 8px" type="primary" icon="import">导入</a-button>-->
|
|
|
+<!-- </a-upload>-->
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- 查询区域-END -->
|
|
|
+
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+ <div class="table-operator">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- table区域-begin -->
|
|
|
+ <div>
|
|
|
+ <a-table
|
|
|
+ ref="table"
|
|
|
+ size="middle"
|
|
|
+ :scroll="{x:true}"
|
|
|
+ bordered
|
|
|
+ rowKey="orderNumber"
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ :pagination="ipagination"
|
|
|
+ :loading="loading"
|
|
|
+ :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
|
|
+ class="j-table-force-nowrap"
|
|
|
+ @change="handleTableChange">
|
|
|
+
|
|
|
+ <template slot="htmlSlot" slot-scope="text">
|
|
|
+ <div v-html="text"></div>
|
|
|
+ </template>
|
|
|
+ <template slot="priceSlot" slot-scope="text,record">
|
|
|
+ <a-button type="primary">
|
|
|
+ 查看
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import '@/assets/less/TableExpand.less'
|
|
|
+ import { mixinDevice } from '@/utils/mixin'
|
|
|
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
+ import moment from 'dayjs'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'checkInList',
|
|
|
+ mixins:[JeecgListMixin, mixinDevice],
|
|
|
+ props: {
|
|
|
+ agreementModel:{
|
|
|
+ type: Object,
|
|
|
+ required: false,
|
|
|
+ default: () => {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dateList: ['今天', '昨日', '本周', '更多'],
|
|
|
+ activeIndex: 0,
|
|
|
+ queryParam: {
|
|
|
+ agreementId:this.agreementModel.id,
|
|
|
+ startDate:moment(new Date()).format('YYYY-MM-DD'),
|
|
|
+ endDate:moment(new Date()).format('YYYY-MM-DD')
|
|
|
+ },
|
|
|
+ columns:[
|
|
|
+ {
|
|
|
+ title: '单号',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'orderNumber'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '房间号',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'roomNumber'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '房价',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'housePrice'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '入住时间',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'arrivalTime',
|
|
|
+ customRender: function (text) {
|
|
|
+ return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '离店时间',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'dueOutTime',
|
|
|
+ customRender: function (text) {
|
|
|
+ return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '入住天数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'dayCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '入住类型',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'checkinType',
|
|
|
+ customRender: function (text) {
|
|
|
+ return !text ? "" : (text==1 ?"全天房" : "钟点房")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客人姓名',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'customerName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总消费',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'totalPrice'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ url: {
|
|
|
+ list: "/business/busMarketAgreementUnit/listCheckInRecord",
|
|
|
+ delete: "/business/busMarketAgreementCustomer/delete",
|
|
|
+ deleteBatch: "/business/busMarketAgreementCustomer/deleteBatch",
|
|
|
+ exportXlsUrl: "/business/busMarketAgreementCustomer/exportXls",
|
|
|
+ importExcelUrl: "business/busMarketAgreementCustomer/importExcel",
|
|
|
+
|
|
|
+ },
|
|
|
+ dictOptions: {},
|
|
|
+ superFieldList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ importExcelUrl: function(){
|
|
|
+ return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ handleClick(index) {
|
|
|
+ this.activeIndex = index
|
|
|
+ // this.searchQuery()
|
|
|
+ console.log(index)
|
|
|
+ let td = moment().format('YYYY-MM-DD')
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ console.log('今天')
|
|
|
+ let today = moment(new Date()).format('YYYY-MM-DD')
|
|
|
+ this.queryParam.startDate = today;
|
|
|
+ this.queryParam.endDate = today;
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ console.log('昨天')
|
|
|
+ let btd = moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD')
|
|
|
+ this.queryParam.startDate = btd;
|
|
|
+ this.queryParam.endDate = btd;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ console.log('本周')
|
|
|
+ // const weekStart = moment().startOf('week').add(1, 'days').format('YYYY-MM-DD'); //本周开始的日期
|
|
|
+ // const weekBefore = moment(moment().startOf('week').add(1, 'days')).subtract(7,'days').format('YYYY-MM-DD'); // 近七日日期
|
|
|
+
|
|
|
+ // 获取当前时间
|
|
|
+ var currentDate = new Date();
|
|
|
+ // 返回date是一周中的某一天
|
|
|
+ var week = currentDate.getDay()
|
|
|
+ // 返回date是一个月中的某一天
|
|
|
+ // var month = currentDate.getDate()
|
|
|
+ // 一天的毫秒数
|
|
|
+ var millisecond = 1000 * 60 * 60 * 24
|
|
|
+ // 减去的天数
|
|
|
+ var minusDay = week !== 0 ? week - 1 : 6
|
|
|
+ // alert(minusDay);
|
|
|
+ // 本周 周一
|
|
|
+ var monday = new Date(currentDate.getTime() - (minusDay * millisecond))
|
|
|
+ // 本周 周日
|
|
|
+ var sunday = new Date(monday.getTime() + (6 * millisecond))
|
|
|
+
|
|
|
+ this.queryParam.startDate = moment(monday).format('YYYY-MM-DD');// 本周起始时间
|
|
|
+ this.queryParam.endDate = moment(sunday).format('YYYY-MM-DD');// 本周终止时间
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.loadData(1);
|
|
|
+ },
|
|
|
+ formatDate (date) {
|
|
|
+ // 格式化时间为yyyy-mm-dd
|
|
|
+ var d = new Date(date)
|
|
|
+ var month = '' + (d.getMonth() + 1)
|
|
|
+ var day = '' + d.getDate()
|
|
|
+ var year = d.getFullYear()
|
|
|
+ if (month.length < 2) month = '0' + month
|
|
|
+ if (day.length < 2) day = '0' + day
|
|
|
+ return [year, month, day].join('-')
|
|
|
+ },
|
|
|
+ onChange(){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .item-content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ /*align-items: center;*/
|
|
|
+ /*justify-items: center;*/
|
|
|
+ }
|
|
|
+ .list-container {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
+ border: solid 1px #d9d9d9;
|
|
|
+ width: 260px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ /*height: 32px;*/
|
|
|
+ /*line-height: 32px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ padding: 0px;
|
|
|
+ border-right: solid 1px #d9d9d9;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item.active {
|
|
|
+ background-color: #1890ff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+</style>
|
WIN-B904R0U0NNS\Administrator