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

<!-- 交接班 在用的 -->
<template>
  <div class="app-containerss">
    <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: 99%;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: 230px" 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: 230px" placeholder="交班员工" clearable
                       :disabled="queryParams.status== '统一交班'" >
              <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"
                       :disabled="queryParams.staffId == null"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div
        style="width: 25%; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; background: #FFFFFF;box-sizing: border-box;padding: 15px; height: 78vh;"
        class="b-c-ad"
      >
        <div class="title_" style="display: flex;justify-content: space-between">
          <div style="width: 10%;"></div>
          <div>门店交接单</div>
          <div style="cursor: pointer; color: #FF9655;font-size: 14px;"  @click="handoverShiftPrintingReceipt">打印</div>
        </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.oilRefund }}</div>
        </div>
        <div class="d-s-b">
          <div>退款金额</div>
          <div>{{ orderSummary.oilPaid }}</div>
        </div>
        <div class="d-s-b">
          <div>挂账金额</div>
          <div>{{ orderSummary.onAccount }}</div>
        </div>
        <div class="d-s-b">
          <div>会员消费</div>
          <div>{{ orderSummary.consumptionMoney }}</div>
        </div>
        <div class="d-s-b">
          <div>实收金额</div>
          <div>{{ orderSummary.receiptsMoney }}</div>
        </div>
        <div class="d-s-b">
          <div>充值金额</div>
          <div>{{ orderSummary.onAccount }}</div>
        </div>
        <div class="d-s-b">
          <div>充值赠送</div>
          <div>{{ orderSummary.giftAccount }}</div>
        </div>
        <div class="d-s-b">
          <div>会员总余额</div>
          <div>{{ orderSummary.memberBalance }}</div>
        </div>
        <div class="d-s-b">
          <div>会员总积分</div>
          <div>{{ orderSummary.memberPoints }}</div>
        </div>
        <div class="xxing"></div>
        <div style="overflow: auto; height: 35vh;scrollbar-width: none; ">
          <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.oilOrder }}</div>
              <div class="r-size">￥{{ orderSummary.receiptsMoney }}</div>
            </div>
            <div class="d-s-b">
              <div class="l-size">充值总额</div>
              <div class="s-size">{{ orderSummary.rechargeAll }}</div>
              <div class="r-size">￥{{ orderSummary.onAccount }}</div>
            </div>
            <div class="d-s-b">
              <div class="l-size">合计</div>
              <div class="s-size">{{ orderSummary.orderall}}</div>
              <div class="r-size">￥{{ orderSummary.orderalls}}</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">{{item.payType}}</div>
              <div class="s-size">{{ item.orderNum }}</div>
              <div class="r-size">￥{{ item.truePay }}</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.name }}</div>
              <div class="s-size">{{ item.orderNum }}</div>
              <div class="r-size">￥{{ item.payAmount }}</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 discountStatistics">
              <div class="l-size">{{ item.name }}</div>
              <div class="s-size">{{ item.orderNum }}</div>
              <div class="r-size">￥{{ item.discountAmount }}</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 backMoneyStatistics">
              <div class="l-size">{{ item.name }}</div>
              <div class="s-size">{{ item.orderNum }}</div>
              <div class="r-size">￥{{ item.refMoney }}</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 billingDetails"
            >
              <div class="l-size">{{ item.name }}</div>
              <div class="s-size">{{ item.orderNum}}</div>
              <div class="r-size">￥{{ item.amount}}</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.payType}}</div>
              <div class="s-size">{{ item.orderNum}}</div>
              <div class="r-size">￥{{ item.rechargeBalance}}</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 consumptionStatistics">
              <div class="l-size">{{ item.payType}}</div>
              <div class="s-size">{{ item.orderNums }}</div>
              <div class="r-size">￥{{item.orderNum}}</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 goodsNumberStatistics">
              <div class="l-size">{{item.payType }}</div>
              <div class="s-size">{{ item.orderNum}}</div>
              <div class="r-size">￥{{ item.payAmount}}</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 integerNumberStatistics">
              <div class="l-size">{{item.payType }}</div>
              <div class="s-size">{{ item.orderNum}}</div>
              <div class="r-size">￥{{ item.amount}}</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">{{ memberStatistics.userNum }}</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.status }}</div>
              <div class="s-size">{{ item.returnNum }}</div>
              <div class="r-size">￥{{ item.amount}}</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 staffStatistics">
              <div class="l-size">{{ item.name }}</div>
              <div class="s-size">{{ item.staffNum }}</div>
              <div class="r-size">￥{{ item.monye}}</div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="width: 99%; margin: 10px 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,
  handoverShiftPrintingReceipts,
  handoverShiftPrintingReceiptss
} 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 {
      baseInfo : {},
      //汇总
      orderSummary : {},
      //支付
      paymentAggregation :[],
      //油号
      oilNumberStatistics:[],
      //优惠
      discountStatistics:[],
      //退款
      backMoneyStatistics:[],
      //挂账
      billingDetails :[],
      //会员充值
      employeeStatistics:[],
      //会员消费
      consumptionStatistics:[],
      //便利店消费
      goodsNumberStatistics:[],
      //积分
      integerNumberStatistics:[],
      //会员新增统计
      memberStatistics:{},
      //挂账归还
      returnedToTheAccount:[],
      //员工统计
      staffStatistics:[],
      tabs: [
        '交接班',
        '交班记录'
      ],
      value: '',
      tabindex: 0,
      openDetail: false,
      dataForm: {},
      dataList: [],
      recordData: '',
      zhztList: '',
      shiftHandoverList: '',
      handoverList: {},
      handoverData: {},
      greaseGunStatistics: [],
      // base
      queryParams: {

        staffId: null,
        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()
  },
  watch: {
    'queryParams.status': {
      handler(newVal, oldVal) {
        if (newVal == '统一交班') {
          this.queryParams.staffId = null
          this.getList()
          this.getHandover()
        }
      },
      immediate: false, // 是否在侦听器创建时立即触发回调
      deep: false // 是否深度监听
    }

  },
  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)
      })
    }
    ,
    handoverShiftPrintingReceipt() {
      handoverShiftPrintingReceipts(this.queryParams).then(res => {
        this.dataList = res.data.records
        this.total = res.data.total
      })
    },
    getindex(index) {
      this.tabindex = index
    }
    ,
    getList() {
      handoverShiftPrintingReceiptss(this.queryParams).then(res => {
        this.handoverData = res.data;
        this.baseInfo = this.handoverData.baseInfo,
          //汇总
          this.orderSummary = this.handoverData.orderSummary,
          //支付
          this.paymentAggregation = this.handoverData.paymentAggregation,
          //油号
          this.oilNumberStatistics = this.handoverData.oilNumberStatistics,
          //优惠
          this.discountStatistics = this.handoverData.discountStatistics,
          //退款
          this.backMoneyStatistics = this.handoverData.backMoneyStatistics,
          //挂账
          this.billingDetails = this.handoverData.billingDetails,
          //会员充值
          this.employeeStatistics = this.handoverData.employeeStatistics,
          //会员消费
          this.consumptionStatistics = this.handoverData.consumptionStatistics,
          //便利店消费
          this.goodsNumberStatistics = this.handoverData.goodsNumberStatistics,
          //积分
          this.integerNumberStatistics = this.handoverData.integerNumberStatistics,
          //会员新增统计
          this.memberStatistics = this.handoverData.memberStatistics,
          //挂账归还
          this.returnedToTheAccount = this.handoverData.returnedToTheAccount,
          //员工统计
          this.staffStatistics = this.handoverData.staffStatistics
      })
    }
    ,
    getStatistics() {
      getStatisticsApi().then(res => {
        this.statisticsForm = res.data
      })
    }
    ,

    // 获取支付方式
    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-containerss {
  width: 100%;
  height: 100vh;
  background: #f6f8f9;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

.tab-box {
  width: 100%;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 5px;
  padding-bottom: 0px;
  border-top: 1px solid #eceff1;
}

.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 {

}

.tab_ {
  width: 75px;
  height: 40px;
  //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: 5px 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-size: 14px;
  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>