边聊边办

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

@@ -1,9 +1,69 @@
 <template>
-  <div class="mt-2 flex flex-col text-sm text-[#2E3238]">
+  <div
+    class="mt-2 flex flex-col border border-[#E6E8EA] 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
+        class="flex items-center justify-between gap-2 py-4"
+        :class="index > 0 ? 'border-t-1 border-[#E6E8EA]' : ''"
+      >
+        <div class="flex w-1/8 justify-center">{{ index + 1 }}</div>
+        <div class="flex-1">{{ item.materialname }}</div>
+        <div class="flex w-1/4 flex-col gap-2">
+          <div>形式：{{ materialformatFormat(item.materialformat) }}</div>
+          <div>类型：{{ materialtypeFormat(item.materialtype) }}</div>
+          <div>份数：{{ item.pagenum }}</div>
+          <div>规格：{{ item.pageformat }}</div>
+        </div>
+        <div
+          class="w-1/6"
+          :class="item.isneed == 1 ? 'text-[var(--czr-error-color)]' : ''"
+        >
+          {{
+            item.isneed === '1'
+              ? `必要`
+              : item.isneed === '2'
+                ? `非必要`
+                : item.isneed === '3'
+                  ? `容缺后补`
+                  : ``
+          }}
+        </div>
+        <div class="flex w-1/6 flex-col gap-2 text-xs">
+          <div>{{ sourcetypeFormat(item.sourcetype) }}</div>
+          <a-popover
+            v-if="item.sourceexplain"
+            placement="top"
+            :content="item.sourceexplain"
+            :overlayStyle="{ maxWidth: '300px' }"
+          >
+            <div class="w-fit text-[var(--czr-main-color)]">来源渠道</div>
+          </a-popover>
+          <a-popover
+            v-if="item.bylaw"
+            placement="top"
+            :content="item.bylaw"
+            :overlayStyle="{ maxWidth: '300px' }"
+          >
+            <div class="w-fit text-[var(--czr-main-color)]">材料依据</div>
+          </a-popover>
+          <a-popover
+            v-if="item.acceptstand"
+            placement="top"
+            :content="item.acceptstand"
+            :overlayStyle="{ maxWidth: '300px' }"
+          >
+            <div class="w-fit text-[var(--czr-main-color)]">受理标准</div>
+          </a-popover>
+          <a-popover
+            v-if="item.fillexplain"
+            placement="top"
+            :content="item.fillexplain"
+            :overlayStyle="{ maxWidth: '300px' }"
+          >
+            <div class="w-fit text-[var(--czr-main-color)]">填报须知</div>
+          </a-popover>
+        </div>
       </div>
     </template>
   </div>
@@ -16,6 +76,47 @@ const props = defineProps({
   data: { default: () => [] },
 })
 const state: any = reactive({})
