评论管理

src/views/components/courseList/commont.vue

@@ -0,0 +1,235 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <el-form
+      :inline="true"
+      :model="query"
+      @keyup.enter.native="getList()"
+      style="position: relative;"
+    >
+      <el-form-item label="评论内容">
+        <el-input
+          style="width: 100%;"
+          v-model="query.content"
+          placeholder="请输入评论内容"
+          clearable
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item style="width: 120px;">
+        <el-button
+          @click="
+            pageIndex = 1;
+            getList();
+          "
+          >查询</el-button
+        >
+      </el-form-item>
+      <el-button type="text" 
+        @click="changeDefalutExpand()"
+        style="position: absolute;right: 0;"
+        :style="`color:${defaultExpand?'#17B3A3':'#333'}`"
+        >{{ !defaultExpand ? "收起" : "展开" }}全部评论
+        <i class="el-icon-s-comment" ></i
+      ></el-button>
+    </el-form>
+
+    <!--  -->
+    <el-table
+      row-key="id"
+      v-if="refreshTable"
+      :default-expand-all="defaultExpand"
+      :data="tableData"
+      style="width: 100%"
+      height="calc(100% - 100px)"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column fixed prop="createTime" label="日期" width="200">
+      </el-table-column>
+      <el-table-column prop="name" label="姓名" width="120">
+        <template slot-scope="scope">
+          <div>
+            <el-tooltip placement="top" v-if="scope.row.user">
+              <div slot="content">
+                <div>
+                  <p v-if="scope.row.user.nickname && scope.row.user.name">
+                    昵称：{{ scope.row.user.nickname }}
+                    <span v-if="scope.row.user.name"
+                      >&nbsp;&nbsp;(&nbsp;姓名：{{
+                        scope.row.user.name
+                      }}
+                      &nbsp;)</span
+                    >
+                  </p>
+                  <p v-else-if="scope.row.user.name">
+                    姓名：{{ scope.row.user.name }}
+                  </p>
+                  <p v-if="scope.row.user.email">
+                    邮箱：{{ scope.row.user.email }}
+                  </p>
+                  <p v-if="scope.row.user.tel">
+                    手机号：{{ scope.row.user.tel }}
+                  </p>
+                </div>
+              </div>
+              <div class="avatar">
+                <img
+                  :src="scope.row.user ? scope.row.user.avatar : ''"
+                  alt=""
+                  v-if="scope.row.user && scope.row.user.avatar"
+                />
+              </div>
+            </el-tooltip>
+
+            <div class="avatar" v-else></div>
+
+            <span></span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="content" label="评论内容">
+        <template slot-scope="scope">
+          <div v-html="scope.row.content"></div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" width="60">
+        <template slot-scope="scope">
+          <span
+            style="color: red;cursor: pointer;"
+            @click="deleteHandle(scope.row.id)"
+          >
+            删除
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      style="padding: 30px 0; text-align: center;"
+      layout="total, sizes, prev, pager, next, jumper"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["courseId"],
+  data() {
+    return {
+      tableData: [],
+      query: {
+        content: ""
+      },
+      pageIndex: 1,
+      defaultExpand: false,
+      refreshTable: true,
+      pageSize: 10,
+      totalPage: 0
+    };
+  },
+  created() {},
+  methods: {
+    changeDefalutExpand() {
+      this.refreshTable = false;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+        this.defaultExpand = !this.defaultExpand;
+      });
+      this.$forceUpdate();
+    },
+    init() {
+      this.getList();
+    },
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getList();
+    },
+    getList() {
+      this.$http({
+        url: this.$http.adornUrl(
+          "/master/courseGuestbook/getCourseGuestbookList"
+        ),
+        method: "post",
+        data: this.$http.adornData({
+          limit: this.pageSize,
+          page: this.pageIndex,
+          type: 0, //类型0课程1章节
+          courseId: this.courseId,
+
+          chapterId: "",
+          content: this.query.content //内容
+        })
+      }).then(res => {
+        console.log("res at line 68:", res);
+
+        if (res.data.code == 0 && res.data.page.records.length > 0) {
+          this.tableData = res.data.page.records ? res.data.page.records : [];
+          this.totalPage = res.data.page.total;
+          this.$forceUpdate();
+        } else {
+          this.tableData = [];
+          this.totalPage = 0;
+          this.$forceUpdate();
+        }
+        // console.log(row, "row" , res.data.resList,this.resList);
+      });
+    },
+
+    deleteHandle(id) {
+      this.$confirm("请确认是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(
+            `/master/courseGuestbook/delCourseGuestbook`
+          ),
+          method: "post",
+          data: this.$http.adornData({
+            id: id
+          })
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getList();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  overflow: hidden;
+  background-color: #f0f0f0;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/modules/course/courseList.vue

@@ -169,7 +169,7 @@
         fixed="right"
         header-align="center"
         align="center"
-        width="300"
+        width="340"
         label="操作"
       >
         <template slot-scope="scope">
@@ -179,25 +179,30 @@
                 path: 'course-courseCatalogue',
                 query: { id: scope.row.id, pageIndex }
               }"
