oil-station/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue

<!-- 交接班 在用的 -->
<template>
  <div class="app-containers">

    <div class="tab-box">
      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"  :key="index">
        {{item}}
      </div>
    </div>
    <div v-if="tabindex == 0">
      <div class="card-box" style="width: 98%;margin: 10px auto;background: #fff;box-sizing: border-box;padding-top: 15px" >
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="" prop="status">
            <el-select v-model="queryParams.status" style="width: 150px" placeholder="交班方式" clearable>
              <el-option  label="统一交班" value="统一交班">统一交班</el-option>
              <el-option  label="个人交班" value="个人交班">个人交班</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="staffId">
            <el-select v-model="queryParams.staffId" style="width: 150px" placeholder="交班员工" clearable>
              <el-option
                v-for="option in staffList"
                :key="option.id"
                :label="option.realName"
                :value="option.id"
              ></el-option>
            </el-select>
          </el-form-item>



          <el-form-item class="flex-container" style="float: right">
            <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-card style="margin-top: 20px;  height: 70vh;overflow: auto"   class="box-card">
        <div class="title_">门店交接单</div>
        <div class="d-s-b">
          <div>油站名称</div>
          <div>{{baseInfo.storeName}}</div>
        </div>
        <div class="d-s-b">
          <div>油站站长</div>
          <div>{{baseInfo.realName}}</div>
        </div>
        <div class="d-s-b">
          <div>交班方式</div>
          <div>{{baseInfo.handoverType}}</div>
        </div>
        <div class="d-s-b">
          <div>开始时间</div>
          <div>{{baseInfo.startTime}}</div>
        </div>
        <div class="d-s-b">
          <div>结束时间</div>
          <div>{{baseInfo.endTime}}</div>
        </div>
        <div class="d-s-b">
          <div>订单金额</div>
          <div>{{orderSummary.oilOrder}}</div>
        </div>
        <div class="d-s-b">
          <div>优惠金额</div>
          <div>{{orderSummary.allDis}}</div>
        </div>
        <div class="d-s-b">
          <div>退款金额</div>
          <div>{{orderSummary.oilRefund}}</div>
        </div>
        <div class="d-s-b">
          <div>挂账金额</div>
          <div>--</div>
        </div>
        <div class="d-s-b">
          <div>会员消费</div>
          <div>{{orderSummary.allBalanceP}}</div>
        </div>
        <div class="d-s-b">
          <div>实收金额</div>
          <div>{{orderSummary.allMoney}}</div>
        </div>
        <div class="d-s-b">
          <div>充值金额</div>
          <div>{{orderSummary.cardPaid}}</div>
        </div>
        <div class="d-s-b">
          <div>充值赠送</div>
          <div>{{orderSummary.cardGiftPaid}}</div>
        </div>
        <div class="d-s-b">
          <div>会员总余额</div>
          <div>{{orderSummary.points}}</div>
        </div>
        <div class="d-s-b">
          <div>会员总积分</div>
          <div>{{orderSummary.sumnum}}</div>
        </div>
        <div class="xxing"></div>
        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>营业收入统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">类型</div>
            <div class="f-size">订单金额</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b">
            <div class="l-size">营业总额</div>
            <div class="s-size">{{orderSummary.allyingye1}}</div>
            <div class="r-size">￥{{orderSummary.allyingye}}</div>
          </div>
          <div class="d-s-b">
            <div class="l-size">充值总额</div>
            <div class="s-size">{{orderSummary.allchuzhika1}}</div>
            <div class="r-size">￥{{orderSummary.allchuzhika}}</div>
          </div>
          <div class="d-s-b">
            <div class="l-size">合计</div>
            <div class="s-size">{{orderSummary.allyingye1 + orderSummary.allchuzhika1}}</div>
            <div class="r-size">￥{{orderSummary.allyingye + orderSummary.allchuzhika}}</div>
          </div>
        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>支付方式统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all'">
            <div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
            <div class="s-size">{{item.numberOfDeals}}</div>
            <div class="r-size">￥{{item.paidAmount}}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>油品实收统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">油号</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in oilNumberStatistics">
            <div class="l-size">{{item.oilName}}</div>
            <div class="s-size">{{item.numberOfDeals}}</div>
            <div class="r-size">￥{{item.paidAmount}}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>优惠统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">油号</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in oilNumberStatistics">
            <div class="l-size">{{item.oilName}}</div>
            <div class="s-size">{{item.numberOfDeals}}</div>
            <div class="r-size">￥{{item.paidAmount}}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>退款统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">类型</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in oilNumberStatistics">
            <div class="l-size">{{item.oilName}}</div>
            <div class="s-size">{{item.numberOfDeals}}</div>
            <div class="r-size">￥{{item.paidAmount}}</div>
          </div>
        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>挂账统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">挂账单位</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
            <div class="l-size">{{item.name}}</div>
            <div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
            <div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>会员充值统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'allbalance'">
            <div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
            <div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
            <div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>会员消费统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
            <div class="l-size">合计</div>
            <div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
            <div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>便利店统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'goods'">
            <div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
            <div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
            <div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
          </div>
        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>积分商城统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'point'">
            <div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
            <div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
            <div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
          </div>
        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>新增会员统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">新增会员数</div>
            <!--          <div class="f-size">笔数</div>-->
            <div class="r-size">{{orderSummary.sumnum}}</div>
          </div>

        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>挂账归还统计(再处理)</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in returnedToTheAccount">
            <div class="l-size">{{item.name?item.name:'--'}}</div>
            <div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
            <div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>员工实收统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">员工</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in employeeStatistics">
            <div class="l-size">{{item.name?item.name:'--'}}</div>
            <div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
            <div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
          </div>
        </div>

      </el-card>
      <div style="width: 98%; margin: 20px auto;display: flex;align-items: center;justify-content: center; background: #fff;box-sizing: border-box;padding: 15px " >
        <el-button type="primary" @click="shift()">交班</el-button>
      </div>
    </div>
    <div v-if="tabindex == 1">
      <HandoverRecord></HandoverRecord>
    </div>
    <el-dialog title="订单详情" :visible.sync="openDetail" width="600px" append-to-body :close-on-click-modal="false">
      <!--      <detail :dataForm = "recordData"></detail>-->
      <HandoverOnly :recordData = "recordData"></HandoverOnly>
    </el-dialog>
  </div>
