feat(采购需求): 新增采购需求功能模块
添加采购需求管理功能,包括需求列表展示、新增、编辑、删除和完成操作 新增需求列表页面和API接口 添加剩余时间显示组件用于展示需求截止时间 更新工作台页面添加采购需求入口
This commit is contained in:
101
components/oa/oa-remind-time/index.vue
Normal file
101
components/oa/oa-remind-time/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user