-            >
-              <el-button type="text" size="small">目录管理</el-button>
-            </router-link>
-            <el-button
+            ><el-button
               type="text"
               size="small"
               @click="addOrUpdateHandle(scope.row)"
               >修改</el-button
             >
+              <el-button type="text" size="small">目录管理</el-button>
+            </router-link>
+            
             <el-button
               type="text"
               size="small"
               @click="handleQuestionBank(scope.row)"
               >题库管理</el-button
+            > <el-button type="text" size="small" @click="showLinkComment(scope.row)"
+              >评论管理<i class="el-icon-s-comment" ></i
+      ></el-button
             >
             <el-button type="text" size="small" @click="showLinkTags(scope.row)"
               >查看引用</el-button
             >
+           
             <el-button
+            style="color: red;"
               type="text"
               size="small"
               @click="deleteHandle(scope.row.id)"
@@ -298,6 +303,19 @@
         <el-button type="primary" @click="closeLink">好 的</el-button>
       </span>
     </el-dialog>
+    <el-drawer
+      title="课程评论一览"
+      :visible.sync="commontListVisible"
+      size="60%"
+      @close="closeCommontLink"
+    >
+      <div style="padding:0 20px;box-sizing: border-box;height:calc(100% - 120px);">
+       <common-commont ref="commonCommont" :courseId="courseId" v-if="commontListVisible"></common-commont>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="closeLink">好 的</el-button>
+      </span>
+    </el-drawer>
     <!-- 教务主任设置 -->
     <el-dialog
       title="教务主任管理"
@@ -381,6 +399,7 @@
 
 <script>
 import commonShopTable from "./shopproductTable.vue";
+import commonCommont from "@/views/components/courseList/commont.vue";
 import AddOrUpdate from "./course-add-or-update";
 import questionBank from "./examination/questionBank";
 export default {
@@ -388,6 +407,7 @@ export default {
     return {
       selectCourse: {},
       showQuestionBank: false,
+      commontListVisible: false,
       selectType: [],
       director: {
         director: null,
@@ -446,7 +466,8 @@ export default {
   components: {
     AddOrUpdate,
     commonShopTable,
-    questionBank
+    questionBank,
+    commonCommont
   },
   activated() {
     if (this.$route.query.upPageInde != null) {
@@ -638,6 +659,10 @@ export default {
       this.resListVisible = false;
       this.resList = [];
     },
+    closeCommontLink() {
+      this.commontListVisible = false;
+     
+    },
     showLinkTags(row) {
       this.$http({
         url: this.$http.adornUrl("/master/course/getCourseLableLinkList"),
@@ -653,6 +678,27 @@ export default {
         // console.log(row, "row" , res.data.resList,this.resList);
       });
     },
+    showLinkComment(row) {
+      this.courseId=row.id
+      this.commontListVisible = true;
+      this.$nextTick(()=>{
+         this.$refs.commonCommont.init()
+      })
+     
+      // this.$http({
+      //   url: this.$http.adornUrl("/master/courseGuestbook/getCourseGuestbookList"),
+      //   method: "post",
+      //   data: this.$http.adornData({
+      //     courseId: row.id
+      //   })
+      // }).then(res => {
+        
+      //   if (res.data.code == 0 && res.data.resList.length > 0) {
+      //     this.resList = res.data.resList;
+      //   }
+      //   // console.log(row, "row" , res.data.resList,this.resList);
+      // });
+    },
     handleChange(value) {
       console.log(value, "989999999");
     },