+//材料形式
+const materialformatFormat = (value) => {
+  switch (~~value) {
+    case 1:
+      return `纸质`
+    case 2:
+      return `电子`
+    case 3:
+      return `纸质和电子`
+    case 4:
+      return `纸质或电子`
+    default:
+      return `无`
+  }
+}
+//材料类型
+const materialtypeFormat = (value) => {
+  switch (~~value) {
+    case 1:
+      return `原件`
+    case 2:
+      return `复印件`
+    case 3:
+      return `原件和复印件`
+    default:
+      return `无`
+  }
+}
+//来源渠道
+const sourcetypeFormat = (value) => {
+  switch (~~value) {
+    case 10:
+      return `申请人自备`
+    case 20:
+      return `政府部门核发`
+    case 99:
+      return `其他`
+    default:
+      return `无`
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,7 +1,10 @@
 <template>
   <div :style="{ marginLeft: level * 20 + 'px' }">
     <template v-for="(question, questionIndex) in data">
-      <div class="my-2 text-sm font-bold text-[#2E3238]">
+      <div
+        class="my-2 text-sm font-bold text-[#2E3238]"
+        style="line-height: 1.2"
+      >
         {{ questionIndex + 1 }}、{{ question.conditionname }}
       </div>
       <template v-if="question.optiontype === 'single'">

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

@@ -56,11 +56,11 @@
               v-html="sxOnethingInfo.acceptcondition"
             />
             <div
-              class="flex h-10.5 w-full items-center justify-center rounded-lg bg-[#EAF1FF] text-base text-[var(--czr-main-color)]"
+              class="flex h-10.5 w-full items-center justify-center rounded-lg bg-[#EAF1FF] text-base"
               :class="
-                state.step.options[state.step.index].time > 0
-                  ? 'cursor-no-drop'
-                  : '__hover'
+                state.step.options[state.step.index].complete
+                  ? '__hover bg-[var(--czr-main-color)] text-[#ffffff]'
+                  : 'cursor-no-drop bg-[#EAF1FF] text-[var(--czr-main-color)]'
               "
               @click="onStep(state.step.index)"
               v-if="!state.step.options[state.step.index].finish"
@@ -353,7 +353,10 @@
                   {{ item.materialname }}
                 </div>
                 <div
-                  class="ml-2 rounded-xs border-1 border-[var(--czr-error-color)] bg-[var(--czr-error-color)]/10 px-1 py-0.5 text-[0.63rem] text-[var(--czr-error-color)]"
+                  class="ml-2 rounded-xs border-1 border-[var(--czr-error-color)] bg-[var(--czr-error-color)]/10 px-1 py-0.5 text-[0.63rem]"
+                  :class="
+                    item.isneed == 1 ? 'text-[var(--czr-error-color)]' : ''
+                  "
                 >
                   {{
                     item.isneed === '1'
@@ -374,17 +377,25 @@
                           color="var(--czr-success-color)"
                           size="14"
                         />已上传
-                        <div class="mx-2 text-xs text-[var(--czr-main-color)]">
-                          |
-                        </div>
-                        <SvgIcon
-                          name="czr_del"
-                          :active="true"
-                          class="__hover"
-                          @click="
-                            ((item.__isUpload = false), (item.__url = ''))
-                          "
-                        />
+                        <template
+                          v-if="!state.step.options[state.step.index].finish"
+                        >
+                          <div
+                            class="mx-2 text-xs text-[var(--czr-main-color)]"
+                          >
+                            |
+                          </div>
+                          <SvgIcon
+                            name="czr_del"
+                            :active="true"
+                            class="__hover"
+                            @click="
+                              ((item.__isUpload = false),
+                              (item.__url = ''),
+                              validFiles())
+                            "
+                          />
+                        </template>
                       </template>
                       <template v-else> {{ item.__process }}% </template>
                     </div>
@@ -491,7 +502,7 @@ import {
   ref,
 } from 'vue'
 import { mockQuestion, sxOnethingInfo, sxImplBasicMaterial } from './mock'
-import treeNode from './tree-node.vue'
+import treeNode from './chat/tree-node.vue'
 import toBackCom from '@/views/manage/components/to-back.vue'
 import { useRoute, useRouter } from 'vue-router'
 import { appDetail } from '@/api/modules/app'
@@ -510,7 +521,13 @@ const state: any = reactive({
   answers: [],
   step: {
     options: [
-      { label: '用户须知', finish: false, wait: true, time: 0 },
+      {
+        label: '用户须知',
+        finish: false,
+        wait: true,
+        complete: false,
+        time: Number(sxOnethingInfo.countdown) || 3,
+      },
       {
         label: '情形选择',
         finish: false,
@@ -545,7 +562,7 @@ const state: any = reactive({
         },
       },
     ],
-    index: 4,
+    index: 0,
   },
 })
 const ref_chat = ref()
@@ -562,15 +579,17 @@ const onStep = (index) => {
   switch (state.step.index) {
     case 0:
       {
-        if (!current.finish) {
-          current.finish = true
-          current.wait = false
-          state.step.options[index + 1].wait = true
-          ref_chat.value.mockAnswer({
-            text: '欢迎进入事项网办阶段！请选择情形',
-          })
+        if (current.complete) {
+          if (!current.finish) {
+            current.finish = true
+            current.wait = false
+            state.step.options[index + 1].wait = true
+            ref_chat.value.mockAnswer({
+              text: '欢迎进入事项网办阶段！请选择情形',
+            })
+          }
+          state.step.index = index + 1
         }
-        state.step.index = index + 1
       }
       break
     case 1:
@@ -598,30 +617,36 @@ const onStep = (index) => {
       break
     case 2:
       {
-        // ref_form.value.submit().then(() => {
-        if (!current.finish) {
-          current.finish = true
-          current.wait = false
-          state.step.options[index + 1].wait = true
-          ref_chat.value.mockAnswer({
-            text: '表单已填写完成！接下来进入材料上传阶段！以下是需要您提供的材料，请在左侧上传',
-          })
-        }
-        state.step.index = index + 1
-        // })
+        ref_form.value.submit().then(() => {
+          if (!current.finish) {
+            current.finish = true
+            current.wait = false
+            state.step.options[index + 1].wait = true
+            ref_chat.value.mockAnswer({
+              text: '表单已填写完成！接下来进入材料上传阶段！以下是需要您提供的材料，请在左侧上传',
+              slot: 'material',
+              slotProps: {
+                data: state.step.options[3].fileList,
+              },
+            })
+          }
+          state.step.index = index + 1
+        })
       }
       break
     case 3:
       {
-        if (!current.finish) {
-          current.finish = true
-          current.wait = false
-          state.step.options[index + 1].wait = true
-          ref_chat.value.mockAnswer({
-            text: '请填写结果材料领取方式',
-          })
+        if (current.complete) {
+          if (!current.finish) {
+            current.finish = true
+            current.wait = false
+            state.step.options[index + 1].wait = true
+            ref_chat.value.mockAnswer({
+              text: '请填写结果材料领取方式',
+            })
+          }
+          state.step.index = index + 1
         }
-        state.step.index = index + 1
       }
       break
     case 4:
@@ -631,7 +656,7 @@ const onStep = (index) => {
             current.finish = true
             current.wait = false
             ref_chat.value.mockAnswer({
-              text: '办理成功！该事项将在8个工作日内办结，请耐心等待',
+              text: `办理成功！该事项将在${sxOnethingInfo.promiseday}个工作日内办结，请耐心等待`,
             })
           }
         })
@@ -660,14 +685,7 @@ const onUpload = (row) => {
       })
         .then(({ data }: any) => {
           row.__url = data.path
-          if (
-            state.step.options[state.step.index].fileList.every((v) => v.__url)
-          ) {
-            state.step.options[state.step.index].complete = true
-            ref_chat.value.mockAnswer({
-              text: '检测到您已上传必要材料，请再次核对，上传完成无误后点击下一步',
-            })
-          }
+          validFiles()
         })
         .catch(() => {})
         .finally(() => {})
@@ -675,6 +693,16 @@ const onUpload = (row) => {
   })
   fileInput.click()
 }
+const validFiles = () => {
+  if (state.step.options[state.step.index].fileList.every((v) => v.__url)) {
+    state.step.options[state.step.index].complete = true
+    ref_chat.value.mockAnswer({
+      text: '检测到您已上传必要材料，请再次核对，上传完成无误后点击下一步',
+    })
+  } else {
+    state.step.options[state.step.index].complete = false
+  }
+}
 
 onMounted(() => {
   initDetail()
@@ -688,28 +716,11 @@ 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) {
               clearInterval(timer)
+              state.step.options[state.step.index].complete = true
             }
           }, 1000)
         })

src/views/chat/normal.vue

@@ -329,6 +329,12 @@ const mockAnswer = (answer) => {
     finished: true,
     mock: true,
   })
+  nextTick(() => {
+    ref_chatMsg.value.scrollTo({
+      top: ref_chatMsg.value.scrollHeight,
+      behavior: 'smooth',
+    })
+  })
 }
 onMounted(() => {
   initTextHandle()