边聊边办左侧

src/api/modules/global/upload.ts

@@ -1,5 +1,5 @@
 import { get, post, upload } from '@/api/request'
 
 // 文件上传
-export const fileUploadFile = (params, onProcess = () => {}) =>
+export const fileUploadFile = (params, onProcess: any = () => {}) =>
   upload(`/file/uploadFile`, params, {}, '', onProcess)

src/components/czr-ui/czr-form-link/upload.vue

@@ -183,7 +183,6 @@ import FileWORDImg from '../imgs/file-type/file-type_word.png'
 import FileEXCELImg from '../imgs/file-type/file-type_excel.png'
 import { isValue } from '@/utils/czr-util'
 import { fileUploadFile } from '@/api/modules/global/upload'
-// import {frontUploadFile} from "@/api/modules/manage/global";
 
 const emit = defineEmits(['emitParam'])
 const props = defineProps({

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

@@ -62,7 +62,7 @@
                   ? 'cursor-no-drop'
                   : '__hover'
               "
-              @click="onStep(state.step.index + 1)"
+              @click="onStep(state.step.index)"
               v-if="!state.step.options[state.step.index].finish"
             >
               我已阅读并遵守以上规定
@@ -94,7 +94,7 @@
                   ? '__hover bg-[var(--czr-main-color)] text-[#ffffff]'
                   : 'cursor-no-drop bg-[#EAF1FF] text-[var(--czr-main-color)]'
               "
-              @click="onStep(state.step.index + 1)"
+              @click="onStep(state.step.index)"
               v-if="!state.step.options[state.step.index].finish"
             >
               确定
@@ -329,15 +329,140 @@
             </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)"
+              @click="onStep(state.step.index)"
               v-if="!state.step.options[state.step.index].finish"
             >
               确定
             </div>
           </div>
         </template>
-        <template v-else-if="state.step.index === 3"></template>
-        <template v-else-if="state.step.index === 4"></template>
+        <template v-else-if="state.step.index === 3">
+          <div class="__czr-title_2">
+            {{ state.step.options[state.step.index].label }}
+          </div>
+          <div
+            class="mt-4 flex w-full flex-col gap-4 rounded-sm bg-[#0062E9]/5 p-4 text-sm text-[#576275]"
+          >
+            <template
+              v-for="(item, index) in state.step.options[state.step.index]
+                .fileList"
+            >
+              <div class="flex items-center">
+                <SvgIcon name="document" :active="true" />
+                <div class="ml-1 text-sm text-[#303133]">
+                  {{ 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)]"
+                >
+                  {{
+                    item.isneed === '1'
+                      ? `必要`
+                      : item.isneed === '2'
+                        ? `非必要`
+                        : item.isneed === '3'
+                          ? `容缺后补`
+                          : ``
+                  }}
+                </div>
+                <div class="ml-auto flex items-center">
+                  <template v-if="item.__isUpload">
+                    <div class="flex items-center gap-1 text-xs text-[#909399]">
+                      <template v-if="item.__url">
+                        <SvgIcon
+                          name="success"
+                          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>
+                      <template v-else> {{ item.__process }}% </template>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <a-button
+                      size="small"
+                      type="primary"
+                      @click="onUpload(item)"
+                      >上传</a-button
+                    >
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div
+            class="flex h-10.5 w-full items-center justify-center rounded-lg text-base"
+            :class="
+              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"
+          >
+            下一步
+          </div>
+        </template>
+        <template v-else-if="state.step.index === 4">
+          <div class="__czr-title_2">
+            {{ state.step.options[state.step.index].label }}
+          </div>
+          <CzrForm
+            ref="ref_form"
+            :form-view="state.step.options[state.step.index].finish"
+          >
+            <CzrFormColumn
+              class="__czr-table-form-column"
+              :span="24"
+              label="结果领取方式"
+              v-model:param="state.step.options[state.step.index].form.method"
+              link="radio"
+              :options="[
+                { label: '邮寄', value: 1 },
+                { label: '线下领取', value: 2 },
+              ]"
+            />
+            <div
+              class="w-full rounded-sm bg-[#0062E9]/5 p-4 text-sm text-[#576275]"
+            >
+              <div class="mb-2 text-sm text-[#2E3238]">领取地址</div>
+              <CzrFormColumn
+                class="__czr-table-form-column"
+                required
+                :span="24"
+                label-width="0px"
+                v-model:param="
+                  state.step.options[state.step.index].form.address
+                "
+                type="textarea"
+                :rows="4"
+              />
+            </div>
+          </CzrForm>
+          <div
+            class="flex h-10.5 w-full items-center justify-center rounded-lg text-base"
+            :class="
+              state.step.options[state.step.index].form.address.trim()
+                ? '__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"
+          >
+            提交
+          </div>
+        </template>
       </div>
       <div
         class="m-1 flex-1 overflow-hidden rounded-lg border-1 border-[var(--czr-main-color)]/5 shadow"
