系统管理中的地区管理页面

This commit is contained in:
gexinzhineng/gxzn27 2023-03-16 13:51:54 +08:00
parent 629c177c99
commit b583be5465
3 changed files with 164 additions and 0 deletions

View File

@ -0,0 +1,15 @@
import request from '@/config/axios/request'
// 获得地区树
export const getAreaTree = async (content?: any) => {
return await request.get({
url: '/system/area/tree',
params: content
})
}
// 获得 IP 对应的地区名
export const getAreaByIp = async (ip) => {
return await request.get({
url: '/system/area/get-by-ip?ip=' + ip
})
}

View File

@ -0,0 +1,23 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: false,
columns: [
{
title: '编号',
field: 'id',
table: {
treeNode: true,
align: 'left'
}
},
{
title: '名字',
field: 'name'
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

View File

@ -0,0 +1,126 @@
<template>
<div class="app-container">
<doc-alert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
<!-- 操作工具栏 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<XButton preIcon="fa:search" type="primary" @click="handleAdd" title="IP 查询" />
</el-col>
</el-row>
<!-- 列表 -->
<el-table
v-if="refreshTable"
v-loading="loading"
:data="list"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="编号" prop="id" />
<el-table-column label="名字" prop="name" />
</el-table>
<!-- <XTable ref="xGrid" @register="registerTable" show-overflow /> -->
<!-- 对话框(添加 / 修改) -->
<el-dialog title="IP 查询" v-model="open" width="500px" append-to-body>
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="IP" prop="ip">
<el-input v-model="form.ip" placeholder="请输入 IP 地址" />
</el-form-item>
<el-form-item label="地址" prop="result">
<el-input v-model="form.result" readonly placeholder="展示查询 IP 结果" />
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="submitForm(formRef)"> </el-button>
<el-button @click="cancel(formRef)"> </el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup name="Area">
import * as areaApi from '@/api/system/area'
import type { FormInstance } from 'element-plus'
// import { allSchemas } from './area.data'
// import { getAreaByIp, getAreaTree } from '@/api/system/area'
//
const loading = ref(true)
//
const list = ref([])
//
// const title = ref('')
//
const open = ref(false)
//
const refreshTable = ref(true)
//
const form = ref({
ip: undefined,
result: undefined
})
const formRef = ref<FormInstance>()
//
const rules = ref({
ip: [{ required: true, message: 'IP 地址不能为控', trigger: 'blur' }]
})
const message = useMessage() //
// const treeConfig = {
// transform: true,
// rowField: 'id',
// parentField: 'id'
// // expandAll: true
// }
// const [registerTable, { reload }] = useXTable({
// allSchemas: allSchemas,
// treeConfig: treeConfig,
// getListApi: areaApi.getAreaTree
// })
/** 查询列表 */
const getList = async () => {
loading.value = true
const response = await areaApi.getAreaTree()
list.value = response.data
loading.value = false
}
/** 取消按钮 */
const cancel = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
open.value = false
reset()
}
/** 表单重置 */
const reset = async () => {
form.value = {
ip: undefined,
result: undefined
}
// await reload()
}
/** 新增按钮操作 */
const handleAdd = () => {
open.value = true
reset()
}
/** 提交按钮 */
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate(async (valid, fields) => {
if (valid) {
console.log('submit!')
const response = await areaApi.getAreaByIp(form.value.ip)
message.success('查询成功')
form.value.result = response.data
} else {
console.log('error submit!', fields)
}
})
}
onMounted(() => {
getList()
})
</script>