|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <view class="page-wrap">
|
|
|
+ <view class="search-wrap">
|
|
|
+ <uni-search-bar class="search" @confirm="search" v-model="keywords" @clear="search"></uni-search-bar>
|
|
|
+ <uni-data-select class="select" v-model="reportingTypeId" :localdata="types" placeholder="请选择类别" @change="search"></uni-data-select>
|
|
|
+ </view>
|
|
|
+ <view class="addbt" @click="handle({type:'add'})">
|
|
|
+ <view class="word">事件上报</view>
|
|
|
+ </view>
|
|
|
+ <view class="pageMain">
|
|
|
+ <uni-swipe-action class="item-action-box">
|
|
|
+ <uni-card padding="10px 0" margin="5px 0" v-for="item in items" :key="item.reportingId">
|
|
|
+ <uni-swipe-action-item class="item-action" :auto-close="true">
|
|
|
+ <template v-slot:right>
|
|
|
+ <view class="slot-button">
|
|
|
+ <view class="bt edit" @click="handle({type:'edit',item})"><text class="slot-button-text">编辑</text></view>
|
|
|
+ <view class="bt del" @click="handle({type:'del',item})"><text class="slot-button-text">删除</text></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="item" @click="handle({type:'detail',item})">
|
|
|
+ <view class="title">
|
|
|
+ <view class="name">{{item.reportingSubject}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="tagbox">
|
|
|
+ <uni-tag :text="item.reportingTypeTitle" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item">
|
|
|
+ <image class="icon" src="/static/images/time.png" mode="widthFix"></image>
|
|
|
+ <text class="word">{{item.reportingTime}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item">
|
|
|
+ <image class="icon" src="/static/images/admin_icon.png" mode="widthFix"></image>
|
|
|
+ <text class="word">{{item.reportingGroupName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-swipe-action-item>
|
|
|
+ </uni-card>
|
|
|
+ </uni-swipe-action>
|
|
|
+ </view>
|
|
|
+ <Detail ref="detail"></Detail>
|
|
|
+ <Edit ref="edit" @success="search"></Edit>
|
|
|
+ <Report ref="report" @success="search"></Report>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import reportingApi from '@/api/reporting.js'
|
|
|
+ import Report from './components/Report.vue'
|
|
|
+ import Detail from './components/Detail.vue'
|
|
|
+ import Edit from './components/Edit.vue'
|
|
|
+ export default {
|
|
|
+ components:{
|
|
|
+ Report,
|
|
|
+ Detail,
|
|
|
+ Edit
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ types(){
|
|
|
+ return this.reportingTypes.map(item=>{
|
|
|
+ return{
|
|
|
+ ...item,
|
|
|
+ value:item.reportingTypeId,
|
|
|
+ text:item.reportingTypeTitle
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ items:[],
|
|
|
+ reportingTypes:uni.getStorageSync('reportingTypes')||[],
|
|
|
+ page:1,
|
|
|
+ limit:10,
|
|
|
+ total:0,
|
|
|
+ keywords:"" ,
|
|
|
+ reportingTypeId:undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.init()
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(){
|
|
|
+ if(!uni.getStorageSync('reportingTypes')){
|
|
|
+ reportingApi.getTypeByList().then((res)=>{
|
|
|
+ uni.setStorageSync('reportingTypes',res.data)
|
|
|
+ this.reportingTypes=res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ search(){
|
|
|
+ this.resetFilter()
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ getData(){
|
|
|
+ const items=JSON.parse(JSON.stringify(this.items))
|
|
|
+ let params={
|
|
|
+ page:this.page,
|
|
|
+ limit:this.limit,
|
|
|
+ keywords:this.keywords,
|
|
|
+ }
|
|
|
+ if(this.reportingTypeId){params.reportingTypeId=this.reportingTypeId}
|
|
|
+ reportingApi.getByPage(params).then((res)=>{
|
|
|
+ this.items=items.concat(res.data)
|
|
|
+ this.total=res.total
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handle({type,item}){
|
|
|
+ const self=this;
|
|
|
+ if(type==='del'){
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '是否确定删除',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ reportingApi.deleteById(item.reportingId).then(()=>{
|
|
|
+ uni.showToast({
|
|
|
+ title:'删除成功!',
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ self.resetFilter()
|
|
|
+ self.getData()
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ if(type==='detail'){
|
|
|
+ this.$refs.detail.show(item)
|
|
|
+ }
|
|
|
+ if(type==='edit'){
|
|
|
+ this.$refs.edit.show({type:"edit",item})
|
|
|
+ }
|
|
|
+ if(type==='add'){
|
|
|
+ this.$refs.report.show()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetFilter(){
|
|
|
+ this.page = 1
|
|
|
+ this.limit = 10
|
|
|
+ this.total = 0
|
|
|
+ this.items=[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.total>this.limit*this.page){
|
|
|
+ this.page++
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-wrap{
|
|
|
+ padding:0 20rpx;
|
|
|
+ .search-wrap{
|
|
|
+ margin: 5px 0;
|
|
|
+ padding: 0 5px;
|
|
|
+ box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background-color: #fff;
|
|
|
+ .search{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .select{
|
|
|
+ width: 240rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addbt{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(64,158,255,0.7);
|
|
|
+ box-shadow:0 0 10rpx rgba(0,0,0,0.4);
|
|
|
+ position: fixed;
|
|
|
+ right: 10rpx;
|
|
|
+ bottom: 20%;
|
|
|
+ z-index: 99;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .word{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 5rpx auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pageMain{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ .item{
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .name{
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #424242;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tagbox{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ padding: 14rpx 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .location{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ .time{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ &.icon{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-row{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 14rpx;
|
|
|
+ &.space-between{
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .word{
|
|
|
+ margin-left: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .slot-button{
|
|
|
+ width: 400rpx;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ padding-left: 10px;
|
|
|
+ .bt{
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &.edit{
|
|
|
+ background-color:#007aff;
|
|
|
+ }
|
|
|
+ &.del{
|
|
|
+ background-color:#F56C6C;
|
|
|
+ }
|
|
|
+ &.detail{
|
|
|
+ background-color: #e6a23c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|