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