矛盾调解
This commit is contained in:
shijingjing
361
src/sass/AppConflictMediation/List.vue
Normal file
361
src/sass/AppConflictMediation/List.vue
Normal file
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<!-- 待处理-上报数-已办理-今日办结 -->
|
||||
<div class="content-box">
|
||||
<div class="content-list">
|
||||
<!-- v-for="(item, index) in statisticsList" :key="index" -->
|
||||
<div class="list-item">
|
||||
<h3>
|
||||
<!-- {{item.value}} -->3
|
||||
</h3>
|
||||
<p>
|
||||
<!-- {{item.label}} -->待处理
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 事件列表 -->
|
||||
<div class="title">
|
||||
<div class="title-name">事件列表</div>
|
||||
<div class="title-type" @click="lookAllType">全部类型<u-icon name="arrow-down"></u-icon></div>
|
||||
</div>
|
||||
|
||||
<template >
|
||||
<AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
|
||||
<template #custom>
|
||||
<div class="card-top">
|
||||
<div class="titles">{{ item.content }}</div>
|
||||
|
||||
<div class="types">
|
||||
<span>事件类型</span>
|
||||
<span class="types-right">{{ item.groupName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="gards">
|
||||
<span>所属网格</span>
|
||||
<span class="gards-right">{{ item.girdName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'" v-if="item.eventStatus">
|
||||
<span class="icon"></span>
|
||||
<span>
|
||||
{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</AiCard>
|
||||
<div class="addbtn" @click="addEvent">新增事件</div>
|
||||
<AiEmpty v-if="!datas.length"></AiEmpty>
|
||||
</template>
|
||||
|
||||
<div class="pad-b120" v-if="datas.length"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
datas: [],
|
||||
tabList: [
|
||||
{
|
||||
name: '全部待办',
|
||||
},
|
||||
{
|
||||
name: '办件历史',
|
||||
},
|
||||
],
|
||||
currentTabs: 0,
|
||||
current: 1,
|
||||
pages: 0,
|
||||
show: false,
|
||||
myGirdList: [],
|
||||
girdId: '',
|
||||
girdNameText: '所属网格',
|
||||
showType: false,
|
||||
listType: [],
|
||||
eventStatus: '',
|
||||
eventStatusText: '办件状态',
|
||||
listTypeHistory: [],
|
||||
listTypeAll: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
loadmore() {
|
||||
return this.pages <= this.current ? 'loading ' : 'nomore'
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.current = 1
|
||||
this.girdList()
|
||||
this.getList()
|
||||
uni.$on('nextList', ()=>{
|
||||
this.current ++
|
||||
this.getList()
|
||||
})
|
||||
uni.$on('getListInit', ()=>{
|
||||
this.current = 1
|
||||
this.getList()
|
||||
})
|
||||
|
||||
},
|
||||
onShow() {
|
||||
document.title = '矛盾调解'
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory').then(() => {
|
||||
this.getList()
|
||||
this.listTypeAll = this.$dict.getDict('clapEventStatusAll')
|
||||
this.listTypeHistory = this.$dict.getDict('clapEventStatusHistory')
|
||||
this.listType = this.listTypeAll
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post(`/app/appclapeventinfo/listByGirdMember`, null, {
|
||||
params: {
|
||||
size: 10,
|
||||
current: this.current,
|
||||
searchType: this.currentTabs == 1 ? '1' : '0',
|
||||
eventStatus: this.eventStatus,
|
||||
girdId: this.girdId
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
this.pages = res.data.pages
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 新增事件
|
||||
addEvent() {
|
||||
uni.navigateTo({url: './add'})
|
||||
},
|
||||
|
||||
girdList() {
|
||||
this.$http.post(`/app/appgirdmemberinfo/queryMyGirdListWithOut01`, null, {
|
||||
params: {
|
||||
size: 9999,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.myGirdList = res.data
|
||||
var all = {
|
||||
id: '',
|
||||
girdName: '全部'
|
||||
}
|
||||
this.myGirdList.unshift(all)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
confirm(e) {
|
||||
if (this.show) {
|
||||
this.girdNameText = e[0].label
|
||||
this.girdId = e[0].value
|
||||
}
|
||||
if (this.showType) {
|
||||
this.eventStatus = e[0].value
|
||||
this.eventStatusText = e[0].label
|
||||
}
|
||||
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.current = 1
|
||||
this.datas = []
|
||||
this.eventStatus = ''
|
||||
this.girdId = ''
|
||||
this.girdNameText = '所属网格'
|
||||
this.eventStatusText = '办件状态'
|
||||
this.currentTabs = index
|
||||
if(index == 0) {
|
||||
this.listType = this.listTypeAll
|
||||
}else {
|
||||
this.listType = this.listTypeHistory
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
linkTo(url) {
|
||||
uni.navigateTo({ url })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.list {
|
||||
height: 100%;
|
||||
|
||||
.content-box {
|
||||
padding: 32px 30px 0px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content-list {
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
|
||||
.list-item {
|
||||
width: 25%;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
box-sizing: border-box;
|
||||
|
||||
h3 {
|
||||
font-size: 64px;
|
||||
color: #1E88E8;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
padding: 0 30px;
|
||||
.title-name {
|
||||
font-size: 38px;
|
||||
color: #333333;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.title-type {
|
||||
font-size: 26px;
|
||||
color: #666666;
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiTopFixed .content {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .AiCard {
|
||||
background: #f3f6f9;
|
||||
padding: 24px 30px 0;
|
||||
|
||||
.start {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
|
||||
.card-top {
|
||||
padding: 32px;
|
||||
.titles {
|
||||
margin-bottom: 34px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.types,
|
||||
.gards {
|
||||
margin-top: 8px;
|
||||
font-size: 26px;
|
||||
.types-right,
|
||||
.gards-right {
|
||||
margin-left: 32px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 32px;
|
||||
border-top: 1px solid #dddddd;
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.status0 {
|
||||
color: #ff883c;
|
||||
.icon {
|
||||
background: #ff883c;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
color: #1aaaff;
|
||||
.icon {
|
||||
background: #1aaaff;
|
||||
}
|
||||
}
|
||||
|
||||
.status2 {
|
||||
color: #42d784;
|
||||
.icon {
|
||||
background: #42d784;
|
||||
}
|
||||
}
|
||||
|
||||
.status3 {
|
||||
color: #ff4466;
|
||||
.icon {
|
||||
background: #ff4466;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addbtn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
background-color: #3975C6;
|
||||
font-size: 32px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.pad-b120 {
|
||||
background-color: #f3f6f9;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user