任务看板回复功能

src/api/TaskKanban/comment.js

@@ -0,0 +1,59 @@
+ import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+  return request({
+    url: '/api/blade-mocha-item/comment/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+
+export const getDetail = (id) => {
+  return request({
+    url: '/api/blade-mocha-item/comment/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+export const removeComment = (ids) => {
+  return request({
+    url: '/api/blade-mocha-item/comment/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const addComment = (row) => {
+  return request({
+    url: '/api/blade-mocha-item/comment/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return request({
+    url: '/api/blade-mocha-item/comment/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+ export const getDetailByTask = (id) => {
+   return request({
+     url: '/api/blade-mocha-item/comment/task/detail',
+     method: 'get',
+     params: {
+       id
+     }
+   })
+ }

src/views/TaskKanban/index.vue

@@ -110,10 +110,55 @@
                 :disabled="scope.row.type == 4"
                 @click.stop="rowDel(scope.row, scope.index)">删除
             </el-button>
+            <el-button
+              :type="scope.type"
+              :size="scope.size"
+              icon="el-icon-s-comment"
+              @click="discussClick(scope.row)">回复
+            </el-button>
         </template>
     </avue-crud>
 
-      <div>
+<!--    回复-->
+    <el-dialog
+      title="回复"
+      :visible.sync="dialogVisible"
+      width="40%"
+      :modal="false"
+      :before-close="handleClose">
+      <div style="color: #000; font-size: 18px; font-weight: bold;">{{discuss.createUserName}}</div>
+      <h2 style="margin-top: 0; margin-left: 10px;">{{discuss.tsInfo}}</h2>
+      <div style="overflow: scroll; height: 380px;">
+<!--        <el-empty v-if="discuss.list == null || discuss.list == []" description="描述文字"></el-empty>-->
+        <div v-for="(item,i) in discuss.list" :key="i" class="author-title reply-father">
+          <!--        <el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>-->
+          <div class="author-info">
+            <span class="author-name">{{item.createUserName}}</span>
+            <span class="author-time">{{item.createTime}}</span>
+          </div>
+          <div class="talk-box">
+            <p>
+              <span class="reply">{{item.discuss}}</span>
+            </p>
+          </div>
+          <div style="display: flex; justify-content: flex-end;">
+            <el-link type="danger" v-if="user.content.account == 'admin'" :underline="false" @click="deleteReply(item.id)">删除</el-link>
+          </div>
+        </div>
+      </div>
+
+      <div  class="my-reply">
+<!--        <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>-->
+        <div class="reply-info" >
+          <el-input v-model="comment.discuss" placeholder="输入内容..."></el-input>
+        </div>
+        <div class="reply-btn-box">
+          <el-button @click="sendComment" class="reply-btn" size="medium" type="primary">回复</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <div>
           <el-row :gutter="20">
               <el-col style="margin-top: 10px" :span="4" v-for="item in taskCompletionData" :key="item.id">
                   <el-card class="box-card">
@@ -151,9 +196,17 @@ import Da from "element-ui/src/locale/lang/da";
 import {getUserApprovalList} from "@/api/approval/processConfig";
 import {dateFormat} from "@/util/date";
 
+import {getDetailByTask, addComment, removeComment} from "@/api/TaskKanban/comment";
+
   export default {
     data() {
       return {
+        user: {},
+        comment: {},
+        index:'0',
+        to:'',
+        dialogVisible: false,
+        discuss: {},
         form: {},
         query: {},
         loading: false,
@@ -442,6 +495,7 @@ import {dateFormat} from "@/util/date";
       };
     },
       async created() {
+      this.user = JSON.parse(localStorage.getItem('saber-userInfo'));
           this.option = await this.getColumnData(this.getColumnName(288), this.optionBack);
         // 传租户号查询岗位信息
         this.getPostListfun(JSON.parse(localStorage.getItem('saber-tenantId')).content)
@@ -465,6 +519,60 @@ import {dateFormat} from "@/util/date";
       },
     },
     methods: {
+        // 删除评论
+        deleteReply(id) {
+          this.$confirm('确认关闭？')
+            .then(_ => {
+              removeComment(id).then(_ => {
+                this.$message({
+                  message: '删除成功',
+                  type: 'success'
+                });
+                getDetailByTask(this.comment.primaryId).then(res => {
+                  this.comment.discuss = null
+                  this.discuss.list = res.data.data
+                  this.$forceUpdate()
+                })
+              })
+            })
+            .catch(_ => {});
+        },
+        // 发表评论
+        sendComment() {
+          if (this.comment.discuss == null || this.comment.discuss == '') {
+            this.$message({
+              message: '请输入内容',
+              type: 'warning'
+            });
+            return
+          }
+          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
+          this.comment.createUserName = user.content.real_name;
+          addComment(this.comment).then(_ => {
+            getDetailByTask(this.comment.primaryId).then(res => {
+              this.comment.discuss = null
+              this.discuss.list = res.data.data
+              this.$forceUpdate()
+            })
+          })
+        },
+        discussClick(row) {
+          console.log(row)
+          this.discuss.createUserName = row.createUserName
+          this.discuss.tsInfo = row.tsInfo
+          this.comment.primaryId = row.id
+          getDetailByTask(row.id).then(res => {
+            this.discuss.list = res.data.data
+            this.dialogVisible = true;
+          })
+        },
+        handleClose(done) {
+          this.$confirm('确认关闭？')
+            .then(_ => {
+              done();
+            })
+            .catch(_ => {});
+        },
         // 获取负责人数据
         getUserApprovalListfun(){
             getUserApprovalList().then(res=>{
@@ -756,7 +864,7 @@ import {dateFormat} from "@/util/date";
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
     ::v-deep#out-table .back-one {
         background: #ffc000 !important;
     }
@@ -787,4 +895,127 @@ import {dateFormat} from "@/util/date";
         border-radius: 4px;
         margin-right: 10px;
     }
+
+
+
+    .my-reply {
+      padding: 10px;
+      background-color: #fafbfc;
+    }
+    .my-reply .header-img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    .my-reply .reply-info {
+      display: inline-block;
+      margin-left: 10px;
+      width: 90%;
+    }
+    @media screen and (max-width: 1200px) {
+      .my-reply .reply-info {
+        width: 80%;
+      }
+    }
+    .my-reply .reply-info .reply-input {
+      min-height: 20px;
+      line-height: 22px;
+      padding: 10px 10px;
+      color: #ccc;
+      background-color: #fff;
+      border-radius: 5px;
+    }
+    .my-reply .reply-info .reply-input:empty:before {
+      content: attr(placeholder);
+    }
+    .my-reply .reply-info .reply-input:focus:before {
+      content: none;
+    }
+    .my-reply .reply-info .reply-input:focus {
+      padding: 8px 8px;
+      border: 2px solid #00f;
+      box-shadow: none;
+      outline: none;
+    }
+    .my-reply .reply-btn-box {
+      height: 25px;
+      margin: 10px 0;
+    }
+    .my-reply .reply-btn-box .reply-btn {
+      position: relative;
+      float: right;
+      margin-right: 15px;
+    }
+    .my-comment-reply {
+      margin-left: 50px;
+    }
+    .my-comment-reply .reply-input {
+      width: flex;
+    }
+    .author-title:not(:last-child) {
+      border-bottom: 1px solid rgba(178,186,194,0.3);
+    }
+    .author-title {
+      padding: 10px;
+    }
+    .author-title .header-img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    .author-title .author-info {
+      display: inline-block;
+      margin-left: 10px;
+      width: 60%;
+      height: 40px;
+      line-height: 20px;
+    }
+    .author-title .author-info >span {
+      display: block;
+      //cursor: pointer;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .author-title .author-info .author-name {
+      color: #000;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .author-title .author-info .author-time {
+      font-size: 14px;
+    }
+    .author-title .icon-btn {
+      width: 30%;
+      padding: 0 !important;
+      float: right;
+    }
+    @media screen and (max-width: 1200px) {
+      .author-title .icon-btn {
+        width: 20%;
+        padding: 7px;
+      }
+    }
+    .author-title .icon-btn >span {
+      cursor: pointer;
+    }
+    .author-title .icon-btn .iconfont {
+      margin: 0 5px;
+    }
+    .author-title .talk-box {
+      margin: 0 50px;
+      //margin-left: 55px;
+      margin-left: 15px;
+    }
+    .author-title .talk-box >p {
+      margin: 0;
+    }
+    .author-title .talk-box .reply {
+      font-size: 16px;
+      color: #000;
+    }
+    .author-title .reply-box {
+      margin: 10px 0 0 50px;
+      background-color: #efefef;
+    }
+
+
 </style>