|
|
|
|
@ -2,9 +2,7 @@
|
|
|
|
|
<div class="container"> |
|
|
|
|
<div class="left-board"> |
|
|
|
|
<div class="logo-wrapper"> |
|
|
|
|
<div class="logo"> |
|
|
|
|
<img :src="logo" alt="logo"> Form Generator |
|
|
|
|
</div> |
|
|
|
|
<div class="logo"><img :src="logo" alt="logo" /> Form Generator</div> |
|
|
|
|
</div> |
|
|
|
|
<el-scrollbar class="left-scrollbar"> |
|
|
|
|
<div class="components-list"> |
|
|
|
|
@ -21,7 +19,9 @@
|
|
|
|
|
@end="onEnd" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
v-for="(element, index) in inputComponents" :key="index" class="components-item" |
|
|
|
|
v-for="(element, index) in inputComponents" |
|
|
|
|
:key="index" |
|
|
|
|
class="components-item" |
|
|
|
|
@click="addComponent(element)" |
|
|
|
|
> |
|
|
|
|
<div class="components-body"> |
|
|
|
|
@ -58,12 +58,18 @@
|
|
|
|
|
<svg-icon icon-class="component" /> 布局型组件 |
|
|
|
|
</div> |
|
|
|
|
<draggable |
|
|
|
|
class="components-draggable" :list="layoutComponents" |
|
|
|
|
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" |
|
|
|
|
draggable=".components-item" :sort="false" @end="onEnd" |
|
|
|
|
class="components-draggable" |
|
|
|
|
:list="layoutComponents" |
|
|
|
|
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" |
|
|
|
|
:clone="cloneComponent" |
|
|
|
|
draggable=".components-item" |
|
|
|
|
:sort="false" |
|
|
|
|
@end="onEnd" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
v-for="(element, index) in layoutComponents" :key="index" class="components-item" |
|
|
|
|
v-for="(element, index) in layoutComponents" |
|
|
|
|
:key="index" |
|
|
|
|
class="components-item" |
|
|
|
|
@click="addComponent(element)" |
|
|
|
|
> |
|
|
|
|
<div class="components-body"> |
|
|
|
|
@ -81,10 +87,20 @@
|
|
|
|
|
<el-button icon="el-icon-download" type="text" @click="download"> |
|
|
|
|
导出vue文件 |
|
|
|
|
</el-button> |
|
|
|
|
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy"> |
|
|
|
|
<el-button |
|
|
|
|
class="copy-btn-main" |
|
|
|
|
icon="el-icon-document-copy" |
|
|
|
|
type="text" |
|
|
|
|
@click="copy" |
|
|
|
|
> |
|
|
|
|
复制代码 |
|
|
|
|
</el-button> |
|
|
|
|
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty"> |
|
|
|
|
<el-button |
|
|
|
|
class="delete-btn" |
|
|
|
|
icon="el-icon-delete" |
|
|
|
|
type="text" |
|
|
|
|
@click="empty" |
|
|
|
|
> |
|
|
|
|
清空 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
@ -96,7 +112,12 @@
|
|
|
|
|
:disabled="formConf.disabled" |
|
|
|
|
:label-width="formConf.labelWidth + 'px'" |
|
|
|
|
> |
|
|
|
|
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"> |
|
|
|
|
<draggable |
|
|
|
|
class="drawing-board" |
|
|
|
|
:list="drawingList" |
|
|
|
|
:animation="340" |
|
|
|
|
group="componentsGroup" |
|
|
|
|
> |
|
|
|
|
<draggable-item |
|
|
|
|
v-for="(element, index) in drawingList" |
|
|
|
|
:key="element.renderKey" |
|
|
|
|
@ -131,28 +152,38 @@
|
|
|
|
|
:show-file-name="showFileName" |
|
|
|
|
@confirm="generate" |
|
|
|
|
/> |
|
|
|
|
<input id="copyNode" type="hidden"> |
|
|
|
|
<input id="copyNode" type="hidden" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import draggable from 'vuedraggable' |
|
|
|
|
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 logo from '@/assets/logo/logo.png' |
|
|
|
|
import CodeTypeDialog from './CodeTypeDialog' |
|
|
|
|
import DraggableItem from './DraggableItem' |
|
|
|
|
import draggable from "vuedraggable"; |
|
|
|
|
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 logo from "@/assets/logo/logo.png"; |
|
|
|
|
import CodeTypeDialog from "./CodeTypeDialog"; |
|
|
|
|
import DraggableItem from "./DraggableItem"; |
|
|
|
|
|
|
|
|
|
let oldActiveId |
|
|
|
|
let tempActiveData |
|
|
|
|
let oldActiveId; |
|
|
|
|
let tempActiveData; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
@ -160,7 +191,7 @@ export default {
|
|
|
|
|
render, |
|
|
|
|
RightPanel, |
|
|
|
|
CodeTypeDialog, |
|
|
|
|
DraggableItem |
|
|
|
|
DraggableItem, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
@ -179,208 +210,214 @@ export default {
|
|
|
|
|
dialogVisible: false, |
|
|
|
|
generateConf: null, |
|
|
|
|
showFileName: false, |
|
|
|
|
activeData: drawingDefault[0] |
|
|
|
|
} |
|
|
|
|
activeData: drawingDefault[0], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
// 防止 firefox 下 拖拽 会新打卡一个选项卡 |
|
|
|
|
document.body.ondrop = event => { |
|
|
|
|
event.preventDefault() |
|
|
|
|
event.stopPropagation() |
|
|
|
|
} |
|
|
|
|
document.body.ondrop = (event) => { |
|
|
|
|
event.preventDefault(); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
// eslint-disable-next-line func-names |
|
|
|
|
'activeData.label': function (val, oldVal) { |
|
|
|
|
"activeData.label": function (val, oldVal) { |
|
|
|
|
if ( |
|
|
|
|
this.activeData.placeholder === undefined |
|
|
|
|
|| !this.activeData.tag |
|
|
|
|
|| oldActiveId !== this.activeId |
|
|
|
|
this.activeData.placeholder === undefined || |
|
|
|
|
!this.activeData.tag || |
|
|
|
|
oldActiveId !== this.activeId |
|
|
|
|
) { |
|
|
|
|
return |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val |
|
|
|
|
this.activeData.placeholder = |
|
|
|
|
this.activeData.placeholder.replace(oldVal, "") + val; |
|
|
|
|
}, |
|
|
|
|
activeId: { |
|
|
|
|
handler(val) { |
|
|
|
|
oldActiveId = val |
|
|
|
|
oldActiveId = val; |
|
|
|
|
}, |
|
|
|
|
immediate: true |
|
|
|
|
} |
|
|
|
|
immediate: true, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
const clipboard = new ClipboardJS('#copyNode', { |
|
|
|
|
text: trigger => { |
|
|
|
|
const codeStr = this.generateCode() |
|
|
|
|
const clipboard = new ClipboardJS("#copyNode", { |
|
|
|
|
text: (trigger) => { |
|
|
|
|
const codeStr = this.generateCode(); |
|
|
|
|
this.$notify({ |
|
|
|
|
title: '成功', |
|
|
|
|
message: '代码已复制到剪切板，可粘贴。', |
|
|
|
|
type: 'success' |
|
|
|
|
}) |
|
|
|
|
return codeStr |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
clipboard.on('error', e => { |
|
|
|
|
this.$message.error('代码复制失败') |
|
|
|
|
}) |
|
|
|
|
title: "成功", |
|
|
|
|
message: "代码已复制到剪切板，可粘贴。", |
|
|
|
|
type: "success", |
|
|
|
|
}); |
|
|
|
|
return codeStr; |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
clipboard.on("error", (e) => { |
|
|
|
|
this.$message.error("代码复制失败"); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
activeFormItem(element) { |
|
|
|
|
this.activeData = element |
|
|
|
|
this.activeId = element.formId |
|
|
|
|
this.activeData = element; |
|
|
|
|
this.activeId = element.formId; |
|
|
|
|
}, |
|
|
|
|
onEnd(obj, a) { |
|
|
|
|
if (obj.from !== obj.to) { |
|
|
|
|
this.activeData = tempActiveData |
|
|
|
|
this.activeId = this.idGlobal |
|
|
|
|
this.activeData = tempActiveData; |
|
|
|
|
this.activeId = this.idGlobal; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
addComponent(item) { |
|
|
|
|
const clone = this.cloneComponent(item) |
|
|
|
|
this.drawingList.push(clone) |
|
|
|
|
this.activeFormItem(clone) |
|
|
|
|
const clone = this.cloneComponent(item); |
|
|
|
|
this.drawingList.push(clone); |
|
|
|
|
this.activeFormItem(clone); |
|
|
|
|
}, |
|
|
|
|
cloneComponent(origin) { |
|
|
|
|
const clone = JSON.parse(JSON.stringify(origin)) |
|
|
|
|
clone.formId = ++this.idGlobal |
|
|
|
|
clone.span = formConf.span |
|
|
|
|
clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件 |
|
|
|
|
if (!clone.layout) clone.layout = 'colFormItem' |
|
|
|
|
if (clone.layout === 'colFormItem') { |
|
|
|
|
clone.vModel = `field${this.idGlobal}` |
|
|
|
|
clone.placeholder !== undefined && (clone.placeholder += clone.label) |
|
|
|
|
tempActiveData = clone |
|
|
|
|
} else if (clone.layout === 'rowFormItem') { |
|
|
|
|
delete clone.label |
|
|
|
|
clone.componentName = `row${this.idGlobal}` |
|
|
|
|
clone.gutter = this.formConf.gutter |
|
|
|
|
tempActiveData = clone |
|
|
|
|
const clone = JSON.parse(JSON.stringify(origin)); |
|
|
|
|
clone.formId = ++this.idGlobal; |
|
|
|
|
clone.span = formConf.span; |
|
|
|
|
clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件 |
|
|
|
|
if (!clone.layout) clone.layout = "colFormItem"; |
|
|
|
|
if (clone.layout === "colFormItem") { |
|
|
|
|
clone.vModel = `field${this.idGlobal}`; |
|
|
|
|
clone.placeholder !== undefined && (clone.placeholder += clone.label); |
|
|
|
|
tempActiveData = clone; |
|
|
|
|
} else if (clone.layout === "rowFormItem") { |
|
|
|
|
delete clone.label; |
|
|
|
|
clone.componentName = `row${this.idGlobal}`; |
|
|
|
|
clone.gutter = this.formConf.gutter; |
|
|
|
|
tempActiveData = clone; |
|
|
|
|
} |
|
|
|
|
return tempActiveData |
|
|
|
|
return tempActiveData; |
|
|
|
|
}, |
|
|
|
|
AssembleFormData() { |
|
|
|
|
this.formData = { |
|
|
|
|
fields: JSON.parse(JSON.stringify(this.drawingList)), |
|
|
|
|
...this.formConf |
|
|
|
|
} |
|
|
|
|
...this.formConf, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
generate(data) { |
|
|
|
|
const func = this[`exec${titleCase(this.operationType)}`] |
|
|
|
|
this.generateConf = data |
|
|
|
|
func && func(data) |
|
|
|
|
const func = this[`exec${titleCase(this.operationType)}`]; |
|
|
|
|
this.generateConf = data; |
|
|
|
|
func && func(data); |
|
|
|
|
}, |
|
|
|
|
execRun(data) { |
|
|
|
|
this.AssembleFormData() |
|
|
|
|
this.drawerVisible = true |
|
|
|
|
this.AssembleFormData(); |
|
|
|
|
this.drawerVisible = true; |
|
|
|
|
}, |
|
|
|
|
execDownload(data) { |
|
|
|
|
const codeStr = this.generateCode() |
|
|
|
|
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' }) |
|
|
|
|
this.$download.saveAs(blob, data.fileName) |
|
|
|
|
const codeStr = this.generateCode(); |
|
|
|
|
const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" }); |
|
|
|
|
this.$download.saveAs(blob, data.fileName); |
|
|
|
|
}, |
|
|
|
|
execCopy(data) { |
|
|
|
|
document.getElementById('copyNode').click() |
|
|
|
|
document.getElementById("copyNode").click(); |
|
|
|
|
}, |
|
|
|
|
empty() { |
|
|
|
|
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then( |
|
|
|
|
this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then( |
|
|
|
|
() => { |
|
|
|
|
this.drawingList = [] |
|
|
|
|
this.drawingList = []; |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
drawingItemCopy(item, parent) { |
|
|
|
|
let clone = JSON.parse(JSON.stringify(item)) |
|
|
|
|
clone = this.createIdAndKey(clone) |
|
|
|
|
parent.push(clone) |
|
|
|
|
this.activeFormItem(clone) |
|
|
|
|
let clone = JSON.parse(JSON.stringify(item)); |
|
|
|
|
clone = this.createIdAndKey(clone); |
|
|
|
|
parent.push(clone); |
|
|
|
|
this.activeFormItem(clone); |
|
|
|
|
}, |
|
|
|
|
createIdAndKey(item) { |
|
|
|
|
item.formId = ++this.idGlobal |
|
|
|
|
item.renderKey = +new Date() |
|
|
|
|
if (item.layout === 'colFormItem') { |
|
|
|
|
item.vModel = `field${this.idGlobal}` |
|
|
|
|
} else if (item.layout === 'rowFormItem') { |
|
|
|
|
item.componentName = `row${this.idGlobal}` |
|
|
|
|
item.formId = ++this.idGlobal; |
|
|
|
|
item.renderKey = +new Date(); |
|
|
|
|
if (item.layout === "colFormItem") { |
|
|
|
|
item.vModel = `field${this.idGlobal}`; |
|
|
|
|
} else if (item.layout === "rowFormItem") { |
|
|
|
|
item.componentName = `row${this.idGlobal}`; |
|
|
|
|
} |
|
|
|
|
if (Array.isArray(item.children)) { |
|
|
|
|
item.children = item.children.map(childItem => this.createIdAndKey(childItem)) |
|
|
|
|
item.children = item.children.map((childItem) => |
|
|
|
|
this.createIdAndKey(childItem) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
return item |
|
|
|
|
return item; |
|
|
|
|
}, |
|
|
|
|
drawingItemDelete(index, parent) { |
|
|
|
|
parent.splice(index, 1) |
|
|
|
|
parent.splice(index, 1); |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
const len = this.drawingList.length |
|
|
|
|
const len = this.drawingList.length; |
|
|
|
|
if (len) { |
|
|
|
|
this.activeFormItem(this.drawingList[len - 1]) |
|
|
|
|
this.activeFormItem(this.drawingList[len - 1]); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
generateCode() { |
|
|
|
|
const { type } = this.generateConf |
|
|
|
|
this.AssembleFormData() |
|
|
|
|
const script = vueScript(makeUpJs(this.formData, type)) |
|
|
|
|
const html = vueTemplate(makeUpHtml(this.formData, type)) |
|
|
|
|
const css = cssStyle(makeUpCss(this.formData)) |
|
|
|
|
return beautifier.html(html + script + css, beautifierConf.html) |
|
|
|
|
const { type } = this.generateConf; |
|
|
|
|
this.AssembleFormData(); |
|
|
|
|
const script = vueScript(makeUpJs(this.formData, type)); |
|
|
|
|
const html = vueTemplate(makeUpHtml(this.formData, type)); |
|
|
|
|
const css = cssStyle(makeUpCss(this.formData)); |
|
|
|
|
return beautifier.html(html + script + css, beautifierConf.html); |
|
|
|
|
}, |
|
|
|
|
download() { |
|
|
|
|
this.dialogVisible = true |
|
|
|
|
this.showFileName = true |
|
|
|
|
this.operationType = 'download' |
|
|
|
|
this.dialogVisible = true; |
|
|
|
|
this.showFileName = true; |
|
|
|
|
this.operationType = "download"; |
|
|
|
|
}, |
|
|
|
|
run() { |
|
|
|
|
this.dialogVisible = true |
|
|
|
|
this.showFileName = false |
|
|
|
|
this.operationType = 'run' |
|
|
|
|
this.dialogVisible = true; |
|
|
|
|
this.showFileName = false; |
|
|
|
|
this.operationType = "run"; |
|
|
|
|
}, |
|
|
|
|
copy() { |
|
|
|
|
this.dialogVisible = true |
|
|
|
|
this.showFileName = false |
|
|
|
|
this.operationType = 'copy' |
|
|
|
|
this.dialogVisible = true; |
|
|
|
|
this.showFileName = false; |
|
|
|
|
this.operationType = "copy"; |
|
|
|
|
}, |
|
|
|
|
tagChange(newTag) { |
|
|
|
|
newTag = this.cloneComponent(newTag) |
|
|
|
|
newTag.vModel = this.activeData.vModel |
|
|
|
|
newTag.formId = this.activeId |
|
|
|
|
newTag.span = this.activeData.span |
|
|
|
|
delete this.activeData.tag |
|
|
|
|
delete this.activeData.tagIcon |
|
|
|
|
delete this.activeData.document |
|
|
|
|
Object.keys(newTag).forEach(key => { |
|
|
|
|
if (this.activeData[key] !== undefined |
|
|
|
|
&& typeof this.activeData[key] === typeof newTag[key]) { |
|
|
|
|
newTag[key] = this.activeData[key] |
|
|
|
|
newTag = this.cloneComponent(newTag); |
|
|
|
|
newTag.vModel = this.activeData.vModel; |
|
|
|
|
newTag.formId = this.activeId; |
|
|
|
|
newTag.span = this.activeData.span; |
|
|
|
|
delete this.activeData.tag; |
|
|
|
|
delete this.activeData.tagIcon; |
|
|
|
|
delete this.activeData.document; |
|
|
|
|
Object.keys(newTag).forEach((key) => { |
|
|
|
|
if ( |
|
|
|
|
this.activeData[key] !== undefined && |
|
|
|
|
typeof this.activeData[key] === typeof newTag[key] |
|
|
|
|
) { |
|
|
|
|
newTag[key] = this.activeData[key]; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.activeData = newTag |
|
|
|
|
this.updateDrawingList(newTag, this.drawingList) |
|
|
|
|
}); |
|
|
|
|
this.activeData = newTag; |
|
|
|
|
this.updateDrawingList(newTag, this.drawingList); |
|
|
|
|
}, |
|
|
|
|
updateDrawingList(newTag, list) { |
|
|
|
|
const index = list.findIndex(item => item.formId === this.activeId) |
|
|
|
|
const index = list.findIndex((item) => item.formId === this.activeId); |
|
|
|
|
if (index > -1) { |
|
|
|
|
list.splice(index, 1, newTag) |
|
|
|
|
list.splice(index, 1, newTag); |
|
|
|
|
} else { |
|
|
|
|
list.forEach(item => { |
|
|
|
|
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children) |
|
|
|
|
}) |
|
|
|
|
list.forEach((item) => { |
|
|
|
|
if (Array.isArray(item.children)) |
|
|
|
|
this.updateDrawingList(newTag, item.children); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang='scss'> |
|
|
|
|
.editor-tabs{ |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.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; |
|
|
|
|
@ -389,15 +426,15 @@ 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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -413,24 +450,24 @@ export default {
|
|
|
|
|
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; |
|
|
|
|
@ -445,16 +482,16 @@ export default {
|
|
|
|
|
z-index: 1; |
|
|
|
|
cursor: pointer; |
|
|
|
|
font-size: 12px; |
|
|
|
|
&:hover{ |
|
|
|
|
background: rgba(210, 23, 23, 0.5) |
|
|
|
|
&: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 { |
|
|
|
|
@ -465,37 +502,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{ |
|
|
|
|
color: #409EFF; |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$selectedColor: #f6f7ff; |
|
|
|
|
$lighterBlue: #409EFF; |
|
|
|
|
$lighterBlue: #409eff; |
|
|
|
|
|
|
|
|
|
.container { |
|
|
|
|
position: relative; |
|
|
|
|
@ -514,14 +551,14 @@ $lighterBlue: #409EFF;
|
|
|
|
|
transition: transform 0ms !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.components-draggable{ |
|
|
|
|
.components-draggable { |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
.components-title{ |
|
|
|
|
.components-title { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
margin: 6px 2px; |
|
|
|
|
.svg-icon{ |
|
|
|
|
.svg-icon { |
|
|
|
|
color: #666; |
|
|
|
|
font-size: 18px; |
|
|
|
|
} |
|
|
|
|
@ -534,7 +571,7 @@ $lighterBlue: #409EFF;
|
|
|
|
|
cursor: move; |
|
|
|
|
border: 1px dashed #436efc; |
|
|
|
|
border-radius: 3px; |
|
|
|
|
.svg-icon{ |
|
|
|
|
.svg-icon { |
|
|
|
|
color: #777; |
|
|
|
|
font-size: 15px; |
|
|
|
|
} |
|
|
|
|
@ -554,15 +591,15 @@ $lighterBlue: #409EFF;
|
|
|
|
|
top: 0; |
|
|
|
|
height: 100vh; |
|
|
|
|
} |
|
|
|
|
.left-scrollbar{ |
|
|
|
|
.left-scrollbar { |
|
|
|
|
height: calc(100vh - 42px); |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.center-scrollbar { |
|
|
|
|
height: calc(100vh - 42px); |
|
|
|
|
overflow: hidden; |
|
|
|
|
border-left: 1px solid #f1e8e8; |
|
|
|
|
border-right: 1px solid #f1e8e8; |
|
|
|
|
border-left: 1px solid #0e5191; |
|
|
|
|
border-left: 1px solid #0e5191; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.center-board { |
|
|
|
|
@ -571,7 +608,7 @@ $lighterBlue: #409EFF;
|
|
|
|
|
margin: 0 350px 0 260px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.empty-info{ |
|
|
|
|
.empty-info { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 46%; |
|
|
|
|
left: 0; |
|
|
|
|
@ -581,27 +618,27 @@ $lighterBlue: #409EFF;
|
|
|
|
|
color: #ccb1ea; |
|
|
|
|
letter-spacing: 4px; |
|
|
|
|
} |
|
|
|
|
.action-bar{ |
|
|
|
|
.action-bar { |
|
|
|
|
position: relative; |
|
|
|
|
height: 42px; |
|
|
|
|
text-align: right; |
|
|
|
|
padding: 0 15px; |
|
|
|
|
box-sizing: border-box;; |
|
|
|
|
border: 1px solid #f1e8e8; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
border: 1px solid #0e5191; |
|
|
|
|
border-top: none; |
|
|
|
|
border-left: none; |
|
|
|
|
.delete-btn{ |
|
|
|
|
color: #F56C6C; |
|
|
|
|
.delete-btn { |
|
|
|
|
color: #f56c6c; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.logo-wrapper{ |
|
|
|
|
.logo-wrapper { |
|
|
|
|
position: relative; |
|
|
|
|
height: 42px; |
|
|
|
|
background: #4b6e91; |
|
|
|
|
border-bottom: 1px solid #f1e8e8; |
|
|
|
|
border-bottom: 1px solid #0e5191; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.logo{ |
|
|
|
|
.logo { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 12px; |
|
|
|
|
top: 6px; |
|
|
|
|
@ -610,16 +647,16 @@ $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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -662,32 +699,33 @@ $lighterBlue: #409EFF;
|
|
|
|
|
background-color: $selectedColor; |
|
|
|
|
} |
|
|
|
|
.active-from-item { |
|
|
|
|
& > .el-form-item{ |
|
|
|
|
& > .el-form-item { |
|
|
|
|
background: #4b6e91; |
|
|
|
|
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; |
|
|
|
|
@ -698,19 +736,19 @@ $lighterBlue: #409EFF;
|
|
|
|
|
.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; |
|
|
|
|
@ -720,17 +758,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; |
|
|
|
|
@ -744,29 +785,29 @@ $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; |
|
|
|
|
border-color: #f56c6c; |
|
|
|
|
color: #f56c6c; |
|
|
|
|
background: #fff; |
|
|
|
|
&:hover{ |
|
|
|
|
background: #F56C6C; |
|
|
|
|
&:hover { |
|
|
|
|
background: #f56c6c; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.delete-btn::before, |
|
|
|
|
.delete-btn::after{ |
|
|
|
|
.delete-btn::after { |
|
|
|
|
display: none !important; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
