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

src/views/system/area/area.data.ts

@@ -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)

src/views/system/area/index.vue

@@ -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>