From c56a887767fd1a132b01d6ca15d5a00dbd6f0777 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 18 Mar 2023 21:45:58 +0800
Subject: [PATCH] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A=E5=9C=B0?=
 =?UTF-8?q?=E5=8C=BA=E6=8E=A5=E5=85=A5=20TableV2=20=E9=AB=98=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/area/index.ts    | 11 ++++++++
 src/views/system/area/index.vue | 46 +++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/api/system/area/index.ts
 create mode 100644 src/views/system/area/index.vue

diff --git a/src/api/system/area/index.ts b/src/api/system/area/index.ts
new file mode 100644
index 00000000..f77ce0d1
--- /dev/null
+++ b/src/api/system/area/index.ts
@@ -0,0 +1,11 @@
+import request from '@/config/axios'
+
+// 获得地区树
+export const getAreaTree = async () => {
+  return await request.get({ url: '/system/area/tree' })
+}
+
+// 获得 IP 对应的地区名
+export const getDeptApi = async (ip: string) => {
+  return await request.get({ url: '/system/area/get-by-ip?ip=' + ip })
+}
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
new file mode 100644
index 00000000..dcb659c3
--- /dev/null
+++ b/src/views/system/area/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <ContentWrap>
+    <div style="width: 100%; height: 500px">
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <el-table-v2
+            :columns="columns"
+            :data="tableData"
+            :width="width"
+            :height="height"
+            fixed
+            expand-column-key="id"
+          />
+        </template>
+      </el-auto-resizer>
+    </div>
+  </ContentWrap>
+</template>
+<script setup lang="tsx">
+import { Column, ElTableV2 } from 'element-plus'
+import * as AreaApi from '@/api/system/area'
+
+const columns: Column[] = [
+  {
+    key: 'id',
+    dataKey: 'id', // 需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
+    title: '编号', // 显示在单元格表头的文本
+    width: 200, // 当前列的宽度，必须设置
+    fixed: true // 是否固定列
+  },
+  {
+    key: 'name',
+    dataKey: 'name',
+    title: '地名',
+    width: 200
+  }
+]
+
+const tableData = ref([])
+
+const getList = async () => {
+  tableData.value = await AreaApi.getAreaTree()
+}
+
+getList()
+</script>