<template>
|
<div class="box-content">
|
<v-header
|
title="社会组织成员管理"
|
search
|
:bar="bar"
|
@on-search="onSearch"
|
></v-header>
|
<div class="add" v-if="userType!==1">
|
<el-button type="primary" size="small" @click.stop="clickHandle('add')"
|
>新增</el-button
|
>
|
<el-button size="small" @click.stop="clickHandle('add')">导入</el-button>
|
<el-button size="small" @click.stop="clickHandle('add')"
|
>下载模板</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.phone || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="所属组织" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.orgName || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="职位" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.position || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="身份证" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.idCard || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="平台账号" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.account || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="密码" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.password || "-" }}
|
</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 === 0">停用</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="position">
|
<el-input
|
class="input-width"
|
placeholder="请输入职位"
|
size="small"
|
v-model.trim="form.position"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="手机号" prop="phone">
|
<el-input
|
class="input-width"
|
placeholder="请输入手机号"
|
size="small"
|
v-model.trim="form.phone"
|
maxlength="11"
|
></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="所属组织" prop="orgId">
|
<el-select
|
class="input-width"
|
v-model="form.orgId"
|
clearable
|
placeholder="请选择所属组织"
|
>
|
<el-option
|
v-for="item in serveList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="管理员账号" prop="account">
|
<el-input
|
class="input-width"
|
placeholder="请输入管理员账号"
|
size="small"
|
maxlength="20"
|
v-model.trim="form.account"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input
|
class="input-width"
|
placeholder="请输入密码"
|
size="small"
|
maxlength="20"
|
type="password"
|
v-model="form.password"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confimpassword">
|
<el-input
|
class="input-width"
|
placeholder="请输入确认密码"
|
size="small"
|
type="password"
|
maxlength="20"
|
v-model="form.confimpassword"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="状态:">
|
<div class="input-width">
|
<el-radio v-model="form.status" :label="1">启用</el-radio>
|
<el-radio v-model="form.status" :label="0">停用</el-radio>
|
</div>
|
</el-form-item>
|
<el-form-item label="上传照片">
|
<UploadImg
|
ref="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 { objCopyPro } from "../../../utils/common";
|
import { SHENFENZHENG, PHONE } from "../../../utils/validation";
|
export default {
|
components: {
|
UploadImg,
|
},
|
data() {
|
const confimHandle = (rule, value, callback) => {
|
if (this.form.password === value) {
|
if (!value) return callback(new Error("确认密码不能为空"));
|
callback();
|
} else {
|
callback(new Error("两次密码不相同"));
|
}
|
};
|
return {
|
dialogVisible: false,
|
dialogTitle: "新增",
|
bar: [
|
{ title: "关键字", name: "keyword" },
|
{
|
title: "所属组织",
|
name: "paramId",
|
type: "select",
|
list: [],
|
},
|
{
|
title: "状态",
|
name: "status",
|
type: "select",
|
list: [
|
{ value: null, label: "全部" },
|
{
|
value: 1,
|
label: "启用",
|
},
|
{
|
value: 0,
|
label: "停用",
|
},
|
],
|
},
|
],
|
tableList: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
search: {},
|
btnloading: false,
|
form: {
|
name: "", // 姓名
|
idCard: "", // 身份证
|
position: "", // 职位
|
phone: "", // 手机号
|
image: "", // 头像
|
orgId: "", // 所属组织
|
status: 1, //状态
|
account: "", // 管理员账号
|
password: "", // 密码
|
confimpassword: "", // 确认密码
|
}, // 表单
|
rules: {
|
name: [
|
{
|
required: true,
|
message: "请输入物品名称",
|
trigger: "blur",
|
},
|
],
|
position: [
|
{
|
required: true,
|
message: "请输入职位",
|
trigger: "blur",
|
},
|
],
|
account: [
|
{
|
required: true,
|
message: "请输入管理员账号",
|
trigger: "blur",
|
},
|
],
|
confimpassword: [
|
{
|
required: true,
|
validator: confimHandle,
|
trigger: "blur",
|
},
|
],
|
password: [
|
{
|
required: true,
|
message: "请输入密码",
|
trigger: "blur",
|
},
|
],
|
orgId: [
|
{
|
required: true,
|
message: "请选择所属组织",
|
trigger: "change",
|
},
|
],
|
idCard: [
|
{
|
required: true,
|
validator: SHENFENZHENG,
|
trigger: "blur",
|
},
|
],
|
phone: [
|
{
|
required: true,
|
validator: PHONE,
|
trigger: "blur",
|
},
|
],
|
}, // 表单验证
|
serveList: [],
|
userType:null
|
};
|
},
|
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(
|
"comActSocialOrg/queryAll",
|
{
|
page: 1,
|
size: 999999,
|
paramId2: 1,
|
},
|
(e) => {
|
this.serveList = e.records || [];
|
this.serveList.forEach((item) => {
|
this.bar[1].list.push({
|
value: item.id,
|
label: item.name,
|
});
|
});
|
}
|
);
|
},
|
methods: {
|
onSearch(v) {
|
this.search = demo.copy(v);
|
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, {
|
page: this.paged.page,
|
size: this.paged.limit,
|
})
|
);
|
this.$api.post("comActSocialMember/queryAll", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tableList = e.records || [];
|
});
|
},
|
clickHandle(type, row) {
|
switch (type) {
|
case "add": {
|
this.dialogTitle = "新增";
|
this.dialogVisible = true;
|
break;
|
}
|
case "delete": {
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.get("comActSocialMember/del", { id: row.id }, () => {
|
demo.toast("删除成功");
|
this.getTable();
|
});
|
return;
|
});
|
break;
|
}
|
case "edit": {
|
this.$api.get("comActSocialMember/" + row.id, {}, (data) => {
|
data.confimpassword = data.password;
|
this.form = objCopyPro(this.form, data);
|
this.dialogTitle = "编辑";
|
this.dialogVisible = true;
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
submitHandle() {
|
this.$refs["ruleForm"].validate((val) => {
|
if (val) {
|
if (this.dialogTitle === "新增") {
|
this.$api.post("comActSocialMember", this.form, () => {
|
demo.toast("新增成功");
|
this.handleCloseData();
|
this.getTable();
|
});
|
} else if (this.dialogTitle === "编辑") {
|
this.$api.post("comActSocialMember/update", this.form, () => {
|
demo.toast("编辑成功");
|
this.handleCloseData();
|
this.getTable();
|
});
|
}
|
}
|
});
|
},
|
handleCloseData() {
|
this.$refs["ruleForm"].resetFields(); // 重置表单
|
this.form = {
|
name: "", // 姓名
|
idCard: "", // 身份证
|
position: "", // 职位
|
phone: "", // 手机号
|
orgId: "", // 所属组织
|
status: 1, //状态
|
image: "",
|
account: "", // 管理员账号
|
password: "", // 密码
|
confimpassword: "", // 确认密码
|
};
|
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>
|
