oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-06-17 20:22:24 +08:00
parent 7276d0a909
commit a4f4c0d6f6
162 changed files with 689 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/bpm/form/modules/detail.vue
View File

@@ -39,7 +39,7 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
class="w-[40%]"
class="w-2/5"
title="流程表单详情"
:body-style="{
maxHeight: '100px',

2
apps/web-antd/src/views/bpm/form/modules/form.vue
View File

@@ -106,7 +106,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/bpm/group/modules/form.vue
View File

@@ -84,7 +84,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

8
apps/web-antd/src/views/bpm/model/form/index.vue
View File

@@ -403,7 +403,7 @@ onBeforeUnmount(() => {
class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-white px-5"
>
<!-- 左侧标题 -->
<div class="flex w-[200px] items-center overflow-hidden">
<div class="flex w-48 items-center overflow-hidden">
<ArrowLeft
class="size-5 flex-shrink-0 cursor-pointer"
@click="handleBack"
@@ -431,7 +431,7 @@ onBeforeUnmount(() => {
@click="handleStepClick(index)"
>
<div
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
:class="[
currentStep === index
? 'border-blue-500 bg-blue-500 text-white'
@@ -448,7 +448,7 @@ onBeforeUnmount(() => {
</div>
<!-- 右侧按钮 -->
<div class="flex w-[200px] items-center justify-end gap-2">
<div class="flex w-48 items-center justify-end gap-2">
<Button
v-if="actionType === 'update'"
type="primary"
@@ -464,7 +464,7 @@ onBeforeUnmount(() => {
</div>
<!-- 主体内容 -->
<Card :body-style="{ padding: '10px' }" class="mb-4">
<div class="mt-[50px]">
<div class="mt-12">
<!-- 第一步：基本信息 -->
<div v-if="currentStep === 0" class="mx-auto w-4/6">
<BasicInfo

33
apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
View File

@@ -11,7 +11,7 @@ import type { SystemUserApi } from '#/api/system/user';
import { ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { CircleHelp, IconifyIcon, Plus, X } from '@vben/icons';
import { IconifyIcon } from '@vben/icons';
import {
Avatar,
@@ -254,7 +254,10 @@ defineExpose({ validate });
"
placement="top"
>
<CircleHelp class="ml-1 size-5 text-gray-900" />
<IconifyIcon
icon="lucide:circle-help"
class="ml-1 size-5 text-gray-900"
/>
</Tooltip>
</div>
</Form.Item>
@@ -343,7 +346,8 @@ defineExpose({ validate });
{{ user.nickname?.substring(0, 1) }}
</Avatar>
{{ user.nickname }}
<X
<IconifyIcon
icon="lucide:x"
class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
@click="handleRemoveStartUser(user)"
/>
@@ -354,7 +358,7 @@ defineExpose({ validate });
class="flex items-center"
>
<template #icon>
<IconifyIcon icon="lucide:user-plus" class="size-[18px]" />
<IconifyIcon icon="lucide:user-plus" class="size-4" />
</template>
选择人员
</Button>
@@ -370,7 +374,8 @@ defineExpose({ validate });
>
<IconifyIcon icon="lucide:building" class="size-6 px-1" />
{{ dept.name }}
<X
<IconifyIcon
icon="lucide:x"
class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
@click="handleRemoveStartDept(dept)"
/>
@@ -381,7 +386,7 @@ defineExpose({ validate });
class="flex items-center"
>
<template #icon>
<Plus class="size-[18px]" />
<IconifyIcon icon="lucide:user-plus" class="size-4" />
</template>
选择部门
</Button>
@@ -404,7 +409,8 @@ defineExpose({ validate });
{{ user.nickname?.substring(0, 1) }}
</Avatar>
{{ user.nickname }}
<X
<IconifyIcon
icon="lucide:x"
class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
@click="handleRemoveManagerUser(user)"
/>
@@ -415,7 +421,7 @@ defineExpose({ validate });
class="flex items-center"
>
<template #icon>
<IconifyIcon icon="lucide:user-plus" class="size-[18px]" />
<IconifyIcon icon="lucide:user-plus" class="size-4" />
</template>
选择人员
</Button>
@@ -440,14 +446,3 @@ defineExpose({ validate });
/>
</div>
</template>
<style lang="scss" scoped>
.upload-img-placeholder {
cursor: pointer;
transition: all 0.3s;
&:hover {
border-color: #1890ff !important;
}
}
</style>

6
apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
View File

@@ -173,9 +173,9 @@ defineExpose({ validate });
"
class="mb-5 mt-7 rounded-sm border border-solid border-gray-200 p-5"
>
<div class="mb-[15px] flex items-center">
<div class="mr-[10px] h-[15px] w-[4px] bg-[#1890ff]"></div>
<span class="text-[15px] font-bold">表单预览</span>
<div class="mb-4 flex items-center">
<div class="mr-2 h-4 w-1 bg-blue-500"></div>
<span class="text-base font-bold">表单预览</span>
</div>
<FormCreate
v-model:api="formPreview.formData"

24
apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
View File

@@ -437,9 +437,10 @@ const handleRenameSuccess = () => {
:class="isExpand ? 'rotate-180' : 'rotate-0'"
@click="isExpand = !isExpand"
>
<span
class="icon-[ic--round-expand-more] text-3xl text-gray-400"
></span>
<IconifyIcon
icon="lucide:chevron-down"
class="text-3xl text-gray-400"
/>
</div>
<div
@@ -451,7 +452,7 @@ const handleRenameSuccess = () => {
v-if="categoryInfo.modelList.length > 0"
type="link"
size="small"
class="flex items-center text-[14px]"
class="flex items-center text-sm"
@click.stop="handleModelSort"
>
<template #icon>
@@ -463,7 +464,7 @@ const handleRenameSuccess = () => {
<Button
type="link"
size="small"
class="flex items-center text-[14px]"
class="flex items-center text-sm"
>
<template #icon>
<IconifyIcon icon="lucide:settings" />
@@ -514,15 +515,16 @@ const handleRenameSuccess = () => {
title="拖动排序"
placement="left"
>
<span
class="icon-[ic--round-drag-indicator] drag-handle mr-2.5 cursor-move text-2xl text-gray-500"
></span>
<IconifyIcon
icon="ic:round-drag-indicator"
class="mr-2.5 cursor-move text-2xl text-gray-500"
/>
</Tooltip>
<div
v-if="!row.icon"
class="mr-2.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded bg-blue-500 text-white"
>
<span style="font-size: 12px">
<span class="text-xs">
{{ row.name.substring(0, 2) }}
</span>
</div>
@@ -589,7 +591,7 @@ const handleRenameSuccess = () => {
</template>
<template #deploymentTime="{ row }">
<div class="flex items-center justify-center">
<span v-if="row.processDefinition" class="w-[150px]">
<span v-if="row.processDefinition" class="w-36">
{{ formatDateTime(row.processDefinition.deploymentTime) }}
</span>
<Tag v-if="row.processDefinition">
@@ -599,7 +601,7 @@ const handleRenameSuccess = () => {
<Tag
v-if="row.processDefinition?.suspensionState === 2"
color="warning"
class="ml-[10px]"
class="ml-2.5"
>
已停用
</Tag>

10
apps/web-antd/src/views/bpm/oa/leave/create.vue
View File

@@ -25,8 +25,8 @@ const formLoading = ref(false); // 表单的加载中：1）修改时的数据
// 审批相关：变量
const processDefineKey = 'oa_leave'; // 流程定义 Key
const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
const startUserSelectAssignees = ref({}); // 发起人选择审批人的数据
const tempStartUserSelectAssignees = ref({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
const startUserSelectAssignees = ref<any>({}); // 发起人选择审批人的数据
const tempStartUserSelectAssignees = ref<any>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
const processDefinitionId = ref('');
@@ -191,7 +191,7 @@ watch(
// ============================== 生命周期 ==============================
onMounted(async () => {
const processDefinitionDetail = await getProcessDefinition(
const processDefinitionDetail: any = await getProcessDefinition(
undefined,
processDefineKey,
);
@@ -210,11 +210,11 @@ onMounted(async () => {
<template>
<Page>
<div class="w-80vw mx-auto max-w-[920px]">
<div class="mx-auto w-[80vw] max-w-[920px]">
<Card :title="getTitle" class="w-full">
<template #extra>
<Button type="default" @click="onBack">
<IconifyIcon icon="mdi:arrow-left" />
<IconifyIcon icon="lucide:arrow-left" />
返回
</Button>
</template>

2
apps/web-antd/src/views/bpm/processExpression/modules/form.vue
View File

@@ -75,7 +75,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

4
apps/web-antd/src/views/bpm/processInstance/create/index.vue
View File

@@ -243,7 +243,7 @@ onMounted(() => {
<div class="flex items-end">
<InputSearch
v-model:value="searchName"
class="!w-50% mb-15px"
class="!w-50% mb-4"
placeholder="请输入流程名称检索"
allow-clear
@input="handleQuery"
@@ -311,7 +311,7 @@ onMounted(() => {
</Tabs.TabPane>
</Tabs>
</div>
<div v-else class="!py-200px text-center">
<div v-else class="!py-48 text-center">
<Space direction="vertical" size="large">
<span class="text-gray-500">没有找到搜索结果</span>
</Space>

18
apps/web-antd/src/views/bpm/processInstance/detail/index.vue
View File

@@ -253,14 +253,14 @@ onMounted(async () => {
}"
>
<template #title>
<span class="text-[#878c93]">编号：{{ id || '-' }}</span>
<span class="text-gray-500">编号：{{ id || '-' }}</span>
</template>
<div class="flex h-[100%] flex-col">
<div class="flex h-full flex-col">
<!-- 流程基本信息 -->
<div class="flex flex-col gap-2">
<div class="mb-10px h-40px flex items-center gap-5">
<div class="mb-5px text-[26px] font-bold">
<div class="mb-2.5 flex h-10 items-center gap-5">
<div class="mb-1 text-2xl font-bold">
{{ processInstance?.name }}
</div>
<DictTag
@@ -270,9 +270,9 @@ onMounted(async () => {
/>
</div>
<div class="mb-10px text-13px h-35px flex items-center gap-5">
<div class="mb-2.5 flex h-12 items-center gap-5 text-sm">
<div
class="flex items-center gap-2 rounded-3xl bg-gray-100 px-[10px] py-[4px] dark:bg-gray-600"
class="flex items-center gap-2 rounded-3xl bg-gray-100 px-2.5 py-1 dark:bg-gray-600"
>
<Avatar
:size="28"
@@ -285,11 +285,11 @@ onMounted(async () => {
>
{{ processInstance?.startUser?.nickname.substring(0, 1) }}
</Avatar>
<span class="text-12px">{{
<span class="text-sm">{{
processInstance?.startUser?.nickname
}}</span>
</div>
<div class="text-[#878c93]">
<div class="text-gray-500">
{{ formatDateTime(processInstance?.startTime) }} 提交
</div>
</div>
@@ -297,7 +297,7 @@ onMounted(async () => {
<component
v-if="processInstance?.status"
:is="auditIconsMap[processInstance?.status]"
class="absolute right-[20px] top-[10px] size-[150px]"
class="absolute right-5 top-2.5 size-36"
/>
</div>

57
apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
View File

@@ -700,15 +700,12 @@ defineExpose({ loadTodoTask });
"
>
<Button ghost type="primary" @click="openPopover('approve')">
<IconifyIcon icon="icon-park-outline:check" />
<IconifyIcon icon="lucide:check" />
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE) }}
</Button>
<template #content>
<!-- 办理表单 -->
<div
class="flex flex-1 flex-col px-[20px] pt-[20px]"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -717,10 +714,7 @@ defineExpose({ loadTodoTask });
:rules="approveReasonRule"
label-width="100px"
>
<Card
v-if="runningTask?.formId > 0"
class="!-mt-[10px] mb-[15px]"
>
<Card v-if="runningTask?.formId > 0" class="!-mt-2.5 mb-3.5">
<template #title>
<span class="el-icon-picture-outline">
填写表单【{{ runningTask?.formName }}】
@@ -739,7 +733,7 @@ defineExpose({ loadTodoTask });
name="nextAssignees"
v-if="nextAssigneesActivityNode.length > 0"
>
<div class="-mb-[35px] -mt-[15px] ml-[10px]">
<div class="-mb-8 -mt-3.5 ml-2.5">
<ProcessInstanceTimeline
:activity-nodes="nextAssigneesActivityNode"
:show-status-icon="false"
@@ -759,7 +753,7 @@ defineExpose({ loadTodoTask });
<div class="mt-2">
<Image
style="float: left; width: 326px; height: 150px"
class="float-left h-40 w-80"
v-if="approveReasonForm.signPicUrl"
:src="approveReasonForm.signPicUrl"
/>
@@ -815,10 +809,7 @@ defineExpose({ loadTodoTask });
</Button>
<template #content>
<!-- 审批表单 -->
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -874,10 +865,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -949,10 +937,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.TRANSFER) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1025,10 +1010,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1101,10 +1083,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1184,10 +1163,7 @@ defineExpose({ loadTodoTask });
<IconifyIcon :size="14" icon="icon-park-outline:minus" /> 减签
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1258,10 +1234,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1334,7 +1307,7 @@ defineExpose({ loadTodoTask });
</Button>
<template #content>
<div
class="pt-20px px-20px flex w-[400px] flex-1 flex-col"
class="flex w-96 flex-1 flex-col px-5 pt-5"
v-loading="formLoading"
>
<Form
@@ -1347,7 +1320,7 @@ defineExpose({ loadTodoTask });
>
<FormItem label="取消理由" name="cancelReason">
<Alert
class="text-12px mb-2"
class="mb-2 text-xs"
type="warning"
size="small"
show-icon
@@ -1389,7 +1362,7 @@ defineExpose({ loadTodoTask });
processDefinition?.formType === 10
"
>
<IconifyIcon :size="14" icon="icon-park-outline:refresh" /> 再次提交
<IconifyIcon :size="14" icon="lucide:refresh-cw" /> 再次提交
</Button>
</Space>
</div>

8
apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
View File

@@ -41,13 +41,13 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="h-[40%] w-[60%]">
<Modal class="h-2/5 w-3/5">
<div class="mb-2 flex justify-end">
<Space>
<Tooltip title="撤销上一步操作">
<Button @click="signature?.undo()">
<template #icon>
<IconifyIcon icon="lucide:undo" class="mb-[4px] size-[16px]" />
<IconifyIcon icon="lucide:undo" class="mb-1 size-4" />
</template>
撤销
</Button>
@@ -56,7 +56,7 @@ const [Modal, modalApi] = useVbenModal({
<Tooltip title="清空画布">
<Button @click="signature?.clear()">
<template #icon>
<IconifyIcon icon="lucide:trash" class="mb-[4px] size-[16px]" />
<IconifyIcon icon="lucide:trash" class="mb-1 size-4" />
</template>
<span>清除</span>
</Button>
@@ -65,7 +65,7 @@ const [Modal, modalApi] = useVbenModal({
</div>
<Vue3Signature
class="mx-auto border-[1px] border-solid border-gray-300"
class="mx-auto border border-solid border-gray-300"
ref="signature"
w="874px"
h="324px"

2
apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
View File

@@ -201,7 +201,7 @@ defineExpose({
class="ml-1"
>
<IconifyIcon icon="lucide:file-text" />
<span class="!ml-[2px] text-[12px]">查看表单</span>
<span class="!ml-0.5 text-xs">查看表单</span>
</Button>
</div>
</template>

63
apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
View File

@@ -217,7 +217,7 @@ function handleUserSelectCancel() {
<template>
<div>
<Timeline class="pt-20px">
<Timeline class="pt-5">
<!-- 遍历每个审批节点 -->
<Timeline.Item
v-for="(activity, index) in activityNodes"
@@ -227,17 +227,17 @@ function handleUserSelectCancel() {
<template #dot>
<div class="relative">
<div
class="position-absolute left--10px top--6px flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-[#dedede] bg-[#3f73f7] p-[6px]"
class="position-absolute left--2.5 top--1.5 flex h-8 w-8 items-center justify-center rounded-full border border-solid border-gray-200 bg-blue-500 p-1.5"
>
<IconifyIcon
:icon="getApprovalNodeTypeIcon(activity.nodeType)"
class="size-[24px] text-white"
class="size-6 text-white"
/>
</div>
<div
v-if="showStatusIcon"
class="absolute right-[-10px] top-[18px] flex size-[20px] items-center rounded-full border-[2px] border-solid border-white p-[2px]"
class="absolute right--2.5 top-4 flex size-5 items-center rounded-full border-2 border-solid border-white p-0.5"
:style="{
backgroundColor: getApprovalNodeColor(activity.status),
}"
@@ -261,7 +261,7 @@ function handleUserSelectCancel() {
<!-- 信息：时间 -->
<div
v-if="activity.status !== BpmTaskStatusEnum.NOT_START"
class="ml-auto mt-1 text-[13px] text-[#a5a5a5]"
class="ml-auto mt-1 text-sm text-gray-500"
>
{{ getApprovalNodeTime(activity) }}
</div>
@@ -294,10 +294,7 @@ function handleUserSelectCancel() {
"
>
<template #icon>
<IconifyIcon
icon="mdi:account-plus-outline"
class="size-[18px]"
/>
<IconifyIcon icon="lucide:user-plus" class="size-4" />
</template>
</Button>
</Tooltip>
@@ -305,19 +302,19 @@ function handleUserSelectCancel() {
<div
v-for="(user, userIndex) in customApproveUsers[activity.id]"
:key="user.id || userIndex"
class="relative flex h-[36px] items-center gap-2 rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
class="relative flex h-9 items-center gap-2 rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="user.avatar"
:src="user.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
<span>{{ user.nickname.substring(0, 1) }}</span>
</Avatar>
<span class="text-[13px]">{{ user.nickname }}</span>
<span class="text-sm">{{ user.nickname }}</span>
</div>
</div>
@@ -326,7 +323,7 @@ function handleUserSelectCancel() {
<div
v-for="(task, idx) in activity.tasks"
:key="idx"
class="flex flex-col gap-2 pr-[8px]"
class="flex flex-col gap-2 pr-2"
>
<div
class="relative flex flex-wrap gap-2"
@@ -334,7 +331,7 @@ function handleUserSelectCancel() {
>
<!-- 信息：头像昵称 -->
<div
class="h-35px relative flex items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
class="relative flex h-8 items-center rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
>
<template
v-if="
@@ -342,12 +339,12 @@ function handleUserSelectCancel() {
"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="task.assigneeUser?.avatar"
:src="task.assigneeUser?.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
{{ task.assigneeUser?.nickname.substring(0, 1) }}
</Avatar>
{{ task.assigneeUser?.nickname }}
@@ -358,12 +355,12 @@ function handleUserSelectCancel() {
"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="task.ownerUser?.avatar"
:src="task.ownerUser?.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
{{ task.ownerUser?.nickname.substring(0, 1) }}
</Avatar>
{{ task.ownerUser?.nickname }}
@@ -374,16 +371,14 @@ function handleUserSelectCancel() {
v-if="
showStatusIcon && onlyStatusIconShow.includes(task.status)
"
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[2px]"
class="absolute left-6 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
:style="{
backgroundColor: statusIconMap[task.status]?.color,
}"
>
<IconifyIcon
:icon="
statusIconMap[task.status]?.icon || 'mdi:clock-outline'
"
class="size-[10px] text-white"
:icon="statusIconMap[task.status]?.icon || 'lucide:clock'"
class="size-2 text-white"
:class="[statusIconMap[task.status]?.animation]"
/>
</div>
@@ -394,7 +389,7 @@ function handleUserSelectCancel() {
<teleport defer :to="`#activity-task-${activity.id}-${index}`">
<div
v-if="shouldShowApprovalReason(task, activity.nodeType)"
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
class="mt-1 w-full rounded-md bg-gray-100 p-2 text-sm text-gray-500"
>
审批意见：{{ task.reason }}
</div>
@@ -403,11 +398,11 @@ function handleUserSelectCancel() {
task.signPicUrl &&
activity.nodeType === BpmNodeTypeEnum.USER_TASK_NODE
"
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
class="mt-1 w-full rounded-md bg-gray-100 p-2 text-sm text-gray-500"
>
签名：
<Image
class="ml-[5px] h-[40px] w-[90px]"
class="ml-1 h-10 w-24"
:src="task.signPicUrl"
:preview="{ src: task.signPicUrl }"
/>
@@ -419,30 +414,30 @@ function handleUserSelectCancel() {
<div
v-for="(user, userIndex) in activity.candidateUsers"
:key="userIndex"
class="relative flex h-[35px] items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
class="relative flex h-8 items-center rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="user.avatar"
:src="user.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
{{ user.nickname.substring(0, 1) }}
</Avatar>
<span class="text-[13px]">
<span class="text-sm">
{{ user.nickname }}
</span>
<!-- 候选任务状态图标 -->
<div
v-if="showStatusIcon"
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[1px]"
class="absolute left-6 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
:style="{ backgroundColor: statusIconMap['-1']?.color }"
>
<IconifyIcon
class="text-[11px] text-white"
:icon="statusIconMap['-1']?.icon || 'mdi:clock-outline'"
class="text-xs text-white"
:icon="statusIconMap['-1']?.icon || 'lucide:clock'"
/>
</div>
</div>

2
apps/web-antd/src/views/bpm/processListener/modules/form.vue
View File

@@ -85,7 +85,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>