添加自动回复管理

chat.vue

@@ -35,12 +35,8 @@
                             :associateId="currentChat.business_data.obj_id"
                         />
                     </el-tab-pane>
-                    <el-tab-pane label="回复" name="five">
-                        <MsgShortCut
-                            v-for="(item, i) in shortCutMsgs"
-                            :key="i"
-                            :msg="item"
-                        />
+                    <el-tab-pane label="回复" name="five" class="h-100">
+                        <MsgShortCut />
                     </el-tab-pane>
                 </el-tabs>
             </div>
@@ -99,8 +95,6 @@ export default class Chat extends Vue {
     private refreshFlag = false;
     private currentTab = "one";
 
-    private shortCutMsgs = ["快捷回复1", "快捷回复2", "快捷回复3", "快捷回复4"];
-
     private get chatMembersId() {
         return this.chatMembers.map((k) => +k.eid);
     }

components/message.vue

@@ -578,6 +578,7 @@ i.msg-avatar {
 
     &.inline-text {
         display: inline-block;
+        white-space: normal
     }
 
     .file-message-name {

components/msg-shortcut.vue

 <template>
-    <div class="shortcut pointer" @click="sendMsg">{{ msg }}</div>
+    <div class="msg-short-cut-wrap">
+        <div class="btn-group top-btn-group">
+            <el-button type="text" @click="replyInputVisible = true" v-if="!replyInputVisible">添加</el-button>
+            <el-button v-show="replyInputVisible" @click="addReply" size="small" type="text">提交</el-button>
+            <el-button v-show="replyInputVisible" @click="hideReplyInput" size="small" type="text">取消</el-button>
+            <br>
+            <el-input class="remark-input" type="textarea" v-show="replyInputVisible" v-model="addReplyStr" maxlength="200" minlength="2" :show-word-limit="true"></el-input>
+        </div>
+        <div class="shortcut pointer" v-for="(reply, index) in replyList" :key="reply.id">
+            <span class="rep-index">{{index + 1}}.</span>
+            <span class="rep-content" v-if="!editingItem[reply.id]">{{ reply.content }}</span>
+            <el-input v-if="editingItem[reply.id]" class="remark-input" type="textarea" v-model="editingItemContent[reply.id]" maxlength="200" minlength="2" :show-word-limit="true"></el-input>
+            <div class="btn-group">
+                <el-button type="text" @click="sendMsg(reply)" v-if="!editingItem[reply.id]">发送</el-button>
+                <el-button type="text" v-if="uid === reply.created_by && !editingItem[reply.id]" @click="editing(reply)">编辑</el-button>
+                <el-button type="text" v-if="uid === reply.created_by && !editingItem[reply.id]" @click="delReply(reply)">删除</el-button>
+                <el-button v-if="editingItem[reply.id]" @click="editDone(reply)" type="text">确定</el-button>
+                <el-button v-if="editingItem[reply.id]" @click="editCancel(reply)" type="text">取消</el-button>
+            </div>
+        </div>
+    </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-
 import { ChatStore, chatStore } from "../store/model";
 import buttonThrottle from "../utils/button-throttle";
+
+interface Reply {
+    sort: string;
+    id: string;
+    content: string;
+    uniplat_version: string
+    created_by: string
+}
+
+const ReplyModelName = "uniplat_chat_reply";
+
 @Component({ components: {} })
 export default class MsgShortCut extends Vue {
     @chatStore.Action(ChatStore.ACTION_SEND_MESSAGE)
@@ -14,24 +44,127 @@ export default class MsgShortCut extends Vue {
     @chatStore.Getter(ChatStore.STATE_CHAT_SOURCE)
     private readonly source!: ChatStore.STATE_CHAT_SOURCE;
 
-    @Prop({ type: String, default: "" })
-    private readonly msg!: string;
+    private replyList: Reply[] = [];
+    private uid = this.sdk.global.uid;
+    private replyInputVisible = false;
+    private addReplyStr = "";
+    private editingItem: {[key: string]: boolean} = {};
+    private editingItemContent: {[key: string]: string} = {};
+
+    async mounted() {
+        await this.getReplyList();
+    }
+
+    private async getReplyList() {
+        this.replyList = await this.sdk.domainService("uniplat_base", "chat.chat", "reply").request("get");
+    }
 
     @buttonThrottle()
-    private sendMsg() {
+    private sendMsg(reply: Reply) {
         return this._sendMsg({
             msgType: "text",
-            msg: JSON.stringify({ text: this.msg, source: this.source }),
+            msg: JSON.stringify({ text: reply.content, source: this.source }),
+        });
+    }
+
+    private delReply(reply: Reply) {
+        this.$confirm("确定要删除该回复吗？", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        }).then(() => {
+            this.sdk.model(ReplyModelName).action("delete").updateInitialParams({
+                selected_list: [{ v: +reply.uniplat_version, id: +reply.id }],
+            }).execute().then(() => {
+                const index = this.replyList.findIndex(it => it === reply);
+                this.replyList.splice(index, 1);
+            })
+        })
+    }
+
+    private hideReplyInput() {
+        this.replyInputVisible = false;
+        this.addReplyStr = ""
+    }
+
+    private addReply() {
+        let addReplyStr = this.addReplyStr.trim()
+        if (addReplyStr.length < 2 || addReplyStr.length > 200) {
+            this.$message.warning("回复在2-200个字符之间");
+            return
+        }
+        this.sdk.model(ReplyModelName).action("insert_my").addInputs_parameter({
+            category: "毕节客服工作台",
+            org_id: this.sdk.global.initData.orgId,
+            model: ReplyModelName,
+            content: addReplyStr,
+            sort: 0
+        }).execute().then(() => {
+            this.getReplyList();
+            this.hideReplyInput();
+        });
+    }
+
+    private editing(reply: Reply) {
+        this.$set(this.editingItem, reply.id, true);
+        this.$set(this.editingItemContent, reply.id, reply.content);
+    }
+
+    private editCancel(reply: Reply) {
+        this.$set(this.editingItem, reply.id, false);
+    }
+
+    private editDone(reply: Reply) {
+        let addReplyStr = this.editingItemContent[reply.id].trim();
+        if (addReplyStr.length < 2 || addReplyStr.length > 200) {
+            this.$message.warning("回复在2-200个字符之间");
+            return
+        }
+        this.sdk.model(ReplyModelName).action("update")
+            .updateInitialParams({
+                selected_list: [{ v: +reply.uniplat_version, id: +reply.id }],
+            })
+            .addInputs_parameter({
+                category: "毕节客服工作台",
+                org_id: this.sdk.global.initData.orgId,
+                model: ReplyModelName,
+                content: addReplyStr,
+                sort: 0,
+                is_enabled: 1,
+                uniplat_uid: this.sdk.global.uid
+            }).execute().then(() => {
+                reply.content = addReplyStr;
+                reply.uniplat_version = (+reply.uniplat_version + 1).toString();
+                this.editCancel(reply);
             });
     }
 }
 </script>
 <style lang="less" scoped>
 .shortcut {
-    padding:10px;
-    font-size: 16px;
+    position: relative;
+    padding:10px 10px;
+    font-size: 14px;
+    white-space: normal;
+    color: #999;
+    .rep-content {
+        margin-left: 5px;
+    }
     &:hover {
         background: #e4f0ff;
     }
 }
+.btn-group {
+    text-align: right;
+    .el-button {
+        padding: 4px 0;
+    }
+    &.top-btn-group {
+        padding: 0 10px;
+    }
+}
+.msg-short-cut-wrap {
+    height: 100%;
+    overflow: auto;
+}
 </style>