This commit is contained in:
Air 2024-09-12 18:15:58 +08:00
parent 39fd8b7b77
commit a13c0950fb
5 changed files with 772 additions and 0 deletions

View File

@ -0,0 +1,75 @@
<template>
<t-card :bordered="false">
<div class="form-step-container">
<t-table
rowKey="index"
:data="list"
:columns="columns"
:stripe="false"
:bordered="false"
:hover="true"
size="large"
table-layout="auto"
cellEmptyContent="-"
:pagination="pagination"
>
</t-table>
<div style="margin-top: 30px">
<t-pagination
:total="pagination.total"
:page-size="pagination.size"
@current-change="onCurrentChange"
:showPageSize="false"
></t-pagination>
</div>
</div>
</t-card>
</template>
<script lang="ts">
import store from "@/store";
export default {
data() {
return {
list: [],
columns: [
{colKey: 'name', title: '姓名', align: 'center', width: 300},
{colKey: 'phone', title: '联系方式', align: 'center'},
{colKey: 'text', title: '内容', align: 'center'},
{colKey: 'createtime', title: '留言时间', align: 'center'},
],
pagination: {
page: 1,
size: 10,
total: 0,
},
}
},
mounted() {
this.getList();
},
methods: {
onCurrentChange(d) {
this.pagination.page = d;
this.getList();
},
getList() {
this.$request
.post("/pc_leave_message/index", {page: this.pagination.page, size: this.pagination.size})
.then((res) => {
console.log(res);
if (res.code == 1) {
this.list = res.data.ret;
this.pagination.total = res.data.count;
}
})
.catch((e) => {
console.log(e);
});
},
}
}
</script>

366
src/pages/pc/pc_news.vue Normal file
View File

