记录增加状态字段
This commit is contained in:
parent
1a98acfc5a
commit
ced2b5469a
|
|
@ -1,172 +1,219 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="records-container">
|
<view class="records-container">
|
||||||
<view
|
<view
|
||||||
class="record-item"
|
class="record-item"
|
||||||
v-for="(record, index) in records"
|
v-for="(record, index) in records"
|
||||||
:key="index"
|
:key="index"
|
||||||
style="cursor: pointer"
|
style="cursor: pointer"
|
||||||
>
|
>
|
||||||
<view class="record-header">
|
<view class="record-header">
|
||||||
<text class="label">姓名：</text>
|
<text class="label">姓名：</text>
|
||||||
<text class="value">{{ record.userName }}</text>
|
<text class="value">{{ record.userName }}</text>
|
||||||
<!-- <text class="detail-link">详情</text> -->
|
<!-- <text class="detail-link">详情</text> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="record-content">
|
<view class="record-content">
|
||||||
<view class="record-row">
|
<view class="record-row">
|
||||||
<text class="label">休假类型：</text>
|
<text class="label">休假类型：</text>
|
||||||
<text class="value">{{ record.leaveType }}</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>
|
</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>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listLeaveReporting, deleteHolidayByIdApi } from '@/api/stagger-holidays/index.js'
|
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)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
showDetail(id) {
|
export default {
|
||||||
console.log('id', id)
|
name: 'RecordList',
|
||||||
// 跳转到详情页面
|
data() {
|
||||||
uni.navigateTo({
|
return {
|
||||||
url: `/pages/stagger-holidays/details?uuid=${id}`,
|
records: [],
|
||||||
})
|
|
||||||
},
|
|
||||||
// 删除按钮
|
|
||||||
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)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.records-container {
|
.records-container {
|
||||||
padding: 20rpx;
|
padding: 20 rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-item {
|
.record-item {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 12rpx;
|
border-radius: 12 rpx;
|
||||||
padding: 20rpx;
|
padding: 20 rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20 rpx;
|
||||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2 rpx 4 rpx rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-header {
|
.record-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 16 rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-link {
|
.detail-link {
|
||||||
color: #007aff;
|
color: #007aff;
|
||||||
font-size: 28rpx;
|
font-size: 28 rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-row {
|
.record-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 8rpx;
|
//margin-bottom: 8 rpx;
|
||||||
}
|
margin: 5rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 28rpx;
|
font-size: 28 rpx;
|
||||||
width: 110px;
|
width: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 28rpx;
|
font-size: 28 rpx;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-container {
|
.btn-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
height: 68rpx;
|
height: 68 rpx;
|
||||||
line-height: 68rpx;
|
line-height: 68 rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 28rpx;
|
font-size: 28 rpx;
|
||||||
border-radius: 4rpx;
|
border-radius: 4 rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
& text:first-child {
|
& text:first-child {
|
||||||
border: 1px solid #4080ff;
|
border: 1px solid #4080ff;
|
||||||
color: #4080ff;
|
color: #4080ff;
|
||||||
}
|
}
|
||||||
& text:nth-child(2) {
|
|
||||||
border: 1px solid #e6a23c;
|
& text:nth-child(2) {
|
||||||
color: #e6a23c;
|
border: 1px solid #e6a23c;
|
||||||
}
|
color: #e6a23c;
|
||||||
& text:last-child {
|
}
|
||||||
border: 1px solid #f56c6c;
|
|
||||||
color: #f56c6c;
|
& 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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,25 @@
|
||||||
<text class="label">外出事由：</text>
|
<text class="label">外出事由：</text>
|
||||||
<text class="value">{{ record.leaveReason }}</text>
|
<text class="value">{{ record.leaveReason }}</text>
|
||||||
</view>
|
</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">
|
<view class="record-row">
|
||||||
<text class="label">外出开始时间：</text>
|
<text class="label">外出开始时间：</text>
|
||||||
<text class="value">{{ record.leaveStartDate }}</text>
|
<text class="value">{{ record.leaveStartDate }}</text>
|
||||||
|
|
@ -128,7 +147,7 @@
|
||||||
|
|
||||||
.record-row {
|
.record-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 8rpx;
|
margin: 5rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
|
@ -169,4 +188,26 @@
|
||||||
color: #f56c6c;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue