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

auto-imports.d.ts

@@ -6,7 +6,6 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
-  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']

components.d.ts

@@ -17,7 +17,9 @@ declare module '@vue/runtime-core' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
@@ -44,9 +46,11 @@ declare module '@vue/runtime-core' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     FvCheckbox: typeof import('./src/fvcomponents/fvCheckbox/index.vue')['default']
     FvForm: typeof import('./src/fvcomponents/fvForm/index.vue')['default']

src/api/verbal-trick/index.js

@@ -7,6 +7,13 @@ export const addVerbal = (data) => {
     data
   })
 }
+export const addEnhanceVerbal = (data) => {
+  return request({
+    url: '/verbal/add/enhance',
+    method: 'post',
+    data
+  })
+}
 export const getVerbalDetail = (verbalId) => {
   return request({
     url: `/verbal/${verbalId}`,

src/components/liveCall/LiveCallItemHome.vue

@@ -6,8 +6,12 @@
         <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 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="暂无通话"/>
@@ -21,7 +25,13 @@
               <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>
+                <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>
             </div>
@@ -41,11 +51,17 @@
 
       </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";
+import {defineProps, reactive} from "vue";
+import {addEnhanceVerbal} from "@/api/verbal-trick";
+import {ElMessage} from "element-plus";
+
 const scrollbarRef = ref()
 const props = defineProps({
   recordObj: {
@@ -61,7 +77,64 @@ const props = defineProps({
     default: ''
   },
 })
-
+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 showContextMenu=(event,message)=>{
+  event.preventDefault(); // 阻止默认右键菜单
+  formDialogRef.value.openOrCloseDialog(true)
+  nextTick(() => {
+    formDialogRef.value.getFormInstance().setValues({
+      query: message
+    })
+  })
+}
 const getScrollbarRef = () => {
   return scrollbarRef.value
 }
@@ -87,7 +160,26 @@ 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%;

src/components/liveCall/index.vue

@@ -48,11 +48,17 @@ const getCurrentMsg=(line)=>{
   getCurrentContent(line).then(res=>{
     // console.info("🚀 ~method:res -----", res)
     if(line==1){
-      recordLeftObj.value.name=res.data.name
+      recordLeftObj.value.name=res.data.name||'张三'
       recordLeftObj.value.phone=res.data.callPhone
       recordLeftObj.value.orderName=res.data.orderName
       recordLeftObj.value.type=res.data.type
-      recordLeftObj.value.content=res.data.textVoList||[]
+      recordLeftObj.value.content=res.data.textVoList||[
+      //     {
+      //   name: '张三',
+      //   speaker: '0',
+      //   message: '张三工单',
+      // }
+      ]
     }else if(line==2){
       recordRightObj.value.name=res.data.name
       recordRightObj.value.phone=res.data.callPhone

src/views/enhance-speech/index.vue

@@ -0,0 +1,369 @@
+<template>
+  <fvSearchForm :searchConfig="searchConfig" @search="searchVerbalTrick"></fvSearchForm>
+  <fvTable ref="tableIns" :tableConfig="verbalTrickTableConfig"  @selectionChange="selectionChange" @headBtnClick="headBtnClick"></fvTable>
+  <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
+                :form-schema="formSchema" :form-rules="formRules"
+                @dialogSubmit="handleSubmitVerbalTrick"></fvFormDialog>
+</template>
+
+<script setup lang="jsx">
+import fvSelect from '@/fvcomponents/fvSelect/index.vue'
+import {ElMessage, ElMessageBox} from "element-plus";
+import { editVerbal, deleteVerbal, getVerbalDetail, addEnhanceVerbal} from "@/api/verbal-trick";
+import {reactive} from "vue";
+const router = useRouter()
+const dialogTitle = ref("");
+const dialogType = ref("");
+const verbalIds = ref("");
+const formDialogRef = ref()
+const tableIns = ref()
+const searchConfig = reactive([
+  {
+    label: '话术问题',
+    prop: 'query',
+    props: {
+      placeholder: '请输入话术问题查询',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-input',
+  },
+  {
+    label: '话术答案',
+    prop: 'answer',
+    props: {
+      placeholder: '请输入话术答案查询',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-input',
+  },
+  // {
+  //   label: '是否挂断电话',
+  //   prop: 'callOff',
+  //   props: {
+  //     placeholder: '请选择是否挂断电话查询',
+  //     cacheKey: 'call_off',
+  //     clearable: true,
+  //     filterable: true,
+  //   },
+  //   component: shallowRef(fvSelect),
+  // },
+  // {
+  //   label: '上下文类型',
+  //   prop: 'type',
+  //   props: {
+  //     placeholder: '请选择上下文类型查询',
+  //     cacheKey: 'context_type',
+  //     clearable: true,
+  //     filterable: true,
+  //   },
+  //   component: shallowRef(fvSelect),
+  // },
+])
+const auths = reactive({
+  add: ['order:verbal:add'],
+  edit: ['order:verbal:edit'],
+  delete: ['order:verbal:del'],
+})
+const verbalTrickTableConfig = reactive({
+  columns: [
+    {
+      type: 'selection',
+      prop: 'selection'
+    },
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 80,
+    },
+    {
+      prop: 'query',
+      label: '话术问题',
+      align: 'center'
+    },
+    {
+      prop: 'answer',
+      label: '话术答案',
+      align: 'center'
+    },
+    // {
+    //   prop: 'verbalContent',
+    //   label: '内容',
+    //   align: 'center'
+    // },
+    {
+      prop: 'callOff',
+      label: '是否挂断电话',
+      align: 'center',
+      currentRender: ({ row, index }) => {
+        if (row.callOff !== null) {
+          return (<Tag dictType={'call_off'} value={row.callOff} />)
+        } else {
+          return '--'
+        }
+      }
+    },
+    {
+      prop: 'type',
+      label: '上下文类型',
+      align: 'center',
+      currentRender: ({ row, index }) => {
+        if (row.type !== null) {
+          return (<Tag dictType={'context_type'} value={row.type} />)
+        } else {
+          return '--'
+        }
+      }
+    },
+    // {
+    //   prop: 'state',
+    //   label: '状态',
+    //   align: 'center',
+    //   showOverflowTooltip: false,
+    //   currentRender: ({ row, index }) => {
+    //     if (row.state !== null) {
+    //       return (<Tag dictType={'verbal_trick_state'} value={row.state} />)
+    //     } else {
+    //       return '--'
+    //     }
+    //   }
+    // },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 150,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        // btn.push({label: '编辑', prem: auths.edit, func: () => handleEdit(row), type: 'primary'})
+        btn.push({label: '删除', prem: auths.delete, func: () => handleSingleDelete(row), type: 'danger'})
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        v-perm={item.prem}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/verbal/enhance/list',
+  params: {},
+  btns: [
+    {name: '新增', key: 'add',type:'primary',icon:'Plus', auth: auths.add},
+    {name: '删除', key: 'delete', type: 'danger', auth: auths.delete},
+  ]
+})
+const formRules = reactive({
+  query: [
+    {required: true, message: "请输入话术问题", trigger: ["change", "blur"]}
+  ],
+  answer: [
+    {required: true, message: "请输入话术答案", trigger: ["change", "blur"]}
+  ],
+  // callOff: [
+  //   {required: true, message: "请选择是否挂断电话", trigger: ["change", "blur"]}
+  // ],
+  // state: [
+  //   {required: true, message: "请选择状态", trigger: ["change", "blur"]}
+  // ],
+});
+const formSchema = computed(() => {
+  return [
+    {
+      label: '话术问题',
+      prop: 'query',
+      component: 'el-input',
+      colProps: {
+        span: 24
+      },
+      props: {
+        placeholder: '请输入话术问题',
+        clearable: true,
+        type:'textarea',
+        rows:3
+      }
+    },
+    {
+      label: '话术答案',
+      prop: 'answer',
+      component: 'el-input',
+      colProps: {
+        span: 24
+      },
+      props: {
+        placeholder: '请输入话术答案',
+        clearable: true,
+        type:'textarea',
+        rows:3
+      }
+    },
+    {
+      label: '是否挂断电话',
+      prop: 'callOff',
+      component: shallowRef(fvSelect),
+      colProps: {
+        span: 24
+      },
+      props: {
+        placeholder: '请选择是否挂断电话',
+        cacheKey: 'call_off',
+        clearable: true,
+        filterable: true,
+      }
+    },
+    {
+      label: '上下文类型',
+      prop: 'type',
+      component: shallowRef(fvSelect),
+      colProps: {
+        span: 24
+      },
+      props: {
+        placeholder: '请选择上下文类型',
+        cacheKey: 'context_type',
+        clearable: true,
+        filterable: true,
+      }
+    },
+  ]
+})
+const searchVerbalTrick = (val) => {
+  let obj = {...val}
+  if (obj.dateValue) {
+    obj.startTime = obj.dateValue[0]
+    obj.endTime = obj.dateValue[1]
+    delete obj.dateValue
+  }
+  verbalTrickTableConfig.params = obj
+  tableIns.value.refresh()
+}
+
+const headBtnClick = (key) => {
+  switch (key) {
+    case 'add':
+      handleAdd()
+      break;
+    case 'delete':
+      handleMoreDelete()
+      break;
+  }
+}
+const handleAdd = () => {
+  formDialogRef.value.openOrCloseDialog(true)
+  dialogTitle.value = "新增话术";
+  dialogType.value = "add";
+  nextTick(() => {
+    formDialogRef.value.getFormInstance().setValues({})
+    // 清空校验
+    formDialogRef.value.getFormInstance().clearValidate()
+    formDialogRef.value.getFormInstance().resetFields()
+  })
+}
+const handleEdit = (row) => {
+  formDialogRef.value.openOrCloseDialog(true)
+  getDetail(row)
+  dialogTitle.value = "编辑话术";
+  dialogType.value = "edit";
+}
+const getDetail = (row) => {
+  getVerbalDetail(row.templateId).then(res => {
+    if (res.code === 1000) {
+      res.data.callOff=res.data.callOff+''
+      nextTick(() => {
+        formDialogRef.value.getFormInstance().setValues(res.data)
+        // 清空校验
+        formDialogRef.value.getFormInstance().clearValidate()
+      })
+    } else {
+      ElMessage.warning(res.msg)
+    }
+  })
+}
+
+const selectionChange = (selection) => {
+  if (selection.length !== 0) {
+    verbalIds.value = selection.map(item => item.templateId).join()
+  } else {
+    verbalIds.value=''
+  }
+}
+const deleteContactMethod = (verbalId) => {
+  deleteVerbal(verbalId).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success(res.msg)
+      tableIns.value.refresh()
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+const handleMoreDelete = () => {
+  if(verbalIds.value){
+    ElMessageBox.confirm(`确认删除选择的话术吗?`, '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      deleteContactMethod(verbalIds.value)
+    })
+  }else{
+    ElMessage.warning("请选择要删除的话术")
+  }
+}
+const handleSingleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除问题为${row.query}的话术吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteContactMethod(row.templateId)
+  })
+}
+
+//提交
+const handleSubmitVerbalTrick = async (formInstance) => {
+  if (!formInstance) return;
+  let validate = await formInstance.validate()
+  if (!validate.isValidate) return;
+  if (dialogType.value === "add") {
+    addEnhanceVerbal(formInstance.getValues()).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success(res.msg);
+        tableIns.value.refresh()
+        formDialogRef.value.openOrCloseDialog(false)
+      } else {
+        ElMessage.error(res.msg);
+      }
+    });
+  } else {
+    editVerbal(formInstance.getValues()).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success(res.msg);
+        tableIns.value.refresh()
+        formDialogRef.value.openOrCloseDialog(false)
+      } else {
+        ElMessage.error(res.msg);
+      }
+    });
+  }
+}
+</script>
+
+<style scoped>
+
+</style>