Web/cn-rdms-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(产品需求、项目需求): 按照会议所说进行修改。

Browse Source
This commit is contained in:
dk
2026-05-18 16:49:12 +08:00
parent 023490c012
commit 2367e03146
32 changed files with 1065 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/product/requirement/modules/module-tree-node.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { type Ref, computed, inject, ref } from 'vue';
import { useAuth } from '@/hooks/business/auth';
defineOptions({ name: 'ModuleTreeNode' });
@@ -32,10 +33,23 @@ const emit = defineEmits([
'updateNewChildModuleName'
]);
const { hasObjectAuth } = useAuth();
const isRootModule = computed(() => props.module.id === props.rootModuleId);
const hasAnyActionPermission = computed(() => {
if (isRootModule.value) {
return hasObjectAuth('project:product:create');
}
return (
hasObjectAuth('project:product:create') ||
hasObjectAuth('project:product:update') ||
hasObjectAuth('project:product:delete')
);
});
const collapsedModuleIds = inject<Ref<Set<string>>>('collapsedModuleIds', ref(new Set()));
const toggleCollapse = inject<(id: string) => void>('toggleCollapse', () => {});
const isRootModule = computed(() => props.module.id === props.rootModuleId);
const isSelected = computed(() => props.selectedModuleId === props.module.id);
const isEditing = computed(() => props.editingNodeId === props.module.id);
const isAddingChild = computed(() => props.addingChildParentId === props.module.id);
@@ -141,35 +155,27 @@ function handleToggle() {
/>
</div>
<div v-if="!isEditing" class="module-tree-item__actions" @click.stop>
<div v-if="!isEditing && hasAnyActionPermission" class="module-tree-item__actions" @click.stop>
<ElDropdown trigger="click">
<ElButton text size="small" class="module-tree-item__more-btn">
<icon-mdi-dots-horizontal class="text-14px" />
</ElButton>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem
v-auth="{ code: 'project:product:create', source: 'object' }"
@click="handleStartAddChild"
>
<ElDropdownItem v-if="hasObjectAuth('project:product:create')" @click="handleStartAddChild">
<div class="flex items-center gap-6px">
<icon-ic-round-plus class="text-14px" />
<span>新增子模块</span>
</div>
</ElDropdownItem>
<ElDropdownItem
v-if="!isRootModule"
v-auth="{ code: 'project:product:update', source: 'object' }"
@click="handleStartEdit"
>
<ElDropdownItem v-if="!isRootModule && hasObjectAuth('project:product:update')" @click="handleStartEdit">
<div class="flex items-center gap-6px">
<icon-mdi-pencil-outline class="text-14px" />
<span>编辑</span>
</div>
</ElDropdownItem>
<ElDropdownItem
v-if="!isRootModule && canDeleteModule"
v-auth="{ code: 'project:product:delete', source: 'object' }"
v-if="!isRootModule && canDeleteModule && hasObjectAuth('project:product:delete')"
divided
@click="handleDelete"
>
@@ -241,73 +247,112 @@ function handleToggle() {
.module-tree-node {
display: flex;
flex-direction: column;
gap: 10px;
}
.module-tree-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 14px;
border: 1px solid rgb(226 232 240 / 92%);
border-radius: 14px;
background-color: rgb(248 250 252 / 96%);
color: rgb(71 85 105 / 94%);
gap: 8px;
min-height: 36px;
padding: 6px 12px;
padding-left: 16px;
border-radius: 8px;
color: #475569;
font-size: 14px;
cursor: pointer;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
background-color 0.15s ease,
color 0.15s ease;
}
.module-tree-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
border-radius: 0 2px 2px 0;
background-color: transparent;
transition:
height 0.15s ease,
background-color 0.15s ease;
}
.module-tree-item:hover {
transform: translateY(-1px);
border-color: rgb(148 163 184 / 56%);
background-color: #f1f5f9;
}
.module-tree-item.is-active {
border-color: rgb(13 148 136 / 42%);
background-color: rgb(240 253 250 / 98%);
color: rgb(15 118 110 / 96%);
font-weight: 600;
background-color: #f0fdfa;
color: #0d9488;
font-weight: 500;
}
.module-tree-item.is-root:not(.is-active) .module-tree-item__icon {
color: rgb(13 148 136 / 80%);
.module-tree-item.is-active::before {
height: 60%;
background-color: #14b8a6;
}
.module-tree-item.is-root {
font-weight: 600;
color: #1e293b;
}
.module-tree-item.is-root:hover {
background-color: #f8fafc;
}
.module-tree-item.is-root.is-active {
background-color: #f0fdfa;
color: #0d9488;
}
.module-tree-item--new {
border-style: dashed;
border-color: rgb(148 163 184 / 56%);
border: 1px dashed #cbd5e1;
background-color: #f8fafc;
}
.module-tree-item__icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: rgb(100 116 139 / 80%);
.module-tree-item--new:hover {
background-color: #f1f5f9;
}
.module-tree-item__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
width: 18px;
height: 18px;
flex-shrink: 0;
cursor: pointer;
user-select: none;
transition: transform 0.2s ease;
color: rgb(148 163 184);
color: #94a3b8;
border-radius: 4px;
}
.module-tree-item__toggle:hover {
background-color: #e2e8f0;
color: #64748b;
}
.module-tree-item__toggle.is-expanded svg {
transform: rotate(90deg);
}
.module-tree-item__icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: #94a3b8;
}
.module-tree-item.is-active .module-tree-item__icon {
color: #14b8a6;
}
.module-tree-item__content {
flex: 1;
min-width: 0;
@@ -326,7 +371,7 @@ function handleToggle() {
}
.module-tree-item__input :deep(.el-input__inner) {
height: 28px;
height: 26px;
}
.module-tree-item__actions {
@@ -334,7 +379,7 @@ function handleToggle() {
align-items: center;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.2s ease;
transition: opacity 0.15s ease;
}
.module-tree-item:hover .module-tree-item__actions {
@@ -347,5 +392,10 @@ function handleToggle() {
.module-tree-item__more-btn {
padding: 4px;
border-radius: 4px;
}
.module-tree-item__more-btn:hover {
background-color: #e2e8f0;
}
</style>