<template>
|
<view class="report">
|
<view class="report_search">
|
<view class="report_search_row" @click="show = true">
|
<text>{{type ? type : '类型'}}</text>
|
<u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
|
</view>
|
<view class="report_search_row" @click="show1 = true">
|
<text>{{status ? status : '解决情况'}}</text>
|
<u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
|
</view>
|
<view class="report_search_row" @click="$refs.pengTree._show()" v-if="['3'].includes(typeId)">
|
<text>{{localtionId ? locationName : '发生地点'}}</text>
|
<u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
|
</view>
|
<view class="report_search_row" @click="$refs.pengTree1._show()" v-if="['1'].includes(typeId)">
|
<text>{{localtionId ? locationName : '位置'}}</text>
|
<u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
|
</view>
|
</view>
|
<view class="report_list">
|
<view class="report_list_row" v-for="(item, index) in list" :key="index" @click="jump(item)">
|
<view class="report_list_row_icon">
|
<image src="/static/tabbar/nav_gongdan_sel@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="report_list_row_info" v-if="[0].includes(item.type)">
|
<text>{{titleType(item.type)}}</text>
|
<text>{{userType(item.memberType)}}-{{item.memberNames}} {{item.happenTime.substring(0, 16)}}/{{item.locationName}}/{{item.typeName}}</text>
|
<text>{{item.submitDate.substring(0, 16)}}</text>
|
</view>
|
<view class="report_list_row_info" v-else-if="[3].includes(item.type)">
|
<text>{{titleType(item.type)}}</text>
|
<text>{{item.happenTime.substring(0, 16)}}/{{item.locationName}}/{{item.typeName}}</text>
|
<text>{{item.submitDate.substring(0, 16)}}</text>
|
</view>
|
<view class="report_list_row_info1" v-else>
|
<text>DCA</text>
|
<text>{{item.typeName || '-'}}/{{item.categoryName || '-'}}</text>
|
<text>符合：{{item.dcaYesNum}} 不符合：{{item.dcaNoNum}}</text>
|
<text>{{item.createDate.substring(0, 16)}}</text>
|
</view>
|
<view class="report_list_row_dian success" v-if="[3,4,5].includes(item.status)"></view>
|
<view class="report_list_row_dian error" v-else-if="[0,1,2].includes(item.status)"></view>
|
</view>
|
</view>
|
<!-- 无数据 -->
|
<u-loadmore :line="true" status="nomore" v-if="!search.next"></u-loadmore>
|
<!-- 类型 -->
|
<u-picker :show="show" keyName="label" immediateChange :columns="columns" @confirm="confirmType" @cancel="show = false"></u-picker>
|
<!-- 解决情况 -->
|
<u-picker :show="show1" keyName="label" immediateChange :columns="columns1" @confirm="confirmStatus" @cancel="show1 = false"></u-picker>
|
<!-- 发生地点 -->
|
<peng-tree
|
ref="pengTree"
|
:range="address"
|
idKey="id"
|
:selectParent="false"
|
nameKey="name"
|
:multiple="false"
|
title="选择地点"
|
@confirm="selectAddress"
|
@cancel="$refs.pengTree._hide()">
|
</peng-tree>
|
<!-- 位置 -->
|
<peng-tree
|
ref="pengTree1"
|
:range="address1"
|
idKey="id"
|
:selectParent="false"
|
nameKey="name"
|
:multiple="false"
|
title="位置"
|
@confirm="selectAddress1"
|
@cancel="$refs.pengTree._hide()">
|
</peng-tree>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import pengTree from '@/uni_modules/peng-tree/peng-tree/peng-tree.vue'
|
export default {
|
components: { pengTree },
|
computed: {
|
...mapState(['userInfo'])
|
},
|
data() {
|
return {
|
show: false,
|
show1: false,
|
show2: false,
|
type: '',
|
typeId: '',
|
status: '',
|
statusId: '',
|
locationName: '',
|
localtionId: '',
|
columns: [
|
[
|
{ label: '全部', id: '' },
|
{ label: 'DCA', id: '1' },
|
{ label: '跌绊滑风险上报', id: '3' },
|
{ label: 'SHE事件上报', id: '0' }
|
]
|
],
|
columns1: [
|
[
|
{ label: '全部', id: '' },
|
{ label: '未解决', id: '0' },
|
{ label: '已解决', id: '1' }
|
]
|
],
|
search: {
|
page: 1,
|
next: true
|
},
|
list: [],
|
address: [],
|
address1: []
|
};
|
},
|
onLoad() {
|
this.getLocation()
|
this.getLocation1()
|
},
|
onShow() {
|
this.$nextTick(() => {
|
this.$refs.pengTree._hide()
|
this.$refs.pengTree1._hide()
|
})
|
this.show = false
|
this.show1 = false
|
this.search.page = 1
|
this.search.next = true
|
this.list = []
|
this.getList()
|
},
|
onReachBottom() {
|
this.getList()
|
},
|
methods: {
|
// 选择发生地点
|
selectAddress(e) {
|
this.localtionId = e[0].id
|
this.locationName = e[0].name
|
this.search.page = 1
|
this.search.next = true
|
this.list = []
|
this.getList()
|
this.$refs.pengTree._hide()
|
},
|
// 位置
|
selectAddress1(e) {
|
this.localtionId = e[0].id
|
this.locationName = e[0].name
|
this.search.page = 1
|
this.search.next = true
|
this.list = []
|
this.getList()
|
this.$refs.pengTree1._hide()
|
},
|
// 获取发生地点树
|
async getLocation() {
|
let res = await this.$u.api.categoryTree({ categoryType: 2 })
|
if (res.code === 200) {
|
res.data.unshift({ name: '全部', id: '', childList: [] })
|
this.address = res.data
|
}
|
},
|
// 获取位置树
|
async getLocation1() {
|
let res = await this.$u.api.categoryTree({ categoryType: 3 })
|
if (res.code === 200) {
|
res.data.unshift({ name: '全部', id: '', childList: [] })
|
this.address1 = res.data
|
}
|
},
|
getList() {
|
if (!this.search.next) return
|
this.$u.api.page({
|
capacity: 10,
|
page: this.search.page,
|
model: {
|
myWorkOrder: 1,
|
type: this.typeId,
|
dealStatus: this.statusId,
|
localtionId: this.localtionId
|
}
|
}).then(res => {
|
if (res.code === 200) {
|
this.list = [...this.list, ...res.data.records]
|
if (this.list.length === res.data.total) {
|
this.search.next = false
|
}
|
this.search.page++
|
}
|
})
|
},
|
// 切换类型
|
confirmType(e) {
|
this.type = e.value[0].label
|
this.typeId = e.value[0].id
|
|
this.localtionId = ''
|
this.locationName = ''
|
this.status = ''
|
this.statusId = ''
|
this.search.page = 1
|
this.search.next = true
|
this.list = []
|
this.getList()
|
this.show = false
|
},
|
confirmStatus(e) {
|
this.status = e.value[0].label
|
this.statusId = e.value[0].id
|
this.search.page = 1
|
this.search.next = true
|
this.list = []
|
this.getList()
|
this.show1 = false
|
},
|
// 跳转详情
|
jump(item) {
|
if (item.type === 0) {
|
uni.navigateTo({
|
url: `/pages/details_she/details_she?id=${item.id}`
|
})
|
} else if (item.type === 3) {
|
uni.navigateTo({
|
url: `/pages/workOrder_she/workOrder_she?id=${item.id}`
|
})
|
} else if (item.type === 1) {
|
uni.navigateTo({
|
url: `/pages/details_dca/details_dca?id=${item.id}&isShow=true`
|
})
|
}
|
},
|
userType(type) {
|
if (type === 0) {
|
return '本人'
|
} else if (type === 1) {
|
return '同事'
|
} else if (type === 2) {
|
return '供应商'
|
}
|
},
|
titleType(type) {
|
if (type === 0) {
|
return 'SHE事件上报'
|
} else if (type === 3) {
|
return '跌绊滑事件上报'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.report {
|
width: 100%;
|
.report_search {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #ececec;
|
background-color: #ffffff;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 9;
|
.report_search_row {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text {
|
font-size: 28rpx;
|
color: #222222;
|
margin-right: 8rpx;
|
}
|
}
|
}
|
.report_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.report_list_row {
|
width: 100%;
|
padding: 34rpx 36rpx;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #ececec;
|
display: flex;
|
align-items: center;
|
&:last-child {
|
border: none;
|
}
|
.report_list_row_dian {
|
flex-shrink: 0;
|
width: 16rpx;
|
height: 16rpx;
|
border-radius: 50%;
|
margin-left: 30rpx;
|
}
|
.success {
|
background-color: rgba(52,199,88,1);
|
}
|
.error {
|
background-color: red;
|
}
|
.report_list_row_icon {
|
flex-shrink: 0;
|
width: 56rpx;
|
height: 56rpx;
|
margin-right: 20rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.report_list_row_info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
text {
|
&:nth-child(1) {
|
font-size: 28rpx;
|
color: #222222;
|
font-weight: 600;
|
}
|
&:nth-child(2) {
|
font-size: 24rpx;
|
color: #666666;
|
font-weight: 400;
|
margin: 6rpx 0;
|
}
|
&:nth-child(3) {
|
font-size: 24rpx;
|
color: #999999;
|
font-weight: 400;
|
}
|
}
|
}
|
.report_list_row_info1 {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
text {
|
&:nth-child(1) {
|
font-size: 28rpx;
|
color: #222222;
|
font-weight: 600;
|
}
|
&:nth-child(2) {
|
font-size: 24rpx;
|
color: #666666;
|
font-weight: 400;
|
margin-top: 6rpx;
|
}
|
&:nth-child(3) {
|
color: rgba(16,16,16,1);
|
font-size: 24rpx;
|
font-weight: 400;
|
margin-top: 6rpx;
|
}
|
&:nth-child(4) {
|
font-size: 24rpx;
|
color: #999999;
|
font-weight: 400;
|
margin-top: 6rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
