土地分类页面开发，行政信息页面添加增删改功能（无接口）

index.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="icon" href="/src/assets/logo/yunying.png">
+  <link rel="icon" href="/src/assets/logo/zhengwu.png">
   <title>后台管理系统</title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>

src/api/common.js

@@ -7,4 +7,27 @@ export function getRegion(code) {
     method: 'GET',
   });
 }
+// 新增区域
+export function addRegion(data) {
+  return request({
+    url: "/goods/goodInfoManage/goodSave",
+    method: "post",
+    data: data,
+  });
+}
+// 编辑区域
+export function editRegion(data) {
+  return request({
+    url: "/goods/goodInfoManage/goodEdit",
+    method: "put",
+    data: data,
+  });
+}
+// 删除区域
+export function deleteRegion(id) {
+  return request({
+    url: "/goods/goodInfoManage/deleteGoodInfo?id=" + id,
+    method: "delete",
+  });
+}
 

src/api/land/land.js

@@ -0,0 +1,35 @@
+
+import request from "@/utils/request";
+
+// 获取土地分类树
+export function getLandTree(query) {
+  return request({
+    // 开发时后台ip有端口这里不要/apis
+    url: "/land-resource/baseInfo/landTree",
+    method: "get",
+    params: query,
+  });
+}
+// 新增土地分类
+export function addLandTree(data) {
+  return request({
+    url: "/goods/goodInfoManage/goodSave",
+    method: "post",
+    data: data,
+  });
+}
+// 编辑区域
+export function editLandTree(data) {
+  return request({
+    url: "/goods/goodInfoManage/goodEdit",
+    method: "put",
+    data: data,
+  });
+}
+// 删除区域
+export function deleteLandTree(id) {
+  return request({
+    url: "/goods/goodInfoManage/deleteGoodInfo?id=" + id,
+    method: "delete",
+  });
+}

src/assets/styles/custom.scss

@@ -247,6 +247,11 @@
     object-fit: cover; /* 保持比例并覆盖容器 */
   }
 }
