Skip to content

Commit

Permalink
feat: 面板设置统一改为抽屉实现 (#880)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssongliu
ssongliu authored May 5, 2023
1 parent 4063361 commit b67739a
Show file tree
Hide file tree
Showing 9 changed files with 476 additions and 254 deletions.
183 changes: 51 additions & 132 deletions frontend/src/views/setting/panel/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,32 @@
<div v-loading="loading">
<LayoutContent :title="$t('setting.panel')" :divider="true">
<template #main>
<el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
<el-form :model="form" label-position="left" label-width="180px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="12">
<el-form-item :label="$t('setting.user')" :rules="Rules.userName" prop="userName">
<el-input clearable v-model="form.userName">
<el-form-item :label="$t('setting.user')" prop="userName">
<el-input disabled v-model="form.userName">
<template #append>
<el-button
style="width: 85px"
@click="onSaveUserName(panelFormRef, 'UserName', form.userName)"
icon="Collection"
>
{{ $t('commons.button.save') }}
<el-button @click="onChangeUserName()" icon="Setting">
{{ $t('commons.button.set') }}
</el-button>
</template>
</el-input>
</el-form-item>

<el-form-item :label="$t('setting.passwd')" :rules="Rules.requiredInput" prop="password">
<el-form-item :label="$t('setting.passwd')" prop="password">
<el-input type="password" disabled v-model="form.password">
<template #append>
<el-button style="width: 85px" icon="Setting" @click="onChangePassword">
<el-button icon="Setting" @click="onChangePassword">
{{ $t('commons.button.set') }}
</el-button>
</template>
</el-input>
</el-form-item>

<el-form-item :label="$t('setting.theme')" :rules="Rules.requiredSelect" prop="theme">
<el-radio-group
@change="onSave(panelFormRef, 'Theme', form.theme)"
v-model="form.theme"
>
<el-form-item :label="$t('setting.theme')" prop="theme">
<el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
<el-radio-button label="light">
<el-icon><Sunny /></el-icon>
{{ $t('setting.light') }}
Expand All @@ -46,63 +39,44 @@
</el-radio-group>
</el-form-item>

<el-form-item :label="$t('setting.title')" :rules="Rules.requiredInput" prop="panelName">
<el-input clearable v-model="form.panelName">
<el-form-item :label="$t('setting.title')" prop="panelName">
<el-input disabled v-model="form.panelName">
<template #append>
<el-button
style="width: 85px"
@click="onSave(panelFormRef, 'PanelName', form.panelName)"
icon="Collection"
>
{{ $t('commons.button.save') }}
<el-button icon="Setting" @click="onChangeTitle">
{{ $t('commons.button.set') }}
</el-button>
</template>
</el-input>
</el-form-item>

<el-form-item :label="$t('setting.language')" :rules="Rules.requiredSelect" prop="language">
<el-form-item :label="$t('setting.language')" prop="language">
<el-radio-group
style="width: 100%"
@change="onSave(panelFormRef, 'Language', form.language)"
@change="onSave('Language', form.language)"
v-model="form.language"
>
<el-radio label="zh">中文</el-radio>
<el-radio label="en">English</el-radio>
</el-radio-group>
</el-form-item>

<el-form-item
:label="$t('setting.sessionTimeout')"
:rules="[Rules.integerNumber, checkNumberRange(300, 864000)]"
prop="sessionTimeout"
>
<el-input v-model.number="form.sessionTimeout">
<el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
<el-input disabled v-model.number="form.sessionTimeout">
<template #append>
<el-button
style="width: 85px"
@click="onSave(panelFormRef, 'SessionTimeout', form.sessionTimeout)"
icon="Collection"
>
{{ $t('commons.button.save') }}
<el-button @click="onChangeTimeout" icon="Setting">
{{ $t('commons.button.set') }}
</el-button>
</template>
</el-input>
<div>
<span class="input-help">
{{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
</span>
</div>
<span class="input-help">
{{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
</span>
</el-form-item>

<el-form-item :label="$t('setting.syncTime')">
<el-input disabled v-model="form.localTime">
<template #append>
<el-button
style="width: 85px"
v-show="!show"
@click="onSyncTime"
icon="Refresh"
>
<el-button v-show="!show" @click="onSyncTime" icon="Refresh">
{{ $t('commons.button.sync') }}
</el-button>
<div style="width: 45px" v-show="show">
Expand All @@ -116,32 +90,34 @@
</el-form>
</template>
</LayoutContent>

<Password ref="passwordRef" />
<UserName ref="userNameRef" />
<PanelName ref="panelNameRef" @search="search()" />
<Timeout ref="timeoutRef" @search="search()" />
</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElForm, ElMessageBox } from 'element-plus';
import { ElForm } from 'element-plus';
import LayoutContent from '@/layout/layout-content.vue';
import { syncTime, getSettingInfo, updateSetting, getSystemAvailable } from '@/api/modules/setting';
import { Rules, checkNumberRange } from '@/global/form-rules';
import { GlobalStore } from '@/store';
import { useI18n } from 'vue-i18n';
import { useTheme } from '@/hooks/use-theme';
import { MsgError, MsgSuccess } from '@/utils/message';
import { MsgSuccess } from '@/utils/message';
import Password from '@/views/setting/panel/password/index.vue';
import router from '@/routers';
import { logOutApi } from '@/api/modules/auth';
import UserName from '@/views/setting/panel/username/index.vue';
import Timeout from '@/views/setting/panel/timeout/index.vue';
import PanelName from '@/views/setting/panel/name/index.vue';
const loading = ref(false);
const i18n = useI18n();
const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);
const { switchDark } = useTheme();
type FormInstance = InstanceType<typeof ElForm>;
const form = reactive({
userName: '',
password: '',
Expand All @@ -159,7 +135,10 @@ const TIME_COUNT = ref(10);
const count = ref();
const show = ref();
const userNameRef = ref();
const passwordRef = ref();
const panelNameRef = ref();
const timeoutRef = ref();
const search = async () => {
const res = await getSettingInfo();
Expand All @@ -172,88 +151,36 @@ const search = async () => {
form.language = res.data.language;
form.complexityVerification = res.data.complexityVerification;
};
const panelFormRef = ref<FormInstance>();
const onChangePassword = () => {
passwordRef.value.acceptParams({ complexityVerification: form.complexityVerification });
};
const onSaveUserName = async (formEl: FormInstance | undefined, key: string, val: any) => {
if (!formEl) return;
const result = await formEl.validateField('userName', callback);
if (!result) {
return;
}
ElMessageBox.confirm(i18n.t('setting.userChangeHelper'), i18n.t('setting.userChange'), {
confirmButtonText: i18n.t('commons.button.confirm'),
cancelButtonText: i18n.t('commons.button.cancel'),
type: 'info',
}).then(async () => {
await updateSetting({ key: key, value: val })
.then(async () => {
await logOutApi();
loading.value = false;
MsgSuccess(i18n.t('commons.msg.operationSuccess'));
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
globalStore.setLogStatus(false);
return;
})
.catch(() => {
loading.value = false;
});
});
const onChangeUserName = () => {
userNameRef.value.acceptParams({ userName: form.userName });
};
const onChangeTitle = () => {
panelNameRef.value.acceptParams({ panelName: form.panelName });
};
const onChangeTimeout = () => {
timeoutRef.value.acceptParams({ sessionTimeout: form.sessionTimeout });
};
const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
if (!formEl) return;
const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
if (!result) {
return;
}
if (val === '') {
return;
}
const onSave = async (key: string, val: any) => {
loading.value = true;
switch (key) {
case 'Language':
i18n.locale.value = val;
globalStore.updateLanguage(val);
break;
case 'Theme':
globalStore.setThemeConfig({ ...themeConfig.value, theme: val });
switchDark();
break;
case 'SessionTimeout':
if (Number(val) < 300) {
loading.value = false;
MsgError(i18n.t('setting.sessionTimeoutError'));
search();
return;
}
break;
case 'PanelName':
globalStore.setThemeConfig({ ...themeConfig.value, panelName: val });
document.title = val;
break;
case 'MonitorStoreDays':
case 'ServerPort':
val = val + '';
break;
if (key === 'Language') {
i18n.locale.value = val;
globalStore.updateLanguage(val);
}
if (key === 'Theme') {
globalStore.setThemeConfig({ ...themeConfig.value, theme: val });
switchDark();
}
let param = {
key: key,
value: val + '',
};
await updateSetting(param)
.then(async () => {
if (param.key === 'UserName') {
await logOutApi();
loading.value = false;
MsgSuccess(i18n.t('commons.msg.operationSuccess'));
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
globalStore.setLogStatus(false);
return;
}
if (param.key === 'Language') {
location.reload();
}
Expand All @@ -280,14 +207,6 @@ function countdown() {
}, 1000);
}
function callback(error: any) {
if (error) {
return error.message;
} else {
return;
}
}
const onSyncTime = async () => {
loading.value = true;
await syncTime()
Expand Down
84 changes: 84 additions & 0 deletions frontend/src/views/setting/panel/name/index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<template>
<div>
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
<template #header>
<DrawerHeader :header="$t('setting.title')" :back="handleClose" />
</template>
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('setting.title')" prop="panelName" :rules="Rules.requiredInput">
<el-input clearable v-model="form.panelName" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSavePanelName(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { updateSetting } from '@/api/modules/setting';
import { FormInstance } from 'element-plus';
import { Rules } from '@/global/form-rules';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);
const emit = defineEmits<{ (e: 'search'): void }>();
interface DialogProps {
panelName: string;
}
const drawerVisiable = ref();
const loading = ref();
const form = reactive({
panelName: '',
});
const formRef = ref<FormInstance>();
const acceptParams = (params: DialogProps): void => {
form.panelName = params.panelName;
drawerVisiable.value = true;
};
const onSavePanelName = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
await updateSetting({ key: 'PanelName', value: form.panelName })
.then(async () => {
globalStore.setThemeConfig({ ...themeConfig.value, panelName: form.panelName });
document.title = form.panelName;
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
loading.value = false;
drawerVisiable.value = false;
emit('search');
return;
})
.catch(() => {
loading.value = false;
});
});
};
const handleClose = () => {
drawerVisiable.value = false;
};
defineExpose({
acceptParams,
});
</script>
Loading

0 comments on commit b67739a

Please sign in to comment.