merge: t25 单据查询页面与只读详情
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult } from '@/api';
|
||||
import type { ApprovalOrganization, ApprovalUser } from '../instance/model';
|
||||
import { THINK_API_URL } from '@/config/setting';
|
||||
|
||||
/**
|
||||
* 启用组织（审批管理下拉）
|
||||
*/
|
||||
export async function listApprovalOrganizations() {
|
||||
const res = await request.get<ApiResult<ApprovalOrganization[]>>(
|
||||
THINK_API_URL + '/approval/directory/organizations'
|
||||
);
|
||||
if (res.data.code === 0 && res.data.data) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 启用用户远程搜索（审批管理下拉）
|
||||
*/
|
||||
export async function searchApprovalUsers(params?: {
|
||||
keywords?: string;
|
||||
organizationId?: number;
|
||||
}) {
|
||||
const res = await request.get<ApiResult<ApprovalUser[]>>(
|
||||
THINK_API_URL + '/approval/directory/users',
|
||||
{ params }
|
||||
);
|
||||
if (res.data.code === 0 && res.data.data) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult, PageResult } from '@/api';
|
||||
import type {
|
||||
ApprovalInstance,
|
||||
ApprovalItem,
|
||||
ApprovalQueryParam
|
||||
} from './model';
|
||||
import { THINK_API_URL } from '@/config/setting';
|
||||
|
||||
/**
|
||||
* 单据查询分页
|
||||
*/
|
||||
export async function pageInstances(params: ApprovalQueryParam) {
|
||||
const res = await request.get<ApiResult<PageResult<ApprovalItem>>>(
|
||||
THINK_API_URL + '/approval/instance/page',
|
||||
{ params }
|
||||
);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 单据详情（只读）
|
||||
*/
|
||||
export async function getInstance(id: number) {
|
||||
const res = await request.get<ApiResult<ApprovalInstance>>(
|
||||
THINK_API_URL + '/approval/instance/' + id
|
||||
);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
import type { PageParam } from '@/api';
|
||||
|
||||
/**
|
||||
* 单据查询条件
|
||||
*/
|
||||
export interface ApprovalQueryParam extends PageParam {
|
||||
// 单据类型 completion/coordination
|
||||
docType?: string;
|
||||
// 单号
|
||||
bizNo?: string;
|
||||
// 关键词：单号、名称或标题、实施单位
|
||||
keyword?: string;
|
||||
// 报送部门id
|
||||
reportOrgId?: number;
|
||||
// 受理部门id
|
||||
acceptOrgId?: number;
|
||||
// 发起人id
|
||||
reporterId?: number;
|
||||
// 单据状态
|
||||
status?: string;
|
||||
// 提交时间起
|
||||
submitTimeStart?: string;
|
||||
// 提交时间止
|
||||
submitTimeEnd?: string;
|
||||
// 归档时间起
|
||||
archiveTimeStart?: string;
|
||||
// 归档时间止
|
||||
archiveTimeEnd?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 单据列表行
|
||||
*/
|
||||
export interface ApprovalItem {
|
||||
id?: number;
|
||||
bizNo?: string;
|
||||
docType?: string;
|
||||
docTypeName?: string;
|
||||
status?: string;
|
||||
statusName?: string;
|
||||
// 名称或标题
|
||||
title?: string;
|
||||
submitTime?: string;
|
||||
currentNodeName?: string;
|
||||
reporterId?: number;
|
||||
reporterName?: string;
|
||||
reportOrgName?: string;
|
||||
acceptOrgName?: string;
|
||||
archiveTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 附件
|
||||
*/
|
||||
export interface ApprovalAttachment {
|
||||
id?: number;
|
||||
fileId?: number;
|
||||
name?: string;
|
||||
url?: string;
|
||||
length?: number;
|
||||
category?: string;
|
||||
categoryName?: string;
|
||||
uploaderId?: number;
|
||||
uploaderName?: string;
|
||||
createTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理记录
|
||||
*/
|
||||
export interface ApprovalRecord {
|
||||
id?: number;
|
||||
taskId?: number;
|
||||
nodeKey?: string;
|
||||
nodeName?: string;
|
||||
operatorId?: number;
|
||||
operatorName?: string;
|
||||
action?: string;
|
||||
actionName?: string;
|
||||
opinion?: string;
|
||||
round?: number;
|
||||
createTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 当前轮存档确认
|
||||
*/
|
||||
export interface ApprovalConfirm {
|
||||
userId?: number;
|
||||
userName?: string;
|
||||
status?: string;
|
||||
statusName?: string;
|
||||
handleTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 我的待处理任务
|
||||
*/
|
||||
export interface ApprovalMyTask {
|
||||
id?: number;
|
||||
nodeKey?: string;
|
||||
nodeType?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 单据详情
|
||||
*/
|
||||
export interface ApprovalInstance {
|
||||
id?: number;
|
||||
bizNo?: string;
|
||||
docType?: string;
|
||||
docTypeName?: string;
|
||||
flowCode?: string;
|
||||
status?: string;
|
||||
statusName?: string;
|
||||
round?: number;
|
||||
reporterId?: number;
|
||||
reporterName?: string;
|
||||
reportOrgId?: number;
|
||||
reportOrgName?: string;
|
||||
acceptOrgId?: number;
|
||||
acceptOrgName?: string;
|
||||
currentNodeKey?: string;
|
||||
currentNodeType?: string;
|
||||
currentNodeName?: string;
|
||||
submitTime?: string;
|
||||
approveTime?: string;
|
||||
archiveTime?: string;
|
||||
archivistId?: number;
|
||||
archivistName?: string;
|
||||
// 业务完成确认单
|
||||
name?: string;
|
||||
implementOrg?: string;
|
||||
fee?: number;
|
||||
serviceContent?: string;
|
||||
// 内部协调单
|
||||
title?: string;
|
||||
content?: string;
|
||||
remark?: string;
|
||||
dispatchTargetId?: number;
|
||||
dispatchTargetName?: string;
|
||||
attachments?: ApprovalAttachment[];
|
||||
records?: ApprovalRecord[];
|
||||
confirms?: ApprovalConfirm[];
|
||||
myTask?: ApprovalMyTask | null;
|
||||
permissions?: Record<string, boolean>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 审批目录组织
|
||||
*/
|
||||
export interface ApprovalOrganization {
|
||||
organizationId?: number;
|
||||
parentId?: number;
|
||||
organizationName?: string;
|
||||
organizationFullName?: string;
|
||||
organizationCode?: string;
|
||||
leaderId?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 审批目录用户
|
||||
*/
|
||||
export interface ApprovalUser {
|
||||
userId?: number;
|
||||
username?: string;
|
||||
nickname?: string;
|
||||
realName?: string;
|
||||
organizationId?: number;
|
||||
organizationName?: string;
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
<!-- 单据详情抽屉（只读） -->
|
||||
<template>
|
||||
<ele-modal
|
||||
title="单据详情"
|
||||
:width="860"
|
||||
:footer="null"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<template v-if="data">
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
size="small"
|
||||
bordered
|
||||
:label-style="{ width: '110px' }"
|
||||
>
|
||||
<a-descriptions-item label="单号">
|
||||
{{ data.bizNo || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="单据类型">
|
||||
{{ data.docTypeName || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag :color="statusColor(data.status)">
|
||||
{{ data.statusName || '-' }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="当前节点">
|
||||
{{ data.currentNodeName || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="发起人">
|
||||
{{ data.reporterName || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="报送部门">
|
||||
{{ data.reportOrgName || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="受理部门">
|
||||
{{ data.acceptOrgName || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="提交时间">
|
||||
{{ toDateString(data.submitTime) || '-' }}
|
||||
</a-descriptions-item>
|
||||
<template v-if="data.docType === 'completion'">
|
||||
<a-descriptions-item label="名称" :span="2">
|
||||
{{ data.name || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="实施单位">
|
||||
{{ data.implementOrg || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="费用（元）">
|
||||
{{ data.fee ?? '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="服务内容" :span="2">
|
||||
<div class="ele-text-break">{{ data.serviceContent || '-' }}</div>
|
||||
</a-descriptions-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-descriptions-item label="标题" :span="2">
|
||||
{{ data.title || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="协调内容" :span="2">
|
||||
<div class="ele-text-break">{{ data.content || '-' }}</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="备注" :span="2">
|
||||
<div class="ele-text-break">{{ data.remark || '-' }}</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="派单对象">
|
||||
{{ data.dispatchTargetName || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="审批完成时间">
|
||||
{{ toDateString(data.approveTime) || '-' }}
|
||||
</a-descriptions-item>
|
||||
</template>
|
||||
<a-descriptions-item label="归档时间">
|
||||
{{ toDateString(data.archiveTime) || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="归档人">
|
||||
{{ data.archivistName || '-' }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-divider orientation="left">附件</a-divider>
|
||||
<div v-if="data.attachments && data.attachments.length">
|
||||
<div
|
||||
v-for="attachment in data.attachments"
|
||||
:key="attachment.id"
|
||||
class="attachment-item"
|
||||
>
|
||||
<a :href="attachment.url" target="_blank" rel="noopener noreferrer">
|
||||
{{ attachment.name || '附件' }}
|
||||
</a>
|
||||
<a-tag style="margin-left: 8px">
|
||||
{{ attachment.categoryName || '-' }}
|
||||
</a-tag>
|
||||
<span class="ele-text-secondary" style="margin-left: 8px">
|
||||
{{ sizeText(attachment.length) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="ele-text-secondary">暂无附件</div>
|
||||
|
||||
<a-divider orientation="left">存档确认</a-divider>
|
||||
<div v-if="data.confirms && data.confirms.length">
|
||||
<div
|
||||
v-for="confirm in data.confirms"
|
||||
:key="confirm.userId"
|
||||
class="confirm-item"
|
||||
>
|
||||
<span>{{ confirm.userName || '-' }}</span>
|
||||
<a-tag
|
||||
style="margin-left: 8px"
|
||||
:color="confirm.status === 'DONE' ? 'green' : 'default'"
|
||||
>
|
||||
{{ confirm.statusName || '-' }}
|
||||
</a-tag>
|
||||
<span class="ele-text-secondary" style="margin-left: 8px">
|
||||
{{ toDateString(confirm.handleTime) || '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="ele-text-secondary">尚未进入存档环节</div>
|
||||
|
||||
<a-divider orientation="left">处理记录</a-divider>
|
||||
<a-timeline v-if="data.records && data.records.length">
|
||||
<a-timeline-item
|
||||
v-for="record in data.records"
|
||||
:key="record.id"
|
||||
:color="actionColor(record.action)"
|
||||
>
|
||||
<div>
|
||||
<span style="font-weight: 500">
|
||||
{{ record.operatorName || '-' }}
|
||||
</span>
|
||||
<span style="margin-left: 8px">
|
||||
{{ record.actionName || record.action }}
|
||||
</span>
|
||||
<span
|
||||
v-if="record.nodeName"
|
||||
class="ele-text-secondary"
|
||||
style="margin-left: 8px"
|
||||
>
|
||||
（{{ record.nodeName }}）
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="record.opinion" class="ele-text-secondary">
|
||||
意见：{{ record.opinion }}
|
||||
</div>
|
||||
<div class="ele-text-secondary">
|
||||
{{ toDateString(record.createTime) }}
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
<div v-else class="ele-text-secondary">暂无处理记录</div>
|
||||
</template>
|
||||
<a-empty v-else-if="!loading" description="暂无数据" />
|
||||
</a-spin>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { toDateString } from 'ele-admin-pro/es';
|
||||
import { getInstance } from '@/api/approval/instance';
|
||||
import type { ApprovalInstance } from '@/api/approval/instance/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 抽屉是否打开
|
||||
visible: boolean;
|
||||
// 单据id
|
||||
instanceId?: number;
|
||||
}>();
|
||||
|
||||
// 详情数据
|
||||
const data = ref<ApprovalInstance | null>(null);
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 状态颜色
|
||||
const statusColor = (status?: string) => {
|
||||
switch (status) {
|
||||
case 'PENDING':
|
||||
return 'processing';
|
||||
case 'REJECTED':
|
||||
return 'red';
|
||||
case 'WITHDRAWN':
|
||||
return 'orange';
|
||||
case 'APPROVED':
|
||||
return 'green';
|
||||
case 'ARCHIVED':
|
||||
return 'blue';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
// 处理记录颜色
|
||||
const actionColor = (action?: string) => {
|
||||
switch (action) {
|
||||
case 'APPROVE':
|
||||
case 'CONFIRM':
|
||||
case 'ARCHIVE':
|
||||
return 'green';
|
||||
case 'REJECT':
|
||||
return 'red';
|
||||
default:
|
||||
return 'blue';
|
||||
}
|
||||
};
|
||||
|
||||
// 附件大小
|
||||
const sizeText = (length?: number) => {
|
||||
if (!length && length !== 0) {
|
||||
return '';
|
||||
}
|
||||
if (length < 1024) {
|
||||
return length + ' B';
|
||||
}
|
||||
if (length < 1024 * 1024) {
|
||||
return (length / 1024).toFixed(1) + ' KB';
|
||||
}
|
||||
return (length / 1024 / 1024).toFixed(1) + ' MB';
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 加载详情 */
|
||||
const loadData = () => {
|
||||
if (!props.instanceId) {
|
||||
data.value = null;
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
data.value = null;
|
||||
getInstance(props.instanceId)
|
||||
.then((result) => {
|
||||
data.value = result;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [props.visible, props.instanceId],
|
||||
() => {
|
||||
if (props.visible) {
|
||||
loadData();
|
||||
} else {
|
||||
data.value = null;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.attachment-item {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.confirm-item {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.ele-text-break {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,254 @@
|
||||
<!-- 单据查询搜索表单 -->
|
||||
<template>
|
||||
<a-form
|
||||
:label-col="
|
||||
styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col v-for="field in basicFields" :key="field.prop" v-bind="colSpan">
|
||||
<a-form-item :label="field.label">
|
||||
<a-select
|
||||
v-if="field.prop === 'docType'"
|
||||
v-model:value="form.docType"
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
:options="docTypeOptions"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="field.prop === 'status'"
|
||||
v-model:value="form.status"
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
:options="statusOptions"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="field.prop === 'reportOrgId'"
|
||||
v-model:value="form.reportOrgId"
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
show-search
|
||||
:filter-option="filterOrganization"
|
||||
:options="organizationOptions"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="field.prop === 'acceptOrgId'"
|
||||
v-model:value="form.acceptOrgId"
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
show-search
|
||||
:filter-option="filterOrganization"
|
||||
:options="organizationOptions"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="field.prop === 'reporterId'"
|
||||
v-model:value="form.reporterId"
|
||||
placeholder="输入姓名或账号搜索"
|
||||
allow-clear
|
||||
show-search
|
||||
:filter-option="false"
|
||||
:options="userOptions"
|
||||
:loading="userLoading"
|
||||
@search="searchUsers"
|
||||
/>
|
||||
<a-input
|
||||
v-else
|
||||
v-model:value.trim="form[field.prop]"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-bind="colSpan">
|
||||
<a-form-item label="提交时间">
|
||||
<a-range-picker
|
||||
v-model:value="submitRange"
|
||||
:show-time="true"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-bind="colSpan">
|
||||
<a-form-item label="归档时间">
|
||||
<a-range-picker
|
||||
v-model:value="archiveRange"
|
||||
:show-time="true"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-bind="colSpan">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="search">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import {
|
||||
listApprovalOrganizations,
|
||||
searchApprovalUsers
|
||||
} from '@/api/approval/directory';
|
||||
import type {
|
||||
ApprovalOrganization,
|
||||
ApprovalQueryParam,
|
||||
ApprovalUser
|
||||
} from '@/api/approval/instance/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: ApprovalQueryParam): void;
|
||||
}>();
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
// 栅格宽度
|
||||
const colSpan = {
|
||||
xl: 6,
|
||||
lg: 12,
|
||||
md: 12,
|
||||
sm: 24,
|
||||
xs: 24
|
||||
};
|
||||
|
||||
// 基础字段
|
||||
const basicFields: {
|
||||
prop:
|
||||
| 'docType'
|
||||
| 'bizNo'
|
||||
| 'keyword'
|
||||
| 'reportOrgId'
|
||||
| 'acceptOrgId'
|
||||
| 'reporterId'
|
||||
| 'status';
|
||||
label: string;
|
||||
}[] = [
|
||||
{ prop: 'docType', label: '单据类型' },
|
||||
{ prop: 'bizNo', label: '单号' },
|
||||
{ prop: 'keyword', label: '标题或名称' },
|
||||
{ prop: 'reportOrgId', label: '报送部门' },
|
||||
{ prop: 'acceptOrgId', label: '受理部门' },
|
||||
{ prop: 'reporterId', label: '发起人' },
|
||||
{ prop: 'status', label: '状态' }
|
||||
];
|
||||
|
||||
// 单据类型选项
|
||||
const docTypeOptions = [
|
||||
{ label: '业务完成确认单', value: 'completion' },
|
||||
{ label: '内部协调单', value: 'coordination' }
|
||||
];
|
||||
|
||||
// 状态选项
|
||||
const statusOptions = [
|
||||
{ label: '未提交', value: 'DRAFT' },
|
||||
{ label: '审批中', value: 'PENDING' },
|
||||
{ label: '已驳回', value: 'REJECTED' },
|
||||
{ label: '已撤回', value: 'WITHDRAWN' },
|
||||
{ label: '审批完成', value: 'APPROVED' },
|
||||
{ label: '已归档', value: 'ARCHIVED' }
|
||||
];
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields } = useFormData<ApprovalQueryParam>({
|
||||
docType: undefined,
|
||||
bizNo: '',
|
||||
keyword: '',
|
||||
reportOrgId: undefined,
|
||||
acceptOrgId: undefined,
|
||||
reporterId: undefined,
|
||||
status: undefined
|
||||
});
|
||||
|
||||
// 提交时间范围
|
||||
const submitRange = ref<[string, string]>(['', '']);
|
||||
// 归档时间范围
|
||||
const archiveRange = ref<[string, string]>(['', '']);
|
||||
|
||||
// 组织下拉选项
|
||||
const organizationOptions = ref<{ label: string; value: number }[]>([]);
|
||||
|
||||
// 发起人下拉选项
|
||||
const userOptions = ref<{ label: string; value: number }[]>([]);
|
||||
// 发起人请求状态
|
||||
const userLoading = ref(false);
|
||||
|
||||
// 组织远程过滤
|
||||
const filterOrganization = (input: string, option: { label: string }) => {
|
||||
return (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
|
||||
};
|
||||
|
||||
// 远程搜索发起人
|
||||
const searchUsers = (keywords?: string) => {
|
||||
userLoading.value = true;
|
||||
searchApprovalUsers({ keywords })
|
||||
.then((data) => {
|
||||
userOptions.value = data.map((user: ApprovalUser) => ({
|
||||
label:
|
||||
(user.realName || user.nickname || user.username || '') +
|
||||
(user.username ? '(' + user.username + ')' : ''),
|
||||
value: user.userId as number
|
||||
}));
|
||||
})
|
||||
.catch(() => {
|
||||
userOptions.value = [];
|
||||
})
|
||||
.finally(() => {
|
||||
userLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [submitTimeStart, submitTimeEnd] = submitRange.value ?? ['', ''];
|
||||
const [archiveTimeStart, archiveTimeEnd] = archiveRange.value ?? ['', ''];
|
||||
emit('search', {
|
||||
...form,
|
||||
submitTimeStart,
|
||||
submitTimeEnd,
|
||||
archiveTimeStart,
|
||||
archiveTimeEnd
|
||||
});
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
submitRange.value = ['', ''];
|
||||
archiveRange.value = ['', ''];
|
||||
userOptions.value = [];
|
||||
search();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
listApprovalOrganizations()
|
||||
.then((data) => {
|
||||
organizationOptions.value = data.map(
|
||||
(organization: ApprovalOrganization) => ({
|
||||
label:
|
||||
organization.organizationFullName ||
|
||||
organization.organizationName ||
|
||||
'',
|
||||
value: organization.organizationId as number
|
||||
})
|
||||
);
|
||||
})
|
||||
.catch(() => {
|
||||
organizationOptions.value = [];
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!-- 审批管理 - 单据查询 -->
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<search @search="reload" />
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:scroll="{ x: 1500 }"
|
||||
cache-key="proApprovalInstanceTable"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'docType'">
|
||||
<a-tag :color="record.docType === 'completion' ? 'blue' : 'purple'">
|
||||
{{ record.docTypeName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag :color="statusColor(record.status)">
|
||||
{{ record.statusName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'submitTime'">
|
||||
{{ toDateString(record.submitTime) || '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'archiveTime'">
|
||||
{{ toDateString(record.archiveTime) || '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a @click="openDetail(record)">详情</a>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 详情抽屉 -->
|
||||
<detail v-model:visible="showDetail" :instance-id="currentId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import { toDateString } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import Detail from './components/detail.vue';
|
||||
import { pageInstances } from '@/api/approval/instance';
|
||||
import type {
|
||||
ApprovalItem,
|
||||
ApprovalQueryParam
|
||||
} from '@/api/approval/instance/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 详情抽屉是否显示
|
||||
const showDetail = ref(false);
|
||||
// 当前查看的单据id
|
||||
const currentId = ref<number | undefined>(undefined);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where }) => {
|
||||
return pageInstances({
|
||||
...(where as ApprovalQueryParam),
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '单号',
|
||||
dataIndex: 'bizNo',
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => text || '-'
|
||||
},
|
||||
{
|
||||
title: '单据类型',
|
||||
key: 'docType',
|
||||
dataIndex: 'docType',
|
||||
width: 140,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '标题或名称',
|
||||
dataIndex: 'title',
|
||||
minWidth: 220,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '报送部门',
|
||||
dataIndex: 'reportOrgName',
|
||||
width: 180,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '报送人',
|
||||
dataIndex: 'reporterName',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '受理部门',
|
||||
dataIndex: 'acceptOrgName',
|
||||
width: 180,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
width: 110,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '当前节点',
|
||||
dataIndex: 'currentNodeName',
|
||||
width: 140,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '提交时间',
|
||||
key: 'submitTime',
|
||||
dataIndex: 'submitTime',
|
||||
width: 170,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '归档时间',
|
||||
key: 'archiveTime',
|
||||
dataIndex: 'archiveTime',
|
||||
width: 170,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 90,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 状态颜色
|
||||
const statusColor = (status?: string) => {
|
||||
switch (status) {
|
||||
case 'PENDING':
|
||||
return 'processing';
|
||||
case 'REJECTED':
|
||||
return 'red';
|
||||
case 'WITHDRAWN':
|
||||
return 'orange';
|
||||
case 'APPROVED':
|
||||
return 'green';
|
||||
case 'ARCHIVED':
|
||||
return 'blue';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
/* 刷新表格 */
|
||||
const reload = (where?: ApprovalQueryParam) => {
|
||||
tableRef?.value?.reload({ page: 1, where: where ?? {} });
|
||||
};
|
||||
|
||||
/* 打开详情 */
|
||||
const openDetail = (row: ApprovalItem) => {
|
||||
currentId.value = row.id;
|
||||
showDetail.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ApprovalInstance'
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user