zhxy-jsd/src/pages/view/hr/qj/components/jsQjDkEdit.vue

<template>
  <view class="back-f8f8f8">
    <view class="flex-row items-center justify-between py-15 global-bg-color">
      <view>
        <BasicTitle line title="代课明细" :isBorder="false" />
      </view>
      <view @click="getPkkbList">
        <BasicIcon type="refreshempty" size="25" />
      </view>
    </view>
    <view v-if="dkList.xl.length > 0">
      <template v-for="(item, index) in dkList.xl" :key="index">
        <view class="dk-card">
          <view class="card-header">
            <text class="applicant-name">{{ item.dktime }}的{{ item.jcmc }}</text>
          </view>
          <view class="card-body">
            <view class="info-row">
              <text class="label">排课名称:</text>
              <text class="value">{{ item.pkName }}</text>
            </view>
            <view class="info-row">
              <text class="label">上课时间:</text>
              <text class="value">{{ item.startTime }}-{{ item.endTime }}</text>
            </view>
            <view class="info-row" @click="clickChangeJs">
              <text class="label">代课老师:</text>
              <view class="value">
                <text class="data" v-if="item.dkJsId">{{ item.dkJsName }}</text>
                <text class="data" style="color: #999;" v-else>请选择代课老师</text>
              </view>
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </template>
    </view>
    <view v-else class="p-15 flex-row-center color-9 font-13 white-bg-color">暂无数据</view>
  </view>
</template>

<script setup lang="ts">
import { getPkkbByJsRangeTimeApi } from "@/api/base/qjApi";

// 接收外部传入属性
const props = withDefaults(defineProps<{
  data: any
}>(), {
  data: () => ({
    jsId: "",
    qjkstime: "", // 请假开始时间
    qjjstime: "", // 请假结束时间
  })
});

// const schema = reactive<FormsSchema[]>([
//   {
//     field: "dktime", // 排课日期（pktime）
//     label: "代课日期",
//     component: "BasicInput",
//     componentProps: {
//       readonly: true,
//     },
//   },
//   {
//     field: "pkmc",
//     label: "排课名称",
//     component: "BasicInput",
//     componentProps: {
//       readonly: true,
//     },
//   },
//   {
//     field: "jcmc", // 节次类型(jcType)+节次（jc）
//     label: "节次",
//     component: "BasicInput",
//     componentProps: {
//       readonly: true,
//     },
//   },
//   {
//     field: "njbjmx", // bc + bjmc
//     label: "年级班级",
//     component: "BasicInput",
//     componentProps: {
//       readonly: true,
//     },
//   },
//   {
//     field: "startTime", // startTime
//     label: "开始时间",
//     component: "BasicInput",
//     componentProps: {
//       readonly: true,
//     },
//   },
//   {
//     field: "endTime", // endTime
//     label: "结束时间",
//     component: "BasicInput",
//     componentProps: {
//       readonly: true,
//     },
//   },
//   {
//     field: "jsId",
//     label: "代课老师",
//     component: "BasicInput",
//     required: true,
//     componentProps: {},
//   },
// ]);

const dkList = reactive<any>({
  xl: [],
});

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

const getPkkbList = async () => {
  const res = await getPkkbByJsRangeTimeApi({
    jsId: props.data.jsId,
    startTime: props.data.qjkstime.split(" ")[0],
    endTime: props.data.qjjstime.split(" ")[0],
  });
  // 记录原始选课的数据
  const srcData: any = {};
  dkList.xl.map((item: any) => { 
    const key = item.dktime + item.jcType + item.jc;
    srcData[key] = {
      dkJsId: item.dkJsId,
      dkJsName: item.dkJsName
    };
  });
  dkList.xl = res.result.map((item: any) => {
    item.dktime = item.kbtime.split(" ")[0];
    item.njbjmx = item.bc + item.bjmc;
    item.jcmc = jsTypeMc[item.jcType] + "第" + item.jc + "节";
    const key = item.dktime + item.jcType + item.jc;
    const src = srcData[key];
    if (src) {
      item.dkJsId = src.dkJsId;
      item.dkJsName = src.dkJsName;
    } else {
      item.dkJsId = "";
      item.dkJsName = "";
    }
    return item;
  });
}

const clickChangeJs = () => {

}

// 暴露接口给ref调用
function getDkList() {
  return dkList;
}

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

<style lang="scss" scoped>
.dk-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;
      display: flex;
      .data {
        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;
  }
}
</style>