|
|
@ -2,9 +2,7 @@ |
|
|
|
<div class="container"> |
|
|
|
<div class="container"> |
|
|
|
<div class="left-board"> |
|
|
|
<div class="left-board"> |
|
|
|
<div class="logo-wrapper"> |
|
|
|
<div class="logo-wrapper"> |
|
|
|
<div class="logo"> |
|
|
|
<div class="logo"><img :src="logo" alt="logo" /> Form Generator</div> |
|
|
|
<img :src="logo" alt="logo"> Form Generator |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-scrollbar class="left-scrollbar"> |
|
|
|
<el-scrollbar class="left-scrollbar"> |
|
|
|
<div class="components-list"> |
|
|
|
<div class="components-list"> |
|
|
@ -21,7 +19,9 @@ |
|
|
|
@end="onEnd" |
|
|
|
@end="onEnd" |
|
|
|
> |
|
|
|
> |
|
|
|
<div |
|
|
|
<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)" |
|
|
|
@click="addComponent(element)" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="components-body"> |
|
|
|
<div class="components-body"> |
|
|
@ -58,12 +58,18 @@ |
|
|
|
<svg-icon icon-class="component" /> 布局型组件 |
|
|
|
<svg-icon icon-class="component" /> 布局型组件 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<draggable |
|
|
|
<draggable |
|
|
|
class="components-draggable" :list="layoutComponents" |
|
|
|
class="components-draggable" |
|
|
|
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" |
|
|
|
:list="layoutComponents" |
|
|
|
draggable=".components-item" :sort="false" @end="onEnd" |
|
|
|
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" |
|
|
|
|
|
|
|
:clone="cloneComponent" |
|
|
|
|
|
|
|
draggable=".components-item" |
|
|
|
|
|
|
|
:sort="false" |
|
|
|
|
|
|
|
@end="onEnd" |
|
|
|
> |
|
|
|
> |
|
|
|
<div |
|
|
|
<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)" |
|
|
|
@click="addComponent(element)" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="components-body"> |
|
|
|
<div class="components-body"> |
|
|
@ -81,10 +87,20 @@ |
|
|
|
<el-button icon="el-icon-download" type="text" @click="download"> |
|
|
|
<el-button icon="el-icon-download" type="text" @click="download"> |
|
|
|
导出vue文件 |
|
|
|
导出vue文件 |
|
|
|
</el-button> |
|
|
|
</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> |
|
|
|
<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> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -96,7 +112,12 @@ |
|
|
|
:disabled="formConf.disabled" |
|
|
|
:disabled="formConf.disabled" |
|
|
|
:label-width="formConf.labelWidth + 'px'" |
|
|
|
: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 |
|
|
|
<draggable-item |
|
|
|
v-for="(element, index) in drawingList" |
|
|
|
v-for="(element, index) in drawingList" |
|
|
|
:key="element.renderKey" |
|
|
|
:key="element.renderKey" |
|
|
@ -131,28 +152,38 @@ |
|
|
|
:show-file-name="showFileName" |
|
|
|
:show-file-name="showFileName" |
|
|
|
@confirm="generate" |
|
|
|
@confirm="generate" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<input id="copyNode" type="hidden"> |
|
|
|
<input id="copyNode" type="hidden" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import draggable from 'vuedraggable' |
|
|
|
import draggable from "vuedraggable"; |
|
|
|
import beautifier from 'js-beautify' |
|
|
|
import beautifier from "js-beautify"; |
|
|
|
import ClipboardJS from 'clipboard' |
|
|
|
import ClipboardJS from "clipboard"; |
|
|
|
import render from '@/utils/generator/render' |
|
|
|
import render from "@/utils/generator/render"; |
|
|
|
import RightPanel from './RightPanel' |
|
|
|
import RightPanel from "./RightPanel"; |
|
|
|
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config' |
|
|
|
import { |
|
|
|
import { beautifierConf, titleCase } from '@/utils/index' |
|
|
|
inputComponents, |
|
|
|
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html' |
|
|
|
selectComponents, |
|
|
|
import { makeUpJs } from '@/utils/generator/js' |
|
|
|
layoutComponents, |
|
|
|
import { makeUpCss } from '@/utils/generator/css' |
|
|
|
formConf, |
|
|
|
import drawingDefault from '@/utils/generator/drawingDefault' |
|
|
|
} from "@/utils/generator/config"; |
|
|
|
import logo from '@/assets/logo/logo.png' |
|
|
|
import { beautifierConf, titleCase } from "@/utils/index"; |
|
|
|
import CodeTypeDialog from './CodeTypeDialog' |
|
|
|
import { |
|
|
|
import DraggableItem from './DraggableItem' |
|
|
|
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 oldActiveId; |
|
|
|
let tempActiveData |
|
|
|
let tempActiveData; |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
components: { |
|
|
@ -160,7 +191,7 @@ export default { |
|
|
|
render, |
|
|
|
render, |
|
|
|
RightPanel, |
|
|
|
RightPanel, |
|
|
|
CodeTypeDialog, |
|
|
|
CodeTypeDialog, |
|
|
|
DraggableItem |
|
|
|
DraggableItem, |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
@ -179,198 +210,204 @@ export default { |
|
|
|
dialogVisible: false, |
|
|
|
dialogVisible: false, |
|
|
|
generateConf: null, |
|
|
|
generateConf: null, |
|
|
|
showFileName: false, |
|
|
|
showFileName: false, |
|
|
|
activeData: drawingDefault[0] |
|
|
|
activeData: drawingDefault[0], |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
created() { |
|
|
|
// 防止 firefox 下 拖拽 会新打卡一个选项卡 |
|
|
|
// 防止 firefox 下 拖拽 会新打卡一个选项卡 |
|
|
|
document.body.ondrop = event => { |
|
|
|
document.body.ondrop = (event) => { |
|
|
|
event.preventDefault() |
|
|
|
event.preventDefault(); |
|
|
|
event.stopPropagation() |
|
|
|
event.stopPropagation(); |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
// eslint-disable-next-line func-names |
|
|
|
// eslint-disable-next-line func-names |
|
|
|
'activeData.label': function (val, oldVal) { |
|
|
|
"activeData.label": function (val, oldVal) { |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
this.activeData.placeholder === undefined |
|
|
|
this.activeData.placeholder === undefined || |
|
|
|
|| !this.activeData.tag |
|
|
|
!this.activeData.tag || |
|
|
|
|| oldActiveId !== this.activeId |
|
|
|
oldActiveId !== this.activeId |
|
|
|
) { |
|
|
|
) { |
|
|
|
return |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val |
|
|
|
this.activeData.placeholder = |
|
|
|
|
|
|
|
this.activeData.placeholder.replace(oldVal, "") + val; |
|
|
|
}, |
|
|
|
}, |
|
|
|
activeId: { |
|
|
|
activeId: { |
|
|
|
handler(val) { |
|
|
|
handler(val) { |
|
|
|
oldActiveId = val |
|
|
|
oldActiveId = val; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
}, |
|
|
|
immediate: true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
const clipboard = new ClipboardJS('#copyNode', { |
|
|
|
const clipboard = new ClipboardJS("#copyNode", { |
|
|
|
text: trigger => { |
|
|
|
text: (trigger) => { |
|
|
|
const codeStr = this.generateCode() |
|
|
|
const codeStr = this.generateCode(); |
|
|
|
this.$notify({ |
|
|
|
this.$notify({ |
|
|
|
title: '成功', |
|
|
|
title: "成功", |
|
|
|
message: '代码已复制到剪切板,可粘贴。', |
|
|
|
message: "代码已复制到剪切板,可粘贴。", |
|
|
|
type: 'success' |
|
|
|
type: "success", |
|
|
|
}) |
|
|
|
}); |
|
|
|
return codeStr |
|
|
|
return codeStr; |
|
|
|
} |
|
|
|
}, |
|
|
|
}) |
|
|
|
}); |
|
|
|
clipboard.on('error', e => { |
|
|
|
clipboard.on("error", (e) => { |
|
|
|
this.$message.error('代码复制失败') |
|
|
|
this.$message.error("代码复制失败"); |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
activeFormItem(element) { |
|
|
|
activeFormItem(element) { |
|
|
|
this.activeData = element |
|
|
|
this.activeData = element; |
|
|
|
this.activeId = element.formId |
|
|
|
this.activeId = element.formId; |
|
|
|
}, |
|
|
|
}, |
|
|
|
onEnd(obj, a) { |
|
|
|
onEnd(obj, a) { |
|
|
|
if (obj.from !== obj.to) { |
|
|
|
if (obj.from !== obj.to) { |
|
|
|
this.activeData = tempActiveData |
|
|
|
this.activeData = tempActiveData; |
|
|
|
this.activeId = this.idGlobal |
|
|
|
this.activeId = this.idGlobal; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
addComponent(item) { |
|
|
|
addComponent(item) { |
|
|
|
const clone = this.cloneComponent(item) |
|
|
|
const clone = this.cloneComponent(item); |
|
|
|
this.drawingList.push(clone) |
|
|
|
this.drawingList.push(clone); |
|
|
|
this.activeFormItem(clone) |
|
|
|
this.activeFormItem(clone); |
|
|
|
}, |
|
|
|
}, |
|
|
|
cloneComponent(origin) { |
|
|
|
cloneComponent(origin) { |
|
|
|
const clone = JSON.parse(JSON.stringify(origin)) |
|
|
|
const clone = JSON.parse(JSON.stringify(origin)); |
|
|
|
clone.formId = ++this.idGlobal |
|
|
|
clone.formId = ++this.idGlobal; |
|
|
|
clone.span = formConf.span |
|
|
|
clone.span = formConf.span; |
|
|
|
clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件 |
|
|
|
clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件 |
|
|
|
if (!clone.layout) clone.layout = 'colFormItem' |
|
|
|
if (!clone.layout) clone.layout = "colFormItem"; |
|
|
|
if (clone.layout === 'colFormItem') { |
|
|
|
if (clone.layout === "colFormItem") { |
|
|
|
clone.vModel = `field${this.idGlobal}` |
|
|
|
clone.vModel = `field${this.idGlobal}`; |
|
|
|
clone.placeholder !== undefined && (clone.placeholder += clone.label) |
|
|
|
clone.placeholder !== undefined && (clone.placeholder += clone.label); |
|
|
|
tempActiveData = clone |
|
|
|
tempActiveData = clone; |
|
|
|
} else if (clone.layout === 'rowFormItem') { |
|
|
|
} else if (clone.layout === "rowFormItem") { |
|
|
|
delete clone.label |
|
|
|
delete clone.label; |
|
|
|
clone.componentName = `row${this.idGlobal}` |
|
|
|
clone.componentName = `row${this.idGlobal}`; |
|
|
|
clone.gutter = this.formConf.gutter |
|
|
|
clone.gutter = this.formConf.gutter; |
|
|
|
tempActiveData = clone |
|
|
|
tempActiveData = clone; |
|
|
|
} |
|
|
|
} |
|
|
|
return tempActiveData |
|
|
|
return tempActiveData; |
|
|
|
}, |
|
|
|
}, |
|
|
|
AssembleFormData() { |
|
|
|
AssembleFormData() { |
|
|
|
this.formData = { |
|
|
|
this.formData = { |
|
|
|
fields: JSON.parse(JSON.stringify(this.drawingList)), |
|
|
|
fields: JSON.parse(JSON.stringify(this.drawingList)), |
|
|
|
...this.formConf |
|
|
|
...this.formConf, |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
generate(data) { |
|
|
|
generate(data) { |
|
|
|
const func = this[`exec${titleCase(this.operationType)}`] |
|
|
|
const func = this[`exec${titleCase(this.operationType)}`]; |
|
|
|
this.generateConf = data |
|
|
|
this.generateConf = data; |
|
|
|
func && func(data) |
|
|
|
func && func(data); |
|
|
|
}, |
|
|
|
}, |
|
|
|
execRun(data) { |
|
|
|
execRun(data) { |
|
|
|
this.AssembleFormData() |
|
|
|
this.AssembleFormData(); |
|
|
|
this.drawerVisible = true |
|
|
|
this.drawerVisible = true; |
|
|
|
}, |
|
|
|
}, |
|
|
|
execDownload(data) { |
|
|
|
execDownload(data) { |
|
|
|
const codeStr = this.generateCode() |
|
|
|
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) |
|
|
|
this.$download.saveAs(blob, data.fileName); |
|
|
|
}, |
|
|
|
}, |
|
|
|
execCopy(data) { |
|
|
|
execCopy(data) { |
|
|
|
document.getElementById('copyNode').click() |
|
|
|
document.getElementById("copyNode").click(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
empty() { |
|
|
|
empty() { |
|
|
|
this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then( |
|
|
|
this.$confirm("确定要清空所有组件吗?", "提示", { type: "warning" }).then( |
|
|
|
() => { |
|
|
|
() => { |
|
|
|
this.drawingList = [] |
|
|
|
this.drawingList = []; |
|
|
|
} |
|
|
|
} |
|
|
|
) |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
drawingItemCopy(item, parent) { |
|
|
|
drawingItemCopy(item, parent) { |
|
|
|
let clone = JSON.parse(JSON.stringify(item)) |
|
|
|
let clone = JSON.parse(JSON.stringify(item)); |
|
|
|
clone = this.createIdAndKey(clone) |
|
|
|
clone = this.createIdAndKey(clone); |
|
|
|
parent.push(clone) |
|
|
|
parent.push(clone); |
|
|
|
this.activeFormItem(clone) |
|
|
|
this.activeFormItem(clone); |
|
|
|
}, |
|
|
|
}, |
|
|
|
createIdAndKey(item) { |
|
|
|
createIdAndKey(item) { |
|
|
|
item.formId = ++this.idGlobal |
|
|
|
item.formId = ++this.idGlobal; |
|
|
|
item.renderKey = +new Date() |
|
|
|
item.renderKey = +new Date(); |
|
|
|
if (item.layout === 'colFormItem') { |
|
|
|
if (item.layout === "colFormItem") { |
|
|
|
item.vModel = `field${this.idGlobal}` |
|
|
|
item.vModel = `field${this.idGlobal}`; |
|
|
|
} else if (item.layout === 'rowFormItem') { |
|
|
|
} else if (item.layout === "rowFormItem") { |
|
|
|
item.componentName = `row${this.idGlobal}` |
|
|
|
item.componentName = `row${this.idGlobal}`; |
|
|
|
} |
|
|
|
} |
|
|
|
if (Array.isArray(item.children)) { |
|
|
|
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) { |
|
|
|
drawingItemDelete(index, parent) { |
|
|
|
parent.splice(index, 1) |
|
|
|
parent.splice(index, 1); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
const len = this.drawingList.length |
|
|
|
const len = this.drawingList.length; |
|
|
|
if (len) { |
|
|
|
if (len) { |
|
|
|
this.activeFormItem(this.drawingList[len - 1]) |
|
|
|
this.activeFormItem(this.drawingList[len - 1]); |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
generateCode() { |
|
|
|
generateCode() { |
|
|
|
const { type } = this.generateConf |
|
|
|
const { type } = this.generateConf; |
|
|
|
this.AssembleFormData() |
|
|
|
this.AssembleFormData(); |
|
|
|
const script = vueScript(makeUpJs(this.formData, type)) |
|
|
|
const script = vueScript(makeUpJs(this.formData, type)); |
|
|
|
const html = vueTemplate(makeUpHtml(this.formData, type)) |
|
|
|
const html = vueTemplate(makeUpHtml(this.formData, type)); |
|
|
|
const css = cssStyle(makeUpCss(this.formData)) |
|
|
|
const css = cssStyle(makeUpCss(this.formData)); |
|
|
|
return beautifier.html(html + script + css, beautifierConf.html) |
|
|
|
return beautifier.html(html + script + css, beautifierConf.html); |
|
|
|
}, |
|
|
|
}, |
|
|
|
download() { |
|
|
|
download() { |
|
|
|
this.dialogVisible = true |
|
|
|
this.dialogVisible = true; |
|
|
|
this.showFileName = true |
|
|
|
this.showFileName = true; |
|
|
|
this.operationType = 'download' |
|
|
|
this.operationType = "download"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
run() { |
|
|
|
run() { |
|
|
|
this.dialogVisible = true |
|
|
|
this.dialogVisible = true; |
|
|
|
this.showFileName = false |
|
|
|
this.showFileName = false; |
|
|
|
this.operationType = 'run' |
|
|
|
this.operationType = "run"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
copy() { |
|
|
|
copy() { |
|
|
|
this.dialogVisible = true |
|
|
|
this.dialogVisible = true; |
|
|
|
this.showFileName = false |
|
|
|
this.showFileName = false; |
|
|
|
this.operationType = 'copy' |
|
|
|
this.operationType = "copy"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
tagChange(newTag) { |
|
|
|
tagChange(newTag) { |
|
|
|
newTag = this.cloneComponent(newTag) |
|
|
|
newTag = this.cloneComponent(newTag); |
|
|
|
newTag.vModel = this.activeData.vModel |
|
|
|
newTag.vModel = this.activeData.vModel; |
|
|
|
newTag.formId = this.activeId |
|
|
|
newTag.formId = this.activeId; |
|
|
|
newTag.span = this.activeData.span |
|
|
|
newTag.span = this.activeData.span; |
|
|
|
delete this.activeData.tag |
|
|
|
delete this.activeData.tag; |
|
|
|
delete this.activeData.tagIcon |
|
|
|
delete this.activeData.tagIcon; |
|
|
|
delete this.activeData.document |
|
|
|
delete this.activeData.document; |
|
|
|
Object.keys(newTag).forEach(key => { |
|
|
|
Object.keys(newTag).forEach((key) => { |
|
|
|
if (this.activeData[key] !== undefined |
|
|
|
if ( |
|
|
|
&& typeof this.activeData[key] === typeof newTag[key]) { |
|
|
|
this.activeData[key] !== undefined && |
|
|
|
newTag[key] = this.activeData[key] |
|
|
|
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) { |
|
|
|
updateDrawingList(newTag, list) { |
|
|
|
const index = list.findIndex(item => item.formId === this.activeId) |
|
|
|
const index = list.findIndex((item) => item.formId === this.activeId); |
|
|
|
if (index > -1) { |
|
|
|
if (index > -1) { |
|
|
|
list.splice(index, 1, newTag) |
|
|
|
list.splice(index, 1, newTag); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
list.forEach(item => { |
|
|
|
list.forEach((item) => { |
|
|
|
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children) |
|
|
|
if (Array.isArray(item.children)) |
|
|
|
}) |
|
|
|
this.updateDrawingList(newTag, item.children); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang='scss'> |
|
|
|
<style lang="scss"> |
|
|
|
.editor-tabs { |
|
|
|
.editor-tabs { |
|
|
|
background: #121315; |
|
|
|
background: #121315; |
|
|
|
.el-tabs__header { |
|
|
|
.el-tabs__header { |
|
|
@ -446,7 +483,7 @@ export default { |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
font-size: 12px; |
|
|
|
font-size: 12px; |
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
background: rgba(210, 23, 23, 0.5) |
|
|
|
background: rgba(210, 23, 23, 0.5); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
& + .reg-item { |
|
|
|
& + .reg-item { |
|
|
@ -475,7 +512,7 @@ export default { |
|
|
|
margin-left: 6px; |
|
|
|
margin-left: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-icon-plus { |
|
|
|
.el-icon-plus { |
|
|
|
color: #409EFF; |
|
|
|
color: #409eff; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-icon-delete { |
|
|
|
.el-icon-delete { |
|
|
|
color: #157a0c; |
|
|
|
color: #157a0c; |
|
|
@ -495,7 +532,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
$selectedColor: #f6f7ff; |
|
|
|
$selectedColor: #f6f7ff; |
|
|
|
$lighterBlue: #409EFF; |
|
|
|
$lighterBlue: #409eff; |
|
|
|
|
|
|
|
|
|
|
|
.container { |
|
|
|
.container { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
@ -561,8 +598,8 @@ $lighterBlue: #409EFF; |
|
|
|
.center-scrollbar { |
|
|
|
.center-scrollbar { |
|
|
|
height: calc(100vh - 42px); |
|
|
|
height: calc(100vh - 42px); |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
border-left: 1px solid #f1e8e8; |
|
|
|
border-left: 1px solid #0e5191; |
|
|
|
border-right: 1px solid #f1e8e8; |
|
|
|
border-left: 1px solid #0e5191; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
.center-board { |
|
|
|
.center-board { |
|
|
@ -586,19 +623,19 @@ $lighterBlue: #409EFF; |
|
|
|
height: 42px; |
|
|
|
height: 42px; |
|
|
|
text-align: right; |
|
|
|
text-align: right; |
|
|
|
padding: 0 15px; |
|
|
|
padding: 0 15px; |
|
|
|
box-sizing: border-box;; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid #f1e8e8; |
|
|
|
border: 1px solid #0e5191; |
|
|
|
border-top: none; |
|
|
|
border-top: none; |
|
|
|
border-left: none; |
|
|
|
border-left: none; |
|
|
|
.delete-btn { |
|
|
|
.delete-btn { |
|
|
|
color: #F56C6C; |
|
|
|
color: #f56c6c; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.logo-wrapper { |
|
|
|
.logo-wrapper { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
height: 42px; |
|
|
|
height: 42px; |
|
|
|
background: #4b6e91; |
|
|
|
background: #4b6e91; |
|
|
|
border-bottom: 1px solid #f1e8e8; |
|
|
|
border-bottom: 1px solid #0e5191; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
.logo { |
|
|
|
.logo { |
|
|
@ -666,7 +703,8 @@ $lighterBlue: #409EFF; |
|
|
|
background: #4b6e91; |
|
|
|
background: #4b6e91; |
|
|
|
border-radius: 6px; |
|
|
|
border-radius: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
& > .drawing-item-copy, & > .drawing-item-delete{ |
|
|
|
& > .drawing-item-copy, |
|
|
|
|
|
|
|
& > .drawing-item-delete { |
|
|
|
display: initial; |
|
|
|
display: initial; |
|
|
|
} |
|
|
|
} |
|
|
|
& > .component-name { |
|
|
|
& > .component-name { |
|
|
@ -720,17 +758,20 @@ $lighterBlue: #409EFF; |
|
|
|
padding: 0 6px; |
|
|
|
padding: 0 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.drawing-item, .drawing-row-item{ |
|
|
|
.drawing-item, |
|
|
|
|
|
|
|
.drawing-row-item { |
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
& > .el-form-item { |
|
|
|
& > .el-form-item { |
|
|
|
background: $selectedColor; |
|
|
|
background: $selectedColor; |
|
|
|
border-radius: 6px; |
|
|
|
border-radius: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
& > .drawing-item-copy, & > .drawing-item-delete{ |
|
|
|
& > .drawing-item-copy, |
|
|
|
|
|
|
|
& > .drawing-item-delete { |
|
|
|
display: initial; |
|
|
|
display: initial; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
& > .drawing-item-copy, & > .drawing-item-delete{ |
|
|
|
& > .drawing-item-copy, |
|
|
|
|
|
|
|
& > .drawing-item-delete { |
|
|
|
display: none; |
|
|
|
display: none; |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
top: -10px; |
|
|
|
top: -10px; |
|
|
@ -756,11 +797,11 @@ $lighterBlue: #409EFF; |
|
|
|
} |
|
|
|
} |
|
|
|
& > .drawing-item-delete { |
|
|
|
& > .drawing-item-delete { |
|
|
|
right: 24px; |
|
|
|
right: 24px; |
|
|
|
border-color: #F56C6C; |
|
|
|
border-color: #f56c6c; |
|
|
|
color: #F56C6C; |
|
|
|
color: #f56c6c; |
|
|
|
background: #fff; |
|
|
|
background: #fff; |
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
background: #F56C6C; |
|
|
|
background: #f56c6c; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|