历史性的一刻

src/types/chat.ts

@@ -16,5 +16,6 @@ export type AnswerStruct = {
   taskId?: string //  回答的任务ID，停止回答使用
   ask?: string //  回答的问题
   mock?: boolean //  是否为自己模拟的回答，不需要回答后的额外功能
-  teleport?: any //  自定义组件的ID，通過<teleport/>传送，降低耦合度
+  slot?: any //  自定义组件的插槽名称
+  slotProps?: any //  自定义组件的插槽参数
 }

src/views/business/doing-with-chat/chat/form-list.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="mt-2 flex flex-col gap-2 text-sm text-[var(--czr-main-color)]">
     <template v-for="item in data">
-      <div class="flex items-center" @click="$emit('ddd')">
+      <div class="flex items-center gap-2">
         <SvgIcon name="document" :active="true" />{{ item }}
       </div>
     </template>

src/views/business/doing-with-chat/chat/material-list.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="mt-2 flex flex-col text-sm text-[#2E3238]">
+    <template v-for="(item, index) in data">
+      <div class="flex items-center">
+        <div>{{ index + 1 }}</div>
+        <div>{{ item.materialname }}</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const props = defineProps({
+  data: { default: () => [] },
+})
+const state: any = reactive({})
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -467,7 +467,14 @@
       <div
         class="m-1 flex-1 overflow-hidden rounded-lg border-1 border-[var(--czr-main-color)]/5 shadow"
       >
-        <chat :online="false" :ID="state.ID" ref="ref_chat" />
+        <chat :online="false" :ID="state.ID" ref="ref_chat">
+          <template #form="{ props }">
+            <formList :data="props.data" />
+          </template>
+          <template #material="{ props }">
+            <materialList :data="props.data" />
+          </template>
+        </chat>
       </div>
     </div>
   </div>
@@ -492,6 +499,8 @@ import chat from '@/views/chat/index.vue'
 import { isValue } from '@/utils/czr-util'
 import { v4 } from 'uuid'
 import { fileUploadFile } from '@/api/modules/global/upload'
+import formList from './chat/form-list.vue'
+import materialList from './chat/material-list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -571,38 +580,17 @@ const onStep = (index) => {
             current.finish = true
             current.wait = false
             state.step.options[index + 1].wait = true
-            const id = v4()
-            const ddd = () => {
-              console.log(123123)
-            }
             ref_chat.value.mockAnswer({
               text: '欢迎进入表单填写阶段！为了让您的体验更加顺畅，我已经贴心地为您预先填写了部分内容。接下来，请在左侧补充剩余的信息，感谢您的配合！',
-              teleport: id,
-              com: {
-                is: defineAsyncComponent(
-                  () =>
-                    import(
-                      '@/views/business/doing-with-chat/chat/form-list.vue'
-                    ),
-                ),
-                binds: {
-                  data: ['asdasd', 'zxvzxvzxv'],
-                  ddd,
-                },
+              slot: 'form',
+              slotProps: {
+                data: [
+                  '基本信息表',
+                  '海南省灵活就业人员参保登记表',
+                  '基本养老保险、职业（企业）年金关系转移接续申请表',
+                ],
               },
             })
-            // state.components.push({
-            //   id,
-            //   is: defineAsyncComponent(
-            //     () =>
-            //       import(
-            //         '@/views/business/doing-with-chat/chat/form-list.vue'
-            //         ),
-            //   ),
-            //   props: {
-            //     data: ['asdasda', 'faszxcszczxc'],
-            //   },
-            // })
           }
           state.step.index = index + 1
         }
@@ -700,6 +688,24 @@ const initDetail = () => {
         document.title = state.detail.name
         nextTick(() => {
           ref_chat.value?.init()
+          ref_chat.value.mockAnswer({
+            text: '欢迎进入表单填写阶段！为了让您的体验更加顺畅，我已经贴心地为您预先填写了部分内容。接下来，请在左侧补充剩余的信息，感谢您的配合！',
+            slot: 'form',
+            slotProps: {
+              data: [
+                '基本信息表',
+                '海南省灵活就业人员参保登记表',
+                '基本养老保险、职业（企业）年金关系转移接续申请表',
+              ],
+            },
+          })
+          ref_chat.value.mockAnswer({
+            text: '表单已填写完成！接下来进入材料上传阶段！以下是需要您提供的材料，请在左侧上传',
+            slot: 'material',
+            slotProps: {
+              data: state.step.options[3].fileList,
+            },
+          })
           const timer = setInterval(() => {
             state.step.options[0].time -= 1
             if (state.step.options[0].time === 0) {

src/views/chat/answer/index.vue

@@ -138,9 +138,9 @@
             />
           </el-tooltip>
         </div>
-        <!--        <template v-if="item.com">-->
-        <!--          <component :is="item.com.is" />-->
-        <!--        </template>-->
+        <template v-if="item.slot">
+          <slot :name="item.slot" :props="item.slotProps" />
+        </template>
         <template v-if="item.adviseLoading">
           <div class="mt-2 ml-2.5 text-sm text-[var(--czr-main-color)]">
             问题建议生成中……

src/views/chat/index.vue

@@ -8,7 +8,15 @@
     />
   </template>
   <template v-else>
-    <normalChat ref="ref_chat" :ID="ID" :test="test" />
+    <normalChat ref="ref_chat" :ID="ID" :test="test">
+      <template
+        v-for="key in Object.keys($slots)"
+        :key="key"
+        #[key]="{ props }"
+      >
+        <slot :name="key" :props="props" />
+      </template>
+    </normalChat>
   </template>
 </template>
 

src/views/chat/normal.vue

@@ -16,7 +16,12 @@
             @setText="(val) => setText(val.text, val.send)"
             @onReBuild="onReBuild"
             @onFeedback="onFeedback"
-          />
+            v-bind="$slots"
+          >
+            <template #[item.slot]="{ props }">
+              <slot :name="item.slot" :props="props" />
+            </template>
+          </answerCom>
         </template>
       </template>
     </div>