+  /* 自定义表头样式 */
+  .custom-table-header .cell {
+    color: #999;
+    font-weight: 400;
+  }
 
 // 新增商品页面-开始
 .customer-box {

src/components/tableComponent.vue

@@ -190,7 +190,7 @@ const props = defineProps({
   // 自定义表头类名函数
   headerCellClassName: {
     type: Function,
-    default: () => "",
+    default: () => "custom-header",
   },
   // 自定义单元格类名函数
   cellClassName: {

src/router/index.js

@@ -151,70 +151,70 @@ export const constantRoutes = [
   },
 
   // 产业运营云后台管理菜单【可访问页面参考】
-  {
+  // {
-    path: '/goods',
+  //   path: '/goods',
-    name: "goods",
+  //   name: "goods",
-    component: Layout,
+  //   component: Layout,
-    hidden: false,
+  //   hidden: false,
-    alwaysShow: true,
+  //   alwaysShow: true,
-    redirect: 'noredirect',
+  //   redirect: 'noredirect',
-    meta: {
+  //   meta: {
-      icon: "example",
+  //     icon: "example",
-      link: null,
+  //     link: null,
-      noCache: false,
+  //     noCache: false,
-      title: "商品中心",
+  //     title: "商品中心",
-    },
+  //   },
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'goods/goodsManage',
+  //       path: 'goods/goodsManage',
-        component: () => import('@/views/goods/goodsManage/index'),
+  //       component: () => import('@/views/goods/goodsManage/index'),
-        name: 'goodsManage',
+  //       name: 'goodsManage',
-        hidden: false,
+  //       hidden: false,
-        meta: {
+  //       meta: {
-          title: "商品信息管理",
+  //         title: "商品信息管理",
-          icon: "",
+  //         icon: "",
-          noCache: false,
+  //         noCache: false,
-          link: null,
+  //         link: null,
-        },
+  //       },
-      },
+  //     },
-      {
+  //     {
-        path: 'goods/goodsCategory',
+  //       path: 'goods/goodsCategory',
-        component: () => import('@/views/goods/goodsCategory/index'),
+  //       component: () => import('@/views/goods/goodsCategory/index'),
-        name: 'goodsCategory',
+  //       name: 'goodsCategory',
-        hidden: false,
+  //       hidden: false,
-        meta: {
+  //       meta: {
-          title: "商品分类设置",
+  //         title: "商品分类设置",
-          icon: "",
+  //         icon: "",
-          noCache: false,
+  //         noCache: false,
-          link: null,
+  //         link: null,
-        },
+  //       },
-      },
+  //     },
-      {
+  //     {
-        path: 'goods/contrabandManage',
+  //       path: 'goods/contrabandManage',
-        component: () => import('@/views/goods/contrabandManage/index'),
+  //       component: () => import('@/views/goods/contrabandManage/index'),
-        name: 'contrabandManage',
+  //       name: 'contrabandManage',
-        hidden: false,
+  //       hidden: false,
-        meta: {
+  //       meta: {
-          title: "违禁物品管理",
+  //         title: "违禁物品管理",
-          icon: "",
+  //         icon: "",
-          noCache: false,
+  //         noCache: false,
-          link: null,
+  //         link: null,
-        },
+  //       },
-      },
+  //     },
-      {
+  //     {
-        path: 'goods/goodsReview',
+  //       path: 'goods/goodsReview',
-        component: () => import('@/views/goods/goodsReview/index'),
+  //       component: () => import('@/views/goods/goodsReview/index'),
-        name: 'goodsReview',
+  //       name: 'goodsReview',
-        hidden: false,
+  //       hidden: false,
-        meta: {
+  //       meta: {
-          title: "上架审核设置",
+  //         title: "上架审核设置",
-          icon: "",
+  //         icon: "",
-          noCache: false,
+  //         noCache: false,
-          link: null,
+  //         link: null,
-        },
+  //       },
-      },
+  //     },
-    ],
+  //   ],
-  },
+  // },
   // {
   //   path: '/plant',
   //   name: "plant",
@@ -424,6 +424,55 @@ export const constantRoutes = [
   // },
 
   // 政务云后台管理系统菜单
+  {
+    path: '/land',
+    name: "land",
+    component: Layout,
+    hidden: false,
+    alwaysShow: true,
+    redirect: "noredirect",
+    meta: {
+      icon: "excel",
+      link: null,
+      noCache: false,
+      title: "土地资源管理",
+    },
+    children: [
+      {
+        path: 'land/landSort',
+        component: () => import('@/views/land/landSort'),
+        name: "landSort",
+        hidden: false,
+        meta: {
+          title: "土地分类",
+          icon: "",
+          noCache: false,
+          link: null,
+        },
+      },
+    ],
+  },
+  {
+    path: '/region',
+    name: "region",
+    component: Layout,
+    hidden: false,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'region/index',
+        component: () => import('@/views/region/index'),
+        hidden: false,
+        meta: {
+          title: "行政信息",
+          icon: "star",
+          noCache: false,
+          link: null,
+        },
+        name: "region",
+      },
+    ],
+  },
   {
     path: "/mainbody",
     name: "mainbody",
@@ -464,27 +513,6 @@ export const constantRoutes = [
       },
     ],
   },
