chore(智能表单): 出差表单联调

src/apis/smart-forms.ts

+import { request } from '@/utils/request'
+
+export function fetchBusinessTripFormSubmit<T>(payload: object) {
+  return request.post<T>('/bizPluginBusinessRest/submitTravelForm.json', {
+    fromDataDto: payload,
+    formType: 'TravelForm',
+  })
+}

src/locales/langs/en.yaml

@@ -163,6 +163,8 @@ common_module:
   database_QA_executed_successfully: 'Database Q&A executed successfully'
   input_parameter: 'Input parameter'
   output_parameter: 'Output parameter'
+  submit_successfully: 'Submit successfully'
+  submit_failure: 'Submit failure'
 
   dialogue_module:
     continue_question_message: 'You can keep asking questions'
@@ -859,6 +861,7 @@ editor_module:
 
 smart_forms_module:
   business_trip_form:
+    result_doc: 'Ok. I will automatically generate a business trip form for you. The form is as follows'
     title: 'Business trip form'
     objective: 'Objective'
     travel_location: 'Travel location'
@@ -867,7 +870,7 @@ smart_forms_module:
     vehicle: 'Vehicle'
     estimated_cost: 'Estimated cost'
     residence: 'Residence'
-    estimated_amount: 'Estimated amount'
+    advance_payment_amount: 'Advance payment amount'
     general_budget: 'General budget'
     email: 'Email'
     confirm_submission: 'Confirm submission'

src/locales/langs/zh-cn.yaml

@@ -162,6 +162,8 @@ common_module:
   database_QA_executed_successfully: '数据库问答执行成功'
   input_parameter: '输入参数'
   output_parameter: '输出参数'
+  submit_successfully: '提交成功'
+  submit_failure: '提交失败'
 
   dialogue_module:
     continue_question_message: '你可以继续提问'
@@ -857,6 +859,7 @@ editor_module:
 
 smart_forms_module:
   business_trip_form:
+    result_doc: '好的，我将为您自动生成出差表单，表单如下'
     title: '出差表单'
     objective: '出差目的'
     travel_location: '出差地点'
@@ -865,7 +868,7 @@ smart_forms_module:
     vehicle: '交通工具'
     estimated_cost: '预计费用'
     residence: '住宿地点'
-    estimated_amount: '预计金额'
+    advance_payment_amount: '预支金额'
     general_budget: '总预算'
     email: '邮箱信息'
     confirm_submission: '确认提交'

src/locales/langs/zh-hk.yaml

@@ -162,6 +162,8 @@ common_module:
   database_QA_executed_successfully: '數據庫問答執行成功'
   input_parameter: '輸入參數'
   output_parameter: '輸出參數'
+  submit_successfully: '提交成功'
+  submit_failure: '提交失敗'
 
   dialogue_module:
     continue_question_message: '你可以繼續提問'
@@ -857,6 +859,7 @@ editor_module:
 
 smart_forms_module:
   business_trip_form:
+    result_doc: '好的，我將為您自動生成出差表單，表單如下'
     title: '出差表單'
     objective: '出差目的'
     travel_location: '出差地點'
@@ -865,7 +868,7 @@ smart_forms_module:
     vehicle: '交通工具'
     estimated_cost: '預計費用'
     residence: '住宿地點'
-    estimated_amount: '預計金額'
+    advance_payment_amount: '預支金額'
     general_budget: '總預算'
     email: '郵箱信息'
     confirm_submission: '確認提交'

src/utils/date-formatter.ts

@@ -6,6 +6,12 @@ import 'dayjs/locale/zh-cn'
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
-export function formatDateTime(date: string | number | Date, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
+type DateType = string | number | Date
+
+export function formatDateTime(date: DateType, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
   return dayjs(date).format(format)
 }
+
+export function getDayInst(date: DateType) {
+  return dayjs(date)
+}

src/views/home/components/smart-forms/business-trip-form.vue → src/views/home/components/smart-forms/components/business-trip-form.vue

 <script setup lang="ts">
-import { computed, inject, readonly, ref, useTemplateRef } from 'vue'
-import type { MessageItemInterface } from '../../types'
+import { computed, inject, readonly, ref, toRaw, useTemplateRef, watch, watchEffect } from 'vue'
+import type { MessageItemInterface } from '../../../types'
 import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 import type { FormInst, FormRules, FormItemRule } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useSystemLanguageStore } from '@/store/modules/system-language'
