You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
748 lines
19 KiB
748 lines
19 KiB
<template>
|
|
<div>
|
|
<el-dialog
|
|
:visible.sync="dialogVisible"
|
|
width="50%"
|
|
@close="closeDetail"
|
|
:destroy-on-close="true"
|
|
>
|
|
<div slot="title">
|
|
<div class="titleText">查看详情</div>
|
|
</div>
|
|
<div class="center-content">
|
|
<header>
|
|
<div class="icons"></div>
|
|
<span>活动信息</span>
|
|
</header>
|
|
<div class="mainsEvents">
|
|
<div class="itemE">
|
|
<div>活动名称:</div>
|
|
<div>{{ detailData.name }}</div>
|
|
</div>
|
|
<div class="itemE">
|
|
<div>活动地址:</div>
|
|
<div>{{ detailData.address }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mainsEvents">
|
|
<div class="itemE">
|
|
<div>活动举办方:</div>
|
|
<div>{{ detailData.publisher }}</div>
|
|
</div>
|
|
<div class="itemE">
|
|
<div>活动标签:</div>
|
|
<div class="mainTag mainTag-label">
|
|
<div
|
|
v-for="(item, index) in detailDatalist"
|
|
:key="index"
|
|
v-show="item != ''"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mainsTitle">
|
|
<div>活动内容:</div>
|
|
<div>{{ detailData.content }}</div>
|
|
</div>
|
|
<div class="mainsTitle">
|
|
<div>活动时间:</div>
|
|
<div>{{ detailData.activityTime }}至{{ detailData.endTime }}</div>
|
|
</div>
|
|
|
|
<!-- 人员匹配度 -->
|
|
<header>
|
|
<div class="icons icons1"></div>
|
|
<span>人员匹配度</span>
|
|
</header>
|
|
<div v-loading="load1">
|
|
<div class="mainPeople" v-if="personList.length > 0">
|
|
<div
|
|
class="subMan"
|
|
v-for="(item, index) in personList"
|
|
:key="index"
|
|
>
|
|
<div class="leftSub">
|
|
<div
|
|
class="leftAvatar"
|
|
:style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
|
|
></div>
|
|
<div class="leftName">
|
|
<div>{{ item.nickName }}</div>
|
|
<div class="mainTag">
|
|
<div
|
|
v-show="item != ''"
|
|
v-for="(item, index) in item.arrlist"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightSub">
|
|
<div class="numPercen">
|
|
<span>匹配度:</span>
|
|
<span>{{ item.degreeOfMatch }}%</span>
|
|
</div>
|
|
<div class="itemBtn" style="justify-content: center">
|
|
<div class="look" @click="looks1(item.tagsId)">查看</div>
|
|
<div
|
|
class="looks"
|
|
style="margin: 0 0 0 10px"
|
|
@click="invite(item)"
|
|
v-if="detailData.status == 1 && item.status == 0"
|
|
>
|
|
邀请
|
|
</div>
|
|
<div class="looks" style="margin: 0 0 0 10px" v-else>
|
|
已邀请
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="noneStyle">暂无数据</div>
|
|
</div>
|
|
|
|
<div class="titlePagin">
|
|
<el-pagination
|
|
small
|
|
layout="prev, pager, next"
|
|
:total="personTotal"
|
|
:current-page.sync="personParams.pageNum"
|
|
@current-change="changePersonSize"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
<!-- 参与报名 -->
|
|
<header>
|
|
<div class="icons icons2"></div>
|
|
<span>参与报名</span>
|
|
</header>
|
|
<div v-loading="load2">
|
|
<div class="mainPeople" v-if="participationList.length > 0">
|
|
<div
|
|
class="subMan"
|
|
v-for="(item, index) in participationList"
|
|
:key="index"
|
|
>
|
|
<div class="leftSub">
|
|
<div
|
|
class="leftAvatar"
|
|
:style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
|
|
></div>
|
|
<div class="leftName">
|
|
<div>{{ item.nickName }}</div>
|
|
<div class="mainTag">
|
|
<div
|
|
v-show="item != ''"
|
|
v-for="(item, indx) in item.arrlist"
|
|
:key="indx"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightSub">
|
|
<div class="numPercen">
|
|
<span>匹配度:</span>
|
|
<span>{{ item.degreeOfMatch }}%</span>
|
|
</div>
|
|
<div class="btn-list">
|
|
<div
|
|
class="btn-text"
|
|
@click="looks2(item)"
|
|
style="color: #188ffe"
|
|
>
|
|
查看
|
|
</div>
|
|
<div
|
|
class="btn-text"
|
|
style="color: #49b28f"
|
|
@click="handleStatus(item.id, 3, index)"
|
|
v-show="item.status != 4"
|
|
>
|
|
{{
|
|
item.status == 2
|
|
? "同意"
|
|
: item.status == 3
|
|
? "已同意"
|
|
: "未知"
|
|
}}
|
|
</div>
|
|
<div
|
|
class="btn-text"
|
|
style="color: #e16a70"
|
|
@click="handleStatus(item.id, 4, index)"
|
|
v-show="item.status != 3"
|
|
>
|
|
{{
|
|
item.status == 2
|
|
? "拒绝"
|
|
: item.status == 4
|
|
? "已拒绝"
|
|
: "未知"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="noneStyle">暂无数据</div>
|
|
</div>
|
|
|
|
<div class="titlePagin">
|
|
<el-pagination
|
|
small
|
|
layout="prev, pager, next"
|
|
:total="participationTotal"
|
|
:current-page.sync="participationParams.pageNum"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 查看该人员的详情 -->
|
|
<el-dialog
|
|
:visible.sync="peopelDetail"
|
|
width="40%"
|
|
@close="cancel"
|
|
:destroy-on-close="true"
|
|
>
|
|
<div slot="title">
|
|
<div class="titleText">查看人员详情</div>
|
|
</div>
|
|
<div class="center-content">
|
|
<el-descriptions class="margin-top" :column="2" border>
|
|
<el-descriptions-item
|
|
v-for="(item, index) in beforeData"
|
|
:key="index"
|
|
>
|
|
<template slot="label"> {{ item.name }} </template>
|
|
{{ item.value }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
activityGet,
|
|
peopleList,
|
|
canyuList,
|
|
peopleGet,
|
|
yaoqingAdd,
|
|
postStatus,
|
|
} from "@/api/volunteer/hdgl";
|
|
export default {
|
|
data() {
|
|
return {
|
|
beforeData: [
|
|
{
|
|
name: "年龄",
|
|
label: "ageRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "文化程度",
|
|
label: "educationRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "小区",
|
|
label: "housingRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "行业类型",
|
|
label: "industryRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "兴趣爱好",
|
|
label: "interestRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "国籍",
|
|
label: "nationalityRange",
|
|
value: "",
|
|
},
|
|
|
|
{
|
|
name: "政治面貌",
|
|
label: "politicalRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "专业类型",
|
|
label: "professionalRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "院校",
|
|
label: "schoolRange",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "性别",
|
|
label: "sexRange",
|
|
value: "",
|
|
},
|
|
],
|
|
dialogVisible: false,
|
|
detailData: {},
|
|
detailDatalist: [],
|
|
load1: true,
|
|
personList: [],
|
|
personTotal: 0,
|
|
personParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
ageRange: "",
|
|
educationRange: "",
|
|
housingRange: "",
|
|
industryRange: "",
|
|
interestRange: "",
|
|
nationalityRange: "",
|
|
politicalRange: "",
|
|
professionalRange: "",
|
|
schoolRange: "",
|
|
sexRange: "",
|
|
},
|
|
load2: true,
|
|
participationList: [],
|
|
participationTotal: 0,
|
|
participationParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
activityId: "",
|
|
},
|
|
peopelDetail: false,
|
|
arr: [
|
|
"ageRange",
|
|
"sexRange",
|
|
"politicalRange",
|
|
"educationRange",
|
|
"housingRange",
|
|
"industryRange",
|
|
"interestRange",
|
|
"professionalRange",
|
|
"schoolRange",
|
|
"nationalityRange",
|
|
],
|
|
e: {},
|
|
};
|
|
},
|
|
props: {},
|
|
created() {},
|
|
methods: {
|
|
/**报名 同意不同意 */
|
|
handleStatus(id, status, index, indx) {
|
|
let _this = this;
|
|
if (
|
|
this.participationList[index].status == 3 ||
|
|
this.participationList[index].status == 4
|
|
)
|
|
return;
|
|
let data = {
|
|
id,
|
|
status,
|
|
};
|
|
this.$modal
|
|
.confirm(`你确认要${status == 3 ? "同意" : "拒绝"}改活动吗？`)
|
|
.then(function () {
|
|
postStatus(data).then((res) => {
|
|
_this.participationList[index].status = status;
|
|
});
|
|
});
|
|
},
|
|
open(e) {
|
|
console.log(e);
|
|
this.e = e;
|
|
activityGet(e).then((res) => {
|
|
this.detailData = res.data;
|
|
this.detailDatalist = this.labelgenerate(this.detailData);
|
|
this.participationParams.activityId = this.detailData.id;
|
|
this.getPersonData();
|
|
this.getParticipationData();
|
|
this.dialogVisible = true;
|
|
});
|
|
},
|
|
//标签生成
|
|
labelgenerate(data) {
|
|
let result = [];
|
|
this.arr.forEach((item) => {
|
|
for (let itemB in data) {
|
|
if (item == itemB) {
|
|
//多选后值是数组类型 =》string
|
|
if (data[itemB]) {
|
|
data[itemB] = data[itemB].split(",");
|
|
} else {
|
|
data[itemB] = [];
|
|
}
|
|
result = [...result, ...data[itemB]];
|
|
}
|
|
}
|
|
});
|
|
return result;
|
|
},
|
|
//关闭详情
|
|
closeDetail() {
|
|
this.detailData = {};
|
|
this.detailDatalist = [];
|
|
this.dialogVisible = false;
|
|
},
|
|
getPersonData() {
|
|
//查看人员匹配度列表
|
|
this.load1 = true;
|
|
this.detailData;
|
|
this.personList = this.detailData.unregisteredUsers;
|
|
if (this.personList.length > 0) {
|
|
this.personList.forEach((item) => {
|
|
item.arrlist = this.labelgenerate(item);
|
|
});
|
|
}
|
|
this.load1 = false;
|
|
},
|
|
getParticipationData() {
|
|
this.load2 = true;
|
|
//查看参与报名列表
|
|
this.detailData;
|
|
this.participationList = this.detailData.enrolledUsers;
|
|
if (this.participationList.length > 0) {
|
|
this.participationList.forEach((item) => {
|
|
item.arrlist = this.labelgenerate(item);
|
|
});
|
|
}
|
|
this.load2 = false;
|
|
},
|
|
//更改人员匹配度页码
|
|
changePersonSize(e) {
|
|
this.personParams.pageNum = e;
|
|
this.getPersonData();
|
|
},
|
|
//更改参与报名匹配度页码
|
|
changeParticipationSize(e) {
|
|
this.participationParams.pageNum = e;
|
|
this.getParticipationData();
|
|
},
|
|
looks1(e) {
|
|
peopleGet(e).then((res) => {
|
|
this.beforeData.forEach((value, index) => {
|
|
for (let key in res.data) {
|
|
if (value.label == key) {
|
|
this.beforeData[index].value = res.data[key].toString();
|
|
}
|
|
}
|
|
});
|
|
this.peopelDetail = true;
|
|
});
|
|
},
|
|
looks2(item) {
|
|
this.beforeData.forEach((value, index) => {
|
|
for (let key in item) {
|
|
if (value.label == key) {
|
|
this.beforeData[index].value = item[key].toString();
|
|
}
|
|
}
|
|
});
|
|
this.peopelDetail = true;
|
|
},
|
|
invite(e) {
|
|
console.log(e);
|
|
this.$modal
|
|
.confirm("是否确认邀请该人参加活动?")
|
|
.then(() => {
|
|
yaoqingAdd(e.id).then(() => {
|
|
this.$modal.msgSuccess("邀请成功");
|
|
|
|
activityGet(this.e).then((res) => {
|
|
this.detailData = res.data;
|
|
for (let key1 in this.personParams) {
|
|
for (let key2 in this.detailData) {
|
|
if (key1 == key2) {
|
|
this.personParams[key1] = this.detailData[key2];
|
|
}
|
|
}
|
|
}
|
|
this.detailDatalist = this.labelgenerate(this.detailData);
|
|
if (this.personParams.sexRange == "") {
|
|
this.personParams.sexRange = "男,女";
|
|
}
|
|
this.participationParams.activityId = this.detailData.id;
|
|
this.getPersonData();
|
|
this.getParticipationData();
|
|
this.dialogVisible = true;
|
|
});
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
cancel() {
|
|
this.peopelDetail = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .margin-top td {
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
}
|
|
::v-deep .margin-top th {
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
width: 20%;
|
|
}
|
|
.titlePagin {
|
|
margin: 12px 0;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
::v-deep .titlePagin .el-pagination {
|
|
padding: 0;
|
|
}
|
|
.mainTag-label {
|
|
// position: absolute;
|
|
width: 300px;
|
|
left: 80px;
|
|
}
|
|
.mainTag {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
flex-direction: row; /* 从左往右排列 */
|
|
& > div {
|
|
margin-bottom: 5px;
|
|
margin-right: 5px;
|
|
background-color: rgba(248, 65, 77, 0.06);
|
|
padding: 3px 5px;
|
|
color: #e16a70;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
::v-deep .el-dialog {
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
::v-deep .el-dialog__header {
|
|
padding: 10px;
|
|
padding-left: 15px;
|
|
background: #f7f5f5;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
::v-deep .el-dialog__footer {
|
|
padding: 0;
|
|
}
|
|
::v-deep .el-dialog__headerbtn {
|
|
top: 12px;
|
|
}
|
|
.titleText {
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
font-weight: bold;
|
|
color: #4c4949;
|
|
padding-left: 15px;
|
|
font-size: 16px;
|
|
position: relative;
|
|
&::before {
|
|
position: absolute;
|
|
top: 3.8px;
|
|
left: 0;
|
|
content: "";
|
|
width: 5px;
|
|
height: 15px;
|
|
background: #f8414d;
|
|
}
|
|
}
|
|
.center-content {
|
|
padding: 20px 30px;
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
.icons {
|
|
height: 14px;
|
|
width: 14px;
|
|
background-image: url("../../../../assets/images/hdxx.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.icons1 {
|
|
background-image: url("../../../../assets/images/rypp.png");
|
|
}
|
|
.icons2 {
|
|
background-image: url("../../../../assets/images/baoming1.png");
|
|
}
|
|
span {
|
|
margin-left: 10px;
|
|
color: #4c4949;
|
|
font-weight: bold;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
}
|
|
}
|
|
.mainsEvents {
|
|
// height: 35px;
|
|
display: flex;
|
|
// align-items: center;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
margin-bottom: 20px;
|
|
|
|
.itemE {
|
|
position: relative;
|
|
width: 50%;
|
|
display: flex;
|
|
& > div:nth-of-type(1) {
|
|
display: flex;
|
|
// align-items: center;
|
|
color: #4c4949;
|
|
width: 24%;
|
|
}
|
|
& > div:nth-last-of-type(2) {
|
|
color: #807a7a;
|
|
}
|
|
}
|
|
}
|
|
.mainsTitle {
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
& > div:nth-of-type(1) {
|
|
color: #807a7a;
|
|
width: 12%;
|
|
}
|
|
& > div:nth-of-type(2) {
|
|
width: 50%;
|
|
color: #606266;
|
|
white-space: nowrap; /* 不换行 */
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
text-overflow: ellipsis; /* 溢出显示省略号 */
|
|
}
|
|
}
|
|
.noneStyle {
|
|
height: 200px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
.mainPeople {
|
|
overflow: auto;
|
|
// height: 200px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 12px;
|
|
.subMan {
|
|
width: 100%;
|
|
min-height: 95px;
|
|
background: #fafafa;
|
|
border: 1px solid #f5edeb;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
.leftSub {
|
|
width: 84%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.leftAvatar {
|
|
width: 20%;
|
|
min-height: 95px;
|
|
background-size: 100% 100%;
|
|
border-radius: 10px;
|
|
}
|
|
.leftName {
|
|
width: 80%;
|
|
|
|
margin-left: 15px;
|
|
& > div:nth-of-type(1) {
|
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
|
color: #4c4949;
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
& > div:nth-of-type(2) {
|
|
margin-bottom: -15px;
|
|
}
|
|
}
|
|
}
|
|
.rightSub {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.numPercen {
|
|
display: flex;
|
|
// align-items: flex-end;
|
|
align-items: center;
|
|
& > span:nth-of-type(1) {
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
font-weight: 400;
|
|
color: #8a8585;
|
|
margin-right: 10px;
|
|
}
|
|
& > span:nth-of-type(2) {
|
|
font-family: "youshebiaotihei";
|
|
color: #49b28f;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.itemBtn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.look {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
color: #188ffe;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.looks {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
color: #49b28f;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #e5d3d4;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f4f1f1;
|
|
}
|
|
.btn-list {
|
|
display: flex;
|
|
align-items: center;
|
|
.btn-text {
|
|
margin-right: 4px;
|
|
cursor: pointer;
|
|
padding: 3px 6px;
|
|
background: #fff;
|
|
font-size: 13px;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
}
|
|
}
|
|
</style>
|