You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
449 lines
9.9 KiB
449 lines
9.9 KiB
<template>
|
|
<view class="reim-add-page">
|
|
<view class="header-bar">
|
|
<view class="title">{{ pageTitle }}</view>
|
|
</view>
|
|
<view class="form-box">
|
|
<!-- 金额 -->
|
|
<view class="form-row">
|
|
<view class="label">报销金额</view>
|
|
<input class="input-amount" type="number" v-model="form.amount" placeholder="0.00"
|
|
:disabled="disabled" />
|
|
</view>
|
|
<!-- 描述 -->
|
|
<view class="form-row-top">
|
|
<view class="label">报销描述</view>
|
|
<textarea class="textarea" v-model="form.description" placeholder="请输入报销事由" :disabled="disabled" />
|
|
</view>
|
|
<!-- 附件 -->
|
|
<view class="form-row">
|
|
<view class="label">发票/收据</view>
|
|
<view class="file-upload-wrapper">
|
|
<view v-if="form.receipt_url" class="preview-box" @click="previewImage">
|
|
<image v-if="isImage(form.receipt_url)" :src="form.receipt_url" class="preview-img"
|
|
mode="aspectFit" />
|
|
<view v-else class="file-link">{{ getFileName(form.receipt_url) }}</view>
|
|
</view>
|
|
<button class="upload-btn" @click="chooseFile" :disabled="disabled">
|
|
{{ form.receipt_url ? '重新选择' : '选择附件' }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 审批流程提示 -->
|
|
<view class="form-box approval-info-section" v-if="!disabled && !form.id && approvalData.selectedConfig">
|
|
<view class="section-title">审批流程</view>
|
|
<view class="approval-info">
|
|
<view class="info-item">
|
|
<text class="info-label">当前配置：</text>
|
|
<text class="info-value">{{ approvalData.selectedConfig.config_name || '报销审批' }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">流程说明：</text>
|
|
<text class="info-value">{{ approvalData.selectedConfig.description || '报销审批流程' }}</text>
|
|
</view>
|
|
<view class="info-note">
|
|
<text>提交后将自动进入审批流程，请等待审批完成</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="save-btn-box" v-if="!disabled">
|
|
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit"
|
|
:loading="submitting">
|
|
{{ submitting ? '提交中...' : '提交' }}
|
|
</fui-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
import {
|
|
Api_url
|
|
} from "@/common/config.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
uploadUrl: `${Api_url}/uploadImage`,
|
|
pageTitle: '新增报销',
|
|
disabled: false,
|
|
submitting: false,
|
|
loadingApprovalConfigs: false,
|
|
form: {
|
|
id: null,
|
|
amount: '',
|
|
description: '',
|
|
receipt_url: '',
|
|
},
|
|
// 审批流程相关数据
|
|
approvalData: {
|
|
useApproval: true, // 固定启用审批流程
|
|
selectedConfig: null,
|
|
selectedIndex: 0
|
|
},
|
|
approvalConfigs: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.form.id = options.id;
|
|
this.fetchDetail(options.id);
|
|
} else {
|
|
// 新增报销时加载审批配置
|
|
this.loadApprovalConfigs();
|
|
}
|
|
},
|
|
methods: {
|
|
async fetchDetail(id) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
|
|
let res = await apiRoute.reimbursement_info({id:id})
|
|
let mockData = res.data
|
|
|
|
if (mockData.status !== 'pending') {
|
|
this.disabled = true;
|
|
this.pageTitle = '查看报销';
|
|
} else {
|
|
this.pageTitle = '编辑报销';
|
|
}
|
|
|
|
this.form.amount = mockData.amount;
|
|
this.form.description = mockData.description;
|
|
this.form.receipt_url = mockData.receipt_url;
|
|
uni.hideLoading();
|
|
},
|
|
chooseFile() {
|
|
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
const tempFilePath = res.tempFilePaths[0]
|
|
// 这里可以调用上传接口
|
|
this.uploadFilePromise(tempFilePath)
|
|
}
|
|
})
|
|
},
|
|
uploadFilePromise(url) {
|
|
let token = uni.getStorageSync('token') || ''
|
|
let a = uni.uploadFile({
|
|
url: this.uploadUrl, //仅为示例，非真实的接口地址
|
|
filePath: url,
|
|
name: 'file',
|
|
header: {
|
|
'token': `${token}`, //请求头设置token
|
|
},
|
|
success: (e) => {
|
|
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}")
|
|
|
|
if (res.code == 1) {
|
|
this.form.receipt_url = res.data.url
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
});
|
|
},
|
|
isImage(url) {
|
|
if (!url) return false;
|
|
return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url);
|
|
},
|
|
getFileName(path) {
|
|
if (!path) return '';
|
|
return path.split('/').pop();
|
|
},
|
|
previewImage() {
|
|
if (this.form.receipt_url && this.isImage(this.form.receipt_url)) {
|
|
uni.previewImage({
|
|
urls: [this.form.receipt_url]
|
|
});
|
|
}
|
|
},
|
|
// 加载审批配置
|
|
async loadApprovalConfigs() {
|
|
this.loadingApprovalConfigs = true;
|
|
try {
|
|
const response = await apiRoute.reimbursementApprovalConfigs({
|
|
business_type: 'expense_approval'
|
|
})
|
|
if (response.code === 1) {
|
|
this.approvalConfigs = response.data || []
|
|
// 自动选择第一个可用的审批配置
|
|
if (this.approvalConfigs.length > 0) {
|
|
this.approvalData.selectedConfig = this.approvalConfigs[0]
|
|
this.approvalData.selectedIndex = 0
|
|
}
|
|
console.log('审批配置加载成功:', this.approvalConfigs)
|
|
} else {
|
|
console.error('审批配置加载失败:', response.msg)
|
|
// 设置默认配置避免阻塞提交
|
|
this.approvalData.selectedConfig = {
|
|
id: 0,
|
|
config_name: '报销审批',
|
|
description: '报销审批流程',
|
|
business_type: 'expense_approval'
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('加载审批配置失败:', error)
|
|
// 网络错误时也设置默认配置
|
|
this.approvalData.selectedConfig = {
|
|
id: 0,
|
|
config_name: '报销审批',
|
|
description: '报销审批流程',
|
|
business_type: 'expense_approval'
|
|
}
|
|
} finally {
|
|
this.loadingApprovalConfigs = false;
|
|
}
|
|
},
|
|
|
|
|
|
async submit() {
|
|
// 表单验证
|
|
if (!this.form.amount || !this.form.description) {
|
|
uni.showToast({
|
|
title: '请填写完整',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 验证金额格式
|
|
if (parseFloat(this.form.amount) <= 0) {
|
|
uni.showToast({
|
|
title: '请输入正确的报销金额',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 确保有可用的审批配置
|
|
if (!this.approvalData.selectedConfig) {
|
|
uni.showToast({
|
|
title: '审批配置加载失败，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.submitting = true;
|
|
|
|
try {
|
|
// 准备提交数据
|
|
const submitData = {
|
|
...this.form,
|
|
use_approval: true, // 固定为true
|
|
approval_config_id: this.approvalData.selectedConfig.id
|
|
};
|
|
|
|
console.log('提交报销数据:', submitData);
|
|
|
|
let response;
|
|
if (this.form.id) {
|
|
// 编辑模式，使用普通接口
|
|
response = await apiRoute.reimbursement_add(submitData);
|
|
} else {
|
|
// 新增模式，固定使用审批接口
|
|
response = await apiRoute.reimbursement_add_with_approval(submitData);
|
|
}
|
|
|
|
if (response.code === 1) {
|
|
uni.showToast({
|
|
title: '报销申请已提交，等待审批',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 2000);
|
|
} else {
|
|
uni.showToast({
|
|
title: response.msg || '提交失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('提交报销失败:', error);
|
|
uni.showToast({
|
|
title: '网络错误，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
} finally {
|
|
this.submitting = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.reim-add-page {
|
|
min-height: 100vh;
|
|
background: #292929;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.header-bar {
|
|
padding: 32rpx;
|
|
|
|
.title {
|
|
font-size: 44rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.form-box {
|
|
margin: 0 32rpx;
|
|
background: #434544;
|
|
border-radius: 18rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.form-row,
|
|
.form-row-top {
|
|
display: flex;
|
|
padding: 32rpx 0;
|
|
border-bottom: 1rpx solid #3a3a3a;
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.form-row {
|
|
align-items: center;
|
|
}
|
|
|
|
.form-row-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.label {
|
|
color: #aaa;
|
|
font-size: 28rpx;
|
|
width: 180rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.input-amount {
|
|
flex: 1;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.textarea {
|
|
flex: 1;
|
|
height: 180rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.file-upload-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.upload-btn {
|
|
background: #24BA9F;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8rpx;
|
|
padding: 0 32rpx;
|
|
line-height: 64rpx;
|
|
height: 64rpx;
|
|
font-size: 26rpx;
|
|
margin: 0;
|
|
}
|
|
|
|
.preview-box {
|
|
.preview-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 8rpx;
|
|
background: #222;
|
|
border: 1rpx solid #333;
|
|
}
|
|
|
|
.file-link {
|
|
color: #24BA9F;
|
|
font-size: 26rpx;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.save-btn-box {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
background: #292929;
|
|
padding: 20rpx 40rpx 40rpx 40rpx;
|
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/* 审批流程样式 */
|
|
.approval-info-section {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin-bottom: 32rpx;
|
|
padding-left: 16rpx;
|
|
border-left: 6rpx solid #24BA9F;
|
|
}
|
|
|
|
.approval-info {
|
|
margin-top: 24rpx;
|
|
padding: 24rpx;
|
|
background: #3a3a3a;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.approval-info .info-item {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.approval-info .info-label {
|
|
color: #aaa;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.approval-info .info-value {
|
|
color: #24BA9F;
|
|
font-size: 26rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.approval-info .info-note {
|
|
padding: 16rpx;
|
|
background: #2a2a2a;
|
|
border-radius: 8rpx;
|
|
border-left: 4rpx solid #24BA9F;
|
|
}
|
|
|
|
.approval-info .info-note text {
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
}
|
|
</style>
|