边聊边办

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

@@ -22,10 +22,12 @@
             <div
               class="flex items-center text-base"
               :class="`${
-                item.finish ? 'font-bold text-[#2E3238]' : 'text-[#A7ADB9]'
-              } ${item.finish || state.step.index <= index ? '__hover' : 'cursor-no-drop'}`"
+                item.finish || item.wait
+                  ? 'font-bold text-[#2E3238]'
+                  : 'text-[#A7ADB9]'
+              } ${item.finish || item.wait ? '__hover' : 'cursor-no-drop'}`"
               @click="
-                item.finish || state.step.index <= index
+                item.finish || item.wait
                   ? (state.step.index = index)
                   : undefined
               "
@@ -33,7 +35,7 @@
               <div
                 class="mr-2.5 flex size-8 items-center justify-center rounded-full border-1 border-[#A7ADB9]"
                 :class="
-                  item.finish
+                  item.finish || item.wait
                     ? 'border-[var(--czr-main-color)] bg-[var(--czr-main-color)] text-[#ffffff]'
                     : 'border-[#A7ADB9]'
                 "
@@ -61,6 +63,7 @@
                   : '__hover'
               "
               @click="onStep(state.step.index + 1)"
+              v-if="!state.step.options[state.step.index].finish"
             >
               我已阅读并遵守以上规定
               <template v-if="state.step.options[state.step.index].time > 0">
@@ -81,6 +84,7 @@
                 :data="state.step.options[state.step.index].questions"
                 ref="ref_treeNode"
                 @onChange="getAnswer"
+                :view="state.step.options[state.step.index].finish"
               />
             </div>
             <div
@@ -91,12 +95,247 @@
                   : 'cursor-no-drop bg-[#EAF1FF] text-[var(--czr-main-color)]'
               "
               @click="onStep(state.step.index + 1)"
