修改新闻部门的列表

management/src/views/news/NewsView.vue

@@ -1,8 +1,198 @@
 <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>
 </template>
 
 <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>
+
+<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>