loser/lckt-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 优化文章和分类模块&新增banner

Browse Source
This commit is contained in:
loser
2025-06-23 17:05:42 +08:00
parent 0ed234639c
commit 7b9a4f5dc1
10 changed files with 420 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
src/view/banner/index.vue Normal file
View File

@@ -0,0 +1,265 @@
<template>
<div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button type="primary" @click="handleAdd">新增Banner</el-button>
</div>
<el-table :data="tableData" v-loading="tableLoading" border stripe>
<el-table-column prop="ID" label="ID" width="80" />
<el-table-column prop="title" label="标题" width="200" />
<el-table-column prop="link" label="链接" show-overflow-tooltip />
<el-table-column label="图片" width="120">
<template #default="{ row }">
<el-image
style="width: 100px; height: 60px"
:src="row.img"
:preview-src-list="[row.img]"
fit="cover"
/>
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-switch
v-model="row.status"
:active-value="1"
:inactive-value="0"
:loading="row.loading"
@change="() => handleStatusChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="创建时间" width="180">
<template #default="{ row }">
{{ formatDate(row.CreatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)" style="color: #f56c6c">删除</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>
<!-- 新增/编辑Banner弹窗 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="600px"
:before-close="handleClose"
>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="100px"
>
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="链接" prop="link">
<el-input v-model="form.link" placeholder="请输入链接" />
</el-form-item>
<el-form-item label="图片" prop="img">
<selectImage v-model="form.img" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import selectImage from '@/components/selectImage/selectImage.vue'
import { list, creat, put, deleteBanner } from '@/api/banner/index.js'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDate } from '@/utils/format'
const tableLoading = ref(true)
const tableData = ref([])
const total = ref(0)
const queryParams = ref({
page: 1,
pageSize: 10
})
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const form = ref({
title: '',
link: '',
img: '',
status: 1
})
const rules = {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入链接', trigger: 'blur' }
],
img: [
{ required: true, message: '请输入图片链接', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择状态', trigger: 'change' }
]
}
onMounted(() => {
getList()
})
async function getList() {
tableLoading.value = true
try {
const res = await list(queryParams.value)
if (res.code === 0) {
tableData.value = res.data.list
for (let item of tableData.value) {
item.loading = false
}
total.value = res.data.total
}
} catch (error) {
console.error(error)
} finally {
tableLoading.value = false
}
}
const handleSizeChange = (val) => {
queryParams.value.pageSize = val
queryParams.value.page = 1
getList()
}
const handleCurrentChange = (val) => {
queryParams.value.page = val
getList()
}
function handleAdd() {
dialogTitle.value = '新增Banner'
form.value = {
title: '',
link: '',
img: '',
status: 1
}
dialogVisible.value = true
}
function handleEdit(row) {
dialogTitle.value = '编辑Banner'
form.value = { ...row }
dialogVisible.value = true
}
function handleClose() {
dialogVisible.value = false
formRef.value?.resetFields()
}
async function submitForm() {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
let res
if (form.value.ID) {
// 编辑
res = await put(form.value)
} else {
// 新增
res = await creat(form.value)
}
if (res.code === 0) {
ElMessage.success(form.value.ID ? '编辑成功' : '添加成功')
handleClose()
getList()
} else {
ElMessage.error(res.msg || '操作失败')
}
}
})
}
async function handleDelete(row) {
try {
await ElMessageBox.confirm('确定要删除这个Banner吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
const res = await deleteBanner({ ID: row.ID })
if (res.code === 0) {
ElMessage.success('删除成功')
getList()
} else {
ElMessage.error(res.msg || '删除失败')
}
} catch (error) {
// 用户取消删除
}
}
async function handleStatusChange(row) {
row.loading = true
try {
const res = await put(row)
if (res.code === 0) {
ElMessage.success('状态修改成功')
} else {
ElMessage.error(res.msg || '状态修改失败')
// 恢复原状态
row.status = row.status === 1 ? 0 : 1
}
} catch (error) {
ElMessage.error('状态修改失败')
// 恢复原状态
row.status = row.status === 1 ? 0 : 1
} finally {
row.loading = false
}
}
</script>
<style lang="scss" scoped>
.gva-btn-list {
margin-bottom: 20px;
}
.gva-pagination {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
</style>

54
src/view/category/category/category.vue
View File

@@ -1,4 +1,3 @@
<template>
<div>
<div class="gva-search-box">
@@ -16,7 +15,7 @@
—
<el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
</el-form-item>
<template v-if="showAllQuery">
<!-- 将需要控制显示状态的查询条件添加到此范围内 -->
@@ -34,7 +33,7 @@
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="openDialog()">新增</el-button>
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
</div>
<el-table
ref="multipleTable"
@@ -46,20 +45,37 @@
@sort-change="sortChange"
>
<el-table-column type="selection" width="55" />
<el-table-column align="left" label="日期" prop="createdAt"width="180">
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column>
<el-table-column sortable align="left" label="名称" prop="name" width="120" />
<el-table-column align="left" label="图标" width="120">
<template #default="scope">
<el-image
v-if="scope.row.icon"
style="width: 80px; height: 80px"
:src="scope.row.icon"
:preview-src-list="[scope.row.icon]"
fit="cover"
/>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column sortable align="left" label="排序" prop="order" width="120" />
<el-table-column align="left" label="状态" prop="active" width="120">
<el-table-column align="left" label="是否启用" prop="active" width="120">
<template #default="scope">{{ formatBoolean(scope.row.active) }}</template>
</el-table-column>
<el-table-column align="left" label="首页展示" prop="active" width="120">
<template #default="scope">{{ formatBoolean(scope.row.index) }}</template>
</el-table-column>
<el-table-column align="left" label="父ID" prop="parentId" width="120" />
<el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
<template #default="scope">
<el-button type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看</el-button>
<el-button type="primary" link class="table-button" @click="getDetails(scope.row)">
<el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看
</el-button>
<el-button type="primary" link icon="edit" class="table-button" @click="updateCategoryFunc(scope.row)">编辑</el-button>
<el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
</template>
@@ -92,12 +108,18 @@
<el-form-item label="名称:" prop="name" >
<el-input v-model="formData.name" :clearable="false" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="图标:" prop="icon">
<selectImage v-model="formData.icon" />
</el-form-item>
<el-form-item label="排序:" prop="order" >
<el-input v-model.number="formData.order" :clearable="false" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="状态:" prop="active" >
<el-switch v-model="formData.active" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="是否首页展示:" prop="index" >
<el-switch v-model="formData.index" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="父ID:" prop="parentId" >
<el-input v-model.number="formData.parentId" :clearable="false" placeholder="请输入父ID" />
</el-form-item>
@@ -109,12 +131,25 @@
<el-descriptions-item label="名称">
{{ detailFrom.name }}
</el-descriptions-item>
<el-descriptions-item label="图标">
<el-image
v-if="detailFrom.icon"
style="width: 100px; height: 100px"
:src="detailFrom.icon"
:preview-src-list="[detailFrom.icon]"
fit="cover"
/>
<span v-else>无</span>
</el-descriptions-item>
<el-descriptions-item label="排序">
{{ detailFrom.order }}
</el-descriptions-item>
<el-descriptions-item label="状态">
{{ detailFrom.active }}
</el-descriptions-item>
<el-descriptions-item label="首页展示">
{{ detailFrom.index }}
</el-descriptions-item>
<el-descriptions-item label="父ID">
{{ detailFrom.parentId }}
</el-descriptions-item>
@@ -139,6 +174,7 @@ import { getDictFunc, formatDate, formatBoolean, filterDict ,filterDataSource, r
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { useAppStore } from "@/pinia"
import selectImage from '@/components/selectImage/selectImage.vue'
@@ -160,6 +196,8 @@ const formData = ref({
order: 0,
active: false,
parentId: 0,
index: 0,
icon: ''
})
@@ -370,6 +408,8 @@ const closeDialog = () => {
order: 0,
active: false,
parentId: 0,
index: 0,
icon: ''
}
}
// 弹窗确定

4
src/view/category/category/categoryForm.vue
View File

@@ -12,6 +12,9 @@
<el-form-item label="状态:" prop="active">
<el-switch v-model="formData.active" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="是否首页展示:" prop="index">
<el-switch v-model="formData.index" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
</el-form-item>
<el-form-item label="父ID:" prop="parentId">
<el-input v-model.number="formData.parentId" :clearable="false" placeholder="请输入" />
</el-form-item>
@@ -54,6 +57,7 @@ const formData = ref({
order: 0,
active: false,
parentId: 0,
index:0,
})
// 验证规则
const rule = reactive({

11
src/view/goods/article/edit.vue
View File

@@ -28,8 +28,8 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="讲师" prop="teacher">
<el-input v-model="formData.teacher" readonly @click="() => userDialogRef.open()" />
<el-form-item label="讲师" prop="teacherId">
<el-input v-model="formData.teacherName" readonly @click="() => userDialogRef.open()" />
</el-form-item>
</el-col>
</el-row>
@@ -90,7 +90,7 @@
coverImg: [
{ required: true, message: '请上传封面', trigger: 'blur' }
],
teacher: [
teacherId: [
{ required: true, message: '请选择讲师', trigger: 'blur' }
],
content: [
@@ -125,8 +125,9 @@
}
}
function getStaffInfo(data) {
formData.value.teacherId = data.ID
formData.value.teacher = data.nickName
console.log(formData)
formData.value.teacherId = data.id
formData.value.teacherName = data.nick_name
}
function submit(formRef) {
if(!formRef) return