@@ -346,11 +471,6 @@
       </div>
     </div>
   </div>
-  <!--  <template v-for="item in state.components">-->
-  <!--    <teleport :to="'#' + item.id">-->
-  <!--      <component :is="item.is" v-bind="item.props" />-->
-  <!--    </teleport>-->
-  <!--  </template>-->
 </template>
 
 <script setup lang="ts">
@@ -363,7 +483,7 @@ import {
   reactive,
   ref,
 } from 'vue'
-import { mockQuestion, sxOnethingInfo } from './mock'
+import { mockQuestion, sxOnethingInfo, sxImplBasicMaterial } from './mock'
 import treeNode from './tree-node.vue'
 import toBackCom from '@/views/manage/components/to-back.vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -371,6 +491,7 @@ import { appDetail } from '@/api/modules/app'
 import chat from '@/views/chat/index.vue'
 import { isValue } from '@/utils/czr-util'
 import { v4 } from 'uuid'
+import { fileUploadFile } from '@/api/modules/global/upload'
 
 const route = useRoute()
 const router = useRouter()
@@ -399,12 +520,24 @@ const state: any = reactive({
           certNumber: '438123*********678',
         },
       },
-      { label: '材料上传', finish: false, wait: false },
-      { label: '结果领取', finish: false, wait: false },
+      {
+        label: '材料上传',
+        finish: false,
+        wait: false,
+        fileList: sxImplBasicMaterial().map((v) => ({ ...v, __url: '' })),
+      },
+      {
+        label: '结果领取',
+        finish: false,
+        wait: false,
+        form: {
+          method: 1,
+          address: '',
+        },
+      },
     ],
-    index: 2,
+    index: 4,
   },
-  // components: [],
 })
 const ref_chat = ref()
 const ref_treeNode = ref()
@@ -423,12 +556,12 @@ const onStep = (index) => {
         if (!current.finish) {
           current.finish = true
           current.wait = false
-          state.step.options[index].wait = true
+          state.step.options[index + 1].wait = true
           ref_chat.value.mockAnswer({
             text: '欢迎进入事项网办阶段！请选择情形',
           })
         }
-        state.step.index = index
+        state.step.index = index + 1
       }
       break
     case 1:
@@ -437,7 +570,7 @@ const onStep = (index) => {
           if (!current.finish) {
             current.finish = true
             current.wait = false
-            state.step.options[index].wait = true
+            state.step.options[index + 1].wait = true
             const id = v4()
             const ddd = () => {
               console.log(123123)
@@ -471,7 +604,7 @@ const onStep = (index) => {
             //   },
             // })
           }
-          state.step.index = index
+          state.step.index = index + 1
         }
       }
       break
@@ -481,19 +614,83 @@ const onStep = (index) => {
         if (!current.finish) {
           current.finish = true
           current.wait = false
-          state.step.options[index].wait = true
+          state.step.options[index + 1].wait = true
           ref_chat.value.mockAnswer({
             text: '表单已填写完成！接下来进入材料上传阶段！以下是需要您提供的材料，请在左侧上传',
           })
         }
-        state.step.index = index
+        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: '请填写结果材料领取方式',
+          })
+        }
+        state.step.index = index + 1
+      }
+      break
+    case 4:
+      {
+        ref_form.value.submit().then(() => {
+          if (!current.finish) {
+            current.finish = true
+            current.wait = false
+            ref_chat.value.mockAnswer({
+              text: '办理成功！该事项将在8个工作日内办结，请耐心等待',
+            })
+          }
+        })
+      }
+      break
+  }
+}
+const onUpload = (row) => {
+  const oldInput = document.getElementById('fileInput')
+  if (oldInput) {
+    oldInput.remove()
   }
+  const fileInput = document.createElement('input')
+  fileInput.type = 'file'
+  fileInput.id = 'fileInput'
+  fileInput.style.display = 'none'
+  document.body.appendChild(fileInput)
+  fileInput.addEventListener('change', (e: any) => {
+    const file = e.target.files[0]
+    if (file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      row.__isUpload = true
+      fileUploadFile(formData, (process) => {
+        row.__process = process
+      })
+        .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: '检测到您已上传必要材料，请再次核对，上传完成无误后点击下一步',
+            })
+          }
+        })
+        .catch(() => {})
+        .finally(() => {})
+    }
+  })
+  fileInput.click()
 }
+
 onMounted(() => {
   initDetail()
+  console.log(sxImplBasicMaterial())
 })
 const initDetail = () => {
   if (state.ID) {