支持使用@提及任务成员

Author: a54552239

src/api/task.js

@@ -42,8 +42,8 @@ export function star(code, star) {
     return $http.post('project/task/star', {star: star, taskCode: code});
 }
 
-export function createComment(code, comment) {
-    return $http.post('project/task/createComment', {taskCode: code, comment: comment});
+export function createComment(code, comment, mentions) {
+    return $http.post('project/task/createComment', {taskCode: code, comment: comment, mentions: mentions});
 }
 
 export function assignTask(data) {

src/components/layout/header/HeaderNotice.vue

@@ -42,7 +42,9 @@
                                     <a-list-item :key="item.id">
                                         <a-list-item-meta :description="item.create_time">
                                              <span slot="title">
-                                                    <p v-html="item.title"></p>
+                                                 <p v-html="item.title"></p>
+                                                 <p class="ant-list-item-meta-description" v-html="item.content"></p>
+
                                              </span>
                                             <a-avatar style="background-color: white" slot="avatar"
                                                       src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>

src/components/project/taskDetail.vue

@@ -854,9 +854,20 @@
                                 </div>
                             </vue-scroll>
                         </div>
-                        <div class="footer">
-                            <a-textarea v-model="comment" :rows="1" placeholder="按 Ctrl+Enter 快速发表评论"
-                                        style="margin-right: 24px;"/>
+                        <div class="footer" id="footer">
+                            <a-popover trigger="click" placement="top" :visible="showMentions" arrowPointAtCenter :getPopupContainer="getPopup">
+                                <template slot="content">
+                                    <div class="mentions-content" style="width: 200px;">
+                                        <div class="mentions-wrapper" v-for="member in taskMemberList" :key="member.id" @click="selectMentionMember(member)">
+                                            <a-avatar :src="member.avatar" icon="user" :size="28"/>
+                                            <span class="muted name m-l-xs">{{member.name}}</span>
+                                        </div>
+                                    </div>
+                                </template>
+<!--                                <span slot="title">Title</span>-->
+                                <a-textarea ref="commentText" v-model="comment" :rows="1" placeholder="支持@提及任务成员，Ctrl+Enter发表评论"
+                                            style="margin-right: 24px;"/>
+                            </a-popover>
                             <a-button class="middle-btn" type="primary" @click="createComment">评论</a-button>
                         </div>
                     </div>
@@ -1126,7 +1137,10 @@
                     modalTitle: '设置预估工时',
                     modalStatus: false,
                     confirmLoading: false,
-                }
+                },
+                //显示评论提及
+                showMentions: false,
+                mentionsList: []
             }
         },
         computed: {
@@ -1210,11 +1224,17 @@
                 })()
             };
             document.onkeydown = (event) => {
+                console.log(event);
                 var e = event || window.event || arguments.callee.caller.arguments[0];
                 if (13 == e.keyCode && e.ctrlKey) {
                     //处理的部分
                     this.createComment();
                 }
+                if ('Digit2' == e.code) {
+                    this.showMentions = true;
+                }else{
+                    this.showMentions = false;
+                }
             };
             setTimeout(() => {
                 this.uploader.assignBrowse(document.getElementById('upload-file'));
@@ -1578,11 +1598,21 @@
                 });
             },
             createComment() {
-                if (!this.comment.trim()) {
+                let comment = this.comment.trim();
+                if (!comment) {
                     return false;
                 }
-                createComment(this.code, this.comment).then(() => {
+                comment += ' ';
+                const regx = /(@[^@]+) /g;
+                comment.match(regx).forEach((v) => {
+                    let str = v.substring(1, v.length - 1);
+                    if (this.mentionsList.findIndex(item => item == str) === -1) {
+                        this.mentionsList.push(str);
+                    }
+                });
+                createComment(this.code, this.comment, JSON.stringify(this.mentionsList)).then(() => {
                     this.comment = '';
+                    this.mentionsList = [];
                     this.getTaskLog();
                 });
             },
@@ -1764,6 +1794,16 @@
                 this.visibleChildTaskMemberMenu = false;
                 this.childExecutor = member;
             },
+            getPopup() {
+                return document.getElementById('footer');
+            },
+            selectMentionMember(member) {
+                this.showMentions = false;
+                this.comment += member.name + ' ';
+                this.$nextTick(() => {
+                    this.$refs.commentText.focus();
+                });
+            },
             changeModalHeight() {
                 const defaultWidth = this.width;
                 let width = $(window).width() - 100;
@@ -2240,4 +2280,23 @@
             }
         }
     }
+    .footer{
+        .ant-popover-inner-content{
+            padding: 0;
+            .mentions-content {
+                width: 200px;
+                padding: 12px 0;
+                .mentions-wrapper {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    padding: 6px 12px;
+                    &:hover{
+                        cursor: pointer;
+                        background: rgba(51, 143, 229, 0.1);
+                    }
+                }
+            }
+        }
+    }
 </style>

src/views/notify/system.vue

@@ -29,7 +29,7 @@
                 </a-form>
             </div>
             <div class="action">
-                <a-button icon="check" :disabled="!selectedRowKeys.length" @click="listAction({key:'setReadied'})">
+                <a-button icon="check" class="m-r-sm" :disabled="!selectedRowKeys.length" @click="listAction({key:'setReadied'})">
                     <span>批量标记已读</span>
                 </a-button>
                 <a-button icon="delete" type="danger" :disabled="!selectedRowKeys.length" @click="listAction({key:'delete'})">