|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px" height="700px" append-to-body>
|
|
|
+ <div class="p-2">
|
|
|
<div class="dialog-content">
|
|
|
<!-- 顶部按钮区域 -->
|
|
|
<div class="top-button-section">
|
|
|
@@ -11,7 +11,7 @@
|
|
|
:buttonLoading="buttonLoading"
|
|
|
:id="form.id"
|
|
|
:status="form.status"
|
|
|
- :pageType="type"
|
|
|
+ :pageType="routeParams.type"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -52,160 +52,162 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 第二段:请假信息 -->
|
|
|
- <el-card class="content-section" shadow="hover">
|
|
|
+ <el-card class="content-section leave-info-card" shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="section-title">请假信息</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <el-form ref="studentLeaveFormRef" :model="form" :rules="rules" label-width="120px" class="section-form compact-form">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="请假类型" prop="leaveTypeName">
|
|
|
- <el-select v-model="form.leaveTypeName" placeholder="请选择请假类型" style="width: 100%" @change="handleLeaveTypeChange" clearable>
|
|
|
- <el-option v-for="item in leaveTypeList" :key="item.id" :label="item.leaveTypeName" :value="item.leaveTypeName" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="类型编码" prop="leaveTypeCode">
|
|
|
- <el-input v-model="form.leaveTypeCode" placeholder="请假类型编码" disabled />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="是否离校" prop="isLeaveSchool">
|
|
|
- <el-select v-model="form.isLeaveSchool" placeholder="请选择是否离校" style="width: 100%">
|
|
|
- <el-option label="否" value="0" />
|
|
|
- <el-option label="是" value="1" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="开始时间" prop="startTime" required>
|
|
|
- <el-date-picker
|
|
|
- v-model="form.startTime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="datetime"
|
|
|
- placeholder="请选择开始时间"
|
|
|
- :default-time="new Date(2000, 1, 1, 0, 0, 0)"
|
|
|
- :disabled-date="disabledStartDate"
|
|
|
- @change="calculateLeaveDuration"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="结束时间" prop="endTime" required>
|
|
|
- <el-date-picker
|
|
|
- v-model="form.endTime"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="datetime"
|
|
|
- placeholder="请选择结束时间"
|
|
|
- :default-time="new Date(2000, 1, 1, 23, 59, 59)"
|
|
|
- :disabled-date="disabledEndDate"
|
|
|
- @change="calculateLeaveDuration"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="请假时长(天)" prop="leaveDuration">
|
|
|
- <el-input v-model="form.leaveDuration" disabled placeholder="自动计算请假时长" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="紧急联系人" prop="emergencyContact">
|
|
|
- <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="紧急电话" prop="emergencyPhone">
|
|
|
- <el-input v-model="form.emergencyPhone" placeholder="请输入紧急联系电话" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-form-item label="请假原因" prop="leaveReason">
|
|
|
- <el-input v-model="form.leaveReason" type="textarea" :rows="2" placeholder="请输入请假原因" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传附件">
|
|
|
- <div class="attachment-upload-container">
|
|
|
- <el-upload
|
|
|
- :file-list="attachmentList"
|
|
|
- class="upload-demo"
|
|
|
- drag
|
|
|
- list-type="picture-card"
|
|
|
- :on-preview="handleFilePreview"
|
|
|
- :action="uploadAction"
|
|
|
- :headers="uploadHeaders"
|
|
|
- :data="uploadData"
|
|
|
- :auto-upload="true"
|
|
|
- :before-upload="handleBeforeUpload"
|
|
|
- :on-success="handleUploadSuccess"
|
|
|
- :on-error="handleUploadError"
|
|
|
- :on-remove="handleRemoveAttachmentConfirm"
|
|
|
- :on-change="handleFileChange"
|
|
|
- multiple
|
|
|
- :limit="15"
|
|
|
- :show-file-list="true"
|
|
|
- accept="image/*,video/*,.pdf,.doc,.docx,.txt"
|
|
|
- >
|
|
|
- <template #tip>
|
|
|
- <div class="el-upload__tip">
|
|
|
- 支持图片、视频、PDF、Word文档等格式,单个文件大小不超过10MB,最多上传15个文件。
|
|
|
- <span class="el-upload__tip" v-if="!form.id" style="color: #ff0000">(新增时文件会立即上传,保存请假申请后自动关联)</span>
|
|
|
- <span class="el-upload__tip" v-else style="color: #ff0000">(编辑时文件会立即上传并关联到当前请假申请)</span>
|
|
|
+ <div class="leave-info-content">
|
|
|
+ <el-form ref="studentLeaveFormRef" :model="form" :rules="rules" label-width="120px" class="section-form compact-form">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="请假类型" prop="leaveTypeName">
|
|
|
+ <el-select v-model="form.leaveTypeName" placeholder="请选择请假类型" style="width: 100%" @change="handleLeaveTypeChange" clearable>
|
|
|
+ <el-option v-for="item in leaveTypeList" :key="item.id" :label="item.leaveTypeName" :value="item.leaveTypeName" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="类型编码" prop="leaveTypeCode">
|
|
|
+ <el-input v-model="form.leaveTypeCode" placeholder="请假类型编码" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="是否离校" prop="isLeaveSchool">
|
|
|
+ <el-select v-model="form.isLeaveSchool" placeholder="请选择是否离校" style="width: 100%">
|
|
|
+ <el-option label="否" value="0" />
|
|
|
+ <el-option label="是" value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="开始时间" prop="startTime" required>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.startTime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择开始时间"
|
|
|
+ :default-time="new Date(2000, 1, 1, 0, 0, 0)"
|
|
|
+ :disabled-date="disabledStartDate"
|
|
|
+ @change="calculateLeaveDuration"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="结束时间" prop="endTime" required>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.endTime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择结束时间"
|
|
|
+ :default-time="new Date(2000, 1, 1, 23, 59, 59)"
|
|
|
+ :disabled-date="disabledEndDate"
|
|
|
+ @change="calculateLeaveDuration"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="请假时长(天)" prop="leaveDuration">
|
|
|
+ <el-input v-model="form.leaveDuration" disabled placeholder="自动计算请假时长" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="紧急联系人" prop="emergencyContact">
|
|
|
+ <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="紧急电话" prop="emergencyPhone">
|
|
|
+ <el-input v-model="form.emergencyPhone" placeholder="请输入紧急联系电话" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="请假原因" prop="leaveReason">
|
|
|
+ <el-input v-model="form.leaveReason" type="textarea" :rows="2" placeholder="请输入请假原因" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传附件">
|
|
|
+ <div class="attachment-upload-container">
|
|
|
+ <el-upload
|
|
|
+ :file-list="attachmentList"
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handleFilePreview"
|
|
|
+ :action="uploadAction"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ :data="uploadData"
|
|
|
+ :auto-upload="true"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ :on-remove="handleRemoveAttachmentConfirm"
|
|
|
+ :on-change="handleFileChange"
|
|
|
+ multiple
|
|
|
+ :limit="15"
|
|
|
+ :show-file-list="true"
|
|
|
+ accept="image/*,video/*,.pdf,.doc,.docx,.txt"
|
|
|
+ >
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ 支持图片、视频、PDF、Word文档等格式,单个文件大小不超过10MB,最多上传15个文件。
|
|
|
+ <span class="el-upload__tip" v-if="!form.id" style="color: #ff0000">(新增时文件会立即上传,保存请假申请后自动关联)</span>
|
|
|
+ <span class="el-upload__tip" v-else style="color: #ff0000">(编辑时文件会立即上传并关联到当前请假申请)</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 调整拖拽上传图标与文字在同一行、居中对齐 -->
|
|
|
+ <div class="el-upload-dragger1">
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 调整拖拽上传图标与文字在同一行、居中对齐 -->
|
|
|
- <div class="el-upload-dragger1">
|
|
|
- <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 自定义文件卡片缩略图(含文件名) -->
|
|
|
- <template #file="{ file }">
|
|
|
- <div class="upload-file-card">
|
|
|
- <!-- 缩略图区域 -->
|
|
|
- <div class="upload-file-thumb">
|
|
|
- <image-preview v-if="isImageFile(file) && file.url" :src="getFileOssId(file)" class="upload-thumb-image" :isOssId="true" />
|
|
|
- <div v-else class="upload-file-placeholder">
|
|
|
- <el-icon><Document /></el-icon>
|
|
|
- <span class="file-ext">{{ getFileExt(file.name) }}</span>
|
|
|
- </div>
|
|
|
- <!-- loading 遮罩只在上传中显示 -->
|
|
|
- <div v-if="file.status === 'uploading'" class="upload-file-loading">
|
|
|
- <el-icon class="is-loading"><Loading /></el-icon>
|
|
|
- <span class="loading-text">上传中...</span>
|
|
|
+
|
|
|
+ <!-- 自定义文件卡片缩略图(含文件名) -->
|
|
|
+ <template #file="{ file }">
|
|
|
+ <div class="upload-file-card">
|
|
|
+ <!-- 缩略图区域 -->
|
|
|
+ <div class="upload-file-thumb">
|
|
|
+ <image-preview v-if="isImageFile(file) && file.url" :src="getFileOssId(file)" class="upload-thumb-image" :isOssId="true" />
|
|
|
+ <div v-else class="upload-file-placeholder">
|
|
|
+ <el-icon><Document /></el-icon>
|
|
|
+ <span class="file-ext">{{ getFileExt(file.name) }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- loading 遮罩只在上传中显示 -->
|
|
|
+ <div v-if="file.status === 'uploading'" class="upload-file-loading">
|
|
|
+ <el-icon class="is-loading"><Loading /></el-icon>
|
|
|
+ <span class="loading-text">上传中...</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 文件名称 -->
|
|
|
- <div class="upload-file-name" :title="file.name">
|
|
|
- {{ getShortFileName(file.name) }}
|
|
|
- </div>
|
|
|
+ <!-- 文件名称 -->
|
|
|
+ <div class="upload-file-name" :title="file.name">
|
|
|
+ {{ getShortFileName(file.name) }}
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 操作按钮区域 - 固定在文件名下方 -->
|
|
|
- <div class="upload-file-card-actions" v-if="file.status && file.status !== 'ready'">
|
|
|
- <el-button-group size="small">
|
|
|
- <el-button type="success" @click.stop="handleDownloadAttachment(file)" title="下载" :disabled="file.status !== 'success'">
|
|
|
- <el-icon><Download /></el-icon>
|
|
|
- </el-button>
|
|
|
- <el-button type="danger" @click.stop="handleRemoveAttachmentConfirm(file)" title="删除">
|
|
|
- <el-icon><Delete /></el-icon>
|
|
|
- </el-button>
|
|
|
- </el-button-group>
|
|
|
+ <!-- 操作按钮区域 - 固定在文件名下方 -->
|
|
|
+ <div class="upload-file-card-actions" v-if="file.status && file.status !== 'ready'">
|
|
|
+ <el-button-group size="small">
|
|
|
+ <el-button type="success" @click.stop="handleDownloadAttachment(file)" title="下载" :disabled="file.status !== 'success'">
|
|
|
+ <el-icon><Download /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" @click.stop="handleRemoveAttachmentConfirm(file)" title="删除">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
<!-- 提交组件 -->
|
|
|
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
|
|
|
@@ -223,12 +225,7 @@
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <!-- 按钮已移动到顶部 -->
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="StudentLeaveDialog" lang="ts">
|
|
|
@@ -288,22 +285,12 @@ interface UploadFile {
|
|
|
raw?: File;
|
|
|
}
|
|
|
|
|
|
-// 定义props - 简化为只有id和type两个参数
|
|
|
-interface Props {
|
|
|
- id?: string | number; // 业务表主键id
|
|
|
- type?: string; // 操作类型:add-新增,update-修改,view-查看
|
|
|
-}
|
|
|
-
|
|
|
// 定义emits
|
|
|
interface Emits {
|
|
|
- (e: 'update:dialog', value: { visible: boolean; title: string }): void;
|
|
|
(e: 'submit'): void;
|
|
|
(e: 'cancel'): void;
|
|
|
- (e: 'update:buttonLoading', value: boolean): void;
|
|
|
- (e: 'update:form', value: any): void;
|
|
|
}
|
|
|
|
|
|
-const props = defineProps<Props>();
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
@@ -806,11 +793,11 @@ const handleApprovalRecord = () => {
|
|
|
approvalRecordRef.value.init(form.id);
|
|
|
};
|
|
|
|
|
|
-// 提交回调
|
|
|
-const submitCallback = async () => {
|
|
|
- // 使用emit通知父组件关闭页面
|
|
|
- emit('submit');
|
|
|
-};
|
|
|
+// // 提交回调
|
|
|
+// const submitCallback = async () => {
|
|
|
+// // 使用emit通知父组件关闭页面
|
|
|
+// emit('submit');
|
|
|
+// };
|
|
|
|
|
|
// 审批
|
|
|
const approvalVerifyOpen = async () => {
|
|
|
@@ -824,7 +811,7 @@ const submitForm = (status: string) => {
|
|
|
ElMessage.error('请假时间不能为空');
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
+ console.log('status111:', status);
|
|
|
studentLeaveFormRef.value?.validate(async (valid: boolean) => {
|
|
|
if (valid) {
|
|
|
// 时间数据已经在表单中,无需额外处理
|
|
|
@@ -846,15 +833,40 @@ const submitForm = (status: string) => {
|
|
|
res = await updateStudentLeave(form).finally(() => (buttonLoading.value = false));
|
|
|
} else {
|
|
|
res = await addStudentLeave(form).finally(() => (buttonLoading.value = false));
|
|
|
+ console.log('res:', res);
|
|
|
+ //给form的ID赋值
|
|
|
+ console.log('res.data.id:', res.data.id);
|
|
|
+ form.id = res.data.id;
|
|
|
+ console.log('form.id:', form.id);
|
|
|
}
|
|
|
- Object.assign(form, res.data);
|
|
|
-
|
|
|
+ // 调用getStudentLeave函数获取请假数据
|
|
|
+ let response: AxiosResponse<StudentLeaveVO>;
|
|
|
+ try {
|
|
|
+ console.log('开始获取学生请假信息,ID:', form.id);
|
|
|
+ response = await getStudentLeave(form.id);
|
|
|
+ console.log('response:', response);
|
|
|
+ if (response.code === 200 && response.data) {
|
|
|
+ const leaveInfo = response.data;
|
|
|
+ console.log('获取到的学生请假信息:', leaveInfo);
|
|
|
+ // 填充请假信息表单
|
|
|
+ Object.assign(form, leaveInfo);
|
|
|
+ } else {
|
|
|
+ ElMessage.error(response.msg || '获取学生请假信息失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取学生请假信息失败:', error);
|
|
|
+ ElMessage.error('获取学生请假信息失败,请稍后重试');
|
|
|
+ }
|
|
|
+ console.log(response);
|
|
|
+ console.log('status:', status);
|
|
|
if (status === 'draft') {
|
|
|
buttonLoading.value = false;
|
|
|
ElMessage.success('暂存成功');
|
|
|
- emit('submit');
|
|
|
+ proxy.$tab.closePage(proxy.$route);
|
|
|
+ proxy.$router.go(-1);
|
|
|
+ // emit('submit');
|
|
|
} else {
|
|
|
- if ((res.data.approvalStatus === 'draft' && (flowCode.value === '' || flowCode.value === null)) || props.type === 'add') {
|
|
|
+ if ((response.data.approvalStatus === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
|
|
|
flowCode.value = flowCodeOptions[0].value;
|
|
|
dialogVisible.visible = true;
|
|
|
return;
|
|
|
@@ -899,13 +911,16 @@ const getStudentLeaveInfo = async (id: string | number) => {
|
|
|
console.log('开始获取学生请假信息,ID:', id);
|
|
|
const response = await getStudentLeave(id);
|
|
|
|
|
|
- if (response.data.code === 200 && response.data.data) {
|
|
|
- const leaveInfo = response.data.data;
|
|
|
+ if (response.code === 200 && response.data) {
|
|
|
+ const leaveInfo = response.data;
|
|
|
console.log('获取到的学生请假信息:', leaveInfo);
|
|
|
|
|
|
// 填充请假信息表单
|
|
|
Object.assign(form, leaveInfo);
|
|
|
|
|
|
+ // todo
|
|
|
+ form.status = leaveInfo.approvalStatus;
|
|
|
+
|
|
|
// 如果有学生ID,则获取学生信息
|
|
|
if (leaveInfo.studentId) {
|
|
|
await getStudentInfo(leaveInfo.studentId);
|
|
|
@@ -919,7 +934,7 @@ const getStudentLeaveInfo = async (id: string | number) => {
|
|
|
handleLeaveTypeChange(form.leaveTypeName);
|
|
|
}
|
|
|
} else {
|
|
|
- ElMessage.error(response.data.msg || '获取学生请假信息失败');
|
|
|
+ ElMessage.error('获取学生请假信息失败');
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取学生请假信息失败:', error);
|
|
|
@@ -933,8 +948,8 @@ const getStudentInfo = async (studentId: string | number) => {
|
|
|
console.log('开始获取学生信息,学生ID:', studentId);
|
|
|
const response = await getStudentMsg(studentId);
|
|
|
|
|
|
- if (response.data.code === 200 && response.data.data) {
|
|
|
- const studentInfo = response.data.data;
|
|
|
+ if (response.code === 200 && response.data) {
|
|
|
+ const studentInfo = response.data;
|
|
|
console.log('获取到的学生信息:', studentInfo);
|
|
|
|
|
|
// 填充学生基础信息
|
|
|
@@ -957,7 +972,7 @@ const getStudentInfo = async (studentId: string | number) => {
|
|
|
studentId: form.studentId
|
|
|
});
|
|
|
} else {
|
|
|
- ElMessage.warning(response.data.msg || '获取学生信息失败');
|
|
|
+ ElMessage.warning(response.msg || '获取学生信息失败');
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取学生信息失败:', error);
|
|
|
@@ -1065,8 +1080,8 @@ const handleAttachmentData = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 打开对话框
|
|
|
-const openDialog = (id?: string | number, type?: string) => {
|
|
|
+// 初始化页面数据
|
|
|
+const initPageData = () => {
|
|
|
// 重置表单数据
|
|
|
Object.assign(form, {
|
|
|
id: undefined,
|
|
|
@@ -1105,66 +1120,43 @@ const openDialog = (id?: string | number, type?: string) => {
|
|
|
// 清空附件列表
|
|
|
attachmentList.value = [];
|
|
|
|
|
|
- // 设置对话框标题
|
|
|
- if (type === 'add') {
|
|
|
- dialog.title = '新增学生请假申请';
|
|
|
- } else if (type === 'update') {
|
|
|
- dialog.title = '编辑学生请假申请';
|
|
|
- } else if (type === 'view') {
|
|
|
- dialog.title = '查看学生请假申请';
|
|
|
- } else {
|
|
|
- dialog.title = '学生请假申请';
|
|
|
- }
|
|
|
-
|
|
|
- // 显示对话框
|
|
|
- dialog.visible = true;
|
|
|
-
|
|
|
- // 根据是否有id决定数据获取方式
|
|
|
- if (id) {
|
|
|
+ // 根据路由参数决定数据获取方式
|
|
|
+ if (routeParams.value.id) {
|
|
|
// 有id时,获取学生请假信息
|
|
|
- getStudentLeaveInfo(id);
|
|
|
+ getStudentLeaveInfo(routeParams.value.id);
|
|
|
} else {
|
|
|
// 没有id时,只获取当前用户的学生信息
|
|
|
getCurrentUserStudentInfo();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 关闭对话框
|
|
|
-const closeDialog = () => {
|
|
|
- dialog.visible = false;
|
|
|
+//提交回调
|
|
|
+const submitCallback = async () => {
|
|
|
+ await proxy.$tab.closePage(proxy.$route);
|
|
|
+ proxy.$router.go(-1);
|
|
|
};
|
|
|
|
|
|
-// 暴露方法给父组件
|
|
|
-defineExpose({
|
|
|
- openDialog,
|
|
|
- closeDialog
|
|
|
-});
|
|
|
-
|
|
|
-// 组件挂载时获取请假类型列表
|
|
|
+// 组件挂载时获取请假类型列表和初始化数据
|
|
|
onMounted(() => {
|
|
|
- getLeaveTypeList();
|
|
|
+ nextTick(async () => {
|
|
|
+ routeParams.value = (proxy as any).$route.query;
|
|
|
+ getLeaveTypeList();
|
|
|
+ initPageData();
|
|
|
+ });
|
|
|
});
|
|
|
-
|
|
|
-// 监听props变化,自动打开对话框
|
|
|
-watch(
|
|
|
- () => [props.id, props.type],
|
|
|
- ([newId, newType]) => {
|
|
|
- if (newId !== undefined || newType) {
|
|
|
- openDialog(newId, newType);
|
|
|
- }
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
-);
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.dialog-content {
|
|
|
- max-height: 600px;
|
|
|
- overflow-y: auto;
|
|
|
+ height: calc(100vh - 120px);
|
|
|
+ max-height: calc(100vh - 120px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.content-section {
|
|
|
- margin-bottom: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
@@ -1172,15 +1164,35 @@ watch(
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
+/* 请假信息卡片样式 */
|
|
|
+.leave-info-card {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 0;
|
|
|
+ max-height: calc(100vh - 240px);
|
|
|
+}
|
|
|
+
|
|
|
+.leave-info-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+ background: #fafafa;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
color: #303133;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
.section-form {
|
|
|
@@ -1188,12 +1200,12 @@ watch(
|
|
|
}
|
|
|
|
|
|
.section-form .el-form-item {
|
|
|
- margin-bottom: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
|
|
|
|
/* 紧凑布局样式 */
|
|
|
.compact-form .el-form-item {
|
|
|
- margin-bottom: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.compact-form .el-form-item__label {
|
|
|
@@ -1220,8 +1232,8 @@ watch(
|
|
|
background: #f8f9fa;
|
|
|
border: 1px solid #e9ecef;
|
|
|
border-radius: 6px;
|
|
|
- padding: 16px;
|
|
|
- margin-bottom: 16px;
|
|
|
+ padding: 12px;
|
|
|
+ margin-bottom: 12px;
|
|
|
margin-right: 20px;
|
|
|
width: calc(100% - 20px);
|
|
|
}
|
|
|
@@ -1273,7 +1285,7 @@ watch(
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
/* padding: 16px 0; */
|
|
|
- margin-bottom: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
/* border-bottom: 1px solid #e9ecef; */
|
|
|
}
|
|
|
|
|
|
@@ -1290,27 +1302,47 @@ watch(
|
|
|
}
|
|
|
|
|
|
/* 滚动条样式 */
|
|
|
-.dialog-content::-webkit-scrollbar {
|
|
|
+.dialog-content::-webkit-scrollbar,
|
|
|
+.leave-info-content::-webkit-scrollbar,
|
|
|
+.attachment-upload-container::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
}
|
|
|
|
|
|
-.dialog-content::-webkit-scrollbar-track {
|
|
|
+.dialog-content::-webkit-scrollbar-track,
|
|
|
+.leave-info-content::-webkit-scrollbar-track,
|
|
|
+.attachment-upload-container::-webkit-scrollbar-track {
|
|
|
background: #f1f1f1;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
|
|
|
-.dialog-content::-webkit-scrollbar-thumb {
|
|
|
+.dialog-content::-webkit-scrollbar-thumb,
|
|
|
+.leave-info-content::-webkit-scrollbar-thumb,
|
|
|
+.attachment-upload-container::-webkit-scrollbar-thumb {
|
|
|
background: #c1c1c1;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
|
|
|
-.dialog-content::-webkit-scrollbar-thumb:hover {
|
|
|
+.dialog-content::-webkit-scrollbar-thumb:hover,
|
|
|
+.leave-info-content::-webkit-scrollbar-thumb:hover,
|
|
|
+.attachment-upload-container::-webkit-scrollbar-thumb:hover {
|
|
|
background: #a8a8a8;
|
|
|
}
|
|
|
|
|
|
/* 附件上传容器样式 */
|
|
|
.attachment-upload-container {
|
|
|
width: 100%;
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 8px;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+/* 附件上传区域内容样式 */
|
|
|
+.attachment-upload-container .upload-demo {
|
|
|
+ padding: 12px;
|
|
|
+ min-height: 150px;
|
|
|
}
|
|
|
|
|
|
.attachment-upload-container .upload-demo .el-upload {
|
|
|
@@ -1369,12 +1401,13 @@ watch(
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
-/* 让附件卡片一行展示 4 个 */
|
|
|
+/* 让附件卡片一行展示 5 个 */
|
|
|
.attachment-upload-container :deep(.el-upload-list--picture-card) {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(4, 1fr);
|
|
|
+ grid-template-columns: repeat(5, 1fr);
|
|
|
gap: 9px;
|
|
|
margin-top: 12px;
|
|
|
+ padding-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
/* 确保卡片宽度自适应 */
|
|
|
@@ -1433,7 +1466,7 @@ watch(
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
+ /* background: rgba(255, 255, 255, 0.9); */
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
@@ -1503,4 +1536,7 @@ watch(
|
|
|
cursor: not-allowed;
|
|
|
background: #f5f5f5;
|
|
|
}
|
|
|
+:deep(.el-card .el-card__header) {
|
|
|
+ border-bottom: 0px !important;
|
|
|
+}
|
|
|
</style>
|