<script setup >
|
import { reactive, ref, unref, onMounted, toRef } from 'vue'
|
import { GetIPData, AddIP, EditIP, DeleteIP } from '@/api/role'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ContentWrap } from '@/components/ContentWrap'
|
import { formatTime } from '@/utils/index'
|
|
const obj = {
|
selectName: '',
|
selectTime: [], // 时间范围
|
selectType: '',
|
selectInput: ''
|
}
|
|
const ipData = ref([])
|
const userInfo = ref('')
|
|
// IP地址新建
|
const IPdialogVisible = ref(false)
|
const formIP = ref({
|
iPaddress: '',
|
addressname: '',
|
createDate: formatTime(new Date()), // 创建时间
|
creater: JSON.parse(localStorage.getItem('user')).userName // 创建人
|
})
|
const IPtype = ref('新建')
|
const formIPRef = ref(null)
|
|
const ipRules = reactive({
|
iPaddress: {
|
required: true,
|
message: '请输入IP地址',
|
trigger: 'blur'
|
},
|
addressname: {
|
required: true,
|
message: '请输入检修道名称',
|
trigger: 'blur'
|
}
|
})
|
|
const pageQuery = ref({
|
page: 1,
|
rows: 100,
|
total: 0,
|
tableName: 'string',
|
sort: 'string',
|
order: 'string',
|
wheres: 'string',
|
export: true,
|
value: 'string'
|
})
|
|
const queryForm = ref({
|
selectTime: [],
|
selectType: '',
|
selectInput: ''
|
})
|
|
const pageTotal = ref(0)
|
const ids = ref([])
|
|
// 获取IP数据
|
const getIPList = () => {
|
const startTime = formatTime(queryForm.value.selectTime[0])
|
const endTime = formatTime(queryForm.value.selectTime[1])
|
const filter = [
|
{
|
name: queryForm.value.selectType,
|
value: queryForm.value.selectInput,
|
displayType: "like",
|
},
|
{ name: "createDate", value: startTime, displayType: "ThanOrEqual" },
|
{ name: "createDate", value: endTime, displayType: "LessOrEqual" },
|
]
|
|
GetIPData({ ...pageQuery.value, filter }).then((res) => {
|
ipData.value = res.rows
|
pageTotal.value = res.total
|
})
|
}
|
|
// 新建IP
|
const AddIPAddress = () => {
|
IPtype.value = "新建"
|
formIP.value = {
|
iPaddress: '',
|
addressname: '',
|
createDate: formatTime(new Date()),
|
creater: JSON.parse(localStorage.getItem('user')).userName
|
}
|
IPdialogVisible.value = true
|
}
|
|
// 保存IP
|
const saveIP = async (formEl) => {
|
if (!formEl) return
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
if (IPtype.value == "修改") {
|
EditIP(formIP.value).then((res) => {
|
ElMessage({ message: "修改成功", type: "success" })
|
IPdialogVisible.value = false
|
getIPList()
|
})
|
} else {
|
AddIP(formIP.value).then((res) => {
|
ElMessage({ message: "添加成功", type: "success" })
|
IPdialogVisible.value = false
|
getIPList()
|
})
|
}
|
} else {
|
console.log("error submit!", fields)
|
}
|
})
|
}
|
|
// 编辑IP
|
const Editip = (val) => {
|
IPtype.value = "修改"
|
formIP.value = Object.assign({}, val)
|
IPdialogVisible.value = true
|
}
|
|
// 批量删除
|
const IpSelectionChange = (val) => {
|
ids.value = val.map((item) => item.id)
|
}
|
|
const deleteAll = () => {
|
if (ids.value.length == 0) {
|
ElMessage({ message: '请选择要删除的数据', type: 'error' })
|
return
|
}
|
DeleteIP(ids.value).then((res) => {
|
ElMessage({ message: "删除成功", type: "success" })
|
getIPList()})
|
}
|
|
// ElMessageBox.confirm('确定要删除选中的IP地址吗？', '警告', {
|
// confirmButtonText: '确定',
|
// cancelButtonText: '取消',
|
// type: 'warning'
|
// }).then(() => {
|
// DeleteIP(ids.value).then((res) => {
|
// ElMessage({ message: "删除成功", type: "success" })
|
// getIPList()
|
// }).catch((err) => {
|
// ElMessage({ message: "删除失败: " + err.message, type: "error" })
|
// })
|
// }).catch(() => {
|
// ElMessage({ type: 'info', message: '已取消删除' })
|
// })
|
// }
|
|
const resetForm = (formEl) => {
|
if (!formEl) return
|
formEl.resetFields()
|
formIP.value = {
|
iPaddress: '',
|
addressname: '',
|
createDate: formatTime(new Date()),
|
creater: JSON.parse(localStorage.getItem('user')).userName
|
}
|
}
|
|
onMounted(() => {
|
getIPList()
|
userInfo.value = JSON.parse(localStorage.getItem('user')).userInfo
|
})
|
|
</script>
|
|
<template>
|
<ContentWrap>
|
<div class="box" style="display: flex; align-items: center">
|
<div class="mb-10px">
|
<el-button
|
type="primary"
|
size="small"
|
@click="AddIPAddress"
|
style="width: 5.5rem; height: 2rem; font-size: 0.88rem; display: flex; align-items: center"
|
>新建</el-button>
|
</div>
|
<div class="mb-10px">
|
<div style="width: 5.5rem; height: 2rem; font-size: 0.88rem;display: flex; align-items: center ;margin-left: 40px;">
|
<el-button
|
type="danger"
|
size="small"
|
style="width: 5.5rem; height: 2rem; font-size: 0.88rem;"
|
class="text_btn"
|
@click="deleteAll"
|
>批量删除</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- IP地址表格 -->
|
<el-table
|
empty-text="暂无数据"
|
:height="isMin ? '950' : '450'"
|
:data="ipData"
|
style="width: 100%"
|
:header-cell-style="
|
isMin
|
? {
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '1.5rem',
|
height: '3rem',
|
border: 'none',
|
}
|
: {
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
border: 'none',
|
}
|
"
|
:row-style="
|
isMin
|
? {
|
color: '#101010',
|
fontSize: '1.88rem',
|
height: '3rem',
|
}
|
: {
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
}
|
"
|
@selection-change="IpSelectionChange"
|
>
|
<el-table-column type="selection" align="center" />
|
<el-table-column prop="iPaddress" label="IP地址" align="center" />
|
<el-table-column prop="addressname" label="检修道" align="center" />
|
<!-- <el-table-column prop="creater" label="创建者" align="center" /> -->
|
<el-table-column prop="createDate" label="创建时间" align="center" />
|
<el-table-column label="操作" align="center">
|
<template #default="scope">
|
<span
|
:style="{
|
color: 'blue',
|
fontSize: isMin ? '1.88rem' : '0.88rem',
|
cursor: 'pointer',
|
}"
|
@click="Editip(scope.row)"
|
>编辑</span>
|
<span
|
:style="{
|
color: 'blue',
|
fontSize: isMin ? '1.88rem' : '0.88rem',
|
cursor: 'pointer',
|
paddingLeft: '30px'
|
}"
|
@click="() => { ids.value = [scope.row.id]; deleteAll() }"
|
>删除</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div
|
style="
|
display: flex;
|
justify-content: right;
|
align-self: flex-end;
|
margin-bottom: 1.19rem;
|
margin-right: 1.25rem;
|
"
|
>
|
<el-pagination
|
size="large"
|
background
|
layout="prev, pager, next"
|
:current-page="pageQuery.page"
|
:page-size="pageQuery.rows"
|
:total="pageTotal"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</ContentWrap>
|
|
<!-- IP地址新建/编辑对话框 -->
|
<el-dialog
|
v-model="IPdialogVisible"
|
title=""
|
width="30%"
|
:show-close="false"
|
:align-center="true"
|
@close="resetForm(formIPRef)"
|
>
|
<template #title>
|
<div style="height: 3.63rem; display: flex; border-bottom: 1px solid #e6e6e6">
|
<span style="color: rgb(16, 16, 16); font-size: 1rem; font-weight: bold">IP地址管理</span>
|
</div>
|
</template>
|
<el-form
|
:model="formIP"
|
label-width="auto"
|
label-position="top"
|
ref="formIPRef"
|
:rules="ipRules"
|
:hide-required-asterisk="true"
|
>
|
<el-form-item prop="iPaddress">
|
<template #label>
|
<div style="display: flex; align-items: flex-end">
|
<span style="color: red; margin-right: 0.2rem">*</span>
|
<span style="font-size: 0.88rem; color: black; font-weight: bold">IP地址</span>
|
</div>
|
</template>
|
<el-input
|
style="height: 2rem"
|
size="small"
|
v-model="formIP.iPaddress"
|
placeholder="请输入IP地址"
|
/>
|
</el-form-item>
|
<el-form-item prop="addressname">
|
<template #label>
|
<div style="display: flex; align-items: flex-end">
|
<span style="color: red; margin-right: 0.2rem">*</span>
|
<span style="font-size: 0.88rem; color: black; font-weight: bold">检修道</span>
|
</div>
|
</template>
|
<el-input
|
style="height: 2rem"
|
size="small"
|
v-model="formIP.addressname"
|
placeholder="请输入检修道名称"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer" style="text-align: center">
|
<el-button
|
size="small"
|
@click="IPdialogVisible = false"
|
style="height: 2rem; font-size: 0.88rem"
|
>取消</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
@click="saveIP(formIPRef)"
|
style="height: 2rem; font-size: 0.88rem"
|
>保存</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
