feat: 同步报销流程与工作台改动
This commit is contained in:
caoxiaozhu
211
web/src/components/business/PersonalWorkbenchProgressPanel.vue
Normal file
211
web/src/components/business/PersonalWorkbenchProgressPanel.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<article class="panel workbench-card progress-panel" style="--delay: 200ms;">
|
||||
<div class="section-head progress-section-head">
|
||||
<h2>单据进度</h2>
|
||||
<div
|
||||
class="progress-range-control"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
@pointerdown.stop
|
||||
>
|
||||
<EnterpriseSelect
|
||||
v-model="selectedProgressRange"
|
||||
class="progress-range-select"
|
||||
:options="PROGRESS_RANGE_OPTIONS"
|
||||
size="small"
|
||||
:teleported="true"
|
||||
aria-label="单据进度时间范围"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="visibleProgressItems.length" class="progress-table-shell">
|
||||
<div class="progress-table-header" aria-hidden="true">
|
||||
<span class="header-cell header-time">更新时间</span>
|
||||
<span class="header-cell header-applicant">提单人</span>
|
||||
<span class="header-cell header-identity">单据信息</span>
|
||||
<span class="header-cell header-type">类型归属</span>
|
||||
<span class="header-cell header-steps">办理进度</span>
|
||||
<span class="header-cell header-result">涉及金额</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-list">
|
||||
<button
|
||||
v-for="(item, index) in visibleProgressItems"
|
||||
:key="`${item.id}-${index}`"
|
||||
type="button"
|
||||
class="progress-row"
|
||||
:style="{ '--item-index': index }"
|
||||
@click="handleProgressItemClick($event, item)"
|
||||
>
|
||||
<span class="progress-time-wrapper">
|
||||
<span class="expense-type-icon" :class="`expense-type-icon--${item.expenseTypeTone}`">
|
||||
<i :class="item.expenseTypeIcon"></i>
|
||||
</span>
|
||||
<span class="progress-time">
|
||||
<time :datetime="item.updatedAt || ''">{{ item.displayTime }}</time>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="progress-applicant" title="申请人">
|
||||
<strong>{{ item.applicantLabel || '待补充' }}</strong>
|
||||
</span>
|
||||
|
||||
<span class="progress-identity">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<small>{{ item.id }}</small>
|
||||
</span>
|
||||
|
||||
<span class="progress-type" :title="`${item.documentTypeLabel} · ${item.expenseTypeLabel || '其他费用'}`">
|
||||
<strong>{{ item.documentTypeLabel }} · {{ item.expenseTypeLabel || '其他费用' }}</strong>
|
||||
</span>
|
||||
|
||||
<span class="progress-steps" aria-hidden="true">
|
||||
<span
|
||||
v-for="step in item.steps"
|
||||
:key="step.label"
|
||||
class="progress-step"
|
||||
:class="{
|
||||
'is-done': step.done,
|
||||
'is-current': step.current,
|
||||
'is-future': !step.done && !step.current
|
||||
}"
|
||||
>
|
||||
<i :class="step.done || step.current ? 'mdi mdi-check' : 'mdi mdi-minus'"></i>
|
||||
<small>{{ step.label }}</small>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="progress-result">
|
||||
<strong>{{ item.amount }}</strong>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="progress-empty-state" role="status">
|
||||
<span class="progress-empty-icon" aria-hidden="true">
|
||||
<i class="mdi mdi-file-document-search-outline"></i>
|
||||
</span>
|
||||
<strong>当前范围暂无单据</strong>
|
||||
<p>{{ progressRangeLabel }}内没有申请单或报销单进度。</p>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import EnterpriseSelect from '../shared/EnterpriseSelect.vue'
|
||||
|
||||
const PROGRESS_RANGE_OPTIONS = Object.freeze([
|
||||
{ value: '10d', label: '近10日' },
|
||||
{ value: '30d', label: '近30日' },
|
||||
{ value: '3m', label: '近3个月' }
|
||||
])
|
||||
const DAY_MS = 24 * 60 * 60 * 1000
|
||||
|
||||
const props = defineProps({
|
||||
progressItems: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['open-target'])
|
||||
const selectedProgressRange = ref('30d')
|
||||
|
||||
const progressRangeLabel = computed(() =>
|
||||
PROGRESS_RANGE_OPTIONS.find((item) => item.value === selectedProgressRange.value)?.label || '近30日'
|
||||
)
|
||||
|
||||
const visibleProgressItems = computed(() => {
|
||||
const rows = Array.isArray(props.progressItems) ? props.progressItems : []
|
||||
return rows
|
||||
.filter((item) => isInSelectedProgressRange(item?.updatedAt))
|
||||
.map((item) => {
|
||||
const expenseStyle = resolveExpenseTypeStyle(item.expenseTypeLabel)
|
||||
return {
|
||||
...item,
|
||||
displayTime: formatProgressTime(item?.updatedAt),
|
||||
expenseTypeIcon: expenseStyle.icon,
|
||||
expenseTypeTone: expenseStyle.tone
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function resolveExpenseTypeStyle(label) {
|
||||
if (label === '差旅交通') return { icon: 'mdi mdi-airplane', tone: 'blue' }
|
||||
if (label === '业务招待') return { icon: 'mdi mdi-silverware-fork-knife', tone: 'amber' }
|
||||
if (label === '办公采购') return { icon: 'mdi mdi-cart-outline', tone: 'emerald' }
|
||||
if (label === '培训会议') return { icon: 'mdi mdi-projector', tone: 'violet' }
|
||||
if (label === '市场活动') return { icon: 'mdi mdi-bullhorn-outline', tone: 'cyan' }
|
||||
return { icon: 'mdi mdi-receipt-text-outline', tone: 'muted' }
|
||||
}
|
||||
|
||||
function formatProgressTime(value) {
|
||||
const text = String(value || '').trim()
|
||||
if (!text) {
|
||||
return '最近更新'
|
||||
}
|
||||
|
||||
const match = /^(\d{4})-(\d{2})-(\d{2})(?:[T\s](\d{2}):(\d{2}))?/.exec(text)
|
||||
if (match) {
|
||||
return match[4] ? `${match[2]}-${match[3]} ${match[4]}:${match[5]}` : `${match[2]}-${match[3]}`
|
||||
}
|
||||
|
||||
return text
|
||||
}
|
||||
|
||||
function parseProgressDate(value) {
|
||||
const text = String(value || '').trim()
|
||||
if (!text) {
|
||||
return null
|
||||
}
|
||||
|
||||
const localDateMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text)
|
||||
if (localDateMatch) {
|
||||
return new Date(
|
||||
Number(localDateMatch[1]),
|
||||
Number(localDateMatch[2]) - 1,
|
||||
Number(localDateMatch[3])
|
||||
)
|
||||
}
|
||||
|
||||
const date = new Date(text)
|
||||
return Number.isNaN(date.getTime()) ? null : date
|
||||
}
|
||||
|
||||
function resolveProgressRangeStart() {
|
||||
const start = new Date()
|
||||
start.setHours(0, 0, 0, 0)
|
||||
|
||||
if (selectedProgressRange.value === '10d') {
|
||||
start.setDate(start.getDate() - 10)
|
||||
return start
|
||||
}
|
||||
|
||||
if (selectedProgressRange.value === '3m') {
|
||||
start.setMonth(start.getMonth() - 3)
|
||||
return start
|
||||
}
|
||||
|
||||
start.setDate(start.getDate() - 30)
|
||||
return start
|
||||
}
|
||||
|
||||
function isInSelectedProgressRange(value) {
|
||||
const date = parseProgressDate(value)
|
||||
if (!date) {
|
||||
return true
|
||||
}
|
||||
|
||||
return date.getTime() >= resolveProgressRangeStart().getTime()
|
||||
}
|
||||
|
||||
function handleProgressItemClick(event, item) {
|
||||
const target = event?.target
|
||||
if (target?.closest?.('.progress-range-control, .enterprise-select-popper, .el-select-dropdown, .el-popper')) {
|
||||
return
|
||||
}
|
||||
emit('open-target', item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped src="../../assets/styles/components/personal-workbench-progress.css"></style>
|
||||
Reference in New Issue
Block a user