refactor(项目管理): 环境管理-添加http里模块下拉-处理输入框删除一个值的情况

frontend/src/components/business/ms-tree/index.vue

@@ -35,7 +35,9 @@
           </template>
           <a-tooltip
             v-if="$slots['title']"
-            :content="_props[props.fieldNames.title]"
+            :content="
+              _props.disabled && props.nodeDisabledTip?.length ? props.nodeDisabledTip : _props[props.fieldNames.title]
+            "
             :mouse-enter-delay="300"
             :position="props.titleTooltipPosition"
             :disabled="props.disabledTitleTooltip"
@@ -123,6 +125,7 @@
       checkStrictly?: boolean; // 是否取消父子节点关联
       virtualListProps?: VirtualListProps; // 虚拟滚动列表的属性
       disabledTitleTooltip?: boolean; // 是否禁用标题 tooltip
+      nodeDisabledTip?: string; // 节点disabled的时候显示的内容
       actionOnNodeClick?: 'expand'; // 点击节点时的操作
       nodeHighlightClass?: string; // 节点高亮背景色
       hideSwitcher?: boolean; // 隐藏展开折叠图标

frontend/src/components/pure/ms-tree-select/index.vue

@@ -51,6 +51,7 @@
           :empty-text="t('common.noData')"
           :virtual-list-props="virtualListProps"
           :field-names="props.fieldNames as MsTreeFieldNames"
+          :node-disabled-tip="t('project.environmental.http.nodeDisabledTip')"
           default-expand-all
           block-node
           title-tooltip-position="tr"
@@ -110,6 +111,7 @@
   import { findNodeByKey, mapTree } from '@/utils';
 
   import type { TreeFieldNames, TreeNodeData } from '@arco-design/web-vue';
+  import { LabelValue } from '@arco-design/web-vue/es/tree-select/interface';
 
   const props = withDefaults(
     defineProps<{
@@ -151,6 +153,7 @@
 
   function handleCheck(_checkedKeys: Array<string | number>, checkedNodes: MsTreeNodeData) {
     if (props.showContainChildModule) {
+      if (checkedNodes.node.disabled) return;
       const realNode = findNodeByKey<MsTreeNodeData>(treeData.value, checkedNodes.node.id, 'id');
       if (!realNode) return;
       if (checkedNodes.checked) {
@@ -167,15 +170,20 @@
     checkNode(_checkedKeys, checkedNodes);
   }
 
+  // 当前节点“包含新增子模块”取消勾选，下面一层的子级取消禁用
+  function updateNodeState(nodeId: string | number) {
+    const realNode = findNodeByKey<MsTreeNodeData>(treeData.value, nodeId, 'id');
+    if (!realNode) return;
+    realNode.containChildModule = false;
+    realNode.children?.forEach((child) => {
+      child.disabled = false;
+    });
+  }
+
   function handleSelectCurrent(nodeData: MsTreeNodeData) {
     if (props.showContainChildModule && checkedKeys.value.includes(nodeData.id)) {
-      // 取消当前，“包含新增子模块”取消勾选，下面一层的子级取消禁用
+      // 取消当前
-      const realNode = findNodeByKey<MsTreeNodeData>(treeData.value, nodeData.id, 'id');
+      updateNodeState(nodeData.id);
-      if (!realNode) return;
-      realNode.containChildModule = false;
-      realNode.children?.forEach((child) => {
-        child.disabled = false;
-      });
     }
     selectParent(nodeData, !!checkedKeys.value.includes(nodeData.id));
   }
@@ -294,11 +302,20 @@
       }
     }
   }
-  function handleChange() {
+  function handleChange(val: string | number | LabelValue | Array<string | number> | LabelValue[] | undefined) {
     if (props.multiple) {
       nextTick(() => {
         inputValue.value = tempInputValue.value;
       });
+      if (props.showContainChildModule) {
+        const deletedIds = selectValue.value.filter(
+          (item: string | number) => !(val as (string | number)[]).includes(item)
+        );
+        // 如果是输入框删除一个
+        if (deletedIds.length === 1) {
+          updateNodeState(deletedIds[0]);
+        }
+      }
     }
   }
   function handleKeyup(e: KeyboardEvent) {

frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue

@@ -91,13 +91,7 @@
       </div>
     </template>
   </MsBaseTable>
-  <AddHttpDrawer
+  <AddHttpDrawer v-model:visible="addVisible" :is-copy="isCopy" :current-id="httpId" @close="addVisible = false" />
-    v-model:visible="addVisible"
-    :module-tree="moduleTree"
-    :is-copy="isCopy"
-    :current-id="httpId"
-    @close="addVisible = false"
-  />
 </template>
 
 <script lang="ts" async setup>
@@ -116,7 +110,7 @@
   import useVisit from '@/hooks/useVisit';
   import { useAppStore, useTableStore } from '@/store';
   import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
-  import { findNodeNames } from '@/utils';
+  import { findNodeByKey, findNodeNames } from '@/utils';
   import { hasAnyPermission } from '@/utils/permission';
 
   import { BugListItem } from '@/models/bug-management';
@@ -317,7 +311,17 @@
 
   function getModuleName(record: HttpForm) {
     if (record.type === 'MODULE') {
-      const moduleIds: string[] = record.moduleMatchRule.modules.map((item) => item.moduleId);
+      const moduleIds: string[] = [];
+      // 勾了包含子模块的只显示父模块
+      record.moduleMatchRule.modules.forEach((item) => {
+        const realNode = findNodeByKey<ModuleTreeNode>(moduleTree.value, item.moduleId, 'id');
+        const notShow = record.moduleMatchRule.modules.find(
+          (i) => i.moduleId === realNode?.parentId && i.containChildModule
+        );
+        if (!notShow) {
+          moduleIds.push(item.moduleId);
+        }
+      });
       const result = findNodeNames(moduleTree.value, moduleIds);
       return result.join(',');
     }

frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue

@@ -60,21 +60,7 @@
           <a-option value="PATH">{{ t('project.environmental.http.path') }}</a-option>
         </a-select>
       </a-form-item>
-      <!-- 接口模块选择 -->
-      <!-- <a-form-item
-        v-if="showApiModule"
-        class="mb-[16px]"
-        field="apiModule"
-        asterisk-position="end"
-        :label="t('project.environmental.http.apiModuleSelect')"
-        :rules="[{ required: true, message: t('project.environmental.http.hostNameRequired') }]"
-      >
-        <a-select v-model:model-value="form.apiModule" multiple :placeholder="t('common.pleaseSelect')">
-          <a-option value="none">{{ t('project.environmental.http.none') }}</a-option>
-        </a-select>
-      </a-form-item> -->
       <!-- 展示模块 -->
-      <!-- TODO 模块还没有加 -->
       <a-form-item
         v-if="form.type === 'MODULE'"
         class="mb-[16px]"
@@ -83,30 +69,6 @@
         :rules="[{ required: true, message: t('project.environmental.http.selectModule') }]"
         asterisk-position="end"
       >
-        <!-- TODO 先做普通树 放在下一个版本 -->
-        <!-- <ApiTree
-          v-model:focus-node-key="focusNodeKey"
-          :placeholder="t('project.environmental.http.selectApiModule')"
-          :selected-keys="selectedKeys"
-          :data="moduleTree"
-          :field-names="{
-            title: 'name',
-            key: 'id',
-            children: 'children',
-            count: 'count',
-          }"
-          :tree-checkable="true"
-          :hide-more-action="true"
-        >
-          <template #tree-slot-title="nodeData">
-            <div class="inline-flex w-full">
-              <div class="one-line-text w-full text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            </div>
-          </template>
-          <template #tree-slot-extra="nodeData">
-            <span><MsTableMoreAction :list="moreActions" @select="handleMoreActionSelect($event, nodeData)" /></span>
-          </template>
-        </ApiTree> -->
         <MsTreeSelect
           v-model:model-value="form.moduleId"
           v-model:data="envTree"

frontend/src/views/project-management/environmental/locale/en-US.ts

@@ -71,6 +71,8 @@ export default {
   'project.environmental.http.containChildModule': 'Include newly added submodules',
   'project.environmental.http.containChildModuleTip':
     'Automatically include sub modules added after the selected module',
+  'project.environmental.http.nodeDisabledTip':
+    'The parent level has selected `Add Sub Module`, and the sub level cannot be unchecked; If unchecked, please uncheck `Add Sub Module` for the parent level',
   'project.environmental.database.addDatabase': 'Add Database',
   'project.environmental.database.updateDatabase': 'Update Database {name}',
   'project.environmental.database.name': 'Database Name',

frontend/src/views/project-management/environmental/locale/zh-CN.ts

@@ -73,6 +73,8 @@ export default {
   'project.environmental.http.pathPlaceholder': '请输入路径',
   'project.environmental.http.containChildModule': '包含新增子模块',
   'project.environmental.http.containChildModuleTip': '自动包含所选模块后续添加的子模块',
+  'project.environmental.http.nodeDisabledTip':
+    '父级已勾选「新增子模块」，子级不可取消勾选；若取消勾选，父级请取消勾选「新增子模块」',
   'project.environmental.database.title': '数据库',
   'project.environmental.database.addDatabase': '添加数据源',
   'project.environmental.database.updateDatabase': '更新数据源{name}',