From 17632466e8154b7cab97540f712850688884bf24 Mon Sep 17 00:00:00 2001 From: wangqing <250543222@qq.com> Date: Sun, 27 Dec 2020 22:40:45 +0800 Subject: [PATCH] add editor radio other fix style --- src/assets/styles/form/home.scss | 7 +- src/components/parser/Parser.vue | 67 +- src/components/render/render.js | 43 +- .../render/slots/el-checkbox-group.js | 30 +- src/components/render/slots/el-radio-group.js | 30 +- src/components/tinymce/index.vue | 3 +- src/router/modules/root.js | 2 +- src/utils/convert.js | 1 + src/views/form/DraggableItem.vue | 228 +- src/views/form/ProjectForm.vue | 2 +- src/views/form/RightPanel.vue | 1969 +++++++++-------- src/views/form/editor.vue | 2 +- src/views/project/MyProject.vue | 7 +- src/views/test.vue | 28 +- 14 files changed, 1293 insertions(+), 1126 deletions(-) diff --git a/src/assets/styles/form/home.scss b/src/assets/styles/form/home.scss index 01f3ef0..5d71f79 100644 --- a/src/assets/styles/form/home.scss +++ b/src/assets/styles/form/home.scss @@ -1,5 +1,5 @@ -$selectedColor: #f5f8ff; -$lighterBlue: #4aa0fa; +$selectedColor: #fafafa; +$lighterBlue: #e4efff; .form-edit-container { position: relative; width: 100%; @@ -55,7 +55,7 @@ $lighterBlue: #4aa0fa; left: 40px; top: 0; height: 100vh; - //background-color: rgba(255, 255, 255, 100); + } .el-menu.el-menu--horizontal { border-bottom: none; @@ -65,6 +65,7 @@ $lighterBlue: #4aa0fa; overflow: hidden; margin: 5px; border-radius: 7px; + background-color: rgba(255, 255, 255, 100); //text-align: center; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 100); diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue index aa0e903..1372b39 100644 --- a/src/components/parser/Parser.vue +++ b/src/components/parser/Parser.vue @@ -160,19 +160,44 @@ function setValue(event, config, scheme) { setValueLabel.call(this, event, config, scheme) } +/** + * radio checkbox 其他输入框值处理 + */ +function setOtherValueLabel(event, config) { + let value = this[this.formConf.formModel][config.__vModel__] + this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event) + setValueLabel.call(this, value, config.__config__, config) +} + +/** + * 保存选项的label值 + * @param event + * @param config + * @param scheme + */ function setValueLabel(event, config, scheme) { let tagOptionKey = processType[config.tag] if (tagOptionKey) { if (event instanceof Array) { - let labelStr = '' + let labelArr = new Array() event.forEach(item => { - let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item) - labelStr += label + ',' + //拼到头部 + if (item === 0) { + labelArr.push(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) + }else{ + let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item) + labelArr.push(label) + } }) - this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelStr) + this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelArr.join(',')) } else { - let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) - this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) + //多选 单选 其他自定义输入 + if (event == 0) { + this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}`, this[this.formConf.labelFormModel][`${config.__vModel__}other`]) + } else { + let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) + this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) + } } } else if (config.tag === 'el-upload') { this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event) @@ -206,7 +231,7 @@ function buildListeners(scheme) { listeners.input = event => setValue.call(this, event, config, scheme) listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList) listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList) - + listeners.selectOtherChange = (event, config) => setOtherValueLabel.call(this, event, config) return listeners } @@ -328,3 +353,31 @@ export default { } } + diff --git a/src/components/render/render.js b/src/components/render/render.js index d6b3adb..e89fb4f 100644 --- a/src/components/render/render.js +++ b/src/components/render/render.js @@ -26,29 +26,28 @@ function vModel(dataObject, defaultValue) { this.$emit('deleteUpload', file, fileList) } dataObject.attrs['on-exceed'] = (files, fileList) => { - this.$message.error(`最多上传${config.limit}个文件`); + this.$message.error(`最多上传${config.limit}个文件`) }, - dataObject.attrs['before-upload'] = (file) => { - let sizeUnitNum = 1 - //文件大小判断 - switch (config.sizeUnit) { - case 'KB': - sizeUnitNum = 1024 - break - case 'MB': - sizeUnitNum = 1024 * 1024 - break - case 'GB': - sizeUnitNum = 1024 * 1024 * 1024 - break + dataObject.attrs['before-upload'] = (file) => { + let sizeUnitNum = 1 + //文件大小判断 + switch (config.sizeUnit) { + case 'KB': + sizeUnitNum = 1024 + break + case 'MB': + sizeUnitNum = 1024 * 1024 + break + case 'GB': + sizeUnitNum = 1024 * 1024 * 1024 + break + } + let totalSize = config.fileSize * sizeUnitNum + if (file.size > totalSize) { + this.$message.error(`上传图片大小不能超过${config.fileSize}${config.sizeUnit}`) + return false + } } - let totalSize= config.fileSize*sizeUnitNum - if (file.size> totalSize) { - this.$message.error(`上传图片大小不能超过${config.fileSize}${config.sizeUnit}`); - return false - } - console.log(dataObject) - } } else { dataObject.props.value = defaultValue @@ -65,7 +64,7 @@ function mountSlotFlies(h, confClone, children) { Object.keys(childObjs).forEach(key => { const childFunc = childObjs[key] if (confClone.__slot__ && confClone.__slot__[key]) { - children.push(childFunc(h, confClone, key)) + children.push(childFunc(h, confClone, key, this)) } }) } diff --git a/src/components/render/slots/el-checkbox-group.js b/src/components/render/slots/el-checkbox-group.js index 0a85c8e..7358f2e 100644 --- a/src/components/render/slots/el-checkbox-group.js +++ b/src/components/render/slots/el-checkbox-group.js @@ -1,13 +1,21 @@ export default { - options(h, conf, key) { - const list = [] - conf.__slot__.options.forEach(item => { - if (conf.__config__.optionType === 'button') { - list.push({item.label}) - } else { - list.push({item.label}) - } - }) - return list - } + options(h, conf, key, that) { + const list = [] + conf.__slot__.options.forEach(item => { + if (conf.__config__.optionType === 'button') { + list.push({item.label}) + } else { + if (item.value == 0) { + list.push({item.label} + { + that.$emit('selectOtherChange', event.target.value, conf) + }}/>) + } else { + list.push({item.label}) + } + } + }) + return list + } } diff --git a/src/components/render/slots/el-radio-group.js b/src/components/render/slots/el-radio-group.js index c78506f..db8d095 100644 --- a/src/components/render/slots/el-radio-group.js +++ b/src/components/render/slots/el-radio-group.js @@ -1,13 +1,21 @@ export default { - options(h, conf, key) { - const list = [] - conf.__slot__.options.forEach(item => { - if (conf.__config__.optionType === 'button') { - list.push({item.label}) - } else { - list.push({item.label}) - } - }) - return list - } + options(h, conf, key, that) { + const list = [] + conf.__slot__.options.forEach(item => { + if (conf.__config__.optionType === 'button') { + list.push({item.label}) + } else { + if (item.value == 0) { + list.push( + {item.label} { + that.$emit('selectOtherChange', event.target.value,conf) + }}/> + ) + } else { + list.push({item.label}) + } + } + }) + return list + } } diff --git a/src/components/tinymce/index.vue b/src/components/tinymce/index.vue index aac036b..dacf317 100644 --- a/src/components/tinymce/index.vue +++ b/src/components/tinymce/index.vue @@ -42,10 +42,11 @@ export default { menubar: 'false', skin_url: '/tinymce/skins/ui/tduck', content_css : '/tinymce/skins/content/tduck' , - toolbar_mode:'floating', cache_suffix: '?v='+new Date(), plugins, toolbar, + toolbar_drawer:'sliding', + toolbar_mode:'sliding', height: 200, // fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", branding: false, diff --git a/src/router/modules/root.js b/src/router/modules/root.js index db82889..13490d9 100644 --- a/src/router/modules/root.js +++ b/src/router/modules/root.js @@ -2,7 +2,7 @@ export default [ { path: '/test', meta: {requireLogin: false}, - component: () => import(/* webpackChunkName: 'root' */ '@/components/tinymce/example/Index') + component: () => import(/* webpackChunkName: 'root' */ '@/views/test') }, { path: '/redirect/:type', diff --git a/src/utils/convert.js b/src/utils/convert.js index 7f39bf5..3370286 100644 --- a/src/utils/convert.js +++ b/src/utils/convert.js @@ -54,6 +54,7 @@ export function dbDataConvertForItemJson(data) { _.set(jsonItem, param[key], value) }) } + jsonItem.sort = data.sort jsonItem.typeId = data.type jsonItem.__config__.formId = data.formItemId jsonItem.__config__.label = data.label diff --git a/src/views/form/DraggableItem.vue b/src/views/form/DraggableItem.vue index 5ddc104..435089c 100644 --- a/src/views/form/DraggableItem.vue +++ b/src/views/form/DraggableItem.vue @@ -3,118 +3,154 @@ import draggable from 'vuedraggable' import render from '@/components/render/render' const components = { - itemBtns(h, currentItem, index, list) { - const { copyItem, deleteItem } = this.$listeners - return [ - { - copyItem(currentItem, list); event.stopPropagation() - }}> - + itemBtns(h, currentItem, index, list) { + const {copyItem, deleteItem} = this.$listeners + return [ + { + copyItem(currentItem, list) + event.stopPropagation() + }}> + , - { - deleteItem(index, list); event.stopPropagation() - }}> - + { + deleteItem(index, list) + event.stopPropagation() + }}> + - ] - } + ] + } } const layouts = { - colFormItem(h, currentItem, index, list) { - const { activeItem, changeLabel } = this.$listeners - const config = currentItem.__config__ - const child = renderChildren.apply(this, arguments) - let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item' - if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered' - let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null - if (config.showLabel === false) labelWidth = '0' - return ( - { activeItem(currentItem); event.stopPropagation() }}> - - { - this.$set(config, 'defaultValue', event) - }}> - {child} - - - {components.itemBtns.apply(this, arguments)} - - ) - }, - rowFormItem(h, currentItem, index, list) { - const { activeItem } = this.$listeners - const config = currentItem.__config__ - const className = this.activeId === config.formId - ? 'drawing-row-item active-from-item' - : 'drawing-row-item' - let child = renderChildren.apply(this, arguments) - if (currentItem.type === 'flex') { - child = - {child} + colFormItem(h, currentItem, index, list) { + const {activeItem, changeLabel} = this.$listeners + const config = currentItem.__config__ + const child = renderChildren.apply(this, arguments) + let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item' + if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered' + let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null + if (config.showLabel === false) labelWidth = '0' + return ( + { + activeItem(currentItem) + event.stopPropagation() + }}> + + { + this.$set(config, 'defaultValue', event) + }}> + {child} + + + {components.itemBtns.apply(this, arguments)} + + ) + }, + rowFormItem(h, currentItem, index, list) { + const {activeItem} = this.$listeners + const config = currentItem.__config__ + const className = this.activeId === config.formId + ? 'drawing-row-item active-from-item' + : 'drawing-row-item' + let child = renderChildren.apply(this, arguments) + if (currentItem.type === 'flex') { + child = + {child} - } - return ( - - { activeItem(currentItem); event.stopPropagation() }}> - {config.componentName} - + } + return ( + + { + activeItem(currentItem) + event.stopPropagation() + }}> + {config.componentName} + + {child} + + {components.itemBtns.apply(this, arguments)} + + + ) + }, + raw(h, currentItem, index, list) { + const config = currentItem.__config__ + const child = renderChildren.apply(this, arguments) + return { + this.$set(config, 'defaultValue', event) + }}> {child} - - {components.itemBtns.apply(this, arguments)} - - - ) - }, - raw(h, currentItem, index, list) { - const config = currentItem.__config__ - const child = renderChildren.apply(this, arguments) - return { - this.$set(config, 'defaultValue', event) - }}> - {child} - - } + + } } function renderChildren(h, currentItem, index, list) { - const config = currentItem.__config__ - if (!Array.isArray(config.children)) return null - return config.children.map((el, i) => { - const layout = layouts[el.__config__.layout] - if (layout) { - return layout.call(this, h, el, i, config.children) - } - return layoutIsNotFound.call(this) - }) + const config = currentItem.__config__ + if (!Array.isArray(config.children)) return null + return config.children.map((el, i) => { + const layout = layouts[el.__config__.layout] + if (layout) { + return layout.call(this, h, el, i, config.children) + } + return layoutIsNotFound.call(this) + }) } function layoutIsNotFound() { - throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`) + throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`) } export default { - components: { - render, - draggable - }, - props: [ - 'currentItem', - 'index', - 'drawingList', - 'activeId', - 'formConf' - ], - render(h) { - const layout = layouts[this.currentItem.__config__.layout] + components: { + render, + draggable + }, + props: [ + 'currentItem', + 'index', + 'drawingList', + 'activeId', + 'formConf' + ], + render(h) { + const layout = layouts[this.currentItem.__config__.layout] - if (layout) { - return layout.call(this, h, this.currentItem, this.index, this.drawingList) + if (layout) { + return layout.call(this, h, this.currentItem, this.index, this.drawingList) + } + return layoutIsNotFound.call(this) } - return layoutIsNotFound.call(this) - } } + diff --git a/src/views/form/ProjectForm.vue b/src/views/form/ProjectForm.vue index ae8fbe7..db0639e 100644 --- a/src/views/form/ProjectForm.vue +++ b/src/views/form/ProjectForm.vue @@ -17,7 +17,7 @@
+ class="form-name-text" v-html="formConf.description">
diff --git a/src/views/form/RightPanel.vue b/src/views/form/RightPanel.vue index d80bc1c..b35b022 100644 --- a/src/views/form/RightPanel.vue +++ b/src/views/form/RightPanel.vue @@ -1,1036 +1,1083 @@ diff --git a/src/views/form/editor.vue b/src/views/form/editor.vue index 5741b5c..6d7de40 100644 --- a/src/views/form/editor.vue +++ b/src/views/form/editor.vue @@ -280,9 +280,9 @@ export default { this.activeData = tempActiveData this.activeId = this.idGlobal } + this.onItemEnd(obj) }, onItemEnd(obj) { - console.log(obj) let params = {'projectKey': this.projectKey} if (this.drawingList[obj.newIndex - 1]) { let sort1 = this.drawingList[obj.newIndex - 1].sort diff --git a/src/views/project/MyProject.vue b/src/views/project/MyProject.vue index 11681bc..a199fa9 100644 --- a/src/views/project/MyProject.vue +++ b/src/views/project/MyProject.vue @@ -69,6 +69,7 @@
@@ -194,6 +195,7 @@ +