|
|
<template>
|
|
|
<view class="material-receipt-page">
|
|
|
<view class="header">
|
|
|
<view class="back" @click="goBack">
|
|
|
<text class="iconfont icon-xiangzuo"></text>
|
|
|
</view>
|
|
|
<view class="title">物资领用</view>
|
|
|
<view class="right"></view>
|
|
|
</view>
|
|
|
|
|
|
<view class="content">
|
|
|
<!-- 发起领用申请 -->
|
|
|
<view class="form-section">
|
|
|
<view class="form-title">发起领用申请</view>
|
|
|
<view class="form-content">
|
|
|
<view class="form-item">
|
|
|
<text class="label">物资名称：</text>
|
|
|
<select v-model="receiptForm.materialName">
|
|
|
<option v-for="material in materials" :key="material.id" :value="material.name">{{ material.name }}</option>
|
|
|
</select>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="label">领用数量：</text>
|
|
|
<input type="number" v-model="receiptForm.quantity" placeholder="请输入领用数量" />
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="label">领用用途：</text>
|
|
|
<textarea v-model="receiptForm.purpose" placeholder="请输入领用用途" maxlength="200"></textarea>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="label">领用人：</text>
|
|
|
<input type="text" v-model="receiptForm.applicant" placeholder="请输入领用人姓名" />
|
|
|
</view>
|
|
|
<view class="submit-btn" @click="submitReceipt">提交领用申请</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 领用记录 -->
|
|
|
<view class="record-section">
|
|
|
<view class="record-title">领用记录</view>
|
|
|
<view class="record-list">
|
|
|
<view class="record-item" v-for="(item, index) in receiptRecords" :key="index">
|
|
|
<view class="item-header">
|
|
|
<text class="material-name">{{ item.materialName }}</text>
|
|
|
<text class="receipt-status" :class="getStatusClass(item.status)">{{ item.status }}</text>
|
|
|
</view>
|
|
|
<view class="item-body">
|
|
|
<view class="info-item">
|
|
|
<text class="label">领用数量：</text>
|
|
|
<text class="value">{{ item.quantity }}件</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">领用用途：</text>
|
|
|
<text class="value">{{ item.purpose }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">领用人：</text>
|
|
|
<text class="value">{{ item.applicant }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">申请时间：</text>
|
|
|
<text class="value">{{ item.applyTime }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item-footer" v-if="item.status === '已审批'">
|
|
|
<view class="voucher-btn" @click="viewVoucher(item.id)">查看领用凭证</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
receiptForm: {
|
|
|
materialName: '',
|
|
|
quantity: '',
|
|
|
purpose: '',
|
|
|
applicant: ''
|
|
|
},
|
|
|
materials: [
|
|
|
{ id: 1, name: '维修耗材' },
|
|
|
{ id: 2, name: '办公用品' },
|
|
|
{ id: 3, name: '清洁用品' },
|
|
|
{ id: 4, name: '食材' }
|
|
|
],
|
|
|
receiptRecords: [
|
|
|
{ id: 1, materialName: '维修耗材', quantity: 10, purpose: '设备维修', applicant: '张三', status: '已审批', applyTime: '2026-03-07 10:00' },
|
|
|
{ id: 2, materialName: '办公用品', quantity: 5, purpose: '日常办公', applicant: '李四', status: '待审批', applyTime: '2026-03-07 09:30' },
|
|
|
{ id: 3, materialName: '清洁用品', quantity: 20, purpose: '公共区域清洁', applicant: '王五', status: '已拒绝', applyTime: '2026-03-06 16:00' }
|
|
|
]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
goBack() {
|
|
|
uni.navigateBack();
|
|
|
},
|
|
|
submitReceipt() {
|
|
|
if (!this.receiptForm.materialName || !this.receiptForm.quantity || !this.receiptForm.purpose || !this.receiptForm.applicant) {
|
|
|
uni.showToast({
|
|
|
title: '请填写完整信息',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 模拟提交领用申请
|
|
|
uni.showToast({
|
|
|
title: '领用申请提交成功',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
|
|
|
// 重置表单
|
|
|
setTimeout(() => {
|
|
|
this.receiptForm = {
|
|
|
materialName: '',
|
|
|
quantity: '',
|
|
|
purpose: '',
|
|
|
applicant: ''
|
|
|
};
|
|
|
},
|
|
|
1500);
|
|
|
},
|
|
|
viewVoucher(id) {
|
|
|
// 模拟查看领用凭证
|
|
|
uni.showModal({
|
|
|
title: '领用凭证',
|
|
|
content: '凭证编号：LP20260307001\n领用人：张三\n领用物资：维修耗材\n领用数量：10件\n审批状态：已审批',
|
|
|
showCancel: false
|
|
|
});
|
|
|
},
|
|
|
getStatusClass(status) {
|
|
|
if (status === '待审批') {
|
|
|
return 'status-pending';
|
|
|
} else if (status === '已审批') {
|
|
|
return 'status-approved';
|
|
|
} else if (status === '已拒绝') {
|
|
|
return 'status-rejected';
|
|
|
}
|
|
|
return '';
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.material-receipt-page {
|
|
|
.header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
height: 88rpx;
|
|
|
padding: 0 30rpx;
|
|
|
background-color: #409EFF;
|
|
|
color: #fff;
|
|
|
|
|
|
.back {
|
|
|
width: 60rpx;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 32rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
width: 60rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
padding: 30rpx;
|
|
|
|
|
|
.form-section {
|
|
|
background-color: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 30rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.form-title {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 30rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.form-content {
|
|
|
.form-item {
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
.label {
|
|
|
display: block;
|
|
|
font-size: 26rpx;
|
|
|
color: #333;
|
|
|
margin-bottom: 10rpx;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
width: 100%;
|
|
|
border: 1rpx solid #ddd;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
textarea {
|
|
|
height: 150rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.submit-btn {
|
|
|
height: 80rpx;
|
|
|
background-color: #409EFF;
|
|
|
color: #fff;
|
|
|
border-radius: 40rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
|
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.record-section {
|
|
|
background-color: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 30rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.record-title {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 30rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.record-list {
|
|
|
.record-item {
|
|
|
background-color: #f9f9f9;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.item-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 15rpx;
|
|
|
|
|
|
.material-name {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.receipt-status {
|
|
|
padding: 5rpx 15rpx;
|
|
|
border-radius: 15rpx;
|
|
|
font-size: 20rpx;
|
|
|
}
|
|
|
|
|
|
.status-pending {
|
|
|
background-color: #E6F7FF;
|
|
|
color: #409EFF;
|
|
|
}
|
|
|
|
|
|
.status-approved {
|
|
|
background-color: #F6FFED;
|
|
|
color: #52C41A;
|
|
|
}
|
|
|
|
|
|
.status-rejected {
|
|
|
background-color: #FFF1F0;
|
|
|
color: #FF4D4F;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-body {
|
|
|
margin-bottom: 15rpx;
|
|
|
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
.label {
|
|
|
width: 120rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
flex: 1;
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-footer {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
.voucher-btn {
|
|
|
padding: 8rpx 24rpx;
|
|
|
background-color: #409EFF;
|
|
|
color: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
font-size: 22rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
