<template>
<div class="wh main bxs">
<div class="header bxs w">
<van-row>
<van-col @click="backFn" span="8" class="f18 corm pl10"
><van-icon name="arrow-left" class="corm" />返回</van-col
>
<van-col span="8" class="tc f20">用户管理</van-col>
<van-col span="8" class="tr f16 pr10 corm">
<span @click="addFn">新增</span>
</van-col>
</van-row>
</div>
<div class="wh bxs content">
<div class="contentSea bxs w">
<div class="search_condition f12" @click="showFilterFn">
<span>筛选</span>
<van-icon name="filter-o" />
</div>
<van-search
v-model="bizTitle"
placeholder="输入用户名/登录账号/身份证号搜索"
@search="onSearch"
/>
</div>
<!-- main.js 引入注册 -->
<scroller
:on-infinite="infinite"
:noDataText="noDataText"
class="bxs p10 h"
ref="myscroller"
>
<div class="contentList bxs w ptnew">
<van-swipe-cell v-for="(item, i) of tableData" :key="i">
<div class="w p10 list bxs mb10" @click="detailFn(item)">
<div class="list-item">
<div class="f16 titleInfo flex">
<span class="text_1">{{ item.nickName }}</span>
</div>
<div class="f12 mt5">
{{ item.userName }}
</div>
<div class="list-item-lf bxs p10 bgcm">
<div class="wh flexca">
<van-icon name="manager" size="25" />
</div>
</div>
<div class="list-item-rt bxs p10 bgf f12">
<div class="h flexca" style="color: #2e7cf9">
<span>
<i class="iconfont icon-ticket_renlianshibie"> </i>
信息登记</span
>
<span class="ml10 f13"
><van-icon name="more-o" class="f16" /> 操作</span
>
</div>
</div>
</div>
</div>
<template #right>
<van-button
square
style="margin-left: 1px"
type="info"
text="删除"
class="delete-button"
@click="deleteFn(item)"
/>
</template>
</van-swipe-cell>
</div>
</scroller>
</div>
<!-- 筛选组14 -->
<van-popup
class="page-filter"
v-model="showFilter"
position="bottom"
:style="{ height: '450px' }"
>
<div class="filter-header tc f20 pt20">全部筛选</div>
<div class="filter-content">
<div>
<div class="pl10 pr10 pb10 f14">是否录入人脸</div>
<div class="pl10 pr10 pb10">
<span
:class="
filterObj.identity === true
? 'filter-tag filter-tag-active '
: 'filter-tag'
"
@click="filterObjChangeFn(1, true)"
>是</span
>
<span
:class="
filterObj.identity === false
? 'filter-tag filter-tag-active '
: 'filter-tag'
"
@click="filterObjChangeFn(1, false)"
>否</span
>
</div>
</div>
<div>
<div class="pl10 pr10 pb10 f14">用户类型</div>
<div class="pl10 pr10 pb10">
<span
:class="
filterObj.dataType === 0
? 'filter-tag filter-tag-active'
: 'filter-tag'
"
@click="filterObjChangeFn(2, 0)"
>内部用户</span
>
<span
:class="
filterObj.dataType === 1
? 'filter-tag filter-tag-active'
: 'filter-tag'
"
@click="filterObjChangeFn(2, 1)"
>外部用户</span
>
</div>
</div>
<div>
<div class="pl10 pr10 pb10 f14">按单位筛选</div>
<div class="pl10 pr10 pb10">
<span
:class="'filter-tag'"
@click="mechanismChangeFn(1)"
v-if="filterObj.companyIds.length == 0"
>选择机构</span
>
<span
@click="mechanismChangeFn(1)"
class="filter-tag filter-tag-active"
v-else
>{{ filterObj.companyNames }}</span
>
<span v-if="filterObj.companyIds.length > 0">
<span
v-if="!filterObj.deptIds || filterObj.deptIds.length == 0"
:class="'filter-tag'"
@click="mechanismChangeFn(2)"
>选择部门</span
>
<span
@click="mechanismChangeFn(2)"
class="filter-tag filter-tag-active"
v-else
>{{ filterObj.deptNames }}</span
>
</span>
</div>
</div>
<div>
<div class="pl10 pr10 pb10 f14">职务筛选</div>
<div class="pl10 pr10 pb10">
<span
:class="'filter-tag'"
@click="companyChangeFn"
v-if="!filterObj.postValues || filterObj.postValues.length == 0"
>选择职务</span
>
<span
@click="companyChangeFn"
class="filter-tag filter-tag-active"
v-else
>{{ filterObj.postValuesName }}</span
>
</div>
</div>
</div>
<div class="filter-btm-btn flexca bxs pb20 f14">
<div class="btn_l btn" @click="reSetFn">重置</div>
<div class="btn_r btn" @click="complageFn">完成</div>
</div>
</van-popup>
</div>
</template>
<script>
import {
getUserQueryList,
delByUserIds,
} from "@/api/mine_userManage";
import {
getDictTypeList,
} from "@/api/sys";
// 状态关联关键词*
// 筛选组
export default {
data () {
return {
bizTitle: "",//搜索参数
tableData: [],//列表初始化数据
page: {
index: 0,
size: 10,
total: null,
},
// 筛选弹框是否弹起
showFilter: false,
//弹框临时用
filterObj: {
identity: "", //没录入人脸
dataType: "", //0内部 1外部
companyIds: [],//机构id
companyNames: '',
deptIds: [],//部门id
deptNames: '',
postValues: [],//职务
postValuesName: ''
},
//筛选组1 筛选条件
formSearch: {//实际搜索用
identity: "", //没录入人脸
dataType: "", //0内部 1外部
companyIds: [],
companyNames: '',
deptIds: [],
deptNames: '',
postValues: [],
},
//筛选组--2 start
formSearchCopy: {}, //备份重置用
companyShow: false,
haveFilter: false,
noDataTextEnd: "没有更多数据了",
noDataText: "",
positions: [],//职务列表
//筛选组2-- end
};
},
created () {
//筛选组3
this.formSearchCopy = JSON.parse(JSON.stringify(this.filterObj));
this.employeeId = JSON.parse(localStorage.getItem("employeeId"));
this.departmentId = localStorage.getItem("departmentId");
//筛选组4
var deptObj = JSON.parse(localStorage.getItem("depId"));
if (deptObj) {
this.showFilter = true;
let selectNames = [];
let selectIds = [];
deptObj.depId.forEach((item) => {
selectNames.push(item.label);
selectIds.push(item.id);
});
if (localStorage.getItem("filterObj")) {
this.filterObj = JSON.parse(
localStorage.getItem("filterObj")
);
}
if (deptObj.name == 'userManageList') {
this.filterObj.companyNames = selectNames.toString();
this.filterObj.companyIds = selectIds;
} else {
this.filterObj.deptNames = selectNames.toString();
this.filterObj.deptIds = selectIds;
}
setTimeout(() => {
localStorage.removeItem("depId");
localStorage.removeItem("filterObj");
}, 50);
}
//筛选组5 筛选条件
if (localStorage.getItem("formSearch")) {
this.haveFilter = true;
this.formSearch = JSON.parse(
localStorage.getItem("formSearch")
);
}
},
// 页面销毁生命周期方法
beforeDestroy () {
this.$toast.clear();
},
methods: {
// 删除
async deleteFn (item) {
const res = await delByUserIds(item.userId);
if (res.code == 200) {
this.$toast.success("刪除成功");
this.page.index = 0;
this.tableData = [];
this.getData();
}
},
// 详情跳转
detailFn (item) {
this.$router
.push({
name: "userManageDetail",
params: {
userId: item.userId,
item: item,
},
})
.then((res) => {
console.log(res);
})
.catch((error) => {
console.log(error);
}); //把error 抛出来;
},
// 新增
addFn () {
this.$router
.push({ name: "userMessAdd" })
.then((res) => {
console.log(res);
})
.catch((error) => {
console.log(error);
}); //把error 抛出来;
},
// 搜索
onSearch () {
this.page = {
index: 0,
size: 10,
total: null,
};
console.log(this.page);
this.$refs.myscroller.finishInfinite(false);
this.tableData = [];
},
infinite (done) {
setTimeout(() => {
this.page.index++;
this.getData(done);
}, 500);
},
// 初始化数据
async getData (done) {
let datVal = {
keyword: this.bizTitle,
...this.formSearch,
pageNum: this.page.index,
pageSize: this.page.size,
};
console.log(this.page.index, "index");
const result = await getUserQueryList(datVal);
if (this.$refs.myscroller) {
this.$refs.myscroller.finishInfinite(true);
}
if (result.data.length < 10) {
this.noDataText = this.noDataTextEnd;
}
if (result.data && result.data.length > 0) {
if (typeof done == "function") {
done();
}
this.tableData = this.tableData.concat(result.data);
console.log(this.tableData, result.data);
if (result.pageNum) {
this.page.index = result.pageNum;
}
this.page.total = result.total;
}
},
backFn () {
this.$router.back();
},
// page筛选组件----------------------------start
// #region
// 筛选组6 职务
async getlistAppointmentType () {
const res = await getDictTypeList('user_post_type', {
dictType: "user_post_type",
status: 0,
});
this.positions = res.data;
},
// 筛选组7 职务 确定
companyOnConfirm (value) {
this.filterObj.postValues = [value.dictValue];
this.filterObj.postValuesName = value.dictLabel;
this.companyShow = false;
this.showFilter = true;
},
//筛选组8 弹出职务
companyChangeFn () {
this.companyShow = true;
},
// 筛选组9 选择机构
mechanismChangeFn (num) {
localStorage.setItem(
"filterObj",
JSON.stringify(this.filterObj)
);
if (num == 1) {
this.$router
.push({
name: "selectdep2",
query: {
name: "userManageList",
depId: this.filterObj.companyIds,
select: true,
},
})
.catch((error) => {
console.log(error);
});
} else {
this.$router
.push({
name: "selectdep2",
query: {
name: "userManageList_dept",
companyIds: this.filterObj.companyIds.toString(),
select: true,
disabledCompany: true
},
})
.catch((error) => {
console.log(error);
});
}
},
//筛选组10 重置
reSetFn () {
this.filterObj = { ...this.formSearchCopy };
localStorage.setItem(
"formSearch",
JSON.stringify(this.formSearchCopy)
);
},
//筛选组11 完成
complageFn () {
this.formSearch = { ...this.filterObj };
if (this.formSearch.companyFilter) {
this.formSearch.companyFilter = JSON.parse(
localStorage.getItem("departmentObj")
).belongToCompanyId;
}
localStorage.setItem(
"formSearch",
JSON.stringify(this.filterObj)
);
this.showFilter = false;
this.onSearch();
},
//筛选组12 完成
filterObjChangeFn (num, type) {
let filterObj = this.filterObj;
if (num == 1) {
filterObj.identity = type;
} else if (num == 2) {
filterObj.dataType = type;
} else {
filterObj.companyFilter = type;
}
this.filterObj = { ...filterObj };
},
//筛选组13 筛选弹框
showFilterFn () {
this.getlistAppointmentType()
this.filterObj = { ...this.formSearch };
this.showFilter = true;
},
// #endregion
// page筛选组件----------------------------end
},
};
</script>
<style lang="scss" scoped>
.contentList.ptnew {
padding-top: 105px;
}
.search_condition {
position: absolute;
top: 15px;
right: 15px;
display: inline-block;
padding: 3px 8px;
background-color: #fff;
border-radius: 5px;
z-index: 999;
}
.main {
position: relative;
.header {
height: 50px;
line-height: 50px;
position: fixed;
background: #fff;
top: 0;
left: 0;
z-index: 100;
}
.content {
background: #f5f8f8;
padding-top: 105px;
.contentSea {
position: fixed;
top: 50px;
left: 0;
background: #fff;
z-index: 100;
}
.contentList {
.list {
background: #fff;
position: relative;
border-radius: 4px;
.list-item {
width: 100%;
box-sizing: border-box;
position: relative;
padding-left: 50px;
}
.list-item-lf {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
border-radius: 50%;
}
.list-item-rt {
position: absolute;
right: 0;
top: 0;
}
// div:nth-child(1) {
// width: 80%;
// }
// .flotDiv {
// position: absolute;
// top: 10px;
// right: 0;
// background: #cc0000;
// color: #fff;
// }
}
}
}
}
.delete-button {
height: 100%;
}
.filter-btm-btn {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding-top: 10px;
.btn {
display: inline-block;
width: 40%;
height: 40px;
line-height: 40px;
background-color: #8a8a8a;
color: #fff;
text-align: center;
}
.btn_l {
border-radius: 20px 0 0 20px;
}
.btn_r {
border-radius: 0 20px 20px 0;
background-color: #2e7cf9;
}
}
</style>
