<template>
|
<div class="custom-scroll">
|
<v-header
|
title="四长四员"
|
></v-header>
|
<!-- 条件搜索 -->
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键字" >
|
<el-input style="width:400px" size="small" v-model="search.keyword" placeholder="请输入姓名、联系电话、管辖区域等关键词进行查找"></el-input>
|
</el-form-item>
|
<el-form-item label="职位">
|
<el-select v-model="search.position" placeholder="请选择">
|
<el-option
|
v-for="item in positionList"
|
: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 @click="Reset" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="both-box">
|
<!-- 显示多选数量 -->
|
<div class="Tips">
|
<i style="color: #409EFF" class="el-icon-info"></i>
|
<div class="Tips-cont">已选择<span>{{ids.length}}</span>项</div>
|
<el-button
|
type="text"
|
@click="cancel"
|
>取消</el-button>
|
</div>
|
<!-- 操作按钮 -->
|
<div class="operation-btn">
|
<el-button type="primary" @click="add()">新增</el-button>
|
<el-button type="primary" @click="deletes()">删除</el-button>
|
<el-button type="primary" @click="enable()">启用</el-button>
|
<el-button type="primary" @click="disable()">禁用</el-button>
|
<el-button type="primary" @click="resetPassword()">密码重置</el-button>
|
</div>
|
<div style="clear:both"></div>
|
</div>
|
<!-- 表单 -->
|
<div class="tab">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
first
|
>
|
<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:jurisdictionContentList ="{scope}">
|
<span :title="scope.jurisdictionContentList.join(',')" v-if="scope.jurisdictionContentList">{{ scope.jurisdictionContentList.join(",")}}</span>
|
</template>
|
<template v-slot:status ="{scope}">
|
<span>{{scope.status == '1' ? '启用' : '禁用'}}</span>
|
</template>
|
<template v-slot:btn="{scope}">
|
<div class="table_flex">
|
<span @click="seeDetails(scope)">查看</span>
|
<span @click="onEdit(scope)">修改</span>
|
<span @click="deletes(scope.id)">删除</span>
|
</div>
|
</template>
|
</v-tool-table>
|
</div>
|
<!-- 分页 -->
|
<div class="page">
|
<el-pagination
|
:current-page="paginationParams.currentPage"
|
:page-size="paginationParams.pageSize"
|
:page-sizes="[5, 10, 20, 50, 100]"
|
background
|
layout="total,prev,pager,next,sizes,jumper"
|
:total="paginationParams.total"
|
@size-change="onPageSizeChange"
|
@current-change="onPaginationChange">
|
</el-pagination>
|
</div>
|
<!-- 新增弹窗 -->
|
<AddModel
|
v-model="isShow"
|
@change="details = {}, isShow = false"
|
:positionList="positionList"
|
@success="onEditSuccess"
|
:detail="details" />
|
<!-- 编辑弹窗 -->
|
<EditModel
|
v-model="isShowEdit"
|
@change="details = {}, isShowEdit = false"
|
:positionList="positionList"
|
@success="onEditSuccess"
|
:detail="details" />
|
<!-- 查看弹窗 -->
|
<SeeModel v-model="isShowSee" :seedata="details" @change="details = {}, isShowSee = false" />
|
</div>
|
</template>
|
<script>
|
import AddModel from "./components/AddModel.vue";
|
import SeeModel from "./components/SeeModel.vue";
|
import EditModel from "./components/editModel.vue";
|
export default {
|
props: [],
|
components: {AddModel, SeeModel,EditModel},
|
data() {
|
return {
|
search: {
|
keyword:'',
|
position:'',
|
},
|
paramsDeletes:{},
|
positionList:[
|
{
|
label:"全部",
|
value:'全部',
|
},
|
{
|
label:"居民小组长",
|
value:'居民小组长',
|
},
|
{
|
label:"楼栋长",
|
value:"楼栋长",
|
},
|
{
|
label:"党小组长",
|
value:"党小组长",
|
},
|
{
|
label:"妇女小组长",
|
value:"妇女小组长",
|
},
|
{
|
label:"宣传员",
|
value:"宣传员",
|
},
|
{
|
label:"监督员",
|
value:"监督员",
|
},
|
{
|
label:"调解员",
|
value:"调解员",
|
},
|
{
|
label:"安全员",
|
value:"安全员",
|
}
|
],
|
jurisdictionOptionList: [],
|
trs: [
|
{ text: "序号", val: "index",width:"80px" },
|
{ text: "姓名", val: "name" },
|
{ text: "职位", val: "position" },
|
{ text: "联系电话", val: "phone" },
|
{ text: "账号", val: "account" },
|
{ text: "身份证号码", val: "idCard" },
|
{ text: "管辖区域", val: "btn",slot:'jurisdictionContentList',width:"250px" },
|
{ text: "状态", val: "btn",slot:"status" },
|
{ text: "操作", val: "btn" ,slot:"btn",width:"150px"},
|
],
|
tds: [],
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
Change:false, //默认都不选中
|
ids:[], //选中的id集合
|
userIds:[], //选中的userid集合
|
alls: false, //全选状态
|
isShow:false,
|
isShowSee:false,
|
isShowEdit:false,
|
details: {},
|
};
|
},
|
|
|
mounted() {
|
this.init();
|
},
|
|
methods: {
|
onEdit (data) {
|
this.details = data;
|
this.isShowEdit = true;
|
},
|
|
/** pageSize 改变时会触发 */
|
onPageSizeChange (pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
|
/** 分页 */
|
onPaginationChange (page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
|
/** 编辑和新增弹窗确认后 初始化数据 */
|
onEditSuccess() {
|
this.init();
|
},
|
/** 新增 */
|
add() {
|
this.isShow = true;
|
},
|
|
/** 查看 */
|
seeDetails(d) {
|
this.details = d;
|
this.isShowSee = true;
|
// this.$api.get(`comActFourMember/${d}`,{},e=> {
|
// this.details = e;
|
// console.log(e)
|
// })
|
},
|
|
deletes(id) {
|
if(!this.ids.length && !id) {
|
return demo.toast("请勾选需要删除的数据")
|
} else{
|
this.$confirm('确定要删除该人员吗？ 温馨提示：删除后该人员所管辖的区域将无人', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
if(id) {
|
this.paramsDeletes = {
|
"id":id
|
}
|
}else {
|
this.paramsDeletes = {
|
"ids":this.ids
|
}
|
}
|
this.$api.post("comActFourMember/del", this.paramsDeletes, e => {
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
this.ids = [];
|
this.init();
|
});
|
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
}
|
},
|
|
enable() {
|
console.log(this.ids)
|
if(!this.ids.length) {
|
return demo.toast("请勾选需要启用的人员")
|
} else{
|
this.$confirm('确定要启用所选人员吗？温馨提示：启用后该人员将可以正常登录使用相关功能', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let params = {
|
ids :this.ids,
|
status:1,
|
}
|
this.$api.post("comActFourMember/update", params, e => {
|
this.$message({
|
type: 'success',
|
message: '启用成功!'
|
});
|
this.ids = [];
|
this.init();
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消启用'
|
});
|
});
|
}
|
},
|
|
disable() {
|
if(!this.ids.length) {
|
return demo.toast("请勾选需要禁用的人员")
|
} else{
|
this.$confirm('确定要禁用所选人员吗？温馨提示：禁用后该人员将无法使用相关功能', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let params = {
|
ids :this.ids,
|
status:2,
|
}
|
this.$api.post("comActFourMember/update", params, e => {
|
this.$message({
|
type: 'success',
|
message: '禁用成功!'
|
});
|
this.ids = [];
|
this.init();
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消禁用'
|
});
|
});
|
}
|
},
|
|
resetPassword() {
|
if(!this.ids.length) {
|
return demo.toast("请勾选需要密码重置的数据")
|
} else{
|
this.$prompt('登录密码', '密码重置', {
|
inputPlaceholder:'请输入新的密码',
|
inputValidator: (val) => { // 点击按钮时，对文本框里面的值进行验证
|
if (val === null) {
|
return '登录密码不能为空';
|
}
|
var passwordValue = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
|
if(!passwordValue.test(val)) {
|
return '登录密码为6-12个字符，且必须包含英文和数字';
|
}
|
}
|
}).then((val) => {
|
|
this.$api.get("resetPasswordPatch", {userIds:this.userIds.toString(),password:val.value}, e => {
|
this.$message({
|
type: 'success',
|
message: '密码重置成功!'
|
});
|
this.ids = [];
|
this.init();
|
});
|
}, () => {
|
});
|
}
|
},
|
|
//条件搜索
|
onSearch(v) {
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
/**搜索条件重置 */
|
Reset() {
|
this.search.keyword = '',
|
this.search.position = '',
|
this.init();
|
},
|
|
/**
|
* 初始化数据获取
|
*/
|
init() {
|
let params = {
|
page: this.paginationParams.currentPage,
|
size: this.paginationParams.pageSize,
|
...this.search
|
}
|
this.$api.post("comActFourMember/queryAll", params, (e) => {
|
this.paginationParams.total = e.total;
|
e.records.map((item,index) => {
|
item.index = (this.paginationParams.currentPage-1) * this.paginationParams.pageSize + index + 1
|
})
|
this.tds = (e.records || []).map((v) => {
|
this.$set(v, 'che', false)
|
return v;
|
});
|
|
});
|
},
|
|
cancel() {
|
//取消
|
this.Change = false;
|
this.alls = false;
|
this.ids = [];
|
this.userIds = [];
|
this.tds.map(item=>{
|
item.che = false
|
})
|
},
|
|
cheAll () {
|
this.Change = !this.Change
|
//全选
|
this.tds.map(item => {
|
item.che = this.alls
|
})
|
this.change()
|
},
|
|
change () {
|
//单个选择
|
this.ids = [];
|
this.userIds = [];
|
this.tds.map(item => {
|
if (item.che) {
|
this.ids.push(item.id);
|
this.userIds.push(item.userId);
|
|
} else {
|
this.alls = false
|
}
|
})
|
},
|
|
},
|
|
};
|
</script>
|
|
<style scoped lang="less">
|
/deep/.el-message-box__message{
|
position: relative;
|
p::before {
|
content: '* ';
|
color: red;
|
position: absolute;
|
}
|
|
}
|
.custom-scroll {
|
overflow: scroll;
|
}
|
.both-box {
|
.Tips {
|
float: left;
|
margin: 10px 0;
|
box-sizing: border-box;
|
width: 240px;
|
display: flex;
|
align-items: center;
|
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;
|
}
|
}
|
.operation-btn {
|
float: right;
|
margin-top: 10px;
|
}
|
}
|
.page {
|
text-align: center;
|
padding: 20px 0;
|
}
|
|
|
</style>
|
