猫舍管理 内容管理

src/views/ohplay/content/index.vue

@@ -2,120 +2,292 @@
   <div class="app-container">
     <!-- 搜索 -->
     <el-form inline label-width="100px" size="mini">
-      <el-form-item label="内容：">
-        <el-input placeholder="请输入内容" />
-      </el-form-item>
       <el-form-item label="内容类型：">
-        <el-select placeholder="请选择内容类型">
-          <el-option />
+        <el-select v-model="form.contentType" placeholder="请选择内容类型">
+          <el-option v-for="item in dict.type.content_type" :key="item.value" :label="item.label"
+            :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="内容分类：">
-        <el-select placeholder="请选择内容分类">
-          <el-option />
+        <el-select v-model="form.type" placeholder="请选择内容分类">
+          <el-option v-for="item in dict.type.content_classify" :key="item.value" :label="item.label"
+            :value='item.value' />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
-        <el-select placeholder="请选择当前状态">
-          <el-option />
+        <el-select v-model="form.typeStatus" placeholder="请选择当前状态">
+          <el-option v-for="item in dict.type.content_status" :key="item.value" :label="item.label"
+            :value='item.value' />
         </el-select>
       </el-form-item>
+      <el-form-item label="内容或回复：">
+        <el-input v-model="form.content" placeholder="请输入内容或回复" />
+      </el-form-item>
       <el-form-item label="更新时间：">
-        <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
+        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
+          value-format="yyyy-MM-dd HH:mm:ss" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search">搜索</el-button>
-        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData">
-      <el-table-column label="内容" align="center" />
-      <el-table-column label="图片" align="center" />
-      <el-table-column label="回复/点赞" align="center" />
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="内容" prop="content" align="center" />
+      <el-table-column label="图片" align="center" width="100px">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.images" />
+        </template>
+      </el-table-column>
+      <el-table-column label="回复/点赞" prop="replyOrLike" align="center" />
       <el-table-column label="操作" align="center">
-        <template>
-          <el-button type="text" @click="dialogVisible = true, title = '推荐'">推荐</el-button>
-          <el-button type="text" @click="dialogVisible = true, title = '详情'">详情</el-button>
-          <el-button type="delete">隐藏</el-button>
-          <el-button type="text">显示</el-button>
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.isDelete === '0'" type="text" @click="dialogVisible = true, title = '推荐', dialogForm.id = scope.row.id">
+            推荐
+          </el-button>
+          <el-button type="text" @click="dialogVisible = true, title = '详情', getDetail(scope.row)">
+            详情
+          </el-button>
+          <el-button type="delete" v-if="scope.row.isDelete === '0'" @click="getChange(scope.row, 1)">
+            隐藏
+          </el-button>
+          <el-button type="text" v-else @click="getChange(scope.row, 0)">显示</el-button>
         </template>
       </el-table-column>
     </el-table>
+    <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="550px">
+      <!-- 推荐 -->
       <div v-if="title === '推荐'">
         <el-form label-width="100px">
           <el-form-item label="推荐位置：">
-            <el-select placeholder="请选择推荐位置">
-              <el-option />
+            <el-select v-model="dialogForm.tagId" placeholder="请选择推荐位置">
+              <el-option v-for="item in dict.type.content_classify" :key="item.value" :label="item.label"
+                :value='item.value' />
             </el-select>
           </el-form-item>
           <el-form-item label="推荐权重：">
-            <el-select placeholder="请选择推荐权重">
-              <el-option />
-            </el-select>
+            <el-input-number v-model="dialogForm.weight" :min="0" :max="10" />
           </el-form-item>
           <el-form-item label="权重唯一：">
-            <el-select placeholder="权重是否唯一">
-              <el-option />
+            <el-select v-model="dialogForm.isOnlyWeight" placeholder="权重是否唯一">
+              <el-option v-for="item in dict.type.hot_yes_no" :key="item.value" :label="item.label"
+                :value="item.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="推荐日期：">
-            <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
+            <el-date-picker v-model="dialogDate" type="datetimerange" start-placeholder="开始时间"
+              end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
           </el-form-item>
         </el-form>
       </div>
+
+      <!-- 详情 -->
       <div v-else class="item_box">
-        <div class="dialog_item" v-for="item in 15" :key="item">
+        <!-- 话题 -->
+        <el-row>
+          <el-col :span="3">
+            <el-avatar :src="dialogList.userAvatar" />
+          </el-col>
+          <el-col :span="16">
+            <div>{{ dialogList.userName }}</div>
+            <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>
+            <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="margin-top: 10px">点赞：{{ dialogList.likeNum }}</div>
+        </div>
+        <!-- 评论 -->
+        <div class="dialog_list" v-for="item in dialogList.commentList" :key="item.id">
           <el-row>
             <el-col :span="3">
-              <el-avatar />
+              <el-avatar :src="item.toUserAvatar" />
             </el-col>
             <el-col :span="16">
