oil-station/fuintCashierWeb/src/views/cashier/NewComponents/HandoverRecord.vue
2024-09-12 14:15:24 +08:00

283 lines
9.7 KiB
Vue

<script>
import {listStaff,getHandoverListApi} from "@/api/handover/handover";
import HandoverDetailsInfo from "@/views/cashier/NewComponents/HandoverDetailsInfo.vue";
export default {
name: "HandoverRecord",
components: {HandoverDetailsInfo},
data() {
return {
// 查看详情
openSeeDetails:false,
// 交易明细
openTransactionDetail:false,
// 商品汇总
openGoodsSum:false,
tabs:[
"交接班",
"交班记录"
],
value:'',
tabindex:0,
openDetail:false,
dataForm:{},
dataList:[],
recordData:'',
zhztList:'',
shiftHandoverList:'',
tableData: [{
date: '--',
}],
queryParams: {
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:[],
oilNumberStatistics:[],
goodsNumberStatistics:[],
IntegerNumberStatistics:[],
}
},
created() {
this.getList();
},
methods: {
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
this.dataList.forEach(res=>{
let data = JSON.parse(res.recordData)
let orderSummary = data.orderSummary
res.oilOrder = orderSummary.oilOrder?orderSummary.oilOrder:'0' // 订单金额
res.allDis = orderSummary.allDis?orderSummary.allDis :'0' // 优惠金额
res.allMoney = orderSummary.allMoney?orderSummary.allMoney :'0' // 实收金额
res.oilRefund = orderSummary.oilRefund?orderSummary.oilRefund :'0' // 退款金额
})
})
},
getHandoverData(data) {
JSON.parse(this.data)
},
handleQuery(){
this.getList();
},
resetQuery(){
this.queryParams = {
giftName: '',
status: '',
mobile: '',
orderNumber: '',
page:1,
pageSize:10
},
this.dateRange = []
this.beginTime = "";
this.endTime = ""
this.getList();
},
getStaffList() {
listStaff(this.addDateRange({ page: 1,
pageSize: 10000})).then(response => {
this.staffList = response.data.records;
}
);
},
transactionDetailMethod2(data) {
console.log("transactionDetailMethod2",data)
this.openGoodsSum = true
let info = JSON.parse(data.recordData);
this.oilNumberStatistics = info.oilNumberStatistics;
this.goodsNumberStatistics = info.goodsNumberStatistics;
this.IntegerNumberStatistics = info.IntegerNumberStatistics;
console.in
console.log("data",data)
},
openSeeDetailsMethods(data) {
this.openSeeDetails = true;
console.log("data")
this.recordData = data.recordData
},
transactionDetailMethod(data) {
console.log("transactionDetailMethod",data)
this.$router.push({
name: 'handover-info',
params: {
staffId : data.staffId,
btime : data.startTime,
etime : data.endTime,
}
// PinventoryId: data.id,
// PorderNumber: data.orderNumber,
// PorderDate: data.orderDate,
// PapprovalStatus: data.approvalStatus,
// PcreataByName: data.createByName
// },
});
}
}
}
</script>
<template>
<div class="">
<div class="table-boxs">
<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 label="">
<el-date-picker
v-model="beginTime"
style="width: 140px"
type="date"
placeholder="交易开始日期">
</el-date-picker>
<el-date-picker
v-model="endTime"
style="width: 140px"
type="date"
placeholder="交易结束日期">
</el-date-picker>
</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>
<el-table :data="dataList" border style="width: 100%">
<el-table-column type="index" width="50" align="center" label="序号"/>
<el-table-column width="100" align="center" prop="staffName" label="交班人员"></el-table-column>
<el-table-column width="120" align="center" prop="status" label="交班方式"></el-table-column>
<el-table-column align="center" prop="startTime" label="开始时间"></el-table-column>
<el-table-column align="center" prop="endTime" label="结束时间"></el-table-column>
<el-table-column align="center" prop="oilOrder" label="订单金额" width="80"></el-table-column>
<el-table-column align="center" prop="allDis" label="优惠金额" width="80"></el-table-column>
<el-table-column align="center" prop="allMoney" label="实收金额" width="80"></el-table-column>
<el-table-column align="center" prop="oilRefund" label="退款金额" width="80"></el-table-column>
<el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
<el-table-column label="操作" align="center" fixed='right'>
<template slot-scope="scope">
<el-button size="mini" type="text" @click="openSeeDetailsMethods(scope.row)">查看详情</el-button>
<el-button size="mini" type="text" @click="transactionDetailMethod(scope.row)">交易明细</el-button>
<el-button size="mini" type="text" @click="transactionDetailMethod2(scope.row)">商品汇总</el-button>
<el-button size="mini" type="text">打印</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<el-dialog title="查看详情" :visible.sync="openSeeDetails" width="600px" append-to-body :close-on-click-modal="false">
<HandoverDetailsInfo :recordData="recordData"></HandoverDetailsInfo>
</el-dialog>
<!-- <el-dialog title="交易明细" :visible.sync="openTransactionDetail" width="600px" append-to-body :close-on-click-modal="false">-->
<!-- </el-dialog>-->
<el-dialog title="商品汇总" :visible.sync="openGoodsSum" width="600px" append-to-body :close-on-click-modal="false">
<div>
<div>油品交易信息</div>
<div>
<el-table :data="oilNumberStatistics" style="width: 100%" border>
<el-table-column align="center" prop="oilName" label="油品油号" ></el-table-column>
<el-table-column align="center" prop="oilNum" label="销售数量" ></el-table-column>
<el-table-column align="center" prop="orderAmount" label="订单金额" ></el-table-column>
<el-table-column align="center" prop="paidAmount" label="实收金额" ></el-table-column>
</el-table>
</div>
</div>
<div>
<div>便利店交易信息</div>
<div>
<el-table :data="goodsNumberStatistics" style="width: 100%" border>
<el-table-column align="center" prop="goodsName" label="商品名称" ></el-table-column>
<el-table-column align="center" prop="goodsNumber" label="销售数量" ></el-table-column>
<el-table-column align="center" prop="goodsAmount" label="订单金额" ></el-table-column>
<el-table-column align="center" prop="amount" label="实收金额" ></el-table-column>
</el-table>
</div>
</div>
<div>
<div >积分商城兑换信息</div>
<div>
<el-table :data="IntegerNumberStatistics" style="width: 100%" border>
<el-table-column align="center" prop="giftName" label="商品名称" ></el-table-column>
<el-table-column align="center" prop="exchangeQuantity" label="兑换数量" ></el-table-column>
<el-table-column align="center" prop="integrals" label="消耗积分" ></el-table-column>
<el-table-column align="center" prop="amount" label="实收金额" ></el-table-column>
</el-table>
</div>
</div>
</el-dialog>
</div>
</template>
<style scoped lang="scss">
.app-containers {
width: 100%;
height: 100vh;
background: #f6f8f9;
box-sizing: border-box;
padding-bottom: 20px;
}
.tab-box{
width: 100%;
background: #fff;
display: flex;
box-sizing: border-box;
padding: 0px 25px;
margin-bottom: 25px;
}
.table-boxs{
border-radius: 8px;
width: 98%;
background: #fff;
margin: 25px auto;
box-sizing: border-box;
padding: 15px;
}
</style>