zhxy-jsd/src/pages/view/hr/jsQj/components/jsQjDetailInfo.vue

<template>
  <view class="info-card">
    <view class="card-header">
      <text class="applicant-name" v-if="dbFlag">{{ qjData.xxzy }}</text>
      <text class="applicant-name" v-else>教师{{ qjData.jsName }}的请假申请</text>
    </view>
    <view class="divider"></view>
    <view class="card-body">
      <view class="info-row"><text class="label">请假类型:</text><text class="value">{{ qjData.qjlx }}</text></view>
      <view class="info-row"><text class="label">开始时间:</text><text class="value">{{ qjData.qjkstime }}</text></view>
      <view class="info-row"><text class="label">结束时间:</text><text class="value">{{ qjData.qjjstime }}</text></view>
      <view class="info-row"><text class="label">请假时长:</text><text class="value">{{ qjData.qjsc }}</text></view>
      <view class="info-column"><text class="label">请假事由:</text><text class="value">{{ qjData.qjsy }}</text></view>
      <view class="info-row" style="margin-bottom: 0; margin-top: 10px">
        <text class="label">代课方式:</text>
        <text class="value">{{ dkfsText }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { findQjById } from "@/api/base/jsQjApi";
import { useDataStore } from "@/store/modules/data";
import { ref, computed, watch, onMounted } from "vue";

const { getXxts } = useDataStore();

// 接收外部传入属性
const props = withDefaults(
  defineProps<{
    qjId?: string;
    dbFlag?: boolean
  }>(),
  {
    qjId: "",
    dbFlag: false
  }
);

// 定义emit返回上级
const emit = defineEmits(["loadQjData"]);

// 在数据加载完成后通知父组件
const notifyParentLoaded = () => {
  emit("loadQjData", qjData.value);
};

const qjData = ref<any>({});

const dkfsList = ref<any>([
  { value: 0, text: "自行协调" },
  { value: 1, text: "教科处协调" },
  { value: 2, text: "无须代课" },
]);

const dkfsText = computed(() => {
  if (!qjData.value) { return ''; }
  let dkfs = typeof qjData.value.dkfs === "string" ? parseInt(qjData.value.dkfs) : qjData.value.dkfs || 0;
  return dkfsList.value[dkfs].text;
});

watch(
  () => props.qjId,
  (newVal, oldVal) => {
    // 添加回调函数处理逻辑
    console.log("qjId changed:", newVal, oldVal);
    if (newVal != oldVal && newVal) {
      init();
    }
  }
);

const init = async () => {
  if (!props.qjId) {
    console.log("初始化的qjId为空");
    return;
  }
  const res = await findQjById({ id: props.qjId });
  qjData.value = (res && res.result) ? res.result : {};
  if (props.dbFlag) {
    qjData.value.xxzy = getXxts.xxzy;
  }
  // 无需代课则直接通知父级
  notifyParentLoaded();
};

// 初始化
onMounted(async () => {
  await init();
});

const getQjData = () => {
  return qjData.value;
};

// 暴露接口给外部调用
defineExpose({
  getQjData,
});
</script>

<style lang="scss" scoped>
.info-card {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 15px;

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

  .divider {
    height: 1px;
    background-color: #eee;
  }

  .card-body {
    padding: 15px;

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

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

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

      .label {
        font-size: 14px;
        color: #999;
        flex-shrink: 0;
        margin-right: 8px;
        width: 100%;
        margin-bottom: 5px;
      }

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