记录增加状态字段

This commit is contained in:
lSun 2025-06-19 18:17:44 +08:00
parent 1a98acfc5a
commit ced2b5469a
2 changed files with 240 additions and 152 deletions

View File

@ -1,172 +1,219 @@
<template>
<view class="records-container">
<view
class="record-item"
v-for="(record, index) in records"
:key="index"
style="cursor: pointer"
>
<view class="record-header">
<text class="label">姓名</text>
<text class="value">{{ record.userName }}</text>
<!-- <text class="detail-link">详情</text> -->
</view>
<view class="record-content">
<view class="record-row">
<text class="label">休假类型</text>
<text class="value">{{ record.leaveType }}</text>
</view>
<view class="record-row">
<text class="label">休假开始时间</text>
<text class="value">{{ record.leaveStartDate }}</text>
</view>
<view class="record-row">
<text class="label">休假结束时间</text>
<text class="value">{{ record.leaveEndDate }}</text>
</view>
<view class="record-row">
<text class="label">休假时长</text>
<text class="value">{{ record.leaveDuration }}</text>
</view>
<view class="btn-container">
<text @tap="showDetail(record.uuid)">详情</text>
<text @tap="onEditData(record.uuid)" v-if="record.examineStatus == 3">
修改
</text>
<text
@tap="onDeleteData(record.uuid)"
v-if="record.examineStatus == 2 || record.examineStatus == 3"
>
删除
</text>
</view>
</view>
<view class="records-container">
<view
class="record-item"
v-for="(record, index) in records"
:key="index"
style="cursor: pointer"
>
<view class="record-header">
<text class="label">姓名</text>
<text class="value">{{ record.userName }}</text>
<!-- <text class="detail-link">详情</text> -->
</view>
<view class="record-content">
<view class="record-row">
<text class="label">休假类型</text>
<text class="value">{{ record.leaveType }}</text>
</view>
<!-- 新增的审批状态行 -->
<view class="record-row" style="position: relative;">
<view class="status-container">
<text class="value status-black" v-if="record.examineStatus==0">
审核中
</text>
<text class="value status-passed" v-if="record.examineStatus==1">
已通过
</text>
<text class="value status-rejected" v-if="record.examineStatus==2">
不通过
</text>
<text class="value status-rejected" v-if="record.examineStatus==3">
已撤回
</text>
</view>
</view>
<view class="record-row">
<text class="label">休假开始时间</text>
<text class="value">{{ record.leaveStartDate }}</text>
</view>
<view class="record-row">
<text class="label">休假结束时间</text>
<text class="value">{{ record.leaveEndDate }}</text>
</view>
<view class="record-row">
<text class="label">休假时长</text>
<text class="value">{{ record.leaveDuration }}</text>
</view>
<view class="btn-container">
<text @tap="showDetail(record.uuid)">详情</text>
<text @tap="onEditData(record.uuid)" v-if="record.examineStatus == 3">
修改
</text>
<text
@tap="onDeleteData(record.uuid)"
v-if="record.examineStatus == 2 || record.examineStatus == 3"
>
删除
</text>
</view>
</view>
</view>
</view>
</template>
<script>
import { listLeaveReporting, deleteHolidayByIdApi } from '@/api/stagger-holidays/index.js'
export default {
name: 'RecordList',
data() {
return {
records: [],
}
},
created() {
//
this.fetchRecords()
},
methods: {
fetchRecords() {
listLeaveReporting({ type: '轮休' }).then((response) => {
console.log('response轮休列表', response)
this.records = response.data
console.log('records', this.records)
})
},
import {listLeaveReporting, deleteHolidayByIdApi} from '@/api/stagger-holidays/index.js'
showDetail(id) {
console.log('id', id)
//
uni.navigateTo({
url: `/pages/stagger-holidays/details?uuid=${id}`,
})
},
//
onDeleteData(uuid) {
uni.showModal({
title: '温馨提示',
content: '是否确认删除该条数据?',
success: async (res) => {
if (res.confirm) {
const result = await deleteHolidayByIdApi({ uuid })
if (result.code === 200) {
uni.showToast({ title: '删除成功!', icon: 'none' })
this.fetchRecords()
}
}
},
})
},
//
onEditData(uuid) {
this.$emit('onEditData', uuid)
},
},
export default {
name: 'RecordList',
data() {
return {
records: [],
}
},
created() {
//
this.fetchRecords()
},
methods: {
fetchRecords() {
listLeaveReporting({type: '轮休'}).then((response) => {
console.log('response轮休列表', response)
this.records = response.data
console.log('records', this.records)
})
},
showDetail(id) {
console.log('id', id)
//
uni.navigateTo({
url: `/pages/stagger-holidays/details?uuid=${id}`,
})
},
//
onDeleteData(uuid) {
uni.showModal({
title: '温馨提示',
content: '是否确认删除该条数据?',
success: async (res) => {
if (res.confirm) {
const result = await deleteHolidayByIdApi({uuid})
if (result.code === 200) {
uni.showToast({title: '删除成功!', icon: 'none'})
this.fetchRecords()
}
}
},
})
},
//
onEditData(uuid) {
this.$emit('onEditData', uuid)
},
},
}
</script>
<style lang="scss">
.records-container {
padding: 20rpx;
}
.records-container {
padding: 20 rpx;
}
.record-item {
background: #fff;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
.record-item {
background: #fff;
border-radius: 12 rpx;
padding: 20 rpx;
margin-bottom: 20 rpx;
box-shadow: 0 2 rpx 4 rpx rgba(0, 0, 0, 0.1);
}
.record-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.record-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16 rpx;
}
.detail-link {
color: #007aff;
font-size: 28rpx;
}
.detail-link {
color: #007aff;
font-size: 28 rpx;
}
.record-row {
display: flex;
margin-bottom: 8rpx;
}
.record-row {
display: flex;
//margin-bottom: 8 rpx;
margin: 5rpx 0;
}
.label {
color: #666;
font-size: 28rpx;
width: 110px;
}
.label {
color: #666;
font-size: 28 rpx;
width: 110px;
}
.value {
color: #333;
font-size: 28rpx;
flex: 1;
}
.value {
color: #333;
font-size: 28 rpx;
flex: 1;
}
.btn-container {
display: flex;
justify-content: space-around;
.btn-container {
display: flex;
justify-content: space-around;
text {
width: 30%;
height: 68rpx;
line-height: 68rpx;
text-align: center;
font-size: 28rpx;
border-radius: 4rpx;
}
text {
width: 30%;
height: 68 rpx;
line-height: 68 rpx;
text-align: center;
font-size: 28 rpx;
border-radius: 4 rpx;
}
& text:first-child {
border: 1px solid #4080ff;
color: #4080ff;
}
& text:nth-child(2) {
border: 1px solid #e6a23c;
color: #e6a23c;
}
& text:last-child {
border: 1px solid #f56c6c;
color: #f56c6c;
}
}
& text:first-child {
border: 1px solid #4080ff;
color: #4080ff;
}
& text:nth-child(2) {
border: 1px solid #e6a23c;
color: #e6a23c;
}
& text:last-child {
border: 1px solid #f56c6c;
color: #f56c6c;
}
}
.status-passed {
color: green;
font-size: 18px;
}
.status-rejected {
color: red;
font-size: 18px;
}
.status-black {
color: #FBC02D;
font-size: 18px;
}
.status-container {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
</style>

View File

@ -16,6 +16,25 @@
<text class="label">外出事由</text>
<text class="value">{{ record.leaveReason }}</text>
</view>
<!-- 新增的审批状态行 -->
<view class="record-row" style="position: relative;">
<view class="status-container">
<text class="value status-black" v-if="record.examineStatus==0">
审核中
</text>
<text class="value status-passed" v-if="record.examineStatus==1">
已通过
</text>
<text class="value status-rejected" v-if="record.examineStatus==2">
不通过
</text>
<text class="value status-rejected" v-if="record.examineStatus==3">
已撤回
</text>
</view>
</view>
<view class="record-row">
<text class="label">外出开始时间</text>
<text class="value">{{ record.leaveStartDate }}</text>
@ -128,7 +147,7 @@
.record-row {
display: flex;
margin-bottom: 8rpx;
margin: 5rpx 0;
}
.label {
@ -169,4 +188,26 @@
color: #f56c6c;
}
}
.status-passed {
color: green;
font-size: 18px !important;
}
.status-rejected {
color: red;
font-size: 18px !important;
}
.status-black {
color: #FBC02D;
font-size: 18px !important;
}
.status-container {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
</style>