first commit
This commit is contained in:
168
src/pages-bpm/oa/leave/components/search-form.vue
Normal file
168
src/pages-bpm/oa/leave/components/search-form.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<!-- 搜索框入口 -->
|
||||
<view @click="visible = true">
|
||||
<wd-search :placeholder="placeholder" hide-cancel disabled />
|
||||
</view>
|
||||
|
||||
<!-- 搜索弹窗 -->
|
||||
<wd-popup v-model="visible" position="top" @close="visible = false">
|
||||
<view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
|
||||
<view class="yd-search-form-item">
|
||||
<view class="yd-search-form-label">
|
||||
请假类型
|
||||
</view>
|
||||
<wd-radio-group v-model="formData.type" shape="button">
|
||||
<wd-radio :value="-1">
|
||||
全部
|
||||
</wd-radio>
|
||||
<wd-radio v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)" :key="dict.value" :value="dict.value">
|
||||
{{ dict.label }}
|
||||
</wd-radio>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
<view class="yd-search-form-item">
|
||||
<view class="yd-search-form-label">
|
||||
审批结果
|
||||
</view>
|
||||
<wd-radio-group v-model="formData.status" shape="button">
|
||||
<wd-radio :value="-1">
|
||||
全部
|
||||
</wd-radio>
|
||||
<wd-radio v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)" :key="dict.value" :value="dict.value">
|
||||
{{ dict.label }}
|
||||
</wd-radio>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
<view class="yd-search-form-item">
|
||||
<view class="yd-search-form-label">
|
||||
创建时间
|
||||
</view>
|
||||
<view class="yd-search-form-date-range-container">
|
||||
<view class="flex-1" @click="visibleCreateTime[0] = true">
|
||||
<view class="yd-search-form-date-range-picker">
|
||||
{{ formatDate(formData.createTime?.[0]) || '开始日期' }}
|
||||
</view>
|
||||
</view>
|
||||
-
|
||||
<view class="flex-1" @click="visibleCreateTime[1] = true">
|
||||
<view class="yd-search-form-date-range-picker">
|
||||
{{ formatDate(formData.createTime?.[1]) || '结束日期' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<wd-datetime-picker-view v-if="visibleCreateTime[0]" v-model="tempCreateTime[0]" type="date" />
|
||||
<view v-if="visibleCreateTime[0]" class="yd-search-form-date-range-actions">
|
||||
<wd-button size="small" plain @click="visibleCreateTime[0] = false">
|
||||
取消
|
||||
</wd-button>
|
||||
<wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
|
||||
确定
|
||||
</wd-button>
|
||||
</view>
|
||||
<wd-datetime-picker-view v-if="visibleCreateTime[1]" v-model="tempCreateTime[1]" type="date" />
|
||||
<view v-if="visibleCreateTime[1]" class="yd-search-form-date-range-actions">
|
||||
<wd-button size="small" plain @click="visibleCreateTime[1] = false">
|
||||
取消
|
||||
</wd-button>
|
||||
<wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
|
||||
确定
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="yd-search-form-item">
|
||||
<view class="yd-search-form-label">
|
||||
请假原因
|
||||
</view>
|
||||
<wd-input
|
||||
v-model="formData.reason"
|
||||
placeholder="请输入请假原因"
|
||||
clearable
|
||||
/>
|
||||
</view>
|
||||
<view class="yd-search-form-actions">
|
||||
<wd-button class="flex-1" plain @click="handleReset">
|
||||
重置
|
||||
</wd-button>
|
||||
<wd-button class="flex-1" type="primary" @click="handleSearch">
|
||||
搜索
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
|
||||
import { getNavbarHeight } from '@/utils'
|
||||
import { DICT_TYPE } from '@/utils/constants'
|
||||
import { formatDate, formatDateRange } from '@/utils/date'
|
||||
|
||||
const emit = defineEmits<{
|
||||
search: [data: Record<string, any>]
|
||||
reset: []
|
||||
}>()
|
||||
|
||||
const visible = ref(false)
|
||||
const formData = reactive({
|
||||
type: -1, // -1 表示全部
|
||||
status: -1, // -1 表示全部
|
||||
createTime: [undefined, undefined] as [number | undefined, number | undefined],
|
||||
reason: undefined as string | undefined,
|
||||
})
|
||||
|
||||
/** 搜索条件 placeholder 拼接 */
|
||||
const placeholder = computed(() => {
|
||||
const conditions: string[] = []
|
||||
if (formData.type !== -1) {
|
||||
conditions.push(`类型:${getDictLabel(DICT_TYPE.BPM_OA_LEAVE_TYPE, formData.type)}`)
|
||||
}
|
||||
if (formData.status !== -1) {
|
||||
conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, formData.status)}`)
|
||||
}
|
||||
if (formData.createTime?.[0] && formData.createTime?.[1]) {
|
||||
conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
|
||||
}
|
||||
if (formData.reason) {
|
||||
conditions.push(`原因:${formData.reason}`)
|
||||
}
|
||||
return conditions.length > 0 ? conditions.join(' | ') : '搜索请假记录'
|
||||
})
|
||||
|
||||
// 时间选择器状态
|
||||
const visibleCreateTime = ref<[boolean, boolean]>([false, false])
|
||||
const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
|
||||
|
||||
/** 创建时间[0]确认 */
|
||||
function handleCreateTime0Confirm() {
|
||||
formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
|
||||
visibleCreateTime.value[0] = false
|
||||
}
|
||||
|
||||
/** 创建时间[1]确认 */
|
||||
function handleCreateTime1Confirm() {
|
||||
formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
|
||||
visibleCreateTime.value[1] = false
|
||||
}
|
||||
|
||||
/** 搜索 */
|
||||
function handleSearch() {
|
||||
visible.value = false
|
||||
emit('search', {
|
||||
type: formData.type === -1 ? undefined : formData.type,
|
||||
status: formData.status === -1 ? undefined : formData.status,
|
||||
reason: formData.reason || undefined,
|
||||
createTime: formatDateRange(formData.createTime),
|
||||
})
|
||||
}
|
||||
|
||||
/** 重置 */
|
||||
function handleReset() {
|
||||
formData.type = -1
|
||||
formData.status = -1
|
||||
formData.createTime = [undefined, undefined]
|
||||
formData.reason = undefined
|
||||
visible.value = false
|
||||
emit('reset')
|
||||
}
|
||||
</script>
|
||||
285
src/pages-bpm/oa/leave/create/index.vue
Normal file
285
src/pages-bpm/oa/leave/create/index.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<view class="yd-page-container pb-[76rpx]">
|
||||
<!-- 顶部导航栏 -->
|
||||
<wd-navbar
|
||||
title="发起请假"
|
||||
left-arrow placeholder safe-area-inset-top fixed
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
<view class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white">
|
||||
<!-- 表单内容 -->
|
||||
<wd-form ref="formRef" :model="formData" :rules="formRules">
|
||||
<wd-cell-group border title="请假信息">
|
||||
<wd-picker
|
||||
v-model="formData.type"
|
||||
:columns="getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
|
||||
label="请假类型"
|
||||
label-width="200rpx"
|
||||
prop="type"
|
||||
:rules="[{ required: true, message: '请选择请假类型' }]"
|
||||
placeholder="请选择请假类型"
|
||||
/>
|
||||
<wd-datetime-picker
|
||||
v-model="formData.startTime"
|
||||
label="开始时间"
|
||||
label-width="200rpx"
|
||||
prop="startTime"
|
||||
:rules="[{ required: true, message: '请选择开始时间' }]"
|
||||
placeholder="请选择开始时间"
|
||||
/>
|
||||
<wd-datetime-picker
|
||||
v-model="formData.endTime"
|
||||
label="结束时间"
|
||||
label-width="200rpx"
|
||||
prop="endTime"
|
||||
:rules="[{ required: true, message: '请选择结束时间' }]"
|
||||
placeholder="请选择结束时间"
|
||||
/>
|
||||
<wd-textarea
|
||||
v-model="formData.reason"
|
||||
label="请假原因"
|
||||
label-width="200rpx"
|
||||
prop="reason"
|
||||
:rules="[{ required: true, message: '请输入请假原因' }]"
|
||||
placeholder="请输入请假原因"
|
||||
:maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</wd-cell-group>
|
||||
</wd-form>
|
||||
</view>
|
||||
<!-- 流程预览卡片 -->
|
||||
<view class="mx-24rpx mb-120rpx mt-24rpx rounded-16rpx bg-white">
|
||||
<view class="p-24rpx">
|
||||
<view class="mb-16rpx flex items-center justify-between">
|
||||
<text class="text-28rpx text-[#333] font-bold">流程预览</text>
|
||||
<wd-loading v-if="processTimeLineLoading" size="32rpx" />
|
||||
</view>
|
||||
|
||||
<!-- 流程时间线 -->
|
||||
<ProcessInstanceTimeline
|
||||
v-if="activityNodes.length > 0"
|
||||
:activity-nodes="activityNodes"
|
||||
:show-status-icon="false"
|
||||
@select-user-confirm="selectUserConfirm"
|
||||
/>
|
||||
|
||||
<!-- 无流程数据提示 -->
|
||||
<view v-else-if="!processTimeLineLoading" class="py-40rpx text-center">
|
||||
<text class="text-24rpx text-[#999]">暂无流程预览数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部提交按钮 -->
|
||||
<view class="yd-detail-footer">
|
||||
<view class="yd-detail-footer-actions">
|
||||
<wd-button type="primary" class="flex-1" :loading="formLoading" @click="handleSubmit">
|
||||
提交
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'wot-design-uni/components/wd-form/types'
|
||||
import type { Leave } from '@/api/bpm/oa/leave'
|
||||
import type { ApprovalNodeInfo } from '@/api/bpm/processInstance'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useMessage, useToast } from 'wot-design-uni'
|
||||
import { getProcessDefinition } from '@/api/bpm/definition'
|
||||
import { createLeave } from '@/api/bpm/oa/leave'
|
||||
import { getApprovalDetail } from '@/api/bpm/processInstance'
|
||||
import { getIntDictOptions } from '@/hooks/useDict'
|
||||
import ProcessInstanceTimeline from '@/pages-bpm/processInstance/detail/components/time-line.vue'
|
||||
import { navigateBackPlus } from '@/utils'
|
||||
import { BpmCandidateStrategyEnum, BpmNodeIdEnum, DICT_TYPE } from '@/utils/constants'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
const message = useMessage()
|
||||
const formLoading = ref(false)
|
||||
const processTimeLineLoading = ref(false) // 流程预览加载状态
|
||||
|
||||
// 流程相关数据
|
||||
const processDefineKey = 'oa_leave' // 流程定义 Key
|
||||
const processDefinitionId = ref('')
|
||||
const activityNodes = ref<ApprovalNodeInfo[]>([]) // 审批节点信息
|
||||
const startUserSelectTasks = ref<any[]>([]) // 发起人需要选择审批人的用户任务列表
|
||||
const startUserSelectAssignees = ref<any>({}) // 发起人选择审批人的数据
|
||||
const tempStartUserSelectAssignees = ref<any>({}) // 临时保存的审批人数据
|
||||
|
||||
const formData = ref<Partial<Leave>>({
|
||||
type: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
reason: undefined,
|
||||
})
|
||||
const formRules = {
|
||||
type: [{ required: true, message: '请选择请假类型' }],
|
||||
startTime: [{ required: true, message: '请选择开始时间' }],
|
||||
endTime: [{ required: true, message: '请选择结束时间' }],
|
||||
reason: [{ required: true, message: '请输入请假原因' }],
|
||||
}
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
// 计算请假天数
|
||||
const leaveDays = computed(() => {
|
||||
if (!formData.value.startTime || !formData.value.endTime) {
|
||||
return 0
|
||||
}
|
||||
const start = new Date(formData.value.startTime)
|
||||
const end = new Date(formData.value.endTime)
|
||||
return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
|
||||
})
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleBack() {
|
||||
message.confirm({
|
||||
title: '提示',
|
||||
msg: '确定要返回吗？请先保存您填写的信息！',
|
||||
}).then(({ action }) => {
|
||||
if (action === 'confirm') {
|
||||
navigateBackPlus('/pages-bpm/oa/leave/index')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取流程审批详情 */
|
||||
async function getProcessApprovalDetail() {
|
||||
if (!processDefinitionId.value) {
|
||||
return
|
||||
}
|
||||
|
||||
processTimeLineLoading.value = true
|
||||
try {
|
||||
const data = await getApprovalDetail({
|
||||
processDefinitionId: processDefinitionId.value,
|
||||
activityId: BpmNodeIdEnum.START_USER_NODE_ID,
|
||||
processVariablesStr: JSON.stringify({
|
||||
day: leaveDays.value,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!data) {
|
||||
toast.show('查询不到审批详情信息！')
|
||||
return
|
||||
}
|
||||
|
||||
// 获取审批节点，显示 Timeline 的数据
|
||||
activityNodes.value = data.activityNodes || []
|
||||
|
||||
// 获取发起人自选的任务
|
||||
startUserSelectTasks.value = data.activityNodes?.filter(
|
||||
(node: ApprovalNodeInfo) =>
|
||||
BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
|
||||
) || []
|
||||
|
||||
// 恢复之前的选择审批人
|
||||
if (startUserSelectTasks.value.length > 0) {
|
||||
for (const node of startUserSelectTasks.value) {
|
||||
startUserSelectAssignees.value[node.id]
|
||||
= tempStartUserSelectAssignees.value[node.id]
|
||||
&& tempStartUserSelectAssignees.value[node.id].length > 0
|
||||
? tempStartUserSelectAssignees.value[node.id]
|
||||
: []
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取流程审批详情失败:', error)
|
||||
} finally {
|
||||
processTimeLineLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 选择审批人确认 */
|
||||
function selectUserConfirm(id: string, userList: any[]) {
|
||||
startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id) || []
|
||||
}
|
||||
|
||||
/** 提交表单 */
|
||||
async function handleSubmit() {
|
||||
const { valid } = await formRef.value!.validate()
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
if (formData.value.startTime! >= formData.value.endTime!) {
|
||||
toast.show('结束时间必须大于开始时间')
|
||||
return
|
||||
}
|
||||
|
||||
// 校验指定审批人
|
||||
if (startUserSelectTasks.value.length > 0) {
|
||||
for (const userTask of startUserSelectTasks.value) {
|
||||
if (
|
||||
Array.isArray(startUserSelectAssignees.value[userTask.id])
|
||||
&& startUserSelectAssignees.value[userTask.id].length === 0
|
||||
) {
|
||||
toast.show(`请选择${userTask.name}的审批人`)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
formLoading.value = true
|
||||
try {
|
||||
const submitData = { ...formData.value }
|
||||
// 设置指定审批人
|
||||
if (startUserSelectTasks.value.length > 0) {
|
||||
submitData.startUserSelectAssignees = startUserSelectAssignees.value
|
||||
}
|
||||
|
||||
await createLeave(submitData)
|
||||
uni.showToast({ title: '提交成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
navigateBackPlus('/pages-bpm/oa/leave/index')
|
||||
}, 1500)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 监听表单数据变化，重新预测流程节点
|
||||
watch(
|
||||
() => [formData.value.startTime, formData.value.endTime, formData.value.type],
|
||||
(newValue, oldValue) => {
|
||||
if (!oldValue || !oldValue.some(v => v !== undefined)) {
|
||||
return
|
||||
}
|
||||
if (newValue && newValue.some(v => v !== undefined)) {
|
||||
// 记录之前的节点审批人
|
||||
tempStartUserSelectAssignees.value = { ...startUserSelectAssignees.value }
|
||||
startUserSelectAssignees.value = {}
|
||||
// 加载最新的审批详情，主要用于节点预测
|
||||
getProcessApprovalDetail()
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
// 组件初始化
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// 获取流程定义详情
|
||||
const processDefinitionDetail = await getProcessDefinition(undefined, processDefineKey)
|
||||
if (!processDefinitionDetail) {
|
||||
toast.show('OA 请假的流程模型未配置，请检查！')
|
||||
return
|
||||
}
|
||||
processDefinitionId.value = processDefinitionDetail.id
|
||||
|
||||
// 获取流程审批详情
|
||||
await getProcessApprovalDetail()
|
||||
} catch (error) {
|
||||
console.error('初始化流程失败:', error)
|
||||
toast.show('初始化流程失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
76
src/pages-bpm/oa/leave/detail/index.vue
Normal file
76
src/pages-bpm/oa/leave/detail/index.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<view :class="embedded ? '' : 'yd-page-container'">
|
||||
<!-- 顶部导航栏（仅路由访问时显示） -->
|
||||
<wd-navbar
|
||||
v-if="!embedded"
|
||||
title="请假详情"
|
||||
left-arrow placeholder safe-area-inset-top fixed
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<!-- 详情内容 -->
|
||||
<view>
|
||||
<wd-cell-group :border="!embedded">
|
||||
<wd-cell title="请假类型">
|
||||
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="formData.type" />
|
||||
</wd-cell>
|
||||
<wd-cell title="开始时间" :value="formatDateTime(formData.startTime) || '-'" />
|
||||
<wd-cell title="结束时间" :value="formatDateTime(formData.endTime) || '-'" />
|
||||
<wd-cell title="请假原因" :value="formData.reason || '-'" />
|
||||
<wd-cell title="审批状态">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="formData.status" />
|
||||
</wd-cell>
|
||||
<wd-cell title="创建时间" :value="formatDateTime(formData.createTime) || '-'" />
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Leave } from '@/api/bpm/oa/leave'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
import { getLeave } from '@/api/bpm/oa/leave'
|
||||
import { navigateBackPlus } from '@/utils'
|
||||
import { DICT_TYPE } from '@/utils/constants'
|
||||
import { formatDateTime } from '@/utils/date'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: number | string
|
||||
embedded?: boolean // 是否作为嵌入组件使用（非路由访问）
|
||||
}>()
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
const formData = ref<Partial<Leave>>({})
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleBack() {
|
||||
navigateBackPlus('/pages-bpm/oa/leave/index')
|
||||
}
|
||||
|
||||
/** 获取详情数据 */
|
||||
async function getDetail() {
|
||||
if (!props.id) {
|
||||
toast.show('参数错误')
|
||||
return
|
||||
}
|
||||
try {
|
||||
toast.loading('加载中...')
|
||||
formData.value = await getLeave(Number(props.id))
|
||||
} finally {
|
||||
toast.close()
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getDetail()
|
||||
})
|
||||
</script>
|
||||
218
src/pages-bpm/oa/leave/index.vue
Normal file
218
src/pages-bpm/oa/leave/index.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view class="yd-page-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<wd-navbar
|
||||
title="请假列表"
|
||||
left-arrow placeholder safe-area-inset-top fixed
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<!-- 搜索组件 -->
|
||||
<LeaveSearchForm @search="handleSearch" @reset="handleReset" />
|
||||
|
||||
<view class="bpm-list">
|
||||
<!-- 请假列表 -->
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="bpm-card"
|
||||
@click="handleDetail(item)"
|
||||
>
|
||||
<view class="bpm-card-content">
|
||||
<view class="bpm-card-header">
|
||||
<view class="bpm-card-title">
|
||||
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="item.type" />
|
||||
</view>
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="item.status" />
|
||||
</view>
|
||||
<view class="bpm-summary">
|
||||
<view class="bpm-summary-item">
|
||||
<text class="text-[#999]">开始时间：</text>
|
||||
<text>{{ formatDateTime(item.startTime) }}</text>
|
||||
</view>
|
||||
<view class="bpm-summary-item">
|
||||
<text class="text-[#999]">结束时间：</text>
|
||||
<text>{{ formatDateTime(item.endTime) }}</text>
|
||||
</view>
|
||||
<view class="bpm-summary-item">
|
||||
<text class="text-[#999]">请假原因：</text>
|
||||
<text>{{ item.reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bpm-card-info">
|
||||
<view class="bpm-user">
|
||||
<view class="bpm-avatar">
|
||||
{{ userNickname?.[0] }}
|
||||
</view>
|
||||
<text class="bpm-nickname">{{ userNickname }}</text>
|
||||
</view>
|
||||
<text class="bpm-time">{{ formatDateTime(item.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bpm-actions">
|
||||
<view class="bpm-action-btn" @click.stop="handleDetail(item)">
|
||||
<wd-icon name="view" size="32rpx" />
|
||||
<text class="ml-8rpx">详情</text>
|
||||
</view>
|
||||
<view class="bpm-action-btn" @click.stop="handleProgress(item)">
|
||||
<wd-icon name="queue" size="32rpx" />
|
||||
<text class="ml-8rpx">审批进度</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="item.status === BpmProcessInstanceStatus.RUNNING"
|
||||
class="bpm-action-btn text-[#ff4d4f]!"
|
||||
@click.stop="handleCancel(item)"
|
||||
>
|
||||
<wd-icon name="close" size="32rpx" color="#ff4d4f" />
|
||||
<text class="ml-8rpx">取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view v-if="loadMoreState !== 'loading' && list.length === 0" class="bpm-empty">
|
||||
<wd-status-tip image="content" tip="暂无请假记录" />
|
||||
</view>
|
||||
<wd-loadmore
|
||||
v-if="list.length > 0"
|
||||
:state="loadMoreState"
|
||||
@reload="loadMore"
|
||||
/>
|
||||
|
||||
<!-- 新增按钮 -->
|
||||
<wd-fab
|
||||
position="right-bottom"
|
||||
type="primary"
|
||||
:expandable="false"
|
||||
@click="handleCreate"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Leave } from '@/api/bpm/oa/leave'
|
||||
import type { LoadMoreState } from '@/http/types'
|
||||
import { onReachBottom } from '@dcloudio/uni-app'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { getLeavePage } from '@/api/bpm/oa/leave'
|
||||
import { cancelProcessInstanceByStartUser } from '@/api/bpm/processInstance'
|
||||
import { useUserStore } from '@/store'
|
||||
import { navigateBackPlus } from '@/utils'
|
||||
import { BpmProcessInstanceStatus, DICT_TYPE } from '@/utils/constants'
|
||||
import { formatDateTime } from '@/utils/date'
|
||||
import LeaveSearchForm from './components/search-form.vue'
|
||||
import '@/pages/bpm/styles/index.scss'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const userNickname = computed(() => userStore.userInfo?.nickname || '')
|
||||
|
||||
const total = ref(0)
|
||||
const list = ref<Leave[]>([])
|
||||
const loadMoreState = ref<LoadMoreState>('loading')
|
||||
|
||||
const queryParams = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleBack() {
|
||||
navigateBackPlus()
|
||||
}
|
||||
|
||||
/** 查询列表 */
|
||||
async function getList() {
|
||||
loadMoreState.value = 'loading'
|
||||
try {
|
||||
const data = await getLeavePage(queryParams.value)
|
||||
list.value = [...list.value, ...data.list]
|
||||
total.value = data.total
|
||||
loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
|
||||
} catch {
|
||||
queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
|
||||
loadMoreState.value = 'error'
|
||||
}
|
||||
}
|
||||
|
||||
/** 加载更多 */
|
||||
function loadMore() {
|
||||
if (loadMoreState.value === 'finished') {
|
||||
return
|
||||
}
|
||||
queryParams.value.pageNo++
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 搜索 */
|
||||
function handleSearch(data?: Record<string, any>) {
|
||||
queryParams.value = {
|
||||
...data,
|
||||
pageNo: 1,
|
||||
pageSize: queryParams.value.pageSize,
|
||||
}
|
||||
list.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置 */
|
||||
function handleReset() {
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
function handleDetail(item: Leave) {
|
||||
uni.navigateTo({ url: `/pages-bpm/oa/leave/detail/index?id=${item.id}` })
|
||||
}
|
||||
|
||||
/** 审批进度 */
|
||||
function handleProgress(item: Leave) {
|
||||
uni.navigateTo({ url: `/pages-bpm/processInstance/detail/index?id=${item.processInstanceId}` })
|
||||
}
|
||||
|
||||
/** 取消请假 */
|
||||
function handleCancel(item: Leave) {
|
||||
uni.showModal({
|
||||
title: '取消流程',
|
||||
editable: true,
|
||||
placeholderText: '请输入取消原因',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) {
|
||||
return
|
||||
}
|
||||
const reason = res.content?.trim()
|
||||
if (!reason) {
|
||||
uni.showToast({ title: '请输入取消原因', icon: 'none' })
|
||||
return
|
||||
}
|
||||
await cancelProcessInstanceByStartUser(String(item.processInstanceId), reason)
|
||||
// 更新状态
|
||||
uni.showToast({ title: '取消成功', icon: 'success' })
|
||||
item.status = BpmProcessInstanceStatus.CANCEL
|
||||
item.endTime = new Date()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 发起请假 */
|
||||
function handleCreate() {
|
||||
uni.navigateTo({ url: '/pages-bpm/oa/leave/create/index' })
|
||||
}
|
||||
|
||||
/** 触底加载更多 */
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
})
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user