</template>
<script>
import {
  addHandoverApi,
  getHandoverApi2,
  getHandoverListApi,
  printLocallyApi,
  getStatisticsApi,
  getDicts,
  listStaff
} from "@/api/handover/handover";

import HandoverOnly from "@/views/cashier/NewComponents/HandoverOnly.vue";
import HandoverRecord from "@/views/cashier/NewComponents/HandoverRecord.vue";

export default {
  name: "pointsCashier",
  components: {HandoverRecord, HandoverOnly},

  // dicts: ['zhzt'],

  data() {
    return {

      tabs:[
        "交接班",
        "交班记录"
      ],
      value:'',
      tabindex:0,
      openDetail:false,
      dataForm:{},
      dataList:[],
      recordData:'',
      zhztList:'',
      shiftHandoverList:'',
      handoverList : {},
      handoverData:{},
      baseInfo:{},
      billingDetails:[],
      employeeStatistics:[],
      greaseGunStatistics:[],
      oilNumberStatistics:[],
      orderSummary:{},
      paymentAggregation:[],
      returnedToTheAccount:[],
      // base
      queryParams: {

        staffId: '',
        status: '',
        type: '',

        page:null,
        pageSize:null
      },
      loading: false,
      dateRange: [new Date(),new Date()],
      beginTime:new Date(),
      endTime:new Date(),
      defaultSort: {prop: 'createTime', order: 'descending'},

      total: 0,
      staffList:[],
      statisticsForm: {
        num:0,
        exchangeQuantity:0,
        integral:0,
        amount:0
      }
    }
  },
  created() {
    this.getList();
    this.getHandover();
    this.getStatistics();
    this.getStatus();
    this.getStaffList();
  },
  methods: {
    getHandover() {
      getHandoverApi2(this.queryParams).then(res=>{
        // this.handoverList = res.data;
        this.handoverData = res.data;
        this.baseInfo = this.handoverData.baseInfo,
          this.billingDetails = this.handoverData.billingDetails,
          this.employeeStatistics = this.handoverData.employeeStatistics,
          this.greaseGunStatistics = this.handoverData.greaseGunStatistics,
          this.oilNumberStatistics = this.handoverData.oilNumberStatistics,
          this.orderSummary = this.handoverData.orderSummary,
          this.paymentAggregation = this.handoverData.paymentAggregation,
          this.returnedToTheAccount = this.handoverData.returnedToTheAccount,
          console.log("this.handoverList",this.handoverList)
      })
    },

    getindex(index){
      this.tabindex = index
    },
    getList(){
      this.dateRange = []
      if (this.beginTime && this.endTime) {
        this.dateRange.push(this.beginTime.toLocaleDateString())
        this.dateRange.push(this.endTime.toLocaleDateString())
      }
      getHandoverListApi(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
        this.dataList = res.data.records
        this.total = res.data.total

      })
    },
    getStatistics() {
      getStatisticsApi().then(res=>{
        this.statisticsForm = res.data
      })
      console.log("123123123",this.statisticsForm)
    },

    // 获取支付方式
    getZhzt() {
      getDicts("zhzt").then(response => {
        this.zhztList = response.data;
      })
    },
    getStatus() {
      getDicts("handover").then(response => {
        this.shiftHandoverList = response.data;
      })
    },
// 交班
    async shift() {
      let msg = '交班, 是否继续?'
      let flag = false
      if (this.handoverList && this.baseInfo && this.baseInfo.handoverOut == 'jbtc') {
        flag = true
      } else {
        msg = '确定交班？'
      }

      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let recordData = this.handoverData
        let handoverRecord = {
          startTime: this.baseInfo.startTime,
          recordData: JSON.stringify(recordData),
          type: 0,
          status: this.baseInfo.handoverType,
          staffId: this.queryParams.staffId
        }
        addHandoverApi(handoverRecord).then(res => {
          if (flag) {
            this.clean()
            // removeUserId();
            // this.$store.dispatch('LogOut').then(() => {
            //   location.href = '/';
            // })
          }
          this.getHandover();
        })
      })
    },
    handleUpdate(){},
    handleQuery(){
      this.getList();
      this.getHandover();
    },
    getStaffList() {
      listStaff(this.addDateRange({  page: 1,
        pageSize: 10000})).then(response => {
          this.staffList = response.data.records;

        }
      );
    },
    resetQuery(){
      this.queryParams = {
        giftName: '',
        status: '',
        mobile: '',
        orderNumber: '',
        page:1,
        pageSize:10
      },
        this.dateRange = []
      this.beginTime = "";
      this.endTime = ""
      this.getList();
    },
    printLocally(data) {
      printLocallyApi(data).then(res=>{

      })
    },
    handleDetail(data){
      this.openDetail = true
      this.recordData = data.recordData;
      // JSON.parse(this.recordData )
      console.log("data.recordData;",this.recordData)

    },
    goToAbout() {
      this.$router.push({
        path:'/Handover',
        query:{
          id:9
        }
      });
    },
    billingDetails1() {
      let count = [];
      if (this.billingDetails) {
        return this.billingDetails
      }
      return count;
    },
    calculateThePaymentMethod(payType) {
      switch (payType) {
        case 'ALIPAY':
          return '支付宝'
          break;
        case 'WECHAT':
          return '微信'
          break;
        case 'UNIONPAY':
          return '银联二维码'
          break;
        case 'CASH':
          return '现金'
          break;
        case 'balance':
          return '余额'
          break;
        case 'oilCard':
          return '油卡'
          break;
      }
      return '未知'
    },
  }
}
</script>

