<template>
|
<view>
|
<view class="page-header">
|
<view class="search-item">
|
<view class="left">日期间隔</view>
|
<view class="right">
|
<picker mode="selector" :value="curDateGap" :range="dateRangePicker"
|
@change="onDateRangePickerChangeHandler">
|
<input disabled v-model="curDateGap" placeholder="请选择日期间隔" />
|
<view class="picker-overlay"></view>
|
</picker>
|
|
</view>
|
</view>
|
<view class="search-item">
|
<view class="left">开始日期</view>
|
<view class="right">
|
<uni-datetime-picker :clear-icon="false" type="date" v-model="startDate"
|
:disabled="!enableCustomDateRange">
|
<view class="datetime-picker-inner"
|
:class="enableCustomDateRange?'font__enable':'font__disable'">
|
<text>{{ startDate }}</text>
|
</view>
|
</uni-datetime-picker>
|
</view>
|
</view>
|
<view class="search-item">
|
<view class="left">结束日期</view>
|
<view class="right">
|
<uni-datetime-picker :clear-icon="false" type="date" v-model="endDate"
|
:disabled="!enableCustomDateRange">
|
<view class="datetime-picker-inner"
|
:class="enableCustomDateRange?'font__enable':'font__disable'">{{ endDate }}</view>
|
</uni-datetime-picker>
|
</view>
|
</view>
|
|
<view class="button-groups">
|
<button type="default" size="mini" class="btn-c" @tap.stop="onSearchClickHandler">查询</button>
|
<button type="default" size="mini" class="btn-a" @tap.stop="onResetClickHandler">重置</button>
|
</view>
|
</view>
|
|
<!-- 页签区域 -->
|
<view class="tab-container">
|
<view class="tab-list">
|
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { 'active': activeTab === index }]"
|
@tap="switchTab(index)">
|
<text>{{ tab.label }}</text>
|
<text v-if="tab.count > 0" class="tab-count">{{ tab.count }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view style="width: 100%;height: 16rpx;background-color: #e5e5e5;"></view>
|
|
<!-- 页签内容区域 -->
|
<scroll-view v-for="(tab, tabIndex) in tabs" :key="tabIndex" v-show="activeTab === tabIndex" id="pageContent"
|
scroll-y class="page-content" :style="{height: pageContentHeight + 'px'}">
|
<view class="list" v-for="(item,index) in tab.listData" :key="index">
|
<uni-card :title="item.器具号" :extra="item.器具保养计划单号" style="margin: 10px;"
|
@tap="showDetail = showDetail==item.hmainid?-1:item.hmainid">
|
<view class="card-detail">
|
<view class="detail" v-if="item.器具名称">
|
<text>器具名称：</text>{{item.器具名称}}
|
</view>
|
<view class="detail" v-if="item.器具规格">
|
<text>器具规格：</text>{{item.器具规格}}
|
</view>
|
<view class="detail" v-if="item.器具型号">
|
<text>器具型号：</text>{{item.器具型号}}
|
</view>
|
<view class="detail" v-if="item.保养周期">
|
<text>保养周期：</text>{{item.保养周期}}
|
</view>
|
<view class="detail" v-if="item.摘要">
|
<text>摘要：</text>{{item.摘要}}
|
</view>
|
<view class="detail" v-if="item.保养负责人">
|
<text>保养负责人：</text>{{item.保养负责人}}
|
</view>
|
<view class="detail" v-if="item.是否保养">
|
<text>是否保养：</text>{{item.是否保养}}
|
</view>
|
<view class="detail" v-if="item.计划开始时间点">
|
<text>计划开始时间点：</text>{{item.计划开始时间点.substr(0,10)}}
|
</view>
|
<view class="detail" v-if="item.计划结束时间点">
|
<text>计划结束时间点：</text>{{item.计划结束时间点.substr(0,10)}}
|
</view>
|
</view>
|
<view class="card-detail" v-if="showDetail == item.hmainid">
|
<view class="detail" v-if="item.制单人">
|
<text>制单人：</text>{{item.制单人}}
|
</view>
|
<view class="detail" v-if="item.制单日期">
|
<text>制单日期：</text>{{item.制单日期.substr(0,10)}}
|
</view>
|
<view class="detail" v-if="item.审核人">
|
<text>审核人：</text>{{item.审核人}}
|
</view>
|
<view class="detail" v-if="item.审核日期">
|
<text>审核日期：</text>{{item.审核日期.substr(0,10)}}
|
</view>
|
<view class="detail" v-if="item.修改人">
|
<text>修改人：</text>{{item.修改人}}
|
</view>
|
<view class="detail" v-if="item.修改日期">
|
<text>修改日期：</text>{{item.修改日期.substr(0,10)}}
|
</view>
|
<view class="detail" v-if="item.关闭人">
|
<text>关闭人：</text>{{item.关闭人}}
|
</view>
|
<view class="detail" v-if="item.关闭日期">
|
<text>关闭日期：</text>{{item.关闭日期.substr(0,10)}}
|
</view>
|
<view class="detail" v-if="item.作废人">
|
<text>作废人：</text>{{item.作废人}}
|
</view>
|
<view class="detail" v-if="item.作废日期">
|
<text>作废日期：</text>{{item.作废日期.substr(0,10)}}
|
</view>
|
</view>
|
|
<view class="more" v-if="showDetail == item.hmainid && operations != item.hmainid">
|
<view class="part" style="border-right: 1px solid #eee;">
|
<uni-icons type="top" style="color: #888;margin-right: 10rpx;" size="14"></uni-icons>收起
|
</view>
|
<view class="part" @tap.stop="operations = operations==item.hmainid?-1:item.hmainid">
|
<uni-icons type="more-filled" style="color: #888;margin-right: 10rpx;"
|
size="14"></uni-icons>操作
|
</view>
|
</view>
|
<view class="more" v-if="showDetail != item.hmainid && operations != item.hmainid">
|
<view class="part" style="border-right: 1px solid #eee;">
|
<uni-icons type="bottom" style="color: #888;margin-right: 10rpx;" size="14"></uni-icons>更多信息
|
</view>
|
<view class="part" @tap.stop="operations = operations==item.hmainid?-1:item.hmainid">
|
<uni-icons type="more-filled" style="color: #888;margin-right: 10rpx;"
|
size="14"></uni-icons>操作
|
</view>
|
</view>
|
|
<view class="op" v-if="operations == item.hmainid">
|
<button class="op5" size="mini" plain @tap.stop="operations = -1">取消操作</button>
|
</view>
|
</uni-card>
|
</view>
|
<view class="over" v-if="tabs[activeTab].listData.length == 0">暂无数据</view>
|
</scroll-view>
|
|
<!-- 分页器 -->
|
<view class="page-footer">
|
<uni-pagination id="pagination" title="标题文字" v-model="tabs[activeTab].pageMeta.curPage"
|
:pageSize="tabs[activeTab].pageMeta.size" :total="tabs[activeTab].pageMeta.total"
|
@change="onPageChangeHandler"></uni-pagination>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
import {
|
CommonUtils
|
} from '@/utils/common.js'
|
import {
|
getUserInfo
|
} from '../../../utils/auth'
|
export default {
|
data() {
|
return {
|
// 计算卡片列表高度
|
pagination_top: 0,
|
pageContent_top: 0,
|
|
// 当前激活的页签
|
activeTab: 0,
|
|
tabs: [{
|
label: '今日待保养',
|
type: 0,
|
count: 0,
|
listData: [], // 添加这个
|
pageMeta: { // 添加这个
|
curPage: 1,
|
size: 50,
|
total: 0,
|
}
|
},
|
{
|
label: '今日已保养',
|
type: 1,
|
count: 0,
|
listData: [], // 添加这个
|
pageMeta: { // 添加这个
|
curPage: 1,
|
size: 50,
|
total: 0,
|
}
|
},
|
{
|
label: '今日全部任务',
|
type: 2,
|
count: 0,
|
listData: [], // 添加这个
|
pageMeta: { // 添加这个
|
curPage: 1,
|
size: 50,
|
total: 0,
|
}
|
}
|
],
|
|
// 滚动控制
|
scrollTop: 0,
|
old: {
|
scrollTop: 0
|
},
|
|
dateRangePicker: ["任意间隔", "今天", "近两天", "近三天", "近四天", "近五天", "近六天", "近七天", "近30天"],
|
curDateGap: "今天",
|
enableCustomDateRange: false,
|
startDate: dayjs(new Date()).format('YYYY-MM-DD'),
|
endDate: dayjs(new Date()).format('YYYY-MM-DD'),
|
HBillNo: '',
|
|
showDetail: -1,
|
operations: -1,
|
}
|
},
|
computed: {
|
pageContentHeight: {
|
get() {
|
return (this.pagination_top - this.pageContent_top)
|
}
|
},
|
},
|
onLoad() {
|
this.onSearchClickHandler()
|
},
|
onPullDownRefresh() {
|
this.onSearchClickHandler()
|
},
|
async onReady() {
|
// #ifndef MP-WEIXIN
|
let query = uni.createSelectorQuery().in(this)
|
query.select("#pagination")
|
.boundingClientRect((data) => {
|
if (data) {
|
this.pagination_top = data.top
|
} else {
|
console.log("未找到#pagination节点");
|
}
|
})
|
.exec();
|
query.select("#pageContent")
|
.boundingClientRect((data) => {
|
if (data) {
|
this.pageContent_top = data.top
|
} else {
|
console.log("未找到#pageContent节点");
|
}
|
})
|
.exec();
|
// #endif
|
},
|
methods: {
|
goTop: function(e) {
|
// 解决view层不同步的问题
|
this.scrollTop = this.old.scrollTop
|
this.$nextTick(function() {
|
this.scrollTop = 0
|
});
|
},
|
|
// 切换页签
|
switchTab(index) {
|
this.activeTab = index
|
this.showDetail = -1
|
this.operations = -1
|
},
|
|
onDateRangePickerChangeHandler({
|
detail
|
}) {
|
this.enableCustomDateRange = false
|
this.curDateGap = this.dateRangePicker[detail.value]
|
let date = new Date()
|
switch (this.curDateGap) {
|
case "今天":
|
this.startDate = dayjs(date).format("YYYY-MM-DD")
|
break;
|
case "近一天":
|
this.startDate = dayjs(date).subtract(1, 'day').format("YYYY-MM-DD")
|
break;
|
case "近两天":
|
this.startDate = dayjs(date).subtract(2, 'day').format("YYYY-MM-DD")
|
break;
|
case "近三天":
|
this.startDate = dayjs(date).subtract(3, 'day').format("YYYY-MM-DD")
|
break;
|
case "近四天":
|
this.startDate = dayjs(date).subtract(4, 'day').format("YYYY-MM-DD")
|
break;
|
case "近五天":
|
this.startDate = dayjs(date).subtract(5, 'day').format("YYYY-MM-DD")
|
break;
|
case "近六天":
|
this.startDate = dayjs(date).subtract(6, 'day').format("YYYY-MM-DD")
|
break;
|
case "近七天":
|
this.startDate = dayjs(date).subtract(7, 'day').format("YYYY-MM-DD")
|
break;
|
case "近30天":
|
this.startDate = dayjs(date).subtract(30, 'day').format("YYYY-MM-DD")
|
break;
|
}
|
if (this.curDateGap == '任意间隔') {
|
this.enableCustomDateRange = true
|
}
|
},
|
|
onSearchClickHandler() {
|
let sWhere = ""
|
// 获取当前激活的页签
|
const currentTab = this.tabs[this.activeTab]
|
sWhere = {
|
HBeginDate: this.startDate,
|
HEndDate: this.endDate
|
}
|
this.get_DisplayPage(JSON.stringify(sWhere), currentTab.type)
|
},
|
|
clear() {
|
this.curDateGap = "今天"
|
this.enableCustomDateRange = false
|
this.startDate = dayjs(new Date()).format('YYYY-MM-DD')
|
this.endDate = dayjs(new Date()).format('YYYY-MM-DD')
|
this.HBillNo = ''
|
},
|
|
async onResetClickHandler() {
|
this.clear()
|
await this.$nextTick()
|
this.onSearchClickHandler()
|
},
|
|
get_DisplayPage(sWhere, tabType) {
|
CommonUtils.doRequest2({
|
url: '/Sb_EquipMaintainTaskReport/MaintainList_APP',
|
data: {
|
"sWhere": sWhere,
|
"user": getUserInfo()["Czymc"],
|
},
|
resFunction: (res) => {
|
let {
|
data,
|
Message,
|
count
|
} = res.data
|
console.log('res.data: ', res.data)
|
|
if (data && data.h_p_Sb_EquipMaintainTaskReport_APP) {
|
// 更新待签到页签
|
this.tabs[0].listData = data.h_p_Sb_EquipMaintainTaskReport_APP
|
this.tabs[0].pageMeta.total = data.h_p_Sb_EquipMaintainTaskReport_APP.length
|
this.tabs[0].count = data.h_p_Sb_EquipMaintainTaskReport_APP.length
|
}
|
|
if (data && data.h_p_Sb_EquipMaintainTaskReport_APP1) {
|
// 更新待处理页签
|
this.tabs[1].listData = data.h_p_Sb_EquipMaintainTaskReport_APP1
|
this.tabs[1].pageMeta.total = data.h_p_Sb_EquipMaintainTaskReport_APP1.length
|
this.tabs[1].count = data.h_p_Sb_EquipMaintainTaskReport_APP1.length
|
}
|
|
if (data && data.h_p_Sb_EquipMaintainTaskReport_APP2) {
|
// 更新待验收页签
|
this.tabs[2].listData = data.h_p_Sb_EquipMaintainTaskReport_APP2
|
this.tabs[2].pageMeta.total = data.h_p_Sb_EquipMaintainTaskReport_APP2.length
|
this.tabs[2].count = data.h_p_Sb_EquipMaintainTaskReport_APP2.length
|
}
|
|
|
uni.stopPullDownRefresh()
|
}
|
})
|
},
|
|
onPageChangeHandler() {
|
this.onSearchClickHandler()
|
this.goTop()
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.page-header {
|
display: flex;
|
box-sizing: border-box;
|
padding: 20rpx;
|
flex-direction: column;
|
gap: 10rpx;
|
font-size: 32rpx;
|
|
.search-item {
|
display: flex;
|
flex-direction: row;
|
gap: 10rpx;
|
justify-content: center;
|
align-items: center;
|
|
.left {
|
width: 4em;
|
}
|
|
.right {
|
flex: 1;
|
position: relative;
|
border-radius: 22rpx;
|
border: 1px solid #acacac;
|
display: flex;
|
padding: 4rpx 10rpx;
|
|
picker {
|
width: 100%;
|
}
|
}
|
}
|
|
input {
|
width: inherit;
|
padding: 8rpx 20rpx;
|
font-size: 30rpx;
|
}
|
|
.datetime-picker-inner {
|
padding: 8rpx 20rpx;
|
font-size: 30rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.font__enable {
|
color: #000;
|
}
|
|
.font__disable {
|
color: #cccccc;
|
}
|
}
|
|
.button-groups {
|
box-sizing: border-box;
|
padding: 10rpx 0 0 0;
|
display: flex;
|
flex-direction: row;
|
gap: 10rpx;
|
justify-content: space-between;
|
|
button {
|
border-radius: 50rpx;
|
width: 180rpx;
|
height: 66rpx;
|
line-height: 66rpx;
|
font-size: 28rpx;
|
}
|
|
.btn-a {
|
background-color: #acacac;
|
color: #fff;
|
}
|
|
.btn-b {
|
background-color: #41a863;
|
color: #fff;
|
}
|
|
.btn-c {
|
background-color: #3a78ff;
|
color: #fff;
|
}
|
}
|
|
/* 页签样式 */
|
.tab-container {
|
background-color: #fff;
|
}
|
|
.tab-list {
|
display: flex;
|
flex-direction: row;
|
border-bottom: 1px solid #e5e5e5;
|
}
|
|
.tab-item {
|
flex: 1;
|
padding: 20rpx 0;
|
text-align: center;
|
font-size: 28rpx;
|
color: #666;
|
position: relative;
|
|
&.active {
|
color: #3a78ff;
|
font-weight: bold;
|
|
&::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 80rpx;
|
height: 4rpx;
|
background-color: #3a78ff;
|
}
|
}
|
|
.tab-count {
|
display: inline-block;
|
margin-left: 10rpx;
|
padding: 0 12rpx;
|
background-color: #ff6b6b;
|
color: #fff;
|
border-radius: 20rpx;
|
font-size: 20rpx;
|
min-width: 30rpx;
|
text-align: center;
|
}
|
}
|
|
.page-content {
|
box-sizing: border-box;
|
padding: 10rpx 0;
|
|
.card-detail {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
line-height: 120%;
|
|
.detail {
|
font-size: 26rpx;
|
margin-bottom: 12rpx;
|
color: #555;
|
margin-right: 20rpx;
|
|
text {
|
color: #999;
|
font-size: 26rpx;
|
}
|
}
|
}
|
|
.more {
|
color: #888;
|
font-size: 24rpx;
|
display: flex;
|
border-top: 1px solid #eee;
|
padding-top: 20rpx;
|
|
.part {
|
width: 50%;
|
text-align: center;
|
}
|
}
|
|
.op {
|
display: flex;
|
justify-content: space-around;
|
margin-top: 20rpx;
|
|
button {
|
padding: 0;
|
width: 150rpx;
|
font-size: 25rpx;
|
|
&:disabled {
|
opacity: 0.5;
|
}
|
}
|
|
.op1 {
|
border: 1px solid #41a863;
|
color: #41a863;
|
}
|
|
.op2 {
|
border: 1px solid #d98d00;
|
color: #d98d00;
|
}
|
|
.op3 {
|
border: 1px solid #3a78ff;
|
color: #3a78ff;
|
}
|
|
.op4 {
|
border: 1px solid #da0000;
|
color: #da0000;
|
}
|
|
.op5 {
|
border: 1px solid #888;
|
color: #888;
|
}
|
}
|
}
|
|
.over {
|
text-align: center;
|
padding: 40rpx;
|
color: #999;
|
font-size: 28rpx;
|
}
|
|
.page-footer {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
box-sizing: border-box;
|
padding: 32rpx 40rpx;
|
}
|
</style>
|
