回退vxe版本

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

@@ -1,70 +1,125 @@
 <template>
-  <!-- 操作栏 -->
-  <content-wrap>
-    <el-button type="primary" @click="openModal()">
-      <Icon icon="ep:plus" class="mr-5px" /> IP 查询
-    </el-button>
-  </content-wrap>
+  <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 /> -->
 
-  <!-- 列表 -->
-  <content-wrap>
-    <div style="width: 100%; height: 700px">
-      <!-- AutoResizer 自动调节大小 -->
-      <el-auto-resizer>
-        <template #default="{ height, width }">
-          <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
-          <el-table-v2
-            :columns="columns"
-            :data="list"
-            :width="width"
-            :height="height"
-            expand-column-key="id"
-          />
-        </template>
-      </el-auto-resizer>
-    </div>
-  </content-wrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <area-form ref="modalRef" />
+    <!-- 对话框(添加 / 修改) -->
+    <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 setup lang="tsx" name="Area">
-import type { Column } from 'element-plus'
-import AreaForm from './form.vue'
-import * as AreaApi from '@/api/system/area'
 
-// 表格的 column 字段
-const columns: Column[] = [
-  {
-    dataKey: 'id', // 需要渲染当前列的数据字段。例如说：{id:9527, name:'Mike'}，则填 id
-    title: '编号', // 显示在单元格表头的文本
-    width: 400, // 当前列的宽度，必须设置
-    fixed: true, // 是否固定列
-    key: 'id' // 树形展开对应的 key
-  },
-  {
-    dataKey: 'name',
-    title: '地名',
-    width: 200
-  }
-]
-// 表格的数据
+<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 () => {
-  list.value = await AreaApi.getAreaTree()
+  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)
+    }
+  })
 }
 
-/** 添加/修改操作 */
-const modalRef = ref()
-const openModal = () => {
-  modalRef.value.openModal()
-}
-
-/** 初始化 **/
 onMounted(() => {
   getList()
 })