<style scoped lang="scss">
.app-containers {
  width: 100%;
  height: 100vh;
  background: #f6f8f9;
  box-sizing: border-box;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.tab-box{
  width: 100%;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 0px 25px;
  margin-bottom: 25px;

}
.box_{
  height: 100%;
  border-bottom: 2px solid #fe9554;
}
.box {
  padding: 10px;
  height: 80px;
  width: 150px;
  margin-right: 0px;
  background-color: rgba(204, 204, 204, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
}
.box-card{
  width: 640px;
  margin: 0 auto;
  margin-bottom: 15px;

}
.font-chinese {
  font-size: 15px;
  font-family:Microsoft YaHei;
  font-weight: bold;
  line-height:1.5
}
.font-number {
  font-size: 20px;
  font-family: PingFang SC,sans-serif;
  font-weight: bold;
  line-height:1.3
}
.table-box{
  width: 100%;
}

.flex-container1 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap; /* 确保不换行 */
  width: 100%; /* 让父容器占满可用宽度 */
}
.el-form--inline .el-form-item {
  margin-right: 44px;
}
.tab-box{
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 25px;

}
.tab_{
  width: 75px;
  height: 100%;
  //border-bottom: 2px solid #FF770F;
  display: flex;
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
  cursor: pointer;
}
.active{
  border-bottom: 2px solid #FF770F !important;
  color: #FF770F !important;
}
.title_{
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
}
.d-s-b{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin: 20px auto;
}
.xxing{
  width: 100%;
  border-bottom:  1px solid #EEEEEE;
}
.for-box{
  width: 100%;
  margin: 20px auto;
}
.for-title{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #333333;

}
.x-{
  width: 100px;
  border-bottom: 1px solid #EEEEEE;
  margin: 0 15px;
}
.f-size{
  width: 33%;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
}
.s-size{
  width: 33%;
  text-align: center;
}
.l-size{
  width: 33%;
  text-align: left;
}
.r-size{
  width: 33%;
  text-align: right;
}
.bottom-{
  width: 98%;
}
.table-boxs{
  border-radius: 8px;
  width: 98%;
  background: #fff;
  margin: 25px auto;
  box-sizing: border-box;

  padding: 15px;
}
</style>