Skip to content

phsl / admin

Go to a project
Commit 5116b948 by 芋道源码 Committed by GitHub
Options

Merge pull request #94 from GoldenZqqq/feature/bpm 

流程模型模块-优化一些样式细节、解决拖动排序逻辑问题
parents ac135245 49824402
Showing with 82 additions and 100 deletions
src/views/bpm/model/CategoryDraggableModel.vue
<template> <template>
<!-- 默认使其全部展开 --> <div class="flex items-center h-50px">
<el-collapse v-model="activeCollapse"> <div class="flex items-center">
<el-collapse-item :name="categoryInfo.id" :disabled="categoryInfo.modelList.length === 0"> <el-tooltip content="拖动排序" v-if="isCategorySorting">
<template #icon="{ isActive }"> <Icon
<div class="flex-1 flex" v-if="!isCategorySorting"> :size="22"
<div icon="ic:round-drag-indicator"
class="ml-10px category-drag-icon cursor-move text-#8a909c"
/>
</el-tooltip>
<h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
<div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
</div>
<div class="flex-1 flex" v-if="!isCategorySorting">
<div
v-if="categoryInfo.modelList.length > 0"
class="ml-20px flex items-center"
:class="[
'transition-transform duration-300 cursor-pointer',
isExpand ? 'rotate-180' : 'rotate-0'
]"
@click="isExpand = !isExpand"
>
<Icon icon="ep:arrow-down-bold" color="#999" />
</div>
<div class="ml-auto flex items-center" :class="isModelSorting ? 'mr-15px' : 'mr-45px'">
<template v-if="!isModelSorting">
<el-button
v-if="categoryInfo.modelList.length > 0" v-if="categoryInfo.modelList.length > 0"
class="ml-20px flex items-center" link
:class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']" type="info"
class="mr-20px"
@click.stop="handleSort"
> >
<Icon icon="ep:arrow-down-bold" color="#999" /> <Icon icon="fa:sort-amount-desc" class="mr-5px" />
</div> 排序
<div class="ml-auto mr-45px flex items-center"> </el-button>
<template v-if="!isModelSorting"> <el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
<el-button <Icon icon="fa:plus" class="mr-5px" />
v-if="categoryInfo.modelList.length > 0" 新建
link </el-button>
type="info" <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
class="mr-20px" <el-button link type="info">
@click.stop="handleSort" <Icon icon="ep:setting" class="mr-5px" />
> 分类
<Icon icon="fa:sort-amount-desc" class="mr-5px" /> </el-button>
排序 <template #dropdown>
</el-button> <el-dropdown-menu>
<el-button <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
v-else <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
link </el-dropdown-menu>
type="info"
class="mr-20px"
@click.stop="handleAddModel('create')"
>
<Icon icon="fa:plus" class="mr-5px" />
新建
</el-button>
<el-dropdown
@command="(command) => handleCategoryCommand(command)"
placement="bottom"
>
<el-button link type="info" @click.stop="handleGroup">
<Icon icon="ep:setting" class="mr-5px" />
分类
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
<el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template v-else>
<el-button @click.stop="cancelSort"> 取 消 </el-button>
<el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
</template> </template>
<!-- <el-button v-else type="primary" @click.stop="addModel"> 新建模型 </el-button> --> </el-dropdown>
</div> </template>
</div> <template v-else>
<div></div> <el-button @click.stop="cancelSort"> 取 消 </el-button>
</template> <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
<template #title> </template>
<div class="flex items-center"> </div>
<el-tooltip content="拖动排序" v-if="isCategorySorting"> </div>
<Icon </div>
:size="22" <el-collapse-transition>
icon="ic:round-drag-indicator" <div v-show="isExpand">
class="ml-10px category-drag-icon cursor-move text-#8a909c"
/>
</el-tooltip>
<h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
<div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
</div>
</template>
<el-table <el-table
:class="categoryInfo.name" :class="categoryInfo.name"
ref="tableRef" ref="tableRef"
:header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }" :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
:cell-style="{ paddingLeft: '10px' }" :cell-style="{ paddingLeft: '10px' }"
:row-style="{ height: '68px' }"
:data="tableData" :data="tableData"
row-key="id" row-key="id"
> >
...@@ -220,8 +211,8 @@ ...@@ -220,8 +211,8 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-collapse-item> </div>
</el-collapse> </el-collapse-transition>
<!-- 弹窗：重命名分类 --> <!-- 弹窗：重命名分类 -->
<Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400"> <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
...@@ -259,7 +250,6 @@ import { cloneDeep } from 'lodash-es' ...@@ -259,7 +250,6 @@ import { cloneDeep } from 'lodash-es'
defineOptions({ name: 'BpmModel' }) defineOptions({ name: 'BpmModel' })
const activeCollapse: any = ref([])
const renameVisible = ref(false) const renameVisible = ref(false)
const props = defineProps({ const props = defineProps({
// 分类后的数据 // 分类后的数据
...@@ -276,7 +266,7 @@ const userStore = useUserStoreWithOut() // 用户信息缓存 ...@@ -276,7 +266,7 @@ const userStore = useUserStoreWithOut() // 用户信息缓存
const isModelSorting = ref(false) // 是否正处于排序状态 const isModelSorting = ref(false) // 是否正处于排序状态
const tableData: any = ref([]) const tableData: any = ref([])
const originalData: any = ref([]) // 原始数据 const originalData: any = ref([]) // 原始数据
const isExpand = ref(false) // 是否处于展开状态
/** '更多'操作按钮 */ /** '更多'操作按钮 */
const handleCommand = (command: string, row: any) => { const handleCommand = (command: string, row: any) => {
switch (command) { switch (command) {
...@@ -436,10 +426,6 @@ const cancelSort = () => { ...@@ -436,10 +426,6 @@ const cancelSort = () => {
isModelSorting.value = false isModelSorting.value = false
} }
/* 分类 */
const handleGroup = () => {
console.log('分类')
}
const tableRef = ref() const tableRef = ref()
// 创建拖拽实例 // 创建拖拽实例
const initSort = () => { const initSort = () => {
...@@ -466,7 +452,7 @@ const initSort = () => { ...@@ -466,7 +452,7 @@ const initSort = () => {
const updateTableData = () => { const updateTableData = () => {
tableData.value = cloneDeep(props.categoryInfo.modelList) tableData.value = cloneDeep(props.categoryInfo.modelList)
if (props.categoryInfo.modelList.length > 0) { if (props.categoryInfo.modelList.length > 0) {
activeCollapse.value = [props.categoryInfo.id] isExpand.value = true
} }
} }
...@@ -503,13 +489,10 @@ watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true }) ...@@ -503,13 +489,10 @@ watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
watch( watch(
() => props.isCategorySorting, () => props.isCategorySorting,
(val) => { (val) => {
if (val) activeCollapse.value = [] if (val) isExpand.value = false
}, },
{ immediate: true } { immediate: true }
) )
defineExpose({
activeCollapse
})
</script> </script>
<style lang="scss"> <style lang="scss">
...@@ -525,24 +508,9 @@ defineExpose({ ...@@ -525,24 +508,9 @@ defineExpose({
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep() { :deep() {
.el-collapse,
.el-collapse-item__header,
.el-collapse-item__wrap {
border: none;
}
.el-collapse-item__arrow {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
}
.el-collapse-item__content {
padding-bottom: 0;
}
.el-table__cell { .el-table__cell {
border-bottom: none !important; border-bottom: none !important;
} overflow: hidden;
.el-table__row {
height: 68px;
} }
} }
</style> </style>
src/views/bpm/model/index_new.vue
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
ref="queryFormRef" ref="queryFormRef"
:inline="true" :inline="true"
label-width="68px" label-width="68px"
@submit.prevent
> >
<el-form-item align="right" prop="key" class="ml-auto"> <el-form-item align="right" prop="key" class="ml-auto">
<el-input <el-input
...@@ -60,9 +61,19 @@ ...@@ -60,9 +61,19 @@
<!-- 分类卡片组 --> <!-- 分类卡片组 -->
<div class="px-15px"> <div class="px-15px">
<draggable v-model="categoryGroup" item-key="id" :animation="400"> <draggable
:disabled="!isCategorySorting"
v-model="categoryGroup"
item-key="id"
:animation="400"
>
<template #item="{ element }"> <template #item="{ element }">
<ContentWrap v-loading="loading" :body-style="{ padding: 0 }" :key="element.id"> <ContentWrap
class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
v-loading="loading"
:body-style="{ padding: 0 }"
:key="element.id"
>
<CategoryDraggableModel <CategoryDraggableModel
ref="categoryDraggableModelRef" ref="categoryDraggableModelRef"
:isCategorySorting="isCategorySorting" :isCategorySorting="isCategorySorting"
...@@ -201,6 +212,9 @@ onMounted(async () => { ...@@ -201,6 +212,9 @@ onMounted(async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
:deep() { :deep() {
.el-table--fit .el-table__inner-wrapper:before {
height: 0;
}
.el-card { .el-card {
border-radius: 8px; border-radius: 8px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment