<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">
<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>
</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,
},
};
},
created () {
this.employeeId = JSON.parse(localStorage.getItem("employeeId"));
this.departmentId = localStorage.getItem("departmentId");
},
// 页面销毁生命周期方法
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();
},
},
};
</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>
