feat: 聊天消息撤回-前端实现

resources/assets/js/pages/manage/components/DialogList.vue

@@ -0,0 +1,78 @@
+<template>
+    <li
+        :id="'view_' + dialogMsg.id"
+        :class="{self:dialogMsg.userid === userId, 'history-tip': topId === dialogMsg.id}"
+        @mouseover="listHover(true)"
+        @mouseleave="listHover(false)">
+        <em v-if="topId === dialogMsg.id" class="history-text">{{$L('历史消息')}}</em>
+        <div class="dialog-avatar">
+            <UserAvatar :userid="dialogMsg.userid" :tooltip-disabled="dialogMsg.userid === userId" :size="30"/>
+        </div>
+        <DialogView :msg-data="dialogMsg" :dialog-type="dialogData.type"/>
+        <div class="dialog-action" v-show="showAction">
+            <Tooltip v-if="parseInt(dialogMsg.userid) === parseInt(userId)" :content="$L('撤回')" placement="top">
+                <Button type="text" icon="md-undo" @click="messageWithdraw"/>
+            </Tooltip>
+        </div>
+    </li>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import DialogView from "./DialogView";
+
+export default {
+    name: "DialogList",
+    components: {DialogView},
+    props: {
+        dialogMsg: {
+            type: Object,
+            default: {}
+        },
+        topId: {
+            type: Number,
+            default: 0
+        },
+        dialogData: {
+            type: Object,
+            default: {}
+        },
+    },
+
+    data() {
+        return {
+            showAction: false
+        }
+    },
+
+    computed: {
+        ...mapState([
+            'userId',
+        ]),
+    },
+
+    watch: {
+    },
+
+    methods: {
+        listHover(act) {
+            this.showAction = act === true;
+        },
+        messageWithdraw(){
+            this.$store.dispatch("call", {
+                url: 'dialog/msg/withdraw',
+                data: {
+                    msg_id: this.dialogMsg.id
+                },
+                method: 'get',
+            }).then(({data, msg}) => {
+                // data 结果数据
+                // msg 结果描述
+            }).catch(({msg}) => {
+                // msg 错误原因
+                $A.messageError(msg);
+            });
+        }
+    }
+}
+</script>

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -35,17 +35,13 @@
                     <li v-if="dialogData.hasMorePages" class="history" @click="loadNextPage">{{$L('加载历史消息')}}</li>
                     <li v-else-if="dialogData.loading > 0 && dialogMsgList.length === 0" class="loading"><Loading/></li>
                     <li v-else-if="dialogMsgList.length === 0" class="nothing">{{$L('暂无消息')}}</li>
-                    <li
+                    <DialogList
                         v-for="item in dialogMsgList"
-                        :id="'view_' + item.id"
+                        :dialogMsg="item"
+                        :topId="topId"
                         :key="item.id"
-                        :class="{self:item.userid == userId, 'history-tip': topId == item.id}">
+                        :dialogData="dialogData"
-                        <em v-if="topId == item.id" class="history-text">{{$L('历史消息')}}</em>
+                    />
-                        <div class="dialog-avatar">
-                            <UserAvatar :userid="item.userid" :tooltipDisabled="item.userid == userId" :size="30"/>
-                        </div>
-                        <DialogView :msg-data="item" :dialog-type="dialogData.type"/>
-                    </li>
                     <li
                         v-for="item in tempMsgList"
                         :id="'tmp_' + item.id"
@@ -112,11 +108,12 @@ import ScrollerY from "../../../components/ScrollerY";
 import {mapState} from "vuex";
 import DialogView from "./DialogView";
 import DialogUpload from "./DialogUpload";
+import DialogList from "./DialogList";
 import {Store} from "le5le-store";
 
 export default {
     name: "DialogWrapper",
-    components: {DialogUpload, DialogView, ScrollerY, DragInput},
+    components: {DialogList, DialogUpload, DialogView, ScrollerY, DragInput},
     props: {
         dialogId: {
             type: Number,