393 lines
9.8 KiB
Vue
393 lines
9.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="nav_bar">
|
|||
|
|
<!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
|
|||
|
|
<view class="nav_bar_tit"> 灾情信息 </view>
|
|||
|
|
</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>
|
|||
|
|
<view class="more">
|
|||
|
|
<image
|
|||
|
|
style="width: 20px; height: 20px; margin-right: 10px"
|
|||
|
|
src="../../static/images/filter.png"
|
|||
|
|
@click="openpop"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- table_info -->
|
|||
|
|
<view class="table_info">
|
|||
|
|
<p class="p">共4条信息</p>
|
|||
|
|
<view>
|
|||
|
|
<view class="table_Page">
|
|||
|
|
<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 class="table_Page">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<!-- 抽屉 -->
|
|||
|
|
<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
|
|||
|
|
ref="item3"
|
|||
|
|
:customStyle="{ height: '55px' }"
|
|||
|
|
>
|
|||
|
|
<u-checkbox-group
|
|||
|
|
v-model="model1.userInfo.checkboxValue1"
|
|||
|
|
placement="row"
|
|||
|
|
@change="checkboxChange"
|
|||
|
|
style="flex-wrap: wrap; position: absolute"
|
|||
|
|
>
|
|||
|
|
<u-checkbox
|
|||
|
|
:customStyle="{ marginRight: '16px', margin: '5px' }"
|
|||
|
|
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>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import moment from 'moment'
|
|||
|
|
export default {
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
saerchValue: '',
|
|||
|
|
popupOpen: false, //抽屉打开,
|
|||
|
|
// 基本案列数据
|
|||
|
|
checkboxList1: [
|
|||
|
|
{
|
|||
|
|
name: '一般险情',
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '较大险情',
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '重大险情',
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '特别重大险情',
|
|||
|
|
disabled: false
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
isTime: false,
|
|||
|
|
valueTime: Number(moment()),
|
|||
|
|
valueTime2: Number(moment()),
|
|||
|
|
isTime2: false,
|
|||
|
|
model1: {
|
|||
|
|
userInfo: {
|
|||
|
|
start: '',
|
|||
|
|
end: '',
|
|||
|
|
checkboxValue1: ['一般险情', '较大险情', '重大险情', '特别重大险情']
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
params: {
|
|||
|
|
pageSo: { pageSize: 10, pageNumber: 0 },
|
|||
|
|
isRead: 0,
|
|||
|
|
projectName: this.saerchValue
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
submit () {
|
|||
|
|
this.popupOpen = false
|
|||
|
|
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
|||
|
|
// this.$refs.uForm
|
|||
|
|
// .validate()
|
|||
|
|
// .then(res => {
|
|||
|
|
// // uni.$u.toast('校验通过')
|
|||
|
|
// })
|
|||
|
|
// .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
|
|||
|
|
},
|
|||
|
|
cancel2 () {
|
|||
|
|
console.log('取消')
|
|||
|
|
this.isTime2 = false
|
|||
|
|
},
|
|||
|
|
checkboxChange (n) {
|
|||
|
|
console.log('change', n)
|
|||
|
|
// this.model1.userInfo.checkboxValue1 = e.name
|
|||
|
|
},
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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>
|