<template>
|
<div class="map_vol_index">
|
<v-header title="志愿者管理"></v-header>
|
<div class="fl-fw">
|
<el-input
|
v-model="searchValObj.keyWord"
|
clearable
|
class="mr-b-10"
|
style="width: 530px"
|
placeholder="请输入志愿者姓名、手机号、身份证号、年龄、学校名称等关键词进行查找"
|
></el-input>
|
<div class="fl-al mr-b-10">
|
<div style="width: 250px; text-align: right">志愿者组织：</div>
|
<el-select
|
v-model="searchValObj.orgId"
|
@change="orgChange"
|
placeholder="请选择志愿者组织"
|
>
|
<el-option
|
v-for="item in orgList"
|
:key="item.id"
|
:label="item.name"
|
style="width: 250px"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div style="width: 250px; text-align: right">志愿者队伍：</div>
|
<el-select v-model="searchValObj.teamId" placeholder="请选择志愿者队伍">
|
<el-option
|
v-for="item in teamList"
|
:key="item.id"
|
:label="item.name"
|
style="width: 250px"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div style="width: 250px; text-align: right">大学生：</div>
|
<el-select
|
v-model="searchValObj.isUniversity"
|
placeholder="请选择是否是大学生"
|
>
|
<el-option
|
v-for="item in bar[2].list"
|
:key="item.value"
|
:label="item.label"
|
style="width: 250px"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div style="width: 250px; text-align: right">技能：</div>
|
<el-select v-model="searchValObj.skillId" placeholder="请选择技能">
|
<el-option
|
v-for="item in bar[3].list"
|
:key="item.id"
|
:label="item.name"
|
style="width: 250px"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10 mr-l-30">
|
<el-button type="primary" @click="searchClick">确定</el-button>
|
<el-button @click="resetClick">重置</el-button>
|
</div>
|
</div>
|
<div class="add">
|
<el-button
|
size="small"
|
type="primary"
|
@click="$router.push('/man_skillAdmin')"
|
>技能管理</el-button>
|
<el-button type="primary" size="small" @click="add">新增 </el-button>
|
<span class="erro-text" @click="dowErr" v-if="errUrl">下载错误表格</span>
|
<el-upload
|
name="file"
|
accept=".xls, .xlsx"
|
:headers="{ Authorization: Authorization }"
|
class="upload-demo"
|
style="display: inline-block"
|
:show-file-list="false"
|
:action="importDataurl"
|
:on-success="success"
|
:on-error="error"
|
:before-upload="beforeUpload"
|
multiple
|
>
|
<el-button type="primary">导入</el-button>
|
</el-upload>
|
<el-button type="primary" @click="down">下载模版</el-button>
|
</div>
|
<div class="tab">
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:isUniversity="{ scope }">
|
{{ scope.isUniversity == 1 ? "是" : "否" }}
|
</template>
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span class="col_primary" @click="edit(item.scope)">编辑</span>
|
<span class="col_primary" @click="del(item.scope)">删除</span>
|
</div>
|
</template>
|
<template v-slot:pic="item">
|
<img
|
:src="item.scope.photoPath || default_img"
|
@click="onScaleUploadImage(item.scope)"
|
alt=""
|
class="img-s"
|
/>
|
</template>
|
<template v-slot:time="item">
|
<b>{{ is_time(item.scope.createAt) }}</b>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
<!-- 新增/编辑 志愿者 -->
|
<ExamineAdd
|
ref="ExamineAdd"
|
v-model="isShowExamineAdd"
|
:data="data"
|
@change="isShowExamineAdd = false"
|
@success="onExamineAddSuccess"
|
></ExamineAdd>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import ExamineAdd from "./com/ExamineAdd";
|
export default {
|
props: {},
|
components: { ExamineAdd },
|
data() {
|
return {
|
isShowExamineAdd: false,
|
data: {},
|
default_img: require("../../../assets/image/acc.png"),
|
bar: [
|
{
|
title: "关键字",
|
plac: "请输入志愿者姓名、手机号、身份证号、年龄、学校名称等关键词进行查找",
|
name: "keyWord",
|
width: "500px !important",
|
},
|
{
|
title: "志愿者组织和队伍",
|
name: "org",
|
type: "cascaders",
|
list: [],
|
props: {
|
children: "childList",
|
label: "name",
|
value: "id",
|
},
|
},
|
{
|
title: "大学生",
|
name: "isUniversity",
|
type: "select",
|
list: [
|
{ label: "是", value: 1 },
|
{ label: "否", value: 2 },
|
],
|
},
|
{
|
title: "技能",
|
name: "skillId",
|
type: "select",
|
list: [],
|
},
|
],
|
trs: [
|
{ text: "序号", val: "index", width: "50px" },
|
{ text: "志愿者名称", val: "name" },
|
{ text: "志愿者组织", val: "orgName" },
|
{ text: "志愿者队伍", val: "teamName" },
|
{ text: "技能", val: "skillName" },
|
{ text: "年龄", val: "age" },
|
{ text: "身份证", val: "idCard" },
|
{ text: "是否是在校大学生", val: "btn", slot: "isUniversity" },
|
{ text: "学校名称", val: "universityName" },
|
{ text: "志愿者照片", val: "btn", slot: "pic" },
|
{ text: "志愿者手机号", val: "phone" },
|
{ text: "创建时间", val: "btn", slot: "time" },
|
{ text: "操作", val: "btn" },
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
os: {},
|
searchValObj: {
|
keyWord: "",
|
orgId: "",
|
teamId: "",
|
isUniversity: "",
|
skillId: "",
|
},
|
search: {},
|
loading: {},
|
errUrl: "",
|
importDataurl: this.$js.api.http + "volunteer/import",
|
orgList: [],
|
teamList: [],
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
searchClick() {
|
this.search = demo.copy(this.searchValObj);
|
this.paged.page = 1;
|
this.init();
|
},
|
resetClick() {
|
this.searchValObj = {
|
keyWord: "",
|
orgId: "",
|
teamId: "",
|
isUniversity: "",
|
skillId: "",
|
};
|
this.teamList = [];
|
},
|
orgChange(val) {
|
this.orgList.forEach((item) => {
|
if (val === item.id) {
|
this.teamList = item.childList;
|
}
|
});
|
},
|
//导入前
|
beforeUpload() {
|
this.errUrl = "";
|
this.loading = this.$loading({
|
lock: true,
|
text: "导入中,请勿退出系统和关闭网络",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
},
|
|
//导入
|
success(e) {
|
if (e.code === 200) {
|
this.errUrl = "";
|
demo.toast("导入成功");
|
this.loading.close();
|
} else {
|
this.errUrl = e.msg;
|
this.loading.close();
|
demo.toast("导入失败");
|
}
|
this.init();
|
},
|
|
error(err) {
|
this.loading.close();
|
demo.toast("模板错误，请下载最新模板");
|
},
|
|
dowErr() {
|
//下载错误i
|
let data = {
|
key: this.errUrl,
|
};
|
this.$api.post(
|
"volunteer/download/error/?key=" + this.errUrl,
|
"",
|
(e) => {
|
window.location.href = e;
|
this.errUrl = "";
|
}
|
);
|
},
|
//下载模板
|
down() {
|
this.$api.get("volunteer/import/template/download", "", (e) => {
|
window.location.href = e;
|
});
|
},
|
|
onExamineAddSuccess() {
|
this.isShowExamineAdd = false;
|
this.init();
|
},
|
setOrgList() {
|
//查询志愿者组织列表
|
this.$api.get("volunteer/org/list", "", (res) => {
|
this.orgList = res;
|
});
|
},
|
setSkillList() {
|
//查询志愿者技能列表
|
this.$api.get("volunteer/skill/list", "", (res) => {
|
// console.log(res)
|
res.map((item) => {
|
item.label = item.name;
|
item.value = item.id;
|
});
|
this.bar[3].list = res;
|
});
|
},
|
// 查看上传大图
|
onScaleUploadImage(j) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: j.photoPath,
|
tool: true,
|
foot: 1,
|
title: j.name,
|
list: [
|
{
|
desc: j.name + "-" + j.phone,
|
img: j.photoPath,
|
title: j.name,
|
},
|
],
|
});
|
},
|
is_time(v) {
|
v = v.replace(/-/g, "/");
|
return demo.timeout(new Date(v).getTime());
|
},
|
onSearch(v) {
|
if (v.org.length) {
|
v.teamId = v.org.length == 2 ? v.org[1] : "";
|
v.orgId = v.org[0];
|
} else {
|
v.teamId = "";
|
v.orgId = "";
|
}
|
this.search = demo.copy(v);
|
|
this.paged.page = 1;
|
this.init();
|
},
|
// 新增
|
add() {
|
this.data = {};
|
this.isShowExamineAdd = true;
|
// this.$refs.ExamineAdd.resetFields()
|
// console.log(this.$refs.ExamineAdd)
|
|
// return
|
// this.$store.dispatch("setFixed", {
|
// event: "add",
|
// data: {
|
// title: "新增志愿者",
|
// type: "volunteer-add",
|
// data: {add: true},
|
// },
|
// time: Date.now(),
|
// });
|
},
|
// 编辑
|
edit(v) {
|
this.data = v;
|
this.isShowExamineAdd = true;
|
// return
|
// this.$store.dispatch("setFixed", {
|
// event: "add",
|
// data: {
|
// title: "编辑志愿者[" + v.name + "]",
|
// type: "volunteer-add",
|
// data: {
|
// add: false,
|
// id: v.id,
|
// image: v.photoPath,
|
// name: v.name,
|
// phone: v.phone,
|
// },
|
// },
|
// time: Date.now(),
|
// });
|
},
|
// 删除
|
del(v) {
|
this.$js.model("", "是否删除", (res) => {
|
if (res) {
|
this.$api.del("communitymanager/volunteer", v, (e) => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
}
|
});
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
// 获取数据
|
init() {
|
let v = demo.copy(
|
Object.assign(this.os, this.search, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
})
|
);
|
this.$api.put("communitymanager/pagevolunteer", v, (e) => {
|
e.records.map((item, index) => {
|
item.index = (this.paged.page - 1) * this.paged.limit + index + 1;
|
});
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
});
|
},
|
},
|
mounted() {
|
this.setSkillList();
|
this.setOrgList();
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.map_vol_index {
|
overflow-y: auto;
|
.erro-text {
|
font-size: 13px;
|
color: #f56c6c;
|
cursor: pointer;
|
}
|
.add,
|
.tab {
|
margin-bottom: 10px;
|
}
|
|
.img-s {
|
vertical-align: middle;
|
max-height: 35px;
|
max-width: 100%;
|
width: 35px;
|
height: 35px;
|
display: initial;
|
}
|
}
|
</style>
|
