调整请假详情显示
This commit is contained in:
ywyonui
parent
fc70ba71b1
commit
5d77454c4d
@ -1,288 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="qj-detail back-f8f8f8">
|
|
||||||
<view class="pt-15">
|
|
||||||
<BasicTabs
|
|
||||||
class="detail-tabs"
|
|
||||||
:list="tabList"
|
|
||||||
bar-width="60px"
|
|
||||||
scroll-count="4"
|
|
||||||
:current="curTabIndex"
|
|
||||||
@change="switchTab"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 请假信息 -->
|
|
||||||
<view v-show="curTabIndex === 0">
|
|
||||||
<view class="info-card">
|
|
||||||
<view class="card-header">
|
|
||||||
<text class="applicant-name" v-if="dbFlag">{{ qjData.xxzy }}</text>
|
|
||||||
<text class="applicant-name" v-else>教师{{ qjData.jsName }}的请假申请</text>
|
|
||||||
</view>
|
|
||||||
<view class="divider"></view>
|
|
||||||
<view class="card-body">
|
|
||||||
<view class="info-row"><text class="label">请假类型:</text><text class="value">{{ qjData.qjlx }}</text></view>
|
|
||||||
<view class="info-row"><text class="label">开始时间:</text><text class="value">{{ qjData.qjkstime }}</text></view>
|
|
||||||
<view class="info-row"><text class="label">结束时间:</text><text class="value">{{ qjData.qjjstime }}</text></view>
|
|
||||||
<view class="info-row"><text class="label">请假时长:</text><text class="value">{{ qjData.qjsc }}</text></view>
|
|
||||||
<view class="info-column"><text class="label">请假事由:</text><text class="value">{{ qjData.qjsy }}</text></view>
|
|
||||||
<view class="info-row" style="margin-bottom: 0; margin-top: 10px">
|
|
||||||
<text class="label">代课方式:</text>
|
|
||||||
<text class="value">{{ dkfsText }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 代课信息 -->
|
|
||||||
<view v-show="showDkTab && curTabIndex === 1">
|
|
||||||
<view v-if="qjData && qjData.dkfs == 2" class="p-15">
|
|
||||||
无需代课
|
|
||||||
</view>
|
|
||||||
<view v-else>
|
|
||||||
<view class="info-card" v-for="(item, index) in dkList" :key="index">
|
|
||||||
<view class="card-header">
|
|
||||||
<text class="applicant-name">{{ item.dktime }}（{{ item.xqLabel }}）的{{ item.jcmc }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="divider"></view>
|
|
||||||
<view class="card-body">
|
|
||||||
<view class="info-row">
|
|
||||||
<text class="label">排课名称:</text>
|
|
||||||
<text class="value">{{ item.pkMc }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-row">
|
|
||||||
<text class="label">上课时间:</text>
|
|
||||||
<text class="value">{{ item.startTime }}-{{ item.endTime }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-row">
|
|
||||||
<text class="label">代课老师:</text>
|
|
||||||
<view class="value">{{ item.jsName }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 审批流程 -->
|
|
||||||
<view v-show="curTabIndex === 2">
|
|
||||||
<ProgressList :qjId="qjData.id" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { findDkPageApi, findQjById } from "@/api/base/jsQjApi";
|
|
||||||
import { useDataStore } from "@/store/modules/data";
|
|
||||||
import ProgressList from "./progressList.vue";
|
|
||||||
import { ref, computed, watch, onMounted } from "vue";
|
|
||||||
const { getXxts } = useDataStore();
|
|
||||||
|
|
||||||
// 接收外部传入属性
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
qjId?: string;
|
|
||||||
dbFlag?: boolean;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
qjId: "",
|
|
||||||
dbFlag: false,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// 定义emit返回上级
|
|
||||||
const emit = defineEmits(["loadQjData", "loadDkList"]);
|
|
||||||
|
|
||||||
// 在数据加载完成后通知父组件
|
|
||||||
const notifyParentLoaded = () => {
|
|
||||||
emit("loadQjData", qjData.value);
|
|
||||||
emit("loadDkList", dkList.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const qjData = ref<any>({});
|
|
||||||
const tabList = ref([{ name: "请假信息", id: "tab-qj" }, { name: "审批流程", id: "tab-sp" }]);
|
|
||||||
const showDkTab = ref(false);
|
|
||||||
const curTabIndex = ref(0);
|
|
||||||
const switchTab = (index: number) => {
|
|
||||||
curTabIndex.value = index;
|
|
||||||
};
|
|
||||||
|
|
||||||
const wdNameList = ref<string[]>([
|
|
||||||
"周一",
|
|
||||||
"周二",
|
|
||||||
"周三",
|
|
||||||
"周四",
|
|
||||||
"周五",
|
|
||||||
"周六",
|
|
||||||
"周日",
|
|
||||||
]);
|
|
||||||
|
|
||||||
const dkfsList = ref<any>([
|
|
||||||
{ value: 0, text: "自行协调" },
|
|
||||||
{ value: 1, text: "教科处协调" },
|
|
||||||
{ value: 2, text: "无须代课" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const jsTypeMc: any = {
|
|
||||||
ZAM: "早自习",
|
|
||||||
AM: "上午",
|
|
||||||
PM: "下午",
|
|
||||||
};
|
|
||||||
|
|
||||||
const dkList = ref<any>([]);
|
|
||||||
|
|
||||||
const dkfsText = computed(() => {
|
|
||||||
if (!qjData.value) { return ''; }
|
|
||||||
let dkfs = typeof qjData.value.dkfs === "string" ? parseInt(qjData.value.dkfs) : qjData.value.dkfs || 0;
|
|
||||||
return dkfsList.value[dkfs].text;
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.qjId,
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
// 添加回调函数处理逻辑
|
|
||||||
console.log("qjId changed:", newVal, oldVal);
|
|
||||||
if (newVal != oldVal && newVal) {
|
|
||||||
init();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const init = async () => {
|
|
||||||
{
|
|
||||||
const res = await findQjById({ id: props.qjId });
|
|
||||||
qjData.value = (res && res.result) ? res.result : {};
|
|
||||||
}
|
|
||||||
// 根据是否需要代课，动态设置Tab
|
|
||||||
showDkTab.value = !!(qjData.value && qjData.value.dkfs != 2);
|
|
||||||
if (showDkTab.value) {
|
|
||||||
// 如果需要代课，确保代课Tab存在并排在中间
|
|
||||||
const hasDk = tabList.value.findIndex((t:any) => t.id === 'tab-dk') > -1;
|
|
||||||
if (!hasDk) {
|
|
||||||
tabList.value = [{ name: "请假信息", id: "tab-qj" }, { name: "代课信息", id: "tab-dk" }, { name: "审批流程", id: "tab-sp" }];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 无需代课，去掉代课Tab
|
|
||||||
tabList.value = [{ name: "请假信息", id: "tab-qj" }, { name: "审批流程", id: "tab-sp" }];
|
|
||||||
}
|
|
||||||
// 查询代课列表（仅在需要代课时）
|
|
||||||
if (!showDkTab.value) {
|
|
||||||
// 无需代课则直接通知父级
|
|
||||||
if (props.dbFlag) {
|
|
||||||
qjData.value.xxzy = getXxts.xxzy;
|
|
||||||
}
|
|
||||||
notifyParentLoaded();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
{
|
|
||||||
const res: any = await findDkPageApi({
|
|
||||||
qjId: props.qjId,
|
|
||||||
page: 1,
|
|
||||||
rows: 1000,
|
|
||||||
});
|
|
||||||
console.log(res);
|
|
||||||
const rows = (res && (res.rows || res.result || res.data)) || [];
|
|
||||||
dkList.value = rows.map((item: any) => {
|
|
||||||
item.dktime = item.dktime.split(" ")[0];
|
|
||||||
item.jcmc = jsTypeMc[item.jcType] + "第" + item.jc + "节";
|
|
||||||
const xq: number = item.xq - 1;
|
|
||||||
item.xqLabel = wdNameList.value[xq];
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (props.dbFlag) {
|
|
||||||
qjData.value.xxzy = getXxts.xxzy;
|
|
||||||
}
|
|
||||||
notifyParentLoaded();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化
|
|
||||||
onMounted(async () => {
|
|
||||||
await init();
|
|
||||||
});
|
|
||||||
|
|
||||||
const getQjData = () => {
|
|
||||||
return qjData.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getDkList = () => {
|
|
||||||
return dkList.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 暴露接口给外部调用
|
|
||||||
defineExpose({
|
|
||||||
getQjData,
|
|
||||||
getDkList,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.qj-detail {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-card {
|
|
||||||
margin: 15px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.applicant-name {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 1px;
|
|
||||||
background-color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.info-row {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
width: 70px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info-column {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-right: 8px;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
211
src/pages/view/hr/jsQj/components/jsQjDetailDk.vue
Normal file
211
src/pages/view/hr/jsQj/components/jsQjDetailDk.vue
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
<template>
|
||||||
|
<view class="dk-info">
|
||||||
|
<view class="info-card" v-for="(item, index) in dkList" :key="index">
|
||||||
|
<view class="card-header">
|
||||||
|
<text class="applicant-name">{{ item.dktime }}（{{ item.xqLabel }}）的{{ item.jcmc }}</text>
|
||||||
|
<text v-if="item.jsId === jsId" class="assigned-tag">我的代课</text>
|
||||||
|
</view>
|
||||||
|
<view class="divider"></view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">排课名称:</text>
|
||||||
|
<text class="value">{{ item.pkMc }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">上课时间:</text>
|
||||||
|
<text class="value">{{ item.startTime }}-{{ item.endTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">代课老师:</text>
|
||||||
|
<view class="value">{{ item.jsName }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { findDkPageApi } from "@/api/base/jsQjApi";
|
||||||
|
import { useUserStore } from "@/store/modules/user";
|
||||||
|
import { ref, computed, watch, onMounted } from "vue";
|
||||||
|
|
||||||
|
const { getJs } = useUserStore();
|
||||||
|
|
||||||
|
// 接收外部传入属性
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
qjId?: string;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
qjId: ""
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 定义emit返回上级
|
||||||
|
const emit = defineEmits(["loadDkList"]);
|
||||||
|
|
||||||
|
// 在数据加载完成后通知父组件
|
||||||
|
const notifyParentLoaded = () => {
|
||||||
|
emit("loadDkList", dkList.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const jsId = computed(() => getJs.id);
|
||||||
|
|
||||||
|
const wdNameList = ref<string[]>([
|
||||||
|
"周一",
|
||||||
|
"周二",
|
||||||
|
"周三",
|
||||||
|
"周四",
|
||||||
|
"周五",
|
||||||
|
"周六",
|
||||||
|
"周日",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const jsTypeMc: any = {
|
||||||
|
ZAM: "早自习",
|
||||||
|
AM: "上午",
|
||||||
|
PM: "下午",
|
||||||
|
};
|
||||||
|
|
||||||
|
const dkList = ref<any>([]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.qjId,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
// 添加回调函数处理逻辑
|
||||||
|
console.log("qjId changed:", newVal, oldVal);
|
||||||
|
if (newVal != oldVal && newVal) {
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const init = async () => {
|
||||||
|
const res: any = await findDkPageApi({
|
||||||
|
qjId: props.qjId,
|
||||||
|
page: 1,
|
||||||
|
rows: 1000,
|
||||||
|
});
|
||||||
|
const rows = (res && (res.rows || res.result || res.data)) || [];
|
||||||
|
dkList.value = rows.map((item: any) => {
|
||||||
|
item.dktime = item.dktime.split(" ")[0];
|
||||||
|
item.jcmc = jsTypeMc[item.jcType] + "第" + item.jc + "节";
|
||||||
|
const xq: number = item.xq - 1;
|
||||||
|
item.xqLabel = wdNameList.value[xq];
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
// 排序，将当前教师作为代课教师的代课数据，排在前面，并且添加一个标记
|
||||||
|
dkList.value = dkList.value.sort((a: any, b: any) => {
|
||||||
|
if (a.jsId === jsId.value) {
|
||||||
|
return -1;
|
||||||
|
} else if (b.jsId === jsId.value) {
|
||||||
|
return 1;
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
notifyParentLoaded();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(async () => {
|
||||||
|
await init();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getDkList = () => {
|
||||||
|
return dkList.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露接口给外部调用
|
||||||
|
defineExpose({
|
||||||
|
getDkList,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dk-info {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
margin: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
padding: 15px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.applicant-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加指派标记样式 */
|
||||||
|
.assigned-tag {
|
||||||
|
background-color: var(--primary-color, #1890ff);;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
font-weight: normal;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
width: 70px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
167
src/pages/view/hr/jsQj/components/jsQjDetailInfo.vue
Normal file
167
src/pages/view/hr/jsQj/components/jsQjDetailInfo.vue
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
<template>
|
||||||
|
<view class="info-card">
|
||||||
|
<view class="card-header">
|
||||||
|
<text class="applicant-name" v-if="dbFlag">{{ qjData.xxzy }}</text>
|
||||||
|
<text class="applicant-name" v-else>教师{{ qjData.jsName }}的请假申请</text>
|
||||||
|
</view>
|
||||||
|
<view class="divider"></view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="info-row"><text class="label">请假类型:</text><text class="value">{{ qjData.qjlx }}</text></view>
|
||||||
|
<view class="info-row"><text class="label">开始时间:</text><text class="value">{{ qjData.qjkstime }}</text></view>
|
||||||
|
<view class="info-row"><text class="label">结束时间:</text><text class="value">{{ qjData.qjjstime }}</text></view>
|
||||||
|
<view class="info-row"><text class="label">请假时长:</text><text class="value">{{ qjData.qjsc }}</text></view>
|
||||||
|
<view class="info-column"><text class="label">请假事由:</text><text class="value">{{ qjData.qjsy }}</text></view>
|
||||||
|
<view class="info-row" style="margin-bottom: 0; margin-top: 10px">
|
||||||
|
<text class="label">代课方式:</text>
|
||||||
|
<text class="value">{{ dkfsText }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { findQjById } from "@/api/base/jsQjApi";
|
||||||
|
import { useDataStore } from "@/store/modules/data";
|
||||||
|
import { ref, computed, watch, onMounted } from "vue";
|
||||||
|
|
||||||
|
const { getXxts } = useDataStore();
|
||||||
|
|
||||||
|
// 接收外部传入属性
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
qjId?: string;
|
||||||
|
dbFlag?: boolean
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
qjId: "",
|
||||||
|
dbFlag: false
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 定义emit返回上级
|
||||||
|
const emit = defineEmits(["loadQjData"]);
|
||||||
|
|
||||||
|
// 在数据加载完成后通知父组件
|
||||||
|
const notifyParentLoaded = () => {
|
||||||
|
emit("loadQjData", qjData.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const qjData = ref<any>({});
|
||||||
|
|
||||||
|
const dkfsList = ref<any>([
|
||||||
|
{ value: 0, text: "自行协调" },
|
||||||
|
{ value: 1, text: "教科处协调" },
|
||||||
|
{ value: 2, text: "无须代课" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const dkfsText = computed(() => {
|
||||||
|
if (!qjData.value) { return ''; }
|
||||||
|
let dkfs = typeof qjData.value.dkfs === "string" ? parseInt(qjData.value.dkfs) : qjData.value.dkfs || 0;
|
||||||
|
return dkfsList.value[dkfs].text;
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.qjId,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
// 添加回调函数处理逻辑
|
||||||
|
console.log("qjId changed:", newVal, oldVal);
|
||||||
|
if (newVal != oldVal && newVal) {
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const init = async () => {
|
||||||
|
const res = await findQjById({ id: props.qjId });
|
||||||
|
qjData.value = (res && res.result) ? res.result : {};
|
||||||
|
if (props.dbFlag) {
|
||||||
|
qjData.value.xxzy = getXxts.xxzy;
|
||||||
|
}
|
||||||
|
// 无需代课则直接通知父级
|
||||||
|
notifyParentLoaded();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(async () => {
|
||||||
|
await init();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getQjData = () => {
|
||||||
|
return qjData.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露接口给外部调用
|
||||||
|
defineExpose({
|
||||||
|
getQjData,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.info-card {
|
||||||
|
margin: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.applicant-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
width: 70px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,16 +1,104 @@
|
|||||||
<template>
|
<template>
|
||||||
<BasicLayout>
|
<BasicLayout>
|
||||||
<JsQjDetail :qjId="qjId" :dbFlag="dbFlag" />
|
<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="goHome" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
</BasicLayout>
|
</BasicLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import JsQjDetail from "./components/jsQjDetail.vue";
|
|
||||||
import { useDataStore } from "@/store/modules/data";
|
import { useDataStore } from "@/store/modules/data";
|
||||||
const { getData } = useDataStore();
|
import { ref, computed } from "vue";
|
||||||
|
import JsQjDetailInfo from "./components/jsQjDetailInfo.vue";
|
||||||
|
import JsQjDetailDk from "./components/jsQjDetailDk.vue";
|
||||||
|
import ProgressList from "./components/progressList.vue";
|
||||||
|
|
||||||
|
const { getData, setData } = useDataStore();
|
||||||
|
|
||||||
|
const tabList = ref<any>([{ name: "请假信息", id: "tab-qj" }]);
|
||||||
|
const curTabIndex = ref(0);
|
||||||
|
|
||||||
const dbFlag = ref(false);
|
const dbFlag = ref(false);
|
||||||
|
|
||||||
const qjId = computed(() => getData.id);
|
const qjId = computed(() => getData.id);
|
||||||
|
const showDkTab = ref(false);
|
||||||
|
|
||||||
|
// 构建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 goHome = () => {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/base/service/index',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.qj-detail {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@ -76,13 +76,17 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { jsQjDkQrApi } from "@/api/base/jsQjApi";
|
import { jsQjDkQrApi } from "@/api/base/jsQjApi";
|
||||||
import { findQjById, findDkByIdApi } from "@/api/base/jsQjApi";
|
import { findQjById, findDkByIdApi } from "@/api/base/jsQjApi";
|
||||||
|
import { xxtsFindByIdApi } from "@/api/base/server";
|
||||||
import { useUserStore } from "@/store/modules/user";
|
import { useUserStore } from "@/store/modules/user";
|
||||||
|
import { useDataStore } from "@/store/modules/data";
|
||||||
import { navigateBack } from "@/utils/uniapp";
|
import { navigateBack } from "@/utils/uniapp";
|
||||||
import { onLoad } from "@dcloudio/uni-app";
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const { getJs } = useUserStore();
|
const { getJs, loginByOpenId } = useUserStore();
|
||||||
|
const { getData, setXxts, setData, getXxts } = useDataStore();
|
||||||
|
|
||||||
|
const dbFlag = ref(false);
|
||||||
const qjId = ref<string>();
|
const qjId = ref<string>();
|
||||||
const dkId = ref<string>();
|
const dkId = ref<string>();
|
||||||
const qjData = ref<any>({});
|
const qjData = ref<any>({});
|
||||||
@ -91,7 +95,7 @@ const dkData = ref<any>({});
|
|||||||
// 加载请假信息
|
// 加载请假信息
|
||||||
const loadQjData = async () => {
|
const loadQjData = async () => {
|
||||||
try {
|
try {
|
||||||
const result = await findQjById({ id: qjId.value });
|
const result: any = await findQjById({ id: qjId.value });
|
||||||
if (result.code === 1) {
|
if (result.code === 1) {
|
||||||
qjData.value = result.data;
|
qjData.value = result.data;
|
||||||
}
|
}
|
||||||
@ -103,7 +107,7 @@ const loadQjData = async () => {
|
|||||||
// 加载代课信息
|
// 加载代课信息
|
||||||
const loadDkData = async () => {
|
const loadDkData = async () => {
|
||||||
try {
|
try {
|
||||||
const result = await findDkByIdApi({ id: dkId.value });
|
const result: any = await findDkByIdApi({ id: dkId.value });
|
||||||
if (result.code === 1) {
|
if (result.code === 1) {
|
||||||
dkData.value = result.data;
|
dkData.value = result.data;
|
||||||
}
|
}
|
||||||
@ -160,21 +164,55 @@ const handleReject = async () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
onLoad((options) => {
|
|
||||||
if (options.qjId) {
|
onLoad(async (data?: any) => {
|
||||||
qjId.value = options.qjId;
|
// 从待办过来的，需要从后端获取数据
|
||||||
}
|
console.log(data);
|
||||||
if (options.dkId) {
|
if (data && data.from && data.from == "db") {
|
||||||
dkId.value = options.dkId;
|
dbFlag.value = true;
|
||||||
|
|
||||||
|
// 检查登录状态
|
||||||
|
const isLoggedIn = await loginByOpenId(data.openId);
|
||||||
|
if (!isLoggedIn) {
|
||||||
|
console.log("用户未登录，跳过处理");
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载数据
|
try {
|
||||||
if (qjId.value) {
|
// 优先从后端根据url中的id去查询Xxts
|
||||||
loadQjData();
|
const xxtsRes = await xxtsFindByIdApi({ id: data.id });
|
||||||
|
if (xxtsRes && xxtsRes.result) {
|
||||||
|
const xxts = xxtsRes.result;
|
||||||
|
// 检查待办状态
|
||||||
|
if (xxts.dbZt === "B") {
|
||||||
|
setData({ id: xxts.xxzbId });
|
||||||
|
let url = "/pages/view/hr/jsQj/detail";
|
||||||
|
uni.navigateTo({ url });
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
if (dkId.value) {
|
setXxts(xxts);
|
||||||
|
qjId.value = xxts.xxzbId;
|
||||||
|
dkId.value = xxts.xxglId
|
||||||
|
loadQjData();
|
||||||
loadDkData();
|
loadDkData();
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取待办信息失败", error);
|
||||||
|
// 如果获取Xxts失败，回退到原来的逻辑
|
||||||
|
const xxtsData = getXxts;
|
||||||
|
if (xxtsData && xxtsData.dbZt === "B") {
|
||||||
|
setData({ id: data.id });
|
||||||
|
let url = "/pages/view/hr/jsQj/detail";
|
||||||
|
uni.navigateTo({ url });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
qjId.value = data.id;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dbFlag.value = false;
|
||||||
|
// 直接加载请假详情
|
||||||
|
qjId.value = getData.id || '';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<BasicLayout>
|
<BasicLayout>
|
||||||
<JsQjDetail :qjId="qjId" :dbFlag="dbFlag" v-if="qjId && qjId.length" />
|
<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
|
<u-popup
|
||||||
:show="dlgFlag"
|
:show="dlgFlag"
|
||||||
@ -23,43 +65,70 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
<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="showDlg"
|
|
||||||
/>
|
|
||||||
<u-button
|
|
||||||
text="同意"
|
|
||||||
class="mr-15 mr-7"
|
|
||||||
type="primary"
|
|
||||||
@click="submit"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</BasicLayout>
|
</BasicLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
|
import { navigateBack } from "@/utils/uniapp";
|
||||||
import { jsQjJwcQrApi } from "@/api/base/jsQjApi";
|
import { jsQjJwcQrApi } from "@/api/base/jsQjApi";
|
||||||
import { useUserStore } from "@/store/modules/user";
|
import { useUserStore } from "@/store/modules/user";
|
||||||
import { navigateBack } from "@/utils/uniapp";
|
import { useDataStore } from "@/store/modules/data";
|
||||||
import { onLoad } from "@dcloudio/uni-app";
|
import { ref, computed } from "vue";
|
||||||
import { ref } from "vue";
|
import { xxtsFindByIdApi } from "@/api/base/server";
|
||||||
import JsQjDetail from "./components/jsQjDetail.vue";
|
import JsQjDetailInfo from "./components/jsQjDetailInfo.vue";
|
||||||
|
import JsQjDetailDk from "./components/jsQjDetailDk.vue";
|
||||||
|
import ProgressList from "./components/progressList.vue";
|
||||||
|
|
||||||
const { getJs } = useUserStore();
|
const { getJs, loginByOpenId } = useUserStore();
|
||||||
|
const { getData, setXxts, setData, getXxts } = useDataStore();
|
||||||
|
|
||||||
|
const tabList = ref<any>([{ name: "请假信息", id: "tab-qj" }]);
|
||||||
|
const curTabIndex = ref(0);
|
||||||
|
|
||||||
const dbFlag = ref(false);
|
const dbFlag = ref(false);
|
||||||
const qjId = ref<string>();
|
const qjId = ref('');
|
||||||
|
const showDkTab = ref(false);
|
||||||
|
|
||||||
const dlgFlag = ref(false);
|
const dlgFlag = ref(false);
|
||||||
const rejectReason = ref("");
|
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 submit = async () => {
|
||||||
const params = {
|
const params = {
|
||||||
qjId: qjId.value,
|
qjId: qjId.value,
|
||||||
@ -73,14 +142,6 @@ const submit = async () => {
|
|||||||
navigateBack();
|
navigateBack();
|
||||||
};
|
};
|
||||||
|
|
||||||
const showDlg = () => {
|
|
||||||
dlgFlag.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeDlg = () => {
|
|
||||||
dlgFlag.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 驳回处理
|
// 驳回处理
|
||||||
const handleReject = async () => {
|
const handleReject = async () => {
|
||||||
if (!rejectReason.value.trim()) {
|
if (!rejectReason.value.trim()) {
|
||||||
@ -100,38 +161,87 @@ const handleReject = async () => {
|
|||||||
navigateBack();
|
navigateBack();
|
||||||
};
|
};
|
||||||
|
|
||||||
onLoad((options) => {
|
onLoad(async (data?: any) => {
|
||||||
if (options.qjId) {
|
// 从待办过来的，需要从后端获取数据
|
||||||
qjId.value = options.qjId;
|
console.log(data);
|
||||||
|
if (data && data.from && data.from == "db") {
|
||||||
|
dbFlag.value = true;
|
||||||
|
|
||||||
|
// 检查登录状态
|
||||||
|
const isLoggedIn = await loginByOpenId(data.openId);
|
||||||
|
if (!isLoggedIn) {
|
||||||
|
console.log("用户未登录，跳过处理");
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
if (options.dbFlag) {
|
|
||||||
dbFlag.value = options.dbFlag === "true";
|
try {
|
||||||
|
// 优先从后端根据url中的id去查询Xxts
|
||||||
|
const xxtsRes = await xxtsFindByIdApi({ id: data.id });
|
||||||
|
if (xxtsRes && xxtsRes.result) {
|
||||||
|
const xxts = xxtsRes.result;
|
||||||
|
// 检查待办状态
|
||||||
|
if (xxts.dbZt === "B") {
|
||||||
|
setData({ id: xxts.xxzbId });
|
||||||
|
let url = "/pages/view/hr/jsQj/detail";
|
||||||
|
uni.navigateTo({ url });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setXxts(xxts);
|
||||||
|
qjId.value = xxts.xxzbId;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取待办信息失败", error);
|
||||||
|
// 如果获取Xxts失败，回退到原来的逻辑
|
||||||
|
const xxtsData = getXxts;
|
||||||
|
if (xxtsData && xxtsData.dbZt === "B") {
|
||||||
|
setData({ id: data.id });
|
||||||
|
let url = "/pages/view/hr/jsQj/detail";
|
||||||
|
uni.navigateTo({ url });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
qjId.value = data.id;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dbFlag.value = false;
|
||||||
|
// 直接加载请假详情
|
||||||
|
qjId.value = getData.id || '';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.popup-content {
|
.qj-detail {
|
||||||
background-color: white;
|
background-color: #f5f7fa;
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
width: 300px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-title {
|
.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-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 15px;
|
color: #333;
|
||||||
text-align: center;
|
margin-bottom: 10px;
|
||||||
}
|
|
||||||
|
|
||||||
.popup-actions {
|
.applicant-name {
|
||||||
margin-top: 20px;
|
font-size: 16px;
|
||||||
}
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
margin: 0 15px;
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,14 +1,39 @@
|
|||||||
<template>
|
<template>
|
||||||
<BasicLayout>
|
<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 class="qj-detail">
|
||||||
<!-- 使用公共组件展示请假详情 -->
|
<!-- 请假信息 -->
|
||||||
<JsQjDetail
|
<view v-show="curTabIndex === 0">
|
||||||
|
<JsQjDetailInfo
|
||||||
:qjId="qjId"
|
:qjId="qjId"
|
||||||
:dbFlag="dbFlag"
|
:dbFlag="dbFlag"
|
||||||
@loadQjData="handleQjDataLoaded"
|
@loadQjData="handleQjDataLoaded"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 代课信息 -->
|
||||||
|
<view v-show="showDkTab && curTabIndex === 1">
|
||||||
|
<JsQjDetailDk
|
||||||
|
:qjId="qjId"
|
||||||
@loadDkList="handleDkListLoaded"
|
@loadDkList="handleDkListLoaded"
|
||||||
/>
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 审批流程 -->
|
||||||
|
<view v-show="curTabIndex === 2">
|
||||||
|
<ProgressList :qjId="qjId" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<template #bottom>
|
<template #bottom>
|
||||||
<view class="white-bg-color py-5">
|
<view class="white-bg-color py-5">
|
||||||
@ -16,18 +41,8 @@
|
|||||||
<BasicForm @register="register" />
|
<BasicForm @register="register" />
|
||||||
</view>
|
</view>
|
||||||
<view class="flex-row items-center pb-10 pt-5">
|
<view class="flex-row items-center pb-10 pt-5">
|
||||||
<u-button
|
<u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack" />
|
||||||
text="取消"
|
<u-button text="提交" class="mr-15 mr-7" type="primary" @click="submit" />
|
||||||
class="ml-15 mr-7"
|
|
||||||
:plain="true"
|
|
||||||
@click="navigateBack"
|
|
||||||
/>
|
|
||||||
<u-button
|
|
||||||
text="提交"
|
|
||||||
class="mr-15 mr-7"
|
|
||||||
type="primary"
|
|
||||||
@click="submit"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -43,16 +58,19 @@ import { useUserStore } from "@/store/modules/user";
|
|||||||
import { useDataStore } from "@/store/modules/data";
|
import { useDataStore } from "@/store/modules/data";
|
||||||
import { ref, computed } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import { xxtsFindByIdApi } from "@/api/base/server";
|
import { xxtsFindByIdApi } from "@/api/base/server";
|
||||||
import JsQjDetail from "./components/jsQjDetail.vue";
|
import JsQjDetailInfo from "./components/jsQjDetailInfo.vue";
|
||||||
|
import JsQjDetailDk from "./components/jsQjDetailDk.vue";
|
||||||
|
import ProgressList from "./components/progressList.vue";
|
||||||
|
|
||||||
const { getJs, loginByOpenId } = useUserStore();
|
const { getJs, loginByOpenId } = useUserStore();
|
||||||
const { getData, setXxts, setData, getXxts } = useDataStore();
|
const { getData, setXxts, setData, getXxts } = useDataStore();
|
||||||
|
|
||||||
|
const tabList = ref<any>([{ name: "请假信息", id: "tab-qj" }]);
|
||||||
|
const curTabIndex = ref(0);
|
||||||
|
|
||||||
const dbFlag = ref(false);
|
const dbFlag = ref(false);
|
||||||
const qjId = ref('');
|
const qjId = ref('');
|
||||||
|
const showDkTab = ref(false);
|
||||||
// 请假基础数据
|
|
||||||
const qjData = computed(() => getData || {});
|
|
||||||
|
|
||||||
const [register, { getValue }] = useForm({
|
const [register, { getValue }] = useForm({
|
||||||
schema: [
|
schema: [
|
||||||
@ -87,10 +105,27 @@ const [register, { getValue }] = useForm({
|
|||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 构建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) => {
|
const handleQjDataLoaded = (data: any) => {
|
||||||
setData(data);
|
setData(data);
|
||||||
|
showDkTab.value = !!(data && data.dkfs != 2);
|
||||||
|
rebuildTabList(showDkTab.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDkListLoaded = (list: any[]) => {
|
const handleDkListLoaded = (list: any[]) => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user