-  {
-    path: '/region',
-    name: "region",
-    component: Layout,
-    hidden: false,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'region/index',
-        component: () => import('@/views/region/index'),
-        hidden: false,
-        meta: {
-          title: "行政信息",
-          icon: "star",
-          noCache: false,
-          link: null,
-        },
-        name: "region",
-      },
-    ],
-  },
   {
     path: "/traceability",
     name: "traceability",

src/views/land/landSort.vue

@@ -0,0 +1,324 @@
+<template>
+  <div class="app-container customer-control">
+    <div ref="buttonRef" class="button-cont">
+      <el-button :icon="btnIcon" type="primary" @click="handleClick">{{
+        btnText
+      }}</el-button>
+      <el-button icon="Download" type="primary" @click="exportFile"
+        >导出</el-button
+      >
+      <el-button circle icon="Refresh" @click="getArea" style="float: right;"></el-button>
+    </div>
+    <div class="table-cont">
+      <el-table
+        :header-cell-class-name="'custom-table-header'"
+        ref="tableRef"
+        :data="tableData"
+        style="width: 100%"
+        row-key="id"
+        border
+        lazy
+        v-loading="loading"
+        :tree-props="{
+          children: 'children',
+          label: 'landType',
+          nodeKey: 'id',
+        }"
+        :default-expand-all="tableExpand"
+      >
+        <el-table-column prop="landType" label="分类名称" />
+        <el-table-column prop="status" label="状态">
+          <template #default="slotProps">
+            <div v-if="slotProps.row.id != 0">
+              <el-tag type="success" v-if="slotProps.row.status == 1">启用</el-tag>
+              <el-tag type="danger" v-else>禁用</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="operate" label="操作">
+          <template #default="slotProps">
+            <el-button text type="success" @click="addArea(slotProps.row)">新增</el-button>
+            <el-button
+              text
+              type="success"
+              v-if="slotProps.row.id != 0"
+              @click="handleEdit(slotProps.row)"
+              >编辑</el-button
+            >
+            <el-button
+              text
+              type="danger"
+              v-if="slotProps.row.id != 0"
+              @click="handleDelete(slotProps.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 新增修改节点 -->
+    <el-dialog
+      v-model="dialogFormVisible"
+      :title="dialogTitle"
+      width="500"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="dialogForm"
+        :label-width="'80'"
+        :rules="dialogFormRules"
+        ref="dialogRef"
+      >
+        <el-form-item label="分类名称" prop="landType">
+          <el-input
+            v-model="dialogForm.landType"
+            autocomplete="off"
+            placeholder="请输入分类名称"
+          />
+        </el-form-item>
+        <el-form-item label="上级分类" prop="parentId">
+          <el-cascader
+            v-model="dialogForm.parentId"
+            :options="tableData"
+            :props="cascaderProps"
+            placeholder="请选择上级分类"
+            clearable
+            style="width: 100%"
+            @change="handleCascaderChange"
+          />
+        </el-form-item>
+        <el-form-item label="是否禁用" prop="status" required>
+          <el-radio-group v-model="dialogForm.status" style="margin-top: -3px">
+            <el-radio value="1" size="large">启用类别</el-radio>
+            <el-radio value="2" size="large">禁用类别</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelDialog">取消</el-button>
+          <el-button type="primary" @click="onSaveCategory"> 保存 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { getLandTree, addLandTree, editLandTree, deleteLandTree } from "@/api/land/land";
+const { proxy } = getCurrentInstance();
+import { ElMessage } from 'element-plus'
+const route = useRoute();
+const router = useRouter();
+const { params, query } = route;
+
+const tableRef = ref(null);
+const tableData = ref([]);
+let loading = ref(false);
+let tableExpand = ref(true);
+let btnText = ref("全部折叠");
+let btnIcon = ref("SortUp");
+const getArea = async () => {
+  loading.value = true;
+  try {
+    const res = await getLandTree();
+     console.log(res);
+    loading.value = false;
+    if (res.code === 200) {
+      tableData.value = [{ id: '0', landType: '土地分类', children: res.data }];
+    } else {
+      tableData.value = [];
+    }
+    console.log(tableData.value);
+  } catch (error) {
+    loading.value = false;
+  }
+};
+
+const handleClick = () => {
+  if (btnText.value === "全部展开") {
+    btnText.value = "全部折叠";
+    btnIcon.value = "SortUp";
+    expandAllRows(tableData.value, true);
+  } else {
+    btnText.value = "全部展开";
+    btnIcon.value = "SortDown";
+    expandAllRows(tableData.value, false);
+  }
+};
+
+/**
+ * 递归展开/折叠所有行
+ * @param {Array} rows - 当前层级的行数据
+ * @param {Boolean} isExpand - true: 展开, false: 折叠
+ */
+const expandAllRows = (rows, isExpand) => {
+  rows.forEach((row) => {
+    tableRef.value.toggleRowExpansion(row, isExpand); // 控制当前行
+    if (row.areaChildVOS?.length) {
+      expandAllRows(row.areaChildVOS, isExpand); // 递归处理子级
+    }
+  });
+};
+
+const dialogFormVisible = ref(false);
+const dialogRef = ref(null);
+const dialogTitle = ref("新增");
+const dialogForm = reactive({
+  id: "",
+  landType: "", //分类名字
+  parentId: "", //父级id
+  level: "", //分类层级,parentId的长度
+  sort: "", //排序值
+  status: "1", //分类状态(1-启用 2-禁用)
+});
+const dialogFormRules = ref({
+  landType: [
+    { required: true, message: "请输分类名称", trigger: "blur" },
+  ],
+  parentId: [
+    { required: true, message: "请选择上级分类", trigger: ["blur", "change"] },
+  ],
+  status: [{ required: true, message: "请选择分类状态", trigger: "change" }],
+});
+// 级联选择器配置
+const cascaderProps = ref({
+  label: "landType", // 选项标签字段名
+  value: "id", // 选项值字段名
+  children: "children", // 子选项字段名
+  emitPath: false, // 只返回当前节点值，不返回路径
+  checkStrictly: true, //可以点击任意层级节点直接选中（不再需要展开到最后一级）
+  expandTrigger: "hover", // 展开触发方式，默认为点击，可选值为 hover
+  selectedNode: {},
+});
+// 递归查找节点对象
+const findNodeById = (options, id) => {
+  for (const node of options) {
+    if (node.id === id) return node;
+    if (node.children) {
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+const handleCascaderChange = (selectedId) => {
+  const selectedNode = findNodeById(tableData.value, selectedId);
+  dialogForm.selectedNode = selectedNode;
+};
+const addArea = (row) => {
+  console.log("要编辑的行:", row);
+  dialogTitle.value = "新增";
+  Object.assign(dialogForm, {
+    // 保持响应性，手动清空字段
+    id: row.id,
+    landType: "",
+    // level: row.level,
+    parentId: row.id,
+    status: "1",
+  });
+  dialogFormVisible.value = true;
+};
+const handleEdit = (row) => {
+  console.log("要编辑的行:", row);
+  dialogTitle.value = "编辑";
+  
+  dialogForm.id = row.id;
+  dialogForm.landType = row.landType;
+  dialogForm.status = row.status ?? '1';
+  // dialogForm.level = row.level;
+  dialogForm.parentId = row.id;
+  // dialogForm.status = row.status?.toString() ?? '1';
+
+  dialogFormVisible.value = true;
+};
+const handleDelete = (row) => {
+  console.log("要删除的行:", row);
+  // 确认框
+  proxy.$modal
+    .confirm("是否确认要删除【" + row.landType + "】的数据项?")
+    .then(function () {
+      return true
+      // return deleteRegion(row.id);
+    })
+    .then(() => {
+      getArea();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+};
+
+const cancelDialog = () => {
+  Object.assign(dialogForm, {
+    // 保持响应性，手动清空字段
+    id: "",
+    landType: "",
+    level: "",
+    parentId: "",
+    status: "1",
+  });
+  dialogFormVisible.value = false;
+};
+const onSaveCategory = () => {
+  console.log(dialogForm);
+  return
+
+  dialogRef.value.validate(async (valid, fields) => {
+    if (valid) {
+      try {
+        proxy.$modal.loading("正在保存...");
+        let param = { ...dialogForm };
+        param.level = dialogForm.selectedNode.level;
+        let response;
+        if (dialogTitle.value == "编辑") {
+          response = await editRegion(param);
+        } else {
+          response = await addRegion(param);
+        }
+        proxy.$modal.closeLoading();
+        if (response.code == 200) {
+          cancelDialog();
+          getArea();
+          if (dialogTitle.value == "编辑") {
+            ElMessage.success("编辑成功!");
+          } else {
+            ElMessage.success("新增成功!");
+          }
+        } else {
+          ElMessage.error(response.msg);
+        }
+      } catch (error) {
+        proxy.$modal.closeLoading();
+      }
+    }
+  });
+};
+
+const exportFile = () => {
+  console.log("导出");
+};
+
+onMounted(() => {
+  getArea();
+});
+</script>
+<style scoped>
+.button-cont {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  right: 16px;
+}
+
+.table-cont {
+  position: absolute;
+  top: 64px;
+  left: 16px;
+  right: 16px;
+  bottom: 16px;
+  overflow-y: auto;
+}
+</style>

src/views/region/index.vue

@@ -1,48 +1,312 @@
 <template>
   <div class="app-container customer-control">
-      <div ref="buttonRef">
+    <div ref="buttonRef" class="button-cont">
-        <!-- 按钮组 -->
+      <el-button :icon="btnIcon" type="primary" @click="handleClick">{{
-         <el-button icon="Sort" type="primary">{{ btnText }}</el-button>
+        btnText
+      }}</el-button>
+      <el-button icon="Download" type="primary" @click="exportFile"
+        >导出</el-button
+      >
+      <el-button circle icon="Refresh" @click="getArea" style="float: right;"></el-button>
     </div>
     <div class="table-cont">
-        <el-table :data="tableData" style="width: 100%" row-key="id" border lazy v-loading="loading"
+      <el-table
-          :tree-props="{ children: 'areaChildVOS' }" default-expand-all>
+        :header-cell-class-name="'custom-table-header'"
+        ref="tableRef"
+        :data="tableData"
+        style="width: 100%"
+        row-key="id"
+        border
+        lazy
+        v-loading="loading"
+        :tree-props="{
+          children: 'areaChildVOS',
+          label: 'areaName',
+          nodeKey: 'areaCode',
+        }"
+        :default-expand-all="tableExpand"
+      >
         <el-table-column prop="areaName" label="区域名称" />
         <el-table-column prop="areaCode" label="区域代码" />
         <el-table-column prop="level" label="区域级别" />
         <el-table-column prop="operate" label="操作" slotName="operate">
           <template #default="slotProps">
-              <el-button text type="success">新增</el-button>
+            <el-button text type="success" @click="addArea(slotProps.row)">新增</el-button>
-              <el-button text type="success" v-if="slotProps.row.areaCode != 530000">编辑</el-button>
+            <el-button
-              <el-button text type="danger" v-if="slotProps.row.areaCode != 530000">删除</el-button>
+              text
+              type="success"
+              v-if="slotProps.row.areaCode != 530000"
+              @click="handleEdit(slotProps.row)"
+              >编辑</el-button
+            >
+            <el-button
+              text
+              type="danger"
+              v-if="slotProps.row.areaCode != 530000"
+              @click="handleDelete(slotProps.row)"
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- 新增修改节点 -->
+    <el-dialog
+      v-model="dialogFormVisible"
+      :title="dialogTitle"
+      width="500"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="dialogForm"
+        :label-width="'80'"
+        :rules="dialogFormRules"
+        ref="dialogRef"
+      >
+        <el-form-item label="区域名称" prop="areaName">
+          <el-input
+            v-model="dialogForm.areaName"
+            autocomplete="off"
+            placeholder="请输入区域名称"
+          />
+        </el-form-item>
+        <el-form-item label="上级区域" prop="parentId">
+          <el-cascader
+            v-model="dialogForm.parentId"
+            :options="tableData"
+            :props="cascaderProps"
+            placeholder="请选择上级区域"
+            clearable
+            style="width: 100%"
+            @change="handleCascaderChange"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="是否禁用" prop="status" required>
+          <el-radio-group v-model="dialogForm.status" style="margin-top: -3px">
+            <el-radio value="1" size="large">启用类别</el-radio>
+            <el-radio value="2" size="large">禁用类别</el-radio>
+          </el-radio-group>
+        </el-form-item> -->
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelDialog">取消</el-button>
+          <el-button type="primary" @click="onSaveCategory"> 保存 </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted } from "vue";
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from "vue-router";
-import { getRegion } from "@/api/common";
+import { getRegion, addRegion, editRegion, deleteRegion } from "@/api/common";
-const route = useRoute()
+const { proxy } = getCurrentInstance();
-const router = useRouter()
+import { ElMessage } from 'element-plus'
-const { params, query } = route
+const route = useRoute();
-
+const router = useRouter();
-let btnText = ref('展开全部');
+const { params, query } = route;
 
+const tableRef = ref(null);
 const tableData = ref([]);
 let loading = ref(false);
+let tableExpand = ref(true);
+let btnText = ref("全部折叠");
+let btnIcon = ref("SortUp");
 const getArea = async () => {
+  loading.value = true;
+  try {
     const res = await getRegion();
+    loading.value = false;
     if (res.code === 200) {
       tableData.value = res.data;
+    } else {
+      tableData.value = [];
     }
+  } catch (error) {
+    loading.value = false;
+  }
+};
+
+const handleClick = () => {
+  if (btnText.value === "全部展开") {
+    btnText.value = "全部折叠";
+    btnIcon.value = "SortUp";
+    expandAllRows(tableData.value, true);
+  } else {
+    btnText.value = "全部展开";
+    btnIcon.value = "SortDown";
+    expandAllRows(tableData.value, false);
+  }
+};
+
+/**
+ * 递归展开/折叠所有行
+ * @param {Array} rows - 当前层级的行数据
+ * @param {Boolean} isExpand - true: 展开, false: 折叠
+ */
+const expandAllRows = (rows, isExpand) => {
+  rows.forEach((row) => {
+    tableRef.value.toggleRowExpansion(row, isExpand); // 控制当前行
+    if (row.areaChildVOS?.length) {
+      expandAllRows(row.areaChildVOS, isExpand); // 递归处理子级
+    }
+  });
+};
+
+const dialogFormVisible = ref(false);
+const dialogRef = ref(null);
+const dialogTitle = ref("新增");
+const dialogForm = reactive({
+  id: "",
+  areaName: "", //分类名字
+  parentId: "", //父级id
+  level: "", //分类层级,parentId的长度
+  sort: "", //排序值
+  status: "1", //分类状态(1-启用 2-禁用)
+});
+const dialogFormRules = ref({
+  areaName: [
+    { required: true, message: "请输入区域名称", trigger: "blur" },
+  ],
+  parentId: [
+    { required: true, message: "请选择上级分类", trigger: ["blur", "change"] },
+  ],
+  status: [{ required: true, message: "请选择分类状态", trigger: "change" }],
+});
+// 级联选择器配置
+const cascaderProps = ref({
+  label: "areaName", // 选项标签字段名
+  value: "areaCode", // 选项值字段名
+  children: "areaChildVOS", // 子选项字段名
+  emitPath: false, // 只返回当前节点值，不返回路径
+  checkStrictly: true, //可以点击任意层级节点直接选中（不再需要展开到最后一级）
+  expandTrigger: "hover", // 展开触发方式，默认为点击，可选值为 hover
+  selectedNode: {},
+});
+// 递归查找节点对象
+const findNodeById = (options, id) => {
+  for (const node of options) {
+    if (node.id === id) return node;
+    if (node.children) {
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+const handleCascaderChange = (selectedId) => {
+  const selectedNode = findNodeById(tableData.value, selectedId);
+  dialogForm.selectedNode = selectedNode;
+};
+const addArea = (row) => {
+  console.log("要编辑的行:", row);
+  dialogTitle.value = "新增";
+  Object.assign(dialogForm, {
+    // 保持响应性，手动清空字段
+    id: row.id,
+    areaName: "",
+    level: row.level,
+    parentId: row.parentId,
+    status: "1",
+  });
+  dialogFormVisible.value = true;
+};
+const handleEdit = (row) => {
+  console.log("要编辑的行:", row);
+  dialogTitle.value = "编辑";
+  dialogFormVisible.value = true;
+  dialogForm.id = row.id;
+  dialogForm.areaName = row.areaName;
+  dialogForm.level = row.level;
+  dialogForm.parentId = row.parentId;
+  // dialogForm.status = row.status?.toString() ?? '1';
+};
+const handleDelete = (row) => {
+  console.log("要删除的行:", row);
+  // 确认框
+  proxy.$modal
+    .confirm("是否确认要删除【" + row.areaName + "】的数据项?")
+    .then(function () {
+      return true
+      // return deleteRegion(row.id);
+    })
+    .then(() => {
+      getArea();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+};
+
+const cancelDialog = () => {
+  Object.assign(dialogForm, {
+    // 保持响应性，手动清空字段
+    id: "",
+    areaName: "",
+    level: "",
+    parentId: "",
+    status: "1",
+  });
+  dialogFormVisible.value = false;
+};
+const onSaveCategory = () => {
+  console.log(dialogForm);
+  return
+  dialogRef.value.validate(async (valid, fields) => {
+    if (valid) {
+      try {
+        proxy.$modal.loading("正在保存...");
+        let param = { ...dialogForm };
+        param.level = dialogForm.selectedNode.level;
+        let response;
+        if (dialogTitle.value == "编辑") {
+          response = await editRegion(param);
+        } else {
+          response = await addRegion(param);
+        }
+        proxy.$modal.closeLoading();
+        if (response.code == 200) {
+          cancelDialog();
+          getArea();
+          if (dialogTitle.value == "编辑") {
+            ElMessage.success("编辑成功!");
+          } else {
+            ElMessage.success("新增成功!");
+          }
+        } else {
+          ElMessage.error(response.msg);
+        }
+      } catch (error) {
+        proxy.$modal.closeLoading();
+      }
+    }
+  });
+};
+
+const exportFile = () => {
+  console.log("导出");
 };
 
 onMounted(() => {
   getArea();
 });
 </script>
-<style scope></style>
+<style scoped>
+.button-cont {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  right: 16px;
+}
+
+.table-cont {
+  position: absolute;
+  top: 64px;
+  left: 16px;
+  right: 16px;
+  bottom: 16px;
+  overflow-y: auto;
+}
+</style>