+              v-if="!state.step.options[state.step.index].finish"
+            >
+              确定
+            </div>
+          </div>
+        </template>
+        <template v-else-if="state.step.index === 2">
+          <div class="flex flex-1 flex-col gap-4 overflow-hidden">
+            <div class="max-h-fit flex-1 overflow-y-auto">
+              <CzrForm
+                ref="ref_form"
+                label-width="6.1rem"
+                layout="y"
+                :form-view="state.step.options[state.step.index].finish"
+              >
+                <div class="__czr-title_2">基本信息表</div>
+                <div
+                  class="mt-4 grid w-full grid-cols-2 gap-x-4 rounded-sm bg-[#0062E9]/5 p-4 text-sm text-[#576275]"
+                >
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="姓名"
+                    v-model:param="
+                      state.step.options[state.step.index].form.name
+                    "
+                    :disabled="true"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="手机号码"
+                    v-model:param="state.step.options[state.step.index].form.a1"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="证件类型"
+                    v-model:param="
+                      state.step.options[state.step.index].form.certType
+                    "
+                    :disabled="true"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="证件号码"
+                    v-model:param="
+                      state.step.options[state.step.index].form.certNumber
+                    "
+                    :disabled="true"
+                  />
+                  <CzrFormColumn
+                    class="col-span-2"
+                    required
+                    :span="24"
+                    label="籍贯"
+                    v-model:param="state.step.options[state.step.index].form.a2"
+                  />
+                  <CzrFormColumn
+                    class="col-span-2"
+                    required
+                    :span="24"
+                    label="联系地址"
+                    v-model:param="state.step.options[state.step.index].form.a3"
+                    type="textarea"
+                    :rows="2"
+                  />
+                </div>
+                <div class="__czr-title_2 mt-4">
+                  海南省灵活就业人员参保登记表
+                </div>
+                <div
+                  class="mt-4 grid w-full grid-cols-2 gap-x-4 rounded-sm bg-[#0062E9]/5 p-4 text-sm text-[#576275]"
+                >
+                  <div class="col-span-2 mb-4 font-bold text-[#2E3238]">
+                    基本信息
+                  </div>
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="证件类型"
+                    v-model:param="state.step.options[state.step.index].form.b1"
+                    link="select"
+                    :options="[
+                      { label: '居民身份证（户口簿）', value: 1 },
+                      { label: '中国人民解放军军官证', value: 2 },
+                      { label: '中国人民武装警察警官证', value: 3 },
+                      {
+                        label: '香港特区护照/港澳居民来往内地通行证',
+                        value: 4,
+                      },
+                      {
+                        label: '澳门特区护照/港澳居民来往内地通行证',
+                        value: 5,
+                      },
+                      { label: '台湾居民居住证', value: 6 },
+                      { label: '外国人永久居留证', value: 7 },
+                    ]"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="户口所属区"
+                    v-model:param="state.step.options[state.step.index].form.b2"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="户口性质"
+                    v-model:param="state.step.options[state.step.index].form.b3"
+                    link="select"
+                    :options="[
+                      { label: '本省城镇', value: 1 },
+                      { label: '外省城镇', value: 2 },
+                      { label: '本省农村', value: 3 },
+                      { label: '外省农村', value: 4 },
+                      { label: '香港特别行政区居民', value: 5 },
+                      { label: '澳门特别行政区居民', value: 6 },
+                      { label: '台湾地区居民', value: 7 },
+                    ]"
+                  />
+                  <CzrFormColumn
+                    class="col-span-2"
+                    required
+                    :span="24"
+                    label="户口所在地"
+                    v-model:param="state.step.options[state.step.index].form.b4"
+                    type="textarea"
+                    :rows="2"
+                  />
+                  <CzrFormColumn
+                    class="col-span-2"
+                    required
+                    :span="24"
+                    label="现居住地址"
+                    v-model:param="state.step.options[state.step.index].form.b5"
+                    type="textarea"
+                    :rows="2"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="学历"
+                    v-model:param="state.step.options[state.step.index].form.b6"
+                    link="select"
+                    :options="[
+                      { label: '博士研究生', value: 1 },
+                      { label: '硕士研究生', value: 2 },
+                      { label: '大学本科', value: 3 },
+                      { label: '大学专科', value: 4 },
+                      { label: '中等专科', value: 5 },
+                      { label: '职业高中', value: 6 },
+                      {
+                        label: '技工学校（技师班、中级工班、高级工班）',
+                        value: 7,
+                      },
+                    ]"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="国家/地区"
+                    v-model:param="state.step.options[state.step.index].form.b7"
+                  />
+                  <div class="col-span-2 mb-4 font-bold text-[#2E3238]">
+                    参保信息
+                  </div>
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="统筹区"
+                    v-model:param="state.step.options[state.step.index].form.c1"
+                    link="select"
+                    :options="[
+                      { label: '琼海市社会保险服务中心', value: 1 },
+                      { label: '万宁市社会保险服务中心', value: 2 },
+                      { label: '东方市社会保险服务中心', value: 3 },
+                      { label: '洋浦经济开发区社会保险服务中心', value: 4 },
+                      { label: '三亚市社会保险服务中心', value: 5 },
+                      { label: '五指山市社会保险服务中心', value: 6 },
+                      { label: '海南省', value: 7 },
+                    ]"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="参保情况"
+                    v-model:param="state.step.options[state.step.index].form.c2"
+                    link="select"
+                    :options="[
+                      { label: '首次参保', value: 1 },
+                      { label: '已参过保', value: 2 },
+                    ]"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="参保险种"
+                    v-model:param="state.step.options[state.step.index].form.c3"
+                    link="select"
+                    :options="[
+                      { label: '基本养老保险', value: 1 },
+                      { label: '基本医疗保险', value: 2 },
+                    ]"
+                  />
+                </div>
+                <div class="__czr-title_2 mt-4">
+                  基本养老保险、职业（企业）年金关系转移接续申请表
+                </div>
+                <div
+                  class="mt-4 grid w-full grid-cols-2 gap-x-4 rounded-sm bg-[#0062E9]/5 p-4 text-sm text-[#576275]"
+                >
+                  <CzrFormColumn
+                    class="col-span-2"
+                    required
+                    :span="24"
+                    label="户籍所在地"
+                    v-model:param="state.step.options[state.step.index].form.d1"
+                    type="textarea"
+                    :rows="2"
+                  />
+                  <CzrFormColumn
+                    required
+                    :span="24"
+                    label="申请日期"
+                    v-model:param="state.step.options[state.step.index].form.d2"
+                    link="date"
+                  />
+                </div>
+              </CzrForm>
+            </div>
+            <div
+              class="__hover flex h-10.5 w-full items-center justify-center rounded-lg bg-[var(--czr-main-color)] text-base text-[#ffffff]"
+              @click="onStep(state.step.index + 1)"
+              v-if="!state.step.options[state.step.index].finish"
             >
               确定
             </div>
           </div>
         </template>
