372 lines
9.5 KiB
Vue
372 lines
9.5 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">
|
|
<uni-dateformat format="yyyy-MM-dd" :date="filters.time.start"></uni-dateformat>
|
|
<text class="u-p-l-10 u-p-r-10">至</text>
|
|
<uni-dateformat format="yyyy-MM-dd" :date="filters.time.end"></uni-dateformat>
|
|
<!-- <view class="u-m-l-10 u-flex" @tap="clearTime">
|
|
<uni-icons type="clear" size="18" :color="color.ColorMain"></uni-icons>
|
|
</view> -->
|
|
</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" @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="">
|
|
<view class="head">班次号</view>
|
|
<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">10002</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="head">班次</view>
|
|
<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">早班</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="head">交班人</view>
|
|
<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">交班人</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="head">开班时间</view>
|
|
<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">2024-05-29 11:15:18</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="head">交班时间</view>
|
|
<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">2024-05-29 11:15:18</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="head">订单数</view>
|
|
<view class="item" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">0</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="head">订单金额（元）</view>
|
|
<view class="item u-flex u-row-between" @tap="toDetail(item)" v-for="(item,index) in 10" :key="index">
|
|
<text>0.00</text>
|
|
<uni-icons type="right" color="#999" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<uni-load-more :status="table.status"></uni-load-more>
|
|
<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>
|
|
</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
|
|
} 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 go from '@/commons/utils/go.js'
|
|
function toDetail(){
|
|
go.to('PAGES_WORK_HANDOVER_DETAIL')
|
|
}
|
|
function toSetting() {
|
|
go.to('PAGES_WORK_SETTING')
|
|
}
|
|
|
|
function jiaoban() {
|
|
if (banci.selItem === '') {
|
|
return uni.showToast({
|
|
title: '请选择班次',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
go.to('PAGES_WORK_HANDOVER_CONFIRM')
|
|
}
|
|
|
|
|
|
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: ''
|
|
})
|
|
|
|
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
|
|
})
|
|
|
|
function tabsChange(i) {
|
|
tabs.current = i
|
|
}
|
|
|
|
|
|
const table = reactive({
|
|
status: 'noMore'
|
|
})
|
|
|
|
|
|
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) {
|
|
console.log(e);
|
|
filters.time.start = e.start
|
|
filters.time.end = e.end
|
|
}
|
|
|
|
function filterBanciChange(e) {
|
|
filters.jiaobanCurrent = e.detail.value
|
|
}
|
|
|
|
onShow(() => {
|
|
form.jiaobanTime = new Date()
|
|
updateJiaoban()
|
|
})
|
|
onHide(() => {
|
|
clearInterval(timer)
|
|
})
|
|
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;
|
|
|
|
.head {
|
|
padding: 24rpx;
|
|
background: #AEBAD2;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.item {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.item:nth-of-type(2n+1) {
|
|
background-color: rgb(249, 249, 249);
|
|
}
|
|
}
|
|
</style> |