140 lines
4.6 KiB
Vue
140 lines
4.6 KiB
Vue
<template>
|
|
<view class="detail-page" v-if="detail">
|
|
<view class="detail-hero" :class="'status-' + detail.tagType">
|
|
<van-nav-bar
|
|
title="业务详情"
|
|
left-arrow
|
|
:border="false"
|
|
@click-left="goBack"
|
|
/>
|
|
<view class="detail-hero-body">
|
|
<view class="type-line">
|
|
<text class="type-chip">{{ detail.typeLabel }}</text>
|
|
<text class="status-chip">{{ detail.status }}</text>
|
|
</view>
|
|
<view class="hero-title">{{ detail.title }}</view>
|
|
<view class="code">{{ detail.code }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-metric-dock">
|
|
<view class="detail-metric">
|
|
<text class="lab">{{ detail.amount ? '金额' : '进度' }}</text>
|
|
<text class="val" :class="{ money: !!detail.amount }">
|
|
{{ detail.amount ? '¥' + detail.amount : detail.progress || '—' }}
|
|
</text>
|
|
</view>
|
|
<view class="detail-metric">
|
|
<text class="lab">负责人</text>
|
|
<text class="val">{{ detail.owner }}</text>
|
|
</view>
|
|
<view class="detail-metric">
|
|
<text class="lab">更新时间</text>
|
|
<text class="val">{{ detail.time }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-body">
|
|
<view class="detail-section">
|
|
<view class="sec-hd"><text class="sec-title">基础信息</text></view>
|
|
<view class="kv-list">
|
|
<view class="kv-row"><text class="k">业务类型</text><text class="v">{{ detail.typeLabel }}</text></view>
|
|
<view class="kv-row"><text class="k">所属部门</text><text class="v">{{ detail.dept }}</text></view>
|
|
<view class="kv-row"><text class="k">客户/对象</text><text class="v">{{ detail.customer }}</text></view>
|
|
<view class="kv-row"><text class="k">创建时间</text><text class="v">{{ detail.createdAt }}</text></view>
|
|
</view>
|
|
<view class="detail-note">{{ detail.desc }}</view>
|
|
</view>
|
|
|
|
<view class="detail-section">
|
|
<view class="sec-hd"><text class="sec-title">业务进度</text></view>
|
|
<van-steps :active="detail.stepActive" active-color="#22c55e">
|
|
<van-step v-for="s in detail.steps" :key="s">{{ s }}</van-step>
|
|
</van-steps>
|
|
</view>
|
|
|
|
<view class="detail-section" v-if="detail.payments && detail.payments.length">
|
|
<view class="sec-hd">
|
|
<text class="sec-title">缴费明细</text>
|
|
<text class="sec-more">全部</text>
|
|
</view>
|
|
<view v-for="p in detail.payments" :key="p.id" class="pay-row">
|
|
<view>
|
|
<view class="name">{{ p.name }}</view>
|
|
<view class="sub">{{ p.sub }}</view>
|
|
</view>
|
|
<view>
|
|
<view class="amt">¥{{ p.amount }}</view>
|
|
<van-tag :type="p.tagType" plain>{{ p.status }}</van-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-section">
|
|
<view class="sec-hd">
|
|
<text class="sec-title">附件</text>
|
|
<text class="hint">{{ (detail.attachments || []).length }} 个文件</text>
|
|
</view>
|
|
<AttachList
|
|
:files="detail.attachments || []"
|
|
@upload="toast('上传附件')"
|
|
@preview="onPreview"
|
|
@download="onDownload"
|
|
/>
|
|
</view>
|
|
|
|
<view class="detail-section">
|
|
<view class="sec-hd">
|
|
<text class="sec-title">流转记录</text>
|
|
<text class="hint">{{ (detail.logs || []).length }} 步</text>
|
|
</view>
|
|
<FlowTimeline :logs="detail.logs || []" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-footer">
|
|
<van-button class="btn-flex" plain hairline type="default" @click="goBack">返回</van-button>
|
|
<van-button class="btn-flex" type="primary" color="#22c55e" round @click="goEdit">
|
|
编辑处理
|
|
</van-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AttachList from '../../components/AttachList.vue'
|
|
import FlowTimeline from '../../components/FlowTimeline.vue'
|
|
import { getById } from '../../utils/biz-mock.js'
|
|
|
|
export default {
|
|
components: { AttachList, FlowTimeline },
|
|
data() {
|
|
return { detail: null }
|
|
},
|
|
onLoad(query) {
|
|
this.detail = getById(query.id)
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack({
|
|
fail: () => uni.reLaunch({ url: '/pages/demo/list' })
|
|
})
|
|
},
|
|
goEdit() {
|
|
uni.navigateTo({
|
|
url: `/pages/demo/form?mode=edit&id=${this.detail.id}`
|
|
})
|
|
},
|
|
toast(msg) {
|
|
uni.showToast({ title: msg, icon: 'none' })
|
|
},
|
|
onPreview(a) {
|
|
this.toast('预览 ' + a.name)
|
|
},
|
|
onDownload(a) {
|
|
this.toast('下载 ' + a.name)
|
|
}
|
|
}
|
|
}
|
|
</script>
|