Ci2Order.vue/Web/src/views/financial/WeddingConfirm.vue

<template>
    <div>
        <z-title title="婚庆二次确认" ref="title"></z-title>
        <el-card ref="search">
            <div class="flex-n fac fjb">
                <div class="flex-n fac">
                    <div class="textnowrap">收款日期：</div>
                    <el-date-picker
                            size="medium"
                            class="mr-10 date w-220"
                            v-model="orderClearDate"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                    <div class="textnowrap">订单日期：</div>
                    <el-date-picker
                            size="medium"
                            class="mr-10 date w-220"
                            v-model="orderDate"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                    <!--<div class="textnowrap">操作状态：</div>-->
                    <!--<operation-status clearable class="mr-10 " size="medium" v-model="confirmStatus"-->
                                      <!--placeholder="请选择"></operation-status>-->
                </div>

                <el-button type="primary" class="ele-btn2" @click="searchList">查询</el-button>


            </div>
        </el-card>
        <el-card class="mt-10">
            <div class="record-total">
                <el-row :gutter="10">
                    <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="1" v-for="(item,index) in payWayList" :key="index">{{item.paymentName}} {{item.confirmMoney}}</el-col>
                </el-row>
            </div>
            <!--列表-->
            <el-table class="mt-20"
                      :data="tableData"
                      v-loading="loading"
                      :height="height+'px'"
                      highlight-current-row
                      element-loading-text="列表刷新中"
                      header-cell-class-name="headerrow"
                      cell-class-name="cellclass"
                      style="width: 100%">
                <el-table-column
                        fixed="left"
                        prop="confirmTime"
                        label="结算时间"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="houseName"
                        label="场地名称"
                        align="center"
                        :show-overflow-tooltip="true"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="时间段"
                        align="center"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="paymentName"
                        label="结算方式"
                        align="center"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="confirmMoney"
                        label="结算金额"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="confirmName"
                        label="收款人"
                        width="120"
                        align="center">
                </el-table-column>
                <!--<el-table-column-->
                        <!--prop="orderTime"-->
                        <!--label="订单日期"-->
                        <!--width="160"-->
                        <!--align="center">-->
                <!--</el-table-column>-->
                <el-table-column
                        label="核实状态"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.confirmStatus=='0'?'待审核':'已审核'}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操  作"
                        fixed="right"
                        width="120"
                        align="center"
                >
                    <template slot-scope="scope">
                        <div style="margin: 5px 0">

                            <el-popconfirm
                                    title="是否确定核实？"
                                    @confirm="toComfirm(scope.row.confirmId,scope.row.weddingId)"
                            >
                                <el-button v-if="scope.row.confirmStatus=='0'"  slot="reference" type="primary" class="ele-btn-small">核实</el-button>
                            </el-popconfirm>

                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :current-page="currentPage" :page-size="pageSize" :total="total"   @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange"></pagination>
        </el-card>
    </div>
</template>

