first commit
This commit is contained in:
zc
148
src/views/system/config/components/LoginSetting.vue
Normal file
148
src/views/system/config/components/LoginSetting.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<a-spin :loading="loading">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
auto-label-width
|
||||
label-align="left"
|
||||
:layout="width >= 500 ? 'horizontal' : 'vertical'"
|
||||
:disabled="!isUpdate"
|
||||
scroll-to-first-error
|
||||
>
|
||||
<a-form-item
|
||||
field="LOGIN_CAPTCHA_ENABLED"
|
||||
:label="loginConfig.LOGIN_CAPTCHA_ENABLED.name"
|
||||
>
|
||||
<a-switch
|
||||
v-model="form.LOGIN_CAPTCHA_ENABLED"
|
||||
type="round"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
>
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<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 LoginConfig, type OptionResp, listOption, resetOptionValue, updateOption } from '@/apis/system'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
|
||||
defineOptions({ name: 'LoginSetting' })
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const [form] = useResetReactive({
|
||||
LOGIN_CAPTCHA_ENABLED: 1,
|
||||
})
|
||||
const rules: FormInstance['rules'] = {
|
||||
LOGIN_CAPTCHA_ENABLED: [{ required: true, message: '请选择' }],
|
||||
}
|
||||
|
||||
const loginConfig = ref<LoginConfig>({
|
||||
LOGIN_CAPTCHA_ENABLED: {},
|
||||
})
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.resetFields()
|
||||
form.LOGIN_CAPTCHA_ENABLED = loginConfig.value.LOGIN_CAPTCHA_ENABLED.value || 0
|
||||
}
|
||||
|
||||
const isUpdate = ref(false)
|
||||
// 修改
|
||||
const onUpdate = () => {
|
||||
isUpdate.value = true
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
reset()
|
||||
isUpdate.value = false
|
||||
}
|
||||
|
||||
const queryForm = {
|
||||
category: 'LOGIN',
|
||||
}
|
||||
// 查询列表数据
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const { data } = await listOption(queryForm)
|
||||
loginConfig.value = data.reduce((obj: LoginConfig, option: OptionResp) => {
|
||||
obj[option.code] = { ...option, value: Number.parseInt(option.value) }
|
||||
return obj
|
||||
}, {})
|
||||
handleCancel()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return false
|
||||
await updateOption(
|
||||
Object.entries(form).map(([key, value]) => {
|
||||
return { id: loginConfig.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(.arco-form-item.arco-form-item-has-help) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.input-width {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
227
src/views/system/config/components/MailSetting.vue
Normal file
227
src/views/system/config/components/MailSetting.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<a-spin :loading="loading">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
auto-label-width
|
||||
label-align="left"
|
||||
: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-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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<a-form-item
|
||||
field="MAIL_SSL_ENABLED"
|
||||
:label="mailConfig.MAIL_SSL_ENABLED?.name"
|
||||
:help="mailConfig.MAIL_SSL_ENABLED.description"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-switch
|
||||
v-model="form.MAIL_SSL_ENABLED"
|
||||
type="round"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
>
|
||||
<template #checked>启用</template>
|
||||
<template #unchecked>禁用</template>
|
||||
</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"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input-number v-model="form.MAIL_SSL_PORT" :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">
|
||||
<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 MailConfig,
|
||||
type OptionResp,
|
||||
listOption,
|
||||
resetOptionValue,
|
||||
updateOption,
|
||||
} from '@/apis/system'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
|
||||
defineOptions({ name: 'MailSetting' })
|
||||
const { width } = useWindowSize()
|
||||
const loading = ref<boolean>(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const [form] = useResetReactive({
|
||||
MAIL_PROTOCOL: '',
|
||||
MAIL_HOST: '',
|
||||
MAIL_PORT: 0,
|
||||
MAIL_USERNAME: '',
|
||||
MAIL_PASSWORD: '',
|
||||
MAIL_SSL_ENABLED: '',
|
||||
MAIL_SSL_PORT: 0,
|
||||
})
|
||||
const rules: FormInstance['rules'] = {
|
||||
MAIL_HOST: [{ required: true, message: '请输入值' }],
|
||||
MAIL_PORT: [{ required: true, message: '请输入值' }],
|
||||
MAIL_USERNAME: [{ required: true, message: '请输入值' }],
|
||||
MAIL_PASSWORD: [{ required: true, message: '请输入值' }],
|
||||
MAIL_SSL_PORT: [{ required: true, message: '请输入值' }],
|
||||
}
|
||||
|
||||
const mailConfig = ref<MailConfig>({
|
||||
MAIL_PROTOCOL: {},
|
||||
MAIL_HOST: {},
|
||||
MAIL_PORT: {},
|
||||
MAIL_USERNAME: {},
|
||||
MAIL_PASSWORD: {},
|
||||
MAIL_SSL_ENABLED: {},
|
||||
MAIL_SSL_PORT: {},
|
||||
})
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.resetFields()
|
||||
form.MAIL_PROTOCOL = mailConfig.value.MAIL_PROTOCOL.value || ''
|
||||
form.MAIL_HOST = mailConfig.value.MAIL_HOST.value || ''
|
||||
form.MAIL_PORT = mailConfig.value.MAIL_PORT.value || 0
|
||||
form.MAIL_USERNAME = mailConfig.value.MAIL_USERNAME.value || ''
|
||||
form.MAIL_PASSWORD = mailConfig.value.MAIL_PASSWORD?.value || ''
|
||||
form.MAIL_SSL_ENABLED = mailConfig.value.MAIL_SSL_ENABLED.value || ''
|
||||
form.MAIL_SSL_PORT = mailConfig.value.MAIL_SSL_PORT.value || 0
|
||||
}
|
||||
|
||||
const isUpdate = ref(false)
|
||||
// 修改
|
||||
const onUpdate = () => {
|
||||
isUpdate.value = true
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
reset()
|
||||
isUpdate.value = false
|
||||
}
|
||||
|
||||
const queryForm = {
|
||||
category: 'MAIL',
|
||||
}
|
||||
// 查询列表数据
|
||||
const getDataList = async () => {
|
||||
loading.value = true
|
||||
const { data } = await listOption(queryForm)
|
||||
mailConfig.value = data.reduce((obj: MailConfig, option: OptionResp) => {
|
||||
obj[option.code] = { ...option, value: ['MAIL_PORT', 'MAIL_SSL_PORT'].includes(option.code) ? Number.parseInt(option.value) : option.value }
|
||||
return obj
|
||||
}, {})
|
||||
handleCancel()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return false
|
||||
await updateOption(
|
||||
Object.entries(form).map(([key, value]) => {
|
||||
return { id: mailConfig.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(.arco-form-item.arco-form-item-has-help) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
:deep(.form .arco-input-wrapper),
|
||||
:deep(.arco-select-view-single) {
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
277
src/views/system/config/components/SecuritySetting.vue
Normal file
277
src/views/system/config/components/SecuritySetting.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<a-spin :loading="loading">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
auto-label-width
|
||||
label-align="left"
|
||||
: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
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_ERROR_LOCK_COUNT"
|
||||
: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
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_ERROR_LOCK_MINUTES"
|
||||
: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
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_EXPIRATION_DAYS"
|
||||
:precision="0"
|
||||
:min="0"
|
||||
:max="999"
|
||||
>
|
||||
<template #append>天</template>
|
||||
</a-input-number>
|
||||
</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"
|
||||
hide-asterisk
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS"
|
||||
: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
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_REPETITION_TIMES"
|
||||
: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
|
||||
>
|
||||
<a-input-number
|
||||
v-model="form.PASSWORD_MIN_LENGTH"
|
||||
: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-switch v-model="form.PASSWORD_REQUIRE_SYMBOLS" type="round" :checked-value="1" :unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<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, listOption, resetOptionValue, updateOption } from '@/apis/system'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
|
||||
defineOptions({ name: 'SecuritySetting' })
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const [form] = useResetReactive({
|
||||
PASSWORD_ERROR_LOCK_COUNT: 0,
|
||||
PASSWORD_ERROR_LOCK_MINUTES: 0,
|
||||
PASSWORD_EXPIRATION_DAYS: 0,
|
||||
PASSWORD_EXPIRATION_WARNING_DAYS: 0,
|
||||
PASSWORD_REPETITION_TIMES: 0,
|
||||
PASSWORD_MIN_LENGTH: 0,
|
||||
PASSWORD_ALLOW_CONTAIN_USERNAME: 0,
|
||||
PASSWORD_REQUIRE_SYMBOLS: 0,
|
||||
})
|
||||
const rules: FormInstance['rules'] = {
|
||||
PASSWORD_ERROR_LOCK_COUNT: [{ required: true, message: '请输入值' }],
|
||||
PASSWORD_ERROR_LOCK_MINUTES: [{ required: true, message: '请输入值' }],
|
||||
PASSWORD_EXPIRATION_DAYS: [{ required: true, message: '请输入值' }],
|
||||
PASSWORD_EXPIRATION_WARNING_DAYS: [
|
||||
{ required: true, message: '请输入值' },
|
||||
{
|
||||
validator: (value, callback) => {
|
||||
if (form.PASSWORD_EXPIRATION_DAYS > 0 && value >= form.PASSWORD_EXPIRATION_DAYS) {
|
||||
callback('密码到期提醒时间应小于密码有效期')
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
PASSWORD_REPETITION_TIMES: [{ required: true, message: '请输入值' }],
|
||||
PASSWORD_MIN_LENGTH: [{ required: true, message: '请输入值' }],
|
||||
}
|
||||
|
||||
const securityConfig = ref<SecurityConfig>({
|
||||
PASSWORD_ERROR_LOCK_COUNT: {},
|
||||
PASSWORD_ERROR_LOCK_MINUTES: {},
|
||||
PASSWORD_EXPIRATION_DAYS: {},
|
||||
PASSWORD_EXPIRATION_WARNING_DAYS: {},
|
||||
PASSWORD_REPETITION_TIMES: {},
|
||||
PASSWORD_MIN_LENGTH: {},
|
||||
PASSWORD_ALLOW_CONTAIN_USERNAME: {},
|
||||
PASSWORD_REQUIRE_SYMBOLS: {},
|
||||
})
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.resetFields()
|
||||
form.PASSWORD_ERROR_LOCK_COUNT = securityConfig.value.PASSWORD_ERROR_LOCK_COUNT.value || 0
|
||||
form.PASSWORD_ERROR_LOCK_MINUTES = securityConfig.value.PASSWORD_ERROR_LOCK_MINUTES.value || 0
|
||||
form.PASSWORD_EXPIRATION_DAYS = securityConfig.value.PASSWORD_EXPIRATION_DAYS.value || 0
|
||||
form.PASSWORD_EXPIRATION_WARNING_DAYS = securityConfig.value.PASSWORD_EXPIRATION_WARNING_DAYS.value || 0
|
||||
form.PASSWORD_REPETITION_TIMES = securityConfig.value.PASSWORD_REPETITION_TIMES.value || 0
|
||||
form.PASSWORD_MIN_LENGTH = securityConfig.value.PASSWORD_MIN_LENGTH.value || 0
|
||||
form.PASSWORD_ALLOW_CONTAIN_USERNAME = securityConfig.value.PASSWORD_ALLOW_CONTAIN_USERNAME.value || 0
|
||||
form.PASSWORD_REQUIRE_SYMBOLS = securityConfig.value.PASSWORD_REQUIRE_SYMBOLS.value || 0
|
||||
}
|
||||
|
||||
const isUpdate = ref(false)
|
||||
// 修改
|
||||
const onUpdate = () => {
|
||||
isUpdate.value = true
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
reset()
|
||||
isUpdate.value = false
|
||||
}
|
||||
|
||||
const queryForm = {
|
||||
category: 'PASSWORD',
|
||||
}
|
||||
// 查询列表数据
|
||||
const getDataList = async () => {
|
||||
loading.value = true
|
||||
const { data } = await listOption(queryForm)
|
||||
securityConfig.value = data.reduce((obj: SecurityConfig, option: OptionResp) => {
|
||||
obj[option.code] = { ...option, value: Number.parseInt(option.value) }
|
||||
return obj
|
||||
}, {})
|
||||
handleCancel()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return false
|
||||
await updateOption(
|
||||
Object.entries(form).map(([key, value]) => {
|
||||
return { id: securityConfig.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(.arco-form-item.arco-form-item-has-help) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
:deep(.form .arco-input-wrapper) {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
334
src/views/system/config/components/SiteSetting.vue
Normal file
334
src/views/system/config/components/SiteSetting.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<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>
|
||||
88
src/views/system/config/index.vue
Normal file
88
src/views/system/config/index.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="gi_table_page">
|
||||
<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>
|
||||
<a-tab-pane key="security">
|
||||
<template #title><icon-safe /> 安全配置</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="mail">
|
||||
<template #title><icon-email /> 邮件配置</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="login">
|
||||
<template #title><icon-lock /> 登录配置</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<keep-alive>
|
||||
<component :is="PanMap[activeKey]" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import SiteSetting from './components/SiteSetting.vue'
|
||||
import SecuritySetting from './components/SecuritySetting.vue'
|
||||
import MailSetting from './components/MailSetting.vue'
|
||||
import LoginSetting from './components/LoginSetting.vue'
|
||||
|
||||
defineOptions({ name: 'SystemConfig' })
|
||||
|
||||
const PanMap: Record<string, Component> = {
|
||||
site: SiteSetting,
|
||||
security: SecuritySetting,
|
||||
mail: MailSetting,
|
||||
login: LoginSetting,
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const activeKey = ref('site')
|
||||
watch(
|
||||
() => route.query,
|
||||
() => {
|
||||
if (route.query.tab) {
|
||||
activeKey.value = String(route.query.tab)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
const change = (key: string | number) => {
|
||||
activeKey.value = key as string
|
||||
router.replace({ path: route.path, query: { tab: key } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gi_table_page {
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.arco-tabs) {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-tabs .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active) {
|
||||
box-shadow: inset 0 2px 0 rgb(var(--primary-6)), inset -1px 0 0 var(--color-border-2),
|
||||
inset 1px 0 0 var(--color-border-2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
|
||||
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-type-card-gutter > .arco-tabs-content) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav::before) {
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav) {
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user