情形选择

src/views/bussiness/doing-with-chat/index.vue

@@ -1,9 +1,34 @@
-<template></template>
+<template>
+  <div class="flex size-full flex-col">
+    <div>
+      <el-button @click="getAnswer">获取答案</el-button>
+      <template v-for="item in state.answers">
+        <div>{{ item }}</div>
+      </template>
+    </div>
+    <div class="flex-1 overflow-y-auto">
+      <treeNode :data="state.questions" ref="ref_treeNode" />
+    </div>
+  </div>
+</template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
+import { mockQuestion } from '@/views/bussiness/doing-with-chat/mock'
+import treeNode from './tree-node.vue'
 
-const state: any = reactive({})
+const state: any = reactive({
+  questions: mockQuestion.conditionInfo,
+  answers: [],
+})
+const ref_treeNode = ref()
+const getAnswer = () => {
+  state.answers = ref_treeNode.value.getAnswer()
+  console.log(state.answers)
+}
+onMounted(() => {
+  console.log(mockQuestion)
+})
 </script>
 
 <style lang="scss" scoped></style>

src/views/bussiness/doing-with-chat/tree-node.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :style="{ marginLeft: level * 20 + 'px' }">
+    <template v-for="(question, questionIndex) in data">
+      <div>{{ questionIndex + 1 }}、{{ question.conditionname }}</div>
+      <template v-if="question.optiontype === 'single'">
+        <template v-for="(answer, answerIndex) in question.children">
+          <div
+            class="__hover flex w-fit items-center px-2"
+            @click="question.__answer = answer.id"
+          >
+            <div
+              class="my-2 mr-2 size-5 rounded-full border"
+              :class="
+                answer.id === question.__answer
+                  ? 'bg-[var(--czr-main-color)]'
+                  : ''
+              "
+            />
+            {{ answer.conditionname }}
+          </div>
+          <template v-if="answer.id === question.__answer">
+            <treeNode
+              :data="answer.children"
+              :parentIndex="questionIndex"
+              :level="level + 1"
+              ref="ref_treeNode"
+            />
+          </template>
+        </template>
+      </template>
+      <template v-else>
+        <div>{{ question.optiontype }}</div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+
+const props = defineProps({
+  data: { default: () => [] },
+  level: { default: 0 },
+  parentIndex: { default: 0 },
+})
+const state: any = reactive({})
+const ref_treeNode = ref()
+
+const getAnswer = () => {
+  const arr: any = []
+  console.log(ref_treeNode)
+  props.data.forEach((question, questionIndex) => {
+    arr.push([question.__answer])
+  })
+  ref_treeNode.value?.forEach((v, i) => {
+    console.log(v.getAnswer())
+    v.getAnswer().forEach((a) => {
+      a.forEach((b) => {
+        arr[v.parentIndex].push(b)
+      })
+    })
+  })
+  return arr
+}
+defineExpose({
+  getAnswer,
+  parentIndex: props.parentIndex,
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-radio-group) {
+  flex-direction: column;
+  .el-radio {
+    margin: 0;
+  }
+}
+</style>

src/views/chat/answer/index.vue

@@ -49,7 +49,7 @@
       </template>
       <template v-else>
         <div
-          class="w-fit rounded-lg rounded-tl-none bg-[#EAF1FF] p-2.75 text-[#303133]"
+          class="w-fit max-w-full rounded-lg rounded-tl-none bg-[#EAF1FF] p-2.75 text-[#303133]"
         >
           <template v-for="part in textCpt">
             <template v-if="part.type === 'think'">
@@ -175,10 +175,10 @@ const md = new MarkdownIt({
   highlight: (str, lang) => {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang }).value}</code></pre>`
+        return `<pre class="hljs" style="padding: 10px"><code>${hljs.highlight(str, { language: lang }).value}</code></pre>`
       } catch (__) {}
     }
-    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`
+    return `<pre class="hljs" style="padding: 10px"><code>${md.utils.escapeHtml(str)}</code></pre>`
   },
 })
 const emit = defineEmits(['setText', 'onReBuild', 'onFeedback'])

src/views/manage/home/app/index.vue

@@ -92,7 +92,7 @@
         </div>
       </div>
       <div
-        class="m-1 flex-1 rounded-lg border-1 border-[var(--czr-main-color)]/5 shadow"
+        class="m-1 flex-1 overflow-hidden rounded-lg border-1 border-[var(--czr-main-color)]/5 shadow"
         v-loading="state.chat.loading"
       >
         <chat :online="state.chat.isOnline" :ID="state.ID" ref="ref_chat" />