684 lines
18 KiB
Vue
684 lines
18 KiB
Vue
<template>
|
||
<div class="house-management-container">
|
||
<!-- 搜索区域 -->
|
||
<div class="search-area">
|
||
<el-form :inline="true" :model="state.query" class="search-form">
|
||
<el-form-item label="版权名称：" class="search-item">
|
||
<el-input
|
||
v-model="state.query.title"
|
||
placeholder="请输入版权名称"
|
||
clearable
|
||
@input="handleSearch"
|
||
class="search-input"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="状态：" class="search-item">
|
||
<el-select clearable
|
||
v-model="state.query.status"
|
||
placeholder="请选择状态"
|
||
@change="handleSearch"
|
||
style="width: 120px">
|
||
<el-option
|
||
v-for="item in state.statusOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item class="action-buttons">
|
||
<el-button type="primary" @click="init" class="query-button">
|
||
<el-icon>
|
||
<Search />
|
||
</el-icon>
|
||
<span>查询</span>
|
||
</el-button>
|
||
<el-button type="primary" @click="openAddDialog" class="add-button">
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>
|
||
<span>添加</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- 表格区域 -->
|
||
<div class="table-area">
|
||
<el-table
|
||
v-loading="state.loading"
|
||
:data="state.list"
|
||
stripe
|
||
border
|
||
class="data-table"
|
||
empty-text="暂无数据"
|
||
>
|
||
<el-table-column label="封面图" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-image :src="row.image" fit="cover" class="book-image" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="isbn" label="ISBN" align="center" />
|
||
<el-table-column prop="title" label="书名" align="center" />
|
||
<el-table-column prop="author" label="作者" align="center" />
|
||
<el-table-column prop="publisher" label="出版社" align="center" />
|
||
<el-table-column prop="publishDate" label="出版日期" align="center" />
|
||
<el-table-column prop="copyrightOwner" label="版权持有人" align="center" />
|
||
<el-table-column prop="copyrightStartYear" label="版权开始" align="center" />
|
||
<el-table-column prop="copyrightEndYear" label="版权到期" align="center" />
|
||
<el-table-column prop="edition" label="版次" align="center" />
|
||
<el-table-column prop="price" label="定价(元)" align="center" />
|
||
<el-table-column label="状态" align="center" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" fixed="right" width="220" align="center">
|
||
<template #default="{ row }">
|
||
<el-button size="small" type="info" plain @click="showDetail(row)">详情</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
plain
|
||
@click="edit(row)"
|
||
v-if="row.status === '未审核'"
|
||
>
|
||
编辑
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="warning"
|
||
plain
|
||
@click="openAuditDialog(row)"
|
||
v-if="row.status === '未审核'"
|
||
>
|
||
审核
|
||
</el-button>
|
||
<el-popconfirm
|
||
title="确认删除该版权信息？"
|
||
@confirm="del(row.id)"
|
||
>
|
||
<template #reference>
|
||
<el-button size="small" type="danger" plain>删除</el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<div class="pagination-container" v-if="state.query.total > 0">
|
||
<el-pagination
|
||
:current-page="state.query.page"
|
||
:page-size="state.query.limit"
|
||
:total="state.query.total"
|
||
:page-sizes="[5,10,20,50]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
background
|
||
@size-change="handleSizeChange"
|
||
@current-change="handlePageChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 在template中添加详情对话框 -->
|
||
<el-dialog
|
||
v-model="state.detailVisible"
|
||
title="版权详情"
|
||
width="50%"
|
||
class="detail-dialog"
|
||
>
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="ISBN">{{ state.detailData.isbn }}</el-descriptions-item>
|
||
<el-descriptions-item label="书名">{{ state.detailData.title }}</el-descriptions-item>
|
||
<el-descriptions-item label="作者">{{ state.detailData.author }}</el-descriptions-item>
|
||
<el-descriptions-item label="出版社">{{ state.detailData.publisher }}</el-descriptions-item>
|
||
<el-descriptions-item label="出版日期">{{ state.detailData.publishDate }}</el-descriptions-item>
|
||
<el-descriptions-item label="版权持有人">{{ state.detailData.copyrightOwner }}</el-descriptions-item>
|
||
<el-descriptions-item label="版权开始">{{ state.detailData.copyrightStartYear }}</el-descriptions-item>
|
||
<el-descriptions-item label="版权到期">{{ state.detailData.copyrightEndYear }}</el-descriptions-item>
|
||
<el-descriptions-item label="版次">{{ state.detailData.edition }}</el-descriptions-item>
|
||
<el-descriptions-item label="定价(元)">{{ state.detailData.price }}</el-descriptions-item>
|
||
<el-descriptions-item label="状态">
|
||
<el-tag :type="getStatusTagType(state.detailData.status)">
|
||
{{ state.detailData.status }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<div class="detail-image-container">
|
||
<el-image
|
||
:src="state.detailData.image"
|
||
fit="contain"
|
||
class="detail-image"
|
||
:preview-src-list="[state.detailData.image]"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="state.detailVisible = false">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 在template中添加审核对话框 -->
|
||
<el-dialog
|
||
v-model="state.auditVisible"
|
||
title="版权审核"
|
||
width="40%"
|
||
>
|
||
<el-form :model="state.auditForm" label-width="100px">
|
||
<el-form-item label="审核状态">
|
||
<el-radio-group v-model="state.auditForm.status">
|
||
<el-radio label="已同意">同意</el-radio>
|
||
<el-radio label="已拒绝">拒绝</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="审核意见">
|
||
<el-input
|
||
v-model="state.auditForm.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入审核意见"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="state.auditVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="submitAudit">提交审核</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 在template中添加表单对话框 -->
|
||
<el-dialog
|
||
v-model="state.dialogVisible"
|
||
:title="state.formData.id ? '编辑版权' : '新增版权'"
|
||
width="50%"
|
||
class="form-dialog"
|
||
>
|
||
<el-form
|
||
ref="formRef"
|
||
:model="state.formData"
|
||
:rules="state.rules"
|
||
label-width="100px"
|
||
>
|
||
<el-form-item label="ISBN" prop="isbn">
|
||
<el-input v-model="state.formData.isbn" placeholder="请输入ISBN" />
|
||
</el-form-item>
|
||
<el-form-item label="书名" prop="title">
|
||
<el-input v-model="state.formData.title" placeholder="请输入书名" />
|
||
</el-form-item>
|
||
<el-form-item label="作者" prop="author">
|
||
<el-input v-model="state.formData.author" placeholder="请输入作者" />
|
||
</el-form-item>
|
||
<el-form-item label="出版社" prop="publisher">
|
||
<el-input v-model="state.formData.publisher" placeholder="请输入出版社" />
|
||
</el-form-item>
|
||
<el-form-item label="出版日期" prop="publishDate">
|
||
<el-date-picker
|
||
v-model="state.formData.publishDate"
|
||
type="date"
|
||
placeholder="选择出版日期"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="版权持有人" prop="copyrightOwner">
|
||
<el-input
|
||
v-model="state.formData.copyrightOwner"
|
||
placeholder="请输入版权持有人"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="开始年份" prop="copyrightStartYear">
|
||
<el-input
|
||
v-model="state.formData.copyrightStartYear"
|
||
placeholder="请输入版权开始年份"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="到期年份" prop="copyrightEndYear">
|
||
<el-input
|
||
v-model="state.formData.copyrightEndYear"
|
||
placeholder="请输入版权到期年份"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="版次" prop="edition">
|
||
<el-input v-model="state.formData.edition" placeholder="请输入版次" />
|
||
</el-form-item>
|
||
<el-form-item label="定价(元)" prop="price">
|
||
<el-input-number
|
||
v-model="state.formData.price"
|
||
:min="0"
|
||
:precision="2"
|
||
controls-position="right"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="封面图" prop="image">
|
||
|
||
<el-upload
|
||
:action="state.path"
|
||
list-type="picture-card"
|
||
:show-file-list="false"
|
||
:on-success="handleImageSuccess"
|
||
:before-upload="beforeImageUpload"
|
||
>
|
||
<img
|
||
v-if="state.formData.image"
|
||
:src="state.formData.image"
|
||
class="uploaded-image"
|
||
alt="封面图片"
|
||
/>
|
||
<el-icon v-else class="uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
</el-upload>
|
||
<div class="upload-tip">建议尺寸16:9，大小不超过5MB</div>
|
||
</el-form-item>
|
||
<el-form-item label="电子文件" prop="file" class="file-upload-item">
|
||
<el-upload
|
||
drag
|
||
:action="state.path"
|
||
:limit="1"
|
||
:on-success="handleFileSuccess"
|
||
:on-error="handleUploadError"
|
||
:before-upload="beforeFileUpload"
|
||
:file-list="fileList"
|
||
>
|
||
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
||
<div class="el-upload__text">
|
||
将图书电子文件拖到此处，或<em>点击上传</em>
|
||
</div>
|
||
<template #tip>
|
||
<div class="el-upload__tip">
|
||
支持PDF、EPUB等格式，大小不超过50MB
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="closeDialog">取消</el-button>
|
||
<el-button type="primary" @click="saveTransaction">保存</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import type { FormInstance, UploadProps } from 'element-plus'
|
||
import { Search, Plus, Picture, UploadFilled } from '@element-plus/icons-vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { getDecoration, getFace, getHouseType } from '~/utils/utils'
|
||
|
||
// 文件列表
|
||
const fileList = ref([])
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const state = reactive({
|
||
path:import.meta.env.VITE_API_FRONT_BASE_URL+"/api/upload",
|
||
route: 'sys/book',
|
||
loading: false,
|
||
list: [] as any[],
|
||
dialogVisible: false,
|
||
// 搜索 / 分页
|
||
query: {
|
||
total: 0,
|
||
page: 1,
|
||
limit: 5,
|
||
title: '',
|
||
status: null as number | null
|
||
},
|
||
// 下拉状态选项
|
||
statusOptions: [
|
||
{ label: '全部', value: null },
|
||
{ label: '未审核', value: '未审核' },
|
||
{ label: '已同意', value: '已同意' },
|
||
{ label: '已拒绝', value: '已拒绝' }
|
||
],
|
||
// 表单数据
|
||
formData: {} as Record<string, any>,
|
||
userList: [],
|
||
detailVisible: false,
|
||
detailData: {} as any,
|
||
auditVisible: false,
|
||
auditForm: {
|
||
id: null as number | null,
|
||
status: '已同意',
|
||
remark: ''
|
||
},
|
||
// 表单验证规则
|
||
rules: {
|
||
isbn: [
|
||
{ required: true, message: '请输入ISBN', trigger: 'blur' },
|
||
{ min: 10, max: 13, message: 'ISBN长度在10到13个字符', trigger: 'blur' }
|
||
],
|
||
title: [
|
||
{ required: true, message: '请输入书名', trigger: 'blur' },
|
||
{ max: 100, message: '书名不能超过100个字符', trigger: 'blur' }
|
||
],
|
||
author: [
|
||
{ required: true, message: '请输入作者', trigger: 'blur' },
|
||
{ max: 50, message: '作者名不能超过50个字符', trigger: 'blur' }
|
||
],
|
||
publisher: [
|
||
{ required: true, message: '请输入出版社', trigger: 'blur' },
|
||
{ max: 100, message: '出版社名称不能超过100个字符', trigger: 'blur' }
|
||
],
|
||
publishDate: [
|
||
{ required: true, message: '请选择出版日期', trigger: 'change' }
|
||
],
|
||
copyrightOwner: [
|
||
{ required: true, message: '请输入版权持有人', trigger: 'blur' },
|
||
{ max: 100, message: '版权持有人不能超过100个字符', trigger: 'blur' }
|
||
],
|
||
copyrightStartYear: [
|
||
{ required: true, message: '请输入版权开始年份', trigger: 'blur' },
|
||
{ pattern: /^\d{4}$/, message: '请输入4位年份', trigger: 'blur' }
|
||
],
|
||
copyrightEndYear: [
|
||
{ required: true, message: '请输入版权到期年份', trigger: 'blur' },
|
||
{ pattern: /^\d{4}$/, message: '请输入4位年份', trigger: 'blur' }
|
||
],
|
||
edition: [
|
||
{ required: true, message: '请输入版次', trigger: 'blur' },
|
||
{ max: 20, message: '版次不能超过20个字符', trigger: 'blur' }
|
||
],
|
||
price: [
|
||
{ required: true, message: '请输入定价', trigger: 'blur' },
|
||
{ type: 'number', min: 0, message: '定价必须大于0', trigger: 'blur' }
|
||
],
|
||
image: [
|
||
{ required: true, message: '请上传封面图', trigger: 'change' }
|
||
]
|
||
}
|
||
})
|
||
// 文件上传前校验
|
||
const beforeFileUpload: UploadProps['beforeUpload'] = (file) => {
|
||
const allowedTypes = ['application/pdf', 'application/epub+zip']
|
||
const isAllowedType = allowedTypes.includes(file.type)
|
||
const isLt50M = file.size / 1024 / 1024 < 50
|
||
|
||
if (!isAllowedType) {
|
||
ElMessage.error('只能上传PDF或EPUB文件!')
|
||
return false
|
||
}
|
||
if (!isLt50M) {
|
||
ElMessage.error('文件大小不能超过50MB!')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
// 上传错误处理
|
||
const handleUploadError: UploadProps['onError'] = () => {
|
||
ElMessage.error('文件上传失败，请重试')
|
||
}
|
||
// 图片上传前校验
|
||
const beforeImageUpload: UploadProps['beforeUpload'] = (file) => {
|
||
const isImage = file.type.startsWith('image/')
|
||
const isLt5M = file.size / 1024 / 1024 < 5
|
||
|
||
if (!isImage) {
|
||
ElMessage.error('只能上传图片文件!')
|
||
return false
|
||
}
|
||
if (!isLt5M) {
|
||
ElMessage.error('图片大小不能超过5MB!')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
// 图片上传成功处理
|
||
const handleImageSuccess: UploadProps['onSuccess'] = (response) => {
|
||
state.formData.image = response.data.path
|
||
}
|
||
|
||
// 文件上传成功处理
|
||
const handleFileSuccess: UploadProps['onSuccess'] = (response) => {
|
||
state.formData.file = response.data.path
|
||
}
|
||
|
||
|
||
|
||
// 添加新方法
|
||
const showDetail = (row: any) => {
|
||
state.detailData = { ...row }
|
||
state.detailVisible = true
|
||
}
|
||
|
||
const openAuditDialog = (row: any) => {
|
||
state.auditForm = {
|
||
id: row.id,
|
||
status: '已同意',
|
||
remark: ''
|
||
}
|
||
state.auditVisible = true
|
||
}
|
||
|
||
const submitAudit = async () => {
|
||
try {
|
||
await adminRequest.put(`${state.route}/audit`, state.auditForm)
|
||
ElMessage.success('审核提交成功')
|
||
state.auditVisible = false
|
||
init()
|
||
} catch {
|
||
ElMessage.error('审核提交失败')
|
||
}
|
||
}
|
||
// 拉取列表
|
||
const init = () => {
|
||
state.loading = true
|
||
adminRequest
|
||
.get(`${state.route}/page`, { params: state.query })
|
||
.then((res: any) => {
|
||
state.list = res.data.list
|
||
state.query.total = res.data.total
|
||
})
|
||
.finally(() => {
|
||
state.loading = false
|
||
})
|
||
|
||
adminRequest.get(`sys/user-front/page`, {
|
||
params: { limit: 999 }
|
||
}).then((res: any) => {
|
||
state.userList = res.data.list
|
||
})
|
||
}
|
||
|
||
// 搜索重置页码
|
||
const handleSearch = () => {
|
||
state.query.page = 1
|
||
init()
|
||
}
|
||
|
||
// 打开新增
|
||
const openAddDialog = () => {
|
||
state.formData = {}
|
||
state.dialogVisible = true
|
||
nextTick(() => formRef.value?.clearValidate())
|
||
}
|
||
|
||
// 关闭对话框
|
||
const closeDialog = () => {
|
||
state.dialogVisible = false
|
||
state.formData = {}
|
||
}
|
||
|
||
// 编辑
|
||
const edit = (row: any) => {
|
||
state.formData = { ...row }
|
||
state.dialogVisible = true
|
||
}
|
||
|
||
// 保存（新增/更新）
|
||
const saveTransaction = () => {
|
||
formRef.value?.validate(async valid => {
|
||
if (!valid) return
|
||
try {
|
||
const req = state.formData.id
|
||
? adminRequest.put(`${state.route}`, state.formData)
|
||
: adminRequest.post(`${state.route}`, state.formData)
|
||
await req
|
||
ElMessage.success('操作成功')
|
||
closeDialog()
|
||
init()
|
||
} catch {
|
||
ElMessage.error('操作失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
// 删除
|
||
const del = async (id: number) => {
|
||
try {
|
||
await adminRequest.delete(`${state.route}/${id}`)
|
||
ElMessage.success('删除成功')
|
||
init()
|
||
} catch {
|
||
ElMessage.error('删除失败')
|
||
}
|
||
}
|
||
|
||
// 分页
|
||
const handlePageChange = (page: number) => {
|
||
state.query.page = page
|
||
init()
|
||
}
|
||
const handleSizeChange = (size: number) => {
|
||
state.query.limit = size
|
||
init()
|
||
}
|
||
// 处理图片上传回调
|
||
const handleImageUrl = (url: string) => {
|
||
state.formData.image = url
|
||
}
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
|
||
// 获取状态标签类型
|
||
function getStatusTagType(status: string) {
|
||
switch (status) {
|
||
case '已同意':
|
||
return 'success'
|
||
case '已拒绝':
|
||
return 'danger'
|
||
case '未审核':
|
||
return 'warning'
|
||
default:
|
||
return 'info'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.avatar-uploader {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 150px;
|
||
height: 200px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-uploader:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.avatar {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
}
|
||
|
||
|
||
.house-management-container {
|
||
padding: 20px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.search-area {
|
||
margin-bottom: 20px;
|
||
|
||
.search-form {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.search-item {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.search-input {
|
||
width: 220px;
|
||
}
|
||
|
||
.action-buttons {
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table-area {
|
||
.data-table {
|
||
width: 100%;
|
||
|
||
.house-image {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 4px;
|
||
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination-container {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
.form-dialog {
|
||
:deep(.el-dialog__body) {
|
||
padding: 20px 30px;
|
||
}
|
||
|
||
.image-uploader {
|
||
width: 100%;
|
||
}
|
||
|
||
.dialog-footer {
|
||
text-align: center;
|
||
padding-top: 16px;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
}
|
||
|
||
.detail-dialog {
|
||
.detail-image-container {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.detail-image {
|
||
max-width: 200px;
|
||
max-height: 300px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<route lang="json">
|
||
{
|
||
"meta": {
|
||
"layout": "admin"
|
||
}
|
||
}
|
||
</route>
|