<template>
|
<div class="box-content">
|
<v-header
|
title="社工管理"
|
search
|
:bar="bar"
|
@on-search="onSearch"
|
></v-header>
|
<div class="add fl-al" v-if="userType!==1">
|
<el-button type="primary" size="small" @click.stop="clickHandle('add')"
|
>新增</el-button
|
>
|
<el-button size="small" @click.stop="clickHandle('serve')"
|
>专业技能管理</el-button
|
>
|
<div class="mr-l-10 mr-r-10">
|
<el-upload
|
action
|
:http-request="uploadFileHandle"
|
:show-file-list="false"
|
>
|
<el-button size="small">导入</el-button>
|
</el-upload>
|
</div>
|
<el-button size="small" @click.stop="clickHandle('download')"
|
>下载模板</el-button
|
>
|
</div>
|
<div class="tab">
|
<el-table :data="tableList" border ref="multipleTable" size="mini">
|
<el-table-column label="序号" align="center" width="50" type="index">
|
</el-table-column>
|
<el-table-column label="社工姓名" 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"
|
fit="cover"
|
:preview-src-list="[scope.row.image]"
|
>
|
</el-image>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="手机号" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.telephone || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="专业技能" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.skillTypeName || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="取得社工证" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.credential == 1 ? "是" : "否" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="所属社区" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.communityName || "-" }}
|
</template>
|
</el-table-column>
|
<!-- <el-table-column label="所属组织/机构" align="center">
|
<template slot-scope="scope">
|
<span v-if="scope.row.status === 1">待签收</span>
|
<span v-if="scope.row.status === 2">已签收</span>
|
<span v-if="scope.row.status === 3">已取消</span>
|
</template>
|
</el-table-column> -->
|
<el-table-column label="操作" align="center" fixed="right" width="150">
|
<template slot-scope="scope">
|
<el-button
|
size="small"
|
type="text"
|
style="padding: 0"
|
@click="clickHandle('edit', scope.row)"
|
>编辑</el-button
|
>
|
<el-button
|
@click="clickHandle('delete', scope.row)"
|
size="small"
|
type="text"
|
style="padding: 0"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
<!-- 新增弹框 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
:before-close="handleCloseData"
|
append-to-body
|
>
|
<div>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="150px"
|
class="demo-ruleForm"
|
>
|
<div class="fl-fw">
|
<el-form-item label="姓名" prop="name">
|
<el-input
|
class="input-width"
|
placeholder="请输入姓名"
|
size="small"
|
v-model.trim="form.name"
|
maxlength="10"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号" prop="idCard">
|
<el-input
|
class="input-width"
|
placeholder="请输入身份证号"
|
size="small"
|
v-model.trim="form.idCard"
|
maxlength="18"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="手机号" prop="telephone">
|
<el-input
|
class="input-width"
|
placeholder="请输入手机号"
|
size="small"
|
v-model.trim="form.telephone"
|
maxlength="11"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="技能分类" prop="skillType">
|
<el-select
|
class="input-width"
|
v-model="skillIds"
|
clearable
|
multiple
|
collapse-tags
|
placeholder="请选择"
|
@change="skillChange"
|
>
|
<el-option
|
v-for="item in serveList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="所属社区" prop="communityId" v-if="userType===1">
|
<el-select
|
class="input-width"
|
v-model="form.communityId"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in skillList"
|
:key="item.communityId"
|
:label="item.name"
|
:value="item.communityId"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="年龄" prop="age">
|
<el-input
|
class="input-width"
|
placeholder="请输入年龄"
|
size="small"
|
v-model.trim.number="form.age"
|
maxlength="3"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="入职时间" prop="joinTime">
|
<el-date-picker
|
class="input-width"
|
v-model="form.joinTime"
|
type="date"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
placeholder="请选择"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="性别">
|
<el-select
|
class="input-width"
|
v-model="form.gen"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in sexTypeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="学历">
|
<el-select
|
class="input-width"
|
v-model="form.education"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in educationList"
|
:key="item.dictValue"
|
:label="item.dictName"
|
:value="item.dictValue"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="政治面貌">
|
<el-select
|
class="input-width"
|
v-model="form.politicalOutlook"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in politicalTypeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="民族">
|
<el-input
|
class="input-width"
|
placeholder="请输入民族"
|
size="small"
|
v-model.trim="form.nation"
|
maxlength="10"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="取得社区工作证">
|
<el-select
|
class="input-width"
|
v-model="form.credential"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in isCardList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-form-item label="住址" prop="address">
|
<el-input
|
class="textarea-width"
|
placeholder="请输入住址"
|
size="small"
|
type="textarea"
|
:rows="4"
|
resize="none"
|
v-model.trim="form.address"
|
maxlength="300"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="上传照片">
|
<UploadImg
|
@fileHandle="fileHandle"
|
:imgShow="form.image"
|
:imgNum="1"
|
/>
|
</el-form-item>
|
</el-form>
|
<div class="fl-cen">
|
<el-button size="small" @click="handleCloseData">取 消</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
:loading="btnloading"
|
@click="submitHandle"
|
>确 定</el-button
|
>
|
</div>
|
</div>
|
</el-dialog>
|
<!-- 查看详情 -->
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import UploadImg from "../../../components/upload/uploadImg.vue";
|
import { PHONE, SHENFENZHENG } from "../../../utils/validation";
|
import { sexList, politicalList, objCopyPro } from "../../../utils/common";
|
export default {
|
components: {
|
UploadImg,
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
dialogTitle: "新增",
|
bar: [
|
{ title: "关键字", name: "keyword" },
|
{ title: "开始年龄", name: "ageBegin" },
|
{ title: "结束年龄", name: "ageEnd" },
|
{
|
title: "技能分类",
|
name: "skillType",
|
type: "select",
|
list: [],
|
},
|
// {
|
// title: "所属社区",
|
// name: "communityId",
|
// type: "select",
|
// list: [],
|
// },
|
],
|
tableList: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
search: {},
|
btnloading: false,
|
skillIds: [],
|
form: {
|
name: "", // 姓名
|
age: "", // 年龄
|
idCard: "", // 身份证号
|
telephone: "", // 手机号
|
skillType: "", // 技能分类
|
skillTypeName: "", // 技能分类
|
communityId: "", // 所属社区
|
joinTime: "", // 入职时间
|
gen: 1, // 性别
|
education: "", // 学历
|
politicalOutlook: "", // 政治面貌
|
nation: "", // 民族
|
credential: "", // 取得社区工作证
|
address: "", // 住址
|
image: "", // 上传照片
|
}, // 表单
|
rules: {
|
name: [
|
{
|
required: true,
|
message: "请输入姓名",
|
trigger: "blur",
|
},
|
],
|
age: [
|
{
|
required: true,
|
message: "请输入年龄",
|
trigger: "blur",
|
},
|
],
|
idCard: [
|
{
|
required: true,
|
validator: SHENFENZHENG,
|
trigger: "blur",
|
},
|
],
|
telephone: [
|
{
|
required: true,
|
validator: PHONE,
|
trigger: "blur",
|
},
|
],
|
skillType: [
|
{
|
required: true,
|
message: "请选择技能分类",
|
trigger: "change",
|
},
|
],
|
communityId: [
|
{
|
required: true,
|
message: "请选择所属社区",
|
trigger: "change",
|
},
|
],
|
joinTime: [
|
{
|
required: true,
|
message: "请选择入职时间",
|
trigger: "change",
|
},
|
],
|
address: [
|
{
|
required: true,
|
message: "请输入住址",
|
trigger: "blur",
|
},
|
],
|
}, // 表单验证
|
skillList: [],
|
serveList: [],
|
educationList: [],
|
userType:null,
|
sexTypeList: sexList(),
|
politicalTypeList: politicalList(),
|
isCardList: [
|
{
|
label: "是",
|
value: 1,
|
},
|
{
|
label: "否",
|
value: 0,
|
},
|
],
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.paged.page = 1;
|
this.getTable();
|
}
|
},
|
deep: true,
|
},
|
},
|
mounted() {
|
this.userType = demo.$session.get("user").userType;
|
this.$api.post(
|
"comActColumn/queryAll",
|
{
|
page: 1,
|
size: 999999,
|
type: 2,
|
},
|
(e) => {
|
this.serveList = e.records || [];
|
let arr = [];
|
e.records.forEach((item) => {
|
arr.push({
|
value: item.id,
|
label: item.name,
|
});
|
});
|
this.bar[3].list = arr;
|
}
|
);
|
this.$api.get("communityactivity/community/westList", {}, (e) => {
|
this.skillList = e;
|
let arr = [];
|
e.forEach((item) => {
|
arr.push({
|
value: item.communityId,
|
label: item.name,
|
});
|
});
|
this.bar[4].list = arr;
|
});
|
this.$api.get(
|
"dictionary/listDictionaryByKey",
|
{
|
key: "education",
|
},
|
(e) => {
|
this.educationList = e;
|
}
|
);
|
},
|
methods: {
|
skillChange() {
|
let arr = [];
|
this.form.skillType = this.skillIds.join(",");
|
this.serveList.forEach((item) => {
|
this.skillIds.forEach((it) => {
|
if (item.id == it) {
|
arr.push(item.name);
|
}
|
});
|
});
|
this.form.skillTypeName = arr.join(",");
|
this.$refs["ruleForm"].validateField("skillType");
|
},
|
onSearch(v) {
|
if (v.time && v.time.length && v.time[1]) {
|
v.signingAtBegin = v.time[0];
|
v.signingAtEnd = v.time[1];
|
} else {
|
v.signingAtBegin = "";
|
v.signingAtEnd = "";
|
}
|
this.search = demo.copy(v);
|
delete this.search.time;
|
this.paged.page = 1;
|
this.getTable();
|
},
|
fileHandle(data) {
|
if (data.type === "loading") {
|
this.btnloading = data.val;
|
} else {
|
this.form.image = data.val;
|
}
|
},
|
// 分页点击
|
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.getTable();
|
},
|
// 获取数据
|
getTable() {
|
let v = demo.copy(
|
Object.assign(this.search, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
})
|
);
|
this.$api.get("comactsocialworker", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tableList = e.records || [];
|
});
|
},
|
// beforeAvatarUploadImg(file) {
|
// console.log(file);
|
// const imgType = ["image/png", "image/jpeg"];
|
// if (imgType.indexOf(file.type) === -1) {
|
// this.$message.error("只能上传 png jpeg jpg 格式图片!");
|
// return false;
|
// } else {
|
// return true;
|
// }
|
// },
|
uploadFileHandle(f) {
|
let formData = new FormData();
|
formData.append("file", f.file);
|
this.$api.post("comactsocialworker/import", formData, (res) => {
|
this.$message.success("导入成功");
|
this.getTable();
|
});
|
},
|
clickHandle(type, row) {
|
switch (type) {
|
case "download": {
|
this.$api.get("comactsocialworker/getTemplate", {}, (e) => {
|
window.location.href = e;
|
});
|
break;
|
}
|
case "add": {
|
this.dialogTitle = "新增";
|
this.dialogVisible = true;
|
break;
|
}
|
case "import": {
|
break;
|
}
|
case "serve": {
|
this.$router.push("/serveType?type=2");
|
break;
|
}
|
case "edit": {
|
this.dialogTitle = "编辑";
|
this.dialogVisible = true;
|
this.$nextTick(() => {
|
row.gen = parseInt(row.gen);
|
row.politicalOutlook = parseInt(row.politicalOutlook);
|
this.form = objCopyPro(this.form, row);
|
let arr = row.skillType.split(",");
|
arr.forEach((item) => {
|
this.skillIds.push(parseInt(item));
|
});
|
});
|
break;
|
}
|
case "delete": {
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.del("comactsocialworker?id="+row.id, { id: row.id }, () => {
|
demo.toast("删除成功");
|
this.getTable();
|
});
|
return;
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
submitHandle() {
|
this.$refs["ruleForm"].validate((val) => {
|
if (val) {
|
if (this.dialogTitle === "新增") {
|
this.$api.post("comactsocialworker", this.form, () => {
|
demo.toast("新增成功");
|
this.handleCloseData();
|
this.getTable();
|
});
|
} else if (this.dialogTitle === "编辑") {
|
this.$api.put("comactsocialworker", this.form, () => {
|
demo.toast("编辑成功");
|
this.handleCloseData();
|
this.getTable();
|
});
|
}
|
}
|
});
|
},
|
handleCloseData() {
|
this.$refs["ruleForm"].resetFields(); // 重置表单
|
this.skillIds = [];
|
this.form = {
|
name: "", // 姓名
|
age: "", // 年龄
|
idCard: "", // 身份证号
|
telephone: "", // 手机号
|
skillType: "", // 技能分类
|
communityId: "", // 所属社区
|
joinTime: "", // 入职时间
|
gen: 1, // 性别
|
education: "", // 学历
|
politicalOutlook: "", // 政治面貌
|
nation: "", // 民族
|
credential: "", // 取得社区工作证
|
address: "", // 住址
|
image: "", // 上传照片
|
};
|
this.dialogVisible = false;
|
},
|
},
|
};
|
</script>
|
<style>
|
.el-table .cell {
|
font-size: 14px;
|
color: #444;
|
}
|
.el-dialog {
|
width: 800px !important;
|
}
|
</style>
|
<style lang='less' scoped>
|
.box-content {
|
overflow-y: auto;
|
.tab,
|
.add {
|
margin-bottom: 10px;
|
}
|
}
|
.input-width {
|
width: 200px;
|
}
|
.textarea-width {
|
width: 350px;
|
}
|
.uopload-text {
|
width: 100px;
|
height: 100px;
|
border: 1px dashed #999;
|
}
|
.label-text {
|
width: 120px;
|
text-align: right;
|
}
|
.content-text {
|
width: 400px;
|
}
|
.l-15 {
|
line-height: 1.5;
|
}
|
.goods-box {
|
width: 400px;
|
}
|
</style>
|
