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

This commit is contained in:
teukkk 2024-11-18 15:58:12 +08:00 committed by 刘瑞斌
parent 72bd8d6b44
commit b7824dab34
6 changed files with 46 additions and 56 deletions

View File

@ -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; //

View File

@ -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,16 +170,21 @@
checkNode(_checkedKeys, checkedNodes);
}
function handleSelectCurrent(nodeData: MsTreeNodeData) {
if (props.showContainChildModule && checkedKeys.value.includes(nodeData.id)) {
//
const realNode = findNodeByKey<MsTreeNodeData>(treeData.value, nodeData.id, 'id');
//
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)) {
//
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) {

View File

@ -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(',');
}

View File

@ -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"

View File

@ -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',

View File

@ -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}',