-import MessageBubbleLoading from '../message-bubble-loading.vue'
+import MessageBubbleLoading from '@/views/home/components/message-bubble-loading.vue'
 import isEmail from 'validator/es/lib/isEmail'
+import type { BusinessTripFormInterface, ResponseBusinessTripFormInterface } from '../types/business-trip-form'
+import {
+  businessTripFormParser,
+  businessTripFormReturner,
+} from '@/views/home/components/smart-forms/utils/business-trip-form'
+import { fetchBusinessTripFormSubmit } from '@/apis/smart-forms'
 
 interface Props {
   messageItem: MessageItemInterface
@@ -67,19 +73,20 @@ const formRules = readonly<FormRules>({
   },
 })
 
-const formModel = ref({
+const formModel = ref<BusinessTripFormInterface>({
   objective: 'CustomerVisits',
   travelLocation: '',
   departureTime: null,
   returnTime: null,
   vehicle: '',
-  vehicleEstimatedCost: '',
+  vehicleEstimatedCost: null,
   residence: '',
-  residenceEstimatedCost: '',
-  estimatedAmount: '',
+  residenceEstimatedCost: null,
+  advancePaymentAmount: null,
   generalBudget: '',
   email: '',
 })
+const submitFormBtnLoading = ref(false)
 
 const objectiveOptions = readonly([
   {
@@ -100,17 +107,70 @@ const isDisabledForm = computed(() => {
   return !!props.messageItem.smartFormInfo && props.messageItem.smartFormInfo.isDisabled
 })
 
+watch(
+  () => props.messageItem.smartFormInfo,
+  (smartFormInfo) => {
+    if (smartFormInfo && smartFormInfo.params) {
+      let config: Partial<ResponseBusinessTripFormInterface> = {}
+
+      try {
+        config = JSON.parse(smartFormInfo.params)
+      } catch (err) {
+        throw new Error('Invalid JSON')
+      }
+
+      formModel.value = {
+        ...formModel.value,
+        ...businessTripFormParser(config),
+      }
+    }
+  },
+  {
+    once: true,
+    immediate: true,
+  },
+)
+
+watchEffect(() => {
+  let aggregateAmount = 0
+
+  if (formModel.value.vehicleEstimatedCost) {
+    aggregateAmount += formModel.value.vehicleEstimatedCost
+  }
+  if (formModel.value.residenceEstimatedCost) {
+    aggregateAmount += formModel.value.residenceEstimatedCost
+  }
+  if (formModel.value.advancePaymentAmount) {
+    aggregateAmount += formModel.value.advancePaymentAmount
+  }
+
+  formModel.value.generalBudget = aggregateAmount.toString()
+})
+
 function handleSubmitForm() {
   businessTripFormRef.value?.validate((errors) => {
     if (!errors) {
-      window.$message.success('提交')
-
-      updateSpecifyMessageItem(messageItemId, {
-        smartFormInfo: {
-          ...(props.messageItem.smartFormInfo || { type: 'BusinessTripForm', params: '' }),
-          isDisabled: true,
-        },
-      })
+      submitFormBtnLoading.value = true
+
+      fetchBusinessTripFormSubmit(businessTripFormReturner(toRaw(formModel.value)))
+        .then((res) => {
+          if (res.code !== 0) {
+            window.$message.error(t('common_module.submit_failure'))
+            return
+          }
+
+          updateSpecifyMessageItem(messageItemId, {
+            smartFormInfo: {
+              ...(props.messageItem.smartFormInfo || { type: 'BusinessTripForm', params: '' }),
+              isDisabled: true,
+            },
+          })
+
+          window.$message.success(t('common_module.submit_successfully'))
+        })
+        .finally(() => {
+          submitFormBtnLoading.value = false
+        })
     }
   })
 }
@@ -120,12 +180,7 @@ function handleSubmitForm() {
   <div class="ml-[11px] overflow-hidden">
     <div class="mb-[7px] text-[12px] text-[#999]">{{ messageAuthor }}</div>
 
-    <div
-      :class="{
-        'min-w-[420px]': !systemLanguageStore.isEnglishLanguage,
-        'min-w-[500px]': systemLanguageStore.isEnglishLanguage,
-      }"
-    >
+    <div>
       <div
         class="box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
         :class="{
@@ -133,10 +188,7 @@ function handleSubmitForm() {
           '!min-w-[80px]': messageItem.isAnswerLoading,
         }"
       >
-        <div
-          v-if="messageItem.isAnswerLoading && !messageItem.content"
-          class="flex h-[21px] items-center justify-center"
-        >
+        <div v-if="messageItem.isAnswerLoading" class="flex h-[21px] items-center justify-center">
           <MessageBubbleLoading :active-color="currentBubbleTextColor" />
         </div>
         <template v-else>
@@ -149,7 +201,7 @@ function handleSubmitForm() {
 
           <MarkdownRender
             ref="markdownRenderRef"
-            raw-text-content="好的，我将为您自动生成出差表单，表单如下"
+            :raw-text-content="t('smart_forms_module.business_trip_form.result_doc')"
             :color="currentBubbleTextColor"
           />
 
@@ -160,9 +212,12 @@ function handleSubmitForm() {
       </div>
 
       <div
+        v-if="!messageItem.isAnswerLoading"
         class="mt-[10px] box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
         :class="{
           '!bg-[#fff]': isAgentMessage,
+          'min-w-[420px]': !systemLanguageStore.isEnglishLanguage,
+          'min-w-[500px]': systemLanguageStore.isEnglishLanguage,
         }"
       >
         <h2 class="font-600 text-[15px] text-[#0B7DFF]">{{ t('smart_forms_module.business_trip_form.title') }}</h2>
@@ -225,9 +280,10 @@ function handleSubmitForm() {
             </n-form-item>
 
             <n-form-item :label="t('smart_forms_module.business_trip_form.estimated_cost')" path="vehicleEstimatedCost">
-              <n-input
+              <n-input-number
                 v-model:value="formModel.vehicleEstimatedCost"
                 :placeholder="`${t('smart_forms_module.business_trip_form.please_enter_the')} ${t('smart_forms_module.business_trip_form.estimated_cost').toLocaleLowerCase()}`"
+                clearable
               />
             </n-form-item>
 
@@ -250,9 +306,10 @@ function handleSubmitForm() {
               :label="t('smart_forms_module.business_trip_form.estimated_cost')"
               path="residenceEstimatedCost"
             >
-              <n-input
+              <n-input-number
                 v-model:value="formModel.residenceEstimatedCost"
                 :placeholder="`${t('smart_forms_module.business_trip_form.please_enter_the')} ${t('smart_forms_module.business_trip_form.estimated_cost').toLocaleLowerCase()}`"
+                clearable
               />
             </n-form-item>
 
@@ -262,12 +319,13 @@ function handleSubmitForm() {
 
             <n-form-item
               class="mb-[10px]"
-              :label="t('smart_forms_module.business_trip_form.estimated_amount')"
-              path="estimatedAmount"
+              :label="t('smart_forms_module.business_trip_form.advance_payment_amount')"
+              path="advancePaymentAmount"
             >
-              <n-input
-                v-model:value="formModel.estimatedAmount"
-                :placeholder="`${t('smart_forms_module.business_trip_form.please_enter_the')} ${t('smart_forms_module.business_trip_form.estimated_amount').toLocaleLowerCase()}`"
+              <n-input-number
+                v-model:value="formModel.advancePaymentAmount"
+                :placeholder="`${t('smart_forms_module.business_trip_form.please_enter_the')} ${t('smart_forms_module.business_trip_form.advance_payment_amount').toLocaleLowerCase()}`"
+                clearable
               />
             </n-form-item>
 
@@ -275,6 +333,7 @@ function handleSubmitForm() {
               <n-input
                 v-model:value="formModel.generalBudget"
                 :placeholder="`${t('smart_forms_module.business_trip_form.please_enter_the')} ${t('smart_forms_module.business_trip_form.general_budget').toLocaleLowerCase()}`"
+                disabled
               />
             </n-form-item>
 
@@ -290,7 +349,12 @@ function handleSubmitForm() {
             </n-form-item>
 
             <div class="mt-[46px] text-end">
-              <n-button type="primary" :disabled="isDisabledForm" @click="handleSubmitForm">
+              <n-button
+                type="primary"
+                :disabled="isDisabledForm"
+                :loading="submitFormBtnLoading"
+                @click="handleSubmitForm"
+              >
                 {{ t('smart_forms_module.business_trip_form.confirm_submission') }}
               </n-button>
             </div>

src/views/home/components/smart-forms/business-trip-reimbursement-form.vue → src/views/home/components/smart-forms/components/business-trip-reimbursement-form.vue

 <script setup lang="ts">
 import { readonly, ref } from 'vue'
-import type { MessageItemInterface } from '../../types'
+import type { MessageItemInterface } from '@/views/home/types'
 import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 import type { FormRules } from 'naive-ui'
-import MessageBubbleLoading from '../message-bubble-loading.vue'
+import MessageBubbleLoading from '@/views/home/components/message-bubble-loading.vue'
 
 interface Props {
   isAgentMessage: boolean

src/views/home/components/smart-forms/index.vue

 <script setup lang="ts">
 import type { MessageItemInterface } from '../../types'
-import BusinessTripForm from './business-trip-form.vue'
+import BusinessTripForm from './components/business-trip-form.vue'
 // import BusinessTripReimbursementForm from './business-trip-reimbursement-form.vue'
 
 interface Props {

src/views/home/components/smart-forms/types/business-trip-form.d.ts

+export interface ResponseBusinessTripFormInterface {
+  purpose: string
+  place: string
+  departureDate: string
+  returnDate: string
+  vehicle: string
+  transportationFee: string
+  accommodation: string
+  accommodationCost: string
+  advancePaymentAmount: string
+  totalBudget: string
+}
+
+export interface BusinessTripFormInterface {
+  objective: string
+  travelLocation: string
+  departureTime: number | null
+  returnTime: number | null
+  vehicle: string
+  vehicleEstimatedCost: number | null
+  residence: string
+  residenceEstimatedCost: number | null
+  advancePaymentAmount: number | null
+  generalBudget: string
+  email: string
+}

src/views/home/components/smart-forms/utils/business-trip-form.ts

+import type { SmartFormTypes } from '@/views/home/types'
+import type {
+  ResponseBusinessTripFormInterface,
+  BusinessTripFormInterface,
+} from '@/views/home/components/smart-forms/types/business-trip-form'
+
+export function smartFormTypeConverter(type: 'travelForm'): SmartFormTypes {
+  switch (type) {
+    case 'travelForm':
+      return 'BusinessTripForm'
+  }
+}
+
+export function businessTripFormParser(resForm: Partial<ResponseBusinessTripFormInterface>) {
+  return {
+    objective: resForm.purpose || 'CustomerVisits',
+    travelLocation: resForm.place || '',
+    departureTime: resForm.departureDate ? Date.parse(resForm.departureDate) : null,
+    returnTime: resForm.returnDate ? Date.parse(resForm.returnDate) : null,
+    vehicle: resForm.vehicle || '',
+    vehicleEstimatedCost: resForm.transportationFee ? Number.parseInt(resForm.transportationFee) : null,
+    residence: resForm.accommodation || '',
+    residenceEstimatedCost: resForm.accommodationCost ? Number.parseInt(resForm.accommodationCost) : null,
+    advancePaymentAmount: resForm.advancePaymentAmount ? Number.parseInt(resForm.advancePaymentAmount) : null,
+    generalBudget: resForm.totalBudget || '',
+    email: '',
+  }
+}
+
+export function businessTripFormReturner(form: BusinessTripFormInterface) {
+  return {
+    purpose: form.objective,
+    place: form.travelLocation,
+    departureDate: form.departureTime ? new Date(form.departureTime).toISOString() : '',
+    returnDate: form.returnTime ? new Date(form.returnTime).toISOString() : '',
+    vehicle: form.vehicle,
+    transportationFee: form.vehicleEstimatedCost,
+    accommodation: form.residence,
+    accommodationCost: form.residenceEstimatedCost,
+    advancePaymentAmount: form.advancePaymentAmount,
+    totalBudget: form.generalBudget,
+  }
+}

src/views/home/home.vue

@@ -44,6 +44,7 @@ const isShowMessageList = ref(false)
 const isAgentInitLoading = ref(true)
 const currentFetchEventSourceController = ref<AbortController | null>(null)
 
+/* 测试数据 */
 /* setTimeout(() => {
   messageList.value.set('1', {
     role: 'assistant',
@@ -56,21 +57,12 @@ const currentFetchEventSourceController = ref<AbortController | null>(null)
     reasoningContent: '1324',
     imageUrl: '',
     pluginName: '',
-    smartFormInfo: { type: 'BusinessTripForm', isDisabled: true, params: '' },
-  })
-
-  messageList.value.set('2', {
-    role: 'assistant',
-    agentId: 'b058f1baedd04af983ca00775368bb8c',
-    content: '请推荐一些适合初学者的编程学习资源。',
-    timestamp: 1726654820427,
-    isAnswerLoading: false,
-    avatar: 'http://localhost:8848/fe/src/assets/images/home/agent-avatar.png',
-    name: '我是作者',
-    reasoningContent: '1324',
-    imageUrl: '',
-    pluginName: '',
-    smartFormInfo: { type: 'BusinessTripForm', isDisabled: false, params: '' },
+    smartFormInfo: {
+      type: 'BusinessTripForm',
+      isDisabled: false,
+      params:
+        '{"purpose":"Training","place":"香港","departureDate":"returnDate","accommodationCost":"11","departureDate":"2025-05-10 15:00:00","advancePaymentAmount":"11","totalBudget":"11"}',
+    },
   })
 }, 60) */
 
@@ -127,15 +119,6 @@ function messageListScrollToBottom() {
 }
 
 function onAddMessageItem(messageId: string, messageItem: MessageItemInterface) {
-  /* 重置智能表单项目 */
-  if (messageItem.smartFormInfo && messageItem.smartFormInfo.type) {
-    messageList.value.forEach((messageInfo) => {
-      if (messageInfo.smartFormInfo && messageInfo.smartFormInfo.type === messageItem.smartFormInfo?.type) {
-        messageInfo.smartFormInfo.isDisabled = false
-      }
-    })
-  }
-
   messageList.value.set(messageId, messageItem)
 }
 
@@ -218,6 +201,17 @@ function onGetMessageRecordList(recordId: string) {
 function onClearSessionReferenceFile() {
   footerOperationRef.value && footerOperationRef.value.clearSessionReferenceFile()
 }
+
+function onSmartFormsStatusFreezeCheck(messageItem: MessageItemInterface) {
+  /* 重置智能表单项目 */
+  if (messageItem.smartFormInfo && messageItem.smartFormInfo.type) {
+    messageList.value.forEach((item) => {
+      if (item.smartFormInfo && item.smartFormInfo.type === messageItem.smartFormInfo?.type) {
+        item.smartFormInfo.isDisabled = true
+      }
+    })
+  }
+}
 </script>
 
 <template>
@@ -255,6 +249,7 @@ function onClearSessionReferenceFile() {
           @delete-message-item="onDeleteMessageItem"
           @create-new-session="onCreateNewSession"
           @history-record-list-update="onHistoryRecordListUpdate"
+          @smart-forms-status-freeze-check="onSmartFormsStatusFreezeCheck"
         />
       </div>
 

src/views/home/utils/smart-forms.ts

-import type { SmartFormTypes } from '../types'
-
-export function smartFormTypeConverter(type: 'travelForm'): SmartFormTypes {
-  switch (type) {
-    case 'travelForm':
-      return 'BusinessTripForm'
-  }
-}

types/locales.d.ts

@@ -162,6 +162,8 @@ declare namespace I18n {
       database_QA_executed_successfully: string
       input_parameter: string
       output_parameter: string
+      submit_successfully: string
+      submit_failure: string
 
       dialogue_module: {
         continue_question_message: string
@@ -879,6 +881,7 @@ declare namespace I18n {
 
     smart_forms_module: {
       business_trip_form: {
+        result_doc: string
         title: string
         objective: string
         travel_location: string
@@ -887,7 +890,7 @@ declare namespace I18n {
         vehicle: string
         estimated_cost: string
         residence: string
-        estimated_amount: string
+        advance_payment_amount: string
         general_budget: string
         email: string
         confirm_submission: string