113 lines
4.1 KiB
Vue
113 lines
4.1 KiB
Vue
<template>
|
||
<view class="page edge">
|
||
<fy-header title="待办审批" back />
|
||
<fy-scroll class="edge-scroll" @refresh="load">
|
||
<view v-if="!can" class="deny">当前账号没有审批或申请权限</view>
|
||
<view v-else>
|
||
<wd-tabs v-model="tab" slidable="always" @change="onTab">
|
||
<wd-tab v-for="t in tabs" :key="t.id" :title="t.title" :name="t.id" />
|
||
</wd-tabs>
|
||
<view v-if="loading" class="empty">
|
||
<wd-skeleton theme="paragraph" />
|
||
</view>
|
||
<wd-status-tip v-else-if="!rows.length" image="content" tip="暂无事项" />
|
||
<view v-for="r in rows" :key="r.no || r.id" class="card item" @click="open(r)">
|
||
<view class="main">
|
||
<text class="type">{{ r.typeLabel || r.type || '审批' }}</text>
|
||
<text class="t">{{ r.title || r.no }}</text>
|
||
<text class="s">{{ r.submitter || r.assigneeName || '' }}</text>
|
||
</view>
|
||
<wd-tag type="primary" plain>{{ statusText(r) }}</wd-tag>
|
||
<text class="arr">›</text>
|
||
</view>
|
||
</view>
|
||
</fy-scroll>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import FyHeader from '../../components/fy-header.vue'
|
||
import FyScroll from '../../components/fy-scroll.vue'
|
||
import { store } from '../../utils/store.js'
|
||
import { asList, flowStatus } from '../../utils/format.js'
|
||
import { oaGet } from '../../utils/api.js'
|
||
|
||
export default {
|
||
components: { FyHeader, FyScroll },
|
||
data() {
|
||
return {
|
||
tab: 'pending',
|
||
tabs: [
|
||
{ id: 'pending', title: '待处理' },
|
||
{ id: 'review', title: '我发起的' },
|
||
{ id: 'handled', title: '已处理' },
|
||
{ id: 'reviewed', title: '已审阅' }
|
||
],
|
||
rows: [],
|
||
loading: false
|
||
}
|
||
},
|
||
computed: {
|
||
can() { return store.can('personal', 'approve') || store.can('personal', 'apply') }
|
||
},
|
||
onLoad(q) {
|
||
if (q.tab) this.tab = q.tab
|
||
},
|
||
onShow() { if (this.can) this.load() },
|
||
methods: {
|
||
onTab(e) {
|
||
const id = (e && e.name) || this.tab
|
||
this.switchTab(id)
|
||
},
|
||
switchTab(id) {
|
||
this.tab = id
|
||
this.load()
|
||
},
|
||
async load() {
|
||
this.loading = true
|
||
try {
|
||
const page = await oaGet(`/workflow/requests?tab=${this.tab}&page=1&size=50`, store.token)
|
||
this.rows = asList(page && page.records ? page.records : page)
|
||
if (this.tab === 'pending') {
|
||
try {
|
||
const work = asList(await oaGet('/work-tasks?tab=pending', store.token)).map((t) => ({
|
||
...t, typeLabel: '工作协同', title: t.title, source: 'work'
|
||
}))
|
||
this.rows = [...this.rows, ...work]
|
||
} catch (_) {}
|
||
}
|
||
} catch (_) {
|
||
this.rows = []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
statusText(r) { return flowStatus(r && r.status) },
|
||
open(r) {
|
||
if (r.source === 'work' || r.taskId) {
|
||
uni.navigateTo({ url: '/pages/coop/detail?id=' + encodeURIComponent(r.id || r.taskId) })
|
||
return
|
||
}
|
||
uni.navigateTo({ url: '/pages/todo/detail?no=' + encodeURIComponent(r.no || r.id || '') })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tabs { white-space: nowrap; padding: 8rpx 20rpx 0; }
|
||
.tab { display: inline-block; font-size: 28rpx; color: #6B7280; padding: 18rpx 24rpx; }
|
||
.tab.on { color: #1677FF; font-weight: 650; border-bottom: 4rpx solid #1677FF; }
|
||
.item { margin: 16rpx 28rpx; padding: 24rpx; display: flex; align-items: center; }
|
||
.main { flex: 1; min-width: 0; }
|
||
.type { display: inline-block; font-size: 22rpx; color: #1677FF; background: #E8F1FF; border-radius: 8rpx; padding: 2rpx 10rpx; margin-bottom: 8rpx; }
|
||
.t { display: block; font-size: 28rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.s { display: block; font-size: 24rpx; color: #6B7280; margin-top: 6rpx; }
|
||
.arr { color: #C4C9D4; font-size: 32rpx; margin-left: 8rpx; }
|
||
.empty, .deny { padding: 80rpx 40rpx; text-align: center; color: #6B7280; }
|
||
.et { display: block; font-size: 30rpx; font-weight: 600; color: #111827; }
|
||
.es { display: block; font-size: 24rpx; margin-top: 8rpx; }
|
||
.sk { height: 28rpx; background: #E8ECF2; border-radius: 8rpx; margin: 0 auto 16rpx; width: 60%; }
|
||
.sk.short { width: 36%; }
|
||
</style>
|