fix: 修复保存基础配置报错的问题

This commit is contained in:
2024-05-29 20:43:45 +08:00
parent 377a1ff1b7
commit fbc3517af4
2 changed files with 88 additions and 80 deletions

View File

@@ -283,6 +283,14 @@ export interface BasicConfig {
SITE_COPYRIGHT: string SITE_COPYRIGHT: string
} }
/** 基础配置类型 */
export interface SiteConfig {
SITE_FAVICON: OptionResp
SITE_LOGO: OptionResp
SITE_TITLE: OptionResp
SITE_COPYRIGHT: OptionResp
}
/** 邮箱配置类型 */ /** 邮箱配置类型 */
export interface MailConfig { export interface MailConfig {
MAIL_SMTP_HOST: OptionResp MAIL_SMTP_HOST: OptionResp

View File

@@ -2,10 +2,10 @@
<a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate"> <a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate">
<a-list class="list-layout" :bordered="false"> <a-list class="list-layout" :bordered="false">
<a-list-item> <a-list-item>
<a-form-item class="image-item" hide-label field="SITE_FAVICON"> <a-form-item class="image-item" field="SITE_FAVICON" hide-label>
{{ siteFavicon?.name }} {{ siteConfig.SITE_FAVICON.name }}
<template #extra> <template #extra>
{{ siteFavicon?.description }} {{ siteConfig.SITE_FAVICON.description }}
<br /> <br />
<a-upload :file-list="faviconFile ? [faviconFile] : []" accept="image/*" :show-file-list="false" <a-upload :file-list="faviconFile ? [faviconFile] : []" accept="image/*" :show-file-list="false"
:custom-request="handleUploadFavicon" @change="handleChangeFavicon"> :custom-request="handleUploadFavicon" @change="handleChangeFavicon">
@@ -31,10 +31,10 @@
</a-form-item> </a-form-item>
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
<a-form-item class="image-item" hide-label field="SITE_LOGO"> <a-form-item class="image-item" field="SITE_LOGO" hide-label>
{{ siteLogo?.name }} {{ siteConfig.SITE_LOGO.name }}
<template #extra> <template #extra>
{{ siteLogo?.description }} {{ siteConfig.SITE_LOGO.description }}
<br /> <br />
<a-upload :file-list="logoFile ? [logoFile] : []" accept="image/*" :show-file-list="false" <a-upload :file-list="logoFile ? [logoFile] : []" accept="image/*" :show-file-list="false"
:custom-request="handleUploadLogo" @change="handleChangeLogo"> :custom-request="handleUploadLogo" @change="handleChangeLogo">
@@ -59,45 +59,38 @@
</a-form-item> </a-form-item>
</a-list-item> </a-list-item>
<a-list-item style="padding-top: 13px; border: none"> <a-list-item style="padding-top: 13px; border: none">
<a-form-item class="input-item" :label="siteTitle?.name" field="SITE_TITLE"> <a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
<a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" /> <a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" />
</a-form-item> </a-form-item>
<a-form-item class="input-item" :label="siteCopyright?.name" field="SITE_COPYRIGHT" tooltip="支持HTML标签"> <a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
<a-textarea v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" :auto-size="{ <a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" />
minRows: 3,
}" show-word-limit />
</a-form-item> </a-form-item>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<a-space> <a-space>
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
<template #icon>
<icon-undo />
</template>
恢复默认
</a-button>
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate"> <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
<template #icon> <template #icon>
<icon-edit /> <icon-edit />
</template> </template>修改
修改 </a-button>
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
<template #icon>
<icon-undo />
</template>恢复默认
</a-button> </a-button>
<a-button v-if="isUpdate" type="primary" @click="handleSave"> <a-button v-if="isUpdate" type="primary" @click="handleSave">
<template #icon> <template #icon>
<icon-save /> <icon-save />
</template> </template>保存
保存
</a-button> </a-button>
<a-button v-if="isUpdate" @click="reset"> <a-button v-if="isUpdate" @click="reset">
<template #icon> <template #icon>
<icon-refresh /> <icon-refresh />
</template> </template>重置
重置
</a-button> </a-button>
<a-button v-if="isUpdate" @click="handleCancel"> <a-button v-if="isUpdate" @click="handleCancel">
<template #icon> <template #icon>
<icon-undo /> <icon-undo />
</template> </template>取消
取消
</a-button> </a-button>
</a-space> </a-space>
</div> </div>
@@ -108,38 +101,48 @@
<script lang="ts" setup> <script lang="ts" setup>
import { type FileItem, type FormInstance, Message, Modal, type RequestOption } from '@arco-design/web-vue' import { type FileItem, type FormInstance, Message, Modal, type RequestOption } from '@arco-design/web-vue'
import { type OptionResp, listOption, resetOptionValue, updateOption, uploadFile } from '@/apis' import {
type OptionResp,
type SiteConfig,
listOption,
resetOptionValue,
updateOption,
uploadFile
} from '@/apis'
import { useAppStore } from '@/stores' import { useAppStore } from '@/stores'
import { useForm } from '@/hooks' import { useForm } from '@/hooks'
defineOptions({ name: 'BasicSetting' }) defineOptions({ name: 'BasicSetting' })
const formRef = ref<FormInstance>() const formRef = ref<FormInstance>()
const { form } = useForm({
SITE_FAVICON: '',
SITE_LOGO: '',
SITE_TITLE: '',
SITE_COPYRIGHT: ''
})
const rules: FormInstance['rules'] = { const rules: FormInstance['rules'] = {
SITE_TITLE: [{ required: true, message: '请输入系统标题' }], SITE_TITLE: [{ required: true, message: '请输入系统标题' }],
SITE_COPYRIGHT: [{ required: true, message: '请输入版权信息' }] SITE_COPYRIGHT: [{ required: true, message: '请输入版权信息' }]
} }
const { form } = useForm({ const siteConfig = ref<SiteConfig>({
SITE_FAVICON: undefined, SITE_FAVICON: {},
SITE_LOGO: undefined, SITE_LOGO: {},
SITE_TITLE: undefined, SITE_TITLE: {},
SITE_COPYRIGHT: undefined SITE_COPYRIGHT: {}
}) })
const siteFavicon = ref<OptionResp>()
const siteLogo = ref<OptionResp>()
const siteTitle = ref<OptionResp>()
const siteCopyright = ref<OptionResp>()
const faviconFile = ref<FileItem>({ uid: '-1' }) const faviconFile = ref<FileItem>({ uid: '-1' })
const logoFile = ref<FileItem>({ uid: '-2' }) const logoFile = ref<FileItem>({ uid: '-2' })
// 重置 // 重置
const reset = () => { const reset = () => {
form.SITE_FAVICON = siteFavicon.value?.value || '' formRef.value?.resetFields()
form.SITE_LOGO = siteLogo.value?.value || '' form.SITE_FAVICON = siteConfig.value.SITE_FAVICON.value || ''
form.SITE_TITLE = siteTitle.value?.value || '' form.SITE_LOGO = siteConfig.value.SITE_LOGO.value || ''
form.SITE_COPYRIGHT = siteCopyright.value?.value || '' form.SITE_TITLE = siteConfig.value.SITE_TITLE.value || ''
faviconFile.value.url = siteFavicon.value?.value form.SITE_COPYRIGHT = siteConfig.value.SITE_COPYRIGHT.value || ''
logoFile.value.url = siteLogo.value?.value faviconFile.value.url = siteConfig.value.SITE_FAVICON.value
logoFile.value.url = siteConfig.value.SITE_LOGO.value
} }
const isUpdate = ref(false) const isUpdate = ref(false)
@@ -155,15 +158,15 @@ const handleCancel = () => {
} }
const queryForm = reactive({ const queryForm = reactive({
code: ['SITE_TITLE', 'SITE_COPYRIGHT', 'SITE_LOGO', 'SITE_FAVICON'] category: 'SITE'
}) })
// 查询列表数据 // 查询列表数据
const getDataList = async () => { const getDataList = async () => {
const { data } = await listOption(queryForm) const { data } = await listOption(queryForm)
siteFavicon.value = data.find((option) => option.code === 'SITE_FAVICON') siteConfig.value = data.reduce((obj: SiteConfig, option: OptionResp) => {
siteLogo.value = data.find((option) => option.code === 'SITE_LOGO') obj[option.code] = { ...option }
siteTitle.value = data.find((option) => option.code === 'SITE_TITLE') return obj
siteCopyright.value = data.find((option) => option.code === 'SITE_COPYRIGHT') }, {})
handleCancel() handleCancel()
} }
@@ -173,11 +176,8 @@ const handleSave = async () => {
const isInvalid = await formRef.value?.validate() const isInvalid = await formRef.value?.validate()
if (isInvalid) return false if (isInvalid) return false
await updateOption( await updateOption(
Object.entries(form).map((item) => { Object.entries(form).map(([key, value]) => {
return { return { id: siteConfig.value[key].id, code: key, value }
code: item[0],
value: item[1]
}
}) })
) )
appStore.setSiteConfig(form) appStore.setSiteConfig(form)