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

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

14
src/api/article/index.js Normal file
View File

@ -0,0 +1,14 @@
import service from '@/utils/request'
// @tag Order
// @summary 获取订单列表
// @param {object} params
// @return {object} data
// @router get /order/list
export const list = (params) => {
return service({
url: '/article/list',
method: 'get',
params
})
}

43
src/api/banner/index.js Normal file
View File

@ -0,0 +1,43 @@
import service from '@/utils/request'
export const list = (params) => {
return service({
url: '/banner/list',
method: 'get',
params
})
}
export const info = (params) => {
return service({
url: '/banner',
method: 'get',
params
})
}
export const creat = (data) => {
return service({
url: '/banner',
method: 'post',
data
})
}
export const deleteBanner = (data) => {
return service({
url: '/banner',
method: 'delete',
data
})
}
export const put = (data) => {
return service({
url: '/banner',
method: 'put',
data
})
}

View File

@ -40,3 +40,11 @@ export const detail = (id) => {
method: 'get',
})
}
export const getTechers = (params) => {
return service({
url: '/app_user/teachers',
method: 'get',
params
})
}

View File

@ -50,7 +50,7 @@
placeholder: '请输入内容...',
MENU_CONF: {}
}
editorConfig.MENU_CONF['uploadImage'] = {
editorConfig.MENU_CONF['uploadImage','uploadVideo'] = {
fieldName: 'file',
server: basePath + '/fileUploadAndDownload/upload?noSave=1',
customInsert(res, insertFn) {

View File

@ -49,8 +49,8 @@
>
<el-table-column v-if="props.multiple" type="selection" width="55" />
<el-table-column type="index" width="50" />
<el-table-column prop="nickName" label="用户名称" />
<el-table-column prop="userName" label="用户账号" />
<el-table-column prop="nick_name" label="用户名称" />
<el-table-column prop="phone" label="手机号" />
</el-table>
</ColumnItem>
<el-pagination
@ -80,7 +80,7 @@
import {onMounted, ref, watch, nextTick } from 'vue'
import PmDialog from '@/components/PmDialog/pm-dialog.vue'
import ColumnItem from '@/components/columnItem/ColumnItem.vue'
import { getUserList } from '@/api/user.js'
import { getTechers } from '@/api/goods/index.js'
// import { listUser } from '@/api/system/user'
const treeRef = ref()
const props = defineProps({
@ -134,7 +134,7 @@
let depClick = ref(false)
function getStaffList() {
loading.value = true
getUserList(queryParams.value)
getTechers(queryParams.value)
.then(async (res) => {
tabList.value = res.data.list
total.value = res.data.total
@ -171,44 +171,41 @@
// getStaffList()
// }
function nodeClick(e) {
if(!props.multiple) {
selectDept.value = e
}
}
function handleSelectionChange(selection) {
console.log(selection)
// ID
selection.forEach((row) => selectedIds.value.add(row.ID))
// ID,
if (props.multiple) {
if (!depClick.value) {
// ID
unChoosed.value = []
if (selection.length > 0) {
selection = selection.map((item) => item.ID)
tabList.value.forEach((item) => {
if (!selection.includes(item.ID)) {
unChoosed.value.push(item.ID)
}
})
// This is a user interaction on the current page.
const selectedOnPageIds = new Set(selection.map(row => row.ID));
// Iterate over all items on the current page to see what was selected or unselected.
tabList.value.forEach(rowOnPage => {
if (selectedOnPageIds.has(rowOnPage.ID)) {
selectedIds.value.add(rowOnPage.ID);
} else {
unChoosed.value = JSON.parse(JSON.stringify(tabList.value)).map((item) => item.ID)
selectedIds.value.delete(rowOnPage.ID);
}
selectedIds.value.forEach((id) => {
if (unChoosed.value.includes(id)) {
selectedIds.value.delete(id)
});
}
})
}
// 使
choosedTableRows.value = Array.from(selectedIds.value)
.map((id) => [...tabList.value, ...choosedTableRows.value].find((r) => r.ID === id))
.filter(Boolean)
}
}
// function filterNode(value, data) {
// if (!value) return true
// return data.label.includes(value)
// }
function requireDiolag() {
emit('getRecipientInfo', props.multiple ? choosedTableRows.value : selectDept.value)
const dataToEmit = props.multiple ? choosedTableRows.value : selectDept.value;
if ((props.multiple && dataToEmit.length === 0) || (!props.multiple && !dataToEmit)) {
// Optional: show a message to the user
return;
}
emit('getRecipientInfo', dataToEmit)
dialoagVisible.value = false
}
defineExpose({

View File

@ -1,5 +1,6 @@
{
"/src/view/about/index.vue": "About",
"/src/view/banner/index.vue": "Index",
"/src/view/bot/bot/bot.vue": "Bot",
"/src/view/bot/bot/botForm.vue": "BotForm",
"/src/view/category/category/category.vue": "Category",
@ -86,5 +87,7 @@
"/src/plugin/customerservice/view/reply/index.vue": "ServiceIndex",
"/src/plugin/customerservice/view/script/index.vue": "ServiceIndex",
"/src/plugin/customerservice/view/service/index.vue": "ServiceIndex",
"/src/plugin/email/view/index.vue": "Email"
"/src/plugin/email/view/index.vue": "Email",
"/src/plugin/picturelibrary/view/components/imageLibrary.vue": "ImageLibrary",
"/src/plugin/picturelibrary/view/index.vue": "PictureLibrary"
}

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>

View File

@ -1,4 +1,3 @@
<template>
<div>
<div class="gva-search-box">
@ -52,14 +51,31 @@
</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: ''
}
}
//

View File

@ -11,6 +11,9 @@
</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="请输入" />
@ -54,6 +57,7 @@ const formData = ref({
order: 0,
active: false,
parentId: 0,
index:0,
})
//
const rule = reactive({

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