<template>
|
<div>
|
<div class="but">
|
<el-button v-if="newVal.status===3" @click="addsocial()" size="small" type="primary"
|
>新增社工</el-button
|
>
|
<el-button v-if="newVal.status===3" @click="addvolunteer()" size="small" type="primary"
|
>新增志愿者</el-button
|
>
|
<el-select
|
size="small"
|
class="iw-180"
|
style="width: 150px"
|
v-model="identityType"
|
@change="changePersonel"
|
clearable
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in typeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="tab">
|
<v-tool-table :trs="trsPer" :tds="tdsPer">
|
<template v-slot:img="{ scope }">
|
<div class="fl-cen">
|
<el-image
|
style="width: 30px; height: 30px"
|
:src="scope.image"
|
fit="cover"
|
:preview-src-list="[scope.image]"
|
>
|
</el-image>
|
</div>
|
</template>
|
<template v-slot:type="{ scope }">
|
<span>{{ scope.type == 2 ? "志愿者" : "社工" }}</span>
|
</template>
|
<template v-slot:btn="{ scope }">
|
<el-button @click="clickHandle('delete', scope)" type="text"
|
>删除</el-button
|
>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page :item="pagedPer" @on-page="onPagePer"></v-tool-page>
|
|
<!-- 新增社工 -->
|
<el-dialog
|
:title="pseronType === 1 ? '新增社工' : '新增志愿者'"
|
:visible.sync="dialogVisible"
|
width="70%"
|
center
|
append-to-body
|
>
|
<div>
|
<el-input
|
v-model="search.keyword"
|
style="width: 350px"
|
size="small"
|
placeholder="请输入姓名、手机号"
|
></el-input>
|
<el-button size="mini" @click="searchPer">搜索</el-button>
|
<!-- <el-button @click="Change = !Change" size="mini">批量操作</el-button> -->
|
<!-- <div class="Tips" v-show="Change">
|
<i style="color: #409eff" class="el-icon-info"></i>
|
<div class="Tips-cont">
|
已选择<span>{{ ids.length }}</span
|
>项
|
</div>
|
<el-button type="text" @click="clearAll()">批量删除</el-button>
|
<el-button type="text" @click="cancel">取消</el-button>
|
</div> -->
|
<div class="tab">
|
<!-- <v-tool-table :trs="trs" :tds="tds"
|
first
|
firstWidth="50px">
|
<template v-slot:first-th>
|
<div>
|
<el-checkbox @change="cheAll" v-model="alls"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox @change="change" v-model="item.scope.che"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:img="{scope}">
|
<span><img :src="scope.image" style="width:50px"></span>
|
</template>
|
</v-tool-table> -->
|
<el-table
|
:data="tds"
|
border
|
ref="multipleTable"
|
size="mini"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="50" align="center">
|
</el-table-column>
|
<el-table-column
|
label="序号"
|
align="center"
|
width="60"
|
type="index"
|
>
|
</el-table-column>
|
<el-table-column :label="pseronType===1?'社工姓名':'志愿者姓名'" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.name || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="年龄" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.age || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="照片" align="center">
|
<template slot-scope="scope">
|
<div class="fl-cen">
|
<el-image
|
style="width: 30px; height: 30px"
|
:src="scope.row.image || scope.row.photoPath"
|
fit="cover"
|
:preview-src-list="[scope.row.image || scope.row.photoPath]"
|
>
|
</el-image>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="手机号" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.telephone || scope.row.phone }}
|
</template>
|
</el-table-column>
|
<el-table-column label="所属社区" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.communityName || "-" }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button
|
size="mini"
|
@click="shure('form')"
|
:disabled="!ids.length"
|
type="primary"
|
>确认</el-button
|
>
|
<el-button size="mini" @click="closeAddPerson">取消</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
item: { type: Object },
|
level: { type: Number },
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
trs: [
|
{ text: "序号", val: "index", width: "50px" },
|
{ text: "姓名", val: "name" },
|
{ text: "年龄", val: "age" },
|
{ text: "照片", val: "btn", slot: "img" },
|
{ text: "手机号", val: "telephone" },
|
{ text: "所属社区", val: "communityName" },
|
],
|
trsPer: [
|
{ text: "序号", val: "index", width: "50px" },
|
{ text: "人员类型", val: "btn", slot: "type" },
|
{ text: "姓名", val: "name" },
|
{ text: "年龄", val: "age" },
|
{ text: "照片", val: "btn", slot: "img" },
|
{ text: "手机号", val: "phone" },
|
{ text: "所属社区", val: "communityName" },
|
{ text: "操作", val: "btn", slot: "btn" },
|
],
|
search: {
|
keyword: "",
|
},
|
typeList: [
|
{
|
label: "全部人员",
|
value: null,
|
},
|
{
|
label: "仅看社工",
|
value: 1,
|
},
|
{
|
label: "仅看志愿者",
|
value: 2,
|
},
|
],
|
tds: [],
|
tdsPer: [],
|
paged: { page: 0, total: 0, r: 0, limit: 5 },
|
pagedPer: { page: 0, total: 0, r: 0, limit: 10 },
|
Change: false,
|
ids: [],
|
alls: false,
|
newVal: {},
|
pseronType: 1,
|
identityType: null,
|
};
|
},
|
watch: {
|
item(val) {
|
this.newVal = val;
|
this.init();
|
},
|
},
|
methods: {
|
//选择人员
|
changePersonel() {
|
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.getcomactsocialworker();
|
},
|
closeAddPerson() {
|
this.$refs.multipleTable.clearSelection();
|
this.ids = [];
|
this.dialogVisible = false;
|
},
|
//新增社工
|
shure() {
|
let v = {
|
paramId: this.$route.query.id,
|
ids: this.ids,
|
type: this.pseronType,
|
};
|
this.$api.post("comActSocialProjectMember/batch", v, (e) => {
|
demo.toast("新增成功");
|
this.$refs.multipleTable.clearSelection();
|
this.dialogVisible = false;
|
this.ids = [];
|
this.init();
|
});
|
},
|
//参与人员
|
onPagePer(v) {
|
if (v.page === this.pagedPer.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.pagedPer.page = v.page;
|
this.pagedPer.limit = v.limit;
|
this.init();
|
},
|
addsocial() {
|
this.pseronType = 1;
|
this.dialogVisible = true;
|
this.paged = { page: 0, total: 0, r: 0, limit: 5 };
|
this.getcomactsocialworker();
|
},
|
addvolunteer() {
|
this.pseronType = 2;
|
this.dialogVisible = true;
|
this.paged = { page: 0, total: 0, r: 0, limit: 5 };
|
this.getcomactsocialworker();
|
},
|
// 页面操作
|
clickHandle(type, row) {
|
switch (type) {
|
case "edit": {
|
this.$router.push(
|
`/addPropagate?level=${this.level + 1}&id=${this.item.id}&isedit=1`
|
);
|
break;
|
}
|
case "delete": {
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.get(
|
"comActSocialProjectMember/del",
|
{ id: row.id },
|
() => {
|
demo.toast("删除成功");
|
this.init();
|
}
|
);
|
return;
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
|
// 获取数据
|
init() {
|
let v = {
|
page: this.pagedPer.page,
|
size: this.pagedPer.limit,
|
paramId: this.$route.query.id,
|
level: this.level + 1, //创建子项目的等级
|
type: this.identityType,
|
};
|
this.$api.post("comActSocialProjectMember/queryAll", v, (e) => {
|
e.records.map((item, index) => {
|
item.index =
|
(this.pagedPer.page - 1) * this.pagedPer.limit + index + 1;
|
});
|
this.pagedPer.total = e.total;
|
this.tdsPer = e.records || [];
|
});
|
},
|
|
searchPer() {
|
this.getcomactsocialworker();
|
this.pageNum = 1;
|
},
|
|
//获取社工数据
|
getcomactsocialworker() {
|
let params = {
|
keyword: this.search.keyword,
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
};
|
if (this.pseronType === 1) {
|
this.$api.get("comactsocialworker", params, (e) => {
|
e.records.map((item, index) => {
|
item.index =
|
(this.paged.page - 1) * this.pagedPer.limit + index + 1;
|
});
|
this.paged.total = e.total;
|
this.tds = e.records || [];
|
});
|
} else {
|
this.$api.put("communitymanager/pagevolunteer", params, (e) => {
|
e.records.map((item, index) => {
|
item.index =
|
(this.paged.page - 1) * this.pagedPer.limit + index + 1;
|
});
|
this.paged.total = e.total;
|
this.tds = e.records || [];
|
});
|
}
|
},
|
cancel() {
|
//取消
|
this.Change = false;
|
this.alls = false;
|
this.ids = [];
|
this.tds.map((item) => {
|
item.che = false;
|
});
|
},
|
cheAll() {
|
//全选
|
this.tds.map((item) => {
|
item.che = this.alls;
|
});
|
this.change();
|
},
|
change() {
|
//单个选择
|
this.ids = [];
|
this.tds.map((item) => {
|
if (item.che) {
|
this.ids.push(item.id);
|
} else {
|
this.alls = false;
|
}
|
});
|
},
|
//删除
|
clear(id) {
|
//删除
|
let t = this;
|
if (id) {
|
t.$js.model("提示", "是否删除此条数据？", (res) => {
|
if (res) {
|
t.$api.get("comActSocialProjectPublicity/del", { id: id }, (e) => {
|
if (!e) {
|
demo.toast(e.msg);
|
return;
|
}
|
demo.toast("删除成功");
|
t.init();
|
});
|
}
|
});
|
}
|
},
|
|
//批量删除
|
clearAll() {
|
let t = this;
|
if (this.ids.length === 0) {
|
demo.toast("请勾选需要删除的内容");
|
return;
|
} else {
|
t.$js.model("提示", "是否删除此条数据？", (res) => {
|
if (res) {
|
t.$api.post(
|
"comActSocialProjectPublicity/delBatch",
|
{ ids: t.ids },
|
(e) => {
|
if (!e) {
|
demo.toast(e.msg);
|
return;
|
}
|
demo.toast("删除成功");
|
t.ids = [];
|
t.init();
|
}
|
);
|
}
|
});
|
}
|
},
|
handleSelectionChange(arr) {
|
let arrIds = [];
|
arr.forEach((item) => {
|
arrIds.push(item.id);
|
});
|
this.ids = arrIds;
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.tab {
|
padding-top: 20px;
|
}
|
.Tips {
|
margin: 10px 0;
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background: #e6f7ff;
|
border: #bae7ff 1px solid;
|
border-radius: 6px;
|
height: 40px;
|
padding: 0 20px;
|
}
|
.Tips-cont {
|
padding: 0 10px;
|
font-size: 16px;
|
color: #606266;
|
}
|
.Tips-cont > span {
|
padding: 0 4px;
|
color: #409eff;
|
font-weight: 600;
|
}
|
</style>
|
