封禁管理-重构
This commit is contained in:
khalil
41
src/api/block/block.js
Normal file
41
src/api/block/block.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
export const page = query => {
|
||||
return request({
|
||||
url: '/admin/block/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const get = query => {
|
||||
return request({
|
||||
url: '/admin/block/get',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const save = query => {
|
||||
return request({
|
||||
url: '/admin/block/save',
|
||||
method: 'post',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const update = query => {
|
||||
return request({
|
||||
url: '/admin/block/update',
|
||||
method: 'post',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const del = query => {
|
||||
return request({
|
||||
url: '/admin/block/delete',
|
||||
method: 'post',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
466
src/views/users/BlockedAdmin.vue
Normal file
466
src/views/users/BlockedAdmin.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<!-- 类型 -->
|
||||
<div class="inquire">
|
||||
<span class="demonstration">类型</span>
|
||||
<el-select v-model="pageParams.type"
|
||||
class="input"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="type in Object.keys(typeMap)"
|
||||
:key="type"
|
||||
:label="typeMap[type]"
|
||||
:value="type"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 名称 -->
|
||||
<div class="inquire">
|
||||
<span class="demonstration">搜索内容</span>
|
||||
<el-input v-model="pageParams.blockValue" placeholder="平台号、手机号、设备号、IP地址、邮箱" class="input" style="width: 360px"></el-input>
|
||||
</div>
|
||||
<!-- 查询按钮 -->
|
||||
<el-button class="primary" type="primary" @click="pageDate"
|
||||
>查询</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="
|
||||
pageParams.type = undefined;
|
||||
pageParams.blockValue = undefined;
|
||||
pageDate();
|
||||
"
|
||||
>重置搜索</el-button>
|
||||
<el-button type="danger" @click="openEditDialog(undefined)"
|
||||
>增加</el-button>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<el-dialog v-model="editDialog.show"
|
||||
v-loading="editDialog.loading"
|
||||
v-model:title="editDialog.title"
|
||||
@close="closeEditDialog"
|
||||
label-width="auto"
|
||||
width="28%" center>
|
||||
<el-form :model="editDialog.obj">
|
||||
<el-form-item label="封禁类型">
|
||||
<el-select v-model="editDialog.obj.blockType"
|
||||
placeholder="请选择类型">
|
||||
<el-option
|
||||
v-for="type in Object.keys(typeMap)"
|
||||
:key="type"
|
||||
:label="typeMap[type]"
|
||||
:value="type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="封禁目标">
|
||||
<el-input v-model="editDialog.obj.blockValue" type="textarea" placeholder="多个号码请使用英文字符,隔开" />
|
||||
</el-form-item>
|
||||
<el-form-item label="封禁状态">
|
||||
<el-select v-model="editDialog.obj.blockStatus"
|
||||
placeholder="请选择">
|
||||
<el-option
|
||||
v-for="type in Object.keys(blockStatusMap)"
|
||||
:key="type"
|
||||
:label="blockStatusMap[type]"
|
||||
:value="type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="封禁原因">
|
||||
<el-input v-model="editDialog.obj.blockDesc" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker v-model="editDialog.obj.blockStartTime" type="datetime" value-format="YYYY-MM-DD HH:mm"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker v-model="editDialog.obj.blockEndTime" type="datetime" value-format="YYYY-MM-DD HH:mm"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作备注">
|
||||
<el-input v-model="editDialog.obj.remark" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeEditDialog">取消</el-button>
|
||||
<el-button v-loading="editDialog.loading" type="primary" @click="saveObj">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-loading="unblockDialog.loading"
|
||||
v-model="unblockDialog.show"
|
||||
title="确定"
|
||||
@close="closeUnblockDialog"
|
||||
width="30%"
|
||||
>
|
||||
<span>确定要解封 {{ unblockDialog.blockValue }} 吗？</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeUnblockDialog">取消</el-button>
|
||||
<el-button v-loading="unblockDialog.loading" type="primary" @click="confirmUnblock">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
v-loading="table.loading"
|
||||
:data="table.data"
|
||||
ref="multipleTable"
|
||||
border
|
||||
style="width: 100%; margin-top: 25px"
|
||||
>
|
||||
<el-table-column prop="blockValue" align="center" label="封禁目标" width="320px" />
|
||||
<el-table-column prop="blockType" align="center" label="封禁类型" >
|
||||
<template v-slot="scope">
|
||||
{{getBlockTypeDesc(scope.row.blockType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="blockStartTime" align="center" label="封禁开始时间" />
|
||||
<el-table-column prop="blockEndTime" align="center" label="封禁结束时间" />
|
||||
<el-table-column prop="blockStatus" align="center" label="封禁状态" >
|
||||
<template v-slot="scope">
|
||||
<el-tag v-if="scope.row.blockStatus === 1" type="danger">
|
||||
{{getBlockStatusDesc(scope.row.blockStatus) }}
|
||||
</el-tag>
|
||||
<el-tag v-else type="success">
|
||||
{{getBlockStatusDesc(scope.row.blockStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="blockDesc" align="center" label="封禁原因" />
|
||||
<el-table-column prop="adminName" align="center" label="管理员" />
|
||||
<el-table-column align="center" label="操作">
|
||||
<template v-slot="scope">
|
||||
<el-button v-if="scope.row.blockStatus === 1" type="primary" @click="openUnblockDialog(scope.row.blockValue)">解封</el-button>
|
||||
<el-button @click="openEditDialog(scope.row.blockValue)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
style="margin-top: 10px"
|
||||
class="paginationClass"
|
||||
v-model:current-page="table.pageNum"
|
||||
v-model:page-size="table.pageSize"
|
||||
:page-sizes="[20, 50, 100, 200, 500]"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="table.total"
|
||||
@size-change="pageDate"
|
||||
@current-change="pageDate"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 声明额外的选项
|
||||
export default {
|
||||
name: "BlockedAdmin",
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import {onMounted, reactive} from "vue";
|
||||
import {
|
||||
page, get, save, update, del,
|
||||
} from "@/api/block/block";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const typeMap = {
|
||||
"1": "平台号",
|
||||
"2": "手机号",
|
||||
"3": "设备号",
|
||||
"4": "IP地址",
|
||||
"6": "邮箱",
|
||||
}
|
||||
|
||||
const getBlockTypeDesc = (type) => {
|
||||
return typeMap[type] || "未知";
|
||||
}
|
||||
|
||||
const blockStatusMap = {
|
||||
1: "封禁中",
|
||||
2: "封禁结束",
|
||||
}
|
||||
|
||||
const getBlockStatusDesc = (type) => {
|
||||
return blockStatusMap[type] || "未知";
|
||||
}
|
||||
|
||||
const emptyObj = {
|
||||
blockValue: undefined,
|
||||
blockType: "1",
|
||||
blockStartTime: undefined,
|
||||
blockEndTime: undefined,
|
||||
blockStatus: "1",
|
||||
blockDesc: undefined,
|
||||
remark: undefined,
|
||||
}
|
||||
|
||||
const editDialog = reactive({
|
||||
show: false,
|
||||
loading: false,
|
||||
title: "",
|
||||
obj: Object.assign({}, emptyObj),
|
||||
})
|
||||
|
||||
const openEditDialog = (blockValue) => {
|
||||
editDialog.show = true;
|
||||
editDialog.title = "新增";
|
||||
editDialog.obj.blockStartTime = new Date().format("yyyy-MM-dd hh:mm");
|
||||
|
||||
if (blockValue){
|
||||
editDialog.title = "编辑";
|
||||
editDialog.loading = true;
|
||||
const params = { blockValue }
|
||||
get(params).then((res) => {
|
||||
if (res.code !== 200){
|
||||
throw Error(res.message);
|
||||
}
|
||||
if (!res.data){
|
||||
throw Error("获取不到记录");
|
||||
}
|
||||
|
||||
const data = res.data;
|
||||
data.blockType = data.blockType.toString();
|
||||
data.blockStatus = data.blockStatus.toString();
|
||||
|
||||
editDialog.obj = data;
|
||||
|
||||
}).catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: err,
|
||||
type: "error",
|
||||
});
|
||||
}).finally(()=>{
|
||||
editDialog.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const closeEditDialog = () => {
|
||||
editDialog.show = false;
|
||||
editDialog.obj = Object.assign({}, emptyObj);
|
||||
}
|
||||
|
||||
function validObj(obj) {
|
||||
let valid = false;
|
||||
try{
|
||||
if (!obj.blockType || !typeMap[obj.blockType]){
|
||||
throw Error("请选择封禁类型");
|
||||
}
|
||||
if (!obj.blockValue || obj.blockValue === ''){
|
||||
throw Error("请输入封禁目标");
|
||||
}
|
||||
obj.blockValue = obj.blockValue.trim();
|
||||
if (!obj.blockType || !typeMap[obj.blockType]){
|
||||
throw Error("请选择封禁状态");
|
||||
}
|
||||
if (!obj.blockDesc || obj.blockDesc === ''){
|
||||
throw Error("请输入原因");
|
||||
}
|
||||
if (!obj.blockStartTime || obj.blockStartTime === ''){
|
||||
throw Error("请输入开始时间");
|
||||
}
|
||||
if (!obj.blockEndTime || obj.blockEndTime === ''){
|
||||
throw Error("请输入结束时间");
|
||||
}
|
||||
if (!obj.blockDesc || obj.blockDesc === ''){
|
||||
throw Error("请输入封禁原因");
|
||||
}
|
||||
valid = true;
|
||||
} catch (e) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: e,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
|
||||
return valid;
|
||||
}
|
||||
|
||||
const saveObj = () => {
|
||||
// valid
|
||||
if (!validObj(editDialog.obj)){
|
||||
return
|
||||
}
|
||||
|
||||
editDialog.loading = true;
|
||||
const func = editDialog.title === '新增' ? save: update;
|
||||
func(editDialog.obj).then((res) => {
|
||||
if (res.code !== 200 || !res.data){
|
||||
throw Error(res.message);
|
||||
}
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: "success",
|
||||
});
|
||||
closeEditDialog();
|
||||
pageDate();
|
||||
}).catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: err,
|
||||
type: "error",
|
||||
});
|
||||
}).finally(() => {
|
||||
editDialog.loading = false;
|
||||
})
|
||||
}
|
||||
|
||||
const unblockDialog = reactive({
|
||||
show: false,
|
||||
loading: false,
|
||||
blockValue: undefined,
|
||||
})
|
||||
|
||||
const openUnblockDialog = (blockValue) => {
|
||||
unblockDialog.show = true;
|
||||
unblockDialog.blockValue = blockValue;
|
||||
}
|
||||
|
||||
const closeUnblockDialog = () => {
|
||||
unblockDialog.show = false;
|
||||
unblockDialog.blockValue = undefined;
|
||||
}
|
||||
|
||||
const confirmUnblock = () => {
|
||||
if (!unblockDialog.blockValue){
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "请选择要解封的记录",
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
unblockDialog.loading = true;
|
||||
const params = { blockValue: unblockDialog.blockValue }
|
||||
del(params).then((res) => {
|
||||
if (res.code !== 200 || !res.data){
|
||||
throw Error(res.message);
|
||||
}
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "解封成功",
|
||||
type: "success",
|
||||
});
|
||||
closeUnblockDialog();
|
||||
pageDate();
|
||||
}).catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: err,
|
||||
type: "error",
|
||||
});
|
||||
}).finally(() => {
|
||||
unblockDialog.loading = false;
|
||||
})
|
||||
}
|
||||
|
||||
const pageParams = reactive({
|
||||
type: undefined,
|
||||
blockValue: undefined,
|
||||
})
|
||||
|
||||
const table = reactive({
|
||||
loading: false,
|
||||
data: [],
|
||||
total: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
})
|
||||
|
||||
const pageDate = () =>{
|
||||
table.loading = true;
|
||||
const params = Object.assign({}, pageParams, {pageNum: table.pageNum, pageSize: table.pageSize})
|
||||
page(params).then((res) => {
|
||||
if (res.code !== 200){
|
||||
throw Error(res.message);
|
||||
}
|
||||
table.data = res.data.records;
|
||||
table.total = res.data.total;
|
||||
}).catch((err) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: err,
|
||||
type: "error",
|
||||
});
|
||||
}).finally(()=>{
|
||||
table.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
pageDate();
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
padding-top: 20px;
|
||||
background: #ecf0f5;
|
||||
.inquire {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.input {
|
||||
width: 180px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.dialogTableVisibleBut {
|
||||
display: block;
|
||||
margin: 30px 0 0 830px;
|
||||
}
|
||||
.paginationClass {
|
||||
margin: 15px 0 5px 0px;
|
||||
}
|
||||
}
|
||||
.selectBox {
|
||||
display: flex;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.selectBoxImg {
|
||||
height: 150px;
|
||||
}
|
||||
.pagination {
|
||||
margin: 10px auto 10px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.pagination_in {
|
||||
text-align: center;
|
||||
}
|
||||
.dialogBox {
|
||||
width: 100%;
|
||||
// height: 50px;
|
||||
// line-height: 50px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
.input {
|
||||
width: 50%;
|
||||
}
|
||||
.selectBox {
|
||||
display: flex;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.selectBoxImg {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,536 +0,0 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<div class="box-body">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle"></h1>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div id="table"></div>
|
||||
<div id="toolbar">
|
||||
封禁类型：<select id="blockTypeSearch" name="blockType" class="input-sm">
|
||||
<option value="0">全部</option>
|
||||
<option value="1">平台号</option>
|
||||
<option value="2">手机号</option>
|
||||
<option value="3">设备号</option>
|
||||
<option value="4">IP地址</option>
|
||||
<option value="6">邮箱</option>
|
||||
</select>
|
||||
搜索内容：<input type="text" class="input-sm" name="blockValue" id="blockValueSearch"
|
||||
placeholder="平台号、手机号、设备号、IP地址、邮箱">
|
||||
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>搜索
|
||||
</button>
|
||||
<button id="add" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-plus"></i>增加
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="addAccountBlocked" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||||
aria-hidden="true">x</span></button>
|
||||
<h4 class="modal-title" id="addModalLabel">新增封禁账户</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addBlockForm" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="blockType" class="col-sm-3 control-label">封禁类型：</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="blockTypeList" id="blockType" class="col-sm-4">
|
||||
<option value="1">封禁平台号</option>
|
||||
<option value="2">封禁手机号</option>
|
||||
<option value="3">封禁设备</option>
|
||||
<option value="4">封禁ip</option>
|
||||
<option value="6">封禁邮箱</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="blockValue" class="col-sm-3 control-label">封禁号码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control validate[required]" name="blockValue" id="blockValue"
|
||||
placeholder='多个号码请用,隔开'>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="blockDesc" class="col-sm-3 control-label">封禁原因：</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control validate[required]" name="blockDesc" id="blockDesc">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="wallStatus" class="col-sm-3 control-label">是否上墙：</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="wallStatus" id="wallStatus" class="col-sm-4">
|
||||
<option value="1">上墙</option>
|
||||
<option value="0">不上墙</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="addStartDate" class="col-sm-3 control-label">起始时间：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="addStartDate" type="text" name="startTime" disabled="disabled"
|
||||
class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addEndDate" class="col-sm-3 control-label">结束时间：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="addEndDate" type="text" name="endTime"
|
||||
class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="remark" class="col-sm-3 control-label">备注：</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control validate[required]" name="remark" id="remark">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" id="addSave">封禁</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="editModel" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||||
aria-hidden="true">x</span></button>
|
||||
<h4 class="modal-title" id="modalLabel"> 修改封禁信息</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="updateBlock">
|
||||
<input type="hidden" name="row" id="rowId" />
|
||||
<div class="form-group">
|
||||
<label for="updateReason" class="col-sm-3 control-label">封禁原因:</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="updateReason" name="updateReason" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="blockStatus1" class="col-sm-3 control-label">封禁状态:</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="blockStatus1" id="blockStatus1" class="col-sm-4">
|
||||
<option value="1">封禁中</option>
|
||||
<option value="2">封禁结束</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="wallStatus1" class="col-sm-3 control-label">是否上墙：</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="wallStatus1" id="wallStatus1" class="col-sm-4">
|
||||
<option value="1">上墙</option>
|
||||
<option value="0">不上墙</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="form-horizontal" id="updateFormTime">
|
||||
<div class="form-group">
|
||||
<label for="startDate" class="col-sm-3 control-label">起始时间:</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="startDate" name="startValidTime" disabled="disabled"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="endDate" class="col-sm-3 control-label">结束时间:</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="endDate" name="endValidTime" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="remark1" class="col-sm-3 control-label">备注:</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="remark1" name="remark1" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="saveUpdate">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "BlockedAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
/*初始化*/
|
||||
var picker3 = $('#addEndDate').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii',
|
||||
autoclose: true,
|
||||
startDate: new Date()
|
||||
})
|
||||
|
||||
var picker2 = $('#endDate').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii',
|
||||
autoclose: true,
|
||||
startDate: new Date()
|
||||
})
|
||||
$(function () {//默认时间
|
||||
var todayDate = new Date();
|
||||
var minute = todayDate.getMinutes() < 10 ? "0" + todayDate.getMinutes() : todayDate.getMinutes();
|
||||
var month = (todayDate.getMonth() + 1) < 10 ? "0" + (todayDate.getMonth() + 1) : (todayDate.getMonth() + 1);
|
||||
var todayDateStr = todayDate.getFullYear() + "-" + month + "-" + todayDate.getDate() + " " + todayDate.getHours() + ":" + minute;
|
||||
$("#addStartDate").val(todayDateStr);
|
||||
$("#startDate").val(todayDateStr);
|
||||
})
|
||||
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'blockValue', title: 'id', align: 'center', valign: 'middle', width: '0%' },
|
||||
{
|
||||
field: 'blockType',
|
||||
title: '封禁类型',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '封禁平台号';
|
||||
case 2:
|
||||
return '封禁手机号';
|
||||
case 3:
|
||||
return "封禁设备";
|
||||
case 4:
|
||||
return "封禁IP";
|
||||
case 6:
|
||||
return "封禁邮箱";
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'blockStartTime',
|
||||
title: '封禁开始时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
// formatter: function (val, row, index) {
|
||||
// if (val) {
|
||||
// var date = new Date(val);
|
||||
// return date.format("yyyy-MM-dd hh:mm");
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{
|
||||
field: 'blockEndTime',
|
||||
title: '封禁结束时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
// formatter: function (val, row, index) {
|
||||
// if (val) {
|
||||
// var date = new Date(val);
|
||||
// return date.format("yyyy-MM-dd hh:mm");
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
//
|
||||
// }
|
||||
},
|
||||
{
|
||||
field: 'blockStatus',
|
||||
title: '封禁状态',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '封禁中';
|
||||
|
||||
case 2:
|
||||
return '封禁结束';
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'wallStatus',
|
||||
title: '是否上墙',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == true) {
|
||||
return '上墙';
|
||||
} else {
|
||||
return '不上墙';
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'blockDesc', title: '封禁原因', align: 'center', width: '10%', valign: 'middle' },
|
||||
{ field: 'adminName', title: '管理员', align: 'center', width: '10%', valign: 'middle' },
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
// formatter: function (val, row, index) {
|
||||
// if (val) {
|
||||
// var date = new Date(val);
|
||||
// return date.format("yyyy-MM-dd hh:mm");
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{
|
||||
field: 'tmp',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
var key = row.blockValue;
|
||||
if (row.blockStatus == 1) {
|
||||
return "<button class='btn btn-sm btn-success opt-release' data-id=" + key + ">解封</button> " +
|
||||
"<button class='btn btn-sm btn-success opt-edit' data-id=" + key + " >编辑</button>";
|
||||
} else {
|
||||
return "<button class='btn btn-sm btn-success opt-edit' data-id=" + key + " >编辑</button>";
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'remark', title: '备注', align: 'center', width: '10%', valign: 'middle' }
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 10,
|
||||
pagination: true,
|
||||
pageList: [10, 20, 30, 50],
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
pageSize: params.pageSize,
|
||||
pageNum: params.pageNumber,
|
||||
type: $('#blockTypeSearch').val(),
|
||||
blockValue: $('#blockValueSearch').val()
|
||||
};
|
||||
return param;
|
||||
},
|
||||
uniqueId: 'code',
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/block/list',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/*查询刷新*/
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
})
|
||||
|
||||
|
||||
/*保存*/
|
||||
$('#addSave').on('click', function () {
|
||||
if ($('#addBlockForm').validationEngine('validate')) {
|
||||
$("#tipMsg").text("正在封禁，请稍后");
|
||||
$("#tipModal").modal('show');
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/block/save",
|
||||
data: {
|
||||
blockValue: $("#blockValue").val(),
|
||||
blockDesc: $("#blockDesc").val(),
|
||||
blockType: $("#blockType").val(),
|
||||
blockStartTime: $('#addStartDate').val(),
|
||||
blockEndTime: $('#addEndDate').val(),
|
||||
wallStatus: $('#wallStatus').val(),
|
||||
remark: $('#remark').val()
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.data) {
|
||||
$('#addAccountBlocked').modal('hide');
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败，错误码：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//增加
|
||||
$('#add').on('click', function () {
|
||||
$('#addBlockForm')[0].reset();
|
||||
$('#addAccountBlocked').modal('show');
|
||||
})
|
||||
|
||||
//解封
|
||||
$('#table').on('click', '.opt-release', function () {
|
||||
var key = $(this).data('id');
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/block/delete',
|
||||
data: { blockValue: key },
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.data) {
|
||||
$("#tipMsg").text("解封成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("解封失败，错误信息：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//编辑
|
||||
$('#table').on('click', '.opt-edit', function () {
|
||||
// var key = parseInt($(this).data('id'));
|
||||
var key = $(this).data('id');
|
||||
// 打开编辑弹窗
|
||||
$('#addBlockForm')[0].reset();
|
||||
$("#rowId").val(key);
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
url: '/admin/block/get',
|
||||
data: { blockValue: key },
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
if (res.data) {
|
||||
// var endDay = res.data.endBlockTime;
|
||||
// var time = endDay.format("yyyy-MM-dd hh:mm");
|
||||
$("#updateReason").val(res.data.blockDesc);
|
||||
// $("#endDate").val(res.data.endBlockTime);
|
||||
$("#endDate").val(res.data.blockEndTime);
|
||||
$("#blockStatus1").val(res.data.blockStatus);
|
||||
$("#remark1").val(res.data.remark);
|
||||
if (res.data.wallStatus == true) {
|
||||
$("#wallStatus1").val(1);
|
||||
} else {
|
||||
$("#wallStatus1").val(0);
|
||||
}
|
||||
$("#editModel").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
//编辑弹窗保存
|
||||
$("#saveUpdate").click(function () {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/block/update',
|
||||
data: {
|
||||
blockValue: $("#rowId").val(),
|
||||
blockStatus: $("#blockStatus1").val(),
|
||||
wallStatus: $("#wallStatus1").val(),
|
||||
blockStartTime: $('#startDate').val(),
|
||||
blockEndTime: $('#endDate').val(),
|
||||
blockDesc: $('#updateReason').val(),
|
||||
remark: $('#remark1').val()
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.data) {
|
||||
$("#editModel").modal('hide');
|
||||
$("#tipMsg").text("修改成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("修改失败，错误码：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar1,
|
||||
.bar2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label.col-sm-1 {
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
/*padding-right: 4px;*/
|
||||
}
|
||||
|
||||
label.col-sm-1 {
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
/*padding-right: 4px;*/
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#btnSearch {
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
.record {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.record .title {
|
||||
font-size: 16px;
|
||||
}</style>
|
||||
Reference in New Issue
Block a user