增加背景图设置

This commit is contained in:
阿怪 2023-12-29 00:09:30 +08:00
parent fe816585f0
commit c8e64a1abf
3 changed files with 390 additions and 2 deletions

40
src/api/bgList.js Normal file
View File

@ -0,0 +1,40 @@
import service from '@/utils/request'
const api = {
// 背景图api
getBgManageList: data => {
return service({
url: '/poster/list',
method: 'get',
params: data
})
},
addBgManage: data => {
return service({
url: '/poster',
method: 'post',
data
})
},
editBgManage: data => {
return service({
url: '/poster',
method: 'put',
data
})
},
delBg: data => {
return service({
url: '/poster',
method: 'delete',
data
})
},
editBgState: data => {
return service({
url: '/banner/status',
method: 'put',
data
})
},
}
export default api

View File

@ -296,9 +296,10 @@ function beforeAvatarUpload(file) {
<div class="show-content text-ellipsis-1" v-html="scope.row.content"></div>
</template>
</el-table-column>
<el-table-column align="left" label="封面图" min-width="150">
<el-table-column align="left" label="封面图" min-width="50">
<template #default="scope">
<img class="lbt-thumb" :src="scope.row.cover_img" alt="">
<!-- <img class="lbt-thumb" :src="scope.row.cover_img" alt=""> -->
<el-image :src="scope.row.cover_img" fit="cover" />
</template>
</el-table-column>
<el-table-column align="left" label="阅读量" prop="reading_num" />
@ -413,6 +414,9 @@ function beforeAvatarUpload(file) {
</div>
</template>
<style scoped lang="scss">
:deep(.el-upload--text img) {
width: 100px;
}
.option-item {
display: flex;
align-items: center;

344
src/view/bgList/index.vue Normal file
View File

@ -0,0 +1,344 @@
<script setup>
//
import api from '@/api/bgList'
// import { toSQLLine } from '@/utils/stringFun'
// import WarningBar from '@/components/warningBar/warningBar.vue'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dialogFormVisible = ref(false)
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
import { parseTime } from '@/utils'
// import { fa } from 'element-plus/es/locale'
//
const path = ref(import.meta.env.VITE_BASE_API)
const queryParams = ref({
page: 1,
pageSize: 10
})
const deleteVisible = ref(false)
const lbt_ids = ref([])
const dialogTitle = ref('')
const form = ref({ status: '1' })
// const lbtType_options = ref([
// {
// label: '',
// value: 1
// }
// ])
const rules = ref({
// lbtName: [{ required: true, message: '', trigger: 'blur' }],
url: [{ required: true, message: '请选择素材', trigger: 'blur' }],
link: [{ required: true, message: '请填写跳转链接', trigger: 'blur' }],
// lbtType: [{ required: true, message: '', trigger: 'blur' }]
})
const ruleFormRef = ref(null)
const tableData = ref([])
const total = ref(0)
//
onMounted(() => {
getLbtList()
})
//
async function getLbtList() {
const res = await api.getBgManageList(queryParams.value)
if (res.code === 0) {
tableData.value = res.data.list
total.value = res.data.total
}
}
function openDialog(type) {
dialogFormVisible.value = true
switch (type) {
case 'add':
dialogTitle.value = '新增背景图'
break
case 'edit':
dialogTitle.value = '编辑背景图'
break
}
}
async function onDelete() {
const ids = lbt_ids.value.map(item => item.banner_id)
const res = await api.delBg({ ids })
if (res.code === 0) {
ElMessage({
type: 'success',
message: res.msg
})
// if (tableData.value.length === ids.length && page.value > 1) {
// page.value--
// }
deleteVisible.value = false
getLbtList()
}
}
function closeDialog() {
dialogFormVisible.value = false
form.value = { status: '1' }
}
function handleAvatarSuccess(res) {
console.log(res)
form.value.url = res.data.file.url
}
function beforeAvatarUpload(file) {
const isLt05M = file.size / 1024 / 1024 < 20
const isJPG = file.type.indexOf('image/') === -1
if (isJPG) {
ElMessage.error('文件格式错误,请上传图片类型,如JPGPNG后缀的文件')
}
if (!isLt05M) {
ElMessage.error('上传头像图片大小不能超过 2M!')
}
return !isJPG && isLt05M
}
function enterDialog() {
console.log(form.value)
submitForm(ruleFormRef.value)
}
const submitForm = async(formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
saveForm()
} else {
// console.log('error submit!', fields)
}
})
}
async function saveForm() {
// form.value.status = parseInt(form.value.status)
// form.value.linkType = parseInt(form.value.linkType)
// form.value.lbtType = parseInt(form.value.lbtType)
const params = { //
url: form.value.url,
remark: form.value.remark
// link: form.value.link
}
let func_name = ''
if (form.value.ID) { //
func_name = 'editBgManage'
params.ID = form.value.ID
} else {
func_name = 'addBgManage'
}
const res = await api[func_name](params)
if (res.code === 0) {
ElMessage({
type: 'success',
message: '操作成功!'
})
getLbtList()
closeDialog()
}
}
const handleSelectionChange = (val) => {
lbt_ids.value = val
}
function editLbtFunc(item) {
console.log(item)
form.value = item
openDialog('edit')
}
function delLbtFunc(item) {
ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
const res = await api.delBg({
// ids: [item.ID]
id: item.ID
})
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功!'
})
// if (tableData.value.length === 1 && page.value > 1) {
// page.value--
// }
getLbtList()
}
}, () => {
})
}
function handleCurrentChange(val) {
queryParams.value.page = val
getLbtList()
}
function handleSizeChange(val) {
queryParams.value.pageSize = val
getLbtList()
}
const state_loading = ref(false)
async function changeStateFunc(event, row) { //
// console.log('changeStateFunc is ====', row, event)
// state_loading.value = true
// const res = await api.editLbtState({ status: row.status })
// state_loading.value = false
// // eslint-disable-next-line no-empty
// if (res.code === 0) {
// ElMessage({
// type: 'success',
// message: '!'
// })
// return true
// } else {
// return false
// }
}
async function beforeChangeFunc(index, row) {
// console.log(row, index)
// return false
state_loading.value = true
const res = await api.editLbtState({ ID: row.ID, status: row.status == 1 ? 2 : 1 })
state_loading.value = false
// eslint-disable-next-line no-empty
if (res.code === 0) {
ElMessage({
type: 'success',
message: '修改成功!'
})
return true
} else {
return false
}
}
</script>
<template>
<div>
<div class="gva-table-box">
<!-- 批量操作-->
<div class="gva-btn-list">
<el-button size="small" type="primary" icon="plus" @click="openDialog('add')">新增</el-button>
<el-popover v-model="deleteVisible" placement="top" width="160">
<p>确定要删除吗</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="onDelete">确定</el-button>
</div>
<!-- <template #reference>
<el-button icon="delete" size="small" type="danger" :disabled="!lbt_ids.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
</template> -->
</el-popover>
</div>
<!-- 数据列表-->
<el-table border :data="tableData" @selection-change="handleSelectionChange">
<!-- <el-table-column
type="selection"
width="55"
/> -->
<!-- <el-table-column align="left" label="名称" min-width="150" prop="lbtName" /> -->
<el-table-column align="left" label="缩略图" min-width="150" prop="url">
<template #default="scope">
<img class="lbt-thumb" :src="scope.row.url" alt="">
</template>
</el-table-column>
<!-- <el-table-column align="left" label="是否启用" min-width="150" prop="status">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:loading="state_loading"
:inactive-value="2"
active-text="启用"
inactive-text="禁用"
:before-change="() => { return beforeChangeFunc($event, scope.row) }"
@change="changeStateFunc($event, scope.row)"
/>
</template>
</el-table-column> -->
<!-- <el-table-column align="left" label="说明" min-width="150" prop="lbtIntroduction" /> -->
<el-table-column align="left" label="更新时间" min-width="150" prop="UpdatedAt">
<template #default="scope">
{{ parseTime(scope.row.UpdatedAt) }}
</template>
</el-table-column>
<el-table-column align="left" label="操作" min-width="150" prop="status">
<template #default="scope">
<el-button
icon="edit"
size="small"
type="primary"
link
@click="editLbtFunc(scope.row)"
>修改</el-button>
<el-button
icon="delete"
size="small"
type="danger"
link
@click="delLbtFunc(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
:current-page="queryParams.page"
:page-size="queryParams.pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
<!--新增编辑 窗口-->
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label=" 图片" prop="url">
<el-upload
class="avatar-uploader"
:action="`${path}/fileUploadAndDownload/upload`"
:headers="{ 'x-token': userStore.token }"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="form.url" :src="form.url" class="img-container">
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" autocomplete="off" />
</el-form-item>
<el-form-item style="display: none">
<el-button type="primary" @click="submitForm(ruleFormRef)">
Create
</el-button>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog"> </el-button>
<el-button size="small" type="primary" @click="enterDialog"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.img-container {
width: 200px;
height: 150px;
}
.gva-btn-list {
justify-content: end;
}
.lbt-thumb {
width: 100px;
height: 50px;
}
</style>