<template>
|
<view class="return-edit">
|
<PageHeader :title="pageTitle" @back="goBack" />
|
|
<up-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="110"
|
>
|
<up-form-item label="文档" prop="borrowId" required>
|
<up-input
|
v-model="displayDocName"
|
placeholder="请选择文档"
|
readonly
|
:disabled="isEdit"
|
@click="!isEdit && (showDocPicker = true)"
|
/>
|
<template #right>
|
<up-icon v-if="!isEdit" name="arrow-right" @click="showDocPicker = true"></up-icon>
|
</template>
|
</up-form-item>
|
|
<up-form-item label="借阅人" prop="borrower">
|
<up-input
|
v-model="form.borrower"
|
placeholder="选择文档后自动带出"
|
disabled
|
/>
|
</up-form-item>
|
|
<up-form-item label="归还人" prop="returner" required>
|
<up-input
|
v-model="form.returner"
|
placeholder="请输入归还人"
|
clearable
|
:disabled="isReturned"
|
/>
|
</up-form-item>
|
|
<up-form-item label="归还日期" prop="returnDate" required>
|
<up-input
|
v-model="form.returnDate"
|
placeholder="请选择归还日期"
|
readonly
|
@click="!isReturned && (showReturnDatePicker = true)"
|
:disabled="isReturned"
|
/>
|
<template #right>
|
<up-icon name="arrow-right" @click="!isReturned && (showReturnDatePicker = true)"></up-icon>
|
</template>
|
</up-form-item>
|
|
<up-form-item label="应归还日期" prop="dueReturnDate">
|
<up-input
|
v-model="form.dueReturnDate"
|
placeholder="选择文档后自动带出"
|
disabled
|
/>
|
</up-form-item>
|
|
<up-form-item label="备注说明" prop="remark">
|
<up-textarea
|
v-model="form.remark"
|
placeholder="请输入备注说明"
|
height="80"
|
border="none"
|
:disabled="isReturned"
|
/>
|
</up-form-item>
|
</up-form>
|
|
<FooterButtons
|
v-if="!isReturned"
|
:loading="loading"
|
:confirmText="isEdit ? '保存' : '新增'"
|
@cancel="goBack"
|
@confirm="handleSubmit"
|
/>
|
|
<!-- 文档选择器 -->
|
<up-action-sheet
|
:show="showDocPicker"
|
:actions="documentOptions"
|
title="选择文档"
|
@select="onDocSelect"
|
@close="showDocPicker = false"
|
/>
|
|
<!-- 归还日期选择器 -->
|
<up-popup :show="showReturnDatePicker" mode="bottom" @close="showReturnDatePicker = false">
|
<up-datetime-picker
|
:show="true"
|
v-model="returnDateValue"
|
@confirm="onReturnDateConfirm"
|
@cancel="showReturnDatePicker = false"
|
mode="date"
|
/>
|
</up-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import FooterButtons from "@/components/FooterButtons.vue";
|
import { returnDocument, reventUpdate, getDocumentList } from "@/api/fileManagement/return";
|
|
const formRef = ref();
|
const loading = ref(false);
|
const returnId = ref("");
|
const isEdit = ref(false);
|
|
// 弹窗显示状态
|
const showDocPicker = ref(false);
|
const showReturnDatePicker = ref(false);
|
|
// 数据
|
const documentList = ref([]);
|
const returnDateValue = ref(Date.now());
|
const displayDocName = ref(""); // 用于显示的文档名称
|
|
const form = ref({
|
id: "",
|
borrowId: "",
|
documentationId: "",
|
borrower: "",
|
returner: "",
|
borrowStatus: "",
|
returnDate: "",
|
dueReturnDate: "",
|
remark: "",
|
});
|
|
const rules = {
|
borrowId: [{ required: true, message: "请选择文档", trigger: "change" }],
|
returner: [{ required: true, message: "请输入归还人", trigger: "blur" }],
|
returnDate: [{ required: true, message: "请选择归还日期", trigger: "change" }],
|
};
|
|
// 页面标题
|
const pageTitle = computed(() => {
|
if (isEdit.value) {
|
return form.value.borrowStatus === "归还" ? "归还详情" : "编辑归还";
|
}
|
return "新增归还";
|
});
|
|
// 是否已归还
|
const isReturned = computed(() => {
|
return form.value.borrowStatus === "归还";
|
});
|
|
// 文档选项（仅新增模式使用）
|
const documentOptions = computed(() => {
|
return documentList.value.map((item) => ({
|
name: item.docName || item.name,
|
id: item.id,
|
borrower: item.borrower,
|
dueReturnDate: item.dueReturnDate,
|
}));
|
});
|
|
// 返回上一页
|
const goBack = () => {
|
uni.removeStorageSync("returnEditData");
|
uni.navigateBack();
|
};
|
|
// 加载文档列表（仅新增模式需要）
|
const loadDocumentList = async () => {
|
try {
|
const res = await getDocumentList();
|
if (res.code === 200) {
|
documentList.value = res.data || [];
|
}
|
} catch (error) {
|
console.error("获取文档列表失败", error);
|
}
|
};
|
|
// 文档选择确认
|
const onDocSelect = (e) => {
|
form.value.borrowId = e.id;
|
form.value.documentationId = e.id;
|
displayDocName.value = e.name;
|
// 自动带出借阅人和应归还日期
|
form.value.borrower = e.borrower || "";
|
form.value.dueReturnDate = e.dueReturnDate || "";
|
showDocPicker.value = false;
|
};
|
|
// 归还日期确认
|
const onReturnDateConfirm = (e) => {
|
const date = new Date(e.value);
|
form.value.returnDate = formatDate(date);
|
showReturnDatePicker.value = false;
|
};
|
|
// 格式化日期
|
const formatDate = (date) => {
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
const day = String(date.getDate()).padStart(2, "0");
|
return `${year}-${month}-${day}`;
|
};
|
|
// 提交表单
|
const handleSubmit = () => {
|
// 如果已归还，禁止提交
|
if (isReturned.value) {
|
uni.showToast({ title: "已归还的记录不能编辑", icon: "none" });
|
return;
|
}
|
|
formRef.value
|
.validate()
|
.then(async () => {
|
try {
|
loading.value = true;
|
|
if (isEdit.value) {
|
// 编辑模式
|
const res = await reventUpdate({
|
id: form.value.id,
|
documentationId: form.value.documentationId,
|
borrower: form.value.borrower,
|
returner: form.value.returner,
|
borrowStatus: form.value.borrowStatus,
|
returnDate: form.value.returnDate,
|
dueReturnDate: form.value.dueReturnDate,
|
remark: form.value.remark,
|
});
|
|
if (res.code === 200) {
|
uni.showToast({ title: "编辑成功", icon: "success" });
|
setTimeout(() => {
|
goBack();
|
}, 1500);
|
} else {
|
uni.showToast({ title: res.msg || "编辑失败", icon: "none" });
|
}
|
} else {
|
// 新增模式
|
const res = await returnDocument({
|
borrowId: form.value.borrowId,
|
borrower: form.value.borrower,
|
returner: form.value.returner,
|
borrowStatus: "归还",
|
returnDate: form.value.returnDate,
|
dueReturnDate: form.value.dueReturnDate,
|
remark: form.value.remark,
|
});
|
|
if (res.code === 200) {
|
uni.showToast({ title: "新增成功", icon: "success" });
|
setTimeout(() => {
|
goBack();
|
}, 1500);
|
} else {
|
uni.showToast({ title: res.msg || "新增失败", icon: "none" });
|
}
|
}
|
} catch (error) {
|
uni.showToast({ title: "操作失败", icon: "none" });
|
} finally {
|
loading.value = false;
|
}
|
})
|
.catch(() => {
|
// 验证失败
|
});
|
};
|
|
// 页面加载
|
onLoad((options) => {
|
if (options.id) {
|
// 编辑模式
|
isEdit.value = true;
|
returnId.value = options.id;
|
|
// 从 storage 获取编辑数据
|
const editDataStr = uni.getStorageSync("returnEditData");
|
if (editDataStr) {
|
try {
|
const data = JSON.parse(editDataStr);
|
Object.assign(form.value, data);
|
returnDateValue.value = new Date(data.returnDate).getTime();
|
// 直接使用传递的 docName 显示
|
displayDocName.value = data.docName || "";
|
} catch (e) {
|
console.error("解析编辑数据失败", e);
|
}
|
}
|
} else {
|
// 新增模式，加载文档列表并设置默认日期
|
loadDocumentList();
|
const today = new Date();
|
form.value.returnDate = formatDate(today);
|
returnDateValue.value = today.getTime();
|
}
|
});
|
</script>
|
|
<style lang="scss">
|
@import "@/static/scss/form-common.scss";
|
|
.return-edit {
|
min-height: 100vh;
|
background: #f5f5f5;
|
}
|
</style>
|