-        <template v-else-if="state.step.index === 2"></template>
         <template v-else-if="state.step.index === 3"></template>
         <template v-else-if="state.step.index === 4"></template>
       </div>
@@ -141,24 +380,35 @@ const state: any = reactive({
   answers: [],
   step: {
     options: [
-      { label: '用户须知', finish: false, time: 0 },
+      { label: '用户须知', finish: false, wait: true, time: 0 },
       {
         label: '情形选择',
         finish: false,
+        wait: false,
         complete: false,
         questions: mockQuestion.conditionInfo,
         answers: [],
       },
-      { label: '表单填写', finish: false },
-      { label: '材料上传', finish: false },
-      { label: '结果领取', finish: false },
+      {
+        label: '表单填写',
+        finish: false,
+        wait: false,
+        form: {
+          name: '张三',
+          certType: '身份证',
+          certNumber: '438123*********678',
+        },
+      },
+      { label: '材料上传', finish: false, wait: false },
+      { label: '结果领取', finish: false, wait: false },
     ],
-    index: 0,
+    index: 2,
   },
   // components: [],
 })
 const ref_chat = ref()
 const ref_treeNode = ref()
+const ref_form = ref()
 const getAnswer = () => {
   state.step.options[state.step.index].answers = ref_treeNode.value.getAnswer()
   state.step.options[state.step.index].complete = state.step.options[
@@ -166,12 +416,14 @@ const getAnswer = () => {
   ].answers.every((a) => a.every((b) => isValue(b)))
 }
 const onStep = (index) => {
-  const current = state.step.options[index - 1]
-  switch (index) {
-    case 1:
+  const current = state.step.options[state.step.index]
+  switch (state.step.index) {
+    case 0:
       {
         if (!current.finish) {
           current.finish = true
+          current.wait = false
+          state.step.options[index].wait = true
           ref_chat.value.mockAnswer({
             text: '欢迎进入事项网办阶段！请选择情形',
           })
@@ -179,11 +431,13 @@ const onStep = (index) => {
         state.step.index = index
       }
       break
-    case 2:
+    case 1:
       {
         if (current.complete) {
           if (!current.finish) {
             current.finish = true
+            current.wait = false
+            state.step.options[index].wait = true
             const id = v4()
             const ddd = () => {
               console.log(123123)
@@ -221,6 +475,21 @@ const onStep = (index) => {
         }
       }
       break
+    case 2:
+      {
+        // ref_form.value.submit().then(() => {
+        if (!current.finish) {
+          current.finish = true
+          current.wait = false
+          state.step.options[index].wait = true
+          ref_chat.value.mockAnswer({
+            text: '表单已填写完成！接下来进入材料上传阶段！以下是需要您提供的材料，请在左侧上传',
+          })
+        }
+        state.step.index = index
+        // })
+      }
+      break
   }
 }
 onMounted(() => {

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

@@ -7,10 +7,13 @@
       <template v-if="question.optiontype === 'single'">
         <template v-for="(answer, answerIndex) in question.children">
           <div
-            class="__hover flex w-fit items-center px-2 text-sm text-[#576275]"
+            class="flex w-fit items-center px-2 text-sm text-[#576275]"
+            :class="view ? 'cursor-no-drop' : '__hover'"
             @click="
-              ((question.__answer = answer.id),
-              $nextTick(() => $emit('onChange')))
+              view
+                ? undefined
+                : ((question.__answer = answer.id),
+                  $nextTick(() => $emit('onChange')))
             "
           >
             <div
@@ -49,6 +52,7 @@
               :level="level + 1"
               ref="ref_treeNode"
               @onChange="$nextTick(() => $emit('onChange'))"
+              :view="view"
             />
           </template>
         </template>
@@ -68,6 +72,7 @@ const props = defineProps({
   data: { default: () => [] },
   level: { default: 0 },
   parentIndex: { default: 0 },
+  view: { default: false },
 })
 const state: any = reactive({})
 const ref_treeNode = ref()