Merge branch 'lijinlong' of http://39.101.188.84:8000/suzhou-jichuang-lanhai/volunteer-pc into dev
commit
26e6d01f63
@ -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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
import inviteView from '../../components/invite.vue'
|
||||
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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
import inviteView from '../../components/invite.vue'
|
||||
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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -1,9 +1,348 @@
|
||||
<template>
|
||||
<div class="app-container">标签字典管理</div>
|
||||
<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="dictName">
|
||||
<el-input
|
||||
v-model="queryParams.dictName"
|
||||
placeholder="请输入字典名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<el-input
|
||||
v-model="queryParams.dictType"
|
||||
placeholder="请输入字典类型"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="字典状态"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<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 label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</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="danger"
|
||||
plain
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="handleRefreshCache"
|
||||
v-hasPermi="['system:dict:remove']"
|
||||
>刷新缓存</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典编号" align="center" prop="dictId" />
|
||||
<el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<router-link :to="'/volunteer/zyzsjgl/zdgl/' + scope.row.dictId" class="link-type">
|
||||
<span>{{ scope.row.dictType }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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="字典名称" prop="dictName">
|
||||
<el-input v-model="form.dictName" placeholder="请输入字典名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<el-input v-model="form.dictType" placeholder="请输入字典类型" />
|
||||
</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>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
|
||||
import delgdata from "./data.vue"
|
||||
export default {
|
||||
name: "Dict",
|
||||
dicts: ['sys_normal_disable'],
|
||||
components:{delgdata},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 字典表格数据
|
||||
typeList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dictName: undefined,
|
||||
dictType: undefined,
|
||||
status: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
dictName: [
|
||||
{ required: true, message: "字典名称不能为空", trigger: "blur" }
|
||||
],
|
||||
dictType: [
|
||||
{ required: true, message: "字典类型不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询字典类型列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||
this.typeList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
dictId: undefined,
|
||||
dictName: undefined,
|
||||
dictType: undefined,
|
||||
status: "0",
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加字典类型";
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.dictId)
|
||||
this.single = selection.length!=1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const dictId = row.dictId || this.ids
|
||||
getType(dictId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改字典类型";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.dictId != undefined) {
|
||||
updateType(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addType(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const dictIds = row.dictId || this.ids;
|
||||
this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
|
||||
return delType(dictIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/dict/type/export', {
|
||||
...this.queryParams
|
||||
}, `type_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 刷新缓存按钮操作 */
|
||||
handleRefreshCache() {
|
||||
refreshCache().then(() => {
|
||||
this.$modal.msgSuccess("刷新成功");
|
||||
this.$store.dispatch('dict/cleanDict');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue