feat(verbal-trick): 新增增强话术功能

src/components/liveCall/LiveCallItemHome.vue

@@ -3,50 +3,66 @@
     <div class="header">
       <div>
         <span style="margin-right: 20px">{{ recordObj.name }}</span>
-        <span>电话号码：{{ recordObj.phone ||'--'}}</span>
+        <span>电话号码：{{ recordObj.phone || '--' }}</span>
+      </div>
+      <div><span>工单名称：{{ recordObj.orderName || '--' }}</span></div>
+      <div v-if="recordObj.type">
+        <el-tag>{{ recordObj.type == '1' ? '线路一' : recordObj.type == '2' ? '线路二' : '' }}</el-tag>
+      </div>
+      <div v-else>
+        <el-tag>{{ lineName }}</el-tag>
       </div>
-      <div><span>工单名称：{{ recordObj.orderName||'--' }}</span></div>
-      <div v-if="recordObj.type"><el-tag>{{ recordObj.type=='1'?'线路一':recordObj.type=='2'?'线路二':'' }}</el-tag></div>
-      <div v-else><el-tag>{{ lineName  }}</el-tag></div>
     </div>
     <el-scrollbar ref="scrollbarRef" class="scrollbar">
-      <el-empty v-if="recordObj.content?.length==0" description="暂无通话" />
+      <el-empty v-if="recordObj.content?.length==0" description="暂无通话"/>
       <div class="chat-content" ref="innerRef" v-else>
         <div v-for="(item,index) in recordObj.content" :key="index">
-          <el-divider border-style="dotted" v-if="item.isLine">{{item.lineMsg}}</el-divider>
+          <el-divider border-style="dotted" v-if="item.isLine">{{ item.lineMsg }}</el-divider>
           <div v-else>
             <div class="time-grap"><span>{{ item.conversationTimestamp || '6月5日 12:05' }}</span></div>
             <!-- 我的 -->
             <div v-if="item.speaker==0" class="word-my">
               <div class="info">
                 <!--              <p class="name">{{ item.speaker==0?recordObj.name:'运维助手' }} </p>-->
-                <p class="name">{{ item.speaker==0?recordObj.name:'运维助手' }} </p>
-                <div class="info-content">{{ item.message }}</div>
+                <p class="name">{{ item.speaker == 0 ? recordObj.name : '运维助手' }} </p>
+                <el-tooltip
+                    effect="customized"
+                    content="鼠标右击消息框添加答案"
+                    placement="bottom"
+                >
+                  <div class="info-content"  @contextmenu="showContextMenu($event,item.message)">{{ item.message }}</div>
+                </el-tooltip>
               </div>
-              <el-avatar>{{ item.speaker==0?recordObj.name:'运维助手' }}</el-avatar>
+              <el-avatar>{{ item.speaker == 0 ? recordObj.name : '运维助手' }}</el-avatar>
             </div>
 
             <!-- 对方 -->
             <div v-else class="word">
-              <el-avatar > {{ item.speaker==0?recordObj.name:'运维助手' }} </el-avatar>
+              <el-avatar> {{ item.speaker == 0 ? recordObj.name : '运维助手' }}</el-avatar>
               <div class="info">
-                <p class="name">{{ item.speaker==0?recordObj.name:'运维助手' }} </p>
+                <p class="name">{{ item.speaker == 0 ? recordObj.name : '运维助手' }} </p>
                 <div class="info-content">{{ item.message }}</div>
               </div>
             </div>
           </div>
         </div>
 
-<!--        <el-empty description="暂无通话记录~" v-else/>-->
+        <!--        <el-empty description="暂无通话记录~" v-else/>-->
 
       </div>
     </el-scrollbar>
+    <fvFormDialog ref="formDialogRef" width="400" :title="dialogTitle"
+                  :form-schema="formSchema" :form-rules="formRules"
+                  @dialogSubmit="handleSubmitAddressBook"></fvFormDialog>
   </div>
 </template>
 
 <script setup>
-import {defineProps} from "vue";
-const scrollbarRef=ref()
+import {defineProps, reactive} from "vue";
+import {addEnhanceVerbal} from "@/api/verbal-trick";
+import {ElMessage} from "element-plus";
+
+const scrollbarRef = ref()
 const props = defineProps({
   recordObj: {
     type: Object,
@@ -61,33 +77,109 @@ const props = defineProps({
     default: ''
   },
 })
-
-const getScrollbarRef=()=>{
-  return  scrollbarRef.value
+const formDialogRef = ref()
+const dialogTitle = ref("添加问题答案");
+const formRules = reactive({
+  answer: [
+    {required: true, message: "答案不能为空", trigger: "blur"},
+  ],
+});
+const formSchema = computed(() => {
+  return [
+    {
+      label: '问题',
+      prop: 'query',
+      component: 'el-input',
+      colProps: {
+        span: 24
+      },
+    },
+    {
+      label: '答案',
+      prop: 'answer',
+      component: 'el-input',
+      colProps: {
+        span: 24
+      },
+      props: {
+        placeholder: '请输入答案',
+        clearable: true,
+      }
+    },
+  ]
+})
+const handleSubmitAddressBook = async (formInstance) => {
+  if (!formInstance) return;
+  let validate = await formInstance.validate()
+  if (!validate.isValidate) return;
+  let params={
+    query:formInstance.getValues().query,
+    answer:formInstance.getValues().answer
+  }
+  addEnhanceVerbal(params).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success(res.msg);
+      formDialogRef.value.openOrCloseDialog(false)
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+  console.log('params',params)
 }
-const handleShowDeadLine=(recordObj)=>{
+const showContextMenu=(event,message)=>{
+  event.preventDefault(); // 阻止默认右键菜单
+  formDialogRef.value.openOrCloseDialog(true)
+  nextTick(() => {
+    formDialogRef.value.getFormInstance().setValues({
+      query: message
+    })
+  })
+}
+const getScrollbarRef = () => {
+  return scrollbarRef.value
+}
+const handleShowDeadLine = (recordObj) => {
   console.info("🚀 ~method:'recordObj' -----", recordObj)
-  let flag=false
-  if(recordObj.content&&recordObj.content.length>1){
-        let indices = recordObj.content.reduce(function (r, v, i) {
-          return r.concat(v === 'a' ? i : []);
-        }, []);
+  let flag = false
+  if (recordObj.content && recordObj.content.length > 1) {
+    let indices = recordObj.content.reduce(function (r, v, i) {
+      return r.concat(v === 'a' ? i : []);
+    }, []);
 
     console.log(indices);
 
-    recordObj.content.forEach((item,index)=>{
-      console.info("🚀 ~method:.callIdNumber -----",recordObj.content.findIndex(item=>item.callIdNumber), item.callIdNumber)
-      flag=recordObj.content[recordObj.content.length-2]?.callIdNumber!=recordObj.content[recordObj.content.length-1].callIdNumber
+    recordObj.content.forEach((item, index) => {
+      console.info("🚀 ~method:.callIdNumber -----", recordObj.content.findIndex(item => item.callIdNumber), item.callIdNumber)
+      flag = recordObj.content[recordObj.content.length - 2]?.callIdNumber != recordObj.content[recordObj.content.length - 1].callIdNumber
 
     })
   }
-return flag;
+  return flag;
 }
 defineExpose({
   getScrollbarRef
 })
 </script>
+<style lang="scss">
+.el-popper.is-customized {
+  /* Set padding to ensure the height is 32px */
+  padding: 6px 12px;
+  margin-top: -8px;
+  background: rgb(232 232 232) !important;
+  color: rgb(102, 102, 102) !important;
 
+  span {
+    letter-spacing: 0.5px;
+  }
+}
+
+
+.el-popper.is-customized .el-popper__arrow::before {
+  background: transparent !important;
+  display: none;
+  right: 0;
+}
+</style>
 <style lang="scss" scoped>
 .live-call {
   width: 48%;