feat(采购需求): 新增采购需求功能模块

添加采购需求管理功能,包括需求列表展示、新增、编辑、删除和完成操作
新增需求列表页面和API接口
添加剩余时间显示组件用于展示需求截止时间
更新工作台页面添加采购需求入口
This commit is contained in:
砂糖
2025-11-07 14:21:27 +08:00
parent 750f66441b
commit b569e4fef8
7 changed files with 779 additions and 2 deletions

View File

@@ -0,0 +1,101 @@
<template>
<view class="remaining-time" :class="computedClass">
<uni-icons
:type="isExpired ? 'clock' : 'time'"
:size="14"
class="icon"
></uni-icons>
<text class="text">{{ displayText }}</text>
</view>
</template>
<script>
export default {
name: 'RemainingTime',
props: {
// 截至日期ISO格式'2025-12-31T23:59:59'
expireDate: {
type: String,
required: true,
validator(value) {
// 验证日期格式有效性
return !isNaN(Date.parse(value));
}
},
// 阈值天数(超过此值为绿色,否则红色)
thresholdDays: {
type: Number,
required: true,
default: 3,
validator(value) {
return value >= 0;
}
}
},
computed: {
// 计算剩余天数(负数表示逾期)
remainingDays() {
const now = new Date();
const expire = new Date(this.expireDate);
const diffTime = expire - now;
// 转换为天数并四舍五入
return Math.round(diffTime / (1000 * 60 * 60 * 24));
},
// 是否已逾期
isExpired() {
return this.remainingDays < 0;
},
// 显示文本
displayText() {
if (this.isExpired) {
return `已逾期 ${Math.abs(this.remainingDays)}`;
}
return `剩余 ${this.remainingDays}`;
},
// 计算样式类
computedClass() {
if (this.isExpired) {
return 'expired'; // 逾期状态
}
return this.remainingDays > this.thresholdDays
? 'normal' // 正常状态(超过阈值)
: 'warning'; // 警告状态(低于阈值)
}
}
};
</script>
<style scoped>
.remaining-time {
display: inline-flex;
align-items: center;
padding: 4rpx 12rpx;
border-radius: 20rpx;
font-size: 24rpx;
line-height: 1;
}
.icon {
margin-right: 8rpx;
}
.text {
font-weight: 500;
}
/* 正常状态(超过阈值) */
.normal {
color: #00b42a; /* 绿色 */
}
/* 警告状态(低于阈值) */
.warning {
color: #f53f3f; /* 红色 */
}
/* 逾期状态 */
.expired {
background-color: #fef0f0;
color: #f53f3f; /* 红色背景+红色文字 */
}
</style>