335 lines
9.7 KiB
Vue
335 lines
9.7 KiB
Vue
|
<template>
|
||
|
|
<a-spin :loading="loading">
|
||
|
|
<a-form
|
||
|
|
ref="formRef"
|
||
|
|
:model="form"
|
||
|
|
:rules="rules"
|
||
|
|
size="large"
|
||
|
|
layout="vertical"
|
||
|
|
:disabled="!isUpdate"
|
||
|
|
class="form"
|
||
|
|
>
|
||
|
|
<a-form-item class="image-item" field="SITE_LOGO" hide-label>
|
||
|
|
{{ siteConfig.SITE_LOGO.name }}
|
||
|
|
<template #extra>
|
||
|
|
{{ siteConfig.SITE_LOGO.description }}
|
||
|
|
<br />
|
||
|
|
<a-upload
|
||
|
|
:file-list="logoFile ? [logoFile] : []" accept="image/*" :show-file-list="false"
|
||
|
|
:custom-request="handleUploadLogo" @change="handleChangeLogo"
|
||
|
|
>
|
||
|
|
<template #upload-button>
|
||
|
|
<div
|
||
|
|
:class="`arco-upload-list-item${logoFile && logoFile.status === 'error' ? ' arco-upload-list-item-error' : ''
|
||
|
|
}`"
|
||
|
|
>
|
||
|
|
<div v-if="logoFile && logoFile.url" class="arco-upload-list-picture custom-upload-avatar logo">
|
||
|
|
<img :src="logoFile.url" alt="Logo" />
|
||
|
|
<div v-if="isUpdate" class="arco-upload-list-picture-mask logo">
|
||
|
|
<IconEdit />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="arco-upload-picture-card logo">
|
||
|
|
<div class="arco-upload-picture-card-text">
|
||
|
|
<icon-upload />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</a-upload>
|
||
|
|
</template>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item class="image-item" field="SITE_FAVICON" hide-label>
|
||
|
|
{{ siteConfig.SITE_FAVICON.name }}
|
||
|
|
<template #extra>
|
||
|
|
{{ siteConfig.SITE_FAVICON.description }}
|
||
|
|
<br />
|
||
|
|
<a-upload
|
||
|
|
:file-list="faviconFile ? [faviconFile] : []" accept="image/*" :show-file-list="false"
|
||
|
|
:custom-request="handleUploadFavicon" @change="handleChangeFavicon"
|
||
|
|
>
|
||
|
|
<template #upload-button>
|
||
|
|
<div
|
||
|
|
:class="`arco-upload-list-item${faviconFile && faviconFile.status === 'error' ? ' arco-upload-list-item-error' : ''
|
||
|
|
}`"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-if="faviconFile && faviconFile.url"
|
||
|
|
class="arco-upload-list-picture custom-upload-avatar favicon"
|
||
|
|
>
|
||
|
|
<img :src="faviconFile.url" alt="favicon" />
|
||
|
|
<div v-if="isUpdate" class="arco-upload-list-picture-mask favicon">
|
||
|
|
<IconEdit />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="arco-upload-picture-card favicon">
|
||
|
|
<div class="arco-upload-picture-card-text">
|
||
|
|
<icon-upload />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</a-upload>
|
||
|
|
</template>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name" :help="siteConfig.SITE_TITLE.description">
|
||
|
|
<a-input v-model.trim="form.SITE_TITLE" placeholder="请输入系统名称" :max-length="18" show-word-limit />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item class="input-item" field="SITE_DESCRIPTION" :label="siteConfig.SITE_DESCRIPTION.name" :help="siteConfig.SITE_DESCRIPTION.description">
|
||
|
|
<a-textarea
|
||
|
|
v-model.trim="form.SITE_DESCRIPTION"
|
||
|
|
placeholder="请输入系统描述"
|
||
|
|
:auto-size="{ minRows: 1, maxRows: 3 }"
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name" :help="siteConfig.SITE_COPYRIGHT.description">
|
||
|
|
<a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权声明" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name" :help="siteConfig.SITE_BEIAN.description">
|
||
|
|
<a-input v-model.trim="form.SITE_BEIAN" placeholder="请输入备案号" :max-length="30" show-word-limit />
|
||
|
|
</a-form-item>
|
||
|
|
<a-space style="margin-top: 16px">
|
||
|
|
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
|
||
|
|
<template #icon>
|
||
|
|
<icon-edit />
|
||
|
|
</template>修改
|
||
|
|
</a-button>
|
||
|
|
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
|
||
|
|
<template #icon>
|
||
|
|
<icon-undo />
|
||
|
|
</template>恢复默认
|
||
|
|
</a-button>
|
||
|
|
<a-button v-if="isUpdate" type="primary" @click="handleSave">
|
||
|
|
<template #icon>
|
||
|
|
<icon-save />
|
||
|
|
</template>保存
|
||
|
|
</a-button>
|
||
|
|
<a-button v-if="isUpdate" @click="reset">
|
||
|
|
<template #icon>
|
||
|
|
<icon-refresh />
|
||
|
|
</template>重置
|
||
|
|
</a-button>
|
||
|
|
<a-button v-if="isUpdate" @click="handleCancel">
|
||
|
|
<template #icon>
|
||
|
|
<icon-undo />
|
||
|
|
</template>取消
|
||
|
|
</a-button>
|
||
|
|
</a-space>
|
||
|
|
</a-form>
|
||
|
|
</a-spin>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { type FileItem, type FormInstance, Message, Modal, type RequestOption } from '@arco-design/web-vue'
|
||
|
|
import {
|
||
|
|
type OptionResp,
|
||
|
|
type SiteConfig,
|
||
|
|
listOption,
|
||
|
|
resetOptionValue,
|
||
|
|
updateOption,
|
||
|
|
} from '@/apis/system'
|
||
|
|
import { useAppStore } from '@/stores'
|
||
|
|
import { useResetReactive } from '@/hooks'
|
||
|
|
import { fileToBase64 } from '@/utils'
|
||
|
|
|
||
|
|
defineOptions({ name: 'BasicSetting' })
|
||
|
|
|
||
|
|
const loading = ref<boolean>(false)
|
||
|
|
const formRef = ref<FormInstance>()
|
||
|
|
const [form] = useResetReactive({
|
||
|
|
SITE_FAVICON: '',
|
||
|
|
SITE_LOGO: '',
|
||
|
|
SITE_TITLE: '',
|
||
|
|
SITE_COPYRIGHT: '',
|
||
|
|
})
|
||
|
|
const rules: FormInstance['rules'] = {
|
||
|
|
SITE_TITLE: [{ required: true, message: '请输入系统名称' }],
|
||
|
|
SITE_DESCRIPTION: [{ required: true, message: '请输入系统描述' }],
|
||
|
|
SITE_COPYRIGHT: [{ required: true, message: '请输入版权声明' }],
|
||
|
|
}
|
||
|
|
|
||
|
|
const siteConfig = ref<SiteConfig>({
|
||
|
|
SITE_FAVICON: {},
|
||
|
|
SITE_LOGO: {},
|
||
|
|
SITE_TITLE: {},
|
||
|
|
SITE_DESCRIPTION: {},
|
||
|
|
SITE_COPYRIGHT: {},
|
||
|
|
SITE_BEIAN: {},
|
||
|
|
})
|
||
|
|
const faviconFile = ref<FileItem>({ uid: '-1' })
|
||
|
|
const logoFile = ref<FileItem>({ uid: '-2' })
|
||
|
|
// 重置
|
||
|
|
const reset = () => {
|
||
|
|
formRef.value?.resetFields()
|
||
|
|
form.SITE_FAVICON = siteConfig.value.SITE_FAVICON.value || ''
|
||
|
|
form.SITE_LOGO = siteConfig.value.SITE_LOGO.value || ''
|
||
|
|
form.SITE_TITLE = siteConfig.value.SITE_TITLE.value || ''
|
||
|
|
form.SITE_DESCRIPTION = siteConfig.value.SITE_DESCRIPTION.value || ''
|
||
|
|
form.SITE_COPYRIGHT = siteConfig.value.SITE_COPYRIGHT.value || ''
|
||
|
|
form.SITE_BEIAN = siteConfig.value.SITE_BEIAN.value || ''
|
||
|
|
faviconFile.value.url = siteConfig.value.SITE_FAVICON.value
|
||
|
|
logoFile.value.url = siteConfig.value.SITE_LOGO.value
|
||
|
|
}
|
||
|
|
|
||
|
|
const isUpdate = ref(false)
|
||
|
|
// 修改
|
||
|
|
const onUpdate = () => {
|
||
|
|
isUpdate.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
// 取消
|
||
|
|
const handleCancel = () => {
|
||
|
|
reset()
|
||
|
|
isUpdate.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const queryForm = reactive({
|
||
|
|
category: 'SITE',
|
||
|
|
})
|
||
|
|
// 查询列表数据
|
||
|
|
const getDataList = async () => {
|
||
|
|
loading.value = true
|
||
|
|
const { data } = await listOption(queryForm)
|
||
|
|
siteConfig.value = data.reduce((obj: SiteConfig, option: OptionResp) => {
|
||
|
|
obj[option.code] = { ...option }
|
||
|
|
return obj
|
||
|
|
}, {})
|
||
|
|
handleCancel()
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const appStore = useAppStore()
|
||
|
|
// 保存
|
||
|
|
const handleSave = async () => {
|
||
|
|
const isInvalid = await formRef.value?.validate()
|
||
|
|
if (isInvalid) return false
|
||
|
|
await updateOption(
|
||
|
|
Object.entries(form).map(([key, value]) => {
|
||
|
|
return { id: siteConfig.value[key].id, code: key, value }
|
||
|
|
}),
|
||
|
|
)
|
||
|
|
appStore.setSiteConfig(form)
|
||
|
|
await getDataList()
|
||
|
|
Message.success('保存成功')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 恢复默认
|
||
|
|
const handleResetValue = async () => {
|
||
|
|
await resetOptionValue(queryForm)
|
||
|
|
Message.success('恢复成功')
|
||
|
|
await getDataList()
|
||
|
|
appStore.setSiteConfig(form)
|
||
|
|
}
|
||
|
|
const onResetValue = () => {
|
||
|
|
Modal.warning({
|
||
|
|
title: '警告',
|
||
|
|
content: '确认恢复基础配置为默认值吗？',
|
||
|
|
hideCancel: false,
|
||
|
|
maskClosable: false,
|
||
|
|
onOk: handleResetValue,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 上传 favicon
|
||
|
|
const handleUploadFavicon = (options: RequestOption) => {
|
||
|
|
const controller = new AbortController()
|
||
|
|
;(async function requestWrap() {
|
||
|
|
const { onProgress, onError, onSuccess, fileItem } = options
|
||
|
|
onProgress(20)
|
||
|
|
if (!fileItem.file) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
fileToBase64(fileItem.file).then()
|
||
|
|
.then((res) => {
|
||
|
|
onSuccess()
|
||
|
|
form.SITE_FAVICON = res
|
||
|
|
Message.success('上传成功')
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
onError(error)
|
||
|
|
})
|
||
|
|
})()
|
||
|
|
return {
|
||
|
|
abort() {
|
||
|
|
controller.abort()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const handleChangeFavicon = (_: any, currentFile: any) => {
|
||
|
|
faviconFile.value = {
|
||
|
|
...currentFile,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 上传 Logo
|
||
|
|
const handleUploadLogo = (options: RequestOption) => {
|
||
|
|
const controller = new AbortController()
|
||
|
|
;(async function requestWrap() {
|
||
|
|
const { onProgress, onError, onSuccess, fileItem } = options
|
||
|
|
onProgress(20)
|
||
|
|
if (!fileItem.file) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
fileToBase64(fileItem.file).then()
|
||
|
|
.then((res) => {
|
||
|
|
onSuccess()
|
||
|
|
form.SITE_LOGO = res
|
||
|
|
Message.success('上传成功')
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
onError(error)
|
||
|
|
})
|
||
|
|
})()
|
||
|
|
return {
|
||
|
|
abort() {
|
||
|
|
controller.abort()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const handleChangeLogo = (_: any, currentFile: any) => {
|
||
|
|
logoFile.value = {
|
||
|
|
...currentFile,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getDataList()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.logo {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
min-width: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.favicon {
|
||
|
|
width: 46px;
|
||
|
|
height: 46px;
|
||
|
|
min-width: 46px;
|
||
|
|
line-height: 46px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.form .arco-input-wrapper),
|
||
|
|
:deep(.form .arco-textarea-wrapper) {
|
||
|
|
width: 500px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arco-form .image-item,
|
||
|
|
.input-item {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.arco-form-item-layout-vertical > .arco-form-item-label-col) {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// responsive
|
||
|
|
:deep(.mobile .form .arco-input-wrapper),
|
||
|
|
:deep(.mobile .form .arco-textarea-wrapper) {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|