fastbee/yack-web/src/views/system/setting/components/UserSettingForm.vue
2026-10-05 17:20:54 +08:00

117 lines
3.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="user-setting">
<setting-row label="登录后显示页面" desc="候选项取自系统菜单,仅对该账号生效,修改后下次登录生效。">
<el-select
v-model="form.loginRedirect"
filterable
:loading="optionsLoading"
placeholder="请选择登录后进入的页面"
class="setting-control"
>
<el-option
v-for="item in options"
:key="item.path"
:label="item.menuName"
:value="item.path"
/>
</el-select>
</setting-row>
<setting-row label="查询网关子设备" desc="按设备编号查询时生效:输入网关子设备编号会返回其所属网关设备;同时允许查到「网关子设备」类型的产品设备。不按编号查(默认列表)时不生效,列表始终不展示子设备。">
<el-switch v-model="form.queryGatewayChild" />
</setting-row>
<div class="setting-actions">
<el-button type="primary" icon="el-icon-check" :loading="saving" @click="submitForm">保存</el-button>
<el-button icon="el-icon-refresh-left" @click="handleReset">重置</el-button>
</div>
</div>
</template>
<script>
import {
getUserSetting,
updateUserSetting,
listLoginRedirectOptions
} from '@/api/system/userSetting';
import SettingRow from './SettingRow';
// 默认值与后端 UserSettingConstants 保持一致:
// 未指定的账号保持原有的数据大屏落地行为;子设备开关默认关闭
const DEFAULT_FORM = {
loginRedirect: '/bigscreen',
queryGatewayChild: false
};
export default {
name: 'UserSettingForm',
components: { SettingRow },
data() {
return {
saving: false,
optionsLoading: false,
options: [],
form: { ...DEFAULT_FORM }
};
},
created() {
this.getOptions();
this.getSetting();
},
methods: {
getOptions() {
this.optionsLoading = true;
listLoginRedirectOptions()
.then((res) => {
this.options = res.data || [];
})
.finally(() => {
this.optionsLoading = false;
});
},
getSetting() {
getUserSetting().then((res) => {
const data = res.data || {};
// 后端对未配置过的用户返回默认值,此处仅在值缺失时兜底。
// queryGatewayChild 不能用 ||:布尔 false 会被吞掉,导致开关回显错乱。
this.form = {
loginRedirect: data.loginRedirect || DEFAULT_FORM.loginRedirect,
queryGatewayChild: data.queryGatewayChild === null || data.queryGatewayChild === undefined
? DEFAULT_FORM.queryGatewayChild
: data.queryGatewayChild
};
});
},
submitForm() {
this.saving = true;
updateUserSetting({
loginRedirect: this.form.loginRedirect,
queryGatewayChild: this.form.queryGatewayChild
})
.then(() => {
this.$modal.msgSuccess('保存成功,下次登录生效');
})
.finally(() => {
this.saving = false;
});
},
handleReset() {
this.form = { ...DEFAULT_FORM };
this.getSetting();
}
}
};
</script>
<style lang="scss" scoped>
.setting-control {
width: 100%;
}
// 动作按钮缩进到控件列下方(而不是清单左边缘):
// 172px = SettingRow 的标签列 160px + 列间距 12px,见 SettingRow.vue
.setting-actions {
padding: 16px 0 0 172px;
}
</style>