fix : 修复实施图片
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,195 +1,195 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="form">
|
||||
<el-form-item label="应用名称" prop="applicationName">
|
||||
<el-input
|
||||
v-model="queryParams.applicationName"
|
||||
placeholder="请输入应用名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类名" prop="className">
|
||||
<el-input
|
||||
v-model="queryParams.className"
|
||||
placeholder="请输入类名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="方法名" prop="methodName">
|
||||
<el-input
|
||||
v-model="queryParams.methodName"
|
||||
placeholder="请输入方法名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="table"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<!-- <el-table-column label="序号" type="index" width="60" align="center"/>-->
|
||||
<el-table-column prop="applicationName" label="应用名称" align="center"/>
|
||||
<el-table-column prop="className" label="类名" align="center" width="180" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<el-tooltip placement="top" :show-after="20">
|
||||
<template #content><span style="font-size: 14px">{{scope.row.className}}</span></template>
|
||||
<div>{{ formatterClassName(scope.row.className) }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="methodName" label="方法名" align="center" width="90px"/>
|
||||
<el-table-column prop="type" label="类型" align="center" width="100px">
|
||||
<template #default="scope">
|
||||
<tag dict-type="interface_type" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uris" label="uris" align="center" width="200px" :formatter="formatterUris" :show-overflow-tooltip="true"/>
|
||||
<el-table-column prop="httpMethods" label="方法类型" align="center" width="100px">
|
||||
<template #default="{ row }">
|
||||
<tag v-if="row.httpMethods" dict-type="http_method" :value="arrayToString(row.httpMethods)"/>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operName" label="操作人" align="center"/>
|
||||
<el-table-column prop="operTime" label="变更时间" align="center"/>
|
||||
<el-table-column prop="description" label="描述" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.state" @change="handleEdit(scope.row)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {editMappingSwitch, getMappingList} from "@/api/system/mapping-switch";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
const router = useRouter()
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
const queryParams = reactive({
|
||||
applicationName: "",
|
||||
className: "",
|
||||
methodName: ""
|
||||
});
|
||||
const tree = ref()
|
||||
const table = ref()
|
||||
const total = ref()
|
||||
const loading = ref(true);
|
||||
const form = ref();
|
||||
const list = ref([]);
|
||||
const formatterClassName = (val) => {
|
||||
return val.substring(val.lastIndexOf(".")+1)
|
||||
}
|
||||
const formatterUris = (val) => {
|
||||
return val.uris.map(item => item).join(',')
|
||||
}
|
||||
|
||||
const arrayToString = (arr) => {
|
||||
if(Array.isArray(arr)) return arr.join(',')
|
||||
return arr
|
||||
}
|
||||
const getList = () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getMappingList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
loading.value = false
|
||||
list.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
}else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const handleEdit = (row) => {
|
||||
ElMessageBox.confirm(`确认要修改方法名为'${row.methodName}'接口状态吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
editMappingSwitch({
|
||||
key:row.key,
|
||||
state:row.state
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
form.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-tree {
|
||||
border: 1px solid #ad8383;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
.dialog-tree::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
.dialog-tree::-webkit-scrollbar-track {
|
||||
background: rgb(239, 239, 239);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 小滑块
|
||||
.dialog-tree::-webkit-scrollbar-thumb {
|
||||
background: rgba(80, 81, 82, 0.29);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-tree-select {
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="form">
|
||||
<el-form-item label="应用名称" prop="applicationName">
|
||||
<el-input
|
||||
v-model="queryParams.applicationName"
|
||||
placeholder="请输入应用名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类名" prop="className">
|
||||
<el-input
|
||||
v-model="queryParams.className"
|
||||
placeholder="请输入类名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="方法名" prop="methodName">
|
||||
<el-input
|
||||
v-model="queryParams.methodName"
|
||||
placeholder="请输入方法名"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="table"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<!-- <el-table-column label="序号" type="index" width="60" align="center"/>-->
|
||||
<el-table-column prop="applicationName" label="应用名称" align="center"/>
|
||||
<el-table-column prop="className" label="类名" align="center" width="180" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<el-tooltip placement="top" :show-after="20">
|
||||
<template #content><span style="font-size: 14px">{{scope.row.className}}</span></template>
|
||||
<div>{{ formatterClassName(scope.row.className) }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="methodName" label="方法名" align="center" width="90px"/>
|
||||
<el-table-column prop="type" label="类型" align="center" width="100px">
|
||||
<template #default="scope">
|
||||
<tag dict-type="interface_type" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uris" label="uris" align="center" width="200px" :formatter="formatterUris" :show-overflow-tooltip="true"/>
|
||||
<el-table-column prop="httpMethods" label="方法类型" align="center" width="100px">
|
||||
<template #default="{ row }">
|
||||
<tag v-if="row.httpMethods" dict-type="http_method" :value="arrayToString(row.httpMethods)"/>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operName" label="操作人" align="center"/>
|
||||
<el-table-column prop="operTime" label="变更时间" align="center"/>
|
||||
<el-table-column prop="description" label="描述" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.state" @change="handleEdit(scope.row)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {editMappingSwitch, getMappingList} from "@/api/system/mapping-switch";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
const router = useRouter()
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
const queryParams = reactive({
|
||||
applicationName: "",
|
||||
className: "",
|
||||
methodName: ""
|
||||
});
|
||||
const tree = ref()
|
||||
const table = ref()
|
||||
const total = ref()
|
||||
const loading = ref(true);
|
||||
const form = ref();
|
||||
const list = ref([]);
|
||||
const formatterClassName = (val) => {
|
||||
return val.substring(val.lastIndexOf(".")+1)
|
||||
}
|
||||
const formatterUris = (val) => {
|
||||
return val.uris.map(item => item).join(',')
|
||||
}
|
||||
|
||||
const arrayToString = (arr) => {
|
||||
if(Array.isArray(arr)) return arr.join(',')
|
||||
return arr
|
||||
}
|
||||
const getList = () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getMappingList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
loading.value = false
|
||||
list.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
}else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const handleEdit = (row) => {
|
||||
ElMessageBox.confirm(`确认要修改方法名为'${row.methodName}'接口状态吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
editMappingSwitch({
|
||||
key:row.key,
|
||||
state:row.state
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
form.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-tree {
|
||||
border: 1px solid #ad8383;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
.dialog-tree::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
.dialog-tree::-webkit-scrollbar-track {
|
||||
background: rgb(239, 239, 239);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 小滑块
|
||||
.dialog-tree::-webkit-scrollbar-thumb {
|
||||
background: rgba(80, 81, 82, 0.29);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-tree-select {
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,194 +1,194 @@
|
||||
<template>
|
||||
<el-form inline :model="queryParams" class="query-form" ref="queryInstance">
|
||||
<el-form-item prop="ipAddr" label="IP地址">
|
||||
<el-input v-model="queryParams.ipAddr" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="type" label="IP类型">
|
||||
<el-input v-model="queryParams.type" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dateValue" label="时间">
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="datetimerange"
|
||||
start-placeholder="请选择开始时间"
|
||||
end-placeholder="请选择结束时间"
|
||||
clearable
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="changDate"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="table">
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" :icon="Plus" @click="handleAdd" plain>新增</el-button>
|
||||
<!-- <el-button type="warning" @click="handleExport" :icon="Download" plain>导出</el-button>-->
|
||||
</div>
|
||||
<el-table :data="list" ref="" :lazy="true" v-loading="loading" v-tabh>
|
||||
<el-table-column prop="ipAddr" label="IP地址"></el-table-column>
|
||||
<el-table-column prop="type" label="IP类型"></el-table-column>
|
||||
<el-table-column prop="createTime" label="生成时间"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)">修改</el-button>
|
||||
<el-button type="danger" link @click="handleDel(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<paging :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
|
||||
<el-dialog v-model="visible" :title="title" width="400">
|
||||
<el-form :model="form" ref="formInstance" :rules="rules">
|
||||
<el-form-item prop="ipAddr" label="IP地址">
|
||||
<el-input v-model="form.ipAddr" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确认</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, ref} from 'vue';
|
||||
import {getIPBlackList, getIPBlackDetail, addIPBlack, editIPBlack, delIPBlack} from '@/api/ipblacklist';
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
import {ElMessage, ElMessageBox} from 'element-plus';
|
||||
import {Plus, Download, Refresh, Search} from '@element-plus/icons-vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
ipAddr: '',
|
||||
type: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const dateValue = ref()
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
const total = ref()
|
||||
const id = ref()
|
||||
const form = ref({})
|
||||
const formInstance = ref()
|
||||
const rules = reactive({
|
||||
ipAddr: [{required: true, message: '请输入', trigger: 'change'}]
|
||||
})
|
||||
const visible = ref(false)
|
||||
const title = ref('')
|
||||
|
||||
const changDate = () => {
|
||||
const date = dateValue.value;
|
||||
if (date !== undefined && date !== null) {
|
||||
queryParams.startTime = date[0];
|
||||
queryParams.endTime = date[1];
|
||||
}
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
const {data, code, msg} = await getIPBlackList(queryParams)
|
||||
if (code === 1000) {
|
||||
list.value = data.rows
|
||||
total.value = data.total
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
ElMessage.error(msg)
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
queryInstance.value.resetFields()
|
||||
dateValue.value = []
|
||||
queryParams.startTime = ''
|
||||
queryParams.endTime = ''
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleEdit = async (row) => {
|
||||
title.value = '修改'
|
||||
id.value = row.id
|
||||
const {data, code, msg} = await getIPBlackDetail(row.id)
|
||||
if (code === 1000) {
|
||||
form.value = data
|
||||
visible.value = true
|
||||
return
|
||||
}
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
title.value = '新增'
|
||||
visible.value = true
|
||||
formInstance.value.resetFields()
|
||||
}
|
||||
|
||||
const handleDel = (row) => {
|
||||
ElMessageBox.confirm('确认删除该条数据吗?', '确认删除', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const {code, msg} = await delIPBlack(row.id)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
getList()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
await instance.validate(async (valid, fields) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增') {
|
||||
const {code, msg} = await addIPBlack(form.value)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
} else {
|
||||
form.value.id = id.value
|
||||
const {code, msg} = await editIPBlack(form.value)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
}
|
||||
handleCancel()
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/admin/ip/back/export', {...queryParams})
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
queryParams.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
queryParams.pageNum = val
|
||||
getList()
|
||||
}
|
||||
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-form inline :model="queryParams" class="query-form" ref="queryInstance">
|
||||
<el-form-item prop="ipAddr" label="IP地址">
|
||||
<el-input v-model="queryParams.ipAddr" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="type" label="IP类型">
|
||||
<el-input v-model="queryParams.type" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dateValue" label="时间">
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="datetimerange"
|
||||
start-placeholder="请选择开始时间"
|
||||
end-placeholder="请选择结束时间"
|
||||
clearable
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="changDate"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="table">
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" :icon="Plus" @click="handleAdd" plain>新增</el-button>
|
||||
<!-- <el-button type="warning" @click="handleExport" :icon="Download" plain>导出</el-button>-->
|
||||
</div>
|
||||
<el-table :data="list" ref="" :lazy="true" v-loading="loading" v-tabh>
|
||||
<el-table-column prop="ipAddr" label="IP地址"></el-table-column>
|
||||
<el-table-column prop="type" label="IP类型"></el-table-column>
|
||||
<el-table-column prop="createTime" label="生成时间"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)">修改</el-button>
|
||||
<el-button type="danger" link @click="handleDel(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<paging :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
|
||||
<el-dialog v-model="visible" :title="title" width="400">
|
||||
<el-form :model="form" ref="formInstance" :rules="rules">
|
||||
<el-form-item prop="ipAddr" label="IP地址">
|
||||
<el-input v-model="form.ipAddr" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确认</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, ref} from 'vue';
|
||||
import {getIPBlackList, getIPBlackDetail, addIPBlack, editIPBlack, delIPBlack} from '@/api/ipblacklist';
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
import {ElMessage, ElMessageBox} from 'element-plus';
|
||||
import {Plus, Download, Refresh, Search} from '@element-plus/icons-vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
ipAddr: '',
|
||||
type: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const dateValue = ref()
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
const total = ref()
|
||||
const id = ref()
|
||||
const form = ref({})
|
||||
const formInstance = ref()
|
||||
const rules = reactive({
|
||||
ipAddr: [{required: true, message: '请输入', trigger: 'change'}]
|
||||
})
|
||||
const visible = ref(false)
|
||||
const title = ref('')
|
||||
|
||||
const changDate = () => {
|
||||
const date = dateValue.value;
|
||||
if (date !== undefined && date !== null) {
|
||||
queryParams.startTime = date[0];
|
||||
queryParams.endTime = date[1];
|
||||
}
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
const {data, code, msg} = await getIPBlackList(queryParams)
|
||||
if (code === 1000) {
|
||||
list.value = data.rows
|
||||
total.value = data.total
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
ElMessage.error(msg)
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
queryInstance.value.resetFields()
|
||||
dateValue.value = []
|
||||
queryParams.startTime = ''
|
||||
queryParams.endTime = ''
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleEdit = async (row) => {
|
||||
title.value = '修改'
|
||||
id.value = row.id
|
||||
const {data, code, msg} = await getIPBlackDetail(row.id)
|
||||
if (code === 1000) {
|
||||
form.value = data
|
||||
visible.value = true
|
||||
return
|
||||
}
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
title.value = '新增'
|
||||
visible.value = true
|
||||
formInstance.value.resetFields()
|
||||
}
|
||||
|
||||
const handleDel = (row) => {
|
||||
ElMessageBox.confirm('确认删除该条数据吗?', '确认删除', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const {code, msg} = await delIPBlack(row.id)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
getList()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
await instance.validate(async (valid, fields) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增') {
|
||||
const {code, msg} = await addIPBlack(form.value)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
} else {
|
||||
form.value.id = id.value
|
||||
const {code, msg} = await editIPBlack(form.value)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
}
|
||||
handleCancel()
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/admin/ip/back/export', {...queryParams})
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
queryParams.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
queryParams.pageNum = val
|
||||
getList()
|
||||
}
|
||||
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user