<template>
|
<view class="borrow-edit">
|
<PageHeader :title="pageTitle" @back="goBack" />
|
|
<up-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="110"
|
>
|
<up-form-item label="借阅人" prop="borrower" required>
|
<up-input
|
v-model="form.borrower"
|
placeholder="请输入借阅人"
|
clearable
|
:disabled="isReturned"
|
/>
|
</up-form-item>
|
|
<up-form-item label="借阅书籍" prop="documentationId" 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="borrowDate" required>
|
<up-input
|
v-model="form.borrowDate"
|
placeholder="请选择借阅日期"
|
readonly
|
@click="!isReturned && (showBorrowDatePicker = true)"
|
:disabled="isReturned"
|
/>
|
<template #right>
|
<up-icon name="arrow-right" @click="!isReturned && (showBorrowDatePicker = true)"></up-icon>
|
</template>
|
</up-form-item>
|
|
<up-form-item label="应归还日期" prop="dueReturnDate" required>
|
<up-input
|
v-model="form.dueReturnDate"
|
placeholder="请选择应归还日期"
|
readonly
|
@click="!isReturned && (showDueDatePicker = true)"
|
:disabled="isReturned"
|
/>
|
<template #right>
|
<up-icon name="arrow-right" @click="!isReturned && (showDueDatePicker = true)"></up-icon>
|
</template>
|
</up-form-item>
|
|
<up-form-item label="借阅目的" prop="borrowPurpose" required>
|
<up-input
|
v-model="form.borrowPurpose"
|
placeholder="请输入借阅目的"
|
clearable
|
:disabled="isReturned"
|
/>
|
</up-form-item>
|
|
<up-form-item label="备注">
|
<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-popup :show="showBorrowDatePicker" mode="bottom" @close="showBorrowDatePicker = false">
|
<up-datetime-picker
|
:show="true"
|
v-model="borrowDateValue"
|
@confirm="onBorrowDateConfirm"
|
@cancel="showBorrowDatePicker = false"
|
mode="date"
|
/>
|
</up-popup>
|
|
<!-- 应归还日期选择器 -->
|
<up-popup :show="showDueDatePicker" mode="bottom" @close="showDueDatePicker = false">
|
<up-datetime-picker
|
:show="true"
|
v-model="dueReturnDateValue"
|
@confirm="onDueDateConfirm"
|
@cancel="showDueDatePicker = false"
|
mode="date"
|
/>
|
</up-popup>
|
|
<!-- 文档选择器 -->
|
<up-action-sheet
|
:show="showDocPicker"
|
:actions="documentOptions"
|
title="选择借阅书籍"
|
@select="onDocSelect"
|
@close="showDocPicker = false"
|
/>
|
</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 { addBorrow, updateBorrow, getDocumentList } from "@/api/fileManagement/borrow";
|
|
const formRef = ref();
|
const loading = ref(false);
|
const borrowId = ref("");
|
const isEdit = ref(false);
|
|
// 弹窗显示状态
|
const showDocPicker = ref(false);
|
const showBorrowDatePicker = ref(false);
|
const showDueDatePicker = ref(false);
|
|
// 数据
|
const documentList = ref([]);
|
const borrowDateValue = ref(Date.now());
|
const dueReturnDateValue = ref(Date.now());
|
const displayDocName = ref(""); // 用于显示的文档名称
|
|
const form = ref({
|
id: "",
|
documentationId: "",
|
borrower: "",
|
borrowPurpose: "",
|
borrowDate: "",
|
dueReturnDate: "",
|
remark: "",
|
borrowStatus: "",
|
});
|
|
const rules = {
|
borrower: [{ required: true, message: "请输入借阅人", trigger: "blur" }],
|
documentationId: [{ required: true, message: "请选择借阅书籍", trigger: "change" }],
|
borrowPurpose: [{ required: true, message: "请输入借阅目的", trigger: "blur" }],
|
borrowDate: [{ required: true, message: "请选择借阅日期", trigger: "change" }],
|
dueReturnDate: [{ 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,
|
}));
|
});
|
|
// 返回上一页
|
const goBack = () => {
|
uni.removeStorageSync("borrowEditData");
|
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.documentationId = e.id;
|
displayDocName.value = e.name;
|
showDocPicker.value = false;
|
};
|
|
// 借阅日期确认
|
const onBorrowDateConfirm = (e) => {
|
const date = new Date(e.value);
|
form.value.borrowDate = formatDate(date);
|
showBorrowDatePicker.value = false;
|
};
|
|
// 应归还日期确认
|
const onDueDateConfirm = (e) => {
|
const date = new Date(e.value);
|
form.value.dueReturnDate = formatDate(date);
|
showDueDatePicker.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 updateBorrow({
|
id: form.value.id,
|
borrower: form.value.borrower,
|
borrowPurpose: form.value.borrowPurpose,
|
borrowDate: form.value.borrowDate,
|
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 addBorrow({
|
documentationId: form.value.documentationId,
|
borrower: form.value.borrower,
|
borrowPurpose: form.value.borrowPurpose,
|
borrowDate: form.value.borrowDate,
|
dueReturnDate: form.value.dueReturnDate,
|
borrowStatus: "借阅",
|
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;
|
borrowId.value = options.id;
|
|
// 从 storage 获取编辑数据
|
const editDataStr = uni.getStorageSync("borrowEditData");
|
if (editDataStr) {
|
try {
|
const data = JSON.parse(editDataStr);
|
Object.assign(form.value, data);
|
borrowDateValue.value = new Date(data.borrowDate).getTime();
|
dueReturnDateValue.value = new Date(data.dueReturnDate).getTime();
|
// 直接使用传递的文档名称显示，尝试多个可能的字段名
|
displayDocName.value = data.docName || data.documentationName || data.fileName || data.name || "";
|
} catch (e) {
|
console.error("解析编辑数据失败", e);
|
}
|
}
|
} else {
|
// 新增模式，加载文档列表并设置默认日期
|
loadDocumentList();
|
const today = new Date();
|
form.value.borrowDate = formatDate(today);
|
borrowDateValue.value = today.getTime();
|
}
|
});
|
</script>
|
|
<style lang="scss">
|
@import "@/static/scss/form-common.scss";
|
|
.borrow-edit {
|
min-height: 100vh;
|
background: #f5f5f5;
|
}
|
</style>
|
