From 1810286617e952f2fb16cc0ec7a6f82c55b4c3c6 Mon Sep 17 00:00:00 2001 From: wangqing <250543222@qq.com> Date: Sun, 29 Nov 2020 22:38:21 +0800 Subject: [PATCH] theme setting.vue --- src/components/parser/Parser.vue | 24 +- src/views/form/PreView.vue | 3 +- src/views/form/ProjectForm.vue | 48 +++- src/views/form/index.vue | 5 +- src/views/form/setting.vue | 415 +++++++++++++++++++++++++++++++ src/views/form/theme.vue | 52 +++- 6 files changed, 525 insertions(+), 22 deletions(-) create mode 100644 src/views/form/setting.vue diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue index 1cc71b8..527593d 100644 --- a/src/components/parser/Parser.vue +++ b/src/components/parser/Parser.vue @@ -18,13 +18,19 @@ const layouts = { colFormItem(h, scheme) { const config = scheme.__config__ const listeners = buildListeners.call(this, scheme) - + const { formConfCopy ,serialNumber} = this let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null if (config.showLabel === false) labelWidth = '0' + let label=config.label + if(formConfCopy.showNumber){ + this.serialNumber=this.serialNumber+1 + label=serialNumber +': ' + label + } + return ( + label={config.showLabel ? label : ''}> @@ -71,6 +77,11 @@ function renderFrom(h) { function formBtns(h) { const { formConfCopy } = this + let style={ + 'background-color':formConfCopy.submitBtnColor, + 'border-color':formConfCopy.submitBtnColor + } + let btnSpan=24 if(formConfCopy.resetBtn){ return @@ -86,10 +97,10 @@ function formBtns(h) { } return - - - - 提交 + + + + {this.formConfCopy.submitBtnText} @@ -157,6 +168,7 @@ export default { }, data() { const data = { + serialNumber: 1,//序号 formConfCopy: deepClone(this.formConf), [this.formConf.formModel]: {}, [this.formConf.formRules]: {} diff --git a/src/views/form/PreView.vue b/src/views/form/PreView.vue index f5269a3..77d6298 100644 --- a/src/views/form/PreView.vue +++ b/src/views/form/PreView.vue @@ -43,7 +43,8 @@ export default { mobilePreviewUrl: '', projectConfig: { projectKey: '', - showBtns: false + preview: true, + showBtns: true } } }, diff --git a/src/views/form/ProjectForm.vue b/src/views/form/ProjectForm.vue index 61fb106..b99b3f3 100644 --- a/src/views/form/ProjectForm.vue +++ b/src/views/form/ProjectForm.vue @@ -1,5 +1,7 @@ + + diff --git a/src/views/form/theme.vue b/src/views/form/theme.vue index 928919f..e27db05 100644 --- a/src/views/form/theme.vue +++ b/src/views/form/theme.vue @@ -21,7 +21,7 @@ 全部 背景类型 - + 颜色 图片 @@ -131,7 +137,10 @@ 选择颜色 - + @@ -146,6 +155,7 @@ ref="upload" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" :headers="getUploadHeader" + :on-success="uploadBackgroundHandle" action="/user/file/upload" :show-file-list="false"> 上传背景 @@ -169,7 +179,10 @@ 按钮提示文字 - + @@ -237,7 +250,8 @@ export default { showTitle: true, showDescribe: true, showNumber: false, - background: '', + backgroundColor: '', + backgroundImg: '', logoImg: '', logoPosition: 'left', submitBtnText: '提交' @@ -276,6 +290,7 @@ export default { this.projectKey = this.$route.query.key this.queryProjectTheme() this.projectFormKey = +new Date() + this.queryUserProjectTheme() }, computed: { getUploadHeader() { @@ -285,6 +300,11 @@ export default { } }, methods: { + uploadBackgroundHandle(response, file, fileList) { + this.userProjectTheme.backgroundImg = response.data + this.userProjectTheme.backgroundColor = '' + this.saveUserTheme() + }, uploadLogoHandle(response, file, fileList) { this.userProjectTheme.logoImg = response.data this.saveUserTheme() @@ -295,11 +315,30 @@ export default { }, saveUserTheme() { this.userProjectTheme.projectKey = this.projectKey - this.userProjectTheme.themeId = this.activeTheme ? this.this.activeTheme.id : '' + this.userProjectTheme.themeId = this.activeTheme ? this.activeTheme.id : '' this.$api.post('/user/project/theme/save', this.userProjectTheme).then(res => { this.projectFormKey = +new Date() }) }, + queryUserProjectTheme() { + this.$api.post(`/user/project/theme/query/${this.projectKey}`).then(res => { + if(!res.data){ + return + } + this.userProjectTheme = res.data + let {themeId, logoImg, backgroundImg, backgroundColor, submitBtnText} = res.data + this.activeTheme = { + 'id': themeId + } + this.showSettings.logoSetting = logoImg ? true : false + this.showSettings.btnSetting = submitBtnText ? true : false + if (backgroundImg || backgroundColor) { + this.showSettings.backgroundSetting = true + this.showSettings.backgroundType = backgroundImg ? 'img' : 'color' + } + + }) + }, activeThemeHandle(item) { if (item) { this.$confirm('切换主题，系统将不会保存您在上一主题所做的修改，请知悉。', '切换主题提醒', { @@ -315,6 +354,7 @@ export default { } }, activeColorHandle(item) { + console.log(item) this.activeColor = item this.queryProjectTheme() },