parent
c77fe1cd93
commit
97e0ae366b
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<el-dialog v-bind="$attrs" width="500px" :close-on-click-modal="false" :modal-append-to-body="false"
|
||||||
|
v-on="$listeners" @open="onOpen" @close="onClose">
|
||||||
|
<el-row :gutter="15">
|
||||||
|
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="生成类型" prop="type">
|
||||||
|
<el-radio-group v-model="formData.type">
|
||||||
|
<el-radio-button v-for="(item, index) in typeOptions" :key="index" :label="item.value"
|
||||||
|
:disabled="item.disabled">
|
||||||
|
{{ item.label }}
|
||||||
|
</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="showFileName" label="文件名" prop="fileName">
|
||||||
|
<el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-form>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<div slot="footer">
|
||||||
|
<el-button @click="close">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" @click="handleConfirm">
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: ['showFileName'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
fileName: undefined,
|
||||||
|
type: 'file'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
fileName: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入文件名',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
type: [{
|
||||||
|
required: true,
|
||||||
|
message: '生成类型不能为空',
|
||||||
|
trigger: 'change'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
typeOptions: [{
|
||||||
|
label: '页面',
|
||||||
|
value: 'file'
|
||||||
|
}, {
|
||||||
|
label: '弹窗',
|
||||||
|
value: 'dialog'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
mounted() { },
|
||||||
|
methods: {
|
||||||
|
onOpen() {
|
||||||
|
console.log("dakai");
|
||||||
|
if (this.showFileName) {
|
||||||
|
this.formData.fileName = `${+new Date()}.vue`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
},
|
||||||
|
close(e) {
|
||||||
|
console.log("123132");
|
||||||
|
this.$emit('update:visible', false)
|
||||||
|
},
|
||||||
|
handleConfirm() {
|
||||||
|
console.log("成功");
|
||||||
|
this.$refs.elForm.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
this.$emit('confirm', { ...this.formData })
|
||||||
|
this.close()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
<script>
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
import render from '@/utils/generator/render'
|
||||||
|
|
||||||
|
const components = {
|
||||||
|
itemBtns(h, element, index, parent) {
|
||||||
|
const { copyItem, deleteItem } = this.$listeners
|
||||||
|
// return [
|
||||||
|
// <span class="drawing-item-copy" title="复制" onClick={event => {
|
||||||
|
// copyItem(element, parent); event.stopPropagation()
|
||||||
|
// }}>
|
||||||
|
// <i class="el-icon-copy-document" />
|
||||||
|
// </span>,
|
||||||
|
// <span class="drawing-item-delete" title="删除" onClick={event => {
|
||||||
|
// deleteItem(index, parent); event.stopPropagation()
|
||||||
|
// }}>
|
||||||
|
// <i class="el-icon-delete" />
|
||||||
|
// </span>
|
||||||
|
// ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const layouts = {
|
||||||
|
colFormItem(h, element, index, parent) {
|
||||||
|
const { activeItem } = this.$listeners
|
||||||
|
let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
|
||||||
|
if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
|
||||||
|
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-form-item>
|
||||||
|
{components.itemBtns.apply(this, arguments)}
|
||||||
|
</el-col>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
rowFormItem(h, element, index, parent) {
|
||||||
|
const { activeItem } = this.$listeners
|
||||||
|
const className = this.activeId === element.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}>
|
||||||
|
{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">
|
||||||
|
{child}
|
||||||
|
</draggable>
|
||||||
|
{components.itemBtns.apply(this, arguments)}
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderChildren(h, element, index, parent) {
|
||||||
|
if (!Array.isArray(element.children)) return null
|
||||||
|
return element.children.map((el, i) => {
|
||||||
|
const layout = layouts[el.layout]
|
||||||
|
if (layout) {
|
||||||
|
return layout.call(this, h, el, i, element.children)
|
||||||
|
}
|
||||||
|
return layoutIsNotFound()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function layoutIsNotFound() {
|
||||||
|
throw new Error(`没有与${this.element.layout}匹配的layout`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
render,
|
||||||
|
draggable
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'element',
|
||||||
|
'index',
|
||||||
|
'drawingList',
|
||||||
|
'activeId',
|
||||||
|
'formConf'
|
||||||
|
],
|
||||||
|
render(h) {
|
||||||
|
const layout = layouts[this.element.layout]
|
||||||
|
|
||||||
|
if (layout) {
|
||||||
|
return layout.call(this, h, this.element, this.index, this.drawingList)
|
||||||
|
}
|
||||||
|
return layoutIsNotFound()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
<template>
|
||||||
|
<div class="icon-dialog">
|
||||||
|
<el-dialog
|
||||||
|
v-bind="$attrs"
|
||||||
|
width="980px"
|
||||||
|
:modal-append-to-body="false"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
v-on="$listeners"
|
||||||
|
@open="onOpen"
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
|
<div slot="title">
|
||||||
|
选择图标
|
||||||
|
<el-input
|
||||||
|
v-model="key"
|
||||||
|
size="mini"
|
||||||
|
:style="{width: '260px'}"
|
||||||
|
placeholder="请输入图标名称"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ul class="icon-ul">
|
||||||
|
<li
|
||||||
|
v-for="icon in iconList"
|
||||||
|
:key="icon"
|
||||||
|
:class="active===icon?'active-item':''"
|
||||||
|
@click="onSelect(icon)"
|
||||||
|
>
|
||||||
|
<i :class="icon" />
|
||||||
|
<div>{{ icon }}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import iconList from '@/utils/generator/icon.json'
|
||||||
|
|
||||||
|
const originList = iconList.map(name => `el-icon-${name}`)
|
||||||
|
|
||||||
|
export default {
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: ['current'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
iconList: originList,
|
||||||
|
active: null,
|
||||||
|
key: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
key(val) {
|
||||||
|
if (val) {
|
||||||
|
this.iconList = originList.filter(name => name.indexOf(val) > -1)
|
||||||
|
} else {
|
||||||
|
this.iconList = originList
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onOpen() {
|
||||||
|
this.active = this.current
|
||||||
|
this.key = ''
|
||||||
|
},
|
||||||
|
onClose() {},
|
||||||
|
onSelect(icon) {
|
||||||
|
this.active = icon
|
||||||
|
this.$emit('select', icon)
|
||||||
|
this.$emit('update:visible', false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.icon-ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 0;
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 16.66%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 108px;
|
||||||
|
padding: 15px 6px 6px 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
&:hover {
|
||||||
|
background: #f2f2f2;
|
||||||
|
}
|
||||||
|
&.active-item{
|
||||||
|
background: #e1f3fb;
|
||||||
|
color: #7a6df0
|
||||||
|
}
|
||||||
|
> i {
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-dialog {
|
||||||
|
::v-deep .el-dialog {
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 4vh !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-height: 92vh;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.el-dialog__header {
|
||||||
|
padding-top: 14px;
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
margin: 0 20px 20px 20px;
|
||||||
|
padding: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,149 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog
|
||||||
|
v-bind="$attrs"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:modal-append-to-body="false"
|
||||||
|
v-on="$listeners"
|
||||||
|
@open="onOpen"
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
|
<el-row :gutter="0">
|
||||||
|
<el-form
|
||||||
|
ref="elForm"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
size="small"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item
|
||||||
|
label="选项名"
|
||||||
|
prop="label"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="formData.label"
|
||||||
|
placeholder="请输入选项名"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item
|
||||||
|
label="选项值"
|
||||||
|
prop="value"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="formData.value"
|
||||||
|
placeholder="请输入选项值"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-select
|
||||||
|
slot="append"
|
||||||
|
v-model="dataType"
|
||||||
|
:style="{width: '100px'}"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, index) in dataTypeOptions"
|
||||||
|
:key="index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
:disabled="item.disabled"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-form>
|
||||||
|
</el-row>
|
||||||
|
<div slot="footer">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="handleConfirm"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="close">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { isNumberStr } from '@/utils/index'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: [],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id: 100,
|
||||||
|
formData: {
|
||||||
|
label: undefined,
|
||||||
|
value: undefined
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
label: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入选项名',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
value: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入选项值',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
dataType: 'string',
|
||||||
|
dataTypeOptions: [
|
||||||
|
{
|
||||||
|
label: '字符串',
|
||||||
|
value: 'string'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数字',
|
||||||
|
value: 'number'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {
|
||||||
|
// eslint-disable-next-line func-names
|
||||||
|
'formData.value': function (val) {
|
||||||
|
this.dataType = isNumberStr(val) ? 'number' : 'string'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
onOpen() {
|
||||||
|
this.formData = {
|
||||||
|
label: undefined,
|
||||||
|
value: undefined
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClose() {},
|
||||||
|
close() {
|
||||||
|
this.$emit('update:visible', false)
|
||||||
|
},
|
||||||
|
handleConfirm() {
|
||||||
|
this.$refs.elForm.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
if (this.dataType === 'number') {
|
||||||
|
this.formData.value = parseFloat(this.formData.value)
|
||||||
|
}
|
||||||
|
this.formData.id = this.id++
|
||||||
|
this.$emit('commit', this.formData)
|
||||||
|
this.close()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue