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

2024-11-18 15:58:12 +08:00 · 2024-11-18 15:58:12 +08:00 · b7824dab34
parent 72bd8d6b44
commit b7824dab34
6 changed files with 46 additions and 56 deletions
--- a/frontend/src/components/business/ms-tree/index.vue
+++ b/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; // 隐藏展开折叠图标
--- a/frontend/src/components/pure/ms-tree-select/index.vue
+++ b/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');
-      if (!realNode) return;
-      realNode.containChildModule = false;
-      realNode.children?.forEach((child) => {
-        child.disabled = false;
-      });
+      // 取消当前
+      updateNodeState(nodeData.id);
    }
    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) {
--- a/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue
@ -91,13 +91,7 @@
      </div>
    </template>
  </MsBaseTable>
-  <AddHttpDrawer
-    v-model:visible="addVisible"
-    :module-tree="moduleTree"
-    :is-copy="isCopy"
-    :current-id="httpId"
-    @close="addVisible = false"
-  />
+  <AddHttpDrawer v-model:visible="addVisible" :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(',');
    }
--- a/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue
+++ b/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"
--- a/frontend/src/views/project-management/environmental/locale/en-US.ts
+++ b/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',
--- a/frontend/src/views/project-management/environmental/locale/zh-CN.ts
+++ b/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}',