组织换届
This commit is contained in:
liuye
215
src/project/pingchang/AppOrganizational/AppOrganizational.vue
Normal file
215
src/project/pingchang/AppOrganizational/AppOrganizational.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="page" :class="tabIndex == 1 ? 'bg-369' : 'bg-fff'">
|
||||
<div class="detail-top">
|
||||
<p>{{ dataInfo.organizationName || '-' }}</p>
|
||||
<div>成立时间：{{ formatTime(dataInfo.createOrganizationTime) || '-' }}</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="select-tab">
|
||||
<div :class="tabIndex == 0 ? 'tab-active' : ''" @click="tabClick(0)">当前届次</div>
|
||||
<div :class="tabIndex == 1 ? 'tab-active' : ''" @click="tabClick(1)">历史届次</div>
|
||||
</div>
|
||||
<div class="organization-detail" v-if="!tabIndex">
|
||||
<p>当前届次：{{ dataInfo.sessionTime || '-' }}</p>
|
||||
<p>本届换届时间：{{ dataInfo.changeTime || '-' }}</p>
|
||||
<p>换届类型：{{ $dict.getLabel('organizationChangeType', dataInfo.type) || '-' }}</p>
|
||||
<p class="padd-b32">下届换届时间：{{ dataInfo.nextChangeTime || '-' }}</p>
|
||||
|
||||
<p class="fw500">本届任职</p>
|
||||
<div style="margin-bottom: 40px;">
|
||||
<p v-for="(item, index) in dataInfo.serveList" :key="index">{{ item.position }}：{{ item.name }}</p>
|
||||
</div>
|
||||
|
||||
<p class="fw500">本届候选人</p>
|
||||
<p v-for="(item, index) in dataInfo.candidateList" :key="index">{{ item.position }}：{{ item.name }}</p>
|
||||
</div>
|
||||
<div class="history-list" v-if="historyList.length && tabIndex">
|
||||
<div class="item" v-for="(item, index) in historyList" :key="index" @click="toDetail(item.id)">
|
||||
<div class="item-top">
|
||||
<image src="https://cdn.cunwuyun.cn/img/organizationalchange-icon.png"/>
|
||||
届次：{{ item.sessionTime }}
|
||||
</div>
|
||||
<div class="item-date">换届时间：{{ item.changeTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!historyList.length && tabIndex"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
export default {
|
||||
name:"AppOrganizational",
|
||||
appName: "组织换届",
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
historyList: [],
|
||||
dataInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: "#ffffff",
|
||||
backgroundColor: "#e60012",
|
||||
})
|
||||
this.$dict.load('organizationChangeType').then(() => {
|
||||
this.getDetail()
|
||||
this.getHistory()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$instance.post(`/app/apporganizationchangeconfig/queryDetailByOrganizationIdFromApplet`, null, {
|
||||
params: {organizationId: this.user.partyOrgId}
|
||||
}).then(res => {
|
||||
this.dataInfo = res.data
|
||||
}).catch(err => {
|
||||
this.$toast(err)
|
||||
})
|
||||
},
|
||||
getHistory() {
|
||||
this.$instance.post(`/app/apporganizationgeneralelection/list-forwx?organizationId=${this.user.partyId}`).then(res => {
|
||||
if (res && res.data) {
|
||||
this.historyList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
tabClick(index) {
|
||||
this.tabIndex = index
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: `./detail?id=${id}`
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return uni.getStorageSync("userInfo")
|
||||
},
|
||||
formatTime() {
|
||||
return function (time) {
|
||||
return time && time.substring(0, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.page {
|
||||
.detail-top {
|
||||
padding: 32px;
|
||||
background-color: #E60012;
|
||||
color: #fff;
|
||||
|
||||
p {
|
||||
line-height: 64px;
|
||||
font-size: 40px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
div {
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.line-bg {
|
||||
height: 8px;
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
|
||||
.select-tab {
|
||||
display: flex;
|
||||
line-height: 96px;
|
||||
background-color: #fff;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
border-bottom: 2px solid #D8DDE6;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
color: #F26C77;
|
||||
border-bottom: 4px solid #E60012;
|
||||
}
|
||||
}
|
||||
|
||||
.organization-detail {
|
||||
padding: 48px 32px 0;
|
||||
|
||||
p {
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.padd-b32 {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.fw500 {
|
||||
font-weight: 600;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
}
|
||||
}
|
||||
|
||||
.history-list {
|
||||
padding: 16px 32px;
|
||||
|
||||
.item {
|
||||
width: 686px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
|
||||
.item-top {
|
||||
width: 622px;
|
||||
height: 108px;
|
||||
line-height: 106px;
|
||||
margin-left: 16px;
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
flex: 1;
|
||||
|
||||
image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 20px 0 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.item-date {
|
||||
line-height: 106px;
|
||||
padding-right: 32px;
|
||||
flex: 1;
|
||||
color: #999;
|
||||
font-size: 28px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-fff {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bg-369 {
|
||||
background-color: #F3F6F9 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
62
src/project/pingchang/AppOrganizational/detail.vue
Normal file
62
src/project/pingchang/AppOrganizational/detail.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<div class="line-bg"></div>
|
||||
<div class="organization-detail">
|
||||
<p>当前届次：{{dataInfo.sessionTime || '-'}}</p>
|
||||
<p>换届时间：{{dataInfo.changeTime || '-'}}</p>
|
||||
<p class="fw500">该届任职</p>
|
||||
<div style="margin-bottom: 40rpx;">
|
||||
<p v-for="(item, index) in dataInfo.serveList" :key="index">{{item.position}}：{{item.name}}</p>
|
||||
</div>
|
||||
<p class="fw500">该届候选人</p>
|
||||
<p v-for="(item, index) in dataInfo.candidateList" :key="index">{{item.position}}：{{item.name}}</p>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
dataInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad(options){
|
||||
this.$dict.load('organizationChangeType')
|
||||
this.id = options.id
|
||||
this.getDetail()
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$instance.post(`/app/apporganizationgeneralelection/queryDetailById-forwx?id=${this.id}`).then( res => {
|
||||
this.dataInfo = res.data
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
|
||||
.page {
|
||||
background-color: #fff;
|
||||
.line-bg{
|
||||
height: 20rpx;
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
.organization-detail{
|
||||
padding: 20rpx 32rpx 0;
|
||||
p{
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.padd-b32{
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
.fw500{
|
||||
font-weight: 600;
|
||||
font-family:PingFangSC-Medium,PingFang SC;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user