修改新闻中心设置
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