|
|
|
|
@ -176,12 +176,7 @@
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="分类" prop="category">
|
|
|
|
|
<el-select v-model="bookForm.category" placeholder="请选择分类">
|
|
|
|
|
<el-option label="技术类" value="tech"></el-option>
|
|
|
|
|
<el-option label="商业类" value="business"></el-option>
|
|
|
|
|
<el-option label="管理类" value="management"></el-option>
|
|
|
|
|
<el-option label="金融类" value="finance"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-input v-model="bookForm.category" placeholder="请输入分类"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -229,6 +224,8 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { save } from '@/api/library'
|
|
|
|
|
import { uploads } from '@/api/uploads'
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Library',
|
|
|
|
|
data() {
|
|
|
|
|
@ -300,7 +297,8 @@ export default {
|
|
|
|
|
year: null,
|
|
|
|
|
category: '',
|
|
|
|
|
description: '',
|
|
|
|
|
cover: ''
|
|
|
|
|
cover: '',
|
|
|
|
|
cover_id: ''
|
|
|
|
|
},
|
|
|
|
|
bookRules: {
|
|
|
|
|
title: [
|
|
|
|
|
@ -310,7 +308,7 @@ export default {
|
|
|
|
|
{ required: true, message: '请输入作者', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
category: [
|
|
|
|
|
{ required: true, message: '请选择分类', trigger: 'change' }
|
|
|
|
|
{ required: true, message: '请输入分类', trigger: 'blur' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -338,7 +336,7 @@ export default {
|
|
|
|
|
management: 'warning',
|
|
|
|
|
finance: 'danger'
|
|
|
|
|
}
|
|
|
|
|
return categoryMap[category]
|
|
|
|
|
return categoryMap[category] || 'info'
|
|
|
|
|
},
|
|
|
|
|
getStatusTagType(status) {
|
|
|
|
|
const statusMap = {
|
|
|
|
|
@ -402,57 +400,66 @@ export default {
|
|
|
|
|
triggerCoverUpload() {
|
|
|
|
|
this.$refs.coverInput.click()
|
|
|
|
|
},
|
|
|
|
|
handleCoverUpload(event) {
|
|
|
|
|
async handleCoverUpload(event) {
|
|
|
|
|
const file = event.target.files[0]
|
|
|
|
|
if (file) {
|
|
|
|
|
if (!file.type.match(/^image\/(jpeg|jpg|png)$/)) {
|
|
|
|
|
this.$message.error('请选择 JPG 或 PNG 格式的图片')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
|
|
|
this.$message.error('图片大小不能超过 2MB')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 预览
|
|
|
|
|
const reader = new FileReader()
|
|
|
|
|
reader.onload = (e) => {
|
|
|
|
|
this.bookForm.cover = e.target.result
|
|
|
|
|
}
|
|
|
|
|
reader.readAsDataURL(file)
|
|
|
|
|
// 上传
|
|
|
|
|
const formData = new FormData()
|
|
|
|
|
formData.append('file', file)
|
|
|
|
|
try {
|
|
|
|
|
const res = await uploads(formData)
|
|
|
|
|
this.bookForm.cover_id = res.id
|
|
|
|
|
this.$message.success('封面上传成功')
|
|
|
|
|
} catch (e) {
|
|
|
|
|
this.$message.error('封面上传失败')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
saveBook() {
|
|
|
|
|
this.$refs.bookForm.validate((valid) => {
|
|
|
|
|
async saveBook() {
|
|
|
|
|
this.$refs.bookForm.validate(async (valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
console.log('保存图书:', this.bookForm)
|
|
|
|
|
|
|
|
|
|
// 模拟保存过程
|
|
|
|
|
const loading = this.$loading({
|
|
|
|
|
lock: true,
|
|
|
|
|
text: '正在保存...',
|
|
|
|
|
spinner: 'el-icon-loading',
|
|
|
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
try {
|
|
|
|
|
const params = {
|
|
|
|
|
title: this.bookForm.title,
|
|
|
|
|
author: this.bookForm.author,
|
|
|
|
|
isbn: this.bookForm.isbn,
|
|
|
|
|
publisher: this.bookForm.publisher,
|
|
|
|
|
publish_year: this.bookForm.year,
|
|
|
|
|
category: this.bookForm.category,
|
|
|
|
|
description: this.bookForm.description,
|
|
|
|
|
cover_id: this.bookForm.cover_id
|
|
|
|
|
}
|
|
|
|
|
console.log('params', params)
|
|
|
|
|
await save(params)
|
|
|
|
|
loading.close()
|
|
|
|
|
this.$message.success('图书添加成功!')
|
|
|
|
|
this.showUploadModal = false
|
|
|
|
|
this.resetForm()
|
|
|
|
|
|
|
|
|
|
// 添加到列表(实际应用中应该重新获取列表)
|
|
|
|
|
const newBook = {
|
|
|
|
|
id: Date.now(),
|
|
|
|
|
...this.bookForm,
|
|
|
|
|
categoryText: this.getCategoryText(this.bookForm.category),
|
|
|
|
|
status: 'available',
|
|
|
|
|
statusText: '可借阅',
|
|
|
|
|
addDate: new Date().toISOString().split('T')[0],
|
|
|
|
|
addTime: new Date().toTimeString().split(' ')[0].substring(0, 5)
|
|
|
|
|
}
|
|
|
|
|
this.list.unshift(newBook)
|
|
|
|
|
}, 1000)
|
|
|
|
|
// 重新获取列表或手动添加
|
|
|
|
|
} catch (e) {
|
|
|
|
|
loading.close()
|
|
|
|
|
this.$message.error('添加失败,请重试' + e.message)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error('请填写必填字段')
|
|
|
|
|
return false
|
|
|
|
|
@ -469,7 +476,8 @@ export default {
|
|
|
|
|
year: null,
|
|
|
|
|
category: '',
|
|
|
|
|
description: '',
|
|
|
|
|
cover: ''
|
|
|
|
|
cover: '',
|
|
|
|
|
cover_id: ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getCategoryText(category) {
|
|
|
|
|
@ -479,7 +487,7 @@ export default {
|
|
|
|
|
management: '管理类',
|
|
|
|
|
finance: '金融类'
|
|
|
|
|
}
|
|
|
|
|
return categoryMap[category] || ''
|
|
|
|
|
return categoryMap[category] || category || ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -720,11 +728,9 @@ export default {
|
|
|
|
|
.book-stats {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.library-container {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-number {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
}
|
|
|
|
|
|