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

<template>
  <view class="dk-info">
    <view class="info-card" v-for="(item, index) in dkList" :key="index">
      <view class="card-header">
        <text class="applicant-name">{{ item.dktime }}（{{ item.xqLabel }}）的{{ item.jcmc }}</text>
        <text v-if="item.jsId === jsId" class="assigned-tag">我的代课</text>
      </view>
      <view class="divider"></view>
      <view class="card-body">
        <view class="info-row">
          <text class="label">排课名称:</text>
          <text class="value">{{ item.pkMc }}</text>
        </view>
        <view class="info-row">
          <text class="label">上课时间:</text>
          <text class="value">{{ item.startTime }}-{{ item.endTime }}</text>
        </view>
        <view class="info-row">
          <text class="label">代课老师:</text>
          <view class="value">{{ item.jsName }}</view>
        </view>
        <view class="info-row">
          <text class="label">确认状态:</text>
          <view class="value">{{ item.statusLabel }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const { getJs } = useUserStore();

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

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

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

const jsId = computed(() => getJs.id);

const wdNameList = ref<string[]>([
  "周一",
  "周二",
  "周三",
  "周四",
  "周五",
  "周六",
  "周日",
]);

const jsTypeMc: any = {
  ZAM: "早自习",
  AM: "上午",
  PM: "下午",
};

const qrStatus: any = {
  "wait": "待确认",
  "approved": "同意",
  "rejected": "拒绝",
};

const dkList = ref<any>([]);

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

const init = async () => {
  const res: any = await findDkPageApi({
    qjId: props.qjId,
    page: 1,
    rows: 1000,
  });
  const rows = (res && (res.rows || res.result || res.data)) || [];
  dkList.value = rows.map((item: any) => {
    item.dktime = item.dktime.split(" ")[0];
    item.jcmc = jsTypeMc[item.jcType] + "第" + item.jc + "节";
    const xq: number = item.xq - 1;
    item.xqLabel = wdNameList.value[xq];
    item.statusLabel = qrStatus[item.qrStatus] || "未知";
    return item;
  });
  // 排序，将当前教师作为代课教师的代课数据，排在前面，并且添加一个标记
  dkList.value = dkList.value.sort((a: any, b: any) => {
    if (a.jsId === jsId.value) {
      return -1;
    } else if (b.jsId === jsId.value) {
      return 1;
    } else {
      return 0;
    }
  });
  notifyParentLoaded();
};

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

const getDkList = () => {
  return dkList.value;
};

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

<style lang="scss" scoped>
.dk-info {
  background-color: #f5f7fa;
}

.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;
    position: relative;

    .applicant-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    
    /* 添加指派标记样式 */
    .assigned-tag {
      background-color: var(--primary-color, #1890ff);;
      color: white;
      font-size: 12px;
      padding: 5px 10px;
      border-bottom-left-radius: 8px;
      border-top-right-radius: 8px;
      font-weight: normal;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .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>