im-uniapp/pages/workbench/hrm/apply/apply.vue

<template>
	<view class="page">
		<view class="card">
			<view class="card-title">基础信息</view>

			<view class="field">
				<text class="label">拨款类型<text class="req">*</text></text>
				<picker mode="selector" :range="appropriationTypes" @change="onAppropriationTypeChange">
					<view class="input-like clickable">{{ appropriationType || '请选择拨款类型' }}</view>
				</picker>
			</view>

			<view class="field">
				<text class="label">拨款金额<text class="req">*</text></text>
				<input class="input" type="text" :value="amount" placeholder="请输入金额" @input="onAmountInput" />
			</view>

			<view class="field">
				<text class="label">附件</text>
				<view class="input-like clickable" @tap="openFilePicker">点击上传附件</view>
				<view v-if="uploadedFiles.length" class="file-list">
					<view v-for="(file, idx) in uploadedFiles" :key="file.ossId || file.url || idx" class="file-item">
						<text class="file-name">{{ file.originalName || file.fileName || file.name || file.url }}</text>
						<text class="remove" @tap.stop="removeFile(idx)">删除</text>
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="card-title">说明</view>
			<view class="field">
				<text class="label">用途说明<text class="req">*</text></text>
				<textarea v-model="reason" class="textarea" placeholder="请说明拨款用途与依据" />
			</view>
			<view class="field">
				<text class="label">备注</text>
				<textarea v-model="remark" class="textarea" placeholder="可选" />
			</view>
		</view>

		<view class="card">
			<button class="btn primary" :loading="submitting" @tap="submit">提交申请</button>
		</view>

		<x-file-picker ref="globalFilePicker" @select="onGlobalFileSelect" />
	</view>
</template>

<script>
import { addAppropriationReq } from '@/api/hrm/appropriation'
import { uploadFile } from '@/api/common/upload'
import XFilePicker from '@/components/x-native-uploader/x-file-picker.vue'

export default {
	components: { XFilePicker },
	data() {
		return {
			appropriationTypes: ['项目拨款', '部门拨款', '专项拨款', '备用金拨款', '其他'],
			appropriationType: '',
			amount: '',
			reason: '',
			remark: '',
			accessoryApplyIds: '',
			uploadedFiles: [],
			submitting: false
		}
	},
	methods: {
		onAppropriationTypeChange(e) {
			var idx = Number(e.detail.value)
			this.appropriationType = this.appropriationTypes[idx] || ''
		},
		onAmountInput(e) {
			this.amount = e.detail.value
		},
		openFilePicker() {
			var picker = this.$refs.globalFilePicker
			if (picker && picker.open) picker.open()
		},
		async onGlobalFileSelect(payload) {
			var files = Array.isArray(payload) ? payload : [payload]
			for (var i = 0; i < files.length; i++) {
				var f = files[i]
				if (!f) continue
				try {
					var uploaded = await uploadFile({
						path: f.path || f.url || '',
						name: f.name || f.fileName || 'file',
						size: f.size || 0,
						type: f.type || ''
					})
					this.uploadedFiles.push({
						name: uploaded.fileName || f.name || f.fileName || 'file',
						fileName: uploaded.fileName || f.fileName || f.name || '',
						originalName: f.name || f.fileName || uploaded.fileName || '',
						url: uploaded.url || f.path || f.url || '',
						ossId: uploaded.ossId || uploaded.url || f.path || f.url || ''
					})
				} catch (e) {
					uni.showToast({ title: e.message || '上传失败', icon: 'none' })
				}
			}
			this.syncFileIds()
		},
		removeFile(idx) {
			this.uploadedFiles.splice(idx, 1)
			this.syncFileIds()
		},
		syncFileIds() {
			this.accessoryApplyIds = this.uploadedFiles.map(function (f) { return f.ossId }).join(',')
		},
		async submit() {
			if (!this.appropriationType) return uni.showToast({ title: '请选择拨款类型', icon: 'none' })
			if (!this.amount) return uni.showToast({ title: '请输入拨款金额', icon: 'none' })
			if (!this.reason) return uni.showToast({ title: '请填写用途说明', icon: 'none' })
			this.submitting = true
			try {
				await addAppropriationReq({
					appropriationType: this.appropriationType,
					amount: this.amount,
					accessoryApplyIds: this.accessoryApplyIds,
					reason: this.reason,
					remark: this.remark,
					status: 'pending',
					bizType: 'appropriation'
				})
				uni.showToast({ title: '提交成功', icon: 'success' })
				setTimeout(() => uni.navigateBack({ delta: 1 }), 500)
			} catch (e) {
				uni.showToast({ title: e.message || '提交失败', icon: 'none' })
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

<style scoped>
.page{min-height:100vh;background:#f5f7fb;padding:24rpx;box-sizing:border-box}
.card{background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:20rpx}
.card-title{font-size:30rpx;font-weight:700;color:#111827;margin-bottom:16rpx}
.field{margin-bottom:18rpx}.label{display:block;margin-bottom:8rpx;font-size:24rpx;color:#6b7280}.req{color:#ef4444;margin-left:4rpx}.input-like,.input,.textarea{width:100%;box-sizing:border-box;border:1rpx solid #e5e7eb;border-radius:16rpx;background:#f9fafb;padding:20rpx;font-size:28rpx;color:#111827}.input{min-height:88rpx}.clickable{color:#111827}.textarea{min-height:160rpx}.file-list{margin-top:16rpx;display:flex;flex-direction:column;gap:12rpx}.file-item{display:flex;align-items:center;justify-content:space-between;padding:18rpx 18rpx;border-radius:16rpx;background:#f8fafc;border:1rpx solid #e5eefc}.file-name{flex:1;font-size:26rpx;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:16rpx}.remove{font-size:24rpx;color:#ef4444;flex-shrink:0}.btn.primary{width:100%;background:#1677ff;color:#fff;border-radius:16rpx}
</style>