356 lines
9.0 KiB
Vue
356 lines
9.0 KiB
Vue
<template>
|
|
<div class="outer">
|
|
<!-- 搜索 -->
|
|
<div class="search">
|
|
<div class="searchLeft">
|
|
<span>用户平台ID</span>
|
|
<el-input
|
|
v-model="userId"
|
|
size="default"
|
|
placeholder="用户平台ID"
|
|
class="input"
|
|
></el-input>
|
|
</div>
|
|
<div class="searchRight">
|
|
<span>用户手机号</span>
|
|
<el-input
|
|
v-model="userPhone"
|
|
size="default"
|
|
placeholder="用户手机号"
|
|
class="input"
|
|
></el-input>
|
|
</div>
|
|
</div>
|
|
<!-- 按钮 -->
|
|
<div class="buttonBox">
|
|
<el-button class="primary" type="primary" size="default" @click="add()"
|
|
>新增</el-button
|
|
>
|
|
<el-button class="primary" type="primary" size="default" @click="search()"
|
|
>查询</el-button
|
|
>
|
|
</div>
|
|
<!-- 列表 -->
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%; margin-top: 25px"
|
|
>
|
|
<el-table-column prop="erbanNo" align="center" label="用戶id" />
|
|
<el-table-column prop="phone" align="center" label="用戶手机号" />
|
|
<el-table-column prop="nick" align="center" label="昵称" />
|
|
<el-table-column prop="signTime" align="center" label="注册时间" />
|
|
<el-table-column prop="roleName" align="center" label="身份" />
|
|
<el-table-column prop="createTime" align="center" label="进入白名单时间" />
|
|
<el-table-column prop="lastCheckTime" align="center" label="最近一次访问时间" />
|
|
<el-table-column align="center" label="进入白名单来源">
|
|
<template v-slot="scope">
|
|
{{
|
|
scope.row.source == 1
|
|
? "手动添加"
|
|
: scope.row.source == 2
|
|
? "手机号申请通过"
|
|
: scope.row.source == 3
|
|
? "限制访问记录添加"
|
|
: "未知来源"
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="adminName" align="center" label="操作人" />
|
|
<el-table-column align="center" label="操作" width="300">
|
|
<template v-slot="scope">
|
|
<el-button
|
|
@click="delWhite(scope.row)"
|
|
class="primary"
|
|
type="primary"
|
|
size="default"
|
|
>移除白名单</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
style="margin-top: 10px"
|
|
class="paginationClass"
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="pageSize"
|
|
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
|
|
:small="small"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="sizes, prev, pager, next"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
<!-- 公共二次确认删除弹窗 -->
|
|
<el-dialog v-model="delDialog" title="提示" width="30%" center>
|
|
<span> {{ delDialogText }}</span>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="delDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="sureClick(val, type)"> 确认 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
<!-- 添加弹窗 -->
|
|
<el-dialog v-model="addSure" title="提示" width="30%" center>
|
|
<div class="selectBox">
|
|
<span class="left">添加号码类型</span>
|
|
<el-select
|
|
v-model="value"
|
|
fit-input-width="true"
|
|
placeholder="请选择"
|
|
class="right"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="selectBox" v-if="value == 1">
|
|
<span class="left">用户ID</span>
|
|
<el-input
|
|
v-model="selectUserId"
|
|
size="default"
|
|
placeholder="用户平台ID"
|
|
class="right"
|
|
></el-input>
|
|
</div>
|
|
<div class="selectBox" v-else>
|
|
<span class="left">手机号</span>
|
|
<el-input
|
|
v-model="selectUserPhone"
|
|
size="default"
|
|
placeholder=""
|
|
class="right"
|
|
style="width: 56%"
|
|
>
|
|
</el-input>
|
|
<b>+86</b>
|
|
</div>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="addSure = false">取消</el-button>
|
|
<el-button type="primary" @click="addSureClick()"> 添加 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
whitePage,
|
|
whiteDel,
|
|
whiteSave,
|
|
} from "@/api/AccessRestriction.vue/AccessRestriction.js";
|
|
import { ElMessage } from "element-plus";
|
|
export default {
|
|
name: "AccessWhitelist",
|
|
data() {
|
|
return {
|
|
userId: "", //用戶id
|
|
userPhone: "", //用戶手机号
|
|
loading: false, //列表loading
|
|
tableData: [], //列表数据
|
|
total: 10, //总页数
|
|
currentPage: 1, //页码
|
|
pageSize: 10, //条数
|
|
delDialog: false, //控制公共弹窗展示
|
|
delDialogText: "确定要移除白名单吗?", //公共弹窗标题
|
|
addSure: false, //控制确认添加弹窗展示
|
|
value: "1", //选择器
|
|
options: [
|
|
{
|
|
value: "1",
|
|
label: "用户id",
|
|
},
|
|
{
|
|
value: "2",
|
|
label: "用户手机号",
|
|
},
|
|
],
|
|
selectUserId: "", //添加弹窗用户id
|
|
selectUserPhone: "", //添加弹窗用户手机号
|
|
obj: {}, //存放公共参数
|
|
};
|
|
},
|
|
created() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
getData() {
|
|
this.loading = true;
|
|
whitePage({
|
|
page: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
userErBanNo: this.userId,
|
|
phone: this.userPhone,
|
|
}).then((res) => {
|
|
this.tableData = res.data.records;
|
|
this.loading = false;
|
|
this.total = res.data.total;
|
|
});
|
|
},
|
|
// 新增
|
|
add() {
|
|
this.addSure = true;
|
|
},
|
|
// 搜索
|
|
search() {
|
|
this.getData();
|
|
},
|
|
// 移除白名单
|
|
delWhite(row) {
|
|
console.log(row);
|
|
this.obj = row;
|
|
this.delDialog = true;
|
|
},
|
|
// 二次确认
|
|
sureClick() {
|
|
whiteDel({ id: this.obj.id }).then((res) => {
|
|
if (res.code == 200) {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
this.getData();
|
|
} else {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
this.delDialog = false;
|
|
});
|
|
},
|
|
// 添加确认
|
|
addSureClick() {
|
|
var objs = {};
|
|
if (this.value == 1) {
|
|
objs = {
|
|
userErBanNoStr: this.selectUserId,
|
|
};
|
|
} else {
|
|
let phone = this.selectUserPhone;
|
|
if (phone) {
|
|
phone = '86' + phone;
|
|
}
|
|
objs = {
|
|
phone: phone,
|
|
};
|
|
}
|
|
whiteSave(objs).then((res) => {
|
|
this.selectUserId = "";
|
|
this.selectUserPhone = "";
|
|
if (res.code == 200) {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
this.getData();
|
|
} else {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
this.getData();
|
|
});
|
|
this.addSure = false;
|
|
},
|
|
// 分页导航
|
|
handleSizeChange(val) {
|
|
this.getData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.getData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.outer {
|
|
padding-top: 20px;
|
|
background: #ecf0f5;
|
|
border-top: 3px solid #d2d6de;
|
|
.search {
|
|
width: 100%;
|
|
height: 41px;
|
|
.searchLeft,
|
|
.searchRight {
|
|
width: 20%;
|
|
float: left;
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
.input {
|
|
width: 75%;
|
|
}
|
|
}
|
|
}
|
|
.buttonBox {
|
|
margin-top: 10px;
|
|
}
|
|
.authorityBox {
|
|
.authoritySpan {
|
|
margin-right: 20px;
|
|
}
|
|
.authorityInpput {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.dialogTableVisibleBut {
|
|
margin: -25px 0 20px 0px;
|
|
}
|
|
.selectBox {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 70%;
|
|
.left {
|
|
display: block;
|
|
margin-right: 25px;
|
|
white-space: nowrap;
|
|
}
|
|
.right {
|
|
width: 70%;
|
|
position: relative;
|
|
}
|
|
|
|
b {
|
|
font-style: normal;
|
|
position: absolute;
|
|
left: 135px;
|
|
width: 54px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-top-left-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
border-right: 1px solid #dcdfe6;
|
|
border-left: 1px solid #dcdfe6;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
border-top: 1px solid #dcdfe6;
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
input[type="file"] {
|
|
display: none;
|
|
}
|
|
</style>
|