522 lines
13 KiB
Vue
522 lines
13 KiB
Vue
<template>
|
||
<view class="container" v-if="isdetail">
|
||
<view class="nav_bar">
|
||
<!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
|
||
<view class="nav_bar_tit"> 工情信息 </view>
|
||
</view>
|
||
<!-- tabs -->
|
||
<view class="table_h">
|
||
<div
|
||
class="leftTab"
|
||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||
@click="tabChange(1)"
|
||
>
|
||
运行情况
|
||
</div>
|
||
<div
|
||
class="rightTab"
|
||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||
@click="tabChange(2)"
|
||
>
|
||
工程险情
|
||
</div>
|
||
</view>
|
||
<!-- 搜索区域 -->
|
||
<view class="search">
|
||
<view class="search_sear">
|
||
<input
|
||
class="searchInput"
|
||
confirm-type="search"
|
||
placeholder-style="color:#bbb"
|
||
v-model="saerchValue"
|
||
placeholder="请输入工程名称/上报人"
|
||
@input="myinput"
|
||
@confirm="myconfirm"
|
||
/>
|
||
<icon class="icon-small" type="search" size="14"></icon>
|
||
|
||
<icon
|
||
v-if="saerchValue.length > 0"
|
||
class="clear-icon"
|
||
type="clear"
|
||
size="16"
|
||
@click="clearnClick"
|
||
></icon>
|
||
</view>
|
||
<view class="more">
|
||
<image
|
||
style="width: 20px; height: 20px; margin-right: 10px"
|
||
src="../../static/images/filter.png"
|
||
@click="openpop"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<!-- 列表区域 -->
|
||
<view class="table_info" v-if="list.length > 0">
|
||
<p class="p" v-if="total > 0">共{{ total }}条信息</p>
|
||
<view v-for="(item, index) in list" :key="index">
|
||
<view class="table_Page" @tap="toDetail(item)">
|
||
<view class="info">
|
||
<h4>{{ item.projectName }}</h4>
|
||
<p class="info_P">
|
||
<span class="info_n">{{ item.reporter }}</span>
|
||
<span>{{ item.reportTime }}</span>
|
||
</p>
|
||
</view>
|
||
<view v-if="item.isRead == 0" class="badge"
|
||
><u-badge :isDot="true"></u-badge
|
||
></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 无数据 -->
|
||
<view class="table_info" v-if="list.length == 0">
|
||
<view class="table_Page" @tap="toDetail('item')">
|
||
<view class="info">
|
||
<h4>朝阳寺水库</h4>
|
||
<p class="info_P">
|
||
<span class="info_n">刘明</span>
|
||
<span>2024-03-06 13:50:47</span>
|
||
</p>
|
||
</view>
|
||
<view class="badge"><u-badge :isDot="true"></u-badge></view> </view
|
||
></view>
|
||
|
||
<!-- 筛选抽屉 -->
|
||
<view class="popup" v-if="popupOpen">
|
||
<u-popup
|
||
:show="popupOpen"
|
||
mode="bottom"
|
||
@close="() => (this.popupOpen = false)"
|
||
>
|
||
<view style="padding: 30px 20px">
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<u-form
|
||
labelPosition="left"
|
||
:model="model1"
|
||
ref="uForm"
|
||
labelWidth="100"
|
||
>
|
||
<u-form-item
|
||
label="工程类型"
|
||
prop="checkboxValue1"
|
||
borderBottom
|
||
labelWidth="80"
|
||
ref="item3"
|
||
>
|
||
<u-checkbox-group
|
||
v-model="model1.userInfo.checkboxValue1"
|
||
shape="square"
|
||
>
|
||
<u-checkbox
|
||
:customStyle="{ marginRight: '16px' }"
|
||
v-for="(item, index) in checkboxList1"
|
||
:key="index"
|
||
:label="item.name"
|
||
:name="item.name"
|
||
>
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
</u-form-item>
|
||
<!-- 时间 -->
|
||
<u-form-item
|
||
label="上报开始时间"
|
||
prop="userInfo.start"
|
||
borderBottom
|
||
@click="
|
||
isTime = true
|
||
hideKeyboard()
|
||
"
|
||
ref="item1"
|
||
>
|
||
<u-input
|
||
v-model="model1.userInfo.start"
|
||
border="none"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择上报开始时间"
|
||
></u-input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
|
||
<u-form-item
|
||
label="上报结束时间"
|
||
prop="userInfo.end"
|
||
borderBottom
|
||
@click="isTime2 = true"
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
v-model="model1.userInfo.end"
|
||
border="none"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择上报结束时间"
|
||
></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
</u-form>
|
||
<view class="bottom">
|
||
<u-button
|
||
text="重置"
|
||
customStyle="margin: 10px"
|
||
@click="reset"
|
||
></u-button>
|
||
<u-button
|
||
type="primary"
|
||
text="确认"
|
||
customStyle="margin: 10px"
|
||
@click="submit"
|
||
></u-button>
|
||
</view>
|
||
<u-datetime-picker
|
||
:show="isTime"
|
||
v-model="valueTime"
|
||
mode="datetime"
|
||
@confirm="confirm"
|
||
@cancel="cancel"
|
||
></u-datetime-picker>
|
||
|
||
<u-datetime-picker
|
||
:show="isTime2"
|
||
v-model="valueTime2"
|
||
mode="datetime"
|
||
@confirm="confirm2"
|
||
@cancel="cancel2"
|
||
></u-datetime-picker>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
<view class="container" v-else>
|
||
<detail :info="detailInfo" @rightClick="rightClick"></detail>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import moment from 'moment'
|
||
import detail from './detail/index.vue'
|
||
export default {
|
||
components: { detail },
|
||
data () {
|
||
return {
|
||
isdetail: true,
|
||
detailInfo: {},
|
||
showTextTypeTab: 1,
|
||
saerchValue: '',
|
||
popupOpen: false, //抽屉打开,
|
||
// 基本案列数据
|
||
checkboxList1: [
|
||
{
|
||
name: '水库',
|
||
disabled: false,
|
||
key: 'sk'
|
||
},
|
||
{
|
||
name: '水电站',
|
||
disabled: false,
|
||
key: 'sdz'
|
||
}
|
||
],
|
||
isTime: false,
|
||
valueTime: Number(moment()),
|
||
valueTime2: Number(moment()),
|
||
isTime2: false,
|
||
model1: {
|
||
userInfo: {
|
||
start: '',
|
||
end: '',
|
||
checkboxValue1: ['水库', '水电站']
|
||
}
|
||
},
|
||
list: {},
|
||
total: '',
|
||
isfixed: false,
|
||
params: {
|
||
pageSo: { pageSize: 10, pageNumber: 0 },
|
||
isRead: 0,
|
||
projectName: this.saerchValue
|
||
}
|
||
}
|
||
},
|
||
onLoad () {
|
||
this.getData()
|
||
},
|
||
// 页面滚动时，固定头部
|
||
onPageScroll () {
|
||
this.isfixed = true
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh () {
|
||
uni.showToast({
|
||
title: '努力加载中...'
|
||
})
|
||
this.params.pageSo.pageNumber = 0
|
||
this.list = []
|
||
this.getData()
|
||
},
|
||
// 上拉加载
|
||
onReachBottom () {
|
||
if (this.list.length >= this.total) {
|
||
uni.showToast({
|
||
title: '没有更多的数据了1'
|
||
})
|
||
return
|
||
}
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
rightClick (val) {
|
||
this.isdetail = true
|
||
},
|
||
toDetail (item) {
|
||
console.log('item', item)
|
||
this.detailInfo = item
|
||
this.isdetail = false
|
||
// uni.navigateTo({
|
||
// url: './detail/index'
|
||
// })
|
||
},
|
||
async getData () {
|
||
let obj = this.params
|
||
this.params.pageSo.pageNumber++
|
||
if (this.model1.userInfo.start != '' && this.model1.userInfo.end != '') {
|
||
obj.timeSo = {
|
||
start: this.model1.userInfo.start,
|
||
end: this.model1.userInfo.end
|
||
}
|
||
}
|
||
|
||
this.list = []
|
||
try {
|
||
if (this.showTextTypeTab === 1) {
|
||
let res = await uni.$http.post(
|
||
'/gunshiApp/xfflood/xfProjectRun/queryPage',
|
||
obj
|
||
)
|
||
|
||
let res2 = await uni.$http.post(
|
||
'/gunshiApp/xfflood/xfProjectRun/queryPage',
|
||
{ ...obj, isRead: 1 }
|
||
)
|
||
this.total = res.data.data.total + res2.data.data.total
|
||
|
||
this.list = res.data.data.records.concat(res2.data.data.records)
|
||
console.log('--1-', res.data.data, res.data.data.records)
|
||
console.log('--2-', res2.data.data, this.total, this.list)
|
||
} else {
|
||
let res = await uni.$http.post(
|
||
'/gunshiApp/xfflood/xfProjectIncident/queryPage',
|
||
obj
|
||
)
|
||
let res2 = await uni.$http.post(
|
||
'/gunshiApp/xfflood/xfProjectIncident/queryPage',
|
||
{ ...obj, isRead: 1 }
|
||
)
|
||
this.total = res.data.data.total + res2.data.data.total
|
||
this.list = res.data.data.records.concat(res2.data.data.records)
|
||
}
|
||
} catch (e) {
|
||
uni.$showMsg()
|
||
}
|
||
},
|
||
|
||
tabChange (val) {
|
||
console.log('tabChange0', val)
|
||
this.showTextTypeTab = val
|
||
this.params.pageSo.pageNumber = 0
|
||
this.getData()
|
||
},
|
||
submit () {
|
||
this.popupOpen = false
|
||
console.log('res', this.$refs.uForm)
|
||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||
// this.$refs.uForm
|
||
// .validate()
|
||
// .then(res => {
|
||
// uni.$u.toast('校验通过')
|
||
// this.popupOpen = false
|
||
// })
|
||
// .catch(errors => {
|
||
// uni.$u.toast('校验失败')
|
||
// })
|
||
},
|
||
reset () {
|
||
const validateList = [
|
||
'userInfo.start',
|
||
'userInfo.end',
|
||
'userInfo.checkboxValue1'
|
||
]
|
||
this.$refs.uForm.resetFields()
|
||
this.$refs.uForm.clearValidate()
|
||
setTimeout(() => {
|
||
this.$refs.uForm.clearValidate(validateList)
|
||
// 或者使用 this.$refs.uForm.clearValidate()
|
||
}, 10)
|
||
this.model1 = {
|
||
userInfo: {
|
||
start: '',
|
||
end: '',
|
||
checkboxValue1: ['水库', '水电站']
|
||
}
|
||
}
|
||
},
|
||
confirm (val) {
|
||
console.log(
|
||
'点击确定按钮时触发',
|
||
val.value,
|
||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
)
|
||
this.valueTime = Number(val)
|
||
this.model1.userInfo.start = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
this.isTime = false
|
||
},
|
||
cancel () {
|
||
console.log('取消')
|
||
this.isTime = false
|
||
},
|
||
confirm2 (val) {
|
||
console.log(
|
||
'点击确定按钮时触发',
|
||
val.value,
|
||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
)
|
||
this.valueTime2 = Number(val)
|
||
this.model1.userInfo.end = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
this.isTime2 = false
|
||
this.params.timeSo.end = this.model1.userInfo.end
|
||
},
|
||
cancel2 () {
|
||
console.log('取消')
|
||
this.isTime2 = false
|
||
},
|
||
|
||
openpop () {
|
||
this.popupOpen = true
|
||
},
|
||
myinput () {},
|
||
myconfirm () {},
|
||
clearnClick () {
|
||
console.log('打印了clearnClick', this.saerchValue)
|
||
this.saerchValue = ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
font-size: 14px;
|
||
background-color: #f3f5f8;
|
||
}
|
||
.table_info {
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
padding: 20px;
|
||
.p {
|
||
text-align: right;
|
||
}
|
||
.table_Page {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
margin-top: 12rpx;
|
||
padding-bottom: 12rpx;
|
||
|
||
.info_P {
|
||
color: #a2a2a2;
|
||
font-size: 24rpx;
|
||
.info_n {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.table_h {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 56rpx;
|
||
line-height: 88rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
text-align: center;
|
||
}
|
||
.leftTab {
|
||
width: 80px;
|
||
}
|
||
.rightTab {
|
||
width: 80px;
|
||
}
|
||
.activetextTypeTab,
|
||
.activetextTypeTab:hover {
|
||
// border-bottom: 3rpx solid #2286f6;
|
||
color: #026be0;
|
||
}
|
||
.nav_bar {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.nav_bar_tit {
|
||
text-align: center;
|
||
}
|
||
|
||
.search {
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 20px;
|
||
}
|
||
.fl {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: left;
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.search_sear {
|
||
// background-color: #eee;
|
||
width: 100%;
|
||
padding: 30rpx 16rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
|
||
.searchInput {
|
||
background-color: #eee;
|
||
height: 60rpx;
|
||
border-radius: 6rpx;
|
||
color: #bbb;
|
||
padding-left: 60rpx;
|
||
}
|
||
|
||
.icon-small {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 36rpx;
|
||
transform: translateY(-50%);
|
||
}
|
||
.clear-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 36rpx;
|
||
transform: translateY(-50%);
|
||
icon {
|
||
}
|
||
}
|
||
}
|
||
</style>
|