157 lines
3.4 KiB
Vue
157 lines
3.4 KiB
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">
|
|
<LcglSpList :yw-id="qjId" yw-type="JS_QJ" />
|
|
</view>
|
|
</view>
|
|
<template #bottom>
|
|
<YwConfirm :api="jsQjJwcQrApi" :params="spParams"
|
|
@summit="submit" @reject="handleReject" />
|
|
</template>
|
|
</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 LcglSpList from "@/components/LcglSpList/index.vue";
|
|
import YwConfirm from "@/pages/components/YwConfirm/index.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 spParams = computed(() => {
|
|
return {
|
|
qjId: qjId.value,
|
|
jsId: getJs.id,
|
|
};
|
|
});
|
|
|
|
// 构建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 submit = async () => {
|
|
navigateBack();
|
|
};
|
|
|
|
// 驳回处理
|
|
const handleReject = async () => {
|
|
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> |