Pre Merge pull request !1007 from dyz/master
dyz
Gitee
commit
5028a60edf
|
|
@ -1,29 +1,37 @@
|
|||
export default [
|
||||
{
|
||||
layout: 'colFormItem',
|
||||
tagIcon: 'input',
|
||||
label: '手机号',
|
||||
vModel: 'mobile',
|
||||
formId: 6,
|
||||
tag: 'el-input',
|
||||
placeholder: '请输入手机号',
|
||||
defaultValue: '',
|
||||
span: 24,
|
||||
style: { width: '100%' },
|
||||
clearable: true,
|
||||
prepend: '',
|
||||
append: '',
|
||||
'prefix-icon': 'el-icon-mobile',
|
||||
'suffix-icon': '',
|
||||
maxlength: 11,
|
||||
'show-word-limit': true,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
required: true,
|
||||
changeTag: true,
|
||||
regList: [{
|
||||
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
|
||||
message: '手机号格式错误'
|
||||
}]
|
||||
export const drawingDefaultValue = []
|
||||
|
||||
export function initDrawingDefaultValue() {
|
||||
if (drawingDefaultValue.length === 0) {
|
||||
drawingDefaultValue.push({
|
||||
layout: 'colFormItem',
|
||||
tagIcon: 'input',
|
||||
label: '手机号',
|
||||
vModel: 'mobile',
|
||||
formId: 6,
|
||||
tag: 'el-input',
|
||||
placeholder: '请输入手机号',
|
||||
defaultValue: '',
|
||||
span: 24,
|
||||
style: {width: '100%'},
|
||||
clearable: true,
|
||||
prepend: '',
|
||||
append: '',
|
||||
'prefix-icon': 'el-icon-mobile',
|
||||
'suffix-icon': '',
|
||||
maxlength: 11,
|
||||
'show-word-limit': true,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
required: true,
|
||||
changeTag: true,
|
||||
regList: [{
|
||||
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
|
||||
message: '手机号格式错误'
|
||||
}]
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export function cleanDrawingDefaultValue() {
|
||||
drawingDefaultValue.splice(0, drawingDefaultValue.length)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
<el-scrollbar class="left-scrollbar">
|
||||
<div class="components-list">
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" />输入型组件
|
||||
<svg-icon icon-class="component"/>
|
||||
输入型组件
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
|
|
@ -25,13 +26,14 @@
|
|||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.tagIcon" />
|
||||
<svg-icon :icon-class="element.tagIcon"/>
|
||||
{{ element.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" />选择型组件
|
||||
<svg-icon icon-class="component"/>
|
||||
选择型组件
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
|
|
@ -49,13 +51,14 @@
|
|||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.tagIcon" />
|
||||
<svg-icon :icon-class="element.tagIcon"/>
|
||||
{{ element.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" /> 布局型组件
|
||||
<svg-icon icon-class="component"/>
|
||||
布局型组件
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable" :list="layoutComponents"
|
||||
|
|
@ -67,7 +70,7 @@
|
|||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.tagIcon" />
|
||||
<svg-icon :icon-class="element.tagIcon"/>
|
||||
{{ element.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,12 +144,12 @@ import beautifier from 'js-beautify'
|
|||
import ClipboardJS from 'clipboard'
|
||||
import render from '@/utils/generator/render'
|
||||
import RightPanel from './RightPanel'
|
||||
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
|
||||
import { beautifierConf, titleCase } from '@/utils/index'
|
||||
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
|
||||
import { makeUpJs } from '@/utils/generator/js'
|
||||
import { makeUpCss } from '@/utils/generator/css'
|
||||
import drawingDefault from '@/utils/generator/drawingDefault'
|
||||
import {inputComponents, selectComponents, layoutComponents, formConf} from '@/utils/generator/config'
|
||||
import {beautifierConf, titleCase} from '@/utils/index'
|
||||
import {makeUpHtml, vueTemplate, vueScript, cssStyle} from '@/utils/generator/html'
|
||||
import {makeUpJs} from '@/utils/generator/js'
|
||||
import {makeUpCss} from '@/utils/generator/css'
|
||||
import {drawingDefaultValue, initDrawingDefaultValue,cleanDrawingDefaultValue} from '@/utils/generator/drawingDefault'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
import CodeTypeDialog from './CodeTypeDialog'
|
||||
import DraggableItem from './DraggableItem'
|
||||
|
|
@ -162,6 +165,9 @@ export default {
|
|||
CodeTypeDialog,
|
||||
DraggableItem
|
||||
},
|
||||
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
|
|
@ -171,18 +177,24 @@ export default {
|
|||
selectComponents,
|
||||
layoutComponents,
|
||||
labelWidth: 100,
|
||||
drawingList: drawingDefault,
|
||||
// drawingList: JSON.parse(JSON.stringify(drawingDefault)),
|
||||
drawingList: drawingDefaultValue,
|
||||
drawingData: {},
|
||||
activeId: drawingDefault[0].formId,
|
||||
activeId: drawingDefaultValue[0].formId,
|
||||
drawerVisible: false,
|
||||
formData: {},
|
||||
dialogVisible: false,
|
||||
generateConf: null,
|
||||
showFileName: false,
|
||||
activeData: drawingDefault[0]
|
||||
activeData: drawingDefaultValue[0]
|
||||
}
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
initDrawingDefaultValue()
|
||||
},
|
||||
created() {
|
||||
|
||||
// 防止 firefox 下 拖拽 会新打卡一个选项卡
|
||||
document.body.ondrop = event => {
|
||||
event.preventDefault()
|
||||
|
|
@ -274,16 +286,17 @@ export default {
|
|||
},
|
||||
execDownload(data) {
|
||||
const codeStr = this.generateCode()
|
||||
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
||||
const blob = new Blob([codeStr], {type: 'text/plain;charset=utf-8'})
|
||||
this.$download.saveAs(blob, data.fileName)
|
||||
},
|
||||
execCopy(data) {
|
||||
document.getElementById('copyNode').click()
|
||||
},
|
||||
empty() {
|
||||
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
|
||||
this.$confirm('确定要清空所有组件吗？', '提示', {type: 'warning'}).then(
|
||||
() => {
|
||||
this.drawingList = []
|
||||
cleanDrawingDefaultValue()
|
||||
}
|
||||
)
|
||||
},
|
||||
|
|
@ -316,7 +329,7 @@ export default {
|
|||
})
|
||||
},
|
||||
generateCode() {
|
||||
const { type } = this.generateConf
|
||||
const {type} = this.generateConf
|
||||
this.AssembleFormData()
|
||||
const script = vueScript(makeUpJs(this.formData, type))
|
||||
const html = vueTemplate(makeUpHtml(this.formData, type))
|
||||
|
|
@ -370,16 +383,19 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.editor-tabs{
|
||||
.editor-tabs {
|
||||
background: #121315;
|
||||
.el-tabs__header{
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
border-bottom-color: #121315;
|
||||
.el-tabs__nav{
|
||||
|
||||
.el-tabs__nav {
|
||||
border-color: #121315;
|
||||
}
|
||||
}
|
||||
.el-tabs__item{
|
||||
|
||||
.el-tabs__item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #888a8e;
|
||||
|
|
@ -388,15 +404,18 @@ export default {
|
|||
margin-right: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
.el-tabs__item.is-active{
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
background: #1e1e1e;
|
||||
border-bottom-color: #1e1e1e!important;
|
||||
border-bottom-color: #1e1e1e !important;
|
||||
color: #fff;
|
||||
}
|
||||
.el-icon-edit{
|
||||
|
||||
.el-icon-edit {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
.el-icon-document{
|
||||
|
||||
.el-icon-document {
|
||||
color: #a95812;
|
||||
}
|
||||
}
|
||||
|
|
@ -407,29 +426,35 @@ export default {
|
|||
padding: 12px 18px 15px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-scrollbar .el-scrollbar__wrap {
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.center-tabs{
|
||||
.el-tabs__header{
|
||||
margin-bottom: 0!important;
|
||||
|
||||
.center-tabs {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.el-tabs__item{
|
||||
|
||||
.el-tabs__item {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
|
||||
.el-tabs__nav {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.reg-item{
|
||||
|
||||
.reg-item {
|
||||
padding: 12px 6px;
|
||||
background: #f8f8f8;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
.close-btn{
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
|
|
@ -444,18 +469,22 @@ export default {
|
|||
z-index: 1;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background: rgba(210, 23, 23, 0.5)
|
||||
}
|
||||
}
|
||||
& + .reg-item{
|
||||
|
||||
& + .reg-item {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
.action-bar{
|
||||
& .el-button+.el-button {
|
||||
|
||||
.action-bar {
|
||||
& .el-button + .el-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
& i {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
|
|
@ -464,32 +493,37 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.custom-tree-node{
|
||||
.custom-tree-node {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
.node-operation{
|
||||
|
||||
.node-operation {
|
||||
float: right;
|
||||
}
|
||||
i[class*="el-icon"] + i[class*="el-icon"]{
|
||||
|
||||
i[class*="el-icon"] + i[class*="el-icon"] {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.el-icon-plus{
|
||||
|
||||
.el-icon-plus {
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-delete{
|
||||
|
||||
.el-icon-delete {
|
||||
color: #157a0c;
|
||||
}
|
||||
}
|
||||
|
||||
.left-scrollbar .el-scrollbar__view{
|
||||
.left-scrollbar .el-scrollbar__view {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-rate{
|
||||
.el-rate {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.el-upload__tip{
|
||||
|
||||
.el-upload__tip {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
|
@ -506,6 +540,7 @@ $lighterBlue: #409EFF;
|
|||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
.components-item {
|
||||
display: inline-block;
|
||||
width: 48%;
|
||||
|
|
@ -513,14 +548,17 @@ $lighterBlue: #409EFF;
|
|||
transition: transform 0ms !important;
|
||||
}
|
||||
}
|
||||
.components-draggable{
|
||||
|
||||
.components-draggable {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.components-title{
|
||||
|
||||
.components-title {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
margin: 6px 2px;
|
||||
.svg-icon{
|
||||
|
||||
.svg-icon {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
@ -533,13 +571,16 @@ $lighterBlue: #409EFF;
|
|||
cursor: move;
|
||||
border: 1px dashed $selectedColor;
|
||||
border-radius: 3px;
|
||||
.svg-icon{
|
||||
|
||||
.svg-icon {
|
||||
color: #777;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px dashed #787be8;
|
||||
color: #787be8;
|
||||
|
||||
.svg-icon {
|
||||
color: #787be8;
|
||||
}
|
||||
|
|
@ -553,10 +594,12 @@ $lighterBlue: #409EFF;
|
|||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
.left-scrollbar{
|
||||
|
||||
.left-scrollbar {
|
||||
height: calc(100vh - 42px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.center-scrollbar {
|
||||
height: calc(100vh - 42px);
|
||||
overflow: hidden;
|
||||
|
|
@ -564,13 +607,15 @@ $lighterBlue: #409EFF;
|
|||
border-right: 1px solid #f1e8e8;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.center-board {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
margin: 0 350px 0 260px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.empty-info{
|
||||
|
||||
.empty-info {
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
left: 0;
|
||||
|
|
@ -580,7 +625,8 @@ $lighterBlue: #409EFF;
|
|||
color: #ccb1ea;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.action-bar{
|
||||
|
||||
.action-bar {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
text-align: right;
|
||||
|
|
@ -589,18 +635,21 @@ $lighterBlue: #409EFF;
|
|||
border: 1px solid #f1e8e8;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
.delete-btn{
|
||||
|
||||
.delete-btn {
|
||||
color: #F56C6C;
|
||||
}
|
||||
}
|
||||
.logo-wrapper{
|
||||
|
||||
.logo-wrapper {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f1e8e8;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.logo{
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 6px;
|
||||
|
|
@ -609,16 +658,19 @@ $lighterBlue: #409EFF;
|
|||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
> img{
|
||||
|
||||
> img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.github{
|
||||
|
||||
.github {
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
margin-left: 15px;
|
||||
> img{
|
||||
|
||||
> img {
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
|
@ -627,23 +679,28 @@ $lighterBlue: #409EFF;
|
|||
.center-board-row {
|
||||
padding: 12px 12px 15px 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > .el-form {
|
||||
// 69 = 12+15+42
|
||||
height: calc(100vh - 69px);
|
||||
}
|
||||
}
|
||||
|
||||
.drawing-board {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.components-body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
|
|
@ -655,38 +712,47 @@ $lighterBlue: #409EFF;
|
|||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.components-item.sortable-ghost {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: $selectedColor;
|
||||
}
|
||||
|
||||
.active-from-item {
|
||||
& > .el-form-item{
|
||||
& > .el-form-item {
|
||||
background: $selectedColor;
|
||||
border-radius: 6px;
|
||||
}
|
||||
& > .drawing-item-copy, & > .drawing-item-delete{
|
||||
|
||||
& > .drawing-item-copy, & > .drawing-item-delete {
|
||||
display: initial;
|
||||
}
|
||||
& > .component-name{
|
||||
|
||||
& > .component-name {
|
||||
color: $lighterBlue;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.drawing-item{
|
||||
|
||||
.drawing-item {
|
||||
position: relative;
|
||||
cursor: move;
|
||||
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
|
||||
|
||||
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
|
||||
border: 1px dashed #ccc;
|
||||
}
|
||||
.el-form-item{
|
||||
|
||||
.el-form-item {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
.drawing-row-item{
|
||||
|
||||
.drawing-row-item {
|
||||
position: relative;
|
||||
cursor: move;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -694,22 +760,28 @@ $lighterBlue: #409EFF;
|
|||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.drawing-row-item {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.el-col{
|
||||
|
||||
.el-col {
|
||||
margin-top: 22px;
|
||||
}
|
||||
.el-form-item{
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.drag-wrapper{
|
||||
|
||||
.drag-wrapper {
|
||||
min-height: 80px;
|
||||
}
|
||||
&.active-from-item{
|
||||
|
||||
&.active-from-item {
|
||||
border: 1px dashed $lighterBlue;
|
||||
}
|
||||
.component-name{
|
||||
|
||||
.component-name {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -719,17 +791,20 @@ $lighterBlue: #409EFF;
|
|||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
.drawing-item, .drawing-row-item{
|
||||
|
||||
.drawing-item, .drawing-row-item {
|
||||
&:hover {
|
||||
& > .el-form-item{
|
||||
& > .el-form-item {
|
||||
background: $selectedColor;
|
||||
border-radius: 6px;
|
||||
}
|
||||
& > .drawing-item-copy, & > .drawing-item-delete{
|
||||
|
||||
& > .drawing-item-copy, & > .drawing-item-delete {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
& > .drawing-item-copy, & > .drawing-item-delete{
|
||||
|
||||
& > .drawing-item-copy, & > .drawing-item-delete {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
|
|
@ -743,22 +818,26 @@ $lighterBlue: #409EFF;
|
|||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
& > .drawing-item-copy{
|
||||
|
||||
& > .drawing-item-copy {
|
||||
right: 56px;
|
||||
border-color: $lighterBlue;
|
||||
color: $lighterBlue;
|
||||
background: #fff;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background: $lighterBlue;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
& > .drawing-item-delete{
|
||||
|
||||
& > .drawing-item-delete {
|
||||
right: 24px;
|
||||
border-color: #F56C6C;
|
||||
color: #F56C6C;
|
||||
background: #fff;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background: #F56C6C;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue