You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.6 KiB
111 lines
3.6 KiB
<template>
|
|
<PageWrapper v-loading="loading">
|
|
<div ref="wrapperRef" :class="prefixCls">
|
|
<Tabs tab-position="left" :tabBarStyle="tabBarStyle">
|
|
<template v-for="item in settingList" :key="item.group">
|
|
<TabPane :tab="item.groupDisplayName">
|
|
<CollapseContainer :title="item.groupDisplayName" :canExpan="false">
|
|
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
|
|
<a-form-item v-for="setting in item.settingItemOutput" :label="setting.displayName">
|
|
<div v-if="setting.type === 'Text'">
|
|
<a-input v-model:value="setting.value" style="width: 80%" />
|
|
</div>
|
|
<div v-if="setting.type === 'Number'">
|
|
<a-input-number v-model:value="setting.value" :min="1" :max="99999" />
|
|
</div>
|
|
<div v-if="setting.type === 'CheckBox'">
|
|
<a-checkbox :checked="!(setting.value == 'false' || setting.value == false)"
|
|
@update:checked="(val) => (setting.value = val)">
|
|
</a-checkbox>
|
|
{{ setting.description }}
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<a-button style="margin-left: 65%" type="primary" :loading="loading"
|
|
@click="updateSettingValues(item.settingItemOutput)">{{ t('common.saveText') }}</a-button>
|
|
</a-form>
|
|
</CollapseContainer>
|
|
</TabPane>
|
|
</template>
|
|
</Tabs>
|
|
</div>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
|
|
import { Tabs } from 'ant-design-vue';
|
|
import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
|
|
import { SettingOutput, UpdateSettingInput } from '/@/services/ServiceProxies';
|
|
import { getAllSettingsAsync, updateSettingsAsync } from '/@/views/admin/settings/Setting';
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
import { PageWrapper } from '/@/components/Page';
|
|
import { message } from 'ant-design-vue';
|
|
export default defineComponent({
|
|
components: {
|
|
ScrollContainer,
|
|
CollapseContainer,
|
|
Tabs,
|
|
TabPane: Tabs.TabPane,
|
|
PageWrapper,
|
|
},
|
|
setup() {
|
|
let settingList: SettingOutput[] = [];
|
|
const { t } = useI18n();
|
|
const state = reactive({
|
|
settingList,
|
|
loading: true,
|
|
});
|
|
onMounted(async () => {
|
|
state.loading = true;
|
|
const result = await getAllSettingsAsync();
|
|
state.settingList = result;
|
|
state.loading = false;
|
|
});
|
|
|
|
const updateSettingValues = async (item: any) => {
|
|
try {
|
|
const prefix = 'setting_';
|
|
const request = new UpdateSettingInput();
|
|
request.values as {};
|
|
let items: { [key: string]: string } = {};
|
|
item.forEach((e) => {
|
|
items[prefix + e.name] = String(e.value);
|
|
});
|
|
request.values = items;
|
|
state.loading = true;
|
|
await updateSettingsAsync({ request });
|
|
state.loading = false;
|
|
message.success(t('common.operationSuccess'));
|
|
} catch (error) {
|
|
message.success(t('common.operationFail'));
|
|
}
|
|
};
|
|
return {
|
|
prefixCls: 'account-setting',
|
|
tabBarStyle: {
|
|
width: '220px',
|
|
},
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 14 },
|
|
...toRefs(state),
|
|
t,
|
|
updateSettingValues,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.account-setting {
|
|
margin: 12px;
|
|
background-color: @component-background;
|
|
|
|
.base-title {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ant-tabs-tab-active {
|
|
background-color: @item-active-bg;
|
|
}
|
|
}
|
|
</style>
|
|
|