mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-11-13 04:57:11 +08:00
@@ -72,26 +72,24 @@
|
||||
</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 class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
|
||||
<a-input v-model.trim="form.SITE_TITLE" class="input-width" 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-form-item class="input-item" field="SITE_DESCRIPTION" :label="siteConfig.SITE_DESCRIPTION.name">
|
||||
<a-textarea
|
||||
v-model.trim="form.SITE_DESCRIPTION"
|
||||
placeholder="请输入网站描述"
|
||||
class="input-width"
|
||||
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 class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
|
||||
<a-input v-model.trim="form.SITE_COPYRIGHT" class="input-width" placeholder="请输入版权信息" />
|
||||
</a-form-item>
|
||||
<a-form-item class="input-item" field="SITE_DOMAIN" :label="siteConfig.SITE_DOMAIN.name" :help="siteConfig.SITE_DOMAIN.description">
|
||||
<a-input v-model.trim="form.SITE_DOMAIN" placeholder="请输入网站域名" />
|
||||
<a-form-item field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name">
|
||||
<a-input v-model.trim="form.SITE_BEIAN" class="input-width" placeholder="请输入备案号" :max-length="30" show-word-limit />
|
||||
</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-space style="margin-bottom: 16px">
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
|
||||
<template #icon>
|
||||
<icon-edit />
|
||||
@@ -146,9 +144,9 @@ const [form] = useResetReactive({
|
||||
SITE_COPYRIGHT: '',
|
||||
})
|
||||
const rules: FormInstance['rules'] = {
|
||||
SITE_TITLE: [{ required: true, message: '请输入网站名称' }],
|
||||
SITE_DESCRIPTION: [{ required: true, message: '请输入网站描述' }],
|
||||
SITE_COPYRIGHT: [{ required: true, message: '请输入版权声明' }],
|
||||
SITE_TITLE: [{ required: true, message: '请输入系统标题' }],
|
||||
SITE_DESCRIPTION: [{ required: true, message: '请输入系统描述' }],
|
||||
SITE_COPYRIGHT: [{ required: true, message: '请输入版权信息' }],
|
||||
}
|
||||
|
||||
const siteConfig = ref<SiteConfig>({
|
||||
@@ -157,7 +155,6 @@ const siteConfig = ref<SiteConfig>({
|
||||
SITE_TITLE: {},
|
||||
SITE_DESCRIPTION: {},
|
||||
SITE_COPYRIGHT: {},
|
||||
SITE_DOMAIN: {},
|
||||
SITE_BEIAN: {},
|
||||
})
|
||||
const faviconFile = ref<FileItem>({ uid: '-1' })
|
||||
@@ -169,7 +166,6 @@ const reset = () => {
|
||||
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_DOMAIN = siteConfig.value.SITE_DOMAIN.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
|
||||
@@ -317,8 +313,7 @@ onMounted(() => {
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
:deep(.form .arco-input-wrapper),
|
||||
:deep(.form .arco-textarea-wrapper) {
|
||||
.input-width {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
@@ -332,8 +327,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
// responsive
|
||||
:deep(.mobile .form .arco-input-wrapper),
|
||||
:deep(.mobile .form .arco-textarea-wrapper) {
|
||||
width: 100%;
|
||||
.mobile {
|
||||
.input-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,56 +9,25 @@
|
||||
:layout="width >= 500 ? 'horizontal' : 'vertical'"
|
||||
:disabled="!isUpdate"
|
||||
scroll-to-first-error
|
||||
class="form"
|
||||
>
|
||||
<a-form-item
|
||||
field="MAIL_PROTOCOL"
|
||||
:label="mailConfig.MAIL_PROTOCOL.name"
|
||||
:help="mailConfig.MAIL_PROTOCOL.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
|
||||
<a-select v-model.trim="form.MAIL_PROTOCOL">
|
||||
<a-option label="SMTP" value="smtp" />
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="MAIL_HOST"
|
||||
:label="mailConfig.MAIL_HOST.name"
|
||||
:help="mailConfig.MAIL_HOST.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model.trim="form.MAIL_HOST" />
|
||||
<a-form-item field="MAIL_HOST" :label="mailConfig.MAIL_HOST.name" hide-asterisk>
|
||||
<a-input v-model.trim="form.MAIL_HOST" class="input-width" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="MAIL_PORT"
|
||||
:label="mailConfig.MAIL_PORT.name"
|
||||
:help="mailConfig.MAIL_PORT.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input-number v-model="form.MAIL_PORT" :min="0" />
|
||||
<a-form-item field="MAIL_PORT" :label="mailConfig.MAIL_PORT.name" hide-asterisk>
|
||||
<a-input-number v-model="form.MAIL_PORT" class="input-width" :min="0" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="MAIL_USERNAME"
|
||||
:label="mailConfig.MAIL_USERNAME.name"
|
||||
:help="mailConfig.MAIL_USERNAME.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model.trim="form.MAIL_USERNAME" />
|
||||
<a-form-item field="MAIL_USERNAME" :label="mailConfig.MAIL_USERNAME.name" hide-asterisk>
|
||||
<a-input v-model.trim="form.MAIL_USERNAME" class="input-width" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="MAIL_PASSWORD"
|
||||
:label="mailConfig.MAIL_PASSWORD?.name"
|
||||
:help="mailConfig.MAIL_PASSWORD.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input-password v-model.trim="form.MAIL_PASSWORD" />
|
||||
<a-form-item field="MAIL_PASSWORD" :label="mailConfig.MAIL_PASSWORD?.name" hide-asterisk>
|
||||
<a-input-password v-model.trim="form.MAIL_PASSWORD" class="input-width" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="MAIL_SSL_ENABLED"
|
||||
:label="mailConfig.MAIL_SSL_ENABLED?.name"
|
||||
:help="mailConfig.MAIL_SSL_ENABLED.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-form-item field="MAIL_SSL_ENABLED" :label="mailConfig.MAIL_SSL_ENABLED?.name" hide-asterisk>
|
||||
<a-switch
|
||||
v-model="form.MAIL_SSL_ENABLED"
|
||||
type="round"
|
||||
@@ -70,13 +39,10 @@
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="form.MAIL_SSL_ENABLED === '1'"
|
||||
field="MAIL_SSL_PORT"
|
||||
:label="mailConfig.MAIL_SSL_PORT.name"
|
||||
:help="mailConfig.MAIL_SSL_PORT.description"
|
||||
v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input-number v-model="form.MAIL_SSL_PORT" :min="0" />
|
||||
<a-input-number v-model="form.MAIL_SSL_PORT" class="input-width" :min="0" />
|
||||
</a-form-item>
|
||||
<a-space style="margin-bottom: 16px">
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
|
||||
@@ -220,8 +186,7 @@ onMounted(() => {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
:deep(.form .arco-input-wrapper),
|
||||
:deep(.arco-select-view-single) {
|
||||
.input-width, :deep(.arco-select-view-single) {
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,49 +9,35 @@
|
||||
:layout="width >= 500 ? 'horizontal' : 'vertical'"
|
||||
:disabled="!isUpdate"
|
||||
scroll-to-first-error
|
||||
class="form"
|
||||
>
|
||||
<a-form-item
|
||||
field="PASSWORD_ERROR_LOCK_COUNT"
|
||||
:label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description"
|
||||
hide-asterisk
|
||||
field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_ERROR_LOCK_COUNT"
|
||||
:default-value="0"
|
||||
:precision="0"
|
||||
:min="0"
|
||||
:max="10"
|
||||
v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
|
||||
:min="0" :max="10"
|
||||
>
|
||||
<template #append>次</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="PASSWORD_ERROR_LOCK_MINUTES"
|
||||
:label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description"
|
||||
hide-asterisk
|
||||
field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_ERROR_LOCK_MINUTES"
|
||||
:precision="0"
|
||||
:min="1"
|
||||
v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
|
||||
:max="1440"
|
||||
>
|
||||
<template #append>分钟</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="PASSWORD_EXPIRATION_DAYS"
|
||||
:label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
|
||||
:help="securityConfig.PASSWORD_EXPIRATION_DAYS.description"
|
||||
hide-asterisk
|
||||
field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
|
||||
:help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_EXPIRATION_DAYS"
|
||||
:precision="0"
|
||||
:min="0"
|
||||
v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
|
||||
:max="999"
|
||||
>
|
||||
<template #append>天</template>
|
||||
@@ -59,62 +45,43 @@
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
|
||||
field="PASSWORD_EXPIRATION_WARNING_DAYS"
|
||||
:help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
|
||||
field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS"
|
||||
:precision="0"
|
||||
:min="0"
|
||||
v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
|
||||
:max="998"
|
||||
>
|
||||
<template #append>天</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="PASSWORD_REPETITION_TIMES"
|
||||
:label="securityConfig.PASSWORD_REPETITION_TIMES.name"
|
||||
:help="securityConfig.PASSWORD_REPETITION_TIMES.description"
|
||||
hide-asterisk
|
||||
field="PASSWORD_REPETITION_TIMES" :label="securityConfig.PASSWORD_REPETITION_TIMES.name"
|
||||
:help="securityConfig.PASSWORD_REPETITION_TIMES.description" hide-asterisk
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_REPETITION_TIMES"
|
||||
:precision="0"
|
||||
:min="3"
|
||||
v-model="form.PASSWORD_REPETITION_TIMES" class="input-width" :precision="0" :min="3"
|
||||
:max="32"
|
||||
>
|
||||
<template #append>次</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="PASSWORD_MIN_LENGTH"
|
||||
:label="securityConfig.PASSWORD_MIN_LENGTH.name"
|
||||
:help="securityConfig.PASSWORD_MIN_LENGTH.description"
|
||||
hide-asterisk
|
||||
field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name"
|
||||
:help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_MIN_LENGTH"
|
||||
:precision="0"
|
||||
:min="8"
|
||||
:max="32"
|
||||
/>
|
||||
<a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="PASSWORD_ALLOW_CONTAIN_USERNAME"
|
||||
:label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
|
||||
:help="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.description"
|
||||
>
|
||||
<a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="PASSWORD_REQUIRE_SYMBOLS"
|
||||
:label="securityConfig.PASSWORD_REQUIRE_SYMBOLS.name"
|
||||
:help="securityConfig.PASSWORD_REQUIRE_SYMBOLS.description"
|
||||
>
|
||||
<a-form-item field="PASSWORD_REQUIRE_SYMBOLS" :label="securityConfig.PASSWORD_REQUIRE_SYMBOLS.name">
|
||||
<a-switch v-model="form.PASSWORD_REQUIRE_SYMBOLS" type="round" :checked-value="1" :unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
@@ -171,7 +138,7 @@ const rules: FormInstance['rules'] = {
|
||||
{
|
||||
validator: (value, callback) => {
|
||||
if (form.PASSWORD_EXPIRATION_DAYS > 0 && value >= form.PASSWORD_EXPIRATION_DAYS) {
|
||||
callback('密码到期提醒时间应小于密码有效期')
|
||||
callback('密码到期前的提示时间应小于密码有效期')
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
@@ -271,7 +238,7 @@ onMounted(() => {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
:deep(.form .arco-input-wrapper) {
|
||||
.input-width {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<a-spin :loading="loading">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="form.STORAGE_DEFAULT === 'LOCAL' ? localRules : ossRules"
|
||||
auto-label-width
|
||||
label-align="left"
|
||||
:layout="width >= 500 ? 'horizontal' : 'vertical'"
|
||||
:disabled="!isUpdate"
|
||||
scroll-to-first-error
|
||||
class="form"
|
||||
>
|
||||
<!-- 默认存储 -->
|
||||
<a-form-item
|
||||
field="STORAGE_DEFAULT"
|
||||
:label="storageConfig.STORAGE_DEFAULT.name"
|
||||
>
|
||||
<a-radio-group v-model="form.STORAGE_DEFAULT">
|
||||
<a-radio value="LOCAL">本地存储</a-radio>
|
||||
<a-radio value="OSS">对象存储</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<fieldset>
|
||||
<legend>本地存储配置</legend>
|
||||
<a-form-item
|
||||
field="STORAGE_LOCAL_BUCKET"
|
||||
:label="storageConfig.STORAGE_LOCAL_BUCKET.name"
|
||||
:help="storageConfig.STORAGE_LOCAL_BUCKET.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model="form.STORAGE_LOCAL_BUCKET" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="STORAGE_LOCAL_ENDPOINT"
|
||||
:label="storageConfig.STORAGE_LOCAL_ENDPOINT.name"
|
||||
:help="storageConfig.STORAGE_LOCAL_ENDPOINT.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model="form.STORAGE_LOCAL_ENDPOINT" />
|
||||
</a-form-item>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>对象存储配置</legend>
|
||||
<a-form-item
|
||||
field="STORAGE_OSS_ACCESS_KEY"
|
||||
:label="storageConfig.STORAGE_OSS_ACCESS_KEY.name"
|
||||
:help="storageConfig.STORAGE_OSS_ACCESS_KEY.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model="form.STORAGE_OSS_ACCESS_KEY" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="STORAGE_OSS_SECRET_KEY"
|
||||
:label="storageConfig.STORAGE_OSS_SECRET_KEY.name"
|
||||
:help="storageConfig.STORAGE_OSS_SECRET_KEY.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input-password v-model="form.STORAGE_OSS_SECRET_KEY" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="STORAGE_OSS_BUCKET"
|
||||
:label="storageConfig.STORAGE_OSS_BUCKET.name"
|
||||
:help="storageConfig.STORAGE_OSS_BUCKET.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model="form.STORAGE_OSS_BUCKET" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="STORAGE_OSS_ENDPOINT"
|
||||
:label="storageConfig.STORAGE_OSS_ENDPOINT.name"
|
||||
:help="storageConfig.STORAGE_OSS_ENDPOINT.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model="form.STORAGE_OSS_ENDPOINT" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="STORAGE_OSS_REGION"
|
||||
:label="storageConfig.STORAGE_OSS_REGION.name"
|
||||
:help="storageConfig.STORAGE_OSS_REGION.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input v-model="form.STORAGE_OSS_REGION" />
|
||||
</a-form-item>
|
||||
</fieldset>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-space style="margin-bottom: 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 { useWindowSize } from '@vueuse/core'
|
||||
import { type FormInstance, Message, Modal } from '@arco-design/web-vue'
|
||||
import {
|
||||
type OptionResp,
|
||||
type SecurityConfig,
|
||||
type StorageConfig,
|
||||
listOption,
|
||||
resetOptionValue,
|
||||
updateOption,
|
||||
} from '@/apis/system'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
|
||||
defineOptions({ name: 'StorageSetting' })
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
const [form] = useResetReactive({
|
||||
STORAGE_DEFAULT: 'LOCAL', // 默认选中本地存储
|
||||
STORAGE_LOCAL_BUCKET: '',
|
||||
STORAGE_LOCAL_ENDPOINT: '',
|
||||
STORAGE_OSS_ACCESS_KEY: '',
|
||||
STORAGE_OSS_SECRET_KEY: '',
|
||||
STORAGE_OSS_BUCKET: '',
|
||||
STORAGE_OSS_ENDPOINT: '',
|
||||
STORAGE_OSS_REGION: '',
|
||||
})
|
||||
|
||||
const localRules: FormInstance['rules'] = {
|
||||
STORAGE_LOCAL_BUCKET: [{ required: true, message: '请输入本地存储路径' }],
|
||||
STORAGE_LOCAL_ENDPOINT: [{ required: true, message: '请输入本地资源访问地址' }],
|
||||
}
|
||||
|
||||
const ossRules: FormInstance['rules'] = {
|
||||
STORAGE_OSS_ACCESS_KEY: [{ required: true, message: '请输入Access Key' }],
|
||||
STORAGE_OSS_SECRET_KEY: [{ required: true, message: '请输入Secret Key' }],
|
||||
STORAGE_OSS_BUCKET: [{ required: true, message: '请输入对象存储桶名称' }],
|
||||
STORAGE_OSS_ENDPOINT: [{ required: true, message: '请输入对象存储终端节点' }],
|
||||
}
|
||||
|
||||
const storageConfig = ref<StorageConfig>({
|
||||
STORAGE_DEFAULT: {},
|
||||
STORAGE_LOCAL_BUCKET: {},
|
||||
STORAGE_LOCAL_ENDPOINT: {},
|
||||
STORAGE_OSS_ACCESS_KEY: {},
|
||||
STORAGE_OSS_SECRET_KEY: {},
|
||||
STORAGE_OSS_BUCKET: {},
|
||||
STORAGE_OSS_ENDPOINT: {},
|
||||
STORAGE_OSS_REGION: {},
|
||||
})
|
||||
|
||||
const reset = () => {
|
||||
formRef.value?.resetFields()
|
||||
Object.keys(form).forEach((key) => {
|
||||
form[key] = storageConfig.value[key]?.value || form[key] // 兜底设置默认值
|
||||
})
|
||||
}
|
||||
|
||||
const isUpdate = ref(false)
|
||||
|
||||
const onUpdate = () => {
|
||||
isUpdate.value = true
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
reset()
|
||||
isUpdate.value = false
|
||||
}
|
||||
|
||||
const queryForm = { category: 'STORAGE' }
|
||||
|
||||
const getDataList = async () => {
|
||||
loading.value = true
|
||||
const { data } = await listOption(queryForm)
|
||||
storageConfig.value = data.reduce((obj: SecurityConfig, option: OptionResp) => {
|
||||
obj[option.code] = { ...option, value: option.value }
|
||||
return obj
|
||||
}, {})
|
||||
handleCancel()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return
|
||||
await updateOption(
|
||||
Object.entries(form).map(([key, value]) => ({ id: storageConfig.value[key].id, code: key, value })),
|
||||
)
|
||||
await getDataList()
|
||||
Message.success('保存成功')
|
||||
}
|
||||
|
||||
const handleResetValue = async () => {
|
||||
await resetOptionValue(queryForm)
|
||||
Message.success('恢复成功')
|
||||
await getDataList()
|
||||
}
|
||||
|
||||
const onResetValue = () => {
|
||||
Modal.warning({
|
||||
title: '警告',
|
||||
content: '确认恢复存储配置为默认值吗?',
|
||||
hideCancel: false,
|
||||
maskClosable: false,
|
||||
onOk: handleResetValue,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.form .arco-input-wrapper) {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
min-width: 0;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid var(--color-neutral-3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
fieldset legend {
|
||||
color: rgb(var(--gray-10));
|
||||
padding: 2px 5px 2px 5px;
|
||||
border: 1px solid var(--color-neutral-3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
@@ -6,19 +6,16 @@
|
||||
</a-space>
|
||||
</a-row> -->
|
||||
<a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
|
||||
<a-tab-pane key="site">
|
||||
<template #title><icon-apps /> 网站配置</template>
|
||||
<a-tab-pane key="1">
|
||||
<template #title><icon-settings /> 基础配置</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="security">
|
||||
<a-tab-pane key="2">
|
||||
<template #title><icon-safe /> 安全配置</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="mail">
|
||||
<a-tab-pane key="3">
|
||||
<template #title><icon-email /> 邮件配置</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="storage">
|
||||
<template #title><icon-storage /> 存储配置</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="login">
|
||||
<a-tab-pane key="4">
|
||||
<template #title><icon-lock /> 登录配置</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
@@ -30,37 +27,35 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import SiteSetting from './components/SiteSetting.vue'
|
||||
import BasicSetting from './components/BasicSetting.vue'
|
||||
import SecuritySetting from './components/SecuritySetting.vue'
|
||||
import MailSetting from './components/MailSetting.vue'
|
||||
import LoginSetting from './components/LoginSetting.vue'
|
||||
import StorageSetting from './components/StorageSetting.vue'
|
||||
|
||||
defineOptions({ name: 'SystemConfig' })
|
||||
|
||||
const PanMap: Record<string, Component> = {
|
||||
site: SiteSetting,
|
||||
security: SecuritySetting,
|
||||
mail: MailSetting,
|
||||
storage: StorageSetting,
|
||||
login: LoginSetting,
|
||||
1: BasicSetting,
|
||||
2: SecuritySetting,
|
||||
3: MailSetting,
|
||||
4: LoginSetting,
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const activeKey = ref('site')
|
||||
const activeKey = ref('1')
|
||||
watch(
|
||||
() => route.query,
|
||||
() => {
|
||||
if (route.query.tab) {
|
||||
activeKey.value = String(route.query.tab)
|
||||
if (route.query.tabKey) {
|
||||
activeKey.value = String(route.query.tabKey)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
const change = (key: string | number) => {
|
||||
activeKey.value = key as string
|
||||
router.replace({ path: route.path, query: { tab: key } })
|
||||
router.replace({ path: route.path, query: { tabKey: key } })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user