优化报销功能
This commit is contained in:
hero920103 committed
1 parent
395c7f717e
commit
4306cbd74b
19 files changed
+2059
-534
No files matched your search
@@ -47,43 +47,33 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 审批流程时间线 -->
|
||||
<!-- 审批流程 -->
|
||||
<view class="card">
|
||||
<text class="card-title">审批流程</text>
|
||||
<view v-if="!timeline.length" class="timeline-empty">暂无流程节点</view>
|
||||
<view v-else class="timeline-list">
|
||||
<view
|
||||
v-for="(task, idx) in timeline"
|
||||
:key="task.id || idx"
|
||||
class="timeline-item"
|
||||
:class="{ current: task.is_current }"
|
||||
:key="`${task.node_key || 'node'}-${idx}`"
|
||||
class="tl-item"
|
||||
:class="{ current: task.is_current, edge: task.node_type === 1 || task.node_type === 3 }"
|
||||
>
|
||||
<view class="timeline-dot">
|
||||
<view class="dot-inner" :class="dotClass(task)"></view>
|
||||
<view class="tl-rail">
|
||||
<view class="tl-avatar-wrap">
|
||||
<view class="tl-avatar" :class="avatarClass(task)">{{ avatarText(task) }}</view>
|
||||
<view class="tl-badge" :class="badgeClass(task)">{{ badgeIcon(task) }}</view>
|
||||
</view>
|
||||
<view v-if="idx !== timeline.length - 1" class="tl-line" />
|
||||
</view>
|
||||
<view class="timeline-content" v-if="idx === 0 || task.node_key !== timeline[idx - 1].node_key">
|
||||
<view class="timeline-head">
|
||||
<text class="node-name">{{ task.node_name || task.node_key }}</text>
|
||||
<u-tag
|
||||
:text="task.status_label || ''"
|
||||
:type="task.status_tag || 'info'"
|
||||
size="mini"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="task.is_current" class="timeline-row">
|
||||
<text class="node-meta current">当前节点 · 等待 {{ task.approver_name || '审批人' }} 处理</text>
|
||||
</view>
|
||||
<view v-else-if="task.status === 1" class="timeline-row">
|
||||
<text class="node-meta">{{ task.approver_name || '-' }} · 通过于 {{ task.finish_time }}</text>
|
||||
<text v-if="task.comment" class="node-comment">{{ task.comment }}</text>
|
||||
</view>
|
||||
<view v-else-if="task.status === 2" class="timeline-row">
|
||||
<text class="node-meta">{{ task.approver_name || '-' }} · 驳回于 {{ task.finish_time }}</text>
|
||||
<text v-if="task.comment" class="node-comment">{{ task.comment }}</text>
|
||||
</view>
|
||||
<view v-else class="timeline-row">
|
||||
<text class="node-meta">{{ task.approver_name || '-' }} · {{ task.finish_time || task.create_time }}</text>
|
||||
<view class="tl-main">
|
||||
<view class="tl-head">
|
||||
<view class="tl-title">
|
||||
<text class="tl-name">{{ nodeTitle(task) }}</text>
|
||||
<text v-if="nodeSub(task)" class="tl-sub">{{ nodeSub(task) }}</text>
|
||||
</view>
|
||||
<text class="tl-time">{{ nodeTime(task) }}</text>
|
||||
</view>
|
||||
<view v-if="task.comment" class="tl-comment">{{ task.comment }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -203,11 +193,50 @@ async function loadDetail(id) {
|
||||
}
|
||||
}
|
||||
|
||||
function dotClass(task) {
|
||||
if (task.is_current) return 'dot-running'
|
||||
if (task.status === 1) return 'dot-pass'
|
||||
if (task.status === 2) return 'dot-reject'
|
||||
return 'dot-default'
|
||||
/** 头像文字：取姓名字首字 */
|
||||
function avatarText(task) {
|
||||
const name = String(task.approver_name || '').trim()
|
||||
return name ? name.slice(0, 1) : '系'
|
||||
}
|
||||
|
||||
/** 头像底色：审批人蓝色，结束节点灰色 */
|
||||
function avatarClass(task) {
|
||||
return task.node_type === 3 ? 'avatar-end' : ''
|
||||
}
|
||||
|
||||
/** 状态角标配色：进行中橙 / 已通过绿 / 已驳回红 / 其它灰 */
|
||||
function badgeClass(task) {
|
||||
if (task.is_current) return 'badge-running'
|
||||
if (task.status === 1) return 'badge-pass'
|
||||
if (task.status === 2) return 'badge-reject'
|
||||
return 'badge-skip'
|
||||
}
|
||||
|
||||
function badgeIcon(task) {
|
||||
if (task.is_current) return '·'
|
||||
if (task.status === 1) return '✓'
|
||||
if (task.status === 2) return '✕'
|
||||
return '—'
|
||||
}
|
||||
|
||||
/** 主标题：申请人带「（申请人）」标识，末尾固定「流程结束」 */
|
||||
function nodeTitle(task) {
|
||||
if (task.node_type === 1) return `${task.approver_name || '发起人'}（申请人）`
|
||||
if (task.node_type === 3) return '流程结束'
|
||||
return task.approver_name || task.node_name || '审批节点'
|
||||
}
|
||||
|
||||
/** 副标题：部门/角色，缺失时回退节点名 */
|
||||
function nodeSub(task) {
|
||||
if (task.node_type === 1) return '提交申请'
|
||||
if (task.node_type === 3) return task.status_label || ''
|
||||
return task.approver_sub || task.node_name || '审批'
|
||||
}
|
||||
|
||||
/** 时间只展示到分钟，保持与设计稿一致的紧凑排版 */
|
||||
function nodeTime(task) {
|
||||
const value = task.finish_time || task.create_time || ''
|
||||
return value ? String(value).slice(0, 16) : ''
|
||||
}
|
||||
|
||||
function openApprove(pass) {
|
||||
@@ -338,10 +367,25 @@ async function doWithdraw() {
|
||||
|
||||
.card-title {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
margin-bottom: 18rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
/* 左侧蓝色竖条标识（与设计稿一致） */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 4rpx;
|
||||
background: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
@@ -375,112 +419,8 @@ async function doWithdraw() {
|
||||
padding: 16rpx 0 8rpx;
|
||||
}
|
||||
|
||||
.timeline-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
position: relative;
|
||||
padding-bottom: 18rpx;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 18rpx;
|
||||
top: 30rpx;
|
||||
bottom: 0;
|
||||
width: 2rpx;
|
||||
background: $color-divider;
|
||||
}
|
||||
|
||||
&.current {
|
||||
.node-name { color: $color-primary; }
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dot-inner {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background: $color-text-muted;
|
||||
|
||||
&.dot-default { background: $color-text-muted; }
|
||||
&.dot-pass { background: #16a34a; }
|
||||
&.dot-reject { background: #f04438; }
|
||||
&.dot-running {
|
||||
background: $color-primary;
|
||||
box-shadow: 0 0 0 8rpx rgba(37, 99, 235, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-top: 4rpx;
|
||||
}
|
||||
|
||||
.timeline-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
margin-bottom: 6rpx;
|
||||
|
||||
&:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
/* 节点头部：节点名 + 状态 tag 横排，tag 不要撑满 100% */
|
||||
.timeline-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 28rpx;
|
||||
color: $color-text;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.node-meta {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-muted;
|
||||
word-break: break-all;
|
||||
|
||||
&.current {
|
||||
color: $color-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.node-comment {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
background: $color-bg-page;
|
||||
padding: 10rpx 14rpx;
|
||||
border-radius: $radius-sm;
|
||||
margin-top: 6rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* 审批流时间线（公共 mixin，与报销详情的审批记录同一套样式） */
|
||||
@include flow-timeline;
|
||||
|
||||
.bottom-space {
|
||||
height: 40rpx;
|
||||
|
||||
+40
-154
@@ -15,19 +15,23 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态下拉面板 -->
|
||||
<view
|
||||
v-for="tab in statusTabs"
|
||||
:key="String(tab.value)"
|
||||
class="dropdown-option"
|
||||
:class="{ active: currentStatus === tab.value }"
|
||||
hover-class="dropdown-option-active"
|
||||
@tap="onStatusChange(tab.value)"
|
||||
>
|
||||
<text class="dropdown-option-text">{{ tab.label }}</text>
|
||||
<FaIcon v-if="currentStatus === tab.value" name="check" color="#2563eb" :size="14" />
|
||||
<!-- 状态筛选 -->
|
||||
<scroll-view class="tab-scroll" scroll-x :show-scrollbar="false">
|
||||
<view class="tab-list">
|
||||
<view
|
||||
v-for="tab in statusTabs"
|
||||
:key="String(tab.value)"
|
||||
class="tab-item"
|
||||
:class="{ active: currentStatus === tab.value }"
|
||||
@tap="onStatusChange(tab.value)"
|
||||
>
|
||||
<text>{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 说明：审批单据由各业务模块提交后进入此处，这里不提供新增 -->
|
||||
<text class="page-tip">审批由各业务模块提交后在此查看与处理</text>
|
||||
|
||||
<!-- 列表 -->
|
||||
<scroll-view class="list-scroll" scroll-y :show-scrollbar="false" @scrolltolower="loadMore">
|
||||
@@ -79,7 +83,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import {
|
||||
fetchApprovalList,
|
||||
@@ -104,68 +108,18 @@ const finished = ref(false)
|
||||
const keyword = ref('')
|
||||
const currentStatus = ref('')
|
||||
|
||||
/** 当前展开的下拉:'status' | '' */
|
||||
const openDropdown = ref('')
|
||||
|
||||
/** filter-bar 的底部坐标（用于下拉面板 fixed 定位） */
|
||||
const filterBarBottom = ref(0)
|
||||
|
||||
const bizTypes = ref([])
|
||||
|
||||
/** 当前状态下拉框展示文案 */
|
||||
const currentStatusLabel = computed(() => {
|
||||
const hit = statusTabs.find(s => s.value === currentStatus.value)
|
||||
return hit ? hit.label : '全部'
|
||||
})
|
||||
|
||||
/** 下拉面板顶部偏移（紧贴 filter-bar 底部 + 8px 间隙） */
|
||||
const panelTopStyle = computed(() => ({
|
||||
top: (filterBarBottom.value + 8) + 'px'
|
||||
}))
|
||||
|
||||
function toggleDropdown(name) {
|
||||
openDropdown.value = openDropdown.value === name ? '' : name
|
||||
if (openDropdown.value) {
|
||||
// 打开后下一帧再取位置（filter-bar 还未渲染完成则取到 0）
|
||||
nextTick(() => measureFilterBar())
|
||||
}
|
||||
}
|
||||
|
||||
function closeDropdown() {
|
||||
openDropdown.value = ''
|
||||
}
|
||||
|
||||
/** 动态获取 filter-bar 在视口中的底部坐标 */
|
||||
function measureFilterBar() {
|
||||
uni.createSelectorQuery()
|
||||
.select('.filter-bar')
|
||||
.boundingClientRect(rect => {
|
||||
if (rect && typeof rect.bottom === 'number') {
|
||||
filterBarBottom.value = Math.round(rect.bottom)
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoggedIn()) {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
refresh()
|
||||
// 取 filter-bar 位置供下拉面板定位用
|
||||
nextTick(() => measureFilterBar())
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isLoggedIn()) refresh()
|
||||
})
|
||||
|
||||
async function loadBizTypes() {
|
||||
// 类型筛选已移除，保留此函数以避免潜在依赖
|
||||
bizTypes.value = [{ value: '', label: '全部' }]
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
@@ -213,7 +167,6 @@ function clearKeyword() {
|
||||
|
||||
function onStatusChange(value) {
|
||||
currentStatus.value = value
|
||||
closeDropdown()
|
||||
refresh()
|
||||
}
|
||||
|
||||
@@ -268,107 +221,40 @@ function openDetail(id) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ====== 筛选条（顶部下拉触发器） ====== */
|
||||
.filter-bar {
|
||||
/* ====== 状态筛选 tab ====== */
|
||||
.tab-scroll {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 12rpx $page-padding-x;
|
||||
background: $color-card;
|
||||
}
|
||||
|
||||
.filter-trigger {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
height: 72rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: $radius-md;
|
||||
background: $color-bg-page;
|
||||
border: 1rpx solid transparent;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
|
||||
&.open {
|
||||
background: $color-primary-bg;
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-trigger-active {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
color: $color-text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 26rpx;
|
||||
color: $color-text;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-trigger.open .filter-value {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
/* ====== 下拉面板 ====== */
|
||||
.dropdown-mask {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: transparent;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.dropdown-panel {
|
||||
position: absolute;
|
||||
left: $page-padding-x;
|
||||
right: $page-padding-x;
|
||||
background: $color-card;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.16);
|
||||
z-index: 60;
|
||||
max-height: 480rpx;
|
||||
overflow-y: auto;
|
||||
padding: 8rpx 0;
|
||||
padding: 0 $page-padding-x 12rpx;
|
||||
}
|
||||
|
||||
.dropdown-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
color: $color-text;
|
||||
transition: background 0.15s;
|
||||
.tab-list {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx 0 4rpx;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 10rpx 28rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $color-bg-page;
|
||||
font-size: 26rpx;
|
||||
color: $color-text-secondary;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
&.active {
|
||||
color: $color-primary;
|
||||
background: $color-primary;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
background: $color-primary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-option-active {
|
||||
background: $color-bg-page;
|
||||
}
|
||||
|
||||
.dropdown-option-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.page-tip {
|
||||
display: block;
|
||||
padding: 12rpx $page-padding-x 0;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* ====== 列表 ====== */
|
||||
|
||||
Reference in new issue
Block a user