hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-11-04 20:28:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

使用最新的 form generator 编辑器

Browse Source
This commit is contained in:
YunaiV
2022-01-02 11:22:13 +08:00
parent dffd175ccf
commit d574a99dfc
167 changed files with 6707 additions and 1135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
yudao-admin-ui/src/views/bpm/form/index.vue
View File

@@ -125,6 +125,10 @@ export default {
// ...JSON.parse(data.conf),
// fields: this.decodeFields(data.fields)
// }
console.log({
...JSON.parse(data.conf),
fields: this.decodeFields(data.fields)
})
this.detailForm = {
fields: [
{
@@ -292,7 +296,6 @@ export default {
formBtns: true,
unFocusedComponentBorder: false
}
console.log(this.detailForm)
});
},
decodeFields(fields) {

22
yudao-admin-ui/src/views/tool/build/App.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div>
<router-view />
</div>
</template>
<script>
export default {
mounted() {
// 取消开始的loading动画
const preLoader = document.querySelector('#pre-loader')
preLoader.style.display = 'none'
// fix: firefox 下 拖拽 会新打卡一个选项卡
// https://github.com/JakHuang/form-generator/issues/15
document.body.ondrop = event => {
event.preventDefault()
event.stopPropagation()
}
}
}
</script>

4
yudao-admin-ui/src/views/tool/build/CodeTypeDialog.vue
View File

@@ -104,3 +104,7 @@ export default {
}
}
</script>
<style lang="scss" scoped>
</style>

86
yudao-admin-ui/src/views/tool/build/DraggableItem.vue
View File

@@ -1,18 +1,18 @@
<script>
import draggable from 'vuedraggable'
import render from '@/utils/generator/render'
import render from '@/components/render/render'
const components = {
itemBtns(h, element, index, parent) {
itemBtns(h, currentItem, index, list) {
const { copyItem, deleteItem } = this.$listeners
return [
<span class="drawing-item-copy" title="复制" onClick={event => {
copyItem(element, parent); event.stopPropagation()
copyItem(currentItem, list); event.stopPropagation()
}}>
<i class="el-icon-copy-document" />
</span>,
<span class="drawing-item-delete" title="删除" onClick={event => {
deleteItem(index, parent); event.stopPropagation()
deleteItem(index, list); event.stopPropagation()
}}>
<i class="el-icon-delete" />
</span>
@@ -20,60 +20,80 @@ const components = {
}
}
const layouts = {
colFormItem(h, element, index, parent) {
colFormItem(h, currentItem, index, list) {
const { activeItem } = this.$listeners
let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
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 (
<el-col span={element.span} class={className}
nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
<el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
label={element.label} required={element.required}>
<render key={element.renderKey} conf={element} onInput={ event => {
this.$set(element, 'defaultValue', event)
}} />
<el-col span={config.span} class={className}
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
<el-form-item label-width={labelWidth}
label={config.showLabel ? config.label : ''} required={config.required}>
<render key={config.renderKey} conf={currentItem} onInput={ event => {
this.$set(config, 'defaultValue', event)
}}>
{child}
</render>
</el-form-item>
{components.itemBtns.apply(this, arguments)}
</el-col>
)
},
rowFormItem(h, element, index, parent) {
rowFormItem(h, currentItem, index, list) {
const { activeItem } = this.$listeners
const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
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 (element.type === 'flex') {
child = <el-row type={element.type} justify={element.justify} align={element.align}>
if (currentItem.type === 'flex') {
child = <el-row type={currentItem.type} justify={currentItem.justify} align={currentItem.align}>
{child}
</el-row>
}
return (
<el-col span={element.span}>
<el-row gutter={element.gutter} class={className}
nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
<span class="component-name">{element.componentName}</span>
<draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
<el-col span={config.span}>
<el-row gutter={config.gutter} class={className}
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
<span class="component-name">{config.componentName}</span>
<draggable list={config.children || []} animation={340}
group="componentsGroup" class="drag-wrapper">
{child}
</draggable>
{components.itemBtns.apply(this, arguments)}
</el-row>
</el-col>
)
},
raw(h, currentItem, index, list) {
const config = currentItem.__config__
const child = renderChildren.apply(this, arguments)
return <render key={config.renderKey} conf={currentItem} onInput={ event => {
this.$set(config, 'defaultValue', event)
}}>
{child}
</render>
}
}
function renderChildren(h, element, index, parent) {
if (!Array.isArray(element.children)) return null
return element.children.map((el, i) => {
const layout = layouts[el.layout]
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, element.children)
return layout.call(this, h, el, i, config.children)
}
return layoutIsNotFound()
return layoutIsNotFound.call(this)
})
}
function layoutIsNotFound() {
throw new Error(`没有与${this.element.layout}匹配的layout`)
throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
}
export default {
@@ -82,19 +102,19 @@ export default {
draggable
},
props: [
'element',
'currentItem',
'index',
'drawingList',
'activeId',
'formConf'
],
render(h) {
const layout = layouts[this.element.layout]
const layout = layouts[this.currentItem.__config__.layout]
if (layout) {
return layout.call(this, h, this.element, this.index, this.drawingList)
return layout.call(this, h, this.currentItem, this.index, this.drawingList)
}
return layoutIsNotFound()
return layoutIsNotFound.call(this)
}
}
</script>

332
yudao-admin-ui/src/views/tool/build/FormDrawer.vue Normal file
View File

@@ -0,0 +1,332 @@
<template>
<div>
<el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
<div style="height:100%">
<el-row style="height:100%;overflow:auto">
<el-col :md="24" :lg="12" class="left-editor">
<div class="setting" title="资源引用" @click="showResource">
<el-badge :is-dot="!!resources.length" class="item">
<i class="el-icon-setting" />
</el-badge>
</div>
<el-tabs v-model="activeTab" type="card" class="editor-tabs">
<el-tab-pane name="html">
<span slot="label">
<i v-if="activeTab==='html'" class="el-icon-edit" />
<i v-else class="el-icon-document" />
template
</span>
</el-tab-pane>
<el-tab-pane name="js">
<span slot="label">
<i v-if="activeTab==='js'" class="el-icon-edit" />
<i v-else class="el-icon-document" />
script
</span>
</el-tab-pane>
<el-tab-pane name="css">
<span slot="label">
<i v-if="activeTab==='css'" class="el-icon-edit" />
<i v-else class="el-icon-document" />
css
</span>
</el-tab-pane>
</el-tabs>
<div v-show="activeTab==='html'" id="editorHtml" class="tab-editor" />
<div v-show="activeTab==='js'" id="editorJs" class="tab-editor" />
<div v-show="activeTab==='css'" id="editorCss" class="tab-editor" />
</el-col>
<el-col :md="24" :lg="12" class="right-preview">
<div class="action-bar" :style="{'text-align': 'left'}">
<span class="bar-btn" @click="runCode">
<i class="el-icon-refresh" />
刷新
</span>
<span class="bar-btn" @click="exportFile">
<i class="el-icon-download" />
导出vue文件
</span>
<span ref="copyBtn" class="bar-btn copy-btn">
<i class="el-icon-document-copy" />
复制代码
</span>
<span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
<i class="el-icon-circle-close" />
关闭
</span>
</div>
<iframe
v-show="isIframeLoaded"
ref="previewPage"
class="result-wrapper"
frameborder="0"
src="preview.html"
@load="iframeLoad"
/>
<div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
</el-col>
</el-row>
</div>
</el-drawer>
<resource-dialog
:visible.sync="resourceVisible"
:origin-resource="resources"
@save="setResource"
/>
</div>
</template>
<script>
import { parse } from '@babel/parser'
import ClipboardJS from 'clipboard'
import { saveAs } from 'file-saver'
import {
makeUpHtml, vueTemplate, vueScript, cssStyle
} from '@/utils/generator/html'
import { makeUpJs } from '@/utils/generator/js'
import { makeUpCss } from '@/utils/generator/css'
import { exportDefault, beautifierConf, titleCase } from '@/utils/index'
import ResourceDialog from './ResourceDialog'
import loadMonaco from '@/utils/loadMonaco'
import loadBeautifier from '@/utils/loadBeautifier'
const editorObj = {
html: null,
js: null,
css: null
}
const mode = {
html: 'html',
js: 'javascript',
css: 'css'
}
let beautifier
let monaco
export default {
components: { ResourceDialog },
props: ['formData', 'generateConf'],
data() {
return {
activeTab: 'html',
htmlCode: '',
jsCode: '',
cssCode: '',
codeFrame: '',
isIframeLoaded: false,
isInitcode: false, // 保证open后两个异步只执行一次runcode
isRefreshCode: false, // 每次打开都需要重新刷新代码
resourceVisible: false,
scripts: [],
links: [],
monaco: null
}
},
computed: {
resources() {
return this.scripts.concat(this.links)
}
},
watch: {},
created() {
},
mounted() {
window.addEventListener('keydown', this.preventDefaultSave)
const clipboard = new ClipboardJS('.copy-btn', {
text: trigger => {
const codeStr = this.generateCode()
this.$notify({
title: '成功',
message: '代码已复制到剪切板，可粘贴。',
type: 'success'
})
return codeStr
}
})
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
},
beforeDestroy() {
window.removeEventListener('keydown', this.preventDefaultSave)
},
methods: {
preventDefaultSave(e) {
if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
}
},
onOpen() {
const { type } = this.generateConf
this.htmlCode = makeUpHtml(this.formData, type)
this.jsCode = makeUpJs(this.formData, type)
this.cssCode = makeUpCss(this.formData)
loadBeautifier(btf => {
beautifier = btf
this.htmlCode = beautifier.html(this.htmlCode, beautifierConf.html)
this.jsCode = beautifier.js(this.jsCode, beautifierConf.js)
this.cssCode = beautifier.css(this.cssCode, beautifierConf.html)
loadMonaco(val => {
monaco = val
this.setEditorValue('editorHtml', 'html', this.htmlCode)
this.setEditorValue('editorJs', 'js', this.jsCode)
this.setEditorValue('editorCss', 'css', this.cssCode)
if (!this.isInitcode) {
this.isRefreshCode = true
this.isIframeLoaded && (this.isInitcode = true) && this.runCode()
}
})
})
},
onClose() {
this.isInitcode = false
this.isRefreshCode = false
},
iframeLoad() {
if (!this.isInitcode) {
this.isIframeLoaded = true
this.isRefreshCode && (this.isInitcode = true) && this.runCode()
}
},
setEditorValue(id, type, codeStr) {
if (editorObj[type]) {
editorObj[type].setValue(codeStr)
} else {
editorObj[type] = monaco.editor.create(document.getElementById(id), {
value: codeStr,
theme: 'vs-dark',
language: mode[type],
automaticLayout: true
})
}
// ctrl + s 刷新
editorObj[type].onKeyDown(e => {
if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
this.runCode()
}
})
},
runCode() {
const jsCodeStr = editorObj.js.getValue()
try {
const ast = parse(jsCodeStr, { sourceType: 'module' })
const astBody = ast.program.body
if (astBody.length > 1) {
this.$confirm(
'js格式不能识别，仅支持修改export default的对象内容',
'提示',
{
type: 'warning'
}
)
return
}
if (astBody[0].type === 'ExportDefaultDeclaration') {
const postData = {
type: 'refreshFrame',
data: {
generateConf: this.generateConf,
html: editorObj.html.getValue(),
js: jsCodeStr.replace(exportDefault, ''),
css: editorObj.css.getValue(),
scripts: this.scripts,
links: this.links
}
}
this.$refs.previewPage.contentWindow.postMessage(
postData,
location.origin
)
} else {
this.$message.error('请使用export default')
}
} catch (err) {
this.$message.error(`js错误：${err}`)
console.error(err)
}
},
generateCode() {
const html = vueTemplate(editorObj.html.getValue())
const script = vueScript(editorObj.js.getValue())
const css = cssStyle(editorObj.css.getValue())
return beautifier.html(html + script + css, beautifierConf.html)
},
exportFile() {
this.$prompt('文件名:', '导出文件', {
inputValue: `${+new Date()}.vue`,
closeOnClickModal: false,
inputPlaceholder: '请输入文件名'
}).then(({ value }) => {
if (!value) value = `${+new Date()}.vue`
const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
saveAs(blob, value)
})
},
showResource() {
this.resourceVisible = true
},
setResource(arr) {
const scripts = []; const
links = []
if (Array.isArray(arr)) {
arr.forEach(item => {
if (item.endsWith('.css')) {
links.push(item)
} else {
scripts.push(item)
}
})
this.scripts = scripts
this.links = links
} else {
this.scripts = []
this.links = []
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.tab-editor {
position: absolute;
top: 33px;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
}
.left-editor {
position: relative;
height: 100%;
background: #1e1e1e;
overflow: hidden;
}
.setting{
position: absolute;
right: 15px;
top: 3px;
color: #a9f122;
font-size: 18px;
cursor: pointer;
z-index: 1;
}
.right-preview {
height: 100%;
.result-wrapper {
height: calc(100vh - 33px);
width: 100%;
overflow: auto;
padding: 12px;
box-sizing: border-box;
}
}
@include action-bar;
::v-deep .el-drawer__header {
display: none;
}
</style>

144
yudao-admin-ui/src/views/tool/build/JsonDrawer.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div>
<el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
<div class="action-bar" :style="{'text-align': 'left'}">
<span class="bar-btn" @click="refresh">
<i class="el-icon-refresh" />
刷新
</span>
<span ref="copyBtn" class="bar-btn copy-json-btn">
<i class="el-icon-document-copy" />
复制JSON
</span>
<span class="bar-btn" @click="exportJsonFile">
<i class="el-icon-download" />
导出JSON文件
</span>
<span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
<i class="el-icon-circle-close" />
关闭
</span>
</div>
<div id="editorJson" class="json-editor" />
</el-drawer>
</div>
</template>
<script>
import { beautifierConf } from '@/utils/index'
import ClipboardJS from 'clipboard'
import { saveAs } from 'file-saver'
import loadMonaco from '@/utils/loadMonaco'
import loadBeautifier from '@/utils/loadBeautifier'
let beautifier
let monaco
export default {
components: {},
props: {
jsonStr: {
type: String,
required: true
}
},
data() {
return {}
},
computed: {},
watch: {},
created() {},
mounted() {
window.addEventListener('keydown', this.preventDefaultSave)
const clipboard = new ClipboardJS('.copy-json-btn', {
text: trigger => {
this.$notify({
title: '成功',
message: '代码已复制到剪切板，可粘贴。',
type: 'success'
})
return this.beautifierJson
}
})
clipboard.on('error', e => {
this.$message.error('代码复制失败')
})
},
beforeDestroy() {
window.removeEventListener('keydown', this.preventDefaultSave)
},
methods: {
preventDefaultSave(e) {
if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
}
},
onOpen() {
loadBeautifier(btf => {
beautifier = btf
this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js)
loadMonaco(val => {
monaco = val
this.setEditorValue('editorJson', this.beautifierJson)
})
})
},
onClose() {},
setEditorValue(id, codeStr) {
if (this.jsonEditor) {
this.jsonEditor.setValue(codeStr)
} else {
this.jsonEditor = monaco.editor.create(document.getElementById(id), {
value: codeStr,
theme: 'vs-dark',
language: 'json',
automaticLayout: true
})
// ctrl + s 刷新
this.jsonEditor.onKeyDown(e => {
if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
this.refresh()
}
})
}
},
exportJsonFile() {
this.$prompt('文件名:', '导出文件', {
inputValue: `${+new Date()}.json`,
closeOnClickModal: false,
inputPlaceholder: '请输入文件名'
}).then(({ value }) => {
if (!value) value = `${+new Date()}.json`
const codeStr = this.jsonEditor.getValue()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
saveAs(blob, value)
})
},
refresh() {
try {
this.$emit('refresh', JSON.parse(this.jsonEditor.getValue()))
} catch (error) {
this.$notify({
title: '错误',
message: 'JSON格式错误，请检查',
type: 'error'
})
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
::v-deep .el-drawer__header {
display: none;
}
@include action-bar;
.json-editor{
height: calc(100vh - 33px);
}
</style>

116
yudao-admin-ui/src/views/tool/build/ResourceDialog.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div>
<el-dialog
v-bind="$attrs"
title="外部资源引用"
width="600px"
:close-on-click-modal="false"
v-on="$listeners"
@open="onOpen"
@close="onClose"
>
<el-input
v-for="(item, index) in resources"
:key="index"
v-model="resources[index]"
class="url-item"
placeholder="请输入 css 或 js 资源路径"
prefix-icon="el-icon-link"
clearable
>
<el-button
slot="append"
icon="el-icon-delete"
@click="deleteOne(index)"
/>
</el-input>
<el-button-group class="add-item">
<el-button
plain
@click="addOne('https://lib.baomitu.com/jquery/1.8.3/jquery.min.js')"
>
jQuery1.8.3
</el-button>
<el-button
plain
@click="addOne('https://unpkg.com/http-vue-loader')"
>
http-vue-loader
</el-button>
<el-button
icon="el-icon-circle-plus-outline"
plain
@click="addOne('')"
>
添加其他
</el-button>
</el-button-group>
<div slot="footer">
<el-button @click="close">
取消
</el-button>
<el-button
type="primary"
@click="handelConfirm"
>
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { deepClone } from '@/utils/index'
export default {
components: {},
inheritAttrs: false,
props: ['originResource'],
data() {
return {
resources: null
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
onOpen() {
this.resources = this.originResource.length ? deepClone(this.originResource) : ['']
},
onClose() {
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
const results = this.resources.filter(item => !!item) || []
this.$emit('save', results)
this.close()
if (results.length) {
this.resources = results
}
},
deleteOne(index) {
this.resources.splice(index, 1)
},
addOne(url) {
if (this.resources.indexOf(url) > -1) {
this.$message('资源已存在')
} else {
this.resources.push(url)
}
}
}
}
</script>
<style lang="scss" scoped>
.add-item{
margin-top: 8px;
}
.url-item{
margin-bottom: 12px;
}
</style>

318
yudao-admin-ui/src/views/tool/build/RightPanel.vue
View File

@@ -11,9 +11,9 @@
<el-scrollbar class="right-scrollbar">
<!-- 组件属性 -->
<el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
<el-form-item v-if="activeData.changeTag" label="组件类型">
<el-form-item v-if="activeData.__config__.changeTag" label="组件类型">
<el-select
v-model="activeData.tagIcon"
v-model="activeData.__config__.tagIcon"
placeholder="请选择组件类型"
:style="{width: '100%'}"
@change="tagChange"
@@ -21,27 +21,27 @@
<el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
<el-option
v-for="item in group.options"
:key="item.label"
:label="item.label"
:value="item.tagIcon"
:key="item.__config__.label"
:label="item.__config__.label"
:value="item.__config__.tagIcon"
>
<svg-icon class="node-icon" :icon-class="item.tagIcon" />
<span> {{ item.label }}</span>
<svg-icon class="node-icon" :icon-class="item.__config__.tagIcon" />
<span> {{ item.__config__.label }}</span>
</el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item v-if="activeData.vModel!==undefined" label="字段名">
<el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
<el-form-item v-if="activeData.__vModel__!==undefined" label="字段名">
<el-input v-model="activeData.__vModel__" placeholder="请输入字段名（v-model）" />
</el-form-item>
<el-form-item v-if="activeData.componentName!==undefined" label="组件名">
{{ activeData.componentName }}
<el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名">
{{ activeData.__config__.componentName }}
</el-form-item>
<el-form-item v-if="activeData.label!==undefined" label="标题">
<el-input v-model="activeData.label" placeholder="请输入标题" />
<el-form-item v-if="activeData.__config__.label!==undefined" label="标题">
<el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey" />
</el-form-item>
<el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" />
</el-form-item>
<el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
@@ -49,13 +49,13 @@
<el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
</el-form-item>
<el-form-item v-if="activeData.span!==undefined" label="表单栅格">
<el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
<el-form-item v-if="activeData.__config__.span!==undefined" label="表单栅格">
<el-slider v-model="activeData.__config__.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
</el-form-item>
<el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
<el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined" label="栅格间隔">
<el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
</el-form-item>
<el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
<el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.type!==undefined" label="布局模式">
<el-radio-group v-model="activeData.type">
<el-radio-button label="default" />
<el-radio-button label="flex" />
@@ -78,20 +78,20 @@
<el-radio-button label="bottom" />
</el-radio-group>
</el-form-item>
<el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
<el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
<el-form-item v-if="activeData.__config__.labelWidth!==undefined" label="标签宽度">
<el-input v-model.number="activeData.__config__.labelWidth" type="number" placeholder="请输入标签宽度" />
</el-form-item>
<el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
<el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
</el-form-item>
<el-form-item v-if="activeData.vModel!==undefined" label="默认值">
<el-form-item v-if="activeData.__vModel__!==undefined" label="默认值">
<el-input
:value="setDefaultValue(activeData.defaultValue)"
:value="setDefaultValue(activeData.__config__.defaultValue)"
placeholder="请输入默认值"
@input="onDefaultValueInput"
/>
</el-form-item>
<el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
<el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="至少应选">
<el-input-number
:value="activeData.min"
:min="0"
@@ -99,7 +99,7 @@
@input="$set(activeData, 'min', $event?$event:undefined)"
/>
</el-form-item>
<el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
<el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="最多可选">
<el-input-number
:value="activeData.max"
:min="0"
@@ -107,11 +107,11 @@
@input="$set(activeData, 'max', $event?$event:undefined)"
/>
</el-form-item>
<el-form-item v-if="activeData.prepend!==undefined" label="前缀">
<el-input v-model="activeData.prepend" placeholder="请输入前缀" />
<el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
<el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀" />
</el-form-item>
<el-form-item v-if="activeData.append!==undefined" label="后缀">
<el-input v-model="activeData.append" placeholder="请输入后缀" />
<el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
<el-input v-model="activeData.__slot__.append" placeholder="请输入后缀" />
</el-form-item>
<el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
<el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
@@ -127,7 +127,17 @@
</el-button>
</el-input>
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
<el-form-item
v-if="activeData['icon']!==undefined && activeData.__config__.tag === 'el-button'"
label="按钮图标"
>
<el-input v-model="activeData['icon']" placeholder="请输入按钮图标名称">
<el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('icon')">
选择
</el-button>
</el-input>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="选项分隔符">
<el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
</el-form-item>
<el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
@@ -136,19 +146,22 @@
<el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
<el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
</el-form-item>
<el-form-item v-if="activeData.min !== undefined" label="最小值">
<el-form-item v-if="isShowMin" label="最小值">
<el-input-number v-model="activeData.min" placeholder="最小值" />
</el-form-item>
<el-form-item v-if="activeData.max !== undefined" label="最大值">
<el-form-item v-if="isShowMax" label="最大值">
<el-input-number v-model="activeData.max" placeholder="最大值" />
</el-form-item>
<el-form-item v-if="activeData.step !== undefined" label="步长">
<el-form-item v-if="activeData.height!==undefined" label="组件高度">
<el-input-number v-model="activeData.height" placeholder="高度" @input="changeRenderKey" />
</el-form-item>
<el-form-item v-if="isShowStep" label="步长">
<el-input-number v-model="activeData.step" placeholder="步数" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
<el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="精度">
<el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
<el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="按钮位置">
<el-radio-group v-model="activeData['controls-position']">
<el-radio-button label="">
默认
@@ -186,7 +199,7 @@
/>
</el-form-item>
<el-form-item
v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
v-if="activeData.type !== undefined && 'el-date-picker' === activeData.__config__.tag"
label="时间类型"
>
<el-select
@@ -222,9 +235,9 @@
<el-option label="txt" value=".txt" />
</el-select>
</el-form-item>
<el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
<el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
<el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
<el-form-item v-if="activeData.__config__.fileSize !== undefined" label="文件大小">
<el-input v-model.number="activeData.__config__.fileSize" placeholder="请输入文件大小">
<el-select slot="append" v-model="activeData.__config__.sizeUnit" :style="{ width: '66px' }">
<el-option label="KB" value="KB" />
<el-option label="MB" value="MB" />
<el-option label="GB" value="GB" />
@@ -248,11 +261,30 @@
</el-radio-group>
</el-form-item>
<el-form-item
v-if="activeData.buttonText !== undefined"
v-if="activeData.type !== undefined && activeData.__config__.tag === 'el-button'"
label="按钮类型"
>
<el-select v-model="activeData.type" :style="{ width: '100%' }">
<el-option label="primary" value="primary" />
<el-option label="success" value="success" />
<el-option label="warning" value="warning" />
<el-option label="danger" value="danger" />
<el-option label="info" value="info" />
<el-option label="text" value="text" />
</el-select>
</el-form-item>
<el-form-item
v-if="activeData.__config__.buttonText !== undefined"
v-show="'picture-card' !== activeData['list-type']"
label="按钮文字"
>
<el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
<el-input v-model="activeData.__config__.buttonText" placeholder="请输入按钮文字" />
</el-form-item>
<el-form-item
v-if="activeData.__config__.tag === 'el-button'"
label="按钮文字"
>
<el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字" />
</el-form-item>
<el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
<el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
@@ -270,15 +302,15 @@
@input="setTimeValue($event)"
/>
</el-form-item>
<template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
<template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.__config__.tag) > -1">
<el-divider>选项</el-divider>
<draggable
:list="activeData.options"
:list="activeData.__slot__.options"
:animation="340"
group="selectItem"
handle=".option-drag"
>
<div v-for="(item, index) in activeData.options" :key="index" class="select-item">
<div v-for="(item, index) in activeData.__slot__.options" :key="index" class="select-item">
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
</div>
@@ -289,7 +321,7 @@
:value="item.value"
@input="setOptionValue(item, $event)"
/>
<div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
<div class="close-btn select-line-icon" @click="activeData.__slot__.options.splice(index, 1)">
<i class="el-icon-remove-outline" />
</div>
</div>
@@ -307,10 +339,10 @@
<el-divider />
</template>
<template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
<template v-if="['el-cascader', 'el-table'].includes(activeData.__config__.tag)">
<el-divider>选项</el-divider>
<el-form-item label="数据类型">
<el-radio-group v-model="activeData.dataType" size="small">
<el-form-item v-if="activeData.__config__.dataType" label="数据类型">
<el-radio-group v-model="activeData.__config__.dataType" size="small">
<el-radio-button label="dynamic">
动态数据
</el-radio-button>
@@ -320,27 +352,59 @@
</el-radio-group>
</el-form-item>
<template v-if="activeData.dataType === 'dynamic'">
<el-form-item label="标签键名">
<el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
<template v-if="activeData.__config__.dataType === 'dynamic'">
<el-form-item label="接口地址">
<el-input
v-model="activeData.__config__.url"
:title="activeData.__config__.url"
placeholder="请输入接口地址"
clearable
@blur="$emit('fetch-data', activeData)"
>
<el-select
slot="prepend"
v-model="activeData.__config__.method"
:style="{width: '85px'}"
@change="$emit('fetch-data', activeData)"
>
<el-option label="get" value="get" />
<el-option label="post" value="post" />
<el-option label="put" value="put" />
<el-option label="delete" value="delete" />
</el-select>
</el-input>
</el-form-item>
<el-form-item label="值键名">
<el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
</el-form-item>
<el-form-item label="子级键名">
<el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
<el-form-item label="数据位置">
<el-input
v-model="activeData.__config__.dataPath"
placeholder="请输入数据位置"
@blur="$emit('fetch-data', activeData)"
/>
</el-form-item>
<template v-if="activeData.props && activeData.props.props">
<el-form-item label="标签键名">
<el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />
</el-form-item>
<el-form-item label="值键名">
<el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />
</el-form-item>
<el-form-item label="子级键名">
<el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
</el-form-item>
</template>
</template>
<!-- 级联选择静态树 -->
<el-tree
v-if="activeData.dataType === 'static'"
v-if="activeData.__config__.dataType === 'static'"
draggable
:data="activeData.options"
node-key="id"
:expand-on-click-node="false"
:render-content="renderContent"
/>
<div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
<div v-if="activeData.__config__.dataType === 'static'" style="margin-left: 20px">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
@@ -353,8 +417,8 @@
<el-divider />
</template>
<el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
<el-radio-group v-model="activeData.optionType">
<el-form-item v-if="activeData.__config__.optionType !== undefined" label="选项样式">
<el-radio-group v-model="activeData.__config__.optionType">
<el-radio-button label="default">
默认
</el-radio-button>
@@ -370,6 +434,14 @@
<el-color-picker v-model="activeData['inactive-color']" />
</el-form-item>
<el-form-item v-if="activeData.__config__.showLabel !== undefined
&& activeData.__config__.labelWidth !== undefined" label="显示标签"
>
<el-switch v-model="activeData.__config__.showLabel" />
</el-form-item>
<el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
<el-switch v-model="activeData.branding" @input="changeRenderKey" />
</el-form-item>
<el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
<el-switch v-model="activeData['allow-half']" />
</el-form-item>
@@ -386,16 +458,17 @@
<el-switch v-model="activeData.range" @change="rangeChange" />
</el-form-item>
<el-form-item
v-if="activeData.border !== undefined && activeData.optionType === 'default'"
v-if="activeData.__config__.border !== undefined && activeData.__config__.optionType === 'default'"
label="是否带边框"
>
<el-switch v-model="activeData.border" />
<el-switch v-model="activeData.__config__.border" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
<el-form-item v-if="activeData.__config__.tag === 'el-color-picker'" label="颜色格式">
<el-select
v-model="activeData['color-format']"
placeholder="请选择颜色格式"
:style="{ width: '100%' }"
clearable
@change="colorFormatChange"
>
<el-option
@@ -408,10 +481,11 @@
</el-form-item>
<el-form-item
v-if="activeData.size !== undefined &&
(activeData.optionType === 'button' ||
activeData.border ||
activeData.tag === 'el-color-picker')"
label="选项尺寸"
(activeData.__config__.optionType === 'button' ||
activeData.__config__.border ||
activeData.__config__.tag === 'el-color-picker' ||
activeData.__config__.tag === 'el-button')"
label="组件尺寸"
>
<el-radio-group v-model="activeData.size">
<el-radio-button label="medium">
@@ -428,25 +502,28 @@
<el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
<el-switch v-model="activeData['show-word-limit']" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
<el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="严格步数">
<el-switch v-model="activeData['step-strictly']" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="任选层级">
<el-switch v-model="activeData.props.props.checkStrictly" />
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="是否多选">
<el-switch v-model="activeData.props.props.multiple" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="展示全路径">
<el-switch v-model="activeData['show-all-levels']" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选">
<el-switch v-model="activeData.filterable" />
</el-form-item>
<el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
<el-switch v-model="activeData.clearable" />
</el-form-item>
<el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
<el-switch v-model="activeData.showTip" />
<el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
<el-switch v-model="activeData.__config__.showTip" />
</el-form-item>
<el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
<el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
<el-switch v-model="activeData.multiple" />
</el-form-item>
<el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
@@ -458,20 +535,20 @@
<el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
<el-switch v-model="activeData.disabled" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
<el-form-item v-if="activeData.__config__.tag === 'el-select'" label="能否搜索">
<el-switch v-model="activeData.filterable" />
</el-form-item>
<el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
<el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选">
<el-switch v-model="activeData.multiple" @change="multipleChange" />
</el-form-item>
<el-form-item v-if="activeData.required !== undefined" label="是否必填">
<el-switch v-model="activeData.required" />
<el-form-item v-if="activeData.__config__.required !== undefined" label="是否必填">
<el-switch v-model="activeData.__config__.required" />
</el-form-item>
<template v-if="activeData.layoutTree">
<template v-if="activeData.__config__.layoutTree">
<el-divider>布局结构树</el-divider>
<el-tree
:data="[activeData]"
:data="[activeData.__config__]"
:props="layoutTreeProps"
node-key="renderKey"
default-expand-all
@@ -479,21 +556,21 @@
>
<span slot-scope="{ node, data }">
<span class="node-label">
<svg-icon class="node-icon" :icon-class="data.tagIcon" />
<svg-icon class="node-icon" :icon-class="data.__config__?data.__config__.tagIcon:data.tagIcon" />
{{ node.label }}
</span>
</span>
</el-tree>
</template>
<template v-if="activeData.layout === 'colFormItem'">
<template v-if="Array.isArray(activeData.__config__.regList)">
<el-divider>正则校验</el-divider>
<div
v-for="(item, index) in activeData.regList"
v-for="(item, index) in activeData.__config__.regList"
:key="index"
class="reg-item"
>
<span class="close-btn" @click="activeData.regList.splice(index, 1)">
<span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)">
<i class="el-icon-close" />
</span>
<el-form-item label="表达式">
@@ -548,7 +625,7 @@
</el-radio-group>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
<el-input v-model.number="formConf.labelWidth" type="number" placeholder="请输入标签宽度" />
</el-form-item>
<el-form-item label="栅格间隔">
<el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
@@ -577,10 +654,9 @@ import TreeNodeDialog from './TreeNodeDialog'
import { isNumberStr } from '@/utils/index'
import IconsDialog from './IconsDialog'
import {
inputComponents,
selectComponents,
layoutComponents
inputComponents, selectComponents, layoutComponents
} from '@/utils/generator/config'
import { saveFormConf } from '@/utils/db'
const dateTimeFormat = {
date: 'yyyy-MM-dd',
@@ -593,6 +669,9 @@ const dateTimeFormat = {
datetimerange: 'yyyy-MM-dd HH:mm:ss'
}
// 使changeRenderKey在目标组件改变时可用
const needRerenderList = ['tinymce']
export default {
components: {
TreeNodeDialog,
@@ -688,7 +767,8 @@ export default {
],
layoutTreeProps: {
label(data, node) {
return data.componentName || `${data.label}: ${data.vModel}`
const config = data.__config__
return data.componentName || `${config.label}: ${data.__vModel__}`
}
}
}
@@ -696,14 +776,14 @@ export default {
computed: {
documentLink() {
return (
this.activeData.document
this.activeData.__config__.document
|| 'https://element.eleme.cn/#/zh-CN/component/installation'
)
},
dateOptions() {
if (
this.activeData.type !== undefined
&& this.activeData.tag === 'el-date-picker'
&& this.activeData.__config__.tag === 'el-date-picker'
) {
if (this.activeData['start-placeholder'] === undefined) {
return this.dateTypeOptions
@@ -723,17 +803,37 @@ export default {
options: selectComponents
}
]
},
activeTag() {
return this.activeData.__config__.tag
},
isShowMin() {
return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
},
isShowMax() {
return ['el-input-number', 'el-slider', 'el-rate'].indexOf(this.activeTag) > -1
},
isShowStep() {
return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
}
},
watch: {
formConf: {
handler(val) {
saveFormConf(val)
},
deep: true
}
},
methods: {
addReg() {
this.activeData.regList.push({
this.activeData.__config__.regList.push({
pattern: '',
message: ''
})
},
addSelectItem() {
this.activeData.options.push({
this.activeData.__slot__.options.push({
label: '',
value: ''
})
@@ -768,6 +868,7 @@ export default {
this.currentNode = data.children
},
remove(node, data) {
this.activeData.__config__.defaultValue = [] // 避免删除时报错
const { parent } = node
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
@@ -783,29 +884,29 @@ export default {
if (Array.isArray(val)) {
return val.join(',')
}
if (['string', 'number'].indexOf(val) > -1) {
return val
}
// if (['string', 'number'].indexOf(typeof val) > -1) {
// return val
// }
if (typeof val === 'boolean') {
return `${val}`
}
return val
},
onDefaultValueInput(str) {
if (isArray(this.activeData.defaultValue)) {
if (isArray(this.activeData.__config__.defaultValue)) {
// 数组
this.$set(
this.activeData,
this.activeData.__config__,
'defaultValue',
str.split(',').map(val => (isNumberStr(val) ? +val : val))
)
} else if (['true', 'false'].indexOf(str) > -1) {
// 布尔
this.$set(this.activeData, 'defaultValue', JSON.parse(str))
this.$set(this.activeData.__config__, 'defaultValue', JSON.parse(str))
} else {
// 字符串和数字
this.$set(
this.activeData,
this.activeData.__config__,
'defaultValue',
isNumberStr(str) ? +str : str
)
@@ -820,7 +921,7 @@ export default {
},
setTimeValue(val, type) {
const valueFormat = type === 'week' ? dateTimeFormat.date : val
this.$set(this.activeData, 'defaultValue', null)
this.$set(this.activeData.__config__, 'defaultValue', null)
this.$set(this.activeData, 'value-format', valueFormat)
this.$set(this.activeData, 'format', val)
},
@@ -828,14 +929,14 @@ export default {
this.formConf.span = val
},
multipleChange(val) {
this.$set(this.activeData, 'defaultValue', val ? [] : '')
this.$set(this.activeData.__config__, 'defaultValue', val ? [] : '')
},
dateTypeChange(val) {
this.setTimeValue(dateTimeFormat[val], val)
},
rangeChange(val) {
this.$set(
this.activeData,
this.activeData.__config__,
'defaultValue',
val ? [this.activeData.min, this.activeData.max] : this.activeData.min
)
@@ -847,9 +948,9 @@ export default {
if (val) this.activeData['show-text'] = false
},
colorFormatChange(val) {
this.activeData.defaultValue = null
this.activeData.__config__.defaultValue = null
this.activeData['show-alpha'] = val.indexOf('a') > -1
this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
this.activeData.__config__.renderKey = +new Date() // 更新renderKey,重新渲染该组件
},
openIconsDialog(model) {
this.iconsVisible = true
@@ -859,9 +960,14 @@ export default {
this.activeData[this.currentIconModel] = val
},
tagChange(tagIcon) {
let target = inputComponents.find(item => item.tagIcon === tagIcon)
if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
let target = inputComponents.find(item => item.__config__.tagIcon === tagIcon)
if (!target) target = selectComponents.find(item => item.__config__.tagIcon === tagIcon)
this.$emit('tag-change', target)
},
changeRenderKey() {
if (needRerenderList.includes(this.activeData.__config__.tag)) {
this.activeData.__config__.renderKey = +new Date()
}
}
}
}

11
yudao-admin-ui/src/views/tool/build/TreeNodeDialog.vue
View File

@@ -72,6 +72,9 @@
</template>
<script>
import { isNumberStr } from '@/utils/index'
import { getTreeNodeId, saveTreeNodeId } from '@/utils/db'
const id = getTreeNodeId()
export default {
components: {},
@@ -79,7 +82,7 @@ export default {
props: [],
data() {
return {
id: 100,
id,
formData: {
label: undefined,
value: undefined
@@ -118,6 +121,9 @@ export default {
// eslint-disable-next-line func-names
'formData.value': function (val) {
this.dataType = isNumberStr(val) ? 'number' : 'string'
},
id(val) {
saveTreeNodeId(val)
}
},
created() {},
@@ -147,3 +153,6 @@ export default {
}
}
</script>
<style lang="scss" scoped>
</style>

751
yudao-admin-ui/src/views/tool/build/index.vue
View File

@@ -4,80 +4,52 @@
<div class="logo-wrapper">
<div class="logo">
<img :src="logo" alt="logo"> Form Generator
<a class="github" href="https://github.com/JakHuang/form-generator" target="_blank">
<img src="https://github.githubassets.com/pinned-octocat.svg" alt>
</a>
</div>
</div>
<el-scrollbar class="left-scrollbar">
<div class="components-list">
<div class="components-title">
<svg-icon icon-class="component" />输入型组件
</div>
<draggable
class="components-draggable"
:list="inputComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
>
<div
v-for="(element, index) in inputComponents" :key="index" class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
<svg-icon :icon-class="element.tagIcon" />
{{ element.label }}
</div>
<div v-for="(item, listIndex) in leftComponents" :key="listIndex">
<div class="components-title">
<svg-icon icon-class="component" />
{{ item.title }}
</div>
</draggable>
<div class="components-title">
<svg-icon icon-class="component" />选择型组件
</div>
<draggable
class="components-draggable"
:list="selectComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
>
<div
v-for="(element, index) in selectComponents"
:key="index"
class="components-item"
@click="addComponent(element)"
<draggable
class="components-draggable"
:list="item.list"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
>
<div class="components-body">
<svg-icon :icon-class="element.tagIcon" />
{{ element.label }}
<div
v-for="(element, index) in item.list"
:key="index"
class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
<svg-icon :icon-class="element.__config__.tagIcon" />
{{ element.__config__.label }}
</div>
</div>
</div>
</draggable>
<div class="components-title">
<svg-icon icon-class="component" /> 布局型组件
</draggable>
</div>
<draggable
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"
@click="addComponent(element)"
>
<div class="components-body">
<svg-icon :icon-class="element.tagIcon" />
{{ element.label }}
</div>
</div>
</draggable>
</div>
</el-scrollbar>
</div>
<div class="center-board">
<div class="action-bar">
<el-button icon="el-icon-video-play" type="text" @click="run">
运行
</el-button>
<el-button icon="el-icon-view" type="text" @click="showJson">
查看json
</el-button>
<el-button icon="el-icon-download" type="text" @click="download">
导出vue文件
</el-button>
@@ -98,10 +70,10 @@
>
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
<draggable-item
v-for="(element, index) in drawingList"
:key="element.renderKey"
v-for="(item, index) in drawingList"
:key="item.renderKey"
:drawing-list="drawingList"
:element="element"
:current-item="item"
:index="index"
:active-id="activeId"
:form-conf="formConf"
@@ -123,8 +95,21 @@
:form-conf="formConf"
:show-field="!!drawingList.length"
@tag-change="tagChange"
@fetch-data="fetchData"
/>
<form-drawer
:visible.sync="drawerVisible"
:form-data="formData"
size="100%"
:generate-conf="generateConf"
/>
<json-drawer
size="60%"
:visible.sync="jsonDrawerVisible"
:json-str="JSON.stringify(formData)"
@refresh="refreshJson"
/>
<code-type-dialog
:visible.sync="dialogVisible"
title="选择生成类型"
@@ -137,38 +122,47 @@
<script>
import draggable from 'vuedraggable'
import { debounce } from 'throttle-debounce'
import { saveAs } from 'file-saver'
import beautifier from 'js-beautify'
import ClipboardJS from 'clipboard'
import render from '@/utils/generator/render'
import render from '@/components/render/render'
import FormDrawer from './FormDrawer'
import JsonDrawer from './JsonDrawer'
import RightPanel from './RightPanel'
import {
inputComponents,
selectComponents,
layoutComponents,
formConf
inputComponents, selectComponents, layoutComponents, formConf
} from '@/utils/generator/config'
import {
exportDefault, beautifierConf, isNumberStr, titleCase
exportDefault, beautifierConf, isNumberStr, titleCase, deepClone, isObjectObject
} 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 drawingDefalut from '@/utils/generator/drawingDefalut'
} from '@/components/generator/html'
import { makeUpJs } from '@/components/generator/js'
import { makeUpCss } from '@/components/generator/css'
import drawingDefalut from '@/components/generator/drawingDefalut'
import logo from '@/assets/logo/logo.png'
import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem'
import {
getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
} from '@/utils/db'
import loadBeautifier from '@/utils/loadBeautifier'
let beautifier
const emptyActiveData = { style: {}, autosize: {} }
let oldActiveId
let tempActiveData
const drawingListInDB = getDrawingList()
const formConfInDB = getFormConf()
const idGlobal = getIdGlobal()
export default {
components: {
draggable,
render,
FormDrawer,
JsonDrawer,
RightPanel,
CodeTypeDialog,
DraggableItem
@@ -176,7 +170,7 @@ export default {
data() {
return {
logo,
idGlobal: 100,
idGlobal,
formConf,
inputComponents,
selectComponents,
@@ -188,19 +182,36 @@ export default {
drawerVisible: false,
formData: {},
dialogVisible: false,
jsonDrawerVisible: false,
generateConf: null,
showFileName: false,
activeData: drawingDefalut[0]
activeData: drawingDefalut[0],
saveDrawingListDebounce: debounce(340, saveDrawingList),
saveIdGlobalDebounce: debounce(340, saveIdGlobal),
leftComponents: [
{
title: '输入型组件',
list: inputComponents
},
{
title: '选择型组件',
list: selectComponents
},
{
title: '布局型组件',
list: layoutComponents
}
]
}
},
computed: {
},
watch: {
// eslint-disable-next-line func-names
'activeData.label': function (val, oldVal) {
'activeData.__config__.label': function (val, oldVal) {
if (
this.activeData.placeholder === undefined
|| !this.activeData.tag
|| !this.activeData.__config__.tag
|| oldActiveId !== this.activeId
) {
return
@@ -212,9 +223,34 @@ export default {
oldActiveId = val
},
immediate: true
},
drawingList: {
handler(val) {
this.saveDrawingListDebounce(val)
if (val.length === 0) this.idGlobal = 100
},
deep: true
},
idGlobal: {
handler(val) {
this.saveIdGlobalDebounce(val)
},
immediate: true
}
},
mounted() {
if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
this.drawingList = drawingListInDB
} else {
this.drawingList = drawingDefalut
}
this.activeFormItem(this.drawingList[0])
if (formConfInDB) {
this.formConf = formConfInDB
}
loadBeautifier(btf => {
beautifier = btf
})
const clipboard = new ClipboardJS('#copyNode', {
text: trigger => {
const codeStr = this.generateCode()
@@ -231,42 +267,95 @@ export default {
})
},
methods: {
activeFormItem(element) {
this.activeData = element
this.activeId = element.formId
setObjectValueReduce(obj, strKeys, data) {
const arr = strKeys.split('.')
arr.reduce((pre, item, i) => {
if (arr.length === i + 1) {
pre[item] = data
} else if (!isObjectObject(pre[item])) {
pre[item] = {}
}
return pre[item]
}, obj)
},
onEnd(obj, a) {
setRespData(component, resp) {
const { dataPath, renderKey, dataConsumer } = component.__config__
if (!dataPath || !dataConsumer) return
const respData = dataPath.split('.').reduce((pre, item) => pre[item], resp)
// 将请求回来的数据，赋值到指定属性。
// 以el-tabel为例，根据Element文档，应该将数据赋值给el-tabel的data属性，所以dataConsumer的值应为'data';
// 此时赋值代码可写成 component[dataConsumer] = respData；
// 但为支持更深层级的赋值（如：dataConsumer的值为'options.data'）,使用setObjectValueReduce
this.setObjectValueReduce(component, dataConsumer, respData)
const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
if (i > -1) this.$set(this.drawingList, i, component)
},
fetchData(component) {
const { dataType, method, url } = component.__config__
if (dataType === 'dynamic' && method && url) {
this.setLoading(component, true)
this.$axios({
method,
url
}).then(resp => {
this.setLoading(component, false)
this.setRespData(component, resp.data)
})
}
},
setLoading(component, val) {
const { directives } = component
if (Array.isArray(directives)) {
const t = directives.find(d => d.name === 'loading')
if (t) t.value = val
}
},
activeFormItem(currentItem) {
this.activeData = currentItem
this.activeId = currentItem.__config__.formId
},
onEnd(obj) {
if (obj.from !== obj.to) {
this.fetchData(tempActiveData)
this.activeData = tempActiveData
this.activeId = this.idGlobal
}
},
addComponent(item) {
const clone = this.cloneComponent(item)
this.fetchData(clone)
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 = deepClone(origin)
const config = clone.__config__
config.span = this.formConf.span // 生成代码时，会根据span做精简判断
this.createIdAndKey(clone)
clone.placeholder !== undefined && (clone.placeholder += config.label)
tempActiveData = clone
return tempActiveData
},
createIdAndKey(item) {
const config = item.__config__
config.formId = ++this.idGlobal
config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
if (config.layout === 'colFormItem') {
item.__vModel__ = `field${this.idGlobal}`
} else if (config.layout === 'rowFormItem') {
config.componentName = `row${this.idGlobal}`
!Array.isArray(config.children) && (config.children = [])
delete config.label // rowFormItem无需配置label属性
}
if (Array.isArray(config.children)) {
config.children = config.children.map(childItem => this.createIdAndKey(childItem))
}
return item
},
AssembleFormData() {
this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)),
fields: deepClone(this.drawingList),
...this.formConf
}
},
@@ -291,30 +380,18 @@ export default {
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
() => {
this.drawingList = []
this.idGlobal = 100
}
)
},
drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item))
drawingItemCopy(item, list) {
let clone = deepClone(item)
clone = this.createIdAndKey(clone)
parent.push(clone)
list.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}`
}
if (Array.isArray(item.children)) {
item.children = item.children.map(childItem => this.createIdAndKey(childItem))
}
return item
},
drawingItemDelete(index, parent) {
parent.splice(index, 1)
drawingItemDelete(index, list) {
list.splice(index, 1)
this.$nextTick(() => {
const len = this.drawingList.length
if (len) {
@@ -330,6 +407,10 @@ export default {
const css = cssStyle(makeUpCss(this.formData))
return beautifier.html(html + script + css, beautifierConf.html)
},
showJson() {
this.AssembleFormData()
this.jsonDrawerVisible = true
},
download() {
this.dialogVisible = true
this.showFileName = true
@@ -347,15 +428,18 @@ export default {
},
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
const config = newTag.__config__
newTag.__vModel__ = this.activeData.__vModel__
config.formId = this.activeId
config.span = this.activeData.__config__.span
this.activeData.__config__.tag = config.tag
this.activeData.__config__.tagIcon = config.tagIcon
this.activeData.__config__.document = config.document
if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
config.defaultValue = this.activeData.__config__.defaultValue
}
Object.keys(newTag).forEach(key => {
if (this.activeData[key] !== undefined
&& typeof this.activeData[key] === typeof newTag[key]) {
if (this.activeData[key] !== undefined) {
newTag[key] = this.activeData[key]
}
})
@@ -363,427 +447,24 @@ export default {
this.updateDrawingList(newTag, this.drawingList)
},
updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.formId === this.activeId)
const index = list.findIndex(item => item.__config__.formId === this.activeId)
if (index > -1) {
list.splice(index, 1, newTag)
} else {
list.forEach(item => {
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
})
}
},
refreshJson(data) {
this.drawingList = deepClone(data.fields)
delete data.fields
this.formConf = data
}
}
}
</script>
<style lang='scss'>
body, html{
margin: 0;
padding: 0;
background: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
input, textarea{
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
.editor-tabs{
background: #121315;
.el-tabs__header{
margin: 0;
border-bottom-color: #121315;
.el-tabs__nav{
border-color: #121315;
}
}
.el-tabs__item{
height: 32px;
line-height: 32px;
color: #888a8e;
border-left: 1px solid #121315 !important;
background: #363636;
margin-right: 5px;
user-select: none;
}
.el-tabs__item.is-active{
background: #1e1e1e;
border-bottom-color: #1e1e1e!important;
color: #fff;
}
.el-icon-edit{
color: #f1fa8c;
}
.el-icon-document{
color: #a95812;
}
}
// home
.right-scrollbar {
.el-scrollbar__view {
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;
}
.el-tabs__item{
width: 50%;
text-align: center;
}
.el-tabs__nav{
width: 100%;
}
}
.reg-item{
padding: 12px 6px;
background: #f8f8f8;
position: relative;
border-radius: 4px;
.close-btn{
position: absolute;
right: -6px;
top: -6px;
display: block;
width: 16px;
height: 16px;
line-height: 16px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
color: #fff;
text-align: center;
z-index: 1;
cursor: pointer;
font-size: 12px;
&:hover{
background: rgba(210, 23, 23, 0.5)
}
}
& + .reg-item{
margin-top: 18px;
}
}
.action-bar{
& .el-button+.el-button {
margin-left: 15px;
}
& i {
font-size: 20px;
vertical-align: middle;
position: relative;
top: -1px;
}
}
.custom-tree-node{
width: 100%;
font-size: 14px;
.node-operation{
float: right;
}
i[class*="el-icon"] + i[class*="el-icon"]{
margin-left: 6px;
}
.el-icon-plus{
color: #409EFF;
}
.el-icon-delete{
color: #157a0c;
}
}
.left-scrollbar .el-scrollbar__view{
overflow-x: hidden;
}
.el-rate{
display: inline-block;
vertical-align: text-top;
}
.el-upload__tip{
line-height: 1.2;
}
$selectedColor: #f6f7ff;
$lighterBlue: #409EFF;
.container {
position: relative;
width: 100%;
height: 100%;
}
.components-list {
padding: 8px;
box-sizing: border-box;
height: 100%;
.components-item {
display: inline-block;
width: 48%;
margin: 1%;
transition: transform 0ms !important;
}
}
.components-draggable{
padding-bottom: 20px;
}
.components-title{
font-size: 14px;
color: #222;
margin: 6px 2px;
.svg-icon{
color: #666;
font-size: 18px;
}
}
.components-body {
padding: 8px 10px;
background: $selectedColor;
font-size: 12px;
cursor: move;
border: 1px dashed $selectedColor;
border-radius: 3px;
.svg-icon{
color: #777;
font-size: 15px;
}
&:hover {
border: 1px dashed #787be8;
color: #787be8;
.svg-icon {
color: #787be8;
}
}
}
.left-board {
width: 260px;
position: absolute;
left: 0;
top: 0;
height: 100vh;
}
.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;
box-sizing: border-box;
}
.center-board {
height: 100vh;
width: auto;
margin: 0 350px 0 260px;
box-sizing: border-box;
}
.empty-info{
position: absolute;
top: 46%;
left: 0;
right: 0;
text-align: center;
font-size: 18px;
color: #ccb1ea;
letter-spacing: 4px;
}
.action-bar{
position: relative;
height: 42px;
text-align: right;
padding: 0 15px;
box-sizing: border-box;;
border: 1px solid #f1e8e8;
border-top: none;
border-left: none;
.delete-btn{
color: #F56C6C;
}
}
.logo-wrapper{
position: relative;
height: 42px;
background: #fff;
border-bottom: 1px solid #f1e8e8;
box-sizing: border-box;
}
.logo{
position: absolute;
left: 12px;
top: 6px;
line-height: 30px;
color: #00afff;
font-weight: 600;
font-size: 17px;
white-space: nowrap;
> img{
width: 30px;
height: 30px;
vertical-align: top;
}
.github{
display: inline-block;
vertical-align: sub;
margin-left: 15px;
> img{
height: 22px;
}
}
}
.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;
left: 0;
right: 0;
top: 0;
height: 3px;
background: rgb(89, 89, 223);
z-index: 2;
}
}
.components-item.sortable-ghost {
width: 100%;
height: 60px;
background-color: $selectedColor;
}
.active-from-item {
& > .el-form-item{
background: $selectedColor;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
display: initial;
}
& > .component-name{
color: $lighterBlue;
}
}
.el-form-item{
margin-bottom: 15px;
}
}
.drawing-item{
position: relative;
cursor: move;
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
border: 1px dashed #ccc;
}
.el-form-item{
padding: 12px 10px;
}
}
.drawing-row-item{
position: relative;
cursor: move;
box-sizing: border-box;
border: 1px dashed #ccc;
border-radius: 3px;
padding: 0 2px;
margin-bottom: 15px;
.drawing-row-item {
margin-bottom: 2px;
}
.el-col{
margin-top: 22px;
}
.el-form-item{
margin-bottom: 0;
}
.drag-wrapper{
min-height: 80px;
}
&.active-from-item{
border: 1px dashed $lighterBlue;
}
.component-name{
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: #bbb;
display: inline-block;
padding: 0 6px;
}
}
.drawing-item, .drawing-row-item{
&:hover {
& > .el-form-item{
background: $selectedColor;
border-radius: 6px;
}
& > .drawing-item-copy, & > .drawing-item-delete{
display: initial;
}
}
& > .drawing-item-copy, & > .drawing-item-delete{
display: none;
position: absolute;
top: -10px;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 50%;
font-size: 12px;
border: 1px solid;
cursor: pointer;
z-index: 1;
}
& > .drawing-item-copy{
right: 56px;
border-color: $lighterBlue;
color: $lighterBlue;
background: #fff;
&:hover{
background: $lighterBlue;
color: #fff;
}
}
& > .drawing-item-delete{
right: 24px;
border-color: #F56C6C;
color: #F56C6C;
background: #fff;
&:hover{
background: #F56C6C;
color: #fff;
}
}
}
@import '@/styles/home';
</style>

17
yudao-admin-ui/src/views/tool/build/main.js Normal file
View File

@@ -0,0 +1,17 @@
import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import '@/styles/index.scss'
import '@/icons'
import axios from 'axios'
import Tinymce from '@/components/tinymce/index.vue'
Vue.component('tinymce', Tinymce)
Vue.config.productionTip = false
Vue.prototype.$axios = axios
new Vue({
router,
render: h => h(App)
}).$mount('#app')