zhxy-jsd/src/pages/view/hr/jsQj/sp.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">
        <view v-if="!showDkFlag" class="empty-dk">
          <view>{{ showDkEmptyLabel }}</view>
        </view>
        <JsQjDetailDk v-else
          :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="px-15">
          <BasicForm @register="register" />
        </view>
        <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 { useForm } from "@/components/BasicForm/hooks/useForm";
import { navigateBack } from "@/utils/uniapp";
import { jsQjSpApi } 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" },
  { name: "代课信息", id: "tab-dk" },
  { name: "审批流程", id: "tab-sp" }
]);
const curTabIndex = ref(0);

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

const [register, { getValue }] = useForm({
  schema: [
    {
      field: "spStatus",
      label: "审批意见",
      component: "BasicCheckbox",
      required: true,
      itemProps: {
        labelPosition: "top",
      },
      componentProps: {
        data: [
          { value: 'approved', text: "同意" },
          { value: 'rejected', text: "拒绝" },
        ],
      },
    },
    {
      field: "spRemark",
      label: "审批说明",
      component: "BasicInput",
      required: true,
      itemProps: {
        labelPosition: "top",
      },
      componentProps: {
        type: "textarea",
        placeholder: "请输入审批说明",
      },
    },
  ],
});

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

const handleQjDataLoaded = (data: any) => {
  setData(data);
  data = data || {};
  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组件处理
};

const submit = async () => {
  try {
    const formData = await getValue();
    if (!formData.spStatus || !formData.spRemark) {
      uni.showToast({
        title: '请填写完整的审批信息',
        icon: 'none'
      });
      return;
    }

    const params = {
      qjId: qjId.value,
      jsId: getJs.id,
      spStatus: formData.spStatus,
      spRemark: formData.spRemark,
    };

    uni.showLoading({
      title: "提交中...",
    });

    const res = await jsQjSpApi(params);

    uni.hideLoading();
    uni.showToast({
      title: '审批提交成功',
      icon: 'success'
    });
    setTimeout(() => {
      uni.reLaunch({ url: '/pages/base/message/index' });
    }, 1000);
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none'
    });
    console.error('审批提交失败:', error);
  }
};

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>