Skip to content

P
poc-fe
Commit b423f4db authored by tyyin lan's avatar tyyin lan
Browse files
Options

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

parent b9488cdb
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 74 deletions
src/apis/smart-forms.ts 0 → 100644
View file @ b423f4db
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
View file @ b423f4db
......@@ -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
View file @ b423f4db
......@@ -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
View file @ b423f4db
......@@ -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
View file @ b423f4db
......@@ -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
View file @ b423f4db
<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
View file @ b423f4db
<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
View file @ b423f4db
<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 0 → 100644
View file @ b423f4db
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 0 → 100644
View file @ b423f4db
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
View file @ b423f4db
......@@ -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 deleted 100644 → 0
View file @ b9488cdb
import type { SmartFormTypes } from '../types'
export function smartFormTypeConverter(type: 'travelForm'): SmartFormTypes {
switch (type) {
case 'travelForm':
return 'BusinessTripForm'
}
}
types/locales.d.ts
View file @ b423f4db
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment