[Feature] 在线留言V1.0

src/api/comment.js

@@ -15,3 +15,20 @@ export function pushCommentAdd(data) {
     data: data
   })
 }
+
+// Comment Detail Request
+export function fetchDetailList(data) {
+  return request({
+    url: 'comment/detail/search',
+    method: 'post',
+    data: data
+  })
+}
+
+export function pushDetailAdd(data) {
+  return request({
+    url: 'comment/detail/add',
+    method: 'post',
+    data: data
+  })
+}

src/layout/components/FloatButton/index.vue

@@ -9,7 +9,7 @@
     @mousedown.stop.prevent="moveStart"
     @mouseover.stop.prevent="showButton"
     @mouseleave.stop.prevent="hideButton"
-    @click.stop.prevent="toggleMenu"
+    @click.stop.prevent="showComment"
   >
     <div class="btn-content">
       <svg-icon icon-class="liaotian" style="width:20px;height:18px;margin-bottom:5px;" />
@@ -39,7 +39,6 @@ export default {
   },
   mounted() {
     window.addEventListener('resize', () => {
-      // console.log('resize')
       const initHeight = document.body.offsetHeight / 2 - 43
       let top = initHeight
       if (initHeight < variables.headerHeight) {
@@ -50,38 +49,30 @@ export default {
     })
   },
   methods: {
-    closeMenuAndFloating() {
-      // console.log('closeMenuAndFloating')
-      this.hoverFlag = false
-      this.moveFlags = false
-      this.resetFloatBtnLocation()
-    },
-    async toggleMenu() {
-      // console.log('clickkk')
+    async showComment() {
+      console.log(`clickkk: lastMoveIndex(${this.lastMoveIndex}) curMoveIndex(${this.curMoveIndex})`)
       //  如果上一次down事件到下一次click事件中 相同即为点击事件
       if (this.lastMoveIndex === this.curMoveIndex) {
-        // console.log(this.lastMoveIndex - this.curMoveIndex)
-        // console.warn('点击')
         this.$emit('addComment')
       }
       this.curMoveIndex = this.lastMoveIndex
     },
     showButton() {
-      // console.log('mouse-over')
+      console.log('mouse-over')
       if (this.moveFlags) return (this.hoverFlag = false)
       this.hoverFlag = true
       const { top } = this.transform
       this.generateTransform({ top: top, right: 0 })
     },
     hideButton() {
-      // console.log('mouse-leave')
+      console.log('mouse-leave')
       this.hoverFlag = false
       // 移动过程中不复位 按钮；
       if (this.moveFlags) return
       this.resetFloatBtnLocation()
     },
     moveStart(e) {
-      // console.log('moveStart')
+      console.log('moveStart')
       if (e.button === 2) return
 
       // 计算鼠标相对元素的位置
@@ -91,7 +82,7 @@ export default {
       this.moveFlags = true
       document.onmousemove = async(e) => {
         this.moveFlags = true
-        // console.log('onmousemove')
+        console.log('onmousemove')
         const bodyHeight = document.body.clientHeight
         const moveMaxHeight = bodyHeight - 86
         const moveMinHeight = variables.headerHeight
@@ -107,20 +98,21 @@ export default {
         this.generateTransform({ top: moveTop, right })
       }
       document.onmouseup = () => {
+        console.log('onmouseup')
         document.onmousemove = null
         document.onmouseup = null
         this.moveEnd()
       }
     },
     moveEnd() {
-      // console.log(`moveEnd`)
+      console.log(`moveEnd`)
       this.moveFlags = false
       if (this.hoverFlag) return
       document.onmousemove = null
       this.resetFloatBtnLocation()
     },
     resetFloatBtnLocation() {
-      // console.log('------reset')
+      console.log('------reset')
       const floatBtn = this.$refs.floatBtn // 获取目标元素
       if (!floatBtn) return
       const { top } = this.transform

src/views/business/index.vue

@@ -118,7 +118,6 @@ export default {
     }
   },
   created() {
-    console.log('Biz: Created')
     this.getTypeData()
     this.searchTable()
   },

src/views/comment/CommentDetail.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="dialog-container">
+    <el-dialog
+      :visible.sync="visible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      :show-close="false"
+      custom-class="main-edit-dialog"
+      title="详情"
+    >
+      <div v-loading="loading" class="detail-box">
+        <ul class="el-timeline">
+          <li v-for="item in tableData" :key="item.id" class="el-timeline-item">
+            <div class="el-timeline-item__tail" />
+            <div class="el-timeline-item__node el-timeline-item__node--large el-timeline-item__node--primary">
+              <el-avatar :size="48" src="/images/avatar.png" />
+            </div>
+            <div class="el-timeline-item__wrapper">
+              <div class="el-timeline-item__timestamp is-top">
+                <div class="item-user">
+                  <div class="item-name">{{ item.createUser }}</div>
+                  <div class="item-org">{{ item.createOrgName }}</div>
+                </div>
+                <div class="item-time">{{ item.createTime }}</div>
+              </div>
+              <div class="el-timeline-item__content">
+                {{ item.content }}
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div class="form-box">
+          <el-form :ref="formName" :model="formData" :rules="rules">
+            <el-form-item prop="content">
+              <el-input v-model="formData.content" type="textarea" :rows="5" clearable placeholder="请输入" />
+            </el-form-item>
+            <el-form-item style="text-align: right">
+              <el-button type="primary" size="small" @click="saveItem">提交回复</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button @click="visible = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { hasValidRecords } from '@/utils/convert'
+
+import { fetchDetailList, pushDetailAdd } from '@/api/comment'
+
+export default {
+  name: 'CommentDetail',
+  data() {
+    return {
+      visible: false,
+      // form
+      formName: 'editForm',
+      formData: {
+        commentId: '',
+        content: ''
+      },
+      rules: {
+        content: [
+          { required: true, message: '请输入留言', trigger: 'blur' }
+        ]
+      },
+      // table
+      current: 1,
+      size: 20,
+      total: 0,
+      tableData: [],
+      // others
+      loading: false
+    }
+  },
+  methods: {
+    // 点击搜索按钮
+    searchTable() {
+      this.current = 1
+      this.getTablelist()
+    },
+    // 获取table数据
+    getTablelist() {
+      this.loading = true
+      const params = {
+        page: this.current,
+        size: this.size,
+        params: {
+          delFlag: 0,
+          commentId: this.formData.commentId
+        }
+      }
+      fetchDetailList(params).then(response => {
+        this.loading = false
+        if (hasValidRecords(response)) {
+          this.tableData = response.data.records
+          this.total = response.data.total
+        } else {
+          this.tableData = []
+          this.total = 0
+        }
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取留言详情出错: ' + error.message
+        })
+      })
+    },
+    saveItem() {
+      this.$refs[this.formName].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          pushDetailAdd(this.formData).then(res => {
+            this.formData.content = ''
+            this.searchTable()
+            this.$message({
+              type: 'success',
+              message: '保存成功！'
+            })
+          }).catch(error => {
+            console.log(error)
+            this.loading = false
+            this.$message({
+              type: 'error',
+              duration: 0,
+              showClose: true,
+              message: '保存出错：' + error.message
+            })
+          })
+        }
+      })
+    },
+    open(id) {
+      this.visible = true
+      this.formData.commentId = id
+      this.formData.content = ''
+      this.searchTable()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-box {
+  min-height: 400px;
+}
+
+.form-box, .el-timeline-item__wrapper {
+    padding-left: 56px;
+}
+
+.el-timeline {
+  padding: 10px 0 0;
+
+  .el-timeline-item__tail {
+    left: 24px;
+  }
+
+  .el-timeline-item__node--large{
+    width: 48px;
+    height: 48px;
+    left: 0;
+  }
+
+  .el-timeline-item__wrapper {
+    top: 0;
+  }
+
+  .el-timeline-item__timestamp {
+    font-size: 14px;
+    color: rgba(0,0,0,0.85);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .item-name {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .item-org {
+    margin-top: 10px;
+  }
+
+  .item-time {
+    color: rgba(0,0,0,0.45);
+  }
+
+  .el-timeline-item__content {
+    padding: 10px 20px;
+    background: rgba(0,0,0,0.02);
+
+    line-height: 1.2;
+    color: rgba(0,0,0,0.85);
+  }
+}
+</style>

src/views/comment/index.vue

@@ -11,8 +11,8 @@
     >
       <div class="form-box">
         <el-form :ref="formName" :model="formData" :rules="rules">
-          <el-form-item prop="comment">
-            <el-input v-model="formData.comment" type="textarea" :rows="5" clearable placeholder="请输入" />
+          <el-form-item prop="content">
+            <el-input v-model="formData.content" type="textarea" :rows="5" clearable placeholder="请输入" />
           </el-form-item>
           <el-form-item style="text-align: right">
             <el-button type="primary" @click="saveItem">确定</el-button>
@@ -21,22 +21,23 @@
       </div>
       <div>
         <el-input
-          v-model="comment"
+          v-model="content"
           suffix-icon="el-icon-search"
           placeholder="搜索"
           style="width:250px; margin-bottom:10px"
           @change="searchTable"
         />
         <div class="list-table">
-          <el-table v-loading="loading" :data="tableData" border stripe height="500" style="width: 100%;">
+          <el-table v-loading="tableLoading" :data="tableData" border stripe height="500" style="width: 100%;">
             <el-table-column type="index" label="序号" width="50" />
-            <el-table-column prop="comment" label="留言内容" width="100" show-overflow-tooltip />
+            <el-table-column prop="content" label="留言内容" width="100" show-overflow-tooltip />
             <el-table-column prop="createUser" label="发起人姓名" show-overflow-tooltip />
             <el-table-column prop="createOrgName" label="发起人所属单位" width="160" show-overflow-tooltip />
             <el-table-column prop="createTime" label="创建时间" width="160" />
+            <el-table-column prop="updateTime" label="更新时间" width="160" />
             <el-table-column label="操作" align="center" width="160" class-name="action-column">
               <template slot-scope="scope">
-                <el-button type="text">详情回复</el-button>
+                <el-button type="text" @click="showDetail(scope.row.id)">详情回复</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -57,14 +58,19 @@
         <el-button @click="close">取消</el-button>
       </div>
     </el-dialog>
+    <comment-detail ref="commentDetail" />
   </div>
 </template>
 <script>
+import CommentDetail from './CommentDetail'
 
-// import { fetchCommentList, pushCommentAdd } from '@/api/comment'
+import { hasValidRecords } from '@/utils/convert'
+
+import { fetchCommentList, pushCommentAdd } from '@/api/comment'
 
 export default {
   name: 'CommentAdd',
+  components: { CommentDetail },
   data() {
     return {
       // dialog
@@ -72,15 +78,15 @@ export default {
       // form
       formName: 'editForm',
       formData: {
-        comment: ''
+        content: ''
       },
       rules: {
-        comment: [
+        content: [
           { required: true, message: '请输入留言', trigger: 'blur' }
         ]
       },
       // search
-      comment: '',
+      content: '',
       // table
       current: 1,
       size: 20,
@@ -89,7 +95,8 @@ export default {
       tableData: [],
       multipleSelection: [],
       // others
-      loading: false
+      loading: false,
+      tableLoading: false
     }
   },
   methods: {
@@ -119,66 +126,68 @@ export default {
     },
     // 获取table数据
     getTablelist() {
-      this.$message.info('开发中...')
-      // this.loading = true
-      // const params = {
-      //   current: this.current,
-      //   size: this.size,
-      //   orders: [{ column: 'create_time', asc: 0 }],
-      //   delFlag: 0,
-      //   comment: this.comment
-      // }
-      // fetchCommentList(params).then(response => {
-      //   this.loading = false
-      //   if (hasValidRecords(response)) {
-      //     this.tableData = response.data.records
-      //     this.total = response.data.total
-      //   } else {
-      //     this.tableData = []
-      //     this.total = 0
-      //   }
-      // }).catch(error => {
-      //   console.log(error)
-      //   this.loading = false
-      //   this.$message({
-      //     type: 'error',
-      //     duration: 0,
-      //     showClose: true,
-      //     message: '获取留言列表出错: ' + error.message
-      //   })
-      // })
+      this.tableLoading = true
+      const params = {
+        page: this.current,
+        size: this.size,
+        params: {
+          delFlag: 0,
+          content: this.content
+        }
+      }
+      fetchCommentList(params).then(response => {
+        this.tableLoading = false
+        if (hasValidRecords(response)) {
+          this.tableData = response.data.records
+          this.total = response.data.total
+        } else {
+          this.tableData = []
+          this.total = 0
+        }
+      }).catch(error => {
+        console.log(error)
+        this.tableLoading = false
+        this.$message({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '获取留言列表出错: ' + error.message
+        })
+      })
     },
     saveItem() {
       this.$refs[this.formName].validate((valid) => {
         if (valid) {
-          this.$message.info('开发中...')
-          // this.loading = true
-          // pushCommentAdd(this.formData).then(res => {
-          //   this.loading = false
-          //   this.visible = false
-          //   this.$emit('refreshData')
-          //   this.$message({
-          //     type: 'success',
-          //     message: '保存成功！'
-          //   })
-          // }).catch(error => {
-          //   console.log(error)
-          //   this.loading = false
-          //   this.$message({
-          //     type: 'error',
-          //     duration: 0,
-          //     showClose: true,
-          //     message: '保存出错：' + error.message
-          //   })
-          // })
+          this.loading = true
+          pushCommentAdd(this.formData).then(res => {
+            this.loading = false
+            this.searchTable()
+            this.$message({
+              type: 'success',
+              message: '保存成功！'
+            })
+          }).catch(error => {
+            console.log(error)
+            this.loading = false
+            this.$message({
+              type: 'error',
+              duration: 0,
+              showClose: true,
+              message: '保存出错：' + error.message
+            })
+          })
         }
       })
     },
+    showDetail(id) {
+      this.$refs['commentDetail'].open(id)
+    },
     /**
      * 加载dialog
      */
     open() {
       this.visible = true
+      this.searchTable()
     },
     close() {
       this.visible = false