onLoad中需要调用getList()
tab切换需要初始化data，然后调用getList()
开启下拉刷新需要在json文件配置
<template>
<view class="view">
<!--navbar-->
<view class="navbar">
<u-navbar
:placeholder="true"
title="三乱列表"
@leftClick="leftClick"
@rightClick="rightClick"
rightText="搜索">
</u-navbar>
</view>
<!-- 搜索栏-->
<view class="search-box"
catchtouchmove="true"
:class="{ 'search-box-show': searchBoxShow }">
<view class="search-form-content">
<u--form
labelPosition="left"
:model="searchForm"
ref="form">
<!--所属街镇-->
<u-form-item label="电话号码" label-width="80" borderBottom>
<u--input v-model="searchForm.phone" border="none"></u--input>
</u-form-item>
<!--开始时间-->
<u-form-item
label="开始时间"
prop="crimeTime"
label-width="100"
borderBottom>
<udate-picker
placeholder="请选择"
:hide-second="true"
:clear-icon="false"
:border="false"
type="datetime"
v-model="searchForm.startTime">
</udate-picker>
</u-form-item>
<u-form-item
label="结束时间"
prop="crimeTime"
label-width="100"
borderBottom>
<udate-picker
placeholder="请选择"
:hide-second="true"
:clear-icon="false"
:border="false"
type="datetime"
v-model="searchForm.endTime">
</udate-picker>
</u-form-item>
<!--部门-->
<u-form-item
label="部门"
label-width="80"
@click="itemPickerClick('orgId', 'orgName','orgList', 'id', 'name')"
borderBottom>
<u--input
v-model="searchForm.orgName"
disabled
disabledColor="#ffffff"
placeholder="请填写"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<!--状态-->
<u-form-item
label="状态"
label-width="80"
@click="itemPickerClick('status', 'statusName','statusList', 'value', 'name')"
borderBottom>
<u--input
v-model="searchForm.statusName"
disabled
disabledColor="#ffffff"
placeholder="请填写"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
</u--form>
<view class="btn-box">
<u-button type="error" text=" 重置" @click="reset"></u-button>
<u-button type="primary" text="确定" @click="search"></u-button>
</view>
</view>
</view>
<!--picker组件-->
<u-picker
:show="pickerShow"
:columns="columns"
:keyName="columnsLabel"
:defaultIndex="defaultIndex"
@confirm="pickerConfirm"
@cancel="pickerShow = false">
</u-picker>
<!--列表-->
<view class="list-box">
<u-list @scrolltolower="scrolltolower" height="100%">
<u-list-item class="u-border-bottom"
v-for="item in list"
:key="item.id">
<view class="item" @click="toOperate(item)">
<view class="item-img">
<img :src="itemImgShow(item)" alt="">
</view>
<view class="item-content">
<view class="u-line-1">执法部门: {{ item.orgName }}</view>
<view class="u-line-1">执法人员: {{ item.userName }}</view>
<view class="u-line-1">上报地点: {{ item.place }}</view>
<view class="u-line-1">上报时间: {{ dateFormatting(item.applyTime) }}</view>
<view class="u-line-1">状态: {{ statusMap[item.status] }}</view>
</view>
</view>
</u-list-item>
<u-loadmore :status="loadMoreStatus"/>
</u-list>
</view>
<!-- 新增操作按钮 -->
<view class="add-btn-box" @click="toAdd">
<view class="add-btn"></view>
</view>
</view>
</template>
<script>
import lj from "@/common/lj"
import { threeMgtFindPage } from "@/common/api/page_ThreeMess/api";
import {
getImgShowUrl,
getLoginUserAvailableDepForOption
} from "@/common/api";
import UdatePicker from '@/components/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker'
export default {
name: "index",
components: {
UdatePicker
},
data() {
return{
searchBoxShow: false,
searchForm: {
phone: '',
startTime: '',
endTime: '',
status: '',
statusName: '',
orgId: '',
orgName: '',
page: 1,
limit: 10,
},
list: [],
total: 0,
loadMoreStatus: 'loadmore', // loading nomore loadmore
statusMap: {
0: '待处理',
1: '需停机',
2: '已处理',
},
statusList: [
{ name: '待处理', value: '0' },
{ name: '需停机', value: '1' },
{ name: '已处理', value: '2' },
],
orgList: [],
pickerShow: false,
formValue: '',
formShow: '',
columns: [],
columnsValue: '',
columnsLabel: '',
defaultIndex: [0],
}
},
methods: {
//返回
leftClick() {
this.tui.webView.postMessage({data:{
action:"back"
}})
},
//搜索
rightClick() {
this.searchBoxShow = !this.searchBoxShow;
},
//搜索
search() {
this.list = [];
this.searchForm.page = 1;
this.searchForm.limit = 10;
this.getList();
},
//重置
reset() {
this.list = [];
this.searchForm = {
phone: '',
startTime: '',
endTime: '',
status: '',
statusName: '',
orgId: '',
orgName: '',
page: 1,
limit: 10,
}
this.getList();
},
//新增
toAdd() {
lj.navigateTo("./addEdit?title=新增");
},
//操作页面
toOperate(item) {
lj.navigateTo(`./addEdit?title=详情&id=${item.id}`);
},
//格式化时间
dateFormatting(val) {
if (!val) return '';
return lj.dateFormatting(val, 'yyyy-MM-dd');
},
//拼接左侧图片
itemImgShow(item) {
if (item?.picture?.split(',')?.[0]) {
return getImgShowUrl(item?.picture?.split(',')?.[0]);
}
},
//触底加载
scrolltolower() {
if (this.loadMoreStatus == 'loading' || this.loadMoreStatus == 'nomore') {
return;
}
this.searchForm.page++;
this.getList()
},
getList() {
this.loadMoreStatus = 'loading';
const params = Object.assign({}, this.searchForm);
delete params.statusName;
delete params.orgName;
threeMgtFindPage(params).then(res => {
// console.log('列表数据', res);
if (res?.code === 200) {
this.list = [...this.list, ...res?.data?.list];
this.total = res?.data?.total;
if (this.searchForm.page * this.searchForm.limit >= res.data.total) {
this.loadMoreStatus = 'nomore';
} else {
this.loadMoreStatus = 'loadmore';
}
}
}).finally(() => {
this.searchBoxShow = false;
})
},
//获取部门
getOrgList() {
getLoginUserAvailableDepForOption({}, { 'X-Path': 'homeIndex' }).then(res => {
// console.log('部门', res);
if (res?.code === 200) {
this.orgList = res?.data;
}
})
},
/**
* @param formValue 对应form当中的上传的字段
* @param formShow 对应form当中的上传的字段的页面展示
* @param columns 当前对应pick的数据
* @param columnsValue columns中的value字段
* @param columnsLabel columns中的label字段
* */
itemPickerClick(formValue, formShow, columns, columnsValue, columnsLabel) {
//注意这里的this.columns 是[[]] 这种结构的
//注意这里的this.columns 是[[]] 这种结构的
//注意这里的this.columns 是[[]] 这种结构的
//注意这里的this.columns 是[[]] 这种结构的
//注意这里的this.columns 是[[]] 这种结构的
this.columns = [this[columns]];
if (this[columns].length === 0) {
lj.showToast({
title: '无数据!',
icon: 'none',
duration: 2000
});
return;
}
this.formValue = formValue;
this.formShow = formShow;
this.columnsValue = columnsValue;
this.columnsLabel = columnsLabel;
if (this.searchForm[this.formValue] !== '') {
this.defaultIndex = [this.columns[0].findIndex(item => item[columnsValue] === this.searchForm[this.formValue])];
} else {
this.defaultIndex = [0];
}
this.pickerShow = true;
},
//pick的确认操作
pickerConfirm(val) {
if (val && val.value) {
this.searchForm[this.formValue] = val.value[0][this.columnsValue];
this.searchForm[this.formShow] = val.value[0][this.columnsLabel];
}
this.pickerShow = false;
},
},
onLoad(e) {
e.token && lj.setStorageSync("token",e.token);
e.session && lj.setStorageSync("session",e.session);
e.depId && lj.setStorageSync("depId",e.depId);
e.userId && lj.setStorageSync("userId",e.userId);
e.userName && lj.setStorageSync("userName",e.userName);
e.userInfo && lj.setStorageSync('userInfo', JSON.parse(decodeURIComponent(e.userInfo)));
// console.log(e)
// console.log(JSON.parse(decodeURIComponent(e.userInfo)))
this.getList();
this.getOrgList();
},
}
</script>
<style scoped lang="less">
.view{
font-size: 16px;
height: 100vh;
overflow: hidden;
}
.search-box{
overflow: hidden;
position: fixed;
z-index: 999;
top: 44px;
left: 0;
right: 0;
bottom: 0;
height: 0;
background: rgba(0, 0, 0, .5);
.search-form-content{
background: #ffffff;
padding: 0 10px;
}
.btn-box{
padding: 10px 0;
background: #ffffff;
display: flex;
justify-content: space-around;
/deep/ .u-button{
width: 45%;
}
}
}
.search-box-show{
height: calc(100vh - 44px);
transition: all .3s;
}
.list-box{
margin-top: 10px;
padding: 0;
background: #ffffff;
height: calc(100vh - 54px);
///deep/ .uni-scroll-view::-webkit-scrollbar{
// display: none;
// width: 0 !important;
// height: 0 !important;
// -webkit-appearance: none;
// background: #e6a23c;
//}
.item{
padding: 8px 10px;
display: flex;
flex-direction: row;
.item-img{
img{
display: block;
width: 100px;
height: 100px;
border-radius: 15px;
}
}
.item-content{
margin-left: 10px;
font-size: 14px;
color: #606266;
display: flex;
flex-direction: column;
}
}
}
.add-btn-box{
position: fixed;
bottom: 10%;
right: 10%;
.add-btn {
width: 45px;
height: 45px;
color: #fff;
position: relative;
background: #4c81df;
border-radius: 50%;
box-shadow: 1px 1px 6px #4c81df;
}
.add-btn::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 28px;
margin-left: -14px;
margin-top: -2px;
border-top: 4px solid;
}
.add-btn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
height: 28px;
margin-left: -2px;
margin-top: -14px;
border-left: 4px solid;
}
}
</style>
网友评论