1.空间服务分配

  增加根据服务编号查询
  增加修改服务名称
  增加左侧导航动态刷新
2.空间服务分类管理
  服务拖动bug修改
  操作后树自动展开问题修改
  页面显示数据唯一编号（id）

src/api/tags/tags/index.ts

@@ -61,3 +61,15 @@ export const delTags = (id: string | number | Array<string | number>) => {
     method: 'delete'
   });
 };
+
+/**
+ * 修改服务名称
+ * @param data
+ */
+export const updateMlDirectoryNewName = (data: TagsForm) => {
+  return request({
+    url: '/tags/tags/updateMlDirectoryNewName',
+    method: 'post',
+    data: data
+  });
+};

src/views/tags/tags/index.vue

@@ -44,9 +44,10 @@
       <div class="tree-with-header">
         <div class="table-header">
           <div class="header-cell">名称</div>
-          <div class="header-cell">编号</div>
+          <div class="header-cell">编码</div>
           <div class="header-cell">全码</div>
           <div class="header-cell">等级</div>
+          <div class="header-cell">唯一编号</div>
           <div class="header-cell">操作</div>
         </div>
         <el-tree
@@ -82,6 +83,7 @@
               <div class="cell" @click="handleUpdate(data)">
                 <dict-tag :options="space_server_type" :value="data.level" />
               </div>
+              <div class="cell" @click="handleUpdate(data)">{{ data.id }}</div>
               <div class="cell">
                 <el-tooltip content="修改" placement="top">
                   <el-button v-hasPermi="['tags:tags:edit']" link type="primary" icon="Edit" @click="handleUpdate(data)" />
@@ -163,6 +165,7 @@ const draggable = ref(false);
 const queryFormRef = ref<ElFormInstance>();
 const tagsFormRef = ref<ElFormInstance>();
 const tagsTreeRef = ref<ElTreeInstance>();
+//默认展开内容
 const expandedKeysData = ref([]);
 
 const dialog = reactive<DialogOption>({ visible: false, title: '' });
@@ -202,7 +205,7 @@ const getList = async () => {
     deptOptions.value = res.data;
     const newIds = res.data.map((item) => item.id);
     // 合并两个数组并去重
-    expandedKeysData.value = [...new Set([...expandedKeysData.value, ...newIds])];
+    // expandedKeysData.value = [...new Set([...expandedKeysData.value, ...newIds])];
     loading.value = false;
   }
 };
@@ -363,6 +366,7 @@ const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType,
   form.value.id = draggingNode.data.id;
   form.value.parentId = dropNode.data.id;
   form.value.name = draggingNode.data.label;
+  form.value.code = draggingNode.data.code;
   editTags();
 };
 
