Commit a6bb6ef0 by Cat

zd 社团

parent 9d2af5d4
{ {
"name": "smart_campus", "lockfileVersion": 1
"lockfileVersion": 2,
"requires": true,
"packages": {}
} }
...@@ -42,6 +42,8 @@ ...@@ -42,6 +42,8 @@
"axios": "0.24.0", "axios": "0.24.0",
"clipboard": "2.0.8", "clipboard": "2.0.8",
"core-js": "3.25.2", "core-js": "3.25.2",
"dingtalk-h5-remote-debug": "^0.1.3",
"dingtalk-jsapi": "^3.0.28",
"echarts": "^4.9.0", "echarts": "^4.9.0",
"element-ui": "2.15.10", "element-ui": "2.15.10",
"exceljs": "^4.3.0", "exceljs": "^4.3.0",
......
// 社团活动记录
import request from '@/utils/request';
// 查询社团活动记录列表
export function getClubInfo(data) {
return request({
url: '/record/list',
method: 'get',
params: data
})
}
// 查询社团活动记录列表
export function listClubInfo(id) {
return request({
url: '/record/'+ id,
method: 'get',
})
}
// 修改社团活动记录
export function editClubInfo(data) {
return request({
url: '/record',
method: 'put',
data: data
})
}
// 新增社团活动记录
export function addClubInfo(data) {
return request({
url: '/record',
method: 'post',
data: data
})
}
// 删除社团活动记录
export function delClubInfo(id) {
return request({
url: '/record/'+ id,
method: 'delete'
})
}
// 获取全校教师(不分页)
export function getTeachers(data) {
return request({
url: '/school/teacher/getTeachers',
method: 'get',
params: data
})
}
\ No newline at end of file
// 社团成员管理
import request from '@/utils/request';
// 查询社团成员管理
export function getMemberInfo(query) {
return request({
url: '/member/list',
method: 'get',
params: query
})
}
// 查询社团成员管理信息列表
export function listMemberInfo(id) {
return request({
url: '/member/'+ id,
method: 'get',
})
}
// 修改社团成员管理
export function editMemberInfo(data) {
return request({
url: '/member',
method: 'put',
data: data
})
}
// 新增社团成员管理
export function addMemberInfo(data) {
return request({
url: '/member',
method: 'post',
data: data
})
}
// 删除社团成员管理
export function delMemberInfo(id) {
return request({
url: '/member/'+ id,
method: 'delete'
})
}
// 获取全校教师(不分页)
export function getTeachers(data) {
return request({
url: '/school/teacher/getTeachers',
method: 'get',
params: data
})
}
\ No newline at end of file
// 社团报名审核列表
import request from '@/utils/request';
// 查询社团报名审核列表
export function getsigninInfo(query) {
return request({
url: '/signin/list',
method: 'get',
params: query
})
}
// 获取社团报名审核详细信息
export function listsigninInfo(id) {
return request({
url: '/signin/'+ id,
method: 'get',
})
}
// 同意社团申请审批
export function allowsignin(data) {
return request({
url: '/signin/approve',
method: 'post',
data: data
})
}
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
:model="queryForm" :model="queryForm"
ref="queryForm" ref="queryForm"
size="small" size="small"
:inline="true" :inline="true"
label-width="80px" label-width="80px"
>
<el-form-item prop="name" label="社团名称">
<el-input v-model="queryForm.name" placeholder="社团名称"></el-input>
</el-form-item>
<el-form-item prop="teachers" label="指导教师">
<el-input
v-model="queryForm.teachers"
placeholder="指导教师"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
> >
<el-form-item prop="name" label="社团名称"> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
<el-input >重置</el-button
v-model="queryForm.name"
placeholder="社团名称"
></el-input>
</el-form-item>
<el-form-item prop="teachers" label="指导教师">
<el-input
v-model="queryForm.teachers"
placeholder="指导教师"
></el-input>
</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"
icon="el-icon-plus"
size="mini"
@click="handleAdd()"
>新增</el-button
>
</el-col>
</el-row>
<!-- 列表 -->
<div class="listBlock">
<div class="itemBlock" v-for="(task, index) in tasks" :key="index">
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div style="width: 50%">
<!-- 任务详细信息 -->
<div class="task-info">
<div class="task-name">
{{ task.intro }}
</div>
</div>
<div class="task-level">
<span> {{ task.teachers }}</span>
</div>
<div class="task-time">
<div>
{{ task.aim }}
</div>
</div>
</div>
<div style="width: 50%">
<!-- 成员人数 -->
<div class="task-count">
<div class="count">{{ task.num }}</div>
<div class="sun">成员人数</div>
</div>
</div>
</div>
<!-- 按钮 -->
<div class="task-buttons">
<el-button
style="margin-left: 10px"
size="mini"
type="danger"
round
@click="handleDelete(task)"
>删除
</el-button>
<el-button
type="success"
size="small"
round
@click="clubRegistrationReview(task.id, task.teachers)"
>社团报名审核</el-button
>
<el-button
type="info"
size="small"
round
@click="clubActivityRecord(task.id, task.teachers)"
>社团活动记录</el-button
>
<el-button
type="warning"
size="small"
round
@click="memberManagement(task.id, task.teachers)"
>成员管理
</el-button>
<el-button
class="purpleBtn"
size="small"
round
type="primary"
@click="communityStyle(task.id, task.teachers)"
>社团风采
</el-button>
<el-button
type="primary"
size="small"
round
@click="basicInformation(task.id, task.teachers)"
>基础信息管理
</el-button>
</div>
</div>
</div>
<!-- 新增/修改弹窗 -->
<el-dialog
:title="title"
:visible.sync="open"
width="50%"
append-to-body
> >
<el-form </el-form-item>
ref="form" </el-form>
:model="form" <el-row :gutter="10" class="mb8">
:rules="rules" <el-col :span="1.5">
label-width="110px" <el-button
> type="primary"
<div> icon="el-icon-plus"
<el-form-item label="社团名称" prop="name"> size="mini"
<el-input @click="handleAdd()"
v-model="form.name" >新增</el-button
placeholder="请输入社团名称" >
></el-input> </el-col>
</el-form-item> </el-row>
<el-form-item label="指导教师" prop="teachers"> <!-- 列表 -->
<el-select <div class="listBlock">
style="width: 100%" <div class="itemBlock" v-for="(task, index) in tasks" :key="index">
multiple <div
v-model="form.teachersId" style="
filterable display: flex;
placeholder="请选择指导教师" justify-content: space-between;
> align-items: center;
<el-option "
v-for="item in teacherInfo" >
:key="item.teacherCode" <div style="width: 50%">
:label="item.teacherName" <!-- 任务详细信息 -->
:value="item.teacherCode" <div class="task-info">
> <div class="task-name">
</el-option> {{ task.name }}
</el-select> </div>
</el-form-item> </div>
<el-form-item label="社团宗旨" prop="aim"> <div class="task-level">
<el-input <span> {{ task.teachers }}</span>
type="textarea" </div>
:rows="4" <div class="task-time">
v-model="form.aim" <div>
placeholder="请输入社团宗旨" {{ task.aim }}
></el-input> </div>
</el-form-item>
<el-form-item label="社团简介" prop="intro">
<el-input
type="textarea"
:rows="4"
v-model="form.intro"
placeholder="请输入社团简介"
></el-input>
</el-form-item>
</div>
</el-form>
<div style="text-align: center">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </div>
<div style="width: 50%">
<!-- 成员人数 -->
<div class="task-count">
<div class="count">{{ task.num }}</div>
<div class="sun">成员人数</div>
</div>
</div>
</div>
<!-- 按钮 -->
<div class="task-buttons">
<el-button
style="margin-left: 10px"
size="mini"
type="danger"
round
@click="handleDelete(task)"
>删除
</el-button>
<el-button
type="success"
size="small"
round
@click="clubRegistrationReview(task.id, task.teachers)"
>社团报名审核</el-button
>
<el-button
type="info"
size="small"
round
@click="clubActivityRecord(task.id)"
>社团活动记录</el-button
>
<el-button
type="warning"
size="small"
round
@click="memberManagement(task.id)"
>成员管理
</el-button>
<el-button
class="purpleBtn"
size="small"
round
type="primary"
@click="communityStyle(task.id, task.teachers)"
>社团风采
</el-button>
<el-button
type="primary"
size="small"
round
@click="basicInformation(task.id, task.teachers)"
>基础信息管理
</el-button>
</div>
</div>
</div> </div>
<!-- 新增/修改弹窗 -->
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<div>
<el-form-item label="社团名称" prop="name">
<el-input
v-model="form.name"
placeholder="请输入社团名称"
></el-input>
</el-form-item>
<el-form-item label="指导教师" prop="teachers">
<el-select
style="width: 100%"
multiple
v-model="form.teachers"
filterable
placeholder="请选择指导教师"
@change="changeTeacher"
>
<el-option
v-for="item in teacherInfo"
:key="item.teacherCode"
:label="item.teacherName"
:value="item.teacherCode"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="社团宗旨" prop="aim">
<el-input
type="textarea"
:rows="4"
v-model="form.aim"
placeholder="请输入社团宗旨"
></el-input>
</el-form-item>
<el-form-item label="社团简介" prop="intro">
<el-input
type="textarea"
:rows="4"
v-model="form.intro"
placeholder="请输入社团简介"
></el-input>
</el-form-item>
</div>
</el-form>
<div style="text-align: center">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template> </template>
<script> <script>
import { import {
getCommunityInfo, // 查询社团信息列表 getCommunityInfo, // 查询社团信息列表
listCommunityInfo, // 查询社团详细信息列表 listCommunityInfo, // 查询社团详细信息列表
editCommunityInfo, // 修改社团信息 editCommunityInfo, // 修改社团信息
addCommunityInfo, // 新增社团信息 addCommunityInfo, // 新增社团信息
delCommunityInfo, // 删除社团信息 delCommunityInfo, // 删除社团信息
getTeachers //获取全校教师 getTeachers, //获取全校教师
} from '@/api/smartSchool/MassOrganization/basicInfo' } from "@/api/smartSchool/MassOrganization/basicInfo";
export default { export default {
name: 'basicInformationManagement', name: "basicInformationManagement",
data() { data() {
return { return {
tasks: [1, 2, 3], tasks: [],
queryForm: { queryForm: {
name: '', name: "",
teachers: '' teachers: "",
}, },
form: { form: {
params: {}, params: {},
id: '', id: "",
createBy: '', createBy: "",
createTime: '', createTime: "",
updateBy: '', updateBy: "",
updateTime: '', updateTime: "",
delFlag: '', delFlag: "",
name: '', name: "",
teachers: [], teachers: [],
teachersId: '', teachersId: [],
aim: '', aim: "",
intro: '', intro: "",
num: null num: null,
}, },
//新增弹窗 //新增弹窗
open: false, open: false,
rules: {}, rules: {},
// 加载遮罩 // 加载遮罩
loading: true, loading: true,
// 记录条数 // 记录条数
total: 0, total: 0,
title: '', title: "",
// 详情 // 详情
look: false, look: false,
// 日期范围 // 日期范围
dateRange: [], dateRange: [],
teacherInfo: [] //教师下拉列表 teacherInfo: [], //教师下拉列表
} };
},
created() {
this.getList(), //查询列表
this.getTeachersInfo(); //教师下拉列表
},
methods: {
/** 获取列表数据 */
getList() {
getCommunityInfo(this.queryForm)
.then((response) => {
// console.log("response", response);
this.tasks = response.rows;
this.total = response.total;
})
.catch((err) => {
this.loading = false;
});
}, },
created() { // 教师下拉列表
this.getList(), //查询列表 getTeachersInfo() {
this.getTeachersInfo() //教师下拉列表 getTeachers({}).then((res) => {
// console.log("教师", res);
this.teacherInfo = res.rows;
});
}, },
methods: { // 查询教师姓名、id
/** 获取列表数据 */ changeTeacher(value) {
getList() { // console.log("value", value);
getCommunityInfo(this.form) this.teachersId = []; //初始化数据
.then((response) => { this.teachers = []; //初始化数据
this.tasks = response.rows for (let i = 0; i <= value.length - 1; i++) {
this.total = response.total this.teacherInfo.find((item) => {
}) //这里的options就是数据源
.catch((err) => { if (item.teacherCode == value[i]) {
this.loading = false this.teachersId.push(item.teacherCode); //这里的value我改成了id
}) this.teachers.push(item.teacherName); //这里的label我改成了roleName
}, }
// 教师下拉列表 });
getTeachersInfo() { }
getTeachers({}).then((res) => { // console.log("this.teachersId ", this.teachersId);
this.teacherInfo = res.rows // console.log("this.teachers ", this.teachers);
}) },
}, //基础信息管理
//基础信息管理 basicInformation(row) {
basicInformation(row) { // console.log('bbb', row)
// console.log('bbb', row) this.reset();
this.reset() listCommunityInfo(row).then((response) => {
listCommunityInfo(row).then((response) => { // console.log(response, '基础信息管理')
// console.log(response, '基础信息管理') this.form = response.data;
this.form = response.data // this.form.teachers = response.data.teachers
// this.form.teachers = response.data.teachers this.form.teachers = this.form.teachers.split(",");
this.form.teachers = this.form.teachers.split(',') // console.log(this.form.teachers, 'this.form.teachers')
// console.log(this.form.teachers, 'this.form.teachers') // console.log(this.form, 'this.form')
// console.log(this.form, 'this.form') this.open = true;
this.open = true this.title = "社团基础信息管理";
this.title = '社团基础信息管理' });
}) },
}, //新增按钮操作
//新增按钮操作 handleAdd() {
handleAdd() { this.reset();
this.reset() this.open = true;
this.open = true this.title = "新增社团基础信息";
this.title = '新增社团基础信息' },
}, // 社团报名审核
// 社团报名审核 clubRegistrationReview(id) {
clubRegistrationReview(id, teachers) { this.$router.push({
this.$router.push({ path: "/massOrganization/clubRegistrationReview",
path: '/massOrganization/clubRegistrationReview', query: {
query: { id,
id,
teachers
}
})
},
// 社团活动记录
clubActivityRecord(id, teachers) {
this.$router.push({
path: '/massOrganization/clubActivityRecord',
query: {
id,
teachers
}
})
},
//成员管理
memberManagement(id, teachers) {
this.$router.push({
path: '/massOrganization/memberManagement',
query: {
id,
teachers
}
})
},
//社团风采
communityStyle(id, teachers) {
this.$router.push({
path: '/massOrganization/communityStyle',
query: {
id,
teachers
}
})
},
// 取消按钮
cancel() {
this.open = false
// this.resetQuery();
this.reset()
},
// 搜索按钮
handleQuery() {
this.throttle(() => {
this.queryForm.pageNum = 1
this.getList()
})
}, },
/** 重置按钮操作 */ });
resetQuery() { },
this.dateRange = [] // 社团活动记录
this.resetForm('queryForm') clubActivityRecord(id) {
this.handleQuery() this.$router.push({
path: "/massOrganization/clubActivityRecord",
query: {
id,
}, },
// 提交表单 });
submitForm() { },
// const teachersId = this.form.teachersId //成员管理
const teachersId = this.form.teachersId memberManagement(id) {
this.form.teachers = this.$router.push({
teachersId == '' path: "/massOrganization/memberManagement",
? '' query: {
: this.teacherInfo.find( id,
(item) => item.teacherCode == teachersId
).teacherName
this.throttle(() => {
this.$refs['form'].validate((valid) => {
const techs = this.form.teachers.join(',')
if (valid) {
if (this.form.id != null) {
// 修改
const params = {
name: this.form.name,
teachers: techs,
teachersId: this.form.teachersId,
aim: this.form.aim,
intro: this.form.intro
}
console.log(params, 'params')
editCommunityInfo(params)
.then((response) => {
this.getList()
this.$message.success('修改成功')
this.open = false
})
.catch((err) => {})
} else {
// 新增
const params = {
name: this.form.name,
teachers: techs,
teachersId: this.form.teachersId,
aim: this.form.aim,
intro: this.form.intro
}
console.log(params, 'params')
addCommunityInfo(params)
.then((response) => {
this.getList()
this.$message.success('新增成功')
this.open = false
})
.catch((err) => {
// Handle error if necessary
})
}
}
})
})
}, },
// 删除按钮 });
handleDelete(row) { },
const ids = row.id || this.idEas //社团风采
this.$modal communityStyle(id, teachers) {
.confirm('是否确认删除?') // console.log("id, teachers", id, teachers);
.then(function () { this.$router.push({
return delCommunityInfo(ids) path: "/massOrganization/communityStyle",
}) query: {
.then(() => { id,
this.getList() teachers,
this.$modal.msgSuccess('删除成功')
})
.catch(() => {})
}, },
// 重置表单 });
reset() { },
// 重置对话框表单 // 取消按钮
this.form = { cancel() {
name: '', this.open = false;
teachers: '' this.reset();
} },
this.dateRange = [] // 搜索按钮
this.resetForm('form') handleQuery() {
this.throttle(() => {
this.queryForm.pageNum = 1;
this.getList();
});
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 提交表单
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
// 修改
const params = {
id: this.form.id,
name: this.form.name,
teachers: this.teachers.toString(),
teachersId: this.teachersId.toString(),
aim: this.form.aim,
intro: this.form.intro,
};
console.log(params, "params");
editCommunityInfo(params)
.then((response) => {
this.getList();
this.$message.success("修改成功");
this.open = false;
})
.catch((err) => {});
} else {
// 新增
const params = {
name: this.form.name,
teachers: this.teachers.toString(),
teachersId: this.teachersId.toString(),
aim: this.form.aim,
intro: this.form.intro,
};
// console.log(params, "params");
addCommunityInfo(params)
.then((response) => {
this.getList();
this.$message.success("新增成功");
this.open = false;
})
.catch((err) => {});
}
} }
} });
} },
// 删除按钮
handleDelete(row) {
const ids = row.id || this.idEas;
this.$modal
.confirm("是否确认删除?")
.then(function () {
return delCommunityInfo(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
// 重置表单
reset() {
// 重置对话框表单
this.form = {
name: "",
teachers: "",
};
this.dateRange = [];
this.resetForm("form");
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.listBlock { .listBlock {
//display: flex; //display: flex;
//flex-direction: row; //flex-direction: row;
//align-items: flex-start; //align-items: flex-start;
//flex-wrap: wrap; //flex-wrap: wrap;
width: 100%; width: 100%;
} }
.itemBlock { .itemBlock {
width: 99%; width: 99%;
padding: 15px 20px 5px 20px; padding: 15px 20px 5px 20px;
margin: 0 1.5% 1.5% 0; margin: 0 1.5% 1.5% 0;
border-radius: 20px; border-radius: 20px;
box-shadow: 1px 2px 12px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 12px 1px rgba(0, 0, 0, 0.1);
} }
.listBlock .itemBlock:nth-child(2n) { .listBlock .itemBlock:nth-child(2n) {
margin-right: 0px !important; margin-right: 0px !important;
} }
.purpleBtn { .purpleBtn {
color: #ffffff; color: #ffffff;
background-color: #b886f8; background-color: #b886f8;
border: 1px solid #b886f8; border: 1px solid #b886f8;
} }
.rowBtn { .rowBtn {
color: #ffffff; color: #ffffff;
background-color: #d3c1b1; background-color: #d3c1b1;
border: 1px solid #d3c1b1; border: 1px solid #d3c1b1;
} }
.task-name { .task-name {
color: #307def; color: #307def;
font-size: 45px; font-size: 45px;
font-weight: 500; font-weight: 500;
text-align: left; text-align: left;
} }
.task-level { .task-level {
margin-bottom: 6px; margin-bottom: 6px;
color: rgba(108, 108, 108, 1); color: rgba(108, 108, 108, 1);
font-size: 13px; font-size: 13px;
text-align: left; text-align: left;
} }
.task-level > span { .task-level > span {
margin-right: 25px; margin-right: 25px;
} }
.task-time { .task-time {
color: rgba(108, 108, 108, 1); color: rgba(108, 108, 108, 1);
font-size: 13px; font-size: 13px;
text-align: left; text-align: left;
margin-bottom: -50px; margin-bottom: -50px;
} }
.task-info { .task-info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 15px; padding-bottom: 15px;
} }
.task-count { .task-count {
text-align: center; text-align: center;
padding-left: 60%; padding-left: 60%;
} }
.task-count > .count { .task-count > .count {
font-weight: bold; font-weight: bold;
color: #307def; color: #307def;
font-size: 45px; font-size: 45px;
} }
.task-count > .sun { .task-count > .sun {
color: rgba(16, 16, 16, 1); color: rgba(16, 16, 16, 1);
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.task-buttons { .task-buttons {
text-align: left; text-align: left;
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.task-buttons button { .task-buttons button {
margin-bottom: 10px; margin-bottom: 10px;
} }
.el-card { .el-card {
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form
<el-form-item label="标题" prop="picName"> :model="queryParams"
<el-input v-model="queryParams.picName" placeholder="请输入标题" clearable/> ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="标题" prop="theme">
<el-input
v-model="queryParams.theme"
placeholder="请输入标题"
clearable
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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-item>
</el-form> </el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增 <el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">修改 <el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5">
<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
</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:pic:export']">导出-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
</el-row> </el-row>
<el-table v-loading="loading" ref="table" :data="picList" @selection-change="handleSelectionChange"> <el-table
<el-table-column type="selection" width="55" align="center"/> v-loading="loading"
<el-table-column label="序号" align="center" prop="seqencing" width="80"/> ref="table"
<el-table-column label="活动主题" align="center" prop="picName"/> :data="picList"
<el-table-column label="活动开始时间" align="center" prop="picName"/> @selection-change="handleSelectionChange"
<el-table-column label="活动结束时间" align="center" prop="picName"/> >
<el-table-column label="活动负责人" align="center" prop="picName"/> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="所属社团" align="center" prop="picName"/> <el-table-column label="序号" align="center" type="index" width="80" />
<el-table-column label="备注" align="center" prop="picName"/> <el-table-column label="活动主题" align="center" prop="theme" />
<el-table-column label="附件" align="center" prop="picName"> <el-table-column label="活动开始时间" align="center" prop="beginTime" />
<el-table-column label="活动结束时间" align="center" prop="endTime" />
<el-table-column label="活动负责人" align="center" prop="fzr" />
<el-table-column label="所属社团" align="center" prop="orgName" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="附件" align="center" prop="file">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <ListImage :image-url="pev+scope.row.picUrl"></ListImage>--> <el-image style="width: 100px; height: 100px" :src="scope.row.file">
<!-- previewSrcList 开启预览大图的功能。-->
<el-image
style="width: 100px; height: 100px"
:src="scope.row.url"
:preview-src-list="srcList">
</el-image> </el-image>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <!-- <el-table-column label="是否发布" align="center" prop="isfb">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑 <el-switch
v-model="scope.row.isShow"
active-value="1"
inactive-value="0"
@change="handleIsShow(scope.row)"
></el-switch>
</template>
</el-table-column> -->
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<div>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑
</el-button> </el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleCheck(scope.row)">查看 <el-button
</el-button> size="mini"
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除 type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除
</el-button> </el-button>
</div>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleCheck(scope.row)"
>查看
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" <pagination
@pagination="getList"/> v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改社团主题对话框 --> <!-- 添加或编辑社团主题对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="90px" style="width: 80%; margin: auto"> <el-form
<el-form-item label="活动主题"> ref="form"
<el-input v-model="form.name"></el-input> :model="form"
</el-form-item> :rules="rules"
<el-form-item label="活动开始时间"> label-width="120px"
<el-date-picker style="width: 80%; margin: auto"
v-model="form.value1" >
type="datetime" <el-row>
placeholder="选择活动开始时间"> <el-col :span="24">
</el-date-picker> <el-form-item label="风采主题:" prop="theme">
</el-form-item> <el-input
<el-form-item label="活动结束时间"> v-model="form.theme"
<el-date-picker placeholder="请输入"
v-model="form.value1" style="width: 100%"
type="datetime" />
placeholder="选择活动结束时间"> </el-form-item>
</el-date-picker> </el-col>
</el-form-item> </el-row>
<el-form-item label="活动负责人"> <el-row>
<el-select v-model="value" filterable placeholder="请选择活动负责人"> <el-col :span="24">
<el-option <el-form-item label="活动开始时间:" prop="beginTime">
v-for="item in activeOptions" <el-date-picker
:key="item.value" v-model="form.beginTime"
:label="item.label" type="date"
:value="item.value"> placeholder="选择活动开始时间"
</el-option> style="width: 100%"
</el-select> >
</el-form-item> </el-date-picker>
<el-form-item label="所属社团"> </el-form-item>
<el-input v-model="form.name"></el-input> </el-col>
</el-form-item> </el-row>
<el-form-item prop="gardenEmblem" <el-row>
style="display: flex; text-align: center; justify-content: center; transform: translateX(-30px)"> <el-col :span="24">
<!-- <el-upload v-loading="uploadLoading" class="avatar-uploader" action="#" accept="image/*"--> <el-form-item label="活动结束时间:" prop="endTime">
<!-- :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-remove="handleRemove"--> <el-date-picker
<!-- :http-request="uploadImage" :limit="1" >--> v-model="form.endTime"
<el-upload :disabled="check == true ? true : false" v-loading="uploadLoading" class="avatar-uploader" action="#" accept="image/*" type="date"
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" placeholder="选择活动结束时间"
:limit="1" > style="width: 100%"
<img v-if="imageUrl" :src="imageUrl" class="avatar"/> >
<i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-date-picker>
</el-upload> </el-form-item>
</el-form-item> </el-col>
</el-row>
<el-row :gutter="20"> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="风采主题:" prop="picName"> <el-form-item label="活动负责人:" prop="fzr">
<el-input :readonly="check == true ? true : false" v-model="form.picName" placeholder="请输入风采主题" style="width: 100%"/> <el-input
v-model="form.fzr"
placeholder="请输入"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="所属社团:" prop="orgName">
<el-input
v-model="form.orgName"
placeholder="请输入"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注:" prop="remark">
<el-input
v-model="form.remark"
placeholder="请输入"
style="width: 100%"
type="textarea"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
prop="file"
style="
display: flex;
text-align: center;
justify-content: center;
transform: translateX(-30px);
"
>
<el-upload
v-loading="uploadLoading"
class="avatar-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="uploadImage"
>
<img v-if="form.file" :src="form.file" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="排序:" prop="seqencing">-->
<!-- <el-input-number v-model="form.seqencing" controls-position="right" style="width: 100%"-->
<!-- :min="1"></el-input-number>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -135,32 +239,40 @@ ...@@ -135,32 +239,40 @@
</template> </template>
<script> <script>
import {listPic, getPic, delPic, addPic, updatePic, updateState} from '@/api/smartSchool/schoolManage/introduce/pic' import picAvatar from "@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar";
import picAvatar from '@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar' import { changeUserStatus } from "@/api/system/user";
import {changeUserStatus} from '@/api/system/user' import { uploadImage as commonUpload } from "@/api/common";
import {uploadImage as commonUpload} from '@/api/common' import { ExportType, TEXT_SIZE } from "@/enums/common";
import {ExportType, TEXT_SIZE} from '@/enums/common'
import {
getClubInfo, // 查询社团活动记录列表
listClubInfo, // 查询社团活动记录列表
editClubInfo, // 编辑社团活动记录
addClubInfo, // 新增社团活动记录
delClubInfo, // 删除社团活动记录
} from "@/api/smartSchool/MassOrganization/clubActivities";
export default { export default {
name: 'clubActivityRecord', name: "communityStyle",
components: {picAvatar}, components: { picAvatar },
data() { data() {
return { return {
pev: process.env.VUE_APP_BASE_API, pev: process.env.VUE_APP_BASE_API,
// 输入框字数限制 // 输入框字数限制
TEXT_SIZE, TEXT_SIZE,
srcList: [],
//是否上传的院徽 //是否上传的院徽
isUploadPic: false, isUploadPic: false,
//照片是否删除 //照片是否删除
options: [ options: [
{ {
value: 0, value: 0,
label: '否' label: "否",
}, },
{ {
value: 1, value: 1,
label: '是' label: "是",
} },
], ],
//获取子组件传来的信息 //获取子组件传来的信息
pic: [], pic: [],
...@@ -183,97 +295,111 @@ export default { ...@@ -183,97 +295,111 @@ export default {
// 园区照片表格数据 // 园区照片表格数据
picList: [], picList: [],
// 弹出层标题 // 弹出层标题
title: '', title: "",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
picName: null cis: "",
theme: "",
}, },
// 表单参数 // 表单参数
form: {}, form: {
theme: "",
beginTime: "",
endTime: "",
fzr: "",
id: "",
orgName: "",
file: "",
remark: "",
},
// 表单校验 // 表单校验
rules: { rules: {
picName: [{required: true, message: '请输入相片名称', trigger: 'blur'}], theme: [
seqencing: [{required: true, message: '请输入排序', trigger: 'blur'}], {
remark: [{max: TEXT_SIZE, message: '备注信息在0到200字之间', trigger: 'blur'}] required: true,
message: "请输入相片名称",
trigger: "blur",
},
],
seqencing: [{ required: true, message: "请输入排序", trigger: "blur" }],
remark: [
{
max: TEXT_SIZE,
message: "备注信息在0到200字之间",
trigger: "blur",
},
],
}, },
//设置table列隐藏与显示 //设置table列隐藏与显示
columns: [ columns: [
{key: 0, label: `园区照片`, visible: true}, { key: 0, label: `园区照片`, visible: true },
{key: 1, label: `相片名称`, visible: true}, { key: 1, label: `相片名称`, visible: true },
// {key: 2, label: `相片路径`, visible: true}, // {key: 2, label: `相片路径`, visible: true},
{key: 2, label: `排序`, visible: true}, { key: 2, label: `排序`, visible: true },
{key: 3, label: `备注`, visible: true}, { key: 3, label: `备注`, visible: true },
{key: 4, label: `创建者`, visible: true}, { key: 4, label: `创建者`, visible: true },
{key: 5, label: `创建时间`, visible: true}, { key: 5, label: `创建时间`, visible: true },
{key: 6, label: `操作`, visible: true} { key: 6, label: `操作`, visible: true },
], ],
// 作为临时图片展示 // 作为临时图片展示
tempImage: '', tempImage: "",
// 导出选项 // 导出选项
exportOptions: { exportOptions: {
title: '选择导出类别', title: "选择导出类别",
open: false open: false,
}, },
//查看状态 //查看状态
check:false, check: false,
//活动负责人下拉框 file: "",
activeOptions:[{ };
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}]
}
}, },
created() { created() {
this.getList() this.getList();
}, },
watch: { watch: {
pic: { pic: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
console.log('watch----oldValue', oldValue) console.log("watch----oldValue", oldValue);
console.log('watch----newValue', newValue) console.log("watch----newValue", newValue);
this.isUploadPic = newValue[3] this.isUploadPic = newValue[3];
} },
} },
}, },
methods: { methods: {
//是否删除 选中值发生变化时id处理函数 //是否删除 选中值发生变化时id处理函数
selectChangeHandler(value) { selectChangeHandler(value) {
this.form.isShow = value this.form.isShow = value;
}, },
/** 查询园区照片列表 */ /** 查询列表 */
getList() { getList() {
this.loading = true this.loading = true;
this.picList = [] this.picList = [];
listPic(this.queryParams).then(response => { const params = {
this.picList = response.rows cid: this.$route.query.id,
this.total = response.total theme: this.queryParams.theme,
this.loading = false };
}) getClubInfo(params).then((response) => {
// console.log("response", response);
this.picList = response.rows;
this.picList.file = response.rows.file;
// console.log(this.picList.file);
this.total = response.total;
this.loading = false;
});
}, },
//获取图片信息 //获取图片信息
getSchoolInfoPic(val) { getSchoolInfoPic(val) {
this.pic = val this.pic = val;
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false this.open = false;
this.reset() this.reset();
}, },
// 表单重置 // 表单重置
reset() { reset() {
...@@ -285,177 +411,204 @@ export default { ...@@ -285,177 +411,204 @@ export default {
updateBy: null, updateBy: null,
updateTime: null, updateTime: null,
delFlag: null, delFlag: null,
picName: null, theme: null,
picUrl: null, picUrl: null,
seqencing: null, seqencing: null,
isShow: 0 isShow: 0,
} };
this.imageUrl = '' this.imageUrl = "";
this.resetForm('form') this.resetForm("form");
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.throttle(() => { this.throttle(() => {
this.queryParams.pageNum = 1 this.queryParams.pageNum = 1;
this.getList() this.getList();
}) });
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm('queryForm') this.resetForm("queryForm");
this.handleQuery() this.handleQuery();
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.id) this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1 this.single = selection.length !== 1;
this.multiple = !selection.length this.multiple = !selection.length;
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.check = false this.check = false;
this.reset() this.reset();
this.open = true this.open = true;
this.title = '新增社团风采' this.title = "新增社团活动记录";
}, },
/** 修改按钮操作 */ /** 编辑按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset() this.reset();
const ids = row.id || this.ids const ids = row.id || this.ids;
listClubInfo(ids).then((response) => {
getPic(ids).then(response => { this.form = response.data;
this.form = response.data this.imageUrl = this.pev + this.form.picUrl;
this.imageUrl = this.pev + this.form.picUrl console.log(this.imageUrl, "this.imageUrl");
this.open = true this.open = true;
this.title = '修改园区照片' this.title = "编辑社团活动记录";
}) });
}, },
/** 查看按钮操作 */ /** 查看按钮操作 */
handleCheck(row){ handleCheck(row) {
this.check = true this.check = true;
this.open = true this.open = true;
this.title = '查看社团风采' const ids = row.id || this.ids;
listClubInfo(ids).then((response) => {
this.form = response.data;
this.form.file = response.data.file;
// console.log(this.form.file);
this.open = true;
});
this.title = "查看社团活动记录";
}, },
// 上传成功回调 // 上传成功回调
handleAvatarSuccess(res, file) { handleAvatarSuccess(res, file) {
this.imageUrl = res.data.url this.imageUrl = res.data.url;
console.log(file) console.log(file);
this.commonUpload(file) this.commonUpload(file);
}, },
// 上传前格式和图片大小限制 // 上传前格式和图片大小限制
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png' const type =
const isLt2M = file.size / 1024 / 1024 < 2 file.type === "image/jpeg" ||
"image/jpg" ||
"image/webp" ||
"image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!type) { if (!type) {
this.$message.error('图片格式不正确!(只能包含jpg,png,webp,JPEG)') this.$message.error("图片格式不正确!(只能包含jpg,png,webp,JPEG)");
} }
if (!isLt2M) { if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!') this.$message.error("上传图片大小不能超过 2MB!");
} }
return type && isLt2M return type && isLt2M;
}, },
//删除图片 //删除图片
handleRemove(file, fileList){ handleRemove(file, fileList) {
this.imageUrl = '' this.imageUrl = "";
}, },
// 上传图片 // 上传图片
uploadImage(file) { uploadImage(file) {
const fileData = file.file const fileData = file.file;
const formData = new FormData() const formData = new FormData();
formData.append('file', fileData) formData.append("file", fileData);
this.uploadLoading = true this.uploadLoading = true;
commonUpload(formData) commonUpload(formData)
.then(response => { .then((response) => {
this.uploadLoading = false this.uploadLoading = false;
this.$modal.msgSuccess('上传成功') this.$modal.msgSuccess("上传成功");
this.imageUrl = this.pev + response.url this.imageUrl = this.pev + response.url;
// this.form.picUrl = process.env.VUE_APP_BASE_API + response.url // this.form.picUrl = process.env.VUE_APP_BASE_API + response.url
this.form.picUrl = response.url this.form.file = this.pev + response.url;
}) console.log(this.form.picUrl, "this.form.picUrl");
.catch(error => {
this.uploadLoading = false
}) })
.catch((error) => {
this.uploadLoading = false;
});
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs['form'].validate(valid => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
this.$modal.loading('正在上传数据,请稍等...')
if (this.form.id != null) { if (this.form.id != null) {
updatePic({ // 编辑
...this.form const params = {
}) id: this.form.id,
.then(response => { theme: this.form.theme,
this.$modal.closeLoading() file: this.form.file,
this.$modal.msgSuccess('修改成功') };
this.open = false console.log(params, "params");
this.getList() editClubInfo(params)
}) .then((response) => {
.catch(error => { this.getList();
this.$modal.closeLoading() this.$message.success("编辑成功");
this.open = false;
}) })
.catch((err) => {});
} else { } else {
addPic({ // 新增
...this.form, const params = {
isShow: '0' cid: this.$route.query.id,
}) theme: this.form.theme,
.then(response => { beginTime: this.form.beginTime,
this.$modal.closeLoading() endTime: this.form.endTime,
this.$modal.msgSuccess('新增成功') fzr: this.form.fzr,
this.open = false orgName: this.form.orgName,
this.getList() file: this.form.file,
}) remark: this.form.remark,
.catch(error => { };
this.$modal.closeLoading() console.log(params, "params");
addClubInfo(params)
.then((response) => {
this.getList();
this.$message.success("新增成功");
this.open = false;
}) })
.catch((err) => {});
} }
} }
}) });
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids const ids = row.id || this.ids;
if (ids) { if (ids) {
this.$modal this.$modal
.confirm(`是否确认删除选中的${Object.hasOwnProperty.call(ids, 'length') ? ids.length : 1}条数据?`) .confirm(
`是否确认删除选中的${
Object.hasOwnProperty.call(ids, "length") ? ids.length : 1
}条数据?`
)
.then(() => { .then(() => {
this.$modal.loading('正在处理数据,请稍等...') this.$modal.loading("正在处理数据,请稍等...");
return delPic(ids) return delClubInfo(ids);
}) })
.then(() => { .then(() => {
this.$modal.closeLoading() this.$modal.closeLoading();
this.getList() this.getList();
this.$modal.msgSuccess('删除成功') this.$modal.msgSuccess("删除成功");
}) })
.catch(() => { .catch(() => {
this.$modal.closeLoading() this.$modal.closeLoading();
}) });
} }
}, },
/** 是否发布 */ /** 是否发布 */
handleIsShow(row) { handleIsShow(row) {
console.log(row);
const data = {
id: row.id,
};
this.$modal this.$modal
.confirm(row.isShow === '1' ? '是否确认显示为轮播图?' : '是否取消显示为轮播图?') .confirm()
.then(() => { .then(() => {
this.$modal.loading('正在修改状态,请稍等...') this.$modal.loading("正在编辑状态,请稍等...");
updateState(row.id, row.isShow) isCommunityFb(data)
.then(response => { .then((response) => {
this.$modal.closeLoading() this.$modal.closeLoading();
this.$modal.msgSuccess('修改成功') this.$modal.msgSuccess("编辑成功");
})
.catch(error => {
this.$modal.closeLoading()
row.isShow = row.isShow === '0' ? '1' : '0'
}) })
.catch((error) => {
this.$modal.closeLoading();
});
}) })
.catch(() => { .catch(() => {
row.isShow = row.isShow === '0' ? '1' : '0' // 取消操作时的逻辑
}) });
} },
} },
} };
</script> </script>
<style scoped> <style scoped>
.avatar, .avatar,
......
<template> <template>
<div> <div>
<!-- 搜索条件 --> <!-- 搜索条件 -->
<el-form <el-form
:model="queryForm" :model="queryParams"
ref="queryForm" ref="queryForm"
size="small" size="small"
:inline="true" :inline="true"
label-width="68px" label-width="68px"
> >
<el-form-item label="标题"> <el-form-item label="姓名">
<el-input <el-input
v-model="queryForm.name" v-model="queryParams.name"
placeholder="请输入" placeholder="请输入"
clearable clearable
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="getList"
>搜索</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<!-- 表格 --> <el-form-item>
<el-button
<el-table border ref="table" :data="tableData"> type="primary"
<el-table-column icon="el-icon-search"
align="center" size="mini"
type="index" @click="handleQuery"
label="序号" >搜索</el-button
width="55" >
/> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
<el-table-column align="center" prop="name" label="姓名" /> >重置</el-button
<el-table-column align="center" prop="name" label="性别" /> >
<el-table-column align="center" prop="name" label="级别" /> </el-form-item>
<el-table-column align="center" prop="name" label="班级" /> </el-form>
<el-table-column align="center" prop="name" label="兴趣爱好" />
<el-table-column align="center" prop="name" label="联系电话" />
<el-table-column align="center" prop="name" label="申请理由" />
<el-table-column align="center" prop="name" label="审核状态" />
<el-table-column align="center" fixed="right" label="操作">
<template slot-scope="scope">
<el-button
@click="handleAgree(scope.row)"
type="text"
size="small"
>同意</el-button
>
<el-button <!-- 表格 -->
@click="handleDisagree(scope.row)" <el-table border ref="table" :data="tableData">
type="text" <el-table-column align="center" type="index" label="序号" width="55" />
size="small" <el-table-column align="center" prop="name" label="姓名" />
>不同意</el-button <el-table-column align="center" prop="sex" label="性别" />
> <el-table-column align="center" prop="grade" label="年级" />
<el-button <el-table-column align="center" prop="classes" label="班级" />
@click="handleDelete(scope.row)" <el-table-column align="center" prop="hobby" label="兴趣爱好" />
type="text" <el-table-column align="center" prop="phone" label="联系电话" />
size="small" <el-table-column align="center" prop="reason" label="申请理由" />
>查看</el-button <el-table-column align="center" prop="status" label="审核状态">
> <template slot-scope="{ row }">
</template> {{
</el-table-column> row.status == 1
</el-table> ? "未审核"
: row.flg == 2
? "同意"
: row.status == 3
? "不同意"
: ""
}}
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作">
<template slot-scope="scope">
<div v-if="scope.row.status === '1'">
<el-button @click="handleAgree(scope.row)" type="text" size="small"
>同意</el-button
>
<el-button
@click="handleDisagree(scope.row)"
type="text"
size="small"
>不同意</el-button
>
</div>
<el-button @click="handleDelete(scope.row)" type="text" size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 弹窗 --> <!-- 弹窗 -->
<el-dialog <el-dialog
:title="title" :title="title"
:visible.sync="dialogTableVisible" :visible.sync="dialogTableVisible"
width="66%" width="66%"
show-close show-close
> >
<el-form :model="form" ref="form" size="small" label-width="108px"> <el-form :model="form" ref="form" size="small" label-width="108px">
<el-row> <el-row>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="姓名"> <el-form-item label="姓名">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="性别"> <el-form-item label="性别">
<el-input v-model="form.name"></el-input> <el-input v-model="form.sex"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="级部"> <el-form-item label="级部">
<el-input v-model="form.name"></el-input> <el-input v-model="form.grade"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="班级"> <el-form-item label="班级">
<el-input v-model="form.name"></el-input> <el-input v-model="form.classes"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="兴趣爱好"> <el-form-item label="兴趣爱好">
<el-input v-model="form.name"></el-input> <el-input v-model="form.hobby"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="联系电话"> <el-form-item label="联系电话">
<el-input v-model="form.name"></el-input> <el-input v-model="form.phone"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="申请理由"> <el-form-item label="申请理由">
<el-input v-model="form.name"></el-input> <el-input v-model="form.reason"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="审核状态"> <el-form-item label="审核状态">
<el-input v-model="form.name"></el-input> <el-input v-model="form.status"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-dialog> </el-dialog>
<!-- 分页 --> <!-- 分页 -->
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryForm.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryForm.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
</div> </div>
</template> </template>
<script> <script>
import {
getsigninInfo, // 查询社团报名审核列表
listsigninInfo, // 获取社团报名审核详细信息
allowsignin, // 同意社团申请审批
} from "@/api/smartSchool/MassOrganization/singninInfo";
export default { export default {
name: 'clubRegistrationReview', name: "clubRegistrationReview",
data() { data() {
return { return {
queryForm: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
name: '' name: "",
}, classes: "",
//表格数据 grade: "",
tableData: [ },
{ //表格数据
name: '1' tableData: [],
}, title: "",
{ // 弹窗
name: '2222' form: {
}, id: "",
{ name: "",
name: '33', sex: "",
cardid: "",
grade: "",
classes: "",
orgName: "",
orgPosition: "",
phone: "",
status: "",
},
// 总计
total: 0,
single: false, // 添加 single 属性并设置初始值
multiple: false,
dialogTableVisible: false,
};
},
mounted() {
this.getList();
},
methods: {
// 搜索
getList() {
const params = {
cid: this.$route.query.id,
name: this.queryParams.name,
grade: this.queryParams.grade,
classes: this.queryParams.classes,
};
getsigninInfo(params).then((response) => {
this.tableData = response.rows;
this.total = response.total;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.throttle(() => {
this.queryParams.pageNum = 1;
this.getList();
});
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
name: "",
};
this.resetForm("queryForm");
this.handleQuery();
},
// 表单重置
reset() {
this.form = {};
this.resetForm("form");
},
// 查看
handleDelete(row) {
this.reset();
const ids = row.id || this.ids;
listsigninInfo(ids).then((response) => {
// console.log("response", response);
this.form = response.data;
this.dialogTableVisible = true;
this.title = "社团报名审核";
});
},
// 同意
handleAgree(row) {
this.$confirm("确定同意吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.reset();
const params = {
id: row.id,
status: "2",
};
console.log(params);
allowsignin(params).then((response) => {
console.log("response", response);
this.$modal.msgSuccess("操作成功");
this.getList();
this.title = "社团申请审批";
});
});
},
hasChildren: true // 不同意
}, handleDisagree(row) {
{ this.$confirm("确定不同意吗?", "提示", {
name: '444' confirmButtonText: "确定",
} cancelButtonText: "取消",
], type: "warning",
title: '', }).then(() => {
// 弹窗 this.reset();
form: {}, const params = {
// 总计 id: row.id,
total: 0, status: "3",
single: false, // 添加 single 属性并设置初始值 };
multiple: false, console.log(params);
dialogTableVisible: false allowsignin(params).then((response) => {
} console.log("response", response);
this.$modal.msgSuccess("操作成功");
this.getList();
this.title = "社团申请审批";
});
});
}, },
methods: { // 多选框选中数据
// 搜索 handleSelectionChange(selection) {
getList() {}, this.ids = selection.map((item) => item.id);
// 重置 this.single = selection.length !== 1;
resetQuery() {}, this.multiple = !selection.length;
// 查看 },
handleDelete() { },
this.dialogTableVisible = true };
this.title = '社团报名审核'
},
// 同意
handleAgree() {},
// 同意
handleDisagree() {},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-form { .el-form {
margin-top: 15px; margin-top: 15px;
margin-left: 10px; margin-left: 10px;
} }
.el-table { .el-table {
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryForm" ref="queryForm"
size="small" size="small"
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
label-width="68px" label-width="68px"
>
<el-form-item label="标题" prop="theme">
<el-input
v-model="queryParams.theme"
placeholder="请输入标题"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
> >
<el-form-item label="标题" prop="theme"> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
<el-input >重置</el-button
v-model="queryParams.theme" >
placeholder="请输入标题" </el-form-item>
clearable </el-form>
/>
</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-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary" type="primary"
icon="el-icon-plus" icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
>新增 >新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="danger" type="danger"
icon="el-icon-delete" icon="el-icon-delete"
size="mini" size="mini"
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
>删除 >删除
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-table <el-table
v-loading="loading" v-loading="loading"
ref="table" ref="table"
:data="picList" :data="picList"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column <el-table-column label="序号" align="center" type="index" width="80" />
label="序号" <el-table-column label="风采主题" align="center" prop="theme" />
align="center" <el-table-column label="附件" align="center" prop="file">
prop="seqencing" <template slot-scope="scope">
width="80" <el-image style="width: 100px; height: 100px" :src="scope.row.file">
/> </el-image>
<el-table-column label="风采主题" align="center" prop="theme" /> </template>
<el-table-column label="附件" align="center" prop="theme"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="是否发布" align="center" prop="isfb">
<el-image <template slot-scope="scope">
style="width: 100px; height: 100px" <el-switch
:src="scope.row.url" v-model="scope.row.isShow"
:preview-src-list="srcList" active-value="1"
> inactive-value="0"
</el-image> @change="handleIsShow(scope.row)"
</template> ></el-switch>
</el-table-column> </template>
<el-table-column label="是否发布" align="center" prop="isShow"> </el-table-column>
<template slot-scope="scope"> <el-table-column
<el-switch label="操作"
v-model="scope.row.isShow" align="center"
active-value="1" class-name="small-padding fixed-width"
inactive-value="0" >
@change="handleIsShow(scope.row)" <template slot-scope="scope">
></el-switch> <!-- 未发布可以修改删除 -->
</template> <div>
</el-table-column> <el-button
<el-table-column size="mini"
label="操作" type="text"
align="center" icon="el-icon-edit"
class-name="small-padding fixed-width" @click="handleUpdate(scope.row)"
v-if="columns[6].visible" >修改
> </el-button>
<template slot-scope="scope"> <el-button
<!-- 未发布可以修改删除 --> size="mini"
<div> type="text"
<el-button icon="el-icon-delete"
size="mini" @click="handleDelete(scope.row)"
type="text" >删除
icon="el-icon-edit" </el-button>
@click="handleUpdate(scope.row)" </div>
>修改 <el-button
</el-button> size="mini"
<el-button type="text"
size="mini" icon="el-icon-edit"
type="text" @click="handleCheck(scope.row)"
icon="el-icon-delete" >查看
@click="handleDelete(scope.row)" </el-button>
>删除 </template>
</el-button> </el-table-column>
</div> </el-table>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleCheck(scope.row)"
>查看
</el-button>
</template>
</el-table-column>
</el-table>
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改社团主题对话框 --> <!-- 添加或修改社团主题对话框 -->
<el-dialog <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
:title="title" <el-form
:visible.sync="open" ref="form"
width="900px" :model="form"
append-to-body :rules="rules"
label-width="90px"
style="width: 80%; margin: auto"
>
<el-form-item
prop="file"
style="
display: flex;
text-align: center;
justify-content: center;
transform: translateX(-30px);
"
> >
<el-form <el-upload
ref="form" v-loading="uploadLoading"
:model="form" class="avatar-uploader"
:rules="rules" action="#"
label-width="90px" accept="image/*"
style="width: 80%; margin: auto" :show-file-list="false"
> :on-success="handleAvatarSuccess"
<el-form-item :before-upload="beforeAvatarUpload"
prop="gardenEmblem" :http-request="uploadImage"
style=" >
display: flex; <img v-if="form.file" :src="form.file" class="avatar" />
text-align: center; <i v-else class="el-icon-plus avatar-uploader-icon"></i>
justify-content: center; </el-upload>
transform: translateX(-30px); </el-form-item>
"
>
<!-- <el-upload v-loading="uploadLoading" class="avatar-uploader" action="#" accept="image/*"-->
<!-- :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-remove="handleRemove"-->
<!-- :http-request="uploadImage" :limit="1" >-->
<el-upload
:disabled="check == true ? true : false"
v-loading="uploadLoading"
class="avatar-uploader"
action="#"
accept="image/*"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:limit="1"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="风采主题:" prop="theme"> <el-form-item label="风采主题:" prop="theme">
<el-input <el-input
:readonly="check == true ? true : false" :readonly="check == true ? true : false"
v-model="form.theme" v-model="form.theme"
placeholder="请输入风采主题" placeholder="请输入风采主题"
style="width: 100%" style="width: 100%"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import picAvatar from "@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar";
import { changeUserStatus } from "@/api/system/user";
import { uploadImage as commonUpload } from "@/api/common";
import { ExportType, TEXT_SIZE } from "@/enums/common";
import { import {
listPic, getCommunityInfo, // 查询社团信息列表
getPic, listCommunityInfo, // 查询社团详细信息列表
delPic, editCommunityInfo, // 修改社团信息
addPic, isCommunityFb, // 新增社团信息
updatePic, delCommunityInfo, // 删除社团信息
updateState addCommunityInfo, //新增社团信息
} from '@/api/smartSchool/schoolManage/introduce/pic' } from "@/api/smartSchool/MassOrganization/communityStyle";
import picAvatar from '@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar'
import { changeUserStatus } from '@/api/system/user'
import { uploadImage as commonUpload } from '@/api/common'
import { ExportType, TEXT_SIZE } from '@/enums/common'
import {
getCommunityInfo, // 查询社团信息列表
listCommunityInfo, // 查询社团详细信息列表
editCommunityInfo, // 修改社团信息
isCommunityFb, // 新增社团信息
delCommunityInfo, // 删除社团信息
addCommunityInfo //新增社团信息
} from '@/api/smartSchool/MassOrganization/communityStyle'
export default { export default {
name: 'communityStyle', name: "communityStyle",
components: { picAvatar }, components: { picAvatar },
data() { data() {
return { return {
pev: process.env.VUE_APP_BASE_API, pev: process.env.VUE_APP_BASE_API,
// 输入框字数限制 // 输入框字数限制
TEXT_SIZE, TEXT_SIZE,
//是否上传的院徽 srcList: [],
isUploadPic: false, //是否上传的院徽
//照片是否删除 isUploadPic: false,
options: [ //照片是否删除
{ options: [
value: 0, {
label: '否' value: 0,
}, label: "否",
{ },
value: 1, {
label: '是' value: 1,
} label: "是",
], },
//获取子组件传来的信息 ],
pic: [], //获取子组件传来的信息
// 图片路径 pic: [],
imageUrl: undefined, // 图片路径
// 图片上传遮罩层 imageUrl: undefined,
uploadLoading: false, // 图片上传遮罩层
// 遮罩层 uploadLoading: false,
loading: true, // 遮罩层
// 选中数组 loading: true,
ids: [], // 选中数组
// 非单个禁用 ids: [],
single: true, // 非单个禁用
// 非多个禁用 single: true,
multiple: true, // 非多个禁用
// 显示搜索条件 multiple: true,
showSearch: true, // 显示搜索条件
// 总条数 showSearch: true,
total: 0, // 总条数
// 园区照片表格数据 total: 0,
picList: [], // 园区照片表格数据
// 弹出层标题 picList: [],
title: '', // 弹出层标题
// 是否显示弹出层 title: "",
open: false, // 是否显示弹出层
// 查询参数 open: false,
queryParams: { // 查询参数
pageNum: 1, queryParams: {
pageSize: 10, pageNum: 1,
theme: null pageSize: 10,
}, cis: "",
// 表单参数 theme: "",
form: {}, },
// 表单校验 // 表单参数
rules: { form: {
theme: [ id: "",
{ theme: "",
required: true, file: "",
message: '请输入相片名称', },
trigger: 'blur' // 表单校验
} rules: {
], theme: [
seqencing: [ {
{ required: true, message: '请输入排序', trigger: 'blur' } required: true,
], message: "请输入相片名称",
remark: [ trigger: "blur",
{ },
max: TEXT_SIZE, ],
message: '备注信息在0到200字之间', seqencing: [{ required: true, message: "请输入排序", trigger: "blur" }],
trigger: 'blur' remark: [
} {
] max: TEXT_SIZE,
}, message: "备注信息在0到200字之间",
//设置table列隐藏与显示 trigger: "blur",
columns: [ },
{ key: 0, label: `园区照片`, visible: true }, ],
{ key: 1, label: `相片名称`, visible: true }, },
// {key: 2, label: `相片路径`, visible: true}, //设置table列隐藏与显示
{ key: 2, label: `排序`, visible: true }, columns: [
{ key: 3, label: `备注`, visible: true }, { key: 0, label: `园区照片`, visible: true },
{ key: 4, label: `创建者`, visible: true }, { key: 1, label: `相片名称`, visible: true },
{ key: 5, label: `创建时间`, visible: true }, // {key: 2, label: `相片路径`, visible: true},
{ key: 6, label: `操作`, visible: true } { key: 2, label: `排序`, visible: true },
], { key: 3, label: `备注`, visible: true },
// 作为临时图片展示 { key: 4, label: `创建者`, visible: true },
tempImage: '', { key: 5, label: `创建时间`, visible: true },
// 导出选项 { key: 6, label: `操作`, visible: true },
exportOptions: { ],
title: '选择导出类别', // 作为临时图片展示
open: false tempImage: "",
}, // 导出选项
//查看状态 exportOptions: {
check: false title: "选择导出类别",
} open: false,
},
//查看状态
check: false,
file: "",
};
},
created() {
this.getList();
},
watch: {
pic: {
handler(newValue, oldValue) {
console.log("watch----oldValue", oldValue);
console.log("watch----newValue", newValue);
this.isUploadPic = newValue[3];
},
}, },
created() { },
this.getList() methods: {
//是否删除 选中值发生变化时id处理函数
selectChangeHandler(value) {
this.form.isShow = value;
}, },
watch: { /** 查询列表 */
pic: { getList() {
handler(newValue, oldValue) { this.loading = true;
console.log('watch----oldValue', oldValue) this.picList = [];
console.log('watch----newValue', newValue) const params = {
this.isUploadPic = newValue[3] cid: this.$route.query.id,
} theme: this.queryParams.theme,
} };
// console.log(params);
getCommunityInfo(params).then((response) => {
// console.log("response", response);
this.picList = response.rows;
this.picList.file = response.rows.file;
// console.log(this.picList.file);
this.total = response.total;
this.loading = false;
});
}, },
methods: {
//是否删除 选中值发生变化时id处理函数
selectChangeHandler(value) {
this.form.isShow = value
},
/** 查询列表 */
getList() {
this.loading = true
this.picList = []
getCommunityInfo(this.queryParams).then((response) => {
this.picList = response.rows
this.total = response.total
this.loading = false
})
},
//获取图片信息
getSchoolInfoPic(val) {
this.pic = val
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
params: {},
id: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
delFlag: null,
theme: null,
picUrl: null,
seqencing: null,
isShow: 0
}
this.imageUrl = ''
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.throttle(() => {
this.queryParams.pageNum = 1
this.getList()
})
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.check = false
this.reset()
this.open = true
this.title = '新增社团风采'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const ids = row.id || this.ids
// getPic(ids).then((response) => { //获取图片信息
// this.form = response.data getSchoolInfoPic(val) {
// this.imageUrl = this.pev + this.form.picUrl this.pic = val;
// this.open = true },
// this.title = '修改园区照片' // 取消按钮
// }) cancel() {
}, this.open = false;
/** 查看按钮操作 */ this.reset();
handleCheck(row) { },
this.check = true // 表单重置
this.open = true reset() {
this.title = '查看社团风采' this.form = {
}, params: {},
// 上传成功回调 id: null,
handleAvatarSuccess(res, file) { createBy: null,
this.imageUrl = res.data.url createTime: null,
console.log(file) updateBy: null,
this.commonUpload(file) updateTime: null,
}, delFlag: null,
// 上传前格式和图片大小限制 theme: null,
beforeAvatarUpload(file) { picUrl: null,
const type = seqencing: null,
file.type === 'image/jpeg' || isShow: 0,
'image/jpg' || };
'image/webp' || this.imageUrl = "";
'image/png' this.resetForm("form");
const isLt2M = file.size / 1024 / 1024 < 2 },
if (!type) { /** 搜索按钮操作 */
this.$message.error( handleQuery() {
'图片格式不正确!(只能包含jpg,png,webp,JPEG)' this.throttle(() => {
) this.queryParams.pageNum = 1;
} this.getList();
if (!isLt2M) { });
this.$message.error('上传图片大小不能超过 2MB!') },
} /** 重置按钮操作 */
return type && isLt2M resetQuery() {
}, this.resetForm("queryForm");
//删除图片 this.handleQuery();
handleRemove(file, fileList) { },
this.imageUrl = '' // 多选框选中数据
}, handleSelectionChange(selection) {
// 上传图片 this.ids = selection.map((item) => item.id);
uploadImage(file) { this.single = selection.length !== 1;
const fileData = file.file this.multiple = !selection.length;
const formData = new FormData() },
formData.append('file', fileData) /** 新增按钮操作 */
this.uploadLoading = true handleAdd() {
commonUpload(formData) this.check = false;
.then((response) => { this.reset();
this.uploadLoading = false this.open = true;
this.$modal.msgSuccess('上传成功') this.title = "新增社团风采";
this.imageUrl = this.pev + response.url },
// this.form.picUrl = process.env.VUE_APP_BASE_API + response.url /** 修改按钮操作 */
this.form.picUrl = response.url handleUpdate(row) {
}) this.reset();
.catch((error) => { const ids = row.id || this.ids;
this.uploadLoading = false listCommunityInfo(ids).then((response) => {
}) this.form = response.data;
}, this.imageUrl = this.pev + this.form.picUrl;
/** 提交按钮 */ console.log(this.imageUrl, "this.imageUrl");
submitForm() { this.open = true;
this.$refs['form'].validate((valid) => { this.title = "修改园区照片";
if (valid) { });
this.$modal.loading('正在上传数据,请稍等...') },
if (this.form.id != null) { /** 查看按钮操作 */
editCommunityInfo({ handleCheck(row) {
...this.form this.check = true;
}) this.open = true;
.then((response) => { const ids = row.id || this.ids;
this.$modal.closeLoading() listCommunityInfo(ids).then((response) => {
this.$modal.msgSuccess('修改成功') this.form = response.data;
this.open = false this.form.file = response.data.file;
this.getList() console.log(this.form.file);
}) this.open = true;
.catch((error) => { });
this.$modal.closeLoading() this.title = "查看社团风采";
}) },
} else { // 上传成功回调
addCommunityInfo({ handleAvatarSuccess(res, file) {
...this.form, this.imageUrl = res.data.url;
isShow: '0' console.log(file);
}) this.commonUpload(file);
.then((response) => { },
this.$modal.closeLoading() // 上传前格式和图片大小限制
this.$modal.msgSuccess('新增成功') beforeAvatarUpload(file) {
this.open = false const type =
this.getList() file.type === "image/jpeg" ||
}) "image/jpg" ||
.catch((error) => { "image/webp" ||
this.$modal.closeLoading() "image/png";
}) const isLt2M = file.size / 1024 / 1024 < 2;
} if (!type) {
} this.$message.error("图片格式不正确!(只能包含jpg,png,webp,JPEG)");
}) }
}, if (!isLt2M) {
/** 删除按钮操作 */ this.$message.error("上传图片大小不能超过 2MB!");
handleDelete(row) { }
const ids = row.id || this.ids return type && isLt2M;
if (ids) { },
this.$modal //删除图片
.confirm( handleRemove(file, fileList) {
`是否确认删除选中的${ this.imageUrl = "";
Object.hasOwnProperty.call(ids, 'length') },
? ids.length // 上传图片
: 1 uploadImage(file) {
}条数据?` const fileData = file.file;
) const formData = new FormData();
.then(() => { formData.append("file", fileData);
this.$modal.loading('正在处理数据,请稍等...') this.uploadLoading = true;
return delCommunityInfo(ids) commonUpload(formData)
}) .then((response) => {
.then(() => { this.uploadLoading = false;
this.$modal.closeLoading() this.$modal.msgSuccess("上传成功");
this.getList() this.imageUrl = this.pev + response.url;
this.$modal.msgSuccess('删除成功') // this.form.picUrl = process.env.VUE_APP_BASE_API + response.url
}) this.form.file = this.pev + response.url;
.catch(() => { console.log(this.form.picUrl, "this.form.picUrl");
this.$modal.closeLoading() })
}) .catch((error) => {
} this.uploadLoading = false;
}, });
},
/** 是否发布 */ /** 提交按钮 */
handleIsShow(row) { submitForm() {
// this.$modal this.$refs["form"].validate((valid) => {
// .confirm( if (valid) {
// row.isShow === '1' if (this.form.id != null) {
// ? '是否确认显示为轮播图?' // 修改
// : '是否取消显示为轮播图?' const params = {
// ) id: this.form.id,
// .then(() => { theme: this.form.theme,
// this.$modal.loading('正在修改状态,请稍等...') file: this.form.file,
// updateState(row.id, row.isShow) };
// .then((response) => { console.log(params, "params");
// this.$modal.closeLoading() editCommunityInfo(params)
// this.$modal.msgSuccess('修改成功') .then((response) => {
// }) this.getList();
// .catch((error) => { this.$message.success("修改成功");
// this.$modal.closeLoading() this.open = false;
// row.isShow = row.isShow === '0' ? '1' : '0' })
// }) .catch((err) => {});
// }) } else {
// .catch(() => { // 新增
// row.isShow = row.isShow === '0' ? '1' : '0' const params = {
// }) cid: this.$route.query.id,
theme: this.form.theme,
file: this.form.file,
};
console.log(params, "params");
addCommunityInfo(params)
.then((response) => {
this.getList();
this.$message.success("新增成功");
this.open = false;
})
.catch((err) => {});
}
} }
} });
} },
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
if (ids) {
this.$modal
.confirm(
`是否确认删除选中的${
Object.hasOwnProperty.call(ids, "length") ? ids.length : 1
}条数据?`
)
.then(() => {
this.$modal.loading("正在处理数据,请稍等...");
return delCommunityInfo(ids);
})
.then(() => {
this.$modal.closeLoading();
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {
this.$modal.closeLoading();
});
}
},
/** 是否发布 */
handleIsShow(row) {
console.log(row);
const data = {
id: row.id,
};
this.$modal
.confirm()
.then(() => {
this.$modal.loading("正在修改状态,请稍等...");
isCommunityFb(data)
.then((response) => {
this.$modal.closeLoading();
this.$modal.msgSuccess("修改成功");
})
.catch((error) => {
this.$modal.closeLoading();
});
})
.catch(() => {
// 取消操作时的逻辑
});
},
},
};
</script> </script>
<style scoped> <style scoped>
.avatar, .avatar,
.avatar-uploader, .avatar-uploader,
.el-icon-plus { .el-icon-plus {
width: 650px; width: 650px;
} }
</style> </style>
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryForm" ref="queryForm"
size="small" size="small"
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
label-width="68px" label-width="68px"
>
<el-form-item label="年级:" prop="grade">
<el-input
v-model="queryParams.grade"
placeholder="请输入年级"
clearable
/>
</el-form-item>
<el-form-item label="班级:" prop="classes">
<el-input
v-model="queryParams.classes"
placeholder="请输入班级"
clearable
/>
</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 label="年级:" prop="picName"> </el-form-item>
<el-input </el-form>
v-model="queryParams.picName"
placeholder="请输入年级"
clearable
/>
</el-form-item>
<el-form-item label="班级:" prop="picName">
<el-input
v-model="queryParams.picName"
placeholder="请输入班级"
clearable
/>
</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-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary" type="primary"
icon="el-icon-plus" icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
>新增 >新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="danger" type="danger"
icon="el-icon-delete" icon="el-icon-delete"
size="mini" size="mini"
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
>删除 >删除
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-table <el-table
v-loading="loading" ref="table"
ref="table" :data="memberList"
:data="picList" @selection-change="handleSelectionChange"
@selection-change="handleSelectionChange" >
> <el-table-column type="selection" width="55" align="center" />
<el-table-column type="selection" width="55" align="center" /> <!-- <el-table-column label="序号" align="center" prop="id" width="80" /> -->
<el-table-column <el-table-column label="序号" align="center" type="index" width="80" />
label="序号" <el-table-column label="姓名" align="center" prop="name" />
align="center" <el-table-column label="性别" align="center" prop="sex">
prop="seqencing" <template slot-scope="scope">
width="80" <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
/> </template>
<el-table-column label="姓名" align="center" prop="picName" /> </el-table-column>
<el-table-column label="性别" align="center" prop="picName" /> <el-table-column label="身份证号" align="center" prop="cardid" />
<el-table-column label="身份证号" align="center" prop="picName" /> <el-table-column label="年级" align="center" prop="grade" />
<el-table-column label="年级" align="center" prop="picName" /> <el-table-column label="班级" align="center" prop="classes" />
<el-table-column label="班级" align="center" prop="picName" /> <el-table-column label="社团部门" align="center" prop="orgName" />
<el-table-column label="社团部门" align="center" prop="picName" /> <el-table-column label="社团职位" align="center" prop="orgPosition" />
<el-table-column label="社团职位" align="center" prop="picName" /> <el-table-column label="联系方式" align="center" prop="phone" />
<el-table-column label="联系方式" align="center" prop="picName" /> <el-table-column
<el-table-column label="操作"
label="操作" align="center"
align="center" class-name="small-padding fixed-width"
class-name="small-padding fixed-width" >
> <template slot-scope="scope">
<template slot-scope="scope"> <el-button
<el-button size="mini"
size="mini" type="text"
type="text" icon="el-icon-edit"
icon="el-icon-edit" @click="handleUpdate(scope.row)"
@click="handleUpdate(scope.row)" >修改
>修改 </el-button>
</el-button> <el-button
<el-button size="mini"
size="mini" type="text"
type="text" icon="el-icon-delete"
icon="el-icon-delete" @click="handleDelete(scope.row)"
@click="handleDelete(scope.row)" >删除
>删除 </el-button>
</el-button> </template>
</template> </el-table-column>
</el-table-column> </el-table>
</el-table>
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改社团主题对话框 --> <!-- 添加或修改社团主题对话框 -->
<el-dialog <el-dialog
:title="title" center
:visible.sync="open" :title="title"
width="30%" :visible.sync="open"
append-to-body width="45%"
> append-to-body
<el-form ref="form" :model="form" :rules="rules" label-width="90px"> >
<el-form-item label="姓名:" prop="picName"> <el-form ref="form" :model="form" :rules="rules" label-width="90px">
<el-select <el-form-item label="姓名:" prop="name">
v-model="form.value" <el-input v-model="form.name" placeholder="请输入姓名:" />
style="width: 100%" </el-form-item>
filterable <el-form-item label="性别:" prop="sex">
placeholder="请选择姓名" <el-select
> v-model="form.sex"
<el-option placeholder="请输入性别"
v-for="item in options" style="width: 100%"
:key="item.value" >
:label="item.label" <el-option
:value="item.value" v-for="dict in dict.type.sys_user_sex"
> :key="dict.value"
</el-option> :label="dict.label"
</el-select> :value="dict.value"
</el-form-item> >
<el-form-item label="性别:" prop="picName"> </el-option>
<el-input </el-select>
readonly </el-form-item>
v-model="form.picName" <el-form-item label="身份证号:" prop="cardid">
placeholder="请输入性别:" <el-input v-model="form.cardid" placeholder="请输入身份证号" />
/> </el-form-item>
</el-form-item> <el-form-item label="年级:" prop="grade">
<el-form-item label="身份证号:" prop="picName"> <el-input v-model="form.grade" placeholder="请输入年级" />
<el-input </el-form-item>
readonly <el-form-item label="班级:" prop="classes">
v-model="form.picName" <el-input v-model="form.classes" placeholder="请输入班级" />
placeholder="请输入身份证号" </el-form-item>
/> <el-form-item label="联系方式:" prop="phone">
</el-form-item> <el-input v-model="form.phone" placeholder="请输入联系方式" />
<el-form-item label="年级:" prop="picName"> </el-form-item>
<el-input <el-form-item label="社团部门:" prop="orgName">
readonly <el-input v-model="form.orgName" placeholder="请输入社团部门" />
v-model="form.picName" </el-form-item>
placeholder="请输入年级" <el-form-item label="社团职位:" prop="orgPosition">
/> <el-input v-model="form.orgPosition" placeholder="请输入社团职位" />
</el-form-item> </el-form-item>
<el-form-item label="班级:" prop="picName"> </el-form>
<el-input <div slot="footer" class="dialog-footer">
readonly <el-button type="primary" @click="submitForm">确 定</el-button>
v-model="form.picName" <el-button @click="cancel">取 消</el-button>
placeholder="请输入班级" </div>
/> </el-dialog>
</el-form-item> </div>
<el-form-item label="联系方式:" prop="picName">
<el-input
v-model="form.picName"
placeholder="请输入联系方式"
/>
</el-form-item>
<el-form-item label="社团部门:" prop="picName">
<el-input
v-model="form.picName"
placeholder="请输入社团部门"
/>
</el-form-item>
<el-form-item label="社团职位:" prop="picName">
<el-input
v-model="form.picName"
placeholder="请输入社团职位"
/>
</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> </template>
<script> <script>
import { import {
listPic, getMemberInfo, // 查询社团信息列表
getPic, listMemberInfo, // 查询社团详细信息列表
delPic, editMemberInfo, // 修改社团信息
addPic, addMemberInfo, // 新增社团信息
updatePic, delMemberInfo, // 删除社团信息
updateState } from "@/api/smartSchool/MassOrganization/memberManagement";
} from '@/api/smartSchool/schoolManage/introduce/pic'
import picAvatar from '@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar'
import { changeUserStatus } from '@/api/system/user'
import { uploadImage as commonUpload } from '@/api/common'
import { ExportType, TEXT_SIZE } from '@/enums/common'
export default { export default {
name: 'communityStyle', name: "communityStyle",
components: { picAvatar }, dicts: ["sys_user_sex"],
data() { // components: { picAvatar },
return { data() {
pev: process.env.VUE_APP_BASE_API, return {
// 输入框字数限制 memberList: [],
TEXT_SIZE, pev: process.env.VUE_APP_BASE_API,
// 遮罩层
loading: true, // 遮罩层
// 选中数组 loading: false,
ids: [], // 选中数组
// 非单个禁用 ids: [],
single: true, // 非单个禁用
// 非多个禁用 single: true,
multiple: true, // 非多个禁用
// 显示搜索条件 multiple: true,
showSearch: true, // 显示搜索条件
// 总条数 showSearch: true,
total: 0, // 总条数
// 弹出层标题 total: 0,
title: '', // 弹出层标题
// 是否显示弹出层 title: "",
open: false, // 是否显示弹出层
// 查询参数 open: false,
queryParams: { // 查询参数
pageNum: 1, queryParams: {
pageSize: 10, pageNum: 1,
picName: null pageSize: 10,
}, classes: "",
// 表单参数 grade: "",
form: {}, },
// 表单校验 // 表单参数
rules: { form: {
// picName: [ id: "",
// { name: "",
// required: true, sex: "",
// message: '请输入相片名称', cardid: "",
// trigger: 'blur' grade: "",
// } classes: "",
// ], orgName: "",
}, orgPosition: "",
options: [ phone: "",
{ userid: "",
value: '选项1', },
label: '黄金糕' // 表单校验
}, rules: {},
{ options: [],
value: '选项2', };
label: '双皮奶' },
}, mounted() {
{ this.getList();
value: '选项3', },
label: '蚵仔煎' methods: {
}, /** 查询列表 */
{ getList() {
value: '选项4', const params = {
label: '龙须面' cid: this.$route.query.id,
}, name: this.queryParams.name,
{ grade: this.queryParams.grade,
value: '选项5', classes: this.queryParams.classes,
label: '北京烤鸭' };
} getMemberInfo(params).then((response) => {
] // console.log("response111", response);
} this.memberList = response.rows;
// console.log("this.memberList", this.memberList);
this.total = response.total;
});
}, },
created() { // 取消按钮
this.getList() cancel() {
this.open = false;
this.reset();
}, },
methods: { // 表单重置
/** 查询列表 */ reset() {
getList() { this.form = {};
this.loading = true this.queryParams = {};
this.picList = [] this.imageUrl = "";
listPic(this.queryParams).then((response) => { this.resetForm("form");
this.picList = response.rows },
this.total = response.total /** 搜索按钮操作 */
this.loading = false handleQuery() {
}) this.throttle(() => {
}, this.queryParams.pageNum = 1;
// 取消按钮 this.getList();
cancel() { });
this.open = false },
this.reset() /** 重置按钮操作 */
}, resetQuery() {
// 表单重置 this.resetForm("queryForm");
reset() { this.handleQuery();
this.form = { },
params: {}, // 多选框选中数据
id: null, handleSelectionChange(selection) {
createBy: null, this.ids = selection.map((item) => item.id);
createTime: null, this.single = selection.length !== 1;
updateBy: null, this.multiple = !selection.length;
updateTime: null, },
delFlag: null, /** 新增按钮操作 */
picName: null, handleAdd() {
picUrl: null, this.reset();
seqencing: null, this.open = true;
isShow: 0 this.title = "新增社团成员";
} },
this.imageUrl = '' /** 修改按钮操作 */
this.resetForm('form') handleUpdate(row) {
}, this.reset();
/** 搜索按钮操作 */ const ids = row.id || this.ids;
handleQuery() { listMemberInfo(ids).then((response) => {
this.throttle(() => { // console.log("response", response);
this.queryParams.pageNum = 1 this.form = response.data;
this.getList() this.open = true;
}) this.title = "修改社团成员信息";
}, });
/** 重置按钮操作 */ },
resetQuery() { /** 提交按钮 */
this.resetForm('queryForm') submitForm() {
this.handleQuery() this.$refs["form"].validate((valid) => {
}, if (valid) {
// 多选框选中数据 // this.$modal.loading("正在上传数据,请稍等...");
handleSelectionChange(selection) { if (this.form.id != null) {
this.ids = selection.map((item) => item.id) // 修改
this.single = selection.length !== 1 const paramsedit = {
this.multiple = !selection.length id: this.form.id,
}, name: this.form.name,
/** 新增按钮操作 */ sex: this.form.sex,
handleAdd() { cardid: this.form.cardid,
this.reset() grade: this.form.grade,
this.open = true classes: this.form.classes,
this.title = '新增社团成员' orgPosition: this.form.orgPosition,
}, phone: this.form.phone,
/** 修改按钮操作 */ };
handleUpdate(row) { editMemberInfo(paramsedit)
this.reset() .then((response) => {
const ids = row.id || this.ids // this.$modal.closeLoading();
getPic(ids).then((response) => { this.$modal.msgSuccess("修改成功");
this.form = response.data this.open = false;
this.getList();
this.open = true })
this.title = '修改社团成员信息' .catch((error) => {});
}) } else {
}, // 新增
/** 提交按钮 */ // 获取当前登录人userId
submitForm() { const userName = this.$store.state.user.userId;
this.$refs['form'].validate((valid) => { const params = {
if (valid) { cid: this.$route.query.id,
this.$modal.loading('正在上传数据,请稍等...') orgName: this.form.orgName,
if (this.form.id != null) { name: this.form.name,
updatePic({ sex: this.form.sex,
...this.form cardid: this.form.cardid,
}) grade: this.form.grade,
.then((response) => { classes: this.form.classes,
this.$modal.closeLoading() orgPosition: this.form.orgPosition,
this.$modal.msgSuccess('修改成功') phone: this.form.phone,
this.open = false userId: userName,
this.getList() };
}) addMemberInfo(params)
.catch((error) => { .then((response) => {
this.$modal.closeLoading() this.$modal.msgSuccess("新增成功");
}) this.open = false;
} else { this.getList();
addPic({ })
...this.form, .catch((error) => {});
isShow: '0' }
})
.then((response) => {
this.$modal.closeLoading()
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
.catch((error) => {
this.$modal.closeLoading()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
if (ids) {
this.$modal
.confirm(
`是否确认删除选中的${
Object.hasOwnProperty.call(ids, 'length')
? ids.length
: 1
}条数据?`
)
.then(() => {
this.$modal.loading('正在处理数据,请稍等...')
return delPic(ids)
})
.then(() => {
this.$modal.closeLoading()
this.getList()
this.$modal.msgSuccess('删除成功')
})
.catch(() => {
this.$modal.closeLoading()
})
}
} }
} });
} },
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
if (ids) {
this.$modal
.confirm(
`是否确认删除选中的${
Object.hasOwnProperty.call(ids, "length") ? ids.length : 1
}条数据?`
)
.then(() => {
return delMemberInfo(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
}
},
},
};
</script> </script>
<style scoped> <style scoped>
.avatar, .avatar,
.avatar-uploader, .avatar-uploader,
.el-icon-plus { .el-icon-plus {
width: 650px; width: 650px;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment