84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
|
<section class="themeSetting">
|
|
<ai-detail list>
|
|
<ai-title slot="title" title="主题样式" isShowBottomBorder isShowBack @back="cancel">
|
|
<template #rightBtn>
|
|
<span class="mar-r8" v-text="'灰色滤镜'"/>
|
|
<el-switch size="mini" v-model="form.enableGreyFilter" name="灰色滤镜" border active-value="1" inactive-value="0"/>
|
|
</template>
|
|
</ai-title>
|
|
<template #content>
|
|
<el-form size="small" :model="form" ref="ThemeForm">
|
|
<ai-title title="WEB后台"/>
|
|
<ai-select-card dict="themeWeb" v-model="form.colorScheme.web"/>
|
|
</el-form>
|
|
</template>
|
|
<template #footer>
|
|
<el-button @click="cancel">取消</el-button>
|
|
<el-button type="primary" @click="submit">提交</el-button>
|
|
</template>
|
|
</ai-detail>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import AiSelectCard from "./components/AiSelectCard";
|
|
|
|
export default {
|
|
name: "themeSetting",
|
|
components: {AiSelectCard},
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
data() {
|
|
return {
|
|
form: {enableGreyFilter: '0', colorScheme: {}}
|
|
}
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
const {id} = this.$route.query
|
|
this.instance.post("/app/appdvcpconfig/detail", null, {params: {id}}).then(res => {
|
|
if (res?.data) {
|
|
let {colorScheme, enableGreyFilter} = res.data
|
|
colorScheme = JSON.parse(colorScheme) || {web: 'blue'}
|
|
this.form = {colorScheme, enableGreyFilter}
|
|
}
|
|
})
|
|
},
|
|
cancel() {
|
|
this.$router.push({})
|
|
},
|
|
submit() {
|
|
this.$refs.ThemeForm.validate(v => {
|
|
if (v) {
|
|
let {colorScheme} = this.form
|
|
colorScheme = JSON.stringify(colorScheme)
|
|
this.instance.post("/app/appdvcpconfig/updateSysColorScheme", {...this.form, colorScheme}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success("保存成功!")
|
|
this.cancel()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.getDetail()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.themeSetting {
|
|
height: 100%;
|
|
|
|
.mar-r8 {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
</style>
|