@@ -429,7 +433,7 @@ onMounted(() => {
 
 .table-header {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* 增加一列 */
   background-color: #f5f7fa;
   padding: 10px;
   border-bottom: 1px solid #dcdfe6;
@@ -470,7 +474,7 @@ onMounted(() => {
 
 .tree-row {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   /* padding: 10px; */
   border-bottom: 1px solid #dcdfe6;
   height: 40px;

src/views/tags/tagsDirectory/index.vue

@@ -24,6 +24,9 @@
             @node-drag-over="handleDragOver"
             @node-drag-end="handleDragEnd"
             @node-drop="handleDrop"
+            :default-expanded-keys="expandedKeysData"
+            @node-expand="handleNodeExpand"
+            @node-collapse="handleNodeCollapse"
           >
             <template #default="{ node, data }">
               {{ node.label }}
@@ -69,10 +72,15 @@
               @right-check-change="handleRightCheckChange"
             >
               <template v-slot:left-footer>
-                <el-button class="transfer-footer" @click="previewMap('left')">服务预览</el-button>
+                <div class="transfer-footer-div">
+                  <el-button class="transfer-footer" @click="previewMap('left')">服务信息</el-button>
+                </div>
               </template>
               <template v-slot:right-footer>
-                <el-button class="transfer-footer" @click="previewMap('right')">服务预览</el-button>
+                <div class="transfer-footer-div">
+                  <el-button class="transfer-footer" @click="editServiceName()">编辑服务</el-button>
+                  <el-button class="transfer-footer" @click="previewMap('right')">服务信息</el-button>
+                </div>
               </template>
             </el-transfer>
           </el-row>
@@ -83,6 +91,23 @@
   <template v-if="isPreviewDialogIsShow">
     <preview-map-dialog :current-dialog="currentDialogObj" v-model:dialog-visible="isPreviewDialogIsShow" destroy-on-close="true" />
   </template>
+
+  <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+    <el-form ref="tagsFormRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="编号" prop="name">
+        <el-input v-model="form.code" disabled />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup name="TagsDirectory" lang="ts">
@@ -93,7 +118,7 @@ import { TagsVO, TagsQuery, TagsForm } from '@/api/tags/tags/types';
 import type Node from 'element-plus/es/components/tree/src/model/node';
 import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode';
 import type { AllowDropType, NodeDropType } from 'element-plus/es/components/tree/src/tree.type';
-import { updateTags } from '@/api/tags/tags';
+import { updateTags,updateMlDirectoryNewName } from '@/api/tags/tags';
 import { tabClassDirectoryList, addClassTagDire } from '@/api/tags/tagsDirectory/index';
 import PreviewMapDialog from '@/components/ServicePreview/index.vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -108,6 +133,11 @@ const rightCheckedKeys = ref<number[]>([]);
 //地图预览
 const isPreviewDialogIsShow = ref(false);
 const currentDialogObj = ref(null);
+const expandedKeysData = ref([]);
+
+const dialog = reactive<DialogOption>({ visible: false, title: '' });
+const buttonLoading = ref(false);
+
 // 查询参数
 const queryTagsDirectory = ref<TagDirectoryQuery>({
   pageNum: 1,
@@ -123,6 +153,7 @@ const tagsDirectory = ref<ClassTagDireBo>({
 interface Option {
   id: number;
   name: string;
+  code: string;
 }
 
 const serviceData = ref<Option[]>([]);
@@ -139,7 +170,10 @@ const handleChange = (value, direction, movedKeys) => {
   tagsDirectory.value.directoryId = value;
   loading.value = true;
   try {
-    addClassTagDire(tagsDirectory.value).finally(() => proxy?.$modal.msgSuccess('操作成功'));
+    addClassTagDire(tagsDirectory.value).finally(() => {
+      proxy?.$modal.msgSuccess('操作成功');
+      getTreeSelect();
+    });
   } catch (error) {
     getList();
   } finally {
@@ -149,6 +183,7 @@ const handleChange = (value, direction, movedKeys) => {
 
 const deptTreeRef = ref<ElTreeInstance>();
 const queryFormRef = ref<ElFormInstance>();
+const tagsFormRef = ref<ElFormInstance>();
 
 const initFormData: TagsForm = {
   id: undefined,
@@ -165,8 +200,8 @@ const initData: PageData<TagsForm, TagsQuery> = {
     name: ''
   },
   rules: {
-    id: [{ required: true, message: '数据编号不能为空', trigger: 'blur' }],
-    parentId: [{ required: true, message: '父节点编号不能为空', trigger: 'blur' }]
+    code: [{ required: true, message: '服务编号不能为空', trigger: 'blur' }],
+    name: [{ required: true, message: '服务名称不能为空', trigger: 'blur' }]
   }
 };
 const data = reactive<PageData<TagsForm, TagsQuery>>(initData);
@@ -222,6 +257,7 @@ const getList = async () => {
     // 将获取到的服务列表数据赋值给 serviceData
     serviceData.value = res.data.list;
     value.value = res.data.selectList || [];
+    getTreeSelect();
   } catch (error) {
   } finally {
     loading.value = false;
@@ -353,6 +389,67 @@ const previewMap = async (type) => {
   }
 };
 
+/**
+ * 节点展开事件处理
+ * @param data 节点数据
+ * @param node 节点对象
+ */
+const handleNodeExpand = (data: TagsVO, node: Node) => {
+  expandedKeysData.value.push(data.id);
+  // 在这里可以添加你需要的逻辑，例如加载子节点数据等
+};
+
+/**
+ * 节点关闭事件处理
+ * @param data 节点数据
+ * @param node 节点对象
+ */
+const handleNodeCollapse = (data: TagsVO, node: Node) => {
+  expandedKeysData.value = expandedKeysData.value.filter((id) => id !== data.id);
+  // 在这里可以添加你需要的逻辑，例如加载子节点数据等
+};
+
+const editServiceName = () => {
+  //右侧 列表选中行
+  let data = rightCheckedKeys.value;
+  if (data.length != 1) {
+    proxy?.$modal.msgError('请选择一条已分配服务');
+    return;
+  }
+  let sData = serviceData.value.filter((item) => item.id == data[0]);
+  if (sData == null) {
+    proxy?.$modal.msgError('请选择一条已分配服务');
+    return;
+  }
+  form.value.code = sData[0].code;
+  form.value.name = sData[0].name;
+  dialog.visible = true;
+};
+/** 提交按钮 */
+const submitForm = () => {
+  tagsFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      await updateMlDirectoryNewName(form.value).finally(() => (buttonLoading.value = false));
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+// 取消按钮
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+// 表单重置
+const reset = () => {
+  form.value = { ...initFormData };
+  tagsFormRef.value?.resetFields();
+};
+
 onMounted(() => {
   getTreeSelect(); // 初始化部门数据
   loading.value = false;
@@ -374,9 +471,12 @@ onMounted(() => {
     font-size: var(--el-font-size-base);
   }
 
+  .transfer-footer-div {
+    text-align: right;
+    padding: 3px 6px;
+  }
   .transfer-footer {
-    margin-left: 420px;
-    padding: 6px 5px;
+    //margin-left: 420px;
   }
 }
 </style>