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

<template>
  <BasicLayout>
    <view class="qj-detail">
      <!-- 请假信息 -->
      <JsQjDetailInfo
        :qjId="qjId"
        :dbFlag="dbFlag"
        @loadQjData="handleQjDataLoaded"
      />
      <!-- 代课信息 -->
      <view class="dk-info">
        <view v-if="!showDkFlag" class="empty-dk">
          <view>{{ showDkEmptyLabel }}</view>
        </view>
        <JsQjDetailDk v-else
          :qjId="qjId"
          @loadDkList="handleDkListLoaded"
        />
      </view>

      <!-- 审批流程 -->
      <LcglSp :yw-id="qjId" yw-type="JS_QJ" />
    </view>
    <template #bottom>
			<YwConfirm :spApi="jsQjSpApi" :stopApi="jsQjStopApi" :xtDkApi="jsQjXtApi"
			 :transferApi="jsQjTransferApi" :params="spParams" :showXt="true" />
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { jsQjSpApi, jsQjStopApi, jsQjTransferApi, jsQjXtApi } 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 JsQjDetailDk from "./components/jsQjDetailDk.vue";
import YwConfirm from "@/pages/components/YwConfirm/index.vue";
import LcglSp from "@/components/LcglSp/index.vue";
import { QjPageUtils } from "@/utils/qjPageUtils";

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


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

const spParams = computed(() => {
  return {
    xxtsId: getXxts.id,
    ywId: qjId.value
  };
});

const handleQjDataLoaded = (data: any) => {
  data = data || {};
  setData(data);
  if (data.spResult != "A" && getXxts && getXxts.dbZt === "A") {
    uni.reLaunch({ url: '/pages/base/xs/qj/detail' });
  }
  const dkfs = typeof(data.dkfs) === "string" ? parseInt(data.dkfs) : (data.dkfs || 2);
  showDkFlag.value = dkfs === 0; 
  if (dkfs === 1) {
    showDkEmptyLabel.value = "审批同意后由教科处协调";
  } else if (dkfs === 2) {
    showDkEmptyLabel.value = "无需代课";
  }
};

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

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;
}

.empty-dk {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 50px 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
}
</style>