调整请假详情显示
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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import JsQjDetail from "./components/jsQjDetail.vue";
|
||||
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 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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qj-detail {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -76,13 +76,17 @@
|
||||
<script setup lang="ts">
|
||||
import { jsQjDkQrApi } from "@/api/base/jsQjApi";
|
||||
import { findQjById, findDkByIdApi } from "@/api/base/jsQjApi";
|
||||
import { xxtsFindByIdApi } from "@/api/base/server";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { navigateBack } from "@/utils/uniapp";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
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 dkId = ref<string>();
|
||||
const qjData = ref<any>({});
|
||||
@ -91,7 +95,7 @@ const dkData = ref<any>({});
|
||||
// 加载请假信息
|
||||
const loadQjData = async () => {
|
||||
try {
|
||||
const result = await findQjById({ id: qjId.value });
|
||||
const result: any = await findQjById({ id: qjId.value });
|
||||
if (result.code === 1) {
|
||||
qjData.value = result.data;
|
||||
}
|
||||
@ -103,7 +107,7 @@ const loadQjData = async () => {
|
||||
// 加载代课信息
|
||||
const loadDkData = async () => {
|
||||
try {
|
||||
const result = await findDkByIdApi({ id: dkId.value });
|
||||
const result: any = await findDkByIdApi({ id: dkId.value });
|
||||
if (result.code === 1) {
|
||||
dkData.value = result.data;
|
||||
}
|
||||
@ -160,20 +164,54 @@ const handleReject = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.qjId) {
|
||||
qjId.value = options.qjId;
|
||||
}
|
||||
if (options.dkId) {
|
||||
dkId.value = options.dkId;
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
if (qjId.value) {
|
||||
loadQjData();
|
||||
}
|
||||
if (dkId.value) {
|
||||
loadDkData();
|
||||
onLoad(async (data?: any) => {
|
||||
// 从待办过来的，需要从后端获取数据
|
||||
console.log(data);
|
||||
if (data && data.from && data.from == "db") {
|
||||
dbFlag.value = true;
|
||||
|
||||
// 检查登录状态
|
||||
const isLoggedIn = await loginByOpenId(data.openId);
|
||||
if (!isLoggedIn) {
|
||||
console.log("用户未登录，跳过处理");
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
dkId.value = xxts.xxglId
|
||||
loadQjData();
|
||||
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>
|
||||
|
||||
@ -1,6 +1,48 @@
|
||||
<template>
|
||||
<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
|
||||
:show="dlgFlag"
|
||||
@ -23,43 +65,70 @@
|
||||
</view>
|
||||
</view>
|
||||
</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>
|
||||
</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 { navigateBack } from "@/utils/uniapp";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { ref } from "vue";
|
||||
import JsQjDetail from "./components/jsQjDetail.vue";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { ref, computed } from "vue";
|
||||
import { xxtsFindByIdApi } from "@/api/base/server";
|
||||
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 qjId = ref<string>();
|
||||
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,
|
||||
@ -73,14 +142,6 @@ const submit = async () => {
|
||||
navigateBack();
|
||||
};
|
||||
|
||||
const showDlg = () => {
|
||||
dlgFlag.value = true;
|
||||
};
|
||||
|
||||
const closeDlg = () => {
|
||||
dlgFlag.value = false;
|
||||
};
|
||||
|
||||
// 驳回处理
|
||||
const handleReject = async () => {
|
||||
if (!rejectReason.value.trim()) {
|
||||
@ -100,38 +161,87 @@ const handleReject = async () => {
|
||||
navigateBack();
|
||||
};
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.qjId) {
|
||||
qjId.value = options.qjId;
|
||||
}
|
||||
if (options.dbFlag) {
|
||||
dbFlag.value = options.dbFlag === "true";
|
||||
onLoad(async (data?: any) => {
|
||||
// 从待办过来的，需要从后端获取数据
|
||||
console.log(data);
|
||||
if (data && data.from && data.from == "db") {
|
||||
dbFlag.value = true;
|
||||
|
||||
// 检查登录状态
|
||||
const isLoggedIn = await loginByOpenId(data.openId);
|
||||
if (!isLoggedIn) {
|
||||
console.log("用户未登录，跳过处理");
|
||||
return;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup-content {
|
||||
background-color: white;
|
||||
.qj-detail {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
width: 300px;
|
||||
}
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.popup-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.popup-actions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.applicant-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin: 0 15px;
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,39 @@
|
||||
<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">
|
||||
<!-- 使用公共组件展示请假详情 -->
|
||||
<JsQjDetail
|
||||
:qjId="qjId"
|
||||
:dbFlag="dbFlag"
|
||||
@loadQjData="handleQjDataLoaded"
|
||||
@loadDkList="handleDkListLoaded"
|
||||
/>
|
||||
<!-- 请假信息 -->
|
||||
<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">
|
||||
@ -16,18 +41,8 @@
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
@ -43,16 +58,19 @@ import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { ref, computed } 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, 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 qjId = ref('');
|
||||
|
||||
// 请假基础数据
|
||||
const qjData = computed(() => getData || {});
|
||||
const showDkTab = ref(false);
|
||||
|
||||
const [register, { getValue }] = useForm({
|
||||
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) => {
|
||||
setData(data);
|
||||
showDkTab.value = !!(data && data.dkfs != 2);
|
||||
rebuildTabList(showDkTab.value);
|
||||
};
|
||||
|
||||
const handleDkListLoaded = (list: any[]) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user