Skip to content

Commit 0d23e2d

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
perf: tree style
1 parent 48695df commit 0d23e2d

2 files changed

Lines changed: 175 additions & 182 deletions

File tree

‎ui/src/components/dynamics-form/constructor/items/TreeSelectConstructor.vue‎

Lines changed: 130 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,54 @@
77
<span class="color-danger">*</span>
88
</span>
99
<div class="flex">
10-
<el-checkbox v-model="formValue.multiple" label="允许多选" size="large" class="pr-8" />
10+
<el-checkbox
11+
v-model="formValue.multiple"
12+
:label="$t('dynamicsForm.TreeSelect.allowMultipleSelections')"
13+
size="large"
14+
class="pr-8"
15+
/>
1116
<el-button link type="primary" @click="openAddRootDialog">
1217
<AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
13-
{{ $t('common.add') }}
1418
</el-button>
1519
</div>
1620
</div>
1721
</template>
18-
19-
<el-tree
20-
:data="treeData"
21-
node-key="id"
22-
default-expand-all
23-
:expand-on-click-node="false"
24-
:props="treeProps"
25-
class="option-tree"
26-
>
27-
<template #default="{ data }">
28-
<div class="tree-node">
29-
<div class="tree-node__main">
30-
<span class="tree-node__label">{{ data.label }}</span>
31-
<span class="tree-node__colon">：</span>
32-
<span class="tree-node__value">{{ data.value }}</span>
33-
</div>
34-
35-
<div class="tree-node__actions">
36-
<el-button link type="primary" @click.stop="openAddChildDialog(data)">
37-
<el-icon class="action-btn">
38-
<Plus />
39-
</el-icon>
40-
</el-button>
41-
42-
<el-button link type="primary" @click.stop="openEditDialog(data)">
43-
<el-icon class="action-btn"> <Edit /></el-icon>
44-
</el-button>
45-
46-
<el-button link type="danger" @click.stop="handleDelete(data)">
47-
<el-icon class="action-btn"> <Delete /></el-icon>
48-
</el-button>
22+
<el-card shadow="never" class="border-r-6 w-full" style="--el-card-padding: 8px">
23+
<el-tree
24+
:data="treeData"
25+
node-key="id"
26+
default-expand-all
27+
:expand-on-click-node="false"
28+
:props="treeProps"
29+
class="option-tree"
30+
>
31+
<template #default="{ data }">
32+
<div class="flex-between w-full">
33+
<div class="ellipsis" :title="`${data.label}-${data.value}`" style="max-width: 350px">
34+
<span>{{ data.label }}-{{ data.value }}</span>
35+
</div>
36+
37+
<div>
38+
<span class="mr-4">
39+
<el-button link @click.stop="openAddChildDialog(data)">
40+
<AppIcon iconName="app-add-outlined" class="color-secondary"></AppIcon>
41+
</el-button>
42+
</span>
43+
<span class="mr-4">
44+
<el-button link @click.stop="openEditDialog(data)">
45+
<AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
46+
</el-button>
47+
</span>
48+
<span>
49+
<el-button link @click.stop="handleDelete(data)">
50+
<AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
51+
</el-button>
52+
</span>
53+
</div>
4954
</div>
50-
</div>
51-
</template>
52-
</el-tree>
55+
</template>
56+
</el-tree>
57+
</el-card>
5358
</el-form-item>
5459

