Skip to content

Commit 5116b94

Browse files
YunaiVYunaiV
authored
Merge pull request #94 from GoldenZqqq/feature/bpm
流程模型模块-优化一些样式细节、解决拖动排序逻辑问题
2 parents ac13524 + 4982440 commit 5116b94

File tree

2 files changed

+82
-100
lines changed

2 files changed

+82
-100
lines changed

‎src/views/bpm/model/CategoryDraggableModel.vue

Lines changed: 66 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,72 @@
11
<template>
2-
<!-- 默认使其全部展开 -->
3-
<el-collapse v-model="activeCollapse">
4-
<el-collapse-item :name="categoryInfo.id" :disabled="categoryInfo.modelList.length === 0">
5-
<template #icon="{ isActive }">
6-
<div class="flex-1 flex" v-if="!isCategorySorting">
7-
<div
2+
<div class="flex items-center h-50px">
3+
<div class="flex items-center">
4+
<el-tooltip content="拖动排序" v-if="isCategorySorting">
5+
<Icon
6+
:size="22"
7+
icon="ic:round-drag-indicator"
8+
class="ml-10px category-drag-icon cursor-move text-#8a909c"
9+
/>
10+
</el-tooltip>
11+
<h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
12+
<div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
13+
</div>
14+
<div class="flex-1 flex" v-if="!isCategorySorting">
15+
<div
16+
v-if="categoryInfo.modelList.length > 0"
17+
class="ml-20px flex items-center"
18+
:class="[
19+
'transition-transform duration-300 cursor-pointer',
20+
isExpand ? 'rotate-180' : 'rotate-0'
21+
]"
22+
@click="isExpand = !isExpand"
23+
>
24+
<Icon icon="ep:arrow-down-bold" color="#999" />
25+
</div>
26+
<div class="ml-auto flex items-center" :class="isModelSorting ? 'mr-15px' : 'mr-45px'">
27+
<template v-if="!isModelSorting">
28+
<el-button
829
v-if="categoryInfo.modelList.length > 0"
9-
class="ml-20px flex items-center"
10-
:class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
30+
link
31+
type="info"
32+
class="mr-20px"
33+
@click.stop="handleSort"
1134
>
12-
<Icon icon="ep:arrow-down-bold" color="#999" />
13-
</div>
14-
<div class="ml-auto mr-45px flex items-center">
15-
<template v-if="!isModelSorting">
16-
<el-button
17-
v-if="categoryInfo.modelList.length > 0"
18-
link
19-
type="info"
20-
class="mr-20px"
21-
@click.stop="handleSort"
22-
>
23-
<Icon icon="fa:sort-amount-desc" class="mr-5px" />
24-
排序
25-
</el-button>
26-
<el-button
27-
v-else
28-
link
29-
type="info"
30-
class="mr-20px"
31-
@click.stop="handleAddModel('create')"
32-
>
33-
<Icon icon="fa:plus" class="mr-5px" />
34-
新建
35-
</el-button>
36-
<el-dropdown
37-
@command="(command) => handleCategoryCommand(command)"
38-
placement="bottom"
39-
>
40-
<el-button link type="info" @click.stop="handleGroup">
41-
<Icon icon="ep:setting" class="mr-5px" />
42-
分类
43-
</el-button>
44-
<template #dropdown>
45-
<el-dropdown-menu>
46-
<el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
47-
<el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
48-
</el-dropdown-menu>
49-
</template>
50-
</el-dropdown>
51-
</template>
52-
<template v-else>
53-
<el-button @click.stop="cancelSort"> 取 消 </el-button>
54-
<el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
35+
<Icon icon="fa:sort-amount-desc" class="mr-5px" />
36+
排序
37+
</el-button>
38+
<el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
39+
<Icon icon="fa:plus" class="mr-5px" />
40+
新建
41+
</el-button>
42+
<el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
43+
<el-button link type="info">
44+
<Icon icon="ep:setting" class="mr-5px" />
45+
分类
46+
</el-button>
47+
<template #dropdown>
48+
<el-dropdown-menu>
49+
<el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
50+
<el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
51+
</el-dropdown-menu>
5552
</template>
56-
<!-- <el-button v-else type="primary" @click.stop="addModel"> 新建模型 </el-button> -->
57-
</div>
58-
</div>
59-
<div></div>
60-
</template>
61-
<template #title>
62-
<div class="flex items-center">
63-
<el-tooltip content="拖动排序" v-if="isCategorySorting">
64-
<Icon
65-
:size="22"
66-
icon="ic:round-drag-indicator"
67-
class="ml-10px category-drag-icon cursor-move text-#8a909c"
68-
/>
69-
</el-tooltip>
70-
<h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
71-
<div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
72-
</div>
73-
</template>
53+
</el-dropdown>
54+
</template>
55+
<template v-else>
56+
<el-button @click.stop="cancelSort"> 取 消 </el-button>
57+
<el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
58+
</template>
59+
</div>
60+
</div>
61+
</div>
62+
<el-collapse-transition>
63+
<div v-show="isExpand">
7464
<el-table
7565
:class="categoryInfo.name"
7666
ref="tableRef"
7767
:header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
7868
:cell-style="{ paddingLeft: '10px' }"
69+
:row-style="{ height: '68px' }"
7970
:data="tableData"
8071
row-key="id"
8172
>
@@ -220,8 +211,8 @@
220211
</template>
221212
</el-table-column>
222213
</el-table>
223-
</el-collapse-item>
224-
</el-collapse>
214+
</div>
215+
</el-collapse-transition>
225216

226217
<!-- 弹窗：重命名分类 -->
227218
<Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
@@ -259,7 +250,6 @@ import { cloneDeep } from 'lodash-es'
259250
260251
defineOptions({ name: 'BpmModel' })
261252
262-
const activeCollapse: any = ref([])
263253
const renameVisible = ref(false)
264254
const props = defineProps({
265255
// 分类后的数据
@@ -276,7 +266,7 @@ const userStore = useUserStoreWithOut() // 用户信息缓存
276266
const isModelSorting = ref(false) // 是否正处于排序状态
277267
const tableData: any = ref([])
278268
const originalData: any = ref([]) // 原始数据
279-
269+
const isExpand = ref(false) // 是否处于展开状态
280270
/** '更多'操作按钮 */
281271
const handleCommand = (command: string, row: any) => {
282272
switch (command) {
@@ -436,10 +426,6 @@ const cancelSort = () => {
436426
isModelSorting.value = false
437427
}
438428
439-
/* 分类 */
440-
const handleGroup = () => {
441-
console.log('分类')
442-
}
443429
const tableRef = ref()
444430
// 创建拖拽实例
445431
const initSort = () => {
@@ -466,7 +452,7 @@ const initSort = () => {
466452
const updateTableData = () => {
467453
tableData.value = cloneDeep(props.categoryInfo.modelList)
468454
if (props.categoryInfo.modelList.length > 0) {
469-
activeCollapse.value = [props.categoryInfo.id]
455+
isExpand.value = true
470456
}
471457
}
472458
@@ -503,13 +489,10 @@ watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
503489
watch(
504490
() => props.isCategorySorting,
505491
(val) => {
506-
if (val) activeCollapse.value = []
492+
if (val) isExpand.value = false
507493
},
508494
{ immediate: true }
509495
)
510-
defineExpose({
511-
activeCollapse
512-
})
513496
</script>
514497

515498
<style lang="scss">
@@ -525,24 +508,9 @@ defineExpose({
525508
</style>
526509
<style lang="scss" scoped>
527510
:deep() {
528-
.el-collapse,
529-
.el-collapse-item__header,
530-
.el-collapse-item__wrap {
531-
border: none;
532-
}
533-
.el-collapse-item__arrow {
534-
margin-left: 10px;
535-
font-size: 20px;
536-
font-weight: 500;
537-
}
538-
.el-collapse-item__content {
539-
padding-bottom: 0;
540-
}
541511
.el-table__cell {
542512
border-bottom: none !important;
543-
}
544-
.el-table__row {
545-
height: 68px;
513+
overflow: hidden;
546514
}
547515
}
548516
</style>

‎src/views/bpm/model/index_new.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
ref="queryFormRef"
1111
:inline="true"
1212
label-width="68px"
13+
@submit.prevent
1314
>
1415
<el-form-item align="right" prop="key" class="ml-auto">
1516
<el-input
@@ -60,9 +61,19 @@
6061

6162
<!-- 分类卡片组 -->
6263
<div class="px-15px">
63-
<draggable v-model="categoryGroup" item-key="id" :animation="400">
64+
<draggable
65+
:disabled="!isCategorySorting"
66+
v-model="categoryGroup"
67+
item-key="id"
68+
:animation="400"
69+
>
6470
<template #item="{ element }">
65-
<ContentWrap v-loading="loading" :body-style="{ padding: 0 }" :key="element.id">
71+
<ContentWrap
72+
class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
73+
v-loading="loading"
74+
:body-style="{ padding: 0 }"
75+
:key="element.id"
76+
>
6677
<CategoryDraggableModel
6778
ref="categoryDraggableModelRef"
6879
:isCategorySorting="isCategorySorting"
@@ -201,6 +212,9 @@ onMounted(async () => {
201212

202213
<style lang="scss" scoped>
203214
:deep() {
215+
.el-table--fit .el-table__inner-wrapper:before {
216+
height: 0;
217+
}
204218
.el-card {
205219
border-radius: 8px;
206220
}

0 commit comments

Comments
 (0)