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

<template>
  <BasicLayout>
    <!-- 选项卡 -->
    <BasicTabs
      class="leave-tabs"
      ref="tabsRef"
      :list="tabList"
      bar-width="60px"
      scroll-count="4"
      :current="curTabIndex"
      @change="switchTab"
    />
    <view class="pl-15 pr-15" v-show="curTabIndex === 0">
      <JsQjDkEdit
        :data="formData"
        ref="dkRef"
        v-if="formData && formData.dkfs === '1'"
      />
    </view>
    <JsQjDetail
      v-show="curTabIndex === 1"
      :qjId="qjId"
      :dbFlag="dbFlag"
      v-if="qjId && qjId.length"
      @loadQjData="loadQjData"
    />
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="divider"></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 { jsQjJwcXtApi } from "@/api/base/jsQjApi";
import { useDataStore } from "@/store/modules/data";
import { useUserStore } from "@/store/modules/user";
import { navigateBack, showToast } from "@/utils/uniapp";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import JsQjDetail from "./components/jsQjDetail.vue";
import JsQjDkEdit from "./components/jsQjDkEdit.vue";
const { getJs } = useUserStore();
const { setData, getData, getDb } = useDataStore();

const dkRef = ref<any>(null);

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

const dbFlag = ref(false);

const qjId = ref<string>();

const tabList = ref([
  { name: "代课协调", id: "dk-edit" },
  { name: "请假信息", id: "qj-info" },
]);

const curTabIndex = ref(1);
let initDkTabFlag = false;

const switchTab = (index: number) => {
  curTabIndex.value = index;
  if (index === 0 && !initDkTabFlag) {
    nextTick(() => {
      dkRef.value.getPkkbList();
      initDkTabFlag = true;
    });
  }
};

const loadQjData = (data: any) => {
  formData.value = data;
  switchTab(0);
};

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).then(() => {
    showToast({ title: "提交成功", icon: "success" });
    uni.reLaunch({
      url: "/pages/base/service/index",
    });
  });
  uni.hideLoading();
};

onLoad(async (data: any) => {
  // 从待办过来的，需要从后端获取数据
  if (data && data.from && data.from == "db") {
    qjId.value = data.id;
    dbFlag.value = true;
    if (getDb.dbZt === "B") {
      setData({ id: data.id });
      let url = "/pages/view/hr/jsQj/detail"; // 使用新路径
      uni.navigateTo({ url });
      return;
    }
  } else {
    qjId.value = getData.id;
    dbFlag.value = false;
  }
});
</script>

<style scoped>
.popup-content {
  width: 80vw;
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px 16px 16px;
}
.popup-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
.popup-actions {
  margin-top: 16px;
}
</style>