pref(ticket): 优化工单评论显示，我的回复显示在右边，其它回复均显示在左边 (#356)

* pref(ticket): 优化工单评论显示，我的回复显示在右边，其它回复均显示在左边

* pref(ticket): 优化评论显示

* pref(ticket): 修改方法名

Co-authored-by: jym503558564 <503558564@qq.com>

src/views/tickets/components/Comments.vue

@@ -5,7 +5,7 @@
     </div>
     <template v-if="comments">
       <div v-for="item in comments" :key="item.user_display + item.body" class="feed-activity-list">
-        <div class="feed-element">
+        <div class="feed-element" :class="{'flex-container': isFlexRight(item.user_display)}">
           <a href="#" class="pull-left">
             <el-avatar :src="imageUrl" class="header-avatar" />
           </a>
@@ -13,9 +13,9 @@
             <strong>{{ item.user_display }}</strong> <small class="text-muted">{{ formatTime(item.date_created) }}</small>
             <br>
             <small class="text-muted">{{ toSafeLocalDateStr(item.date_created) }}</small>
-            <pre style="padding-top: 10px">
+            <div style="padding-top: 10px; white-space: pre-line ">
               {{ item.body }}
-            </pre>
+            </div>
           </div>
         </div>
       </div>
@@ -69,6 +69,8 @@
 import IBox from '@/components/IBox'
 import { formatTime, getDateTimeStamp } from '@/utils'
 import { toSafeLocalDateStr } from '@/utils/common'
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'Comments',
   components: { IBox },
@@ -101,6 +103,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters([
+      'currentUser'
+    ]),
     hasActionPerm() {
       return this.object.assignees.indexOf(this.$store.state.users.profile.id) !== -1
     }
@@ -181,6 +186,9 @@ export default {
     },
     reloadPage() {
       window.location.reload()
+    },
+    isFlexRight(value) {
+      return this.currentUser.name + '(' + this.currentUser.username + ')' === value
     }
   }
 
@@ -220,4 +228,8 @@ export default {
 .text-muted {
   color: #888888;
 }
+.flex-container {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>