zhxy-jsd/src/pages/view/hr/jsQj/jwcXt.vue

<template>
  <BasicLayout>
    <template #top>
      <view>
        <BasicTabs 
          class="detail-tabs"
          :list="tabList" 
          bar-width="60px" 
          scroll-count="4"
          :current="curTabIndex" 
          @change="switchTab"
        />
      </view>
    </template>
    <view class="qj-detail">
      <!-- 请假信息 -->
      <view v-show="curTabIndex === 0">
        <JsQjDetailInfo
          :qjId="qjId"
          :dbFlag="dbFlag"
          @loadQjData="handleQjDataLoaded"
        />
      </view>

      <!-- 代课信息 -->
      <view v-show="curTabIndex === 1" class="px-15">
        <JsQjDkEdit :data="qjData" ref="dkRef" />
      </view>

      <!-- 审批流程 -->
      <view v-show="curTabIndex === 2">
        <ProgressList :qjId="qjId" />
      </view>
    </view>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="flex-row items-center pb-10 pt-5">
          <u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack" />
          <u-button text="提交" class="mr-15 mr-7" type="primary" @click="submit" />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { navigateBack } from "@/utils/uniapp";
import { jsQjJwcXtApi } from "@/api/base/jsQjApi";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";
import { ref } from "vue";
import JsQjDetailInfo from "./components/jsQjDetailInfo.vue";
import JsQjDkEdit from "./components/jsQjDkEdit.vue";
import ProgressList from "./components/progressList.vue";
import { QjPageUtils } from "@/utils/qjPageUtils";

const { getJs } = useUserStore();
const { setData, getData } = useDataStore();

const tabList = ref<any>([
  { name: "请假信息", id: "tab-qj" },
  { name: "代课信息", id: "tab-dk" },
  { name: "审批流程", id: "tab-sp" }
]);
const curTabIndex = ref(1);

const dbFlag = ref(false);
const qjId = ref('');

const qjData = computed(() => getData);
const dkRef = ref<any>(null);

// 切换Tab
const switchTab = (index: number) => {
  curTabIndex.value = index;
};

const updateDk = () => {
  nextTick(() => {
    if (dkRef.value) {
      dkRef.value.getPkkbList();
    }
  });
};

const handleQjDataLoaded = (data: any) => {
  setData(data);
  updateDk();
};

const handleDkListLoaded = (list: any[]) => {
  // 代课明细数据已由JsQjDetail组件处理
};

const submit = async () => {
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    dkList: [],
  };
  const flag = await dkRef.value.validate();
  if (!flag) {
    uni.showToast({
      title: "请选择代课教师",
      icon: "none",
    });
    return;
  }
  let dkList = dkRef.value.getDkList() || [];
  if (dkList.length) {
    params.dkList = dkList.map((item: any) => {
      const newItem = { ...item };
      newItem.jsId = item.dkJsId;
      newItem.jsName = item.dkJsName;
      newItem.pkkbId = item.id;
      newItem.dktime = item.dktime + " 00:00:00";
      newItem.id = "";
      newItem.qjId = "";
      return newItem;
    });
  }
  uni.showLoading({ title: "提交中..." });
  await jsQjJwcXtApi(params);
  uni.hideLoading();
  setTimeout(() => {
    uni.reLaunch({ url: '/pages/base/message/index' });
  }, 1000);
};

onLoad(async (data?: any) => {
  const ret = await QjPageUtils.init(data);
  if (!ret || !ret.success) {
    return;
  }
  qjId.value = ret.qjId;
  dbFlag.value = ret.dbFlag;
});
</script>

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

.info-card {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;

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

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

  .card-body {
    padding: 15px;
  }
}
</style>