<script>
    import ZTitle from "../../components/ZTitle";
    import Pagination from "../../components/pagination/pagination";
    import OperationStatus from "../../components/data/operationStatus";

    export default {
        components: {
            OperationStatus,
            Pagination,
            ZTitle},
        name: "wedding-confirm",
        data(){
            return{
                loading: false,
                currentPage: 1,
                pageSize: 20,
                total: 0,
                height: 250,
                tableData: [],
                id: '',

                confirmStatus:'',
                dateRange:[],
                orderDate:[],
                orderClearDate:[],
                payWayList:[]
            }
        },
        computed:{
            pickerOptions() {
                var that=this;
                return{
                    firstDayOfWeek: 1,
                    shortcuts: [
                        {
                            text: '今日',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '昨日',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24);
                                end.setTime(end.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '本周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                var num=start.getDay();
                                if(num==0){
                                    num=7;
                                }
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * (num-1));
                                end.setTime(end.getTime() + 3600 * 1000 * 24 * (7-num));
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '上周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                var num=start.getDay();
                                if(num==0){
                                    num=7;
                                }
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * (num+6));
                                end.setTime(end.getTime() - 3600 * 1000 * 24 * num);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '本月',
                            onClick(picker) {
                                const start = new Date();
                                var year=start.getFullYear(),month=start.getMonth()+1;
                                var startDate=new Date(year+'-'+month+'-1');
                                var length=that.$TM.getMonthArea().length-1;
                                var dd=that.$TM.getMonthArea()[length].dd;
                                var endDate= new Date(that.$TM.getMonthArea()[length-(dd<7?dd:0)].date);
                                console.log(startDate,endDate)
                                picker.$emit('pick', [startDate, endDate]);
                            }
                        },
                        {
                            text: '上月',
                            onClick(picker) {
                                const start = new Date();
                                console.log(that.$TM.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1}))
                                var month=that.$TM.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1})[15].mm,
                                    year=that.$TM.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1})[15].yy;
                                var length=that.$TM.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1}).length-1;
                                var dd=that.$TM.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1})[length].dd;
                                var startDate=new Date(year+'-'+month+'-1');
                                var endDate= new Date(that.$TM.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1})[length-(dd<7?dd:0)].date);
                                // console.log(startDate,endDate)
                                picker.$emit('pick', [startDate, endDate]);
                            }
                        }
                    ]
                }
            },

        },
        mounted() {
            setTimeout(()=>{
                this.height=document.body.offsetHeight -this.$refs.title.$el.offsetHeight-this.$refs.search.$el.offsetHeight - 220;
                console.log(this.height)
            },0)
            this.loading = true;
            var date=this.$TM.getDayArea().date;
            this.orderClearDate=[date,date];
            this.getDataList();
            this.getWeddingPayWay();
        },
        methods:{
            getWeddingPayWay(){
                this.$axios.post('/financeSecConfirm/findClearWeddingTotal',{
                    "orderBeginDate": this.orderDate?this.orderDate[0]:'',
                    "orderEndDate": this.orderDate?this.orderDate[1]:'',
                    "confirmStatus": this.confirmStatus,
                    "storeId":this.$root.getStorage('storeId'),
                    'orderClearBeginDate':this.orderClearDate?this.orderClearDate[0]:'',
                    'orderClearEndDate':this.orderClearDate?this.orderClearDate[1]:'',
                }).then(res=>{
                    console.log(res.data.list)
                    this.payWayList=res.data.list;
                }).catch(err=>{
                    this.$message.error(err.msg);
                })
            },
            searchList() {
                this.currentPage = 1;
                this.loading = true;
                this.getDataList();
                this.getWeddingPayWay();
            },
            getDataList(){
                this.loading=false;
                this.$axios.post('/financeSecConfirm/findClearWeddingDetail',{
                    "orderBeginDate": this.orderDate?this.orderDate[0]:'',
                    "orderEndDate": this.orderDate?this.orderDate[1]:'',
                    "confirmStatus": this.confirmStatus,
                    "storeId":this.$root.getStorage('storeId'),
                    'orderClearBeginDate':this.orderClearDate?this.orderClearDate[0]:'',
                    'orderClearEndDate':this.orderClearDate?this.orderClearDate[1]:'',
                }).then(res=>{
                    console.log(res.data.list)
                    this.tableData=res.data.list;
                }).catch(err=>{
                    this.$message.error(err.msg);
                })
            },

            toComfirm(confirmId,weddingId){
                this.$axios.post('/financeSecConfirm/weddingSecConfirm',{
                    "weddingId": weddingId,
                    "preWeddingConfirmId": confirmId
                }).then(res=>{
                    this.$message.success('核实成功');
                    this.getDataList();
                }).catch(err=>{
                    this.$message.error(err.msg);
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loading = true;
                this.getDataList();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loading = true;
                this.getDataList();
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped lang="scss">
    .record-total{
    &>div{
         font-size: 15px;
         color: #333333;
         font-weight: bold;
     }

    }
</style>