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 class="dk-title">
        <BasicTitle line title="代课明细" :isBorder="false" />
      </view>
      <view @click="getPkkbList">
        <BasicIcon type="refreshempty" size="25" />
      </view>
    </view>
    <view class="dk-tabs mb-10">
      <BasicTabs class="type-tabs"
        ref="tabsRef" :list="tabList" bar-width="60px" scroll-count="4"
        :current="curTabIndex" @change="switchTab"
        />
      <view class="dk-card" v-if="curTabIndex === 0">
        <view class="card-body">
          <view class="info-row">
            <text class="label">代课老师:</text>
            <view class="value">
              <JsPicker @change="changeJsByTy" :parent-data="tyDk" :defualtValue="tyDk.dkJsId" :multiple="false" :excludeIds="excludeIds" />
            </view>
          </view>
        </view>
      </view>      
      <view v-if="curTabIndex === 1">
        <view v-for="(item, index) in kmDkList" :key="index">
          <view class="dk-card" style="margin: 0;">
            <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>
                <view class="value">
                  <JsPicker @change="changeJsByKm" :parent-data="item" :defualtValue="item.dkJsId" :multiple="false" :excludeIds="excludeIds" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="dkList.length > 0">
      <view v-for="(item, index) in dkList" :key="index">
        <view class="dk-card">
          <view class="card-header">
            <text class="applicant-name">{{ item.dktime }}（{{ wdNameList[item.xq - 1] }}）的{{ 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">
              <text class="label">代课老师:</text>
              <view class="value" v-if="curTabIndex === 2">
                <JsPicker @change="changeJs" :parent-data="item" :defualtValue="item.dkJsId" :multiple="false" :excludeIds="excludeIds" />
              </view>
              <view v-else>{{ item.dkJsName }}</view>
            </view>
          </view>
        </view>
      </view>
    </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 JsPicker from "@/pages/components/JsPicker/index.vue";
import { getPkkbByJsRangeTimeApi } from "@/api/base/qjApi";
import { useUserStore } from "@/store/modules/user";
const { getJs } = useUserStore();

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

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

// 代课教师要排除自己
const excludeIds = ref<any>([getJs.id]);

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

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

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

const tabList = ref([
  { name: "统一设置", id: "tab-ty" },
  { name: "按排课设置", id: "tab-pk" },
  { name: "按节次设置", id: "tab-jc" },
]);

const curTabIndex = ref(0);

const switchTab = (index : number) => {
  curTabIndex.value = index;
}

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

const getPkkbList = async () => {
  const res = await getPkkbByJsRangeTimeApi({
    jsId: props.data.jsId,
    startTime: props.data.qjkstime,
    endTime: props.data.qjjstime,
  });
  // 记录原始选课的数据
  const srcData: any = {};
  dkList.value.map((item: any) => { 
    const key = item.dktime + item.jcType + item.jc;
    srcData[key] = {
      dkJsId: item.dkJsId,
      dkJsName: item.dkJsName
    };
  });
  const kmMap:any = {};
  dkList.value = 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 = "";
    }
    kmMap[item.pkId] = kmMap[item.pkId] || {
      pkName: item.pkName,
      pkId: item.pkId,
    };
    return item;
  });
  // 将kmMap转换成value对应的数组
  kmDkList.value = Object.values(kmMap);
}

const changeJsByTy = (selected: any, item: any) => {
  item.dkJsId = selected.value;
  item.dkJsName = selected.label;
  const newList = dkList.value.map((dk: any) => {
    return {
      ...dk,
      dkJsId: item.dkJsId,
      dkJsName: item.dkJsName
    };
  });
  dkList.value = newList;
  const newKmList = kmDkList.value.map((km: any) => {
    return {
      ...km,
      dkJsId: item.dkJsId,
      dkJsName: item.dkJsName
    };
  });
  kmDkList.value = newKmList;
}

const changeJsByKm = (selected: any, item: any) => {
  item.dkJsId = selected.value;
  item.dkJsName = selected.label;
  // 同时更新主列表中的数据
  const newList = dkList.value.map((dk: any) => {
    if (dk.pkId === item.pkId) {
      return { ...dk, dkJsId: item.dkJsId, dkJsName: item.dkJsName };
    }
    return dk;
  });
  dkList.value = newList;
}

const changeJs = (selected: any, item: any) => {
  item.dkJsId = selected.value;
  item.dkJsName = selected.label;
}


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

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

<style lang="scss" scoped>
.dk-tabs {
  flex: 1 0 1px;
}

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