@ -0,0 +1,366 @@
<template>
<t-card :bordered="false">
<div class="form-step-container">
<t-form
ref="form"
:data="formData"
:label-width="80"
@submit="onSubmit"
>
<t-row>
<t-form-item name="nikename">
<t-button @click="add">新增</t-button>
</t-form-item>
<t-form-item label="标题">
<t-input
v-model="ser.title"
class="form-item-content"
type="search"
placeholder="请输入标题"
style="width: 150px"
/>
</t-form-item>
<t-form-item label="所属类目">
<t-select v-model="ser.category_id">
<t-option :key="0" label="全部" value=""></t-option>
<t-option v-for="(item,index) in gory_list" :key="index" :label="item.category_name" :value="item.id" />
</t-select>
</t-form-item>
<t-form-item name="nikename">
<t-button theme="warning" @click="serDo" style="margin-left: 20px">搜索</t-button>
</t-form-item>
</t-row>
</t-form>
<t-table
rowKey="index"
:data="list"
:columns="columns"
:stripe="false"
:bordered="false"
:hover="true"
size="large"
table-layout="auto"
cellEmptyContent="-"
:pagination="pagination"
>
<template #select="{ row }">
<t-space size="24px">
<t-button theme="warning" @click="edit(row)">编辑</t-button>
<t-popconfirm content="确认删除吗" @confirm="del(row)">
<t-button theme="danger">删除</t-button>
</t-popconfirm>
</t-space>
</template>
</t-table>
<div style="margin-top: 30px">
<t-pagination
:total="pagination.total"
:page-size="pagination.size"
@current-change="onCurrentChange"
:showPageSize="false"
></t-pagination>
</div>
</div>
<t-dialog :header="isEdit?'编辑新闻':'新增新闻'" :visible="addMode" :onClose="onCloseMy" @confirm="onSubmit"
width="45%" top="20px">
<t-form>
<t-form-item label="文章标题" name="news_title">
<t-input placeholder="请输入文章标题" v-model="addForm.title"/>
</t-form-item>
<t-form-item label="所属类目" name="activity_location">
<t-select v-model="addForm.category_id">
<t-option v-for="(item,index) in gory_list" :key="index" :label="item.category_name" :value="item.id" />
</t-select>
</t-form-item>
<t-form-item label="来源" name="news_source">
<t-input placeholder="请输入来源" v-model="addForm.article_source"/>
</t-form-item>
<t-form-item label="点击量" name="news_source">
<t-input placeholder="请输入自定义点击量" v-model="addForm.number_of_views"/>
</t-form-item>
<t-form-item label="新闻内容" name="news_content">
<div style="border: 1px solid #ccc;z-index: 99">
<!-- 工具栏 -->
<Toolbar
style="border-bottom: 1px solid #ccc"
mode="default"
:editor="editor"
:defaultConfig="toolbarConfig"
/>
<Editor
style="height: 200px"
v-model="addForm.content"
:defaultConfig="editorConfig"
mode="default"
@onCreated="(e) => onCreated(e)"
/>
</div>
</t-form-item>
<t-form-item label="新闻主图">
<t-upload
:action="$store.state.user.apiUrl+'/api/common/upload'"
v-model="addForm.image_show"
theme="image"
tips="请选择单张图片文件上传"
accept="image/*"
:format-response="formatResponse"
></t-upload>
</t-form-item>
<t-form-item
label="展示时间"
name="days">
<t-date-picker :style="{ width: '200px' }" :clearable="true" placeholder="展示时间"
:enableTimePicker="true" :allow-input="false"
v-model="addForm.display_time"></t-date-picker>
</t-form-item>
</t-form>
</t-dialog>
</t-card>
</template>
<script lang="ts">
import store from "@/store";
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
export default {
components: {Editor, Toolbar},
data() {
return {
visible: false,
infoMode: false,
ser:{
title:'',
category_id:'',
},
addForm: {
title: '',
category_id: null,
article_source: '',
content: '',
image: '',
image_show:[],
number_of_views:0,
display_time:'',
},
addMode: false,
isEdit: false,
editID: 0,
list: [],
gory_list:[],
columns: [
{colKey: 'title', title: '新闻标题', align: 'center', width: 300},
{colKey: 'category_name', title: '所属类目', align: 'center'},
{colKey: 'number_of_views', title: '点击量', align: 'center'},
{colKey: 'article_source', title: '来源', align: 'center'},
{colKey: 'display_time', title: '展示时间', align: 'center'},
{colKey: 'select', title: '操作', width: 200, align: 'center'},
],
pagination: {
page: 1,
size: 10,
total: 0,
},
editor: null,
toolbarConfig: {
showLinkImg: false,
uploadImgShowBase64: true,
excludeKeys: [
'insertVideo', //
'insertImage',//
'insertLink',//
'insertTable',//
'codeBlock',//
]
},
editorConfig: {
placeholder: '',
readOnly: false, //
autoFocus: true,
MENU_CONF: {
uploadImage: {
server: store.state.user.apiUrl + '/api/common/upload',
fieldName: 'file',
meta:{
association_id: 0,
},
customInsert(res: any, insertFn: InsertFnType) { // TS
// customInsert(res, insertFn) { // JS
// res
console.log(res);
// res url alt href
insertFn(res.data.fullurl, '', '')
},
},
uploadVideo: {
server: store.state.user.apiUrl + '/api/common/upload',
fieldName: 'file',
customInsert(res: any, insertFn: InsertFnType) { // TS
// customInsert(res, insertFn) { // JS
// res
console.log(res);
// res url alt href
insertFn(res.data.fullurl, '', '')
},
}
}
},
}
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() //
},
mounted() {
//this.member_id=this.$route.query.id;
if(typeof (store.state.user.association)=='object'){
this.association=store.state.user.association;
}else{
this.association=JSON.parse(store.state.user.association);
}
this.editorConfig.MENU_CONF.uploadImage.meta.association_id=this.association.id;
this.getList();
this.getGory();
},
methods: {
onCurrentChange(d) {
this.pagination.page = d;
this.getList();
},
formatResponse(res) {
console.log(res);
this.addForm.image = res.data.url;
return {url: res.data.fullurl};
},
onCreated(editor) {
this.editor = Object.seal(editor);
},
del(d) {
console.log(d);
this.$request
.post('/pc_news/articledel', {id: d.id})
.then((res) => {
if (res.code == 1) {
this.$message.success(res.msg);
this.getList();
} else {
this.$message.error(res.msg);
}
console.log(res);
})
.catch((e) => {
console.log(e);
});
},
add() {
this.addMode = true;
this.isEdit = false;
this.addForm={
title: '',
category_id: null,
article_source: '',
content: '',
image: '',
image_show:[],
number_of_views:0,
display_time:'',
};
},
edit(d) {
console.log(d);
this.addForm.id = d.id;
this.addForm.title = d.title;
this.addForm.image_show = [{url: store.state.user.apiUrl + d.image}];
this.addForm.image = d.image;
this.addForm.category_id = d.category_id;
this.addForm.article_source = d.article_source;
this.addForm.content = d.content;
this.addForm.number_of_views = d.number_of_views;
this.addForm.display_time=d.display_time;
this.addMode = true;
this.isEdit = true;
},
serDo(){
this.pagination.page=1;
this.getList();
},
getList() {
this.$request
.post("/pc_news/article", {page: this.pagination.page, size: this.pagination.size,...this.ser})
.then((res) => {
console.log(res);
if (res.code == 1) {
this.list = res.data.ret;
this.pagination.total = res.data.count;
}
})
.catch((e) => {
console.log(e);
});
},
getGory(){
this.$request
.post("/pc/pc_news/gory")
.then((res) => {
console.log(res);
if (res.code == 1) {
this.gory_list=res.data;
}
})
.catch((e) => {
console.log(e);
});
},
onSubmit() {
console.log(this.addForm);
if (this.addForm.title == '') {
this.$message.error('新闻标题不能为空');
return;
}
if (this.addForm.category_id == null) {
this.$message.error('请选择新闻分类');
return;
}
if (this.addForm.article_source == '') {
this.$message.error('来源不能为空');
return;
}
if (this.addForm.content == '') {
this.$message.error('详情不能为空');
return;
}
if (this.addForm.image=='') {
this.$message.error('新闻主图不能为空');
return;
}
var url = '/pc_news/articleadd';
if (this.isEdit) {
url = '/pc_news/articleupdate';
}
this.$request
.post(url, this.addForm)
.then((res) => {
console.log(res);
if (res.code == 1) {
this.$message.success(res.msg);
this.addMode = false;
this.getList();
} else {
this.$message.error(res.msg);
}
})
.catch((e) => {
console.log(e);
});
},
onCloseMy() {
this.addMode = false;
this.infoMode = false;
}
}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

View File

@ -0,0 +1,129 @@
<template>
<t-card :bordered="false">
<div class="form-step-container">
<t-button @click="add">新增</t-button>
<t-table
rowKey="index"
:data="list"
:columns="columns"
:stripe="false"
:bordered="false"
:hover="true"
size="large"
table-layout="auto"
cellEmptyContent="-"
>
<template #select="{ row }">
<t-space size="24px" v-if="row.id!=0">
<t-button theme="warning" @click="edit(row)">编辑</t-button>
<t-popconfirm content="确认删除吗,类目下的新闻将不再显示!" @confirm="del(row)">
<t-button theme="danger" >删除</t-button>
</t-popconfirm>
</t-space>
</template>
</t-table>
</div>
<t-dialog header="类目管理" :visible="addMode" :onClose="onCloseMy" @confirm="onSubmit">
<t-form>
<t-form-item label="类目名称" name="name">
<t-input placeholder="请输入类目名称" v-model="category_name"/>
</t-form-item>
</t-form>
</t-dialog>
</t-card>
</template>
<script lang="ts">
export default {
data() {
return {
category_name: '',
addMode: false,
isEdit: false,
editID:0,
list: [],
columns: [
{colKey: 'id', title: 'ID'},
{colKey: 'category_name', title: '类目名称'},
{colKey: 'select', title: '操作', width: 200},
],
}
},
mounted() {
//this.member_id=this.$route.query.id;
this.getList();
},
methods: {
del(d){
console.log(d);
this.$request
.post('/pc_news/gorydeletetime',{id:d.id})
.then((res) => {
if(res.code==1){
this.$message.success('删除成功!');
this.getList();
}else {
this.$message.error(res.msg);
}
console.log(res);
})
.catch((e) => {
console.log(e);
});
},
add(){
this.category_name= '';
this.addMode=true;
this.isEdit=false;
},
edit(d){
this.editID=d.id;
this.category_name=d.category_name;
this.addMode=true;
this.isEdit=true;
},
getList() {
this.$request
.post("/pc/pc_news/gory")
.then((res) => {
console.log(res);
this.list = res.data;
})
.catch((e) => {
console.log(e);
});
},
onSubmit() {
if (this.category_name == '') {
this.$message.error('类目名称不能为空');
return;
}
var url='/pc_news/goryadd';
if(this.isEdit){
url='/pc_news/goryupdate';
}
this.$request
.post(url,{category_name:this.category_name,id:this.editID})
.then((res) => {
if(res.code==1){
this.$message.success('操作成功!');
this.addMode=false;
this.getList();
}else {
this.$message.error(res.msg);
}
console.log(res);
})
.catch((e) => {
console.log(e);
});
},
onCloseMy() {
this.addMode = false;
}
}
}
</script>
<style scoped lang="less">
</style>

171
src/pages/pc/pc_swiper.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<t-card :bordered="false">
<div class="form-step-container">
<t-button @click="add">新增</t-button>
<t-table
rowKey="index"
:data="list"
:columns="columns"
:stripe="false"
:bordered="false"
:hover="true"
size="large"
table-layout="auto"
cellEmptyContent="-"
>
<template #image="{ row }">
<img :src="$store.state.user.apiUrl+row.image" style="width: 200px">
</template>
<template #select="{ row }">
<t-space size="24px">
<t-button theme="warning" @click="edit(row)">编辑</t-button>
<t-popconfirm content="确认删除吗" @confirm="del(row)">
<t-button theme="danger">删除</t-button>
</t-popconfirm>
</t-space>
</template>
</t-table>
</div>
<t-dialog :header="isEdit?'编辑':'新增'" :visible="addMode" :onClose="onCloseMy" @confirm="onSubmit"
width="45%" top="20px">
<t-form>
<t-form-item label="排序" name="weight">
<t-input placeholder="请输入排序" v-model="addForm.wight"/>
</t-form-item>
<t-form-item label="轮播图片">
<t-upload
:action="$store.state.user.apiUrl+'/api/common/upload'"
v-model="addForm.image_show"
tips="请选择单张图片"
theme="image"
accept="image/*"
:data="{association_id:this.association.association_id}"
:format-response="formatResponse"
></t-upload>
</t-form-item>
</t-form>
</t-dialog>
</t-card>
</template>
<script lang="ts">
import store from "@/store";
export default {
data() {
return {
visible: false,
infoMode: false,
addForm: {
image: '',
image_show:[],
wight:0
},
addMode: false,
isEdit: false,
editID: 0,
list: [],
columns: [
{colKey: 'wight', title: '排序', align: 'center'},
{colKey: 'image', title: '图片视频', align: 'center'},
{colKey: 'select', title: '操作', width: 200, align: 'center'},
],
association:{}
}
},
mounted() {
//this.member_id=this.$route.query.id;
if(typeof (store.state.user.association)=='object'){
this.association=store.state.user.association;
}else{
this.association=JSON.parse(store.state.user.association);
}
this.getList();
},
methods: {
formatResponse(res) {
console.log(res);
this.addForm.image = res.data.url;
return {url: res.data.fullurl,name:res.data.url};
},
del(d) {
console.log(d);
this.$request
.post('/pc_image/delete', {id: d.id})
.then((res) => {
if (res.code == 1) {
this.$message.success(res.msg);
this.getList();
} else {
this.$message.error(res.msg);
}
console.log(res);
})
.catch((e) => {
console.log(e);
});
},
add() {
this.addMode = true;
this.isEdit = false;
this.addForm={
image_show: [],
image: '',
wight: '',
};
},
edit(d) {
console.log(d);
this.addForm.image_show = [{url: store.state.user.apiUrl + d.image,name:d.image}];
this.addForm.image = d.image;
this.addForm.id = d.id;
this.addForm.wight = d.wight;
this.addMode = true;
this.isEdit = true;
},
getList() {
this.$request
.post("/pc_image/index")
.then((res) => {
console.log(res);
if (res.code == 1) {
this.list = res.data;
}
})
.catch((e) => {
console.log(e);
});
},
onSubmit() {
console.log(this.addForm);
if (this.addForm.image=='') {
this.$message.error('轮播图内容不能为空');
return;
}
var url = '/pc_image/add';
if (this.isEdit) {
url = '/pc_image/update';
}
this.$request
.post(url, this.addForm)
.then((res) => {
console.log(res);
if (res.code == 1) {
this.$message.success(res.msg);
this.addMode = false;
this.getList();
} else {
this.$message.error(res.msg);
}
})
.catch((e) => {
console.log(e);
});
},
onCloseMy() {
this.addMode = false;
this.infoMode = false;
}
}
}
</script>

View File

@ -171,6 +171,37 @@ export default [
// meta: {title: '系统设置'},
// }
],
}, {
path: '/pc',
name: 'pc',
component: Layout,
meta: {title: '官网内容管理', icon: HomeIcon},
children: [
{
path: 'pc_news_type',
name: 'pcNewsType',
component: () => import('@/pages/pc/pc_news_type.vue'),
meta: {title: '新闻分类'},
},
{
path: 'pc_news',
name: 'pcNews',
component: () => import('@/pages/pc/pc_news.vue'),
meta: {title: '新闻列表'},
},
{
path: 'pc_swiper',
name: 'pcSwiper',
component: () => import('@/pages/pc/pc_swiper.vue'),
meta: {title: '轮播管理'},
},
{
path: 'pc_message',
name: 'pcSwiper',
component: () => import('@/pages/pc/pc_message.vue'),
meta: {title: '留言管理'},
},
],
}
];