diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 5b930b0..749fa8d 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -87,16 +87,21 @@ div:focus { .flex-row { display: flex; flex-direction: row; + box-sizing: border-box; } .flex-column { display: flex; flex-direction: column; + box-sizing: border-box; } .desc-text { color: rgba(155, 155, 155, 100); font-size: 14px; text-align: left; } +.width-full { + width: 100% !important; +} .text-overflow { overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/Form/ImageSelect/index.vue b/src/components/Form/ImageSelect/index.vue index 078527e..cd20b52 100644 --- a/src/components/Form/ImageSelect/index.vue +++ b/src/components/Form/ImageSelect/index.vue @@ -82,6 +82,7 @@ export default { .el-radio-group, .el-checkbox-group { display: flex !important; + flex-wrap: wrap; } .img-radio-item { display: flex; diff --git a/src/components/Form/ImageSelect1/index.vue b/src/components/Form/ImageSelect1/index.vue deleted file mode 100644 index 334c670..0000000 --- a/src/components/Form/ImageSelect1/index.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - diff --git a/src/components/Form/index.js b/src/components/Form/index.js index d326e2a..31fb11f 100644 --- a/src/components/Form/index.js +++ b/src/components/Form/index.js @@ -1,10 +1,8 @@ const ImageSelect = require('./ImageSelect/index').default -const ImageSelect1 = require('./ImageSelect1/index').default const DescText = require('./DescText/index').default export default { install: Vue => { Vue.component(ImageSelect.name, ImageSelect) - Vue.component(ImageSelect1.name, ImageSelect1) Vue.component(DescText.name, DescText) } } diff --git a/src/components/generator/config.js b/src/components/generator/config.js index 5ed558e..ba61b71 100644 --- a/src/components/generator/config.js +++ b/src/components/generator/config.js @@ -80,38 +80,6 @@ export const inputComponents = [ readonly: false, disabled: false }, - // }, - // { - // typeId: 3, - // __config__: { - // label: '密码', - // showLabel: true, - // labelWidth: null, - // changeTag: true, - // tag: 'el-input', - // tagIcon: 'password', - // defaultValue: undefined, - // layout: 'colFormItem', - // span: 24, - // required: true, - // regList: [], - // document: 'https://element.eleme.cn/#/zh-CN/component/input' - // }, - // __slot__: { - // prepend: '', - // append: '' - // }, - // placeholder: '请输入', - // 'show-password': true, - // style: {width: '100%'}, - // clearable: true, - // 'prefix-icon': '', - // 'suffix-icon': '', - // maxlength: null, - // 'show-word-limit': false, - // readonly: false, - // disabled: false - // }, { typeId: 'NUMBER_INPUT', __config__: { @@ -224,6 +192,7 @@ export const selectComponents = [ label: '单选框组', labelWidth: null, showLabel: true, + showRegList: false, tag: 'el-radio-group', tagIcon: 'radio', changeTag: true, @@ -258,6 +227,7 @@ export const selectComponents = [ defaultValue: [], span: 24, showLabel: true, + showRegList: false, labelWidth: null, layout: 'colFormItem', optionType: 'default', @@ -290,6 +260,7 @@ export const selectComponents = [ tagIcon: 'switch', defaultValue: false, span: 24, + showRegList: false, showLabel: true, labelWidth: null, layout: 'colFormItem', @@ -314,6 +285,7 @@ export const selectComponents = [ tag: 'el-slider', tagIcon: 'slider', defaultValue: null, + showRegList: false, span: 24, showLabel: true, layout: 'colFormItem', @@ -339,6 +311,7 @@ export const selectComponents = [ defaultValue: null, span: 24, showLabel: true, + showRegList: false, layout: 'colFormItem', labelWidth: null, required: true, @@ -414,6 +387,7 @@ export const selectComponents = [ tag: 'el-date-picker', tagIcon: 'date-range', defaultValue: null, + showRegList: false, span: 24, showLabel: true, labelWidth: null, @@ -443,6 +417,7 @@ export const selectComponents = [ defaultValue: 0, span: 24, showLabel: true, + showRegList: false, labelWidth: null, layout: 'colFormItem', required: true, @@ -466,6 +441,7 @@ export const selectComponents = [ span: 24, defaultValue: null, showLabel: true, + showRegList: false, labelWidth: null, layout: 'colFormItem', required: true, @@ -487,6 +463,7 @@ export const selectComponents = [ layout: 'colFormItem', defaultValue: null, showLabel: true, + showRegList: false, labelWidth: null, required: true, span: 24, @@ -541,16 +518,43 @@ export const imageComponents = [ alt: '' }, { - typeId: 'IMAGE', + typeId: 'IMAGE_CAROUSEL', __config__: { - label: '图片选择', - showLabel: false, + label: '图片轮播', + showLabel: true, labelWidth: null, - defaultValue: 1, + defaultValue: null, showDefaultValue: false, showRequired: false, showClearable: false, showRegList: false, + tag: 'el-carousel', + tagIcon: 'image', + layout: 'colFormItem', + span: 24, + required: true, + regList: [], + changeTag: true + }, + __slot__: { + options: [{ + label: '文字', + image: 'https://qiniu.smileyi.top/757b505cfd34c64c85ca5b5690ee5293/b128cf03901945d6b6df46cf6acbfa01.jpg' + }] + }, + style: {width: '100%'} + }, + { + typeId: 'IMAGE_SELECT', + __config__: { + label: '图片选择', + showLabel: true, + labelWidth: null, + defaultValue: null, + showDefaultValue: true, + showRequired: true, + showClearable: false, + showRegList: false, tag: 'image-select', tagIcon: 'image', layout: 'colFormItem', @@ -560,128 +564,12 @@ export const imageComponents = [ changeTag: true }, multiple: false, - options: [{ - label: '选项2', - value: 1 - }, { - label: '选项二', - value: 2 - }], + __slot__: { + options: [{ + label: '选项1', + value: 1 + }] + }, style: {width: '100%'} } ] - -// // 布局型组件 【左面板】 -// export const layoutComponents = [ -// { -// __config__: { -// layout: 'rowFormItem', -// tagIcon: 'row', -// label: '行容器', -// layoutTree: true, -// document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes' -// }, -// type: 'default', -// justify: 'start', -// align: 'top' -// }, -// { -// __config__: { -// label: '按钮', -// showLabel: true, -// changeTag: true, -// labelWidth: null, -// tag: 'el-button', -// tagIcon: 'button', -// span: 24, -// layout: 'colFormItem', -// document: 'https://element.eleme.cn/#/zh-CN/component/button' -// }, -// __slot__: { -// default: '主要按钮' -// }, -// type: 'primary', -// icon: 'el-icon-search', -// round: false, -// size: 'medium', -// plain: false, -// circle: false, -// disabled: false -// }, -// { -// __config__: { -// layout: 'colFormItem', -// tagIcon: 'table', -// tag: 'el-table', -// document: 'https://element.eleme.cn/#/zh-CN/component/table', -// span: 24, -// formId: 101, -// renderKey: 1595761764203, -// componentName: 'row101', -// showLabel: true, -// changeTag: true, -// labelWidth: null, -// label: '表格[开发中]', -// children: [{ -// __config__: { -// layout: 'raw', -// tag: 'el-table-column', -// renderKey: 15957617660153 -// }, -// prop: 'date', -// label: '日期' -// }, { -// __config__: { -// layout: 'raw', -// tag: 'el-table-column', -// renderKey: 15957617660152 -// }, -// prop: 'address', -// label: '地址' -// }, { -// __config__: { -// layout: 'raw', -// tag: 'el-table-column', -// renderKey: 15957617660151 -// }, -// prop: 'name', -// label: '名称' -// }, { -// __config__: { -// layout: 'raw', -// tag: 'el-table-column', -// renderKey: 1595774496335, -// children: [ -// { -// __config__: { -// label: '按钮', -// tag: 'el-button', -// tagIcon: 'button', -// layout: 'raw', -// renderKey: 1595779809901 -// }, -// __slot__: { -// default: '主要按钮' -// }, -// type: 'primary', -// icon: 'el-icon-search', -// round: false, -// size: 'medium' -// } -// ] -// }, -// label: '操作' -// }] -// }, -// data: [{ -// date: '2016-05-02', -// name: '王小虎', -// address: '上海市普陀区金沙江路 1518 弄' -// }], -// border: true, -// type: 'default', -// justify: 'start', -// align: 'top' -// } -// ] -// diff --git a/src/components/render/slots/el-carousel.js b/src/components/render/slots/el-carousel.js new file mode 100644 index 0000000..54ba8ae --- /dev/null +++ b/src/components/render/slots/el-carousel.js @@ -0,0 +1,13 @@ +export default { + options(h, conf, key) { + const list = [] + let style = 'height: 100%;' + conf.__slot__.options.forEach(item => { + list.push( + {item.label} + + ) + }) + return list + } +} diff --git a/src/router/modules/form.js b/src/router/modules/form.js index 6507d4c..c1550a3 100644 --- a/src/router/modules/form.js +++ b/src/router/modules/form.js @@ -34,6 +34,11 @@ export default [ meta: {requireLogin: true}, component: () => import(/* webpackChunkName: 'root' */ '@/views/form/publish') }, + { + path: 'theme', + meta: {requireLogin: true}, + component: () => import(/* webpackChunkName: 'root' */ '@/views/form/theme') + }, { path: 'statistics', meta: {requireLogin: true}, diff --git a/src/utils/convert.js b/src/utils/convert.js index ebcf908..d5483d1 100644 --- a/src/utils/convert.js +++ b/src/utils/convert.js @@ -168,6 +168,15 @@ const dataParams = { 'IMAGE': { 'src': 'src', 'alt': 'alt' + }, + // 图片选择 + 'IMAGE_SELECT': { + 'options': '__slot__.options', + 'multiple': 'multiple' + }, + // 图片轮播 + 'IMAGE_CAROUSEL': { + 'options': '__slot__.options' } } diff --git a/src/views/account/login.vue b/src/views/account/login.vue index 1ef1766..dee0cfd 100644 --- a/src/views/account/login.vue +++ b/src/views/account/login.vue @@ -507,9 +507,6 @@ export default { .code-input { width: 150px; } -.width-full { - width: 100%; -} .account-login-form { text-align: left; } diff --git a/src/views/form/RightPanel.vue b/src/views/form/RightPanel.vue index 60c5235..953c252 100644 --- a/src/views/form/RightPanel.vue +++ b/src/views/form/RightPanel.vue @@ -1,7 +1,7 @@ + @@ -444,40 +502,40 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -724,6 +785,7 @@ export default { props: ['showField', 'activeData', 'formConf'], data() { return { + loading:null, currentTab: 'field', currentNode: null, dialogVisible: false, @@ -894,17 +956,22 @@ export default { }) }, addSelectItem() { - this.activeData.__slot__.options.push({ label: '', value: this.activeData.__slot__.options.length + 1 }) }, + addImageSelectItem() { + this.activeData.__slot__.options.push({ + label: '', + image: '', + value: this.activeData.__slot__.options.length + 1 + }) + }, addSelectOtherItem() { let item = this.activeData.__slot__.options.find(item => { return item.value == 0 }) - console.log(item) if (item) { return } @@ -913,6 +980,19 @@ export default { value: 0 }) }, + uploadProgressHandle() { + this.loading = this.$loading({ + lock: true, + text: '上传中', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }) + }, + closeUploadProgressHandle(){ + setTimeout(() => { + this.loading.close(); + }, 100); + }, addTreeItem() { ++this.idGlobal this.dialogVisible = true @@ -924,12 +1004,12 @@ export default { {node.label} this.append(data)} - class="el-icon-plus" - title="添加" + class="el-icon-plus" + title="添加" > this.remove(node, data)} - class="el-icon-delete" - title="删除" + class="el-icon-delete" + title="删除" > @@ -1076,6 +1156,7 @@ export default { display: flex; border: 1px dashed #fff; box-sizing: border-box; + align-items: center; & .close-btn { cursor: pointer; color: #f56c6c; diff --git a/src/views/form/newIndex.vue b/src/views/form/newIndex.vue index e43a667..9517b66 100644 --- a/src/views/form/newIndex.vue +++ b/src/views/form/newIndex.vue @@ -56,10 +56,10 @@ export default { title: '逻辑', icon: 'el-icon-menu', route: '/project/form/logic' - }, { - title: '预览', + }, { + title: '外观', icon: 'el-icon-view', - route: '/project/form/preview' + route: '/project/form/theme' }, { title: '设置', diff --git a/src/views/form/publish.vue b/src/views/form/publish.vue index ed4d3e4..1f87b11 100644 --- a/src/views/form/publish.vue +++ b/src/views/form/publish.vue @@ -75,7 +75,6 @@