-              <div>xxxx</div>
-              <div>2022-03-08 14:08:22</div>
+              <div>{{ item.toUserName }}</div>
+              <div>{{ item.createTime }}</div>
             </el-col>
             <el-col :span="5">
-              <el-button type="delete">隐藏</el-button>
-              <el-button type="text">显示</el-button>
+              <el-button v-if="item.isDelete === 0" type="delete" @click="getCommentChange(item, 1)">隐藏
+              </el-button>
+              <el-button v-else type="text" @click="getCommentChange(item, 0)">显示</el-button>
             </el-col>
           </el-row>
           <div class="item_content">
-            <div>
-              qwertyuioopasdfghjklzxcvbnm
+            <div>{{ item.content }}</div>
+            <div style="margin-top: 10px">点赞：</div>
+          </div>
+          <!-- 评论的评论 -->
+          <div class="item_children">
+            <div class="item_i" v-for="i in item.children" :key="i.id">
+              <el-row>
+                <el-col :span="3">
+                  <el-avatar :src="i.toUserAvatar" />
+                </el-col>
+                <el-col :span="16">
+                  <div>{{ i.toUserName }}</div>
+                  <div>{{ i.createTime }}</div>
+                </el-col>
+                <el-col :span="5">
+                  <el-button v-if="i.isDelete === 0" type="delete" @click="getCommentChange(i, 1)">隐藏
+                  </el-button>
+                  <el-button v-else type="text" @click="getCommentChange(i, 0)">显示</el-button>
+                </el-col>
+              </el-row>
+              <div class="item_content">
+                <div>{{ i.content }}</div>
+                <div style="margin-top: 10px">点赞：</div>
+              </div>
             </div>
-            <div style="margin-top: 10px">点赞：10</div>
           </div>
+
         </div>
       </div>
       <div v-if="title === '推荐'" slot="footer">
         <el-button>取消</el-button>
-        <el-button type="primary">确定</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { list, detail, showOrHide, recommend, commentShowOrHide } from '@/api/ohplay/content'
 export default {
+  dicts: ['content_type', 'content_classify', 'content_status', 'hot_yes_no'],
   data() {
     return {
-      tableData: [{
-        id: 1
-      }],
+      // 遮罩层
+      loading: false,
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 搜索时间
+      date: [],
+      // 列表
+      tableData: [],
+      total: 0,
       // 弹窗
       dialogVisible: false,
-      title: ''
+      title: '',
+      // 弹窗列表
+      dialogList: {},
+      // 推荐表单
+      dialogForm: {},
+      dialogDate: []
+    }
+  },
+  watch: {
+    date(val) {
+      this.form.startDate = val[0]
+      this.form.endDate = val[1]
+    },
+    dialogDate(val) {
+      this.dialogForm.startRecommendTime = val[0]
+      this.dialogForm.endRecommendTime = val[1]
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        }
+      })
+    },
+    // 搜索
+    getSearch() {
+      this.form.pageNum = 1
+      this.getList()
+    },
+    // 重置
+    getRefresh() {
+      this.form = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList()
+    },
+    // 详情
+    getDetail(row) {
+      detail(row.id).then(res => {
+        if (res.code === 0) {
+          this.dialogList = res.data
+        }
+      })
+    },
+    // 隐藏或显示
+    getChange(row, type) {
+      showOrHide(row.id, type).then(res => {
+        let tip = type === 0 ? '显示' : '隐藏'
+        if (res.code === 0) {
+          this.$message.success(`${tip}成功！`)
+          this.getList()
+          if (this.dialogVisible === true) {
+            this.getDetail(row)
+          }
+        }
+      })
+    },
+
+    getCommentChange(row, type) {
+      commentShowOrHide(row.id, type).then(res => {
+        let tip = type === 0 ? '显示' : '隐藏'
+        if (res.code === 0) {
+          this.$message.success(`${tip}成功！`)
+          this.getDetail(this.dialogList)
+        }
+      })
+    },
+
+    // 确定
+    getSubmit() {
+      recommend(this.dialogForm).then(res => {
+        if (res.code === 0) {
+          this.$message.success('推荐成功！')
+          this.dialogVisible = false
+          this.getList()
+        }
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dialog_item {
-  border-bottom: 1px solid #eee;
-  padding: 10px 0;
+.item_box {
+  height: 700px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid #eee;
+  box-shadow: 10px 5px 10px 0px #eee;
+  padding: 20px;
+}
+
+.dialog_list {
+  border: 1px solid #eee;
+  box-shadow: 10px 5px 10px 0px #eee;
+  padding: 10px;
+  width: calc(100% - 20px);
+  margin-top: 20px;
 
   .el-row {
     display: flex;
@@ -128,13 +300,23 @@ export default {
   }
 }
 
-.item_box {
-  height: 700px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
 .dialog_item:last-child {
   border: none;
 }
+
+.item_children {
+  width: calc(100% - 40px);
+  margin-top: 20px;
+  border: 1px solid #eee;
+  box-shadow: 10px 5px 10px 0px #eee;
+
+  .item_i {
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .item_i:last-child {
+    border: none;
+  }
+}
 </style>