修改新闻部门的列表
This commit is contained in:
@@ -1,8 +1,198 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="news-manage">
|
||||||
|
<!-- 查询表单 -->
|
||||||
|
<el-form :model="searchForm" label-width="100px" class="search-form">
|
||||||
|
<el-form-item label="新闻标题">
|
||||||
|
<el-input v-model="searchForm.title" placeholder="请输入标题" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="副标题">
|
||||||
|
<el-input v-model="searchForm.subtitle" placeholder="请输入副标题" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="search">查询</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 新闻表格 -->
|
||||||
|
<el-table :data="filteredNewsList" border style="width: 100%" class="news-table">
|
||||||
|
<el-table-column prop="title" label="标题" />
|
||||||
|
<el-table-column prop="subtitle" label="副标题" />
|
||||||
|
<el-table-column prop="cover" label="封面" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<!-- 封面图片展示（模拟URL） -->
|
||||||
|
<img
|
||||||
|
v-if="scope.row.cover"
|
||||||
|
:src="scope.row.cover"
|
||||||
|
style="width: 100px; height: auto; object-fit: cover;"
|
||||||
|
alt="封面"
|
||||||
|
/>
|
||||||
|
<span v-else>无封面</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="content" label="文章内容" width="300" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 编辑弹窗 -->
|
||||||
|
<el-dialog title="编辑新闻" v-model="dialogVisible" width="60%">
|
||||||
|
<el-form :model="currentNews" label-width="100px">
|
||||||
|
<el-form-item label="标题">
|
||||||
|
<el-input v-model="currentNews.title" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="副标题">
|
||||||
|
<el-input v-model="currentNews.subtitle" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="封面地址">
|
||||||
|
<el-input
|
||||||
|
v-model="currentNews.cover"
|
||||||
|
placeholder="请输入封面图片URL（如：https://xxx.jpg）"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文章内容">
|
||||||
|
<!-- 富文本内容（用 textarea 模拟，实际可替换为专业富文本编辑器） -->
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
v-model="currentNews.content"
|
||||||
|
rows="8"
|
||||||
|
placeholder="请输入富文本内容（支持换行等格式）"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="saveEdit">保存</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, computed } from 'vue';
|
||||||
|
import { ElMessage} from 'element-plus';
|
||||||
|
|
||||||
|
// 模拟“写死”的新闻数据
|
||||||
|
const newsList = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '人工智能最新进展',
|
||||||
|
subtitle: '自然语言处理领域取得突破',
|
||||||
|
cover: 'https://ts2.tc.mm.bing.net/th/id/OIP-C.Mk--gp8OIJtRPOJEByk4qwHaHa?w=80&h=80&c=1&bgcl=1065f3&r=0&o=7&cb=12&pid=ImgRC&rm=3', // 模拟封面图URL
|
||||||
|
content: '人工智能在自然语言处理领域取得重大突破，能够更精准地理解人类意图，实现了多轮对话的连贯性和准确性提升。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '新能源汽车技术革新',
|
||||||
|
subtitle: '续航与充电效率双提升',
|
||||||
|
cover: 'https://picsum.photos/200/150?random=2',
|
||||||
|
content: '某车企发布新一代新能源汽车，续航里程突破800公里，同时快充技术实现10分钟充电80%，极大缓解用户里程焦虑。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '全球气候变化研讨会',
|
||||||
|
subtitle: '多国专家共商应对策略',
|
||||||
|
cover: '', // 无封面示例
|
||||||
|
content: '近日，全球气候变化研讨会在瑞士举行，来自30多个国家的气候专家齐聚一堂，共同探讨减少碳排放、应对极端天气的有效策略。',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 查询表单：双向绑定的查询条件
|
||||||
|
const searchForm = reactive({
|
||||||
|
title: '', // 标题关键字
|
||||||
|
subtitle: '',// 副标题关键字
|
||||||
|
});
|
||||||
|
|
||||||
|
// 【计算属性】根据查询条件过滤后的新闻列表
|
||||||
|
const filteredNewsList = computed(() => {
|
||||||
|
return newsList.value.filter((news) => {
|
||||||
|
// 标题匹配：包含关键字
|
||||||
|
if (searchForm.title && !news.title.includes(searchForm.title)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 副标题匹配：包含关键字
|
||||||
|
if (searchForm.subtitle && !news.subtitle.includes(searchForm.subtitle)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 编辑弹窗状态与当前编辑的新闻
|
||||||
|
const dialogVisible = ref(false); // 弹窗显隐
|
||||||
|
const currentNews = reactive({
|
||||||
|
id: 0,
|
||||||
|
title: '',
|
||||||
|
subtitle: '',
|
||||||
|
cover: '',
|
||||||
|
content: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 点击“编辑”：打开弹窗并赋值当前行数据
|
||||||
|
const handleEdit = (row: any) => {
|
||||||
|
// 深拷贝避免直接修改原数据
|
||||||
|
Object.assign(currentNews, JSON.parse(JSON.stringify(row)));
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 点击“保存”：更新原数据并关闭弹窗
|
||||||
|
const saveEdit = () => {
|
||||||
|
const targetIndex = newsList.value.findIndex((item) => item.id === currentNews.id);
|
||||||
|
if (targetIndex !== -1) {
|
||||||
|
newsList.value[targetIndex] = { ...currentNews }; // 替换原数据
|
||||||
|
ElMessage.success('编辑成功');
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 点击“删除”：弹窗确认后删除数据
|
||||||
|
const handleDelete = (row: any) => {
|
||||||
|
// ElMessage.confirm('确定要删除这条新闻吗？', '提示', {
|
||||||
|
// confirmButtonText: '确定',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// type: 'warning',
|
||||||
|
// })
|
||||||
|
// .then(() => {
|
||||||
|
// newsList.value = newsList.value.filter((item) => item.id !== row.id);
|
||||||
|
// ElMessage.success('删除成功');
|
||||||
|
// })
|
||||||
|
// .catch(() => {
|
||||||
|
// ElMessage.info('已取消删除');
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置查询条件
|
||||||
|
const resetSearch = () => {
|
||||||
|
searchForm.title = '';
|
||||||
|
searchForm.subtitle = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 执行查询（计算属性自动过滤，这里仅作提示）
|
||||||
|
const search = () => {
|
||||||
|
ElMessage.info('查询完成');
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.news-manage {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.search-form {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.news-table {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.dialog-footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user