parent
37a475562b
commit
a40a9f5162
@ -0,0 +1,659 @@
|
|||||||
|
<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.id }}</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>1%</span>
|
||||||
|
</div>
|
||||||
|
<div class="itemBtn">
|
||||||
|
<div class="look" @click="looks1(item.id)">查看</div>
|
||||||
|
<div class="looks" @click="invite(item)">邀请</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>周爱</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>99%</span>
|
||||||
|
</div>
|
||||||
|
<div class="itemBtn" style="justify-content: center">
|
||||||
|
<div class="look" @click="looks2(item)">查看</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,
|
||||||
|
} 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",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
open(e) {
|
||||||
|
activityGet(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;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//标签生成
|
||||||
|
labelgenerate(data = {}) {
|
||||||
|
let arrlist = [];
|
||||||
|
for (let key3 of this.arr) {
|
||||||
|
for (let key4 in data) {
|
||||||
|
if (key3 == key4) {
|
||||||
|
let a = data[key3];
|
||||||
|
arrlist.push(a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arrlist;
|
||||||
|
},
|
||||||
|
//关闭详情
|
||||||
|
closeDetail() {
|
||||||
|
this.detailData = {};
|
||||||
|
this.detailDatalist = [];
|
||||||
|
this.dialogVisible = false;
|
||||||
|
},
|
||||||
|
getPersonData() {
|
||||||
|
//查看人员匹配度列表
|
||||||
|
this.load1 = true;
|
||||||
|
peopleList(this.personParams).then((res) => {
|
||||||
|
this.personList = res.rows;
|
||||||
|
if (this.personList.length > 0) {
|
||||||
|
this.personList.forEach((item) => {
|
||||||
|
item.arrlist = this.labelgenerate(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.personTotal = res.total;
|
||||||
|
this.load1 = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getParticipationData() {
|
||||||
|
this.load2 = true;
|
||||||
|
//查看参与报名列表
|
||||||
|
canyuList(this.participationParams).then((res) => {
|
||||||
|
this.participationList = res.rows;
|
||||||
|
if (this.participationList.length > 0) {
|
||||||
|
this.participationList.forEach((item) => {
|
||||||
|
item.arrlist = this.labelgenerate(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.participationTotal = res.total;
|
||||||
|
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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.peopelDetail = true;
|
||||||
|
},
|
||||||
|
invite(e) {
|
||||||
|
console.log(e);
|
||||||
|
this.$modal
|
||||||
|
.confirm("是否确认邀请该人参加活动?")
|
||||||
|
.then(() => {
|
||||||
|
yaoqingAdd({ activityId: this.detailData.id, uid: e.uid }).then(
|
||||||
|
() => {
|
||||||
|
this.$modal.msgSuccess("邀请成功");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.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;
|
||||||
|
right: -30px;
|
||||||
|
}
|
||||||
|
.mainTag {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular";
|
||||||
|
& > 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: 12px;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,9 +1,80 @@
|
|||||||
|
<!--
|
||||||
|
* @Descripttion:
|
||||||
|
* @version:
|
||||||
|
* @Author: JC9527
|
||||||
|
* @Date: 2023-09-18 10:08:30
|
||||||
|
* @LastEditors: JC9527
|
||||||
|
* @LastEditTime: 2023-09-22 14:36:35
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">活动推荐</div>
|
<div class="plan-management">
|
||||||
|
<div class="plan-topBox">
|
||||||
|
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||||
|
<el-tab-pane label="活动推荐" name="recommendView"></el-tab-pane>
|
||||||
|
<!-- <el-tab-pane label="活动邀请" name="inviteView"></el-tab-pane> -->
|
||||||
|
</el-tabs>
|
||||||
|
<my-input @changeInput="changeInput" placeholder="请输入活动内容" @changeValue="changeValue"></my-input>
|
||||||
|
</div>
|
||||||
|
<div class="plan-bottomBox">
|
||||||
|
<component :is="defaultRouter" :value="input" ref="myComponents"></component>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import inviteView from '../../components/invite.vue'
|
||||||
</script>
|
import recommendView from '../../components/recommend.vue'
|
||||||
|
import myInput from "@/views/components/myInput/index.vue"
|
||||||
|
export default {
|
||||||
|
components:{inviteView,recommendView,myInput},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
input: '',
|
||||||
|
activeName: 'recommendView',
|
||||||
|
defaultRouter:'recommendView',
|
||||||
|
isClick:false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 输入框的值
|
||||||
|
changeInput(value){
|
||||||
|
this.input = value;
|
||||||
|
this.isClick = true;
|
||||||
|
},
|
||||||
|
// 监听输入框是否清空
|
||||||
|
changeValue(value){
|
||||||
|
if(this.isClick && value == ''){
|
||||||
|
this.$refs.myComponents.getList('1')
|
||||||
|
this.isClick = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleClick() {
|
||||||
|
this.defaultRouter = this.activeName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
|
||||||
<style></style>
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.plan-management {
|
||||||
|
padding: 0 20px 10px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
|
||||||
|
.plan-topBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 0 0 0;
|
||||||
|
::v-deep .el-tabs--top {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plan-bottomBox {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,9 +1,80 @@
|
|||||||
|
<!--
|
||||||
|
* @Descripttion:
|
||||||
|
* @version:
|
||||||
|
* @Author: JC9527
|
||||||
|
* @Date: 2023-09-18 10:08:30
|
||||||
|
* @LastEditors: JC9527
|
||||||
|
* @LastEditTime: 2023-09-22 14:36:35
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">活动邀请</div>
|
<div class="plan-management">
|
||||||
|
<div class="plan-topBox">
|
||||||
|
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||||
|
<!-- <el-tab-pane label="活动推荐" name="recommendView"></el-tab-pane> -->
|
||||||
|
<el-tab-pane label="活动邀请" name="inviteView"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<my-input @changeInput="changeInput" placeholder="请输入活动内容" @changeValue="changeValue"></my-input>
|
||||||
|
</div>
|
||||||
|
<div class="plan-bottomBox">
|
||||||
|
<component :is="defaultRouter" :value="input" ref="myComponents"></component>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import inviteView from '../../components/invite.vue'
|
||||||
</script>
|
import recommendView from '../../components/recommend.vue'
|
||||||
|
import myInput from "@/views/components/myInput/index.vue"
|
||||||
|
export default {
|
||||||
|
components:{inviteView,recommendView,myInput},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
input: '',
|
||||||
|
activeName: 'inviteView',
|
||||||
|
defaultRouter:'inviteView',
|
||||||
|
isClick:false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 输入框的值
|
||||||
|
changeInput(value){
|
||||||
|
this.input = value;
|
||||||
|
this.isClick = true;
|
||||||
|
},
|
||||||
|
// 监听输入框是否清空
|
||||||
|
changeValue(value){
|
||||||
|
if(this.isClick && value == ''){
|
||||||
|
this.$refs.myComponents.getList('1')
|
||||||
|
this.isClick = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleClick() {
|
||||||
|
this.defaultRouter = this.activeName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
|
||||||
<style></style>
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.plan-management {
|
||||||
|
padding: 0 20px 10px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
|
||||||
|
.plan-topBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 0 0 0;
|
||||||
|
::v-deep .el-tabs--top {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plan-bottomBox {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,9 +1,376 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">用户标签化数据</div>
|
<div class="app-container" ref="apps">
|
||||||
|
<div class="titleInput" ref="titleInput">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入国籍"
|
||||||
|
v-model="afterParams.nationalityRange"
|
||||||
|
class="input-with-select"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
slot="append"
|
||||||
|
icon="el-icon-search"
|
||||||
|
@click="search"
|
||||||
|
></el-button>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div v-loading="loads">
|
||||||
|
<div class="peopleContent" v-if="arrList.length > 0">
|
||||||
|
<div class="subMan" v-for="(item, index) in arrList" :key="index">
|
||||||
|
<div class="leftSub">
|
||||||
|
<div
|
||||||
|
class="leftAvatar"
|
||||||
|
:style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
|
||||||
|
></div>
|
||||||
|
<div class="leftName">
|
||||||
|
<div>周爱</div>
|
||||||
|
<div class="mainTag">
|
||||||
|
<!-- <div>{{ item.ageRange }}</div>
|
||||||
|
<div>
|
||||||
|
{{ item.sexRange }}
|
||||||
|
</div>
|
||||||
|
<div>{{ item.educationRange }}</div> -->
|
||||||
|
<div
|
||||||
|
v-show="itema != ''"
|
||||||
|
v-for="(itema, index) in item.arrlist"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ itema }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightSub">
|
||||||
|
<div class="lookDetail" @click="looks(item.id)">查看</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="noneStyle">暂无数据</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination" ref="pagination">
|
||||||
|
<my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
|
||||||
|
</div>
|
||||||
|
<!-- 查看该人员的详情 -->
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import { peopleList, peopleGet } from "@/api/volunteer/hdgl";
|
||||||
|
import myPagination from "@/views/components/myPagination/index.vue";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
arrList: [],
|
||||||
|
form: {
|
||||||
|
pageSize: 10,
|
||||||
|
pageNum: 1,
|
||||||
|
},
|
||||||
|
afterParams: {
|
||||||
|
nationalityRange: "",
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
loads: false,
|
||||||
|
//=========
|
||||||
|
peopelDetail: false,
|
||||||
|
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: "",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
arr: [
|
||||||
|
"ageRange",
|
||||||
|
"sexRange",
|
||||||
|
"politicalRange",
|
||||||
|
"educationRange",
|
||||||
|
"housingRange",
|
||||||
|
"industryRange",
|
||||||
|
"interestRange",
|
||||||
|
"professionalRange",
|
||||||
|
"schoolRange",
|
||||||
|
"nationalityRange",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel() {
|
||||||
|
this.peopelDetail = false;
|
||||||
|
},
|
||||||
|
looks(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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.peopelDetail = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
search() {
|
||||||
|
this.form = { ...this.form, ...this.afterParams };
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
//标签生成
|
||||||
|
labelgenerate(data = {}) {
|
||||||
|
let arrlist = [];
|
||||||
|
for (let key3 of this.arr) {
|
||||||
|
for (let key4 in data) {
|
||||||
|
if (key3 == key4) {
|
||||||
|
let a = data[key3];
|
||||||
|
arrlist.push(a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arrlist;
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.loads = true;
|
||||||
|
peopleList(this.form).then((res) => {
|
||||||
|
this.arrList = res.rows;
|
||||||
|
if (this.arrList.length > 0) {
|
||||||
|
this.arrList.forEach((item) => {
|
||||||
|
item.arrlist = this.labelgenerate(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.total = res.total;
|
||||||
|
this.loads = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
pagesChange(e) {
|
||||||
|
this.form.pageNum = e.pageNum;
|
||||||
|
this.form.pageSize = e.pageSize;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
myPagination,
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style lang="scss" scoped>
|
||||||
|
.noneStyle {
|
||||||
|
height: 490px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.center-content {
|
||||||
|
padding: 20px 30px;
|
||||||
|
}
|
||||||
|
::v-deep .margin-top td {
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular";
|
||||||
|
}
|
||||||
|
::v-deep .margin-top th {
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular";
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
::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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .titleInput .el-input__inner {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
::v-deep .titleInput .el-input-group__append {
|
||||||
|
background: #f8414d;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.titleInput {
|
||||||
|
width: 30%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.mainTag {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Regular";
|
||||||
|
& > div {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: rgba(248, 65, 77, 0.06);
|
||||||
|
padding: 3px 5px;
|
||||||
|
color: #e16a70;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.peopleContent {
|
||||||
|
height: 490px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: flex-start;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.subMan {
|
||||||
|
width: 49.2%;
|
||||||
|
height: 20.4%;
|
||||||
|
background: #fafafa;
|
||||||
|
border: 1px solid #f5edeb;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 17px;
|
||||||
|
padding: 15px;
|
||||||
|
.leftSub {
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.leftAvatar {
|
||||||
|
min-height: 100%;
|
||||||
|
width: 77px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.leftName {
|
||||||
|
margin-left: 15px;
|
||||||
|
& > div:nth-of-type(1) {
|
||||||
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
||||||
|
color: #4c4949;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
& > div:nth-of-type(2) {
|
||||||
|
margin-bottom: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rightSub {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.lookDetail {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 0px 15px 0px rgba(77, 161, 254, 0.17);
|
||||||
|
border-radius: 50%;
|
||||||
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
||||||
|
font-weight: 400;
|
||||||
|
color: #188ffe;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,402 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="字典名称" prop="dictType">
|
||||||
|
<el-select v-model="queryParams.dictType">
|
||||||
|
<el-option
|
||||||
|
v-for="item in typeOptions"
|
||||||
|
:key="item.dictId"
|
||||||
|
:label="item.dictName"
|
||||||
|
:value="item.dictType"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="字典标签" prop="dictLabel">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.dictLabel"
|
||||||
|
placeholder="请输入字典标签"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select v-model="queryParams.status" placeholder="数据状态" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<!-- <el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['system:dict:add']"
|
||||||
|
>新增</el-button>
|
||||||
|
</el-col> -->
|
||||||
|
<!-- <el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="single"
|
||||||
|
@click="handleUpdate"
|
||||||
|
v-hasPermi="['system:dict:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
</el-col> -->
|
||||||
|
<!-- <el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
:disabled="multiple"
|
||||||
|
@click="handleDelete"
|
||||||
|
v-hasPermi="['system:dict:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</el-col> -->
|
||||||
|
<!-- <el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleExport"
|
||||||
|
v-hasPermi="['system:dict:export']"
|
||||||
|
>导出</el-button>
|
||||||
|
</el-col> -->
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-close"
|
||||||
|
size="mini"
|
||||||
|
@click="handleClose"
|
||||||
|
>关闭</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="字典编码" align="center" prop="dictCode" />
|
||||||
|
<el-table-column label="字典标签" align="center" prop="dictLabel">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
|
||||||
|
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
||||||
|
<el-table-column label="字典排序" align="center" prop="dictSort" />
|
||||||
|
<el-table-column label="状态" align="center" prop="status">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['system:dict:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
<!-- <el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['system:dict:remove']"
|
||||||
|
>删除</el-button> -->
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 添加或修改参数配置对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="字典类型">
|
||||||
|
<el-input v-model="form.dictType" :disabled="true" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="数据标签" prop="dictLabel">
|
||||||
|
<el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="数据键值" prop="dictValue">
|
||||||
|
<el-input v-model="form.dictValue" placeholder="请输入数据键值" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="样式属性" prop="cssClass">
|
||||||
|
<el-input v-model="form.cssClass" placeholder="请输入样式属性" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="显示排序" prop="dictSort">
|
||||||
|
<el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="回显样式" prop="listClass">
|
||||||
|
<el-select v-model="form.listClass">
|
||||||
|
<el-option
|
||||||
|
v-for="item in listClassOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label + '(' + item.value + ')'"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio
|
||||||
|
v-for="dict in dict.type.sys_normal_disable"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>{{dict.label}}</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
|
||||||
|
import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Data",
|
||||||
|
dicts: ['sys_normal_disable'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 字典表格数据
|
||||||
|
dataList: [],
|
||||||
|
// 默认字典类型
|
||||||
|
defaultDictType: "",
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 数据标签回显样式
|
||||||
|
listClassOptions: [
|
||||||
|
{
|
||||||
|
value: "default",
|
||||||
|
label: "默认"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "primary",
|
||||||
|
label: "主要"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "success",
|
||||||
|
label: "成功"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "info",
|
||||||
|
label: "信息"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "warning",
|
||||||
|
label: "警告"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "danger",
|
||||||
|
label: "危险"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 类型数据字典
|
||||||
|
typeOptions: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
dictName: undefined,
|
||||||
|
dictType: undefined,
|
||||||
|
status: undefined
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
dictLabel: [
|
||||||
|
{ required: true, message: "数据标签不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
dictValue: [
|
||||||
|
{ required: true, message: "数据键值不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
dictSort: [
|
||||||
|
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const dictId = this.$route.params && this.$route.params.dictId;
|
||||||
|
this.getType(dictId);
|
||||||
|
this.getTypeList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询字典类型详细 */
|
||||||
|
getType(dictId) {
|
||||||
|
getType(dictId).then(response => {
|
||||||
|
this.queryParams.dictType = response.data.dictType;
|
||||||
|
this.defaultDictType = response.data.dictType;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 查询字典类型列表 */
|
||||||
|
getTypeList() {
|
||||||
|
getDictOptionselect().then(response => {
|
||||||
|
this.typeOptions = response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 查询字典数据列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listData(this.queryParams).then(response => {
|
||||||
|
this.dataList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
dictCode: undefined,
|
||||||
|
dictLabel: undefined,
|
||||||
|
dictValue: undefined,
|
||||||
|
cssClass: undefined,
|
||||||
|
listClass: 'default',
|
||||||
|
dictSort: 0,
|
||||||
|
status: "0",
|
||||||
|
remark: undefined
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 返回按钮操作 */
|
||||||
|
handleClose() {
|
||||||
|
const obj = { path: "/volunteer/userbq/dictGl" };
|
||||||
|
this.$tab.closeOpenPage(obj);
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.queryParams.dictType = this.defaultDictType;
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加字典数据";
|
||||||
|
this.form.dictType = this.queryParams.dictType;
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.dictCode)
|
||||||
|
this.single = selection.length!=1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const dictCode = row.dictCode || this.ids
|
||||||
|
getData(dictCode).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改字典数据";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm: function() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.dictCode != undefined) {
|
||||||
|
updateData(this.form).then(response => {
|
||||||
|
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addData(this.form).then(response => {
|
||||||
|
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const dictCodes = row.dictCode || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
|
||||||
|
return delData(dictCodes);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/dict/data/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `data_${new Date().getTime()}.xlsx`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue