From 4504452aa124cb093637d71fc98db2d6a6d34c08 Mon Sep 17 00:00:00 2001
From: heshunme <heshunme@outlook.com>
Date: Sat, 6 Jul 2024 02:26:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=8C=E4=B8=9A=E5=8A=A8=E6=80=81=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=9A=E4=B8=BAeditNews=E6=B7=BB=E5=8A=A0=E4=BA=86s?=
 =?UTF-8?q?how=E6=A8=A1=E5=BC=8F=EF=BC=8C=E4=B8=BANewsList=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86=E7=82=B9=E6=A0=87=E9=A2=98=E5=B0=B1show?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/news-management/EditNews.vue | 22 +++++++++++++++-------
 src/views/news-management/NewsList.vue | 25 ++++++++++++++++++-------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/views/news-management/EditNews.vue b/src/views/news-management/EditNews.vue
index bfb5043..ac9111a 100644
--- a/src/views/news-management/EditNews.vue
+++ b/src/views/news-management/EditNews.vue
@@ -234,6 +234,12 @@ onMounted(() => {
       modeTitle.value = '修改资讯';
       fetchNewsDetail();
     }
+    else if (props.mode === 'show'){
+      createMode.value = false;
+      id.value = props.id;
+      modeTitle.value = '资讯详情';
+      fetchNewsDetail();
+    }
   }
   else if (route.query.mode === 'create' || route.params.mode === 'create') {
     createMode.value = true;
@@ -441,7 +447,7 @@ onMounted(() => {
     <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
       <h2>{{ modeTitle }}</h2>
       <ElFormItem label="新闻标题" required>
-        <ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
+        <ElInput v-model="form.title" placeholder="请输入新闻标题" :disabled="props.mode === 'show'" required></ElInput>
       </ElFormItem>
       <ElFormItem label="新闻图片路径" required>
         <el-upload
@@ -455,6 +461,7 @@ onMounted(() => {
             list-type="picture-card"
             auto-upload
             v-model:file-list="fileList"
+            :disabled="props.mode === 'show'"
             required
         >
           <template #file="{ file }">
@@ -470,6 +477,7 @@ onMounted(() => {
           <span
               class="el-upload-list__item-delete"
               @click="handleRemove(file)"
+              v-if="props.mode !== 'show'"
           >
             <el-icon><Delete/></el-icon>
           </span>
@@ -492,19 +500,19 @@ onMounted(() => {
              ref="editorContainerElement">
           <div class="editor-container__editor">
             <div ref="editorElement">
-              <ckeditor v-if="isLayoutReady" v-model="form.content" :editor="editor" :config="config"/>
+              <ckeditor v-if="isLayoutReady" v-model="form.content" :editor="editor" :config="config" :disabled="props.mode === 'show'"/>
             </div>
           </div>
         </div>
       </ElFormItem>
       <ElFormItem label="作者" required>
-        <ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
+        <ElInput v-model="form.author" placeholder="请输入作者" :disabled="props.mode === 'show'" required></ElInput>
       </ElFormItem>
       <ElFormItem label="新闻简介" required>
-        <ElInput v-model="form.summary" placeholder="请输入新闻简介" required></ElInput>
+        <ElInput v-model="form.summary" placeholder="请输入新闻简介" :disabled="props.mode === 'show'" required></ElInput>
       </ElFormItem>
       <ElFormItem label="选择租户" required>
-        <ElSelect v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
+        <ElSelect v-model="form.tenant" placeholder="请选择" class="dynamic-width-select" :disabled="props.mode === 'show'">
           <ElOption
               v-for="option in options"
               :key="option"
@@ -513,9 +521,9 @@ onMounted(() => {
           ></ElOption>
         </ElSelect>
       </ElFormItem>
-      <ElFormItem>
+      <ElFormItem v-if="props.mode !== 'show'">
         <ElButton type="primary" native-type="submit">确定</ElButton>
-        <ElButton @click="handleCancel">取消</ElButton>
+        <ElButton @click="handleCancel">{{ props.mode === 'show' ? '返回' : '取消' }}</ElButton>
       </ElFormItem>
     </ElForm>
   </div>
diff --git a/src/views/news-management/NewsList.vue b/src/views/news-management/NewsList.vue
index 56a7f72..cf0c0f4 100644
--- a/src/views/news-management/NewsList.vue
+++ b/src/views/news-management/NewsList.vue
@@ -168,9 +168,9 @@ const handleSelectionChange = (newSelections) => {
 
 const handleEditInTable = async (index) => {
   // router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
-    editNewsDialogMode.value = 'edit'
-    editId.value = newsData.value[index].id
-    openEditNewsDialog()
+  editNewsDialogMode.value = 'edit'
+  editId.value = newsData.value[index].id
+  openEditNewsDialog()
 };
 
 const handleDeleteInTable = async (index) => {
@@ -199,10 +199,16 @@ const openEditNewsDialog = () => {
 
 const setNewsDialogInvisible = (changed) => {
   editNewsDialogVisible.value = false;
-  if (changed){
+  if (changed) {
     refreshNewsList();
   }
 }
+
+const handleShowDetail = (index) => {
+  editNewsDialogMode.value = 'show'
+  editId.value = newsData.value[index].id
+  openEditNewsDialog()
+}
 </script>
 
 <template>
@@ -239,10 +245,15 @@ const setNewsDialogInvisible = (changed) => {
       <el-button type="danger" @click="handleDeleteButton">删除</el-button>
     </div>
 
-    <el-table :data="newsData" style="width: 100%;"
-              @selection-change="handleSelectionChange">
+    <el-table :data="newsData" style="width: 100%;" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
+      <el-table-column prop="title" label="新闻标题" align="center">
+        <template #default="scope">
+          <div @click="handleShowDetail(scope.$index)" style="cursor: pointer;">
+            {{ scope.row.title }}
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column prop="author" label="作者" align="center"></el-table-column>
       <el-table-column prop="summary" label="新闻简介" align="center"></el-table-column>
       <el-table-column label="操作" align="center">