Commit a6bb6ef0 by Cat

zd 社团

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