修改新闻中心设置
suixy
1 month ago
parent
4f6423a988
commit
69f735c8d5
@ -0,0 +1,36 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询新闻列表
|
||||
export function listNews(query) {
|
||||
return request({
|
||||
url: '/portal/news/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 新增新闻
|
||||
export function addNews(data) {
|
||||
return request({
|
||||
url: '/portal/news/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改新闻
|
||||
export function updateNews(data) {
|
||||
return request({
|
||||
url: '/portal/news/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除新闻
|
||||
export function deleteNews(newsId) {
|
||||
return request({
|
||||
url: '/portal/news/delete/' + newsId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" plain @click="save" style="z-index: 99;;position: fixed;top: 1px;right: 1px">保存
|
||||
</el-button>
|
||||
<vue-editor
|
||||
ref="editor"
|
||||
v-model="newsData"
|
||||
:useCustomImageHandler="true"
|
||||
@image-added="handleImageAdded"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {VueEditor} from "vue2-editor";
|
||||
import {getHwWeb, updateHwWeb} from "@/api/hwWeb";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'NewsEdit',
|
||||
components: {VueEditor},
|
||||
data() {
|
||||
return {
|
||||
newsData: "",
|
||||
indexData: {},
|
||||
newsIndex: -1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route.query)
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
getHwWeb(-1).then(res => {
|
||||
this.indexData = JSON.parse(res?.data?.webJsonString || '{}')
|
||||
let data = this.indexData?.news
|
||||
this.newsIndex = (data || []).findIndex(e => e.id == this.$route.query.id)
|
||||
this.newsData = this.newsIndex > -1 ? data[this.newsIndex].detail || '' : ''
|
||||
console.log(data[this.newsIndex])
|
||||
})
|
||||
},
|
||||
handleImageAdded(file, Editor, cursorLocation, resetUploader) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", file);
|
||||
axios({
|
||||
url: process.env.VUE_APP_BASE_API + "/file/upload",
|
||||
method: "POST",
|
||||
data: formData,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data"
|
||||
}
|
||||
})
|
||||
.then(result => {
|
||||
const url = result.data.data.url;
|
||||
Editor.insertEmbed(cursorLocation, "image", url);
|
||||
resetUploader();
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
save() {
|
||||
if (this.newsIndex === -1) {
|
||||
return
|
||||
}
|
||||
this.$set(this.indexData.news[this.newsIndex], "detail", this.newsData);
|
||||
console.log(JSON.stringify(this.indexData));
|
||||
updateHwWeb({
|
||||
webCode: '-1',
|
||||
webJsonString: JSON.stringify(this.indexData),
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: '保存失败',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div class="news-list-page">
|
||||
<div class="toolbar">
|
||||
<el-input
|
||||
v-model="queryParams.newsCode"
|
||||
placeholder="请输入新闻编码"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="getList"/>
|
||||
<el-button type="primary" size="small" @click="getList">查询</el-button>
|
||||
<el-button size="small" @click="resetQuery">重置</el-button>
|
||||
<el-button type="success" size="small" @click="openDialog()">新增</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="newsList" border v-loading="loading" :row-class-name="getRowClassName">
|
||||
<el-table-column prop="newsId" label="ID" width="100"/>
|
||||
<el-table-column prop="newsCode" label="新闻编码" width="180"/>
|
||||
<el-table-column prop="year" label="年" width="90"/>
|
||||
<el-table-column prop="month" label="月" width="90"/>
|
||||
<el-table-column prop="day" label="日" width="90"/>
|
||||
<el-table-column prop="title" label="标题" min-width="180" show-overflow-tooltip/>
|
||||
<el-table-column prop="tag" label="标签" width="120" show-overflow-tooltip/>
|
||||
<el-table-column prop="type" label="类型" width="120" show-overflow-tooltip/>
|
||||
<el-table-column label="头图" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
v-if="scope.row.cover"
|
||||
:src="scope.row.cover"
|
||||
:preview-src-list="[scope.row.cover]"
|
||||
fit="cover"
|
||||
class="cover-preview"/>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="summary" label="简介" min-width="220" show-overflow-tooltip/>
|
||||
<el-table-column label="首页显示" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.field1 ? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="field2" label="首页顺序" width="120"/>
|
||||
<el-table-column label="关于海威显示" width="140">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.field3 ? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="field4" label="关于海威顺序" width="140"/>
|
||||
<el-table-column label="操作" width="320" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
|
||||
<el-button type="text" size="small" @click="goDesign(scope.row)">设计</el-button>
|
||||
<el-button type="text" size="small" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="640px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
|
||||
<el-form-item label="新闻编码" prop="newsCode">
|
||||
<el-input v-model="form.newsCode" maxlength="100" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="年" prop="year">
|
||||
<el-input v-model="form.year"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="月" prop="month">
|
||||
<el-input v-model="form.month"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日" prop="day">
|
||||
<el-input v-model="form.day"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tag">
|
||||
<el-input v-model="form.tag"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
|
||||
<el-option label="选项1" :value="1"/>
|
||||
<el-option label="选项2" :value="2"/>
|
||||
<el-option label="选项3" :value="3"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="头图" prop="cover">
|
||||
<div class="cover-upload">
|
||||
<UploadEl :data="form" field="cover"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="summary">
|
||||
<el-input v-model="form.summary" type="textarea" :rows="4" maxlength="2000" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否首页显示" prop="field1">
|
||||
<el-switch v-model="form.field1"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="首页显示顺序" prop="field2">
|
||||
<el-input-number v-model="form.field2" :min="0" :step="1" controls-position="right"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否关于海威显示" prop="field3">
|
||||
<el-switch v-model="form.field3"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="关于海威显示顺序" prop="field4">
|
||||
<el-input-number v-model="form.field4" :min="0" :step="1" controls-position="right"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitForm">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {addNews, deleteNews, listNews, updateNews} from "@/api/news";
|
||||
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||
|
||||
function createDefaultForm() {
|
||||
return {
|
||||
newsId: '',
|
||||
newsCode: '',
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
title: '',
|
||||
tag: '',
|
||||
type: 1,
|
||||
cover: '',
|
||||
summary: '',
|
||||
field1: false,
|
||||
field2: 0,
|
||||
field3: false,
|
||||
field4: 0,
|
||||
newsJsonObject: {
|
||||
html: '',
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
title: '',
|
||||
tag: '',
|
||||
type: 1,
|
||||
cover: '',
|
||||
summary: '',
|
||||
field1: false,
|
||||
field2: 0,
|
||||
field3: false,
|
||||
field4: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NewsList',
|
||||
components: {UploadEl},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
submitLoading: false,
|
||||
dialogVisible: false,
|
||||
isEdit: false,
|
||||
dialogTitle: '新增新闻',
|
||||
queryParams: {
|
||||
newsCode: ''
|
||||
},
|
||||
newsList: [],
|
||||
form: createDefaultForm(),
|
||||
rules: {
|
||||
newsCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入新闻编码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
parseNewsJson(newsJson) {
|
||||
if (!newsJson) {
|
||||
return {}
|
||||
}
|
||||
if (typeof newsJson === 'object') {
|
||||
return newsJson
|
||||
}
|
||||
try {
|
||||
return JSON.parse(newsJson)
|
||||
} catch (e) {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
normalizeBoolean(value) {
|
||||
return value === true || value === 'true' || value === 1 || value === '1';
|
||||
},
|
||||
normalizeNumber(value) {
|
||||
const num = Number(value);
|
||||
return Number.isFinite(num) ? num : 0;
|
||||
},
|
||||
sortNewsList(list) {
|
||||
return [...list].sort((a, b) => {
|
||||
const aBoth = a.field1 && a.field3;
|
||||
const bBoth = b.field1 && b.field3;
|
||||
if (aBoth !== bBoth) {
|
||||
return aBoth ? -1 : 1;
|
||||
}
|
||||
|
||||
if (aBoth && bBoth) {
|
||||
if (a.field2 !== b.field2) {
|
||||
return a.field2 - b.field2;
|
||||
}
|
||||
if (a.field4 !== b.field4) {
|
||||
return a.field4 - b.field4;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.field1 !== b.field1) {
|
||||
return a.field1 ? -1 : 1;
|
||||
}
|
||||
if (a.field1 && b.field1 && a.field2 !== b.field2) {
|
||||
return a.field2 - b.field2;
|
||||
}
|
||||
|
||||
if (a.field3 !== b.field3) {
|
||||
return a.field3 ? -1 : 1;
|
||||
}
|
||||
if (a.field3 && b.field3 && a.field4 !== b.field4) {
|
||||
return a.field4 - b.field4;
|
||||
}
|
||||
|
||||
return Number(a.newsId || 0) - Number(b.newsId || 0);
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNews(this.queryParams).then(res => {
|
||||
const list = res.rows || res.data || [];
|
||||
const mappedList = list.map(item => {
|
||||
const newsJsonObject = this.parseNewsJson(item.newsJson)
|
||||
return {
|
||||
...item,
|
||||
year: newsJsonObject.year || '',
|
||||
month: newsJsonObject.month || '',
|
||||
day: newsJsonObject.day || '',
|
||||
title: newsJsonObject.title || '',
|
||||
tag: newsJsonObject.tag || '',
|
||||
type: newsJsonObject.type || 1,
|
||||
cover: newsJsonObject.cover || '',
|
||||
summary: newsJsonObject.summary || '',
|
||||
field1: this.normalizeBoolean(newsJsonObject.field1),
|
||||
field2: this.normalizeNumber(newsJsonObject.field2),
|
||||
field3: this.normalizeBoolean(newsJsonObject.field3),
|
||||
field4: this.normalizeNumber(newsJsonObject.field4),
|
||||
}
|
||||
});
|
||||
this.newsList = this.sortNewsList(mappedList);
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
newsCode: ''
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
resetForm() {
|
||||
this.form = createDefaultForm();
|
||||
if (this.$refs.form) {
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
},
|
||||
openDialog(row) {
|
||||
this.resetForm();
|
||||
if (row) {
|
||||
this.isEdit = true;
|
||||
this.dialogTitle = '编辑新闻';
|
||||
const newsJsonObject = this.parseNewsJson(row.newsJson)
|
||||
this.form = {
|
||||
...createDefaultForm(),
|
||||
...row,
|
||||
year: newsJsonObject.year || '',
|
||||
month: newsJsonObject.month || '',
|
||||
day: newsJsonObject.day || '',
|
||||
title: newsJsonObject.title || '',
|
||||
tag: newsJsonObject.tag || '',
|
||||
type: newsJsonObject.type || 1,
|
||||
cover: newsJsonObject.cover || '',
|
||||
summary: newsJsonObject.summary || '',
|
||||
field1: this.normalizeBoolean(newsJsonObject.field1),
|
||||
field2: this.normalizeNumber(newsJsonObject.field2),
|
||||
field3: this.normalizeBoolean(newsJsonObject.field3),
|
||||
field4: this.normalizeNumber(newsJsonObject.field4),
|
||||
newsJsonObject: {
|
||||
...createDefaultForm().newsJsonObject,
|
||||
...newsJsonObject
|
||||
}
|
||||
};
|
||||
} else {
|
||||
this.isEdit = false;
|
||||
this.dialogTitle = '新增新闻';
|
||||
}
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
this.submitLoading = true;
|
||||
const payload = {
|
||||
newsId: this.form.newsId,
|
||||
newsCode: this.form.newsCode,
|
||||
newsJson: JSON.stringify({
|
||||
...this.form.newsJsonObject,
|
||||
year: this.form.year,
|
||||
month: this.form.month,
|
||||
day: this.form.day,
|
||||
title: this.form.title,
|
||||
tag: this.form.tag,
|
||||
type: this.form.type,
|
||||
cover: this.form.cover,
|
||||
summary: this.form.summary,
|
||||
field1: this.form.field1,
|
||||
field2: this.form.field2,
|
||||
field3: this.form.field3,
|
||||
field4: this.form.field4,
|
||||
})
|
||||
}
|
||||
const request = this.isEdit ? updateNews(payload) : addNews(payload);
|
||||
request.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success(this.isEdit ? '修改成功' : '新增成功');
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message.error(res.msg || '操作失败');
|
||||
}
|
||||
}).finally(() => {
|
||||
this.submitLoading = false;
|
||||
})
|
||||
})
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$confirm(`确认删除新闻「${row.newsCode}」吗？`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
return deleteNews(row.newsId || row.newsCode);
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('删除成功');
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message.error(res.msg || '删除失败');
|
||||
}
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goDesign(row) {
|
||||
this.$router.push({
|
||||
path: '/newsEdit',
|
||||
query: {
|
||||
newsId: row.newsId,
|
||||
newsCode: row.newsCode
|
||||
}
|
||||
})
|
||||
},
|
||||
getRowClassName({row}) {
|
||||
if (row.field1 && row.field3) {
|
||||
return 'row-both-top';
|
||||
}
|
||||
if (row.field1) {
|
||||
return 'row-home-top';
|
||||
}
|
||||
if (row.field3) {
|
||||
return 'row-about-top';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.news-list-page {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/deep/ .el-table .row-home-top {
|
||||
background-color: #fff7e6;
|
||||
}
|
||||
|
||||
/deep/ .el-table .row-about-top {
|
||||
background-color: #f0f9eb;
|
||||
}
|
||||
|
||||
/deep/ .el-table .row-both-top {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.cover-preview {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cover-upload {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue