猫舍管理 内容管理

src/views/ohplay/content/index.vue

@@ -33,10 +33,13 @@
     </el-form>
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
-      <el-table-column label="内容" prop="content" align="center" />
-      <el-table-column label="图片" align="center" width="100px">
+      <el-table-column label="内容" prop="content" align="center" show-overflow-tooltip />
+      <el-table-column label="图片" align="center" width="170px">
         <template slot-scope="scope">
-          <el-image :src="scope.row.images" />
+          <div class="image-box" v-if="scope.row.images">
+            <el-image class="image" v-for="item in scope.row.images.split(',').slice(0, 6)" :key="item"
+              :src="item" />
+          </div>
         </template>
       </el-table-column>
       <el-table-column label="回复/点赞" prop="replyOrLike" align="center" />
@@ -59,7 +62,7 @@
     <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
       @pagination="getList" />
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" :title="title" width="600px">
+    <el-dialog :visible.sync="dialogVisible" :title="title" :before-close="cancel" width="600px">
       <!-- 推荐 -->
       <div v-if="title === '推荐'">
         <el-form label-width="100px">
@@ -97,13 +100,19 @@
             <div>{{ dialogList.creatTime }}</div>
           </el-col>
           <el-col :span="5">
-            <el-button v-if="dialogList.isDelete === '0'" type="delete" @click="getChange(dialogList, 1)">隐藏
+            <el-button v-if="dialogList.isDelete === '0'" type="delete" @click="getChange(dialogList, 1)">
+              隐藏
             </el-button>
             <el-button v-else type="text" @click="getChange(dialogList, 0)">显示</el-button>
           </el-col>
         </el-row>
         <div class="item_content">
-          <div>{{ dialogList.content }}</div>
+          <!-- 内容 -->
+          <div style="padding: 20px 0;">{{ dialogList.content }}</div>
+          <!-- 图片 -->
+          <div class="image-box" v-if="dialogList.images">
+            <el-image class="image" v-for="item in dialogList.images.split(',')" :key="item" :src="item" />
+          </div>
           <div style="margin-top: 10px">点赞：{{ dialogList.likeNum }}</div>
         </div>
         <!-- 评论 -->
@@ -152,7 +161,7 @@
         </div>
       </div>
       <div v-if="title === '推荐'" slot="footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button @click="cancel">取消</el-button>
         <el-button type="primary" @click="getSubmit">确定</el-button>
       </div>
     </el-dialog>
@@ -284,6 +293,13 @@ export default {
           this.getList()
         }
       })
+    },
+
+    // 取消
+    cancel() {
+      this.dialogForm = {}
+      this.dialogDate = []
+      this.dialogVisible = false
     }
   }
 }
@@ -336,4 +352,15 @@ export default {
     border: none;
   }
 }
+
+.image-box {
+  display: flex;
+  flex-wrap: wrap;
+  width: 150px;
+
+  .image {
+    width: 50px;
+    height: 50px;
+  }
+}
 </style>