From ced2b5469a6e1a238dbc4a45497e045c0307f436 Mon Sep 17 00:00:00 2001
From: lSun <15893999301@qq.com>
Date: Thu, 19 Jun 2025 18:17:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=B0=E5=BD=95=E5=A2=9E=E5=8A=A0=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/stagger-holidays/recordList.vue | 349 ++++++++++++----------
 src/pages/temporary-outing/recordList.vue |  43 ++-
 2 files changed, 240 insertions(+), 152 deletions(-)

diff --git a/src/pages/stagger-holidays/recordList.vue b/src/pages/stagger-holidays/recordList.vue
index 5c05e11..9727ea7 100644
--- a/src/pages/stagger-holidays/recordList.vue
+++ b/src/pages/stagger-holidays/recordList.vue
@@ -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>
diff --git a/src/pages/temporary-outing/recordList.vue b/src/pages/temporary-outing/recordList.vue
index 0fb45ba..d50885a 100644
--- a/src/pages/temporary-outing/recordList.vue
+++ b/src/pages/temporary-outing/recordList.vue
@@ -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>