主题设置页面加载效果

pull/9/head
ruibaby 2019-04-11 14:56:04 +08:00
parent 5c2c9e05b4
commit 327ce1c017
1 changed files with 77 additions and 70 deletions

View File

@ -36,81 +36,85 @@
> >
<a-row :gutter="12" type="flex"> <a-row :gutter="12" type="flex">
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<img <a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
v-if="themeProperty" <img
:alt="themeProperty.name" v-if="themeProperty"
:src="themeProperty.screenshots" :alt="themeProperty.name"
width="100%" :src="themeProperty.screenshots"
> width="100%"
>
</a-skeleton>
</a-col> </a-col>
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<a-tabs defaultActiveKey="0"> <a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
<a-tab-pane <a-tabs defaultActiveKey="0">
v-for="(group, index) in themeConfiguration" <a-tab-pane
:key="index" v-for="(group, index) in themeConfiguration"
:tab="group.label" :key="index"
> :tab="group.label"
<a-form layout="vertical"> >
<a-form-item <a-form layout="vertical">
v-for="(item, index1) in group.items" <a-form-item
:label="item.label + ''" v-for="(item, index1) in group.items"
:key="index1" :label="item.label + ''"
:wrapper-col="wrapperCol" :key="index1"
> :wrapper-col="wrapperCol"
<a-input
v-model="themeSettings[item.name]"
:defaultValue="item.defaultValue"
v-if="item.type == 'TEXT'"
/>
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
v-model="themeSettings[item.name]"
v-else-if="item.type == 'TEXTAREA'"
/>
<a-radio-group
v-decorator="['radio-group']"
:defaultValue="item.defaultValue"
v-model="themeSettings[item.name]"
v-else-if="item.type == 'RADIO'"
> >
<a-radio <a-input
v-for="(option, index2) in item.options" v-model="themeSettings[item.name]"
:key="index2" :defaultValue="item.defaultValue"
:value="option.value" v-if="item.type == 'TEXT'"
>{{ option.label }}</a-radio> />
</a-radio-group> <a-input
<a-select type="textarea"
v-model="themeSettings[item.name]" :autosize="{ minRows: 5 }"
:defaultValue="item.defaultValue" v-model="themeSettings[item.name]"
v-else-if="item.type == 'SELECT'" v-else-if="item.type == 'TEXTAREA'"
> />
<a-select-option <a-radio-group
v-for="option in item.options" v-decorator="['radio-group']"
:key="option.value" :defaultValue="item.defaultValue"
:value="option.value" v-model="themeSettings[item.name]"
>{{ option.label }}</a-select-option> v-else-if="item.type == 'RADIO'"
</a-select> >
</a-form-item> <a-radio
v-for="(option, index2) in item.options"
:key="index2"
:value="option.value"
>{{ option.label }}</a-radio>
</a-radio-group>
<a-select
v-model="themeSettings[item.name]"
:defaultValue="item.defaultValue"
v-else-if="item.type == 'SELECT'"
>
<a-select-option
v-for="option in item.options"
:key="option.value"
:value="option.value"
>{{ option.label }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="saveSettings"></a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="about" tab="关于">
<a-form-item> <a-form-item>
<a-button type="primary" @click="saveSettings"></a-button> <a-popconfirm
:title="'确定删除【' + themeProperty.name + '】主题?'"
@confirm="deleteTheme(themeProperty.id)"
okText="确定"
cancelText="取消"
>
<a-button type="danger">删除该主题</a-button>
</a-popconfirm>
</a-form-item> </a-form-item>
</a-form> </a-tab-pane>
</a-tab-pane> </a-tabs>
<a-tab-pane key="about" tab="关于"> <a-skeleton :loading="optionLoading">
<a-form-item> </a-skeleton></a-skeleton></a-col>
<a-popconfirm
:title="'确定删除【' + themeProperty.name + '】主题?'"
@confirm="deleteTheme(themeProperty.id)"
okText="确定"
cancelText="取消"
>
<a-button type="danger">删除该主题</a-button>
</a-popconfirm>
</a-form-item>
</a-tab-pane>
</a-tabs>
</a-col>
</a-row> </a-row>
</a-drawer> </a-drawer>
</page-view> </page-view>
@ -127,6 +131,7 @@ export default {
}, },
data() { data() {
return { return {
optionLoading: true,
wrapperCol: { wrapperCol: {
xl: { span: 12 }, xl: { span: 12 },
lg: { span: 12 }, lg: { span: 12 },
@ -163,6 +168,7 @@ export default {
that.loadSettings() that.loadSettings()
that.getThemeProperty(themeId) that.getThemeProperty(themeId)
}) })
that.optionLoading = false
}, 500) }, 500)
}, },
activeTheme(theme) { activeTheme(theme) {
@ -196,6 +202,7 @@ export default {
this.visible = false this.visible = false
this.themeConfiguration = {} this.themeConfiguration = {}
this.themeProperty = {} this.themeProperty = {}
this.optionLoading = true
} }
} }
} }