485 lines
12 KiB
Vue
485 lines
12 KiB
Vue
<template>
|
|
<view class="top fixed-top bg-fff">
|
|
<my-tabs :list="tabs.list" @change="tabsChange"></my-tabs>
|
|
<view class="u-flex color-main u-m-t-32 " v-if="tabs.current===1">
|
|
<!-- <view class="u-flex u-p-l-20 " @tap="showJiaobanPickerView">
|
|
<view class=" u-flex u-row-between ">
|
|
<view>
|
|
<text class="" v-if="filters.jiaobanSelItem===''">暂未选择</text>
|
|
<text v-else>
|
|
{{filters.jiaobanSelItem.name}}
|
|
</text>
|
|
</view>
|
|
<view class="u-flex u-p-l-20 u-flex-1">
|
|
<image src="/pageWorkControl/static/images/icon-arrow-down-fill.svg"
|
|
class="icon-arrow-down-fill " mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="u-flex u-p-l-20 u-flex-1 u-row-center">
|
|
<view @tap="timeToggle">
|
|
<view class=" u-font-24 color-main u-flex" v-if="filters.time.start&&filters.time.end">
|
|
<text>{{timeFormat(filters.time.start, 'yyyy年mm月dd日') || '开始'}}</text>
|
|
<text class="u-p-l-10 u-p-r-10">至</text>
|
|
<text>{{timeFormat(filters.time.end, 'yyyy年mm月dd日') || '结束'}}</text>
|
|
|
|
</view>
|
|
<view class="" v-else>所有时间</view>
|
|
</view>
|
|
<view class="u-flex u-m-l-12">
|
|
<image src="/pageWorkControl/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill "
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="tabs.current===0">
|
|
<view class="color-333 u-font-28 min-page bg-gray default-box-padding" style="padding-top: 83px;">
|
|
<view class="bg-fff border-r-12 default-box-padding">
|
|
<view>
|
|
<view class="font-bold">是否打印销售区间的商品数据</view>
|
|
<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
|
|
<view>
|
|
<text>
|
|
{{banci.switchvalue?'打印':'不打印'}}
|
|
</text>
|
|
</view>
|
|
<view class="u-flex">
|
|
<up-switch v-model="banci.switchvalue"></up-switch>
|
|
</view>
|
|
</view>
|
|
<!--<view class="font-bold">班次</view>
|
|
|
|
<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom" @tap="showJiaobanPickerView">
|
|
<view>
|
|
<text class="color-999" v-if="banci.selItem===''">暂未选择</text>
|
|
<text v-else>
|
|
{{banci.selItem.name}}
|
|
</text>
|
|
</view>
|
|
<view class="u-flex">
|
|
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
<!-- <picker @change="banciChange" :value="banci.current" range-key="name" :range="banci.list">
|
|
<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
|
|
<view>
|
|
<text class="color-999" v-if="banci.current===''">暂未选择</text>
|
|
<text v-else>
|
|
{{banci.list[banci.current].name}}
|
|
</text>
|
|
</view>
|
|
<view class="u-flex">
|
|
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</picker> -->
|
|
|
|
</view>
|
|
<!-- <view class="u-m-t-24">
|
|
<view class="font-bold">开班时间</view>
|
|
<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom" @tap="jiaobanStartShow">
|
|
<view>
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="form.kaibanTime"></uni-dateformat>
|
|
<text></text>
|
|
</view>
|
|
<view class="u-flex">
|
|
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-24">
|
|
<view class="font-bold">交班时间</view>
|
|
<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
|
|
<view>
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="form.jiaobanTime"></uni-dateformat>
|
|
<text></text>
|
|
</view>
|
|
<view class="u-flex">
|
|
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-if="tabs.current===1">
|
|
<view class="color-333 u-font-28 min-page bg-gray default-box-padding" style="padding-top: 116px;">
|
|
<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
|
|
<view class="bg-fff border-r-12 u-flex no-wrap u-col-top">
|
|
<view class="constantbox">
|
|
<view class="constantboxitem">
|
|
<view class="head">班次号</view>
|
|
<view class="head">班次</view>
|
|
<view class="head">交班人</view>
|
|
<view class="head">开班时间</view>
|
|
<view class="head">交班时间</view>
|
|
<view class="head">订单数</view>
|
|
<view class="head">订单金额(元)</view>
|
|
</view>
|
|
<view class="constantboxitem" v-for="(item,index) in tableData.data" :key="index"
|
|
@click="toDetail(item)">
|
|
<view class="head">{{item.dutyId|| '无'}}</view>
|
|
<view class="head">班次</view>
|
|
<view class="head">{{item.staffName || '无'}}</view>
|
|
<view class="head">{{item.startTime|| '无'}}</view>
|
|
<view class="head">{{item.endTime|| '无'}}</view>
|
|
<view class="head">{{item.orderNum|| '无'}}</view>
|
|
<view class="head">{{item.totalAmount|| '无'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<up-loadmore :status="tableData.status" />
|
|
<view style="height: 100px;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="u-fixed bottom u-flex bg-fff ">
|
|
<!-- <view class="u-flex-1">
|
|
<my-button bgColor="#333" color="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain type="primary"
|
|
@tap="toSetting">设置</my-button>
|
|
</view> -->
|
|
<view class="u-flex-1">
|
|
<!-- <my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="jiaoban">开始交班</my-button> -->
|
|
<my-button borderRadius="100rpx" shape="circle" type="primary" @tap="jiaoban">开始交班</my-button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 交班开班时间选择 -->
|
|
<my-date-pickerview @confirm="jiaobanPickerConfirm" :defaultTime="jiaobanDateIndex" :isArea="false"
|
|
ref="jiaobanDatePicker"></my-date-pickerview>
|
|
<!-- 交班记录时间筛选 -->
|
|
<my-date-pickerview @confirm="datePickerConfirm" mode="date" ref="datePicker"></my-date-pickerview>
|
|
<!-- 班次选择 -->
|
|
<my-pickerview autoClear @confirm="banciConfirm" :showTitle="false" range-key="name" ref="jiaobanPickerView"
|
|
:list="banci.list"></my-pickerview>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onHide,
|
|
onShow,
|
|
onPageScroll,
|
|
onPullDownRefresh,
|
|
onReachBottom,
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
computed,
|
|
reactive,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
import myButton from '@/components/my-components/my-button';
|
|
import myTabs from '@/components/my-components/my-tabs';
|
|
import color from '@/commons/color.js';
|
|
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
|
import myPickerview from '@/components/my-components/my-pickerview'
|
|
import {
|
|
timeFormat
|
|
} from '@/node_modules/uview-plus';
|
|
import go from '@/commons/utils/go.js'
|
|
import {
|
|
tbHandover,
|
|
handoverData
|
|
} from '@/http/yskApi/pageWorkControl.js'
|
|
|
|
function toDetail(item) {
|
|
go.to('PAGES_WORK_HANDOVER_DETAIL', item)
|
|
}
|
|
|
|
function toSetting() {
|
|
go.to('PAGES_WORK_SETTING')
|
|
}
|
|
|
|
const jiaoban = async () => {
|
|
// if (banci.selItem === '') {
|
|
// return uni.showToast({
|
|
// title: '请选择班次',
|
|
// icon: 'none'
|
|
// })
|
|
// }
|
|
// go.to('PAGES_WORK_HANDOVER_CONFIRM')
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认交班吗？',
|
|
success:async (res) => {
|
|
if (res.confirm) {
|
|
await handoverData({
|
|
isprintProduct: banci.switchvalue
|
|
})
|
|
uni.clearStorageSync()
|
|
uni.reLaunch({
|
|
url: '/pages/login/index'
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
const query = reactive({
|
|
createdAt: [],
|
|
proName: '',
|
|
cateId: '',
|
|
sort: 'id,desc'
|
|
})
|
|
const tableData = reactive({
|
|
data: [],
|
|
page: 0,
|
|
size: 15,
|
|
total: 0,
|
|
status: 'loadmore'
|
|
})
|
|
|
|
const jiaobanDatePicker = ref(null)
|
|
|
|
function jiaobanStartShow() {
|
|
jiaobanDatePicker.value.open()
|
|
}
|
|
|
|
const jiaobanPickerView = ref(null)
|
|
|
|
function showJiaobanPickerView() {
|
|
jiaobanPickerView.value.open()
|
|
}
|
|
|
|
|
|
function jiaobanPickerConfirm(e) {
|
|
form.kaibanTime = e
|
|
}
|
|
|
|
const form = reactive({
|
|
kaibanTime: new Date(),
|
|
jiaobanTime: new Date()
|
|
})
|
|
const jiaobanDateIndex = ref([
|
|
form.kaibanTime.getFullYear(),
|
|
form.kaibanTime.getMonth(),
|
|
form.kaibanTime.getDate(),
|
|
form.kaibanTime.getHours(),
|
|
form.kaibanTime.getMinutes(),
|
|
form.kaibanTime.getSeconds(),
|
|
])
|
|
|
|
|
|
|
|
let timer = null
|
|
|
|
function updateJiaoban() {
|
|
clearInterval(timer)
|
|
timer = setInterval(() => {
|
|
form.jiaobanTime = new Date()
|
|
}, 1000)
|
|
}
|
|
|
|
|
|
const banci = reactive({
|
|
list: [{
|
|
name: '早班',
|
|
value: 1
|
|
},
|
|
{
|
|
name: '中班',
|
|
value: 2
|
|
},
|
|
{
|
|
name: '晚班',
|
|
value: 3
|
|
},
|
|
],
|
|
selItem: '',
|
|
current: '',
|
|
switchvalue: false
|
|
})
|
|
|
|
function banciConfirm(e) {
|
|
if (tabs.current) {
|
|
filters.jiaobanSelItem = e[0]
|
|
} else {
|
|
banci.selItem = e[0]
|
|
}
|
|
}
|
|
|
|
function banciChange(e) {
|
|
banci.current = e.detail.value
|
|
}
|
|
|
|
|
|
const tabs = reactive({
|
|
list: ['交班', '交班记录'],
|
|
current: 0
|
|
})
|
|
|
|
// 切换tab
|
|
function tabsChange(i) {
|
|
console.log(i)
|
|
tabs.current = i
|
|
// 清除时间
|
|
clearTime()
|
|
if (tabs.current == 1) {
|
|
resetHandle()
|
|
} else {
|
|
|
|
}
|
|
}
|
|
|
|
const filters = reactive({
|
|
jiaobanCurrent: '',
|
|
jiaobanSelItem: '',
|
|
time: {
|
|
start: '',
|
|
end: ''
|
|
}
|
|
})
|
|
|
|
// 清除时间
|
|
function clearTime() {
|
|
filters.time.start = ''
|
|
filters.time.end = ''
|
|
}
|
|
|
|
function timeToggle() {
|
|
datePicker.value.toggle()
|
|
}
|
|
|
|
const datePicker = ref(null)
|
|
|
|
function datePickerConfirm(e) {
|
|
filters.time.start = new Date(e.start).getTime()
|
|
filters.time.end = new Date(e.end).getTime()
|
|
console.log(filters);
|
|
getTableData()
|
|
}
|
|
|
|
// 重置列表
|
|
function resetHandle() {
|
|
query.sort = 'id,desc'
|
|
tableData.data = []
|
|
tableData.page = 0
|
|
tableData.size = 15
|
|
tableData.total = 0
|
|
getTableData()
|
|
}
|
|
// 列表
|
|
const getTableData = async () => {
|
|
tableData.status = 'loading';
|
|
let urlData = null
|
|
if (!filters.time.start) {
|
|
urlData =
|
|
`page=${tableData.page}&size=${tableData.size}&shopId=${uni.getStorageSync('shopId')}&sort=${query.sort}`
|
|
} else {
|
|
urlData =
|
|
`page=${tableData.page}&size=${tableData.size}&shopId=${uni.getStorageSync('shopId')}&tradeDay=${timeFormat(filters.time.start,'yyyymmdd')}&tradeDay=${timeFormat(filters.time.end,'yyyymmdd')}&sort=${query.sort}`
|
|
}
|
|
let res = await tbHandover(urlData)
|
|
tableData.total = res.totalElements
|
|
if (tableData.page == 0 && res.content.length < 10) {
|
|
tableData.data = res.content
|
|
tableData.status = 'nomore'
|
|
return false;
|
|
} else {
|
|
setTimeout(() => {
|
|
tableData.data = [...tableData.data, ...res.content]
|
|
if (tableData.data.length >= tableData.total) tableData.status = 'nomore';
|
|
else tableData.status = 'loadmore';
|
|
}, 500)
|
|
}
|
|
}
|
|
|
|
onShow(() => {
|
|
form.jiaobanTime = new Date()
|
|
updateJiaoban()
|
|
|
|
})
|
|
onHide(() => {
|
|
clearInterval(timer)
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
if (tableData.status != 'nomore') {
|
|
tableData.page++
|
|
getTableData()
|
|
}
|
|
})
|
|
|
|
watch(() => tabs.current, (newval) => {
|
|
if (newval) {
|
|
clearInterval(timer)
|
|
filters.jiaobanSelItem = ''
|
|
} else {
|
|
banci.selItem = ''
|
|
updateJiaoban()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.min-page {}
|
|
|
|
.fixed-top {
|
|
padding: 32rpx 28rpx;
|
|
z-index: 100;
|
|
}
|
|
|
|
.bottom {
|
|
background-color: transparent;
|
|
bottom: 84rpx;
|
|
left: 28rpx;
|
|
right: 28rpx;
|
|
}
|
|
|
|
.table {
|
|
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
overflow: hidden;
|
|
font-size: 24rpx;
|
|
|
|
.constantbox {
|
|
.constantboxitem {
|
|
display: flex;
|
|
|
|
.head {
|
|
width: 200rpx;
|
|
padding: 32rpx 24rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
}
|
|
|
|
.head:nth-child(4) {
|
|
width: 300rpx;
|
|
}
|
|
|
|
.head:nth-child(5) {
|
|
width: 300rpx;
|
|
}
|
|
}
|
|
|
|
.constantboxitem:nth-child(even) {
|
|
background: #fff;
|
|
}
|
|
|
|
.constantboxitem:nth-child(odd) {
|
|
background: #F7F6FB;
|
|
}
|
|
|
|
.constantboxitem:nth-child(1) {
|
|
background: #AEBAD2;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.item:nth-of-type(2n+1) {
|
|
background-color: rgb(249, 249, 249);
|
|
}
|
|
}
|
|
</style> |