From 67a2417384fc6052ade068e79b3c6a9f81f5e615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Fri, 21 Mar 2025 15:10:58 +0800
Subject: [PATCH] =?UTF-8?q?tplink=E6=91=84=E5=83=8F=E5=A4=B4=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E4=BF=A1=E6=81=AF=E4=BC=98=E5=8C=963?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/tplink/region/RegionInfo.api.ts |   7 +-
 .../iot/tplink/region/RegionInfo.data.ts      |   8 +-
 .../region/components/RegionLeftTree.vue      | 169 ++++++++++++++++--
 3 files changed, 166 insertions(+), 18 deletions(-)

diff --git a/src/views/iot/tplink/region/RegionInfo.api.ts b/src/views/iot/tplink/region/RegionInfo.api.ts
index 86465eb..90b396d 100644
--- a/src/views/iot/tplink/region/RegionInfo.api.ts
+++ b/src/views/iot/tplink/region/RegionInfo.api.ts
@@ -36,8 +36,13 @@ export const syncProject = (params?) => defHttp.get({ url: Api.syncProject, para
  * 同步区域
  * @param params
  */
-export const syncRegion = (params?) => defHttp.get({ url: Api.syncRegion, params });
+export const syncRegionChildren = (params?) => defHttp.get({ url: Api.syncRegionChildren, params });
 
+/**
+ * 同步子区域
+ * @param params
+ */
+export const syncRegion = (params?) => defHttp.get({ url: Api.syncRegion, params });
 
 /**
  * 列表接口
diff --git a/src/views/iot/tplink/region/RegionInfo.data.ts b/src/views/iot/tplink/region/RegionInfo.data.ts
index dea876c..2d62dcb 100644
--- a/src/views/iot/tplink/region/RegionInfo.data.ts
+++ b/src/views/iot/tplink/region/RegionInfo.data.ts
@@ -94,13 +94,7 @@ export const formSchema: FormSchema[] = [
     label: '上级名称',
     field: 'parentName',
     component: 'Input',
-    dynamicDisabled: ({model})=>{
-      if(model.regionId || model.parentId){
-        return true;
-      }else{
-        return false;
-      }
-    }
+    dynamicDisabled: true
   },
   {
     label: '机构名称',
diff --git a/src/views/iot/tplink/region/components/RegionLeftTree.vue b/src/views/iot/tplink/region/components/RegionLeftTree.vue
index a9c01fb..39dfc23 100644
--- a/src/views/iot/tplink/region/components/RegionLeftTree.vue
+++ b/src/views/iot/tplink/region/components/RegionLeftTree.vue
@@ -3,16 +3,16 @@
       <a-spin :spinning="syncoading">
       <div class="j-table-operator" style="width: 100%">
         <a-button preIcon="ant-design:sync-outlined" @click="loadRootTreeData">刷新</a-button>
-        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="addProjectInfo">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreateProject">新增</a-button>
         <a-button preIcon="ant-design:sync-outlined" @click="syncProjectInfo">同步</a-button>
-        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="addRegionInfo">新增下级</a-button>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreateRegion">新增下级</a-button>
         <template v-if="currentRegion !=null">
           <a-button preIcon="ant-design:sync-outlined" @click="syncRegionInfo">同步下级</a-button>
         </template>
       </div>
       <a-spin :spinning="loading">
         <a-input-search placeholder="按名称搜索…" style="margin-bottom: 10px" @search="onSearch" />
-        <!--区域树-->
+        <!--分组树-->
         <template v-if="treeData.length > 0">
           <a-tree
             v-if="!treeReloading"
@@ -25,26 +25,55 @@
             v-model:expandedKeys="expandedKeys"
             @select="onSelect"
           >
+            <template #title="{ key: treeKey, title, dataRef }">
+              <a-dropdown :trigger="['contextmenu']">
+                <span>{{ title }}</span>
+                <template #overlay>
+                  <a-menu @click="">
+                    <a-menu-item key="1" @click="onAddChild(dataRef)">添加子级</a-menu-item>
+                    <a-menu-item key="2" @click="handleDeleteNode(dataRef)">
+                      <span style="color: red">删除</span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </template>
           </a-tree>
         </template>
         <a-empty v-else description="暂无数据" />
       </a-spin>
       </a-spin>
     </a-card>
+  <!-- 表单分组 -->
+  <ProjectInfoDrawer @register="registerProjectDrawer" @success="handleSuccess" />
+  <RegionInfoDrawer @register="registerRegionDrawer" @success="handleSuccess" />
 </template>
 
 <script lang="ts" setup>
-  import { nextTick, ref } from 'vue';
+import {createVNode, nextTick, ref} from 'vue';
   import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMethods } from '/@/hooks/system/useMethods';
   const { createMessage } = useMessage();
-  import { queryProjectTreeSync, queryRegionTreeSync, syncProject, syncRegion, syncRegionChildren } from '@/views/iot/tplink/region/RegionInfo.api';
+import {
+  deleteRegion,
+  queryProjectTreeSync,
+  queryRegionTreeSync,
+  syncProject,
+  syncRegion,
+  syncRegionChildren
+} from '@/views/iot/tplink/region/RegionInfo.api';
+  import {useDrawer} from "@/components/Drawer";
+  import ProjectInfoDrawer from '@/views/iot/tplink/project/components/ProjectInfoDrawer.vue';
+  import RegionInfoDrawer from './RegionInfoDrawer.vue';
+  import {Modal} from "ant-design-vue";
+  import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
+  import {deletePrject} from "@/views/iot/tplink/project/ProjectInfo.api";
 
   const emit = defineEmits(['select', 'rootTreeData']);
   const syncoading = ref<boolean>(false);
   const loading = ref<boolean>(false);
-  // 区域树列表数据
+  // 分组树列表数据
   const treeData = ref<any[]>([]);
   // 当前选中的项
   const checkedKeys = ref<any[]>([]);
@@ -56,10 +85,13 @@
   const treeReloading = ref<boolean>(false);
   // 树父子是否关联
   const checkStrictly = ref<boolean>(true);
-  // 当前选中的区域
+  // 当前选中的分组
   const currentRegion = ref<any>(null);
+  //注册drawer
+  const [registerProjectDrawer, { openDrawer : openProjectDrawer }] = useDrawer();
+  const [registerRegionDrawer, { openDrawer : openRegionDrawer }] = useDrawer();
 
-  // 加载顶级区域信息
+  // 加载顶级分组信息
   async function loadRootTreeData() {
     try {
       loading.value = true;
@@ -91,7 +123,7 @@
   loadRootTreeData();
 
   /**
-   * 加载子级区域信息
+   * 加载子级分组信息
    */
   async function loadChildrenTreeData(treeNode) {
     try {
@@ -186,7 +218,7 @@
   }
 
   /**
-   * 同步区域
+   * 同步分组
    */
   async function syncRegionInfo(){
     let data = currentRegion.value;
@@ -208,6 +240,123 @@
     await loadRootTreeData();
   }
 
+  /**
+   * 新增
+   */
+  function handleCreateProject() {
+    openProjectDrawer(true, {
+      isUpdate: false,
+      showFooter: true,
+      tenantSaas: false,
+    });
+  }
+
+  /**
+   * 新增下级
+   */
+  function handleCreateRegion() {
+    let data = currentRegion.value;
+    if (data == null) {
+      createMessage.warning('请先选择一个节点');
+      return;
+    }
+    let record = {
+      projectId: data.projectId,
+      projectName: data.projectName,
+      parentId: data.regionId,
+      parentName: data.regionName,
+    };
+    openRegionDrawer(true, {
+      record,
+      isUpdate: false,
+      showFooter: true,
+      tenantSaas: false,
+    });
+  }
+
+  /**
+   * 添加子级
+   */
+  function onAddChild(data = currentRegion.value){
+    if (data == null) {
+      createMessage.warning('请先选择一个节点');
+      return;
+    }
+    console.log(data);
+    let record = {
+      projectId: data.projectId,
+      projectName: data.projectName,
+      parentId: data.regionId,
+      parentName: data.regionName,
+    };
+    console.log(record);
+    openRegionDrawer(true, {
+      record,
+      isUpdate: false,
+      showFooter: true,
+      tenantSaas: false,
+    });
+  }
+
+  /**
+   *删除节点
+   */
+  function handleDeleteNode(data = currentRegion.value){
+    if (data == null) {
+      createMessage.warning('请先选择一个节点');
+      return;
+    }
+    if(data.regionId == null){
+      handleDeleteProject(data);
+    }else{
+      handleDelete(data);
+    }
+  }
+
+  /**
+   * 删除项目
+   */
+  function handleDeleteProject(record: Recordable) {
+    Modal.confirm({
+      title: '删除项目',
+      width: '500px',
+      icon: createVNode(ExclamationCircleOutlined),
+      content: createVNode('div', { style: 'color:red;' }, '项目删除后，与之相关信息将失效，确定要删除该项目吗？'),
+      okText: '确定',
+      onOk() {
+        deletePrject(record, handleSuccess);
+      },
+      onCancel() {
+        // console.log('Cancel');
+      },
+      class: 'test',
+    });
+  }
+
+  /**
+   * 删除分组
+   */
+  function handleDelete(record: Recordable) {
+    Modal.confirm({
+      title: '删除分组',
+      width: '500px',
+      icon: createVNode(ExclamationCircleOutlined),
+      content: createVNode('div', { style: 'color:red;' }, '分组删除后，该分组下的所有设备将被转移，确定要删除该分组吗？'),
+      okText: '确定',
+      onOk() {
+        deleteRegion(record, handleSuccess);
+      },
+      onCancel() {
+        // console.log('Cancel');
+      },
+      class: 'test',
+    });
+  }
+
+  function handleSuccess(){
+    loadRootTreeData();
+  }
+
   defineExpose({
     loadRootTreeData,
   });