sz-kjsxy-web/src/views/library/index.vue

<template>
  <div class="library-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <i class="el-icon-s-comment"></i>
        图书管理
      </h2>
      <el-button type="primary" icon="el-icon-plus" @click="showUploadModal = true">
        添加图书
      </el-button>
    </div>

    <!-- 图书统计 -->
    <div class="book-stats">
      <div class="stat-card blue">
        <div class="stat-number">1,247</div>
        <div class="stat-label">总图书数量</div>
      </div>
      <div class="stat-card green">
        <div class="stat-number">856</div>
        <div class="stat-label">可借阅</div>
      </div>
      <div class="stat-card orange">
        <div class="stat-number">391</div>
        <div class="stat-label">已借出</div>
      </div>
      <div class="stat-card purple">
        <div class="stat-number">23</div>
        <div class="stat-label">维护中</div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-form :model="filters" inline>
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="搜索书名、作者、ISBN"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.category" placeholder="全部分类" clearable>
            <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-form-item>
        <el-form-item>
          <el-select v-model="filters.status" placeholder="全部状态" clearable>
            <el-option label="可借阅" value="available"></el-option>
            <el-option label="已借出" value="borrowed"></el-option>
            <el-option label="维护中" value="maintenance"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-download" @click="handleExport">导出数据</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="el-icon-upload2" @click="handleImport">批量导入</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 图书列表表格 -->
    <div class="table-container">
      <el-table
        :data="list"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="封面" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.cover" alt="图书封面" class="book-cover">
          </template>
        </el-table-column>
        <el-table-column label="图书信息" min-width="250">
          <template slot-scope="scope">
            <div class="book-title">{{ scope.row.title }}</div>
            <div class="book-author">作者：{{ scope.row.author }} · 出版社：{{ scope.row.publisher }} · {{ scope.row.year }}年</div>
          </template>
        </el-table-column>
        <el-table-column label="分类" width="100">
          <template slot-scope="scope">
            <el-tag :type="getCategoryTagType(scope.row.category)" size="small">{{ scope.row.categoryText }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="ISBN" width="150">
          <template slot-scope="scope">
            {{ scope.row.isbn }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ scope.row.statusText }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="150">
          <template slot-scope="scope">
            <div class="time-display">{{ scope.row.addDate }}</div>
            <div class="time-display-secondary">{{ scope.row.addTime }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="info" size="mini" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
              <el-button v-if="scope.row.status === 'borrowed'" type="warning" size="mini" icon="el-icon-refresh-left" @click="handleReturn(scope.row)">归还</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 添加图书弹窗 -->
    <el-dialog
      title="添加图书"
      :visible.sync="showUploadModal"
      width="600px"
      :before-close="handleCloseModal"
    >
      <el-form :model="bookForm" :rules="bookRules" ref="bookForm" label-width="100px">
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-info"></i>
            基本信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="书名" prop="title">
                <el-input v-model="bookForm.title" placeholder="请输入书名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作者" prop="author">
                <el-input v-model="bookForm.author" placeholder="请输入作者"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="ISBN">
                <el-input v-model="bookForm.isbn" placeholder="978-7-xxx-xxxxx-x"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出版社">
                <el-input v-model="bookForm.publisher" placeholder="请输入出版社"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出版年份">
                <el-input-number v-model="bookForm.year" :min="1900" :max="2030" placeholder="年份"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类" prop="category">
                <el-input v-model="bookForm.category" placeholder="请输入分类"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="图书简介">
            <el-input
              type="textarea"
              v-model="bookForm.description"
              :rows="3"
              :maxlength="500"
              placeholder="请输入图书简介"
              show-word-limit
            ></el-input>
          </el-form-item>
        </div>

        <!-- 封面上传 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-picture"></i>
            图书封面
          </div>
          <div class="upload-area" @click="triggerCoverUpload">
            <div v-if="!bookForm.cover" class="upload-placeholder">
              <i class="el-icon-upload" style="font-size: 32px; color: #9ca3af; margin-bottom: 10px;"></i>
              <div style="color: #374151; font-weight: 500;">点击上传图书封面</div>
              <div style="color: #9ca3af; font-size: 12px; margin-top: 5px;">支持 JPG、PNG 格式，建议尺寸 300×400</div>
            </div>
            <img v-else :src="bookForm.cover" alt="封面预览" class="upload-preview">
          </div>
          <input
            ref="coverInput"
            type="file"
            accept="image/*"
            style="display: none;"
            @change="handleCoverUpload"
          >
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUploadModal = false">取消</el-button>
        <el-button type="primary" @click="saveBook">保存图书</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { save } from '@/api/library'
import { uploads } from '@/api/uploads'
export default {
  name: 'Library',
  data() {
    return {
      showUploadModal: false,
      filters: {
        keyword: '',
        category: '',
        status: ''
      },
      list: [
        {
          id: 1,
          title: '深度学习实战指南',
          author: '张三',
          publisher: '机械工业出版社',
          year: '2023',
          isbn: '978-7-111-12345-6',
          category: 'tech',
          categoryText: '技术类',
          status: 'available',
          statusText: '可借阅',
          cover: 'https://via.placeholder.com/50x70/4285f4/ffffff?text=书',
          addDate: '2024-01-15',
          addTime: '10:30'
        },
        {
          id: 2,
          title: '创业公司股权设计',
          author: '李四',
          publisher: '中信出版社',
          year: '2023',
          isbn: '978-7-508-67890-1',
          category: 'business',
          categoryText: '商业类',
          status: 'borrowed',
          statusText: '已借出',
          cover: 'https://via.placeholder.com/50x70/ff9800/ffffff?text=书',
          addDate: '2024-01-14',
          addTime: '15:20'
        },
        {
          id: 3,
          title: '敏捷项目管理实践',
          author: '王五',
          publisher: '电子工业出版社',
          year: '2022',
          isbn: '978-7-121-34567-8',
          category: 'management',
          categoryText: '管理类',
          status: 'available',
          statusText: '可借阅',
          cover: 'https://via.placeholder.com/50x70/4caf50/ffffff?text=书',
          addDate: '2024-01-13',
          addTime: '09:15'
        }
      ],
      total: 1247,
      listQuery: {
        page: 1,
        limit: 10
      },
      multipleSelection: [],
      bookForm: {
        title: '',
        author: '',
        isbn: '',
        publisher: '',
        year: null,
        category: '',
        description: '',
        cover: '',
        cover_id: ''
      },
      bookRules: {
        title: [
          { required: true, message: '请输入书名', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请输入分类', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索条件:', this.filters)
      this.$message.success('搜索已触发')
    },
    handleExport() {
      console.log('导出数据')
      this.$message.info('数据导出中...')
    },
    handleImport() {
      console.log('批量导入')
      this.$message.info('批量导入功能')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getCategoryTagType(category) {
      const categoryMap = {
        tech: 'primary',
        business: 'success',
        management: 'warning',
        finance: 'danger'
      }
      return categoryMap[category] || 'info'
    },
    getStatusTagType(status) {
      const statusMap = {
        available: 'success',
        borrowed: 'warning',
        maintenance: 'danger'
      }
      return statusMap[status]
    },
    handleEdit(row) {
      console.log('编辑:', row.id)
      this.$message.info('跳转到编辑页面')
    },
    handleView(row) {
      console.log('查看详情:', row.id)
      this.$message.info('跳转到详情页面')
    },
    handleReturn(row) {
      this.$confirm('确认这本图书已归还吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('归还图书:', row.id)
        row.status = 'available'
        row.statusText = '可借阅'
        this.$message.success('图书归还成功！')
      }).catch(() => {
        this.$message.info('已取消归还')
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除这本图书吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除图书:', row.id)
        // 这里应该调用删除API
        const index = this.list.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.list.splice(index, 1)
        }
        this.$message.success('图书删除成功！')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      console.log('每页显示条数:', val)
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      console.log('当前页:', val)
    },
    handleCloseModal() {
      this.resetForm()
      this.showUploadModal = false
    },
    triggerCoverUpload() {
      this.$refs.coverInput.click()
    },
    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('封面上传失败')
        }
      }
    },
    async saveBook() {
      this.$refs.bookForm.validate(async (valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在保存...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          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()
            // 重新获取列表或手动添加
          } catch (e) {
            loading.close()
            this.$message.error('添加失败，请重试' + e.message)
          }
        } else {
          this.$message.error('请填写必填字段')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.bookForm.resetFields()
      this.bookForm = {
        title: '',
        author: '',
        isbn: '',
        publisher: '',
        year: null,
        category: '',
        description: '',
        cover: '',
        cover_id: ''
      }
    },
    getCategoryText(category) {
      const categoryMap = {
        tech: '技术类',
        business: '商业类',
        management: '管理类',
        finance: '金融类'
      }
      return categoryMap[category] || category || ''
    }
  }
}
</script>

<style scoped>
.library-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  display: flex;
  align-items: center;
  margin: 0;
}

.page-title i {
  margin-right: 10px;
  color: #3498db;
  font-size: 28px;
}

.book-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-left: 4px solid;
  text-align: center;
}

.stat-card.blue { border-left-color: #3498db; }
.stat-card.green { border-left-color: #2ecc71; }
.stat-card.orange { border-left-color: #f39c12; }
.stat-card.purple { border-left-color: #9b59b6; }

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-top: 5px;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.book-cover {
  width: 50px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.book-title {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
  font-size: 14px;
}

.book-author {
  font-size: 12px;
  color: #7f8c8d;
}

.time-display {
  font-size: 12px;
  color: #333;
}

.time-display-secondary {
  font-size: 11px;
  color: #666;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.action-buttons .el-button {
  margin: 0;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
  color: #3498db;
  font-size: 18px;
}

.upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.05);
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-preview {
  max-width: 120px;
  max-height: 160px;
  border-radius: 4px;
  object-fit: cover;
}

.dialog-footer {
  text-align: right;
}

/* Element UI 表格样式覆盖 */
::v-deep .el-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: #f8f9fa;
}

::v-deep .el-pagination {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .book-stats {
    grid-template-columns: 1fr 1fr;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .search-section .el-form {
    display: block;
  }
  
  .search-section .el-form-item {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .book-stats {
    grid-template-columns: 1fr;
  }
  .library-container {
    padding: 10px;
  }
  .stat-number {
    font-size: 24px;
  }
}
</style>