关键话术

src/views/zs/clue/components/SkillDialog.vue

@@ -0,0 +1,90 @@
+<!--
+ * @Author: riverQiu
+ * @Date: 2023-10-14 13:21:37
+ * @LastEditors: riverQiu
+ * @LastEditTime: 2023-10-15 00:55:44
+ * @Description:
+-->
+<template>
+  <el-dialog title="话术" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="800px" height="700">
+    <div>
+      <!-- 问题 -->
+      <el-input v-model="queryParams.question" placeholder="请输入问题" clearable @keyup.enter.native="queryAnswer"  style="margin-bottom: 10px;"/>
+
+      <!-- 关键词 -->
+      <el-checkbox-group v-model="queryParams.keyList" @change="queryAnswer">
+            <el-checkbox v-for="(item, index) in dict.type.dm_skill_key" :key="index" :label="item.value" style="margin: 2px;" border>{{item.label}}</el-checkbox>
+        </el-checkbox-group>
+
+      <!-- 话术内容 -->
+      <el-card class="box-card">
+
+        <div class="text item">
+          <ul v-for="item in skillInfo">
+            <li>
+              <span style="font-style: italic; font-size: 16px; font-weight: bold; margin-right: 5px;">Q:</span><span>{{item.question}}</span>
+             
+            </li>
+            <li>
+              <span style="font-style: italic; font-size: 16px; font-weight: bold; margin-right: 5px;">A:</span><span v-html="item.content"></span>
+            </li>
+            <el-divider></el-divider>
+          </ul>
+          <span v-html="content" />
+        </div>
+      </el-card>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { listSkill,getSkillKey, getSkill } from '@/api/system/skill';
+export default {
+  name: 'SkillDialog',
+  dicts: ['dm_skill_key'],
+  data () {
+    return {
+      visible: false,
+      loading: true,
+      keyOptions: [],
+      content: undefined,
+      skillId: undefined,
+      queryParams:{
+        question: undefined,
+        keyList: [],
+        status: 2
+      },
+      skillInfo:[]
+    };
+  },
+  methods: {
+    init () {
+      this.visible = true;
+      this.getSkillKeyOption();
+    },
+    getSkillKeyOption () {
+      getSkillKey().then((resp) => {
+        if (resp && resp.code === 200) {
+          this.keyOptions = resp.data;
+        }
+      });
+    },
+    queryAnswer(){
+      console.log(this.queryParams)
+      this.skillInfo = []
+      listSkill(this.queryParams).then((resp) => {
+          if (resp && resp.code === 200) {
+            this.skillInfo = resp.data;
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  width: 500px;
+  min-height: 100px;
+}
+</style>
+