zhxy-jsd/src/pages/view/hr/jsQj/jwcQr.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="showDkTab && curTabIndex === 1">
        <JsQjDetailDk
          :qjId="qjId"
          @loadDkList="handleDkListLoaded"
        />
      </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="showDlg" />
          <u-button text="同意" class="mr-15 mr-7" type="primary" @click="submit" />
        </view>
      </view>
    </template>
    <!-- 驳回弹窗 -->
    <u-popup
      :show="dlgFlag"
      mode="center"
      :closeOnClickOverlay="false"
      @close="closeDlg"
    >
      <view class="popup-content">
        <view class="popup-title">驳回原因</view>
        <u-input
          v-model="rejectReason"
          type="textarea"
          placeholder="请填写驳回原因"
          :autoHeight="true"
          maxlength="200"
        />
        <view class="popup-actions flex-row justify-end mt-4">
          <u-button class="mr-2" @click="closeDlg">取消</u-button>
          <u-button type="primary" @click="handleReject">确定</u-button>
        </view>
      </view>
    </u-popup>
  </BasicLayout>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { navigateBack } from "@/utils/uniapp";
import { jsQjJwcQrApi } 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 ProgressList from "./components/progressList.vue";
import { QjPageUtils } from "@/utils/qjPageUtils";

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

const tabList = ref<any>([{ name: "请假信息", id: "tab-qj" }]);
const curTabIndex = ref(0);

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

const dlgFlag = ref(false);
const rejectReason = ref("");


// 构建Tab列表
const rebuildTabList = (showDk: boolean) => {
  // 构建Tab列表
  tabList.value = [
    { name: "请假信息", id: "tab-qj" },
  ];
  if (showDk) {
    tabList.value.push({ name: "代课信息", id: "tab-dk" });
  }
  tabList.value.push({ name: "审批流程", id: "tab-sp" });
};

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

const handleQjDataLoaded = (data: any) => {
  setData(data);
  showDkTab.value = !!(data && data.dkfs != 2);
  rebuildTabList(showDkTab.value);
};

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

const showDlg = () => {
  dlgFlag.value = true;
};

const closeDlg = () => {
  dlgFlag.value = false;
};

const submit = async () => {
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    spStatus: "approved",
    spRemark: "同意",
  };
  uni.showLoading({ title: "确认中..." });
  await jsQjJwcQrApi(params);
  uni.hideLoading();
  navigateBack();
};

// 驳回处理
const handleReject = async () => {
  if (!rejectReason.value.trim()) {
    uni.showToast({ title: "请填写驳回意见", icon: "none" });
    return;
  }
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    spStatus: "rejected",
    spRemark: rejectReason.value,
  };
  uni.showLoading({ title: "正在驳回..." });
  await jsQjJwcQrApi(params);
  uni.hideLoading();
  closeDlg();
  navigateBack();
};

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>