<template>
|
<div class="custom-box">
|
<div class="title">志愿者队伍</div>
|
<div class="titleList">
|
<div>
|
<span>志愿者组织</span>
|
<b>{{ navList.orgTotal || 0 }}</b>
|
</div>
|
<div>
|
<span>志愿者队伍</span>
|
<b>{{ navList.teamTotal || 0 }}</b>
|
</div>
|
<div>
|
<span>志愿者</span>
|
<b>{{ navList.volunteerTotal || 0 }}</b>
|
</div>
|
</div>
|
<div class="serachContent">
|
<el-form :inline="true" class="demo-form-inline">
|
<!-- <el-form-item label="关键词">
|
<el-input v-model="search.keyWord" style="width:350px" size="small"
|
placeholder="请输入志愿者组织、志愿者名称、年龄、身份证关键词进行查找"></el-input>
|
</el-form-item> -->
|
|
<el-form-item
|
label="服务类型"
|
>
|
<el-select
|
v-model="search.serviceTypeId"
|
size="small"
|
class="iw-180"
|
clearable
|
filterable
|
placeholder="请选择状态"
|
>
|
<el-option
|
v-for="item in serveroptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="大学生">
|
<el-select
|
v-model="search.isUniversity"
|
size="small"
|
class="iw-180"
|
clearable
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in isCollegeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch()"
|
>查询</el-button
|
>
|
<el-button size="small" @click="Reset()">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="addBtn">
|
<el-button
|
size="small"
|
type="primary"
|
@click="$router.push('/man_skillAdmin')"
|
>技能管理</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
@click="$router.push('/man_volType')"
|
>服务类型管理</el-button
|
>
|
<el-button size="small" type="primary" @click="addteam"
|
>添加组织</el-button
|
>
|
<el-button size="small" type="primary" @click="addvolunteerHandle"
|
>添加志愿者</el-button
|
>
|
</div>
|
<div class="rankContent">
|
<!-- 志愿者组织 -->
|
<div class="leftCollapse">
|
<el-collapse v-model="activeNames" accordion>
|
<div v-for="(item, index) in volunteerList" :key="index">
|
<el-collapse-item class="custom-collapse" :name="index + 1">
|
<div
|
slot="title"
|
@click="zhuzi(index)"
|
class="fl-sb"
|
style="width: 300px"
|
>
|
<span :class="activeName === index + 1 ? 'choose' : ''">{{
|
item.label
|
}}</span>
|
<span class="icon">
|
<i
|
class="el-icon-circle-plus-outline Brand"
|
@click.stop="addRank(item)"
|
></i>
|
<i
|
class="el-icon-edit-outline Warning"
|
@click.stop="editRank(item)"
|
></i>
|
<i
|
class="el-icon-delete Danger"
|
@click="deletesRank(item.value)"
|
></i
|
></span>
|
</div>
|
<div>
|
<div
|
v-for="(text, index2) in item.children"
|
:key="index2"
|
:class="activeNamesamll === index2 + 1 ? 'choose' : ''"
|
@click="team(index, index2)"
|
class="fl-sb"
|
style="width: 250px"
|
>
|
{{ text.label }}
|
<span class="icon">
|
<i
|
class="el-icon-circle-plus-outline Brand"
|
@click="addVolunteer(text, item.id)"
|
></i>
|
<i
|
class="el-icon-edit-outline Warning"
|
@click="editVolunteer(text, item.id)"
|
></i>
|
<i
|
class="el-icon-delete Danger"
|
@click="deleteVolunteer(text.id)"
|
></i
|
></span>
|
</div>
|
</div>
|
</el-collapse-item>
|
</div>
|
</el-collapse>
|
</div>
|
<!-- 队伍列表 -->
|
<div class="tableBox">
|
<my-eltable
|
id="printTable"
|
ref="mt"
|
:paginationDataSource="tableData"
|
:tabheight="tabheight"
|
:tableHeader="tableHeader"
|
:loading="loading"
|
:checkbox="checkboxTable"
|
:isIndex="isIndex"
|
@onPageSizeChange="onPageSizeChange"
|
@onPaginationChange="onPaginationChange"
|
>
|
<template v-slot:pic="{ scope }">
|
<img :src="scope.photoPath" style="width: 70px; height: 70px" />
|
</template>
|
<template v-slot:isc="{ scope }">
|
<span v-if="scope.isUniversity == 1">是</span>
|
<span v-if="scope.isUniversity == 2">否</span>
|
</template>
|
<template v-slot:btn="{ scope }">
|
<el-button type="text" @click="edit(scope)">编辑</el-button>
|
<el-button type="text" @click="deletes(scope)">删除</el-button>
|
</template>
|
</my-eltable>
|
</div>
|
</div>
|
<!-- 新增/编辑 志愿者 -->
|
<ExamineAdd
|
v-model="isShowExamineAdd"
|
:data="data"
|
@change="isShowExamineAdd = false"
|
@success="onExamineAddSuccess"
|
></ExamineAdd>
|
<!-- 新增/编辑队伍 -->
|
<AddRank
|
v-model="isAddRank"
|
:rankItem="rankItem"
|
:isEdit="isEdit"
|
@change="isAddRank = false"
|
@success="onAddRankSuccess"
|
></AddRank>
|
<!-- 新增/编辑组织 -->
|
<AddOrganization
|
v-model="isAddOrganization"
|
:rankID="rankID"
|
@change="isAddOrganization = false"
|
@success="OrganizationSuccess"
|
></AddOrganization>
|
</div>
|
</template>
|
<script>
|
import MyEltable from "@/components/table/table2";
|
import ExamineAdd from "./com/ExamineAdd";
|
import AddRank from "./com/AddRank";
|
import AddOrganization from "./com/AddOrganization";
|
export default {
|
props: [],
|
components: { MyEltable, ExamineAdd, AddRank, AddOrganization },
|
data() {
|
return {
|
isShowExamineAdd: false,
|
isAddRank: false,
|
isAddOrganization: false,
|
activeName: "",
|
activeNamesamll: "",
|
isShow: false,
|
tableData: {},
|
loading: false,
|
checkboxTable: false,
|
isIndex: true,
|
tabheight: "100%",
|
data: {},
|
isCollegeList: [
|
{
|
label: "是",
|
value: 1,
|
},
|
{
|
label: "否",
|
value: 2,
|
},
|
],
|
tableHeader: [
|
{ label: "志愿者名称", prop: "name" },
|
{ label: "技能", prop: "skillName" },
|
{ label: "手机号", prop: "phone" },
|
{ label: "照片", slot: "pic" },
|
{ label: "是否是大学生", slot: "isc" },
|
{ label: "大学名称", prop: "universityName" },
|
{ label: "身份证", prop: "idCard" },
|
{ label: "年龄", prop: "age" },
|
{ label: "志愿者组织", prop: "orgName" },
|
{ label: "志愿者队伍", prop: "teamName" },
|
{ label: "服务类型", prop: "serviceTypeName" },
|
{ label: "操作", slot: "btn", width: "120px" },
|
],
|
search: {
|
serviceTypeId: "",
|
keyWord: "",
|
orgId: "",
|
teamId: "",
|
isUniversity: "",
|
},
|
activeNames: ["1"],
|
serveroptions: [],
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
volunteerList: [],
|
rankItem: {},
|
isEdit: false,
|
rankID: {},
|
navList: {},
|
};
|
},
|
created() {},
|
mounted() {
|
this.init();
|
this.getStatistics();
|
this.orgList();
|
this.serverList();
|
},
|
methods: {
|
async getStatistics() {
|
this.$api.get("volunteer/org/statistics", "", (res) => {
|
this.navList = res;
|
});
|
},
|
async serverList() {
|
// const res = await organizationServicer.serverList();
|
this.$api.get("volunteer/service/type/list", "", (res) => {
|
this.serveroptions = res.map((d) => {
|
return {
|
label: d.name,
|
value: d.id,
|
};
|
});
|
});
|
},
|
onSearch() {
|
this.init();
|
},
|
Reset() {
|
this.search = {
|
serviceTypeId: "",
|
keyword: "",
|
};
|
this.search.orgId = "";
|
this.search.teamId = "";
|
this.init();
|
},
|
init() {
|
const params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
...this.search,
|
};
|
this.$api.put("communitymanager/pagevolunteer", params, (e) => {
|
this.tableData = e;
|
});
|
},
|
/** 新增组织 */
|
addteam() {
|
this.rankID = {};
|
this.isAddOrganization = true;
|
},
|
/** 编辑组织 */
|
editRank(d) {
|
this.isAddOrganization = true;
|
d.id = d.value;
|
this.rankID = d;
|
},
|
/** 新增志愿者 */
|
addVolunteer(d, id) {
|
this.data = {
|
orgId: id,
|
teamId: d.id,
|
};
|
this.isShowExamineAdd = true;
|
},
|
addvolunteerHandle() {
|
this.data = {
|
nameText: "123",
|
};
|
this.isShowExamineAdd = true;
|
},
|
/** pageSize 改变时会触发 */
|
onPageSizeChange(pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
/** 分页 */
|
onPaginationChange(page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
/** 编辑志愿者 */
|
edit(d) {
|
this.data = d;
|
this.isShowExamineAdd = true;
|
},
|
/** 删除志愿者 */
|
deletes(d) {
|
this.$confirm("确定要删除该内容吗?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// await organizationServicer.deleteVolunteer(d)
|
this.$api.del("communitymanager/volunteer", d, (e) => {
|
this.$message.error("删除成功");
|
this.init();
|
});
|
})
|
.catch((res) => {
|
// this.$message(res.message)
|
});
|
},
|
|
onExamineAddSuccess() {
|
this.isShowExamineAdd = false;
|
this.init();
|
},
|
onAddRankSuccess() {
|
this.isAddRank = false;
|
this.orgList();
|
},
|
OrganizationSuccess() {
|
this.isAddOrganization = false;
|
this.orgList();
|
},
|
/** 删除队伍 */
|
async deleteVolunteer(id) {
|
this.$confirm("此操作将永久删除队伍, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.get("volunteer/org/delete", { id: id }, (res) => {
|
this.$message.error("删除成功");
|
this.orgList();
|
});
|
this.orgList();
|
});
|
},
|
/** 新增队伍 */
|
addRank(row) {
|
this.isEdit = false;
|
this.isAddRank = true;
|
this.rankItem = {
|
parantId: row.id,
|
};
|
},
|
/** 删除志愿者组织 */
|
async deletesRank(id) {
|
this.$confirm("此操作将永久删除志愿者组织, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.get("volunteer/org/delete", { id: id }, (res) => {
|
this.$message.success("删除成功");
|
this.orgList();
|
});
|
});
|
},
|
/** 编辑队伍 */
|
editVolunteer(d, parantId) {
|
this.isEdit = true;
|
this.isAddRank = true;
|
this.rankItem = {
|
name: d.label,
|
id: d.id,
|
parantId: parantId,
|
serviceTypeId: d.serviceTypeId,
|
};
|
},
|
/** 查询组织下志愿者 */
|
zhuzi(index) {
|
console.log(index);
|
this.activeName = index + 1;
|
this.activeNamesamll = "";
|
this.search.orgId = this.volunteerList[index].value;
|
this.search.teamId = "";
|
this.init();
|
},
|
/** 查询队伍下志愿者
|
* index 组织的索引 index2队伍的索引*/
|
team(index, index2) {
|
this.activeNamesamll = index2 + 1;
|
this.activeName = "";
|
const parant = this.volunteerList[index];
|
this.search.orgId = parant.value;
|
this.search.teamId = parant.children[index2].value;
|
this.init();
|
},
|
async orgList() {
|
this.$api.get("volunteer/org/list", "", (res) => {
|
this.volunteerList = res.map((d) => {
|
return {
|
value: d.id,
|
label: d.name,
|
...d,
|
children:
|
d.childList &&
|
d.childList.map((e) => {
|
return {
|
value: e.id,
|
label: e.name,
|
...e,
|
};
|
}),
|
};
|
});
|
});
|
},
|
},
|
watch: {},
|
computed: {},
|
};
|
</script>
|
<style lang="less" scoped>
|
/*@import '../../../styles/table.less';*/
|
.titleList {
|
display: flex;
|
|
div {
|
text-align: center;
|
padding: 10px 30px 15px 0;
|
|
span {
|
display: block;
|
text-align: center;
|
}
|
}
|
}
|
|
.custom-collapse {
|
.icon {
|
padding-left: 20px;
|
|
.Brand {
|
color: #409eff;
|
}
|
|
.Warning {
|
color: #e6a23c;
|
}
|
|
.Danger {
|
color: #f56c6c;
|
}
|
}
|
|
.choose {
|
color: #409eff;
|
}
|
|
/deep/ .el-collapse-item__header {
|
font-size: 15px;
|
|
i {
|
font-size: 16px;
|
margin-left: 10px;
|
}
|
}
|
|
/deep/ .el-collapse-item__content {
|
font-size: 14px;
|
cursor: pointer;
|
padding-left: 15px;
|
|
i {
|
font-size: 16px;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.rankContent {
|
width: 100%;
|
|
.leftCollapse {
|
width: 27%;
|
float: left;
|
margin-right: 10px;
|
min-width: 300px;
|
|
/deep/ .el-collapse {
|
// border: 1px solid #EBEEF5;
|
}
|
}
|
|
.tableBox {
|
width: 70%;
|
float: left;
|
}
|
}
|
|
.logo-icon {
|
width: 50px;
|
}
|
</style>
|
