zhxy-jzd/src/pages/base/qj/components/xsQjList.vue

<template>
  <view class="leave-list">
    <BasicListLayout @register="register" style="position: absolute;">
      <template v-slot="{ data, index }">
        <view class="leave-card" @click="goToDetail(data)">
          <view class="card-header">
            <text class="applicant-name">{{ data.xsxm }}的请假申请</text>
          </view>
          <view class="card-body">
            <view class="info-row">
              <text class="label">请假事由:</text>
              <text class="value">{{ data.qjsy }}</text>
            </view>
            <view class="info-row">
              <text class="label">开始时间:</text>
              <text class="value">{{ data.qjkstime }}</text>
            </view>
            <view class="info-row">
              <text class="label">结束时间:</text>
              <text class="value">{{ data.qjjstime }}</text>
            </view>
          </view>
          <view class="card-footer">
            <text>查看详情</text>
            <text class="arrow">
              <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
            </text>
          </view>
        </view>
      </template>
    </BasicListLayout>
  </view>
</template>

<script setup lang="ts">
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
import { jzXsQjListApi } from "@/api/base/xsQjApi";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";
const { getCurXs } = useUserStore();
const { setData } = useDataStore();

let pageParams = ref({
  rows: 10,
  xsId: getCurXs.id
})

const [register, { reload }] = useLayout({
  api: jzXsQjListApi,
  componentProps: {},
  param: pageParams.value
});

// 查看详情或新增处理函数
const goToDetail = (item: any | null) => {
  if (!item || !item.id) {
    uni.showToast({ 
      title: '请假ID不存在', 
      icon: 'none' 
    });
    return;
  }
  
  // 跳转时传递请假ID
  let url = `/pages/base/qj/detail?id=${item.id}`;
  uni.navigateTo({ url });
};
</script>

<style lang="scss" scoped>
.leave-list {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1 0 1px;
  position: relative;

  .leave-card {
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  .card-header {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;

    .applicant-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .card-body {
    padding: 15px;

    .info-row {
      display: flex;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 14px;
        color: #666;
        width: 70px;
        flex-shrink: 0;
        margin-right: 8px;
      }

      .value {
        font-size: 14px;
        color: #333;
        flex: 1;
      }
    }
  }

  .card-footer {
    padding: 12px 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #888;
    cursor: pointer;

    .arrow {
      font-size: 16px;
      color: #ccc;
    }
  }

  ::v-deep .zp-loading-fixed {
    position: absolute;
  }

  ::v-deep .d-load-main {
    position: absolute;
  }
}
</style>