fix: root
xingyu4j
parent
2c3dd668e3
commit
23aacea84c
|
|
@ -225,227 +225,242 @@ const handleRenameSuccess = () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Card
|
<div>
|
||||||
:body-style="{ padding: 0 }"
|
<Card
|
||||||
class="category-draggable-model mb-5 rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
|
:body-style="{ padding: 0 }"
|
||||||
>
|
class="category-draggable-model mb-5 rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
|
||||||
<div class="flex h-12 items-center">
|
>
|
||||||
<!-- 头部：分类名 -->
|
<div class="flex h-12 items-center">
|
||||||
<div class="flex items-center">
|
<!-- 头部：分类名 -->
|
||||||
<Tooltip v-if="isCategorySorting" title="拖动排序">
|
<div class="flex items-center">
|
||||||
<span
|
<Tooltip v-if="isCategorySorting" title="拖动排序">
|
||||||
class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
|
<span
|
||||||
></span>
|
class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
|
||||||
</Tooltip>
|
></span>
|
||||||
<div class="ml-4 mr-2 text-lg font-medium">{{ categoryInfo.name }}</div>
|
</Tooltip>
|
||||||
<div class="text-gray-500">
|
<div class="ml-4 mr-2 text-lg font-medium">
|
||||||
({{ categoryInfo.modelList?.length || 0 }})
|
{{ categoryInfo.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="text-gray-500">
|
||||||
|
({{ categoryInfo.modelList?.length || 0 }})
|
||||||
<!-- 头部：操作 -->
|
</div>
|
||||||
<div class="flex flex-1 items-center" v-show="!isCategorySorting">
|
|
||||||
<div
|
|
||||||
v-if="categoryInfo.modelList.length > 0"
|
|
||||||
class="ml-3 flex cursor-pointer items-center transition-transform duration-300"
|
|
||||||
:class="isExpand ? 'rotate-180' : 'rotate-0'"
|
|
||||||
@click="isExpand = !isExpand"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="icon-[ic--round-expand-more] text-3xl text-gray-400"
|
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<!-- 头部：操作 -->
|
||||||
class="ml-auto flex items-center"
|
<div class="flex flex-1 items-center" v-show="!isCategorySorting">
|
||||||
:class="isModelSorting ? 'mr-4' : 'mr-8'"
|
<div
|
||||||
>
|
v-if="categoryInfo.modelList.length > 0"
|
||||||
<template v-if="!isModelSorting">
|
class="ml-3 flex cursor-pointer items-center transition-transform duration-300"
|
||||||
<Button
|
:class="isExpand ? 'rotate-180' : 'rotate-0'"
|
||||||
v-if="categoryInfo.modelList.length > 0"
|
@click="isExpand = !isExpand"
|
||||||
type="link"
|
>
|
||||||
size="small"
|
<span
|
||||||
class="flex items-center text-[14px]"
|
class="icon-[ic--round-expand-more] text-3xl text-gray-400"
|
||||||
@click.stop="handleModelSort"
|
></span>
|
||||||
>
|
</div>
|
||||||
<template #icon>
|
|
||||||
<IconifyIcon icon="lucide:align-start-vertical" />
|
<div
|
||||||
</template>
|
class="ml-auto flex items-center"
|
||||||
排序
|
:class="isModelSorting ? 'mr-4' : 'mr-8'"
|
||||||
</Button>
|
>
|
||||||
<Dropdown placement="bottom" arrow>
|
<template v-if="!isModelSorting">
|
||||||
<Button
|
<Button
|
||||||
|
v-if="categoryInfo.modelList.length > 0"
|
||||||
type="link"
|
type="link"
|
||||||
size="small"
|
size="small"
|
||||||
class="flex items-center text-[14px]"
|
class="flex items-center text-[14px]"
|
||||||
|
@click.stop="handleModelSort"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<IconifyIcon icon="lucide:settings" />
|
<IconifyIcon icon="lucide:align-start-vertical" />
|
||||||
</template>
|
</template>
|
||||||
分类
|
排序
|
||||||
</Button>
|
</Button>
|
||||||
<template #overlay>
|
<Dropdown placement="bottom" arrow>
|
||||||
<Menu @click="(e) => handleCommand(e.key as string)">
|
<Button
|
||||||
<Menu.Item key="renameCategory"> 重命名 </Menu.Item>
|
type="link"
|
||||||
<Menu.Item key="deleteCategory"> 删除分类 </Menu.Item>
|
size="small"
|
||||||
</Menu>
|
class="flex items-center text-[14px]"
|
||||||
</template>
|
>
|
||||||
</Dropdown>
|
<template #icon>
|
||||||
</template>
|
<IconifyIcon icon="lucide:settings" />
|
||||||
|
</template>
|
||||||
|
分类
|
||||||
|
</Button>
|
||||||
|
<template #overlay>
|
||||||
|
<Menu @click="(e) => handleCommand(e.key as string)">
|
||||||
|
<Menu.Item key="renameCategory"> 重命名 </Menu.Item>
|
||||||
|
<Menu.Item key="deleteCategory"> 删除分类 </Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
</template>
|
||||||
|
</Dropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<Button @click.stop="handleModelSortCancel" class="mr-2">
|
<Button @click.stop="handleModelSortCancel" class="mr-2">
|
||||||
取 消
|
取 消
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="primary" @click.stop="handleModelSortSubmit">
|
<Button type="primary" @click.stop="handleModelSortSubmit">
|
||||||
保存排序
|
保存排序
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 模型列表 -->
|
<!-- 模型列表 -->
|
||||||
<Collapse :active-key="expandKeys" :bordered="false" class="bg-transparent">
|
<Collapse
|
||||||
<Collapse.Panel
|
:active-key="expandKeys"
|
||||||
key="1"
|
:bordered="false"
|
||||||
:show-arrow="false"
|
class="bg-transparent"
|
||||||
class="border-0 bg-transparent p-0"
|
|
||||||
v-show="isExpand"
|
|
||||||
>
|
>
|
||||||
<Table
|
<Collapse.Panel
|
||||||
v-if="modelList && modelList.length > 0"
|
key="1"
|
||||||
:class="`category-${categoryInfo.id}`"
|
:show-arrow="false"
|
||||||
ref="tableRef"
|
class="border-0 bg-transparent p-0"
|
||||||
:data-source="modelList"
|
v-show="isExpand"
|
||||||
:columns="columns"
|
|
||||||
:pagination="false"
|
|
||||||
:custom-row="customRow"
|
|
||||||
:scroll="{ x: '100%' }"
|
|
||||||
row-key="id"
|
|
||||||
>
|
>
|
||||||
<template #bodyCell="{ column, record }">
|
<Table
|
||||||
<!-- 流程名 -->
|
v-if="modelList && modelList.length > 0"
|
||||||
<template v-if="column.key === 'name'">
|
:class="`category-${categoryInfo.id}`"
|
||||||
<div class="flex items-center">
|
ref="tableRef"
|
||||||
<Tooltip v-if="isModelSorting" title="拖动排序">
|
:data-source="modelList"
|
||||||
<span
|
:columns="columns"
|
||||||
class="icon-[ic--round-drag-indicator] mr-2.5 cursor-move text-2xl text-gray-500"
|
:pagination="false"
|
||||||
></span>
|
:custom-row="customRow"
|
||||||
</Tooltip>
|
:scroll="{ x: '100%' }"
|
||||||
<div
|
row-key="id"
|
||||||
v-if="!record.icon"
|
>
|
||||||
class="mr-2.5 flex h-9 w-9 items-center justify-center rounded bg-blue-500 text-white"
|
<template #bodyCell="{ column, record }">
|
||||||
>
|
<!-- 流程名 -->
|
||||||
<span style="font-size: 12px">{{
|
<template v-if="column.key === 'name'">
|
||||||
record.name.substring(0, 2)
|
<div class="flex items-center">
|
||||||
}}</span>
|
<Tooltip v-if="isModelSorting" title="拖动排序">
|
||||||
|
<span
|
||||||
|
class="icon-[ic--round-drag-indicator] mr-2.5 cursor-move text-2xl text-gray-500"
|
||||||
|
></span>
|
||||||
|
</Tooltip>
|
||||||
|
<div
|
||||||
|
v-if="!record.icon"
|
||||||
|
class="mr-2.5 flex h-9 w-9 items-center justify-center rounded bg-blue-500 text-white"
|
||||||
|
>
|
||||||
|
<span style="font-size: 12px">{{
|
||||||
|
record.name.substring(0, 2)
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-else
|
||||||
|
:src="record.icon"
|
||||||
|
class="mr-2.5 h-9 w-9 rounded"
|
||||||
|
alt="图标"
|
||||||
|
/>
|
||||||
|
{{ record.name }}
|
||||||
</div>
|
</div>
|
||||||
<img
|
</template>
|
||||||
v-else
|
|
||||||
:src="record.icon"
|
|
||||||
class="mr-2.5 h-9 w-9 rounded"
|
|
||||||
alt="图标"
|
|
||||||
/>
|
|
||||||
{{ record.name }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 可见范围列-->
|
<!-- 可见范围列-->
|
||||||
<template v-else-if="column.key === 'startUserIds'">
|
<template v-else-if="column.key === 'startUserIds'">
|
||||||
<span
|
<span
|
||||||
v-if="!record.startUsers?.length && !record.startDepts?.length"
|
v-if="
|
||||||
>
|
!record.startUsers?.length && !record.startDepts?.length
|
||||||
全部可见
|
|
||||||
</span>
|
|
||||||
<span v-else-if="record.startUsers?.length === 1">
|
|
||||||
{{ record.startUsers[0].nickname }}
|
|
||||||
</span>
|
|
||||||
<span v-else-if="record.startDepts?.length === 1">
|
|
||||||
{{ record.startDepts[0].name }}
|
|
||||||
</span>
|
|
||||||
<span v-else-if="record.startDepts?.length > 1">
|
|
||||||
<Tooltip
|
|
||||||
placement="top"
|
|
||||||
:title="
|
|
||||||
record.startDepts.map((dept: any) => dept.name).join('、')
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ record.startDepts[0].name }}等
|
全部可见
|
||||||
{{ record.startDepts.length }} 个部门可见
|
|
||||||
</Tooltip>
|
|
||||||
</span>
|
|
||||||
<span v-else-if="record.startUsers?.length > 1">
|
|
||||||
<Tooltip
|
|
||||||
placement="top"
|
|
||||||
:title="
|
|
||||||
record.startUsers
|
|
||||||
.map((user: any) => user.nickname)
|
|
||||||
.join('、')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ record.startUsers[0].nickname }}等
|
|
||||||
{{ record.startUsers.length }} 人可见
|
|
||||||
</Tooltip>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<!-- 流程类型列 -->
|
|
||||||
<template v-else-if="column.key === 'type'">
|
|
||||||
<!-- <DictTag :value="record.type" :type="DICT_TYPE.BPM_MODEL_TYPE" /> -->
|
|
||||||
<!-- <Tag>{{ record.type }}</Tag> -->
|
|
||||||
<DictTag :type="DICT_TYPE.BPM_MODEL_TYPE" :value="record.type" />
|
|
||||||
</template>
|
|
||||||
<!-- 表单信息列 -->
|
|
||||||
<template v-else-if="column.key === 'formType'">
|
|
||||||
<!-- TODO BpmModelFormType.NORMAL -->
|
|
||||||
<Button
|
|
||||||
v-if="record.formType === 10"
|
|
||||||
type="link"
|
|
||||||
@click="handleFormDetail(record)"
|
|
||||||
>
|
|
||||||
{{ record.formName }}
|
|
||||||
</Button>
|
|
||||||
<!-- TODO BpmModelFormType.CUSTOM -->
|
|
||||||
<Button
|
|
||||||
v-else-if="record.formType === 20"
|
|
||||||
type="link"
|
|
||||||
@click="handleFormDetail(record)"
|
|
||||||
>
|
|
||||||
{{ record.formCustomCreatePath }}
|
|
||||||
</Button>
|
|
||||||
<span v-else>暂无表单</span>
|
|
||||||
</template>
|
|
||||||
<!-- 最后发布列 -->
|
|
||||||
<template v-else-if="column.key === 'deploymentTime'">
|
|
||||||
<div class="flex items-center justify-center">
|
|
||||||
<span v-if="record.processDefinition" class="w-[150px]">
|
|
||||||
{{ formatDateTime(record.processDefinition.deploymentTime) }}
|
|
||||||
</span>
|
</span>
|
||||||
<Tag v-if="record.processDefinition">
|
<span v-else-if="record.startUsers?.length === 1">
|
||||||
v{{ record.processDefinition.version }}
|
{{ record.startUsers[0].nickname }}
|
||||||
</Tag>
|
</span>
|
||||||
<Tag v-else color="warning">未部署</Tag>
|
<span v-else-if="record.startDepts?.length === 1">
|
||||||
<Tag
|
{{ record.startDepts[0].name }}
|
||||||
v-if="record.processDefinition?.suspensionState === 2"
|
</span>
|
||||||
color="warning"
|
<span v-else-if="record.startDepts?.length > 1">
|
||||||
class="ml-[10px]"
|
<Tooltip
|
||||||
|
placement="top"
|
||||||
|
:title="
|
||||||
|
record.startDepts.map((dept: any) => dept.name).join('、')
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ record.startDepts[0].name }}等
|
||||||
|
{{ record.startDepts.length }} 个部门可见
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="record.startUsers?.length > 1">
|
||||||
|
<Tooltip
|
||||||
|
placement="top"
|
||||||
|
:title="
|
||||||
|
record.startUsers
|
||||||
|
.map((user: any) => user.nickname)
|
||||||
|
.join('、')
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ record.startUsers[0].nickname }}等
|
||||||
|
{{ record.startUsers.length }} 人可见
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<!-- 流程类型列 -->
|
||||||
|
<template v-else-if="column.key === 'type'">
|
||||||
|
<!-- <DictTag :value="record.type" :type="DICT_TYPE.BPM_MODEL_TYPE" /> -->
|
||||||
|
<!-- <Tag>{{ record.type }}</Tag> -->
|
||||||
|
<DictTag
|
||||||
|
:type="DICT_TYPE.BPM_MODEL_TYPE"
|
||||||
|
:value="record.type"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<!-- 表单信息列 -->
|
||||||
|
<template v-else-if="column.key === 'formType'">
|
||||||
|
<!-- TODO BpmModelFormType.NORMAL -->
|
||||||
|
<Button
|
||||||
|
v-if="record.formType === 10"
|
||||||
|
type="link"
|
||||||
|
@click="handleFormDetail(record)"
|
||||||
>
|
>
|
||||||
已停用
|
{{ record.formName }}
|
||||||
</Tag>
|
</Button>
|
||||||
</div>
|
<!-- TODO BpmModelFormType.CUSTOM -->
|
||||||
|
<Button
|
||||||
|
v-else-if="record.formType === 20"
|
||||||
|
type="link"
|
||||||
|
@click="handleFormDetail(record)"
|
||||||
|
>
|
||||||
|
{{ record.formCustomCreatePath }}
|
||||||
|
</Button>
|
||||||
|
<span v-else>暂无表单</span>
|
||||||
|
</template>
|
||||||
|
<!-- 最后发布列 -->
|
||||||
|
<template v-else-if="column.key === 'deploymentTime'">
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
<span v-if="record.processDefinition" class="w-[150px]">
|
||||||
|
{{
|
||||||
|
formatDateTime(record.processDefinition.deploymentTime)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
<Tag v-if="record.processDefinition">
|
||||||
|
v{{ record.processDefinition.version }}
|
||||||
|
</Tag>
|
||||||
|
<Tag v-else color="warning">未部署</Tag>
|
||||||
|
<Tag
|
||||||
|
v-if="record.processDefinition?.suspensionState === 2"
|
||||||
|
color="warning"
|
||||||
|
class="ml-[10px]"
|
||||||
|
>
|
||||||
|
已停用
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 操作列 -->
|
||||||
|
<template v-else-if="column.key === 'operation'">
|
||||||
|
<div class="flex items-center justify-center">待实现</div>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<!-- 操作列 -->
|
</Table>
|
||||||
<template v-else-if="column.key === 'operation'">
|
</Collapse.Panel>
|
||||||
<div class="flex items-center justify-center">待实现</div>
|
</Collapse>
|
||||||
</template>
|
</Card>
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
</Collapse.Panel>
|
|
||||||
</Collapse>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<!-- 重命名分类弹窗 -->
|
<!-- 重命名分类弹窗 -->
|
||||||
<CategoryRenameModal @success="handleRenameSuccess" />
|
<CategoryRenameModal @success="handleRenameSuccess" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue