已完成借阅功能
This commit is contained in:
zhanghongyu04
parent
fdf02242fe
commit
dbd0bd34cf
192
ruoyi-ui/src/views/boook/borrwing/index.vue
Normal file
192
ruoyi-ui/src/views/boook/borrwing/index.vue
Normal file
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-folder-opened"
|
||||
size="mini"
|
||||
@click="handleBorrow"
|
||||
v-hasPermi="['boook:records:add']"
|
||||
>借书</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="serList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="图书编号" align="center" prop="bookId" />
|
||||
<el-table-column label="书名" align="center" prop="titLe" />
|
||||
<el-table-column label="库存数量" align="center" prop="quanTity" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-folder-opened"
|
||||
@click="handleBorrow(scope.row)"
|
||||
v-hasPermi="['boook:records:add']"
|
||||
>借书</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 借书对话框 -->
|
||||
<el-dialog :title="borrowDialogTitle" :visible.sync="borrowDialogVisible" width="500px" append-to-body>
|
||||
<el-form ref="borrowForm" :model="borrowForm" :rules="borrowRules" label-width="80px">
|
||||
<el-form-item label="用户编号" prop="userId">
|
||||
<el-input v-model="borrowForm.userId" placeholder="请输入用户编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图书编号" prop="bookId">
|
||||
<el-input v-model="borrowForm.bookId" placeholder="请输入图书编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="借书日期" prop="borrowDate">
|
||||
<el-date-picker
|
||||
v-model="borrowForm.borrowDate"
|
||||
type="date"
|
||||
placeholder="选择借书日期"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预计还书日期" prop="expectedReturnDate">
|
||||
<el-date-picker
|
||||
v-model="borrowForm.expectedReturnDate"
|
||||
type="date"
|
||||
placeholder="选择预计还书日期"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitBorrowForm">确 定</el-button>
|
||||
<el-button @click="cancelBorrowDialog">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listSer } from "@/api/boook/ser";
|
||||
import { addRecords } from "@/api/boook/records"; // 借书 API
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格加载状态
|
||||
loading: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
titLe: null,
|
||||
puBlisher: null,
|
||||
autHor: null,
|
||||
},
|
||||
// 数据列表
|
||||
serList: [],
|
||||
total: 0,
|
||||
// 借书对话框状态
|
||||
borrowDialogVisible: false,
|
||||
borrowDialogTitle: "借书",
|
||||
// 借书表单
|
||||
borrowForm: {
|
||||
userId: "",
|
||||
bookId: "",
|
||||
borrowDate: null,
|
||||
expectedReturnDate: null,
|
||||
},
|
||||
// 借书表单校验规则
|
||||
borrowRules: {
|
||||
userId: [
|
||||
{ required: true, message: "用户编号不能为空", trigger: "blur" },
|
||||
],
|
||||
bookId: [
|
||||
{ required: true, message: "图书编号不能为空", trigger: "blur" },
|
||||
],
|
||||
borrowDate: [
|
||||
{ required: true, message: "借书日期不能为空", trigger: "change" },
|
||||
],
|
||||
expectedReturnDate: [
|
||||
{ required: true, message: "预计还书日期不能为空", trigger: "change" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/** 查询书籍信息列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listSer(this.queryParams).then((response) => {
|
||||
this.serList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 打开借书对话框 */
|
||||
handleBorrow(row = null) {
|
||||
if (row) {
|
||||
// 如果从行点击，则预填充书籍编号
|
||||
this.borrowForm.bookId = row.bookId;
|
||||
}
|
||||
this.borrowDialogVisible = true;
|
||||
},
|
||||
|
||||
/** 提交借书表单 */
|
||||
submitBorrowForm() {
|
||||
this.$refs["borrowForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
// 格式化日期字段
|
||||
this.borrowForm.borrowDate = this.formatDate(this.borrowForm.borrowDate);
|
||||
this.borrowForm.expectedReturnDate = this.formatDate(this.borrowForm.expectedReturnDate);
|
||||
|
||||
// 提交表单数据
|
||||
addRecords(this.borrowForm)
|
||||
.then(() => {
|
||||
this.$message.success("借书成功！");
|
||||
this.borrowDialogVisible = false;
|
||||
this.getList();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
this.$message.error("借书失败，请重试！");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消借书对话框 */
|
||||
cancelBorrowDialog() {
|
||||
this.borrowDialogVisible = false;
|
||||
this.resetBorrowForm();
|
||||
},
|
||||
|
||||
/** 重置借书表单 */
|
||||
resetBorrowForm() {
|
||||
this.borrowForm = {
|
||||
userId: "",
|
||||
bookId: "",
|
||||
borrowDate: null,
|
||||
expectedReturnDate: null,
|
||||
};
|
||||
},
|
||||
|
||||
/** 格式化日期为 YYYY-MM-DD */
|
||||
formatDate(date) {
|
||||
const formattedDate = new Date(date).toISOString().split("T")[0]; // 'YYYY-MM-DD'
|
||||
return formattedDate;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user