Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 面板设置统一改为抽屉实现 #880

Merged
merged 1 commit into from
May 5, 2023
Merged

feat: 面板设置统一改为抽屉实现 #880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 51 additions & 132 deletions frontend/src/views/setting/panel/index.vue
View file
Open in desktop
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
Open in desktop
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