5560
<el-form-item
@@ -86,57 +91,101 @@
8691
"
8792
width="520px"
8893
destroy-on-close
94+
label-position="top"
95+
require-asterisk-position="right"
96+
@submit.prevent
8997
>
90-
<div class="dialog-body">
91-
<div v-for="(item, index) in addDialog.formList" :key="item.key" class="dialog-row">
92-
<el-input
93-
v-model.trim="item.label"
94-
:placeholder="$t('dynamicsForm.tag.placeholder')"
95-
maxlength="50"
96-
/>
97-
<el-input
98-
v-model.trim="item.value"
99-
:placeholder="$t('dynamicsForm.Select.placeholder')"
100-
maxlength="100"
101-
/>
102-
<el-button
103-
link
104-
type="danger"
105-
:disabled="addDialog.formList.length === 1"
106-
@click="removeAddRow(index)"
107-
>
108-
<el-icon class="action-btn"> <Delete /></el-icon>
109-
</el-button>
110-
</div>
111-
112-
<el-button link type="primary" @click="appendAddRow">
113-
<AppIcon iconName="app-add-outlined" class="mr-4" />
114-
{{ $t('common.add') }}
115-
</el-button>
116-
</div>
117-
98+
<el-scrollbar>
99+
<el-row :gutter="8" style="margin-right: 10px" class="tag-list-max-list">
100+
<template v-for="(item, index) in addDialog.formList" :key="index">
101+
<el-col :span="12">
102+
<el-form-item>
103+
<template #label>
104+
{{ index === 0 ? $t('dynamicsForm.tag.label') : '' }}
105+
<span class="color-danger" v-if="index === 0"> *</span>
106+
</template>
107+
<el-input
108+
v-model.trim="item.label"
109+
class="w-full"
110+
:placeholder="$t('dynamicsForm.tag.placeholder')"
111+
maxlength="50"
112+
></el-input>
113+
</el-form-item>
114+
</el-col>
115+
<el-col :span="11">
116+
<el-form-item class="w-full">
117+
<template #label>
118+
{{ index === 0 ? $t('dynamicsForm.Select.label') : '' }}
119+
<span class="color-danger" v-if="index === 0">*</span>
120+
</template>
121+
<el-input
122+
v-model.trim="item.value"
123+
:placeholder="$t('dynamicsForm.Select.placeholder')"
124+
maxlength="100"
125+
></el-input>
126+
</el-form-item>
127+
</el-col>
128+
<el-col :span="1">
129+
<el-button
130+
:disabled="addDialog.formList.length === 1"
131+
link
132+
@click="removeAddRow(index)"
133+
:style="{ marginTop: index === 0 ? '35px' : '12px' }"
134+
>
135+
<AppIcon iconName="app-delete"></AppIcon>
136+
</el-button>
137+
</el-col>
138+
</template>
139+
</el-row>
140+
</el-scrollbar>
141+
<el-button link type="primary" @click="appendAddRow">
142+
<AppIcon iconName="app-add-outlined" class="mr-4" />
143+
{{ $t('common.add') }}
144+
</el-button>
118145
<template #footer>
119146
<el-button @click="closeAddDialog">{{ $t('common.cancel') }}</el-button>
120147
<el-button type="primary" @click="submitAdd">{{ $t('common.add') }}</el-button>
121148
</template>
122149
</el-dialog>
123150

124151
<!-- 编辑弹窗 -->
125-
<el-dialog v-model="editDialog.visible" :title="$t('common.edit')" width="520px" destroy-on-close>
126-
<div class="dialog-body">
127-
<div class="dialog-row dialog-row--edit">
128-
<el-input
129-
v-model.trim="editDialog.form.label"
130-
:placeholder="$t('dynamicsForm.tag.placeholder')"
131-
maxlength="50"
132-
/>
133-
<el-input
134-
v-model.trim="editDialog.form.value"
135-
:placeholder="$t('dynamicsForm.Select.placeholder')"
136-
maxlength="100"
137-
/>
138-
</div>
139-
</div>
152+
<el-dialog
153+
v-model="editDialog.visible"
154+
:title="$t('common.edit')"
155+
width="520px"
156+
destroy-on-close
157+
label-position="top"
158+
require-asterisk-position="right"
159+
@submit.prevent
160+
>
161+
<el-row :gutter="8">
162+
<el-col :span="12">
163+
<el-form-item>
164+
<template #label>
165+
{{ $t('dynamicsForm.tag.label') }}
166+
<span class="color-danger"> *</span>
167+
</template>
168+
<el-input
169+
v-model.trim="editDialog.form.label"
170+
:placeholder="$t('dynamicsForm.tag.placeholder')"
171+
maxlength="50"
172+
/>
173+
</el-form-item>
174+
</el-col>
175+
<el-col :span="12">
176+
<el-form-item class="w-full">
177+
<template #label>
178+
{{ $t('dynamicsForm.Select.label') }}
179+
<span class="color-danger">*</span>
180+
</template>
181+
<el-input
182+
v-model.trim="editDialog.form.value"
183+
:placeholder="$t('dynamicsForm.Select.placeholder')"
184+
maxlength="100"
185+
/>
186+
</el-form-item>
187+
</el-col>
188+
</el-row>
140189

141190
<template #footer>
142191
<el-button @click="closeEditDialog">{{ $t('common.cancel') }}</el-button>
@@ -146,7 +195,6 @@
146195
</template>
147196
<script setup lang="ts">
148197
import { computed, onMounted, watch, ref, reactive } from 'vue'
149-
import { Edit, Plus, Delete } from '@element-plus/icons-vue'
150198
import { t } from '@/locales/'
151199
152200
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -396,100 +444,7 @@ function removeNodeById(list: TreeNode[], targetId: string): boolean {
396444
}
397445
</script>
398446
<style lang="scss" scoped>
399-
.defaultValueItem {
400-
position: relative;
401-
.defaultValueCheckbox {
402-
position: absolute;
403-
right: 0;
404-
top: -35px;
405-
}
406-
}
407-
.dynamic-option-tree {
408-
width: 100%;
409-
}
410-
411-
.tree-header {
412-
display: flex;
413-
align-items: center;
414-
justify-content: space-between;
415-
margin-bottom: 12px;
416-
}
417-
418-
.tree-header__title {
419-
display: flex;
420-
align-items: center;
421-
gap: 4px;
422-
color: var(--el-text-color-primary);
423-
font-size: 14px;
424-
}
425-
426-
.required {
427-
color: var(--el-color-danger);
428-
}
429-
430-
.tree-empty {
431-
width: 100%;
432-
padding: 24px 0;
433-
border: 1px dashed var(--el-border-color);
434-
border-radius: 8px;
435-
}
436-
.option-tree {
437-
width: 100%;
438-
}
439-
.option-tree :deep(.el-tree-node__content) {
440-
height: 18px;
441-
}
442-
443-
.tree-node {
444-
width: 100%;
445-
display: flex;
446-
align-items: center;
447-
justify-content: space-between;
448-
gap: 12px;
449-
padding-right: 8px;
450-
}
451-
452-
.tree-node__main {
453-
display: flex;
454-
align-items: center;
455-
min-width: 0;
456-
overflow: hidden;
457-
white-space: nowrap;
458-
}
459-
460-
.tree-node__label,
461-
.tree-node__colon,
462-
.tree-node__value {
463-
font-size: 14px;
464-
color: var(--el-text-color-primary);
465-
}
466-
467-
.tree-node__actions {
468-
display: flex;
469-
align-items: center;
470-
gap: 4px;
471-
flex-shrink: 0;
472-
opacity: 0;
473-
transition: opacity 0.2s ease;
474-
}
475-
476-
.tree-node:hover .tree-node__actions {
477-
opacity: 1;
478-
}
479-
480-
.dialog-body {
481-
padding-top: 8px;
482-
}
483-
484-
.dialog-row {
485-
display: grid;
486-
grid-template-columns: 1fr 1fr 40px;
487-
gap: 12px;
488-
align-items: center;
489-
margin-bottom: 12px;
490-
}
491-
492-
.dialog-row--edit {
493-
grid-template-columns: 1fr 1fr;
447+
.tag-list-max-list {
448+
max-height: calc(100vh - 260px);
494449
}
495450
</style>

0 commit comments

Comments
 (0)