迁移
This commit is contained in:
liuye
219
src/project/biaopin/AppGeneralElection/AppGeneralElection.vue
Normal file
219
src/project/biaopin/AppGeneralElection/AppGeneralElection.vue
Normal file
@@ -0,0 +1,219 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<view v-if="isShow" style="height:100%;">
|
||||||
|
<view class="session-list">
|
||||||
|
<view class="session-item" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="item-top">
|
||||||
|
<view class="item-title mar-b9">{{item.title}}</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<text class="info-label">选举状态：</text>
|
||||||
|
<text class="info-value" :class="'item-status'+item.status">
|
||||||
|
{{$dict.getLabel('electionStatus',item.status)||'-'}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-info mar-b9">
|
||||||
|
<text class="info-label">应选人数：</text>
|
||||||
|
<text class="info-value" style="display:inline-block;width: 100rpx;">{{item.chooseNumber || '0'}}</text>
|
||||||
|
<text class="info-label">候选人数：</text>
|
||||||
|
<text class="info-value">{{item.candidatesNumber || '0'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-bottom">
|
||||||
|
<text class="item-btn" v-if="item.status == 1 && item.partyVoteStatus === null" @click="toDetail(item.id)">去投票</text>
|
||||||
|
<text class="item-btn border-999" v-if="item.status == 2 && item.partyVoteStatus != null" @click="showTips(item.status)">已投票</text>
|
||||||
|
<text class="item-btn border-999" v-if="item.status == 1 && item.partyVoteStatus != null" @click="showTips(item.status)">已投票</text>
|
||||||
|
<text class="item-btn border-999" v-if="item.status == 0" @click="showTips(item.status)">未开始</text>
|
||||||
|
<text class="item-btn border-999" v-if="item.status == 2 && item.partyVoteStatus === null" @click="showTips(item.status)">未投票</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-status" :class="'item-status'+item.status">
|
||||||
|
{{$dict.getLabel('electionStatus',item.status)||'-'}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<AiEmpty v-if="list.length == 0"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'AppGeneralElection',
|
||||||
|
appName: "换届选举",
|
||||||
|
computed: {
|
||||||
|
...mapState(['user', 'token']),
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: true,
|
||||||
|
list: [],
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
pages: 2,
|
||||||
|
partyId: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.$dict.load('electionStatus').then(() => {
|
||||||
|
this.partyId =this.user.partyId
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.$dict.load('electionStatus').then(() => {
|
||||||
|
this.partyId = this.user.partyId
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
if (this.pageNum > this.pages) return
|
||||||
|
this.$instance.post(`/app/appgeneralelectioninfo/list-xcx?partyId=${this.partyId}¤t=${this.pageNum}&size=${this.pageSize}`, null, {}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
const list = this.pageNum > 1 ? [...this.list, ...res.data.records] : res.data.records
|
||||||
|
this.pages = Math.ceil(res.data.total / 10)
|
||||||
|
this.list = list
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toSessionDetail(id) {
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: '../threeSessions/threeSessionsDetail?id=' + id
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
toDetail(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `./generalElectionDetail?id=${id}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showTips(status) {
|
||||||
|
var title = '投票未开始'
|
||||||
|
if (status == 1) {
|
||||||
|
title = '已投票'
|
||||||
|
}
|
||||||
|
if (status == 2) {
|
||||||
|
title = '已结束'
|
||||||
|
}
|
||||||
|
uni.showToast({
|
||||||
|
title: title,
|
||||||
|
icon: "none"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
this.pageNum = this.pageNum + 1
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scope>
|
||||||
|
|
||||||
|
.page {
|
||||||
|
background-color: #F3F6F9;
|
||||||
|
|
||||||
|
.session-list {
|
||||||
|
.session-item {
|
||||||
|
width: 686px;
|
||||||
|
margin: 32px auto 0 auto;
|
||||||
|
background-color: #fff;
|
||||||
|
// min-height: 308px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
padding: 32px 32px 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-info {
|
||||||
|
line-height: 42px;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-bottom {
|
||||||
|
border-top: 2px solid #EEE;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 34px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 96px;
|
||||||
|
|
||||||
|
.item-btn {
|
||||||
|
display: inline-block;
|
||||||
|
width: 152px;
|
||||||
|
height: 52px;
|
||||||
|
line-height: 52px;
|
||||||
|
border-radius: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-left: 32px;
|
||||||
|
border: 2px solid #E1E1E1;
|
||||||
|
color: #1365DD;
|
||||||
|
border: 2px solid #1365DD;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #343D65;
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status {
|
||||||
|
position: absolute;
|
||||||
|
top: 14px;
|
||||||
|
right: -30rpx;
|
||||||
|
width: 140px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 44px;
|
||||||
|
font-size: 24px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status0 {
|
||||||
|
color: #FF9B2B;
|
||||||
|
background-color: #FFF3E8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status1 {
|
||||||
|
color: #5A98F2;
|
||||||
|
background-color: #F1F6FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status2 {
|
||||||
|
color: #f46;
|
||||||
|
background-color: #FFECF0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-999 {
|
||||||
|
color: #999 !important;
|
||||||
|
border-color: #999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mar-b9 {
|
||||||
|
margin-bottom: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-affairs {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 210rpx);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
377
src/project/biaopin/AppGeneralElection/generalElectionDetail.vue
Normal file
377
src/project/biaopin/AppGeneralElection/generalElectionDetail.vue
Normal file
@@ -0,0 +1,377 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<div class="line-bg"></div>
|
||||||
|
<div class="banner-top">
|
||||||
|
<image
|
||||||
|
src="https://cdn.cunwuyun.cn/img/election-banner.png"
|
||||||
|
class="banner-img"
|
||||||
|
></image>
|
||||||
|
<span class="tips" @click="viewMask()"
|
||||||
|
><image
|
||||||
|
src="https://cdn.cunwuyun.cn/img/explain-icon.png"
|
||||||
|
class="tips-icon"
|
||||||
|
></image
|
||||||
|
>投票说明</span
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
src="https://cdn.cunwuyun.cn/img/party-icon.png"
|
||||||
|
class="party-icon"
|
||||||
|
></image>
|
||||||
|
<div class="banner-info">
|
||||||
|
<div class="title">{{ title }}</div>
|
||||||
|
<div class="num-info">应选人{{ chooseNumber || "0" }}人</div>
|
||||||
|
<div class="user-list">
|
||||||
|
<div class="user-item user-item-title">
|
||||||
|
<span>候选人</span>
|
||||||
|
<span>赞成</span>
|
||||||
|
<span>反对</span>
|
||||||
|
<span>弃权</span>
|
||||||
|
</div>
|
||||||
|
<div class="user-item" v-for="(item, index) in userList" :key="index">
|
||||||
|
<span>{{ item.candidateUserName }}</span>
|
||||||
|
<span>
|
||||||
|
<image
|
||||||
|
:src="
|
||||||
|
item.voteStatus == '0'
|
||||||
|
? 'https://cdn.cunwuyun.cn/img/circle-check.png'
|
||||||
|
: 'https://cdn.cunwuyun.cn/img/circle-icon.png'
|
||||||
|
"
|
||||||
|
class="check-icon"
|
||||||
|
@click="checkClick(index, '0')"
|
||||||
|
></image>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<image
|
||||||
|
:src="
|
||||||
|
item.voteStatus == '1'
|
||||||
|
? 'https://cdn.cunwuyun.cn/img/circle-check.png'
|
||||||
|
: 'https://cdn.cunwuyun.cn/img/circle-icon.png'
|
||||||
|
"
|
||||||
|
class="check-icon"
|
||||||
|
@click="checkClick(index, '1')"
|
||||||
|
></image>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<image
|
||||||
|
:src="
|
||||||
|
item.voteStatus == '2'
|
||||||
|
? 'https://cdn.cunwuyun.cn/img/circle-check.png'
|
||||||
|
: 'https://cdn.cunwuyun.cn/img/circle-icon.png'
|
||||||
|
"
|
||||||
|
class="check-icon"
|
||||||
|
@click="checkClick(index, '2')"
|
||||||
|
></image>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-bottom">
|
||||||
|
<div class="btn" @click="submitVote()">提交投票</div>
|
||||||
|
</div>
|
||||||
|
<view class="mask" v-if="showMask">
|
||||||
|
<view class="mask-content">
|
||||||
|
<view class="mask-title">投票说明</view>
|
||||||
|
<!-- <view class="mask-text">1、本次选举采用无记名投票方式，差额选举的办法</view>
|
||||||
|
<view class="mask-text">2、选举工作由选举委员会主持，未尽事宜由选举委员会研究决定。</view> -->
|
||||||
|
<view class="mask-text">{{ votingInstructions }}</view>
|
||||||
|
<view class="mask-btn" @click="closeMask()">关闭</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
...mapState(["user"]),
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detailId: "",
|
||||||
|
userList: [],
|
||||||
|
showMask: false,
|
||||||
|
title: "",
|
||||||
|
chooseNumber: "",
|
||||||
|
partyId: "",
|
||||||
|
votingInstructions: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.detailId = options.id;
|
||||||
|
this.partyId = this.user.partyId;
|
||||||
|
this.getDetailInfo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitVote() {
|
||||||
|
var flags = true;
|
||||||
|
var checkNum = 0;
|
||||||
|
var checkList = [];
|
||||||
|
this.userList.map((item) => {
|
||||||
|
if (item.voteStatus) {
|
||||||
|
checkNum++;
|
||||||
|
checkList.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (checkNum > this.chooseNumber) {
|
||||||
|
uni.showToast({ title: `投票人数大于应选人数，请重试`, icon: "none" });
|
||||||
|
flags = false;
|
||||||
|
}
|
||||||
|
if (checkNum < this.chooseNumber) {
|
||||||
|
uni.showToast({ title: `请给候选人投票`, icon: "none" });
|
||||||
|
flags = false;
|
||||||
|
}
|
||||||
|
// if (checkNum < this.userList.length) {
|
||||||
|
// uni.showToast({title: `请给候选人投票`, icon: 'none'})
|
||||||
|
// flags = false
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (!flags) return;
|
||||||
|
this.$instance
|
||||||
|
.post("/app/appgeneralelectioninfo/vote", checkList)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
uni.showToast({ title: "投票成功！" });
|
||||||
|
setTimeout(function () {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1,
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
checkClick(index, status) {
|
||||||
|
if (this.userList[index].voteStatus == status) {
|
||||||
|
this.userList[index].voteStatus = "";
|
||||||
|
} else {
|
||||||
|
this.userList[index].voteStatus = status;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeMask() {
|
||||||
|
this.showMask = false;
|
||||||
|
},
|
||||||
|
viewMask() {
|
||||||
|
this.showMask = true;
|
||||||
|
},
|
||||||
|
getDetailInfo() {
|
||||||
|
this.$instance
|
||||||
|
.post(
|
||||||
|
`/app/appgeneralelectioninfo/queryDetailById?id=${this.detailId}`,
|
||||||
|
null
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data) {
|
||||||
|
this.votingInstructions = res.data.votingInstructions;
|
||||||
|
this.chooseNumber = res.data.chooseNumber;
|
||||||
|
this.title = res.data.title;
|
||||||
|
res.data.candidateUsers.map((item) => {
|
||||||
|
var info = {
|
||||||
|
candidateUserId: item.id,
|
||||||
|
candidateUserName: item.name,
|
||||||
|
electionId: this.detailId,
|
||||||
|
voteStatus: "",
|
||||||
|
voterUserId: this.partyId,
|
||||||
|
};
|
||||||
|
this.userList.push(info);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scope>
|
||||||
|
.page {
|
||||||
|
.line-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 12px;
|
||||||
|
background-color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 340px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.banner-img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 340px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
position: absolute;
|
||||||
|
right: 42px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
z-index: 88;
|
||||||
|
top: 137px;
|
||||||
|
|
||||||
|
.tips-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
vertical-align: text-top;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.party-icon {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -70rpx;
|
||||||
|
top: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-info {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
padding-bottom: 136px;
|
||||||
|
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 44px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 0 10px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num-info {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-list {
|
||||||
|
width: 710px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 24px 24px 0 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.user-item {
|
||||||
|
width: 688px;
|
||||||
|
height: 112px;
|
||||||
|
line-height: 112px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 2px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
span {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item:nth-last-of-type(1) {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item-title {
|
||||||
|
color: #333;
|
||||||
|
font-size: 34px;
|
||||||
|
padding-top: 88px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-bottom {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 112px;
|
||||||
|
background: #e60012;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
.mask-content {
|
||||||
|
width: 560px;
|
||||||
|
height: 680px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px solid rgba(151, 151, 151, 1);
|
||||||
|
margin: 200px auto 0;
|
||||||
|
padding: 48px 48px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
||||||
|
.mask-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask-text {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 44px;
|
||||||
|
font-size: 28px;
|
||||||
|
height: 460px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask-btn {
|
||||||
|
width: 128px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1365dd;
|
||||||
|
line-height: 40px;
|
||||||
|
margin: 30px 0 20px 332px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
210
src/project/biaopin/AppOrganizational/AppOrganizational.vue
Normal file
210
src/project/biaopin/AppOrganizational/AppOrganizational.vue
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
<template>
|
||||||
|
<view class="AppOrganizational" :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']),
|
||||||
|
formatTime() {
|
||||||
|
return function (time) {
|
||||||
|
return time && time.substring(0, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabIndex: 0,
|
||||||
|
historyList: [],
|
||||||
|
dataInfo: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
uni.setNavigationBarColor({
|
||||||
|
frontColor: "#ffffff",
|
||||||
|
backgroundColor: "#e60012",
|
||||||
|
})
|
||||||
|
this.$dict.load('organizationChangeType').then(() => {
|
||||||
|
this.getDetail()
|
||||||
|
this.getHistory()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDetail() {
|
||||||
|
this.$instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId-forwx`, null, {
|
||||||
|
params: {organizationId: this.user.partyOrgId}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.dataInfo = res.data
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
this.$toast(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getHistory() {
|
||||||
|
this.$instance.post(`/app/apporganizationgeneralelection/list-forwx?organizationId=${this.user.partyOrgId}`).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
this.historyList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
tabClick(index) {
|
||||||
|
this.tabIndex = index
|
||||||
|
},
|
||||||
|
toDetail(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `./detail?id=${id}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppOrganizational {
|
||||||
|
.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>
|
||||||
65
src/project/biaopin/AppOrganizational/detail.vue
Normal file
65
src/project/biaopin/AppOrganizational/detail.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<view class="detail">
|
||||||
|
<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){
|
||||||
|
uni.setNavigationBarColor({
|
||||||
|
frontColor: "#ffffff",
|
||||||
|
backgroundColor: "#e60012",
|
||||||
|
})
|
||||||
|
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>
|
||||||
|
.detail {
|
||||||
|
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