fix(web-antdv-next): 统一 Collapse 面板和表格插槽写法
XuZhiqiang
parent
72f3d62a20
commit
b02d602a21
|
|
@ -1,5 +1,15 @@
|
|||
<script lang="ts" setup>
|
||||
import { h, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import type { TableColumnType } from 'antdv-next';
|
||||
|
||||
import {
|
||||
computed,
|
||||
h,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue';
|
||||
|
||||
import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
|
||||
import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
|
||||
|
|
@ -38,6 +48,80 @@ const dialogVisible = ref(false); // 弹窗可见性
|
|||
const dialogTitle = ref<string | undefined>(undefined); // 弹窗标题
|
||||
const selectActivityType = ref<string | undefined>(undefined); // 选中 Task 的活动编号
|
||||
const selectTasks = ref<any[]>([]); // 选中的任务数组
|
||||
const approvalColumns = computed<TableColumnType[]>(() => {
|
||||
const userColumn: TableColumnType =
|
||||
selectActivityType.value === 'bpmn:UserTask'
|
||||
? {
|
||||
align: 'center',
|
||||
key: 'approver',
|
||||
title: '审批人',
|
||||
width: 100,
|
||||
}
|
||||
: {
|
||||
align: 'center',
|
||||
dataIndex: ['assigneeUser', 'nickname'],
|
||||
key: 'starter',
|
||||
title: '发起人',
|
||||
width: 100,
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
align: 'center',
|
||||
key: 'index',
|
||||
title: '序号',
|
||||
width: 50,
|
||||
},
|
||||
userColumn,
|
||||
{
|
||||
align: 'center',
|
||||
key: 'dept',
|
||||
title: '部门',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
render: (val) => formatDate(val),
|
||||
title: '开始时间',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime',
|
||||
render: (val) => formatDate(val),
|
||||
title: '结束时间',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
title: '审批状态',
|
||||
width: 90,
|
||||
},
|
||||
...(selectActivityType.value === 'bpmn:UserTask'
|
||||
? [
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'reason',
|
||||
key: 'reason',
|
||||
title: '审批建议',
|
||||
width: 120,
|
||||
} as TableColumnType,
|
||||
]
|
||||
: []),
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'durationInMillis',
|
||||
key: 'durationInMillis',
|
||||
title: '耗时',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
/** Zoom：恢复 */
|
||||
const processReZoom = () => {
|
||||
|
|
@ -358,78 +442,32 @@ onBeforeUnmount(() => {
|
|||
:width="1000"
|
||||
>
|
||||
<Row>
|
||||
<Table :data-source="selectTasks" size="small" :bordered="true">
|
||||
<Table.Column title="序号" align="center" width="50">
|
||||
<template #default="{ index }">
|
||||
<Table
|
||||
:columns="approvalColumns"
|
||||
:data-source="selectTasks"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
>
|
||||
<template #bodyCell="{ column, index, record }">
|
||||
<template v-if="column.key === 'index'">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
title="审批人"
|
||||
width="100"
|
||||
align="center"
|
||||
v-if="selectActivityType === 'bpmn:UserTask'"
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<template v-else-if="column.key === 'approver'">
|
||||
{{ record.assigneeUser?.nickname || record.ownerUser?.nickname }}
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
title="发起人"
|
||||
data-index="assigneeUser.nickname"
|
||||
width="100"
|
||||
align="center"
|
||||
v-else
|
||||
/>
|
||||
<Table.Column title="部门" width="100" align="center">
|
||||
<template #default="{ record }">
|
||||
<template v-else-if="column.key === 'dept'">
|
||||
{{ record.assigneeUser?.deptName || record.ownerUser?.deptName }}
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
:custom-render="({ text }) => formatDate(text)"
|
||||
align="center"
|
||||
title="开始时间"
|
||||
data-index="createTime"
|
||||
width="140"
|
||||
/>
|
||||
<Table.Column
|
||||
:custom-render="({ text }) => formatDate(text)"
|
||||
align="center"
|
||||
title="结束时间"
|
||||
data-index="endTime"
|
||||
width="140"
|
||||
/>
|
||||
<Table.Column
|
||||
align="center"
|
||||
title="审批状态"
|
||||
data-index="status"
|
||||
width="90"
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.BPM_TASK_STATUS"
|
||||
:value="record.status"
|
||||
/>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
align="center"
|
||||
title="审批建议"
|
||||
data-index="reason"
|
||||
width="120"
|
||||
v-if="selectActivityType === 'bpmn:UserTask'"
|
||||
/>
|
||||
<Table.Column
|
||||
align="center"
|
||||
title="耗时"
|
||||
data-index="durationInMillis"
|
||||
width="100"
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<template v-else-if="column.key === 'durationInMillis'">
|
||||
{{ formatPast2(record.durationInMillis) }}
|
||||
</template>
|
||||
</Table.Column>
|
||||
</template>
|
||||
</Table>
|
||||
</Row>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
|||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Button, Collapse, message, Space } from 'antdv-next';
|
||||
import { Button, Collapse, CollapsePanel, message, Space } from 'antdv-next';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createDevice, getDevice, updateDevice } from '#/api/iot/device/device';
|
||||
|
|
@ -208,12 +208,12 @@ onMounted(async () => {
|
|||
<div class="mx-4">
|
||||
<Form />
|
||||
<Collapse v-model:active-key="activeKey" class="mt-4">
|
||||
<Collapse.Panel key="advanced" header="更多设置">
|
||||
<CollapsePanel key="advanced" header="更多设置">
|
||||
<AdvancedForm />
|
||||
<Space class="mt-2">
|
||||
<Button type="primary" @click="openMapDialog">坐标拾取</Button>
|
||||
</Space>
|
||||
</Collapse.Panel>
|
||||
</CollapsePanel>
|
||||
</Collapse>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { computed, nextTick, ref } from 'vue';
|
|||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Collapse, message } from 'antdv-next';
|
||||
import { Collapse, CollapsePanel, message } from 'antdv-next';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
|
|
@ -148,9 +148,9 @@ const [Modal, modalApi] = useVbenModal({
|
|||
<div class="mx-4">
|
||||
<Form />
|
||||
<Collapse v-model:active-key="activeKey" class="mt-4">
|
||||
<Collapse.Panel key="advanced" header="更多设置">
|
||||
<CollapsePanel key="advanced" header="更多设置">
|
||||
<AdvancedForm />
|
||||
</Collapse.Panel>
|
||||
</CollapsePanel>
|
||||
</Collapse>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Reference in New Issue