elink-star
/
tduck-front
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add editor radio other 

fix style
old
wangqing 5 years ago
parent
2b9b968fbd
commit
17632466e8
14 changed files with 1293 additions and 1126 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/assets/styles/form/home.scss
  2. 61
      src/components/parser/Parser.vue
  3. 11
      src/components/render/render.js
  4. 10
      src/components/render/slots/el-checkbox-group.js
  5. 10
      src/components/render/slots/el-radio-group.js
  6. 3
      src/components/tinymce/index.vue
  7. 2
      src/router/modules/root.js
  8. 1
      src/utils/convert.js
  9. 58
      src/views/form/DraggableItem.vue
  10. 2
      src/views/form/ProjectForm.vue
  11. 395
      src/views/form/RightPanel.vue
  12. 2
      src/views/form/editor.vue
  13. 7
      src/views/project/MyProject.vue
  14. 28
      src/views/test.vue

7
src/assets/styles/form/home.scss
View File

@ -1,5 +1,5 @@
$selectedColor: #f5f8ff; $selectedColor: #fafafa;
$lighterBlue: #4aa0fa; $lighterBlue: #e4efff;
.form-edit-container { .form-edit-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -55,7 +55,7 @@ $lighterBlue: #4aa0fa;
left: 40px; left: 40px;
top: 0; top: 0;
height: 100vh; height: 100vh;
//background-color: rgba(255, 255, 255, 100);
} }
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
border-bottom: none; border-bottom: none;
@ -65,6 +65,7 @@ $lighterBlue: #4aa0fa;
overflow: hidden; overflow: hidden;
margin: 5px; margin: 5px;
border-radius: 7px; border-radius: 7px;
background-color: rgba(255, 255, 255, 100);
//text-align: center; //text-align: center;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 100); border: 1px solid rgba(255, 255, 255, 100);

61
src/components/parser/Parser.vue
View File

@ -160,20 +160,45 @@ function setValue(event, config, scheme) {
setValueLabel.call(this, event, config, scheme) setValueLabel.call(this, event, config, scheme)
} }
/**
* radio checkbox 其他输入框值处理
*/
function setOtherValueLabel(event, config) {
let value = this[this.formConf.formModel][config.__vModel__]
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event)
setValueLabel.call(this, value, config.__config__, config)
}
/**
* 保存选项的label值
* @param event
* @param config
* @param scheme
*/
function setValueLabel(event, config, scheme) { function setValueLabel(event, config, scheme) {
let tagOptionKey = processType[config.tag] let tagOptionKey = processType[config.tag]
if (tagOptionKey) { if (tagOptionKey) {
if (event instanceof Array) { if (event instanceof Array) {
let labelStr = '' let labelArr = new Array()
event.forEach(item => { event.forEach(item => {
//拼到头部
if (item === 0) {
labelArr.push(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`])
}else{
let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item) let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item)
labelStr += label + ',' labelArr.push(label)
}
}) })
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelStr) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelArr.join(','))
} else {
//多选 单选 其他自定义输入
if (event == 0) {
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}`, this[this.formConf.labelFormModel][`${config.__vModel__}other`])
} else { } else {
let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) let item = _.find(_.get(scheme, tagOptionKey), {'value': event})
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label)
} }
}
} else if (config.tag === 'el-upload') { } else if (config.tag === 'el-upload') {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
} else { } else {
@ -206,7 +231,7 @@ function buildListeners(scheme) {
listeners.input = event => setValue.call(this, event, config, scheme) listeners.input = event => setValue.call(this, event, config, scheme)
listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList) listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList)
listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList) listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList)
listeners.selectOtherChange = (event, config) => setOtherValueLabel.call(this, event, config)
return listeners return listeners
} }
@ -328,3 +353,31 @@ export default {
} }
} }
</script> </script>
<style scoped>
/deep/ .el-radio-group {
margin-left: 10px;
}
/deep/ .el-radio {
display: block;
height: 23px;
line-height: 23px;
}
/deep/ .el-checkbox-group {
margin-left: 10px;
}
/deep/ .el-checkbox {
display: block;
}
/deep/ .item-other-input {
margin-left: 20px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
/deep/ .item-other-input:focus {
outline: none;
}
</style>

11
src/components/render/render.js
View File

@ -26,7 +26,7 @@ function vModel(dataObject, defaultValue) {
this.$emit('deleteUpload', file, fileList) this.$emit('deleteUpload', file, fileList)
} }
dataObject.attrs['on-exceed'] = (files, fileList) => { dataObject.attrs['on-exceed'] = (files, fileList) => {
this.$message.error(`最多上传${config.limit}个文件`); this.$message.error(`最多上传${config.limit}个文件`)
}, },
dataObject.attrs['before-upload'] = (file) => { dataObject.attrs['before-upload'] = (file) => {
let sizeUnitNum = 1 let sizeUnitNum = 1
@ -42,12 +42,11 @@ function vModel(dataObject, defaultValue) {
sizeUnitNum = 1024 * 1024 * 1024 sizeUnitNum = 1024 * 1024 * 1024
break break
} }
let totalSize= config.fileSize*sizeUnitNum let totalSize = config.fileSize * sizeUnitNum
if (file.size> totalSize) { if (file.size > totalSize) {
this.$message.error(`上传图片大小不能超过${config.fileSize}${config.sizeUnit}`); this.$message.error(`上传图片大小不能超过${config.fileSize}${config.sizeUnit}`)
return false return false
} }
console.log(dataObject)
} }
} else { } else {
dataObject.props.value = defaultValue dataObject.props.value = defaultValue
@ -65,7 +64,7 @@ function mountSlotFlies(h, confClone, children) {
Object.keys(childObjs).forEach(key => { Object.keys(childObjs).forEach(key => {
const childFunc = childObjs[key] const childFunc = childObjs[key]
if (confClone.__slot__ && confClone.__slot__[key]) { if (confClone.__slot__ && confClone.__slot__[key]) {
children.push(childFunc(h, confClone, key)) children.push(childFunc(h, confClone, key, this))
} }
}) })
} }

10
src/components/render/slots/el-checkbox-group.js
View File

@ -1,12 +1,20 @@
export default { export default {
options(h, conf, key) { options(h, conf, key, that) {
const list = [] const list = []
conf.__slot__.options.forEach(item => { conf.__slot__.options.forEach(item => {
if (conf.__config__.optionType === 'button') { if (conf.__config__.optionType === 'button') {
list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>) list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
} else {
if (item.value == 0) {
list.push(<el-checkbox label={item.value}
border={conf.border}>{item.label}
<input class='item-other-input' onChange={event => {
that.$emit('selectOtherChange', event.target.value, conf)
}}/></el-checkbox>)
} else { } else {
list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>) list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>)
} }
}
}) })
return list return list
} }

10
src/components/render/slots/el-radio-group.js
View File

@ -1,12 +1,20 @@
export default { export default {
options(h, conf, key) { options(h, conf, key, that) {
const list = [] const list = []
conf.__slot__.options.forEach(item => { conf.__slot__.options.forEach(item => {
if (conf.__config__.optionType === 'button') { if (conf.__config__.optionType === 'button') {
list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>) list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>)
} else {
if (item.value == 0) {
list.push(<el-radio label={item.value} border={conf.border} >
{item.label}<input class='item-other-input' onChange={event => {
that.$emit('selectOtherChange', event.target.value,conf)
}}/>
</el-radio>)
} else { } else {
list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>) list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>)
} }
}
}) })
return list return list
} }

3
src/components/tinymce/index.vue
View File

@ -42,10 +42,11 @@ export default {
menubar: 'false', menubar: 'false',
skin_url: '/tinymce/skins/ui/tduck', skin_url: '/tinymce/skins/ui/tduck',
content_css : '/tinymce/skins/content/tduck' , content_css : '/tinymce/skins/content/tduck' ,
toolbar_mode:'floating',
cache_suffix: '?v='+new Date(), cache_suffix: '?v='+new Date(),
plugins, plugins,
toolbar, toolbar,
toolbar_drawer:'sliding',
toolbar_mode:'sliding',
height: 200, height: 200,
// fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", // fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
branding: false, branding: false,

2
src/router/modules/root.js
View File

@ -2,7 +2,7 @@ export default [
{ {
path: '/test', path: '/test',
meta: {requireLogin: false}, meta: {requireLogin: false},
component: () => import(/* webpackChunkName: 'root' */ '@/components/tinymce/example/Index') component: () => import(/* webpackChunkName: 'root' */ '@/views/test')
}, },
{ {
path: '/redirect/:type', path: '/redirect/:type',

1
src/utils/convert.js
View File

@ -54,6 +54,7 @@ export function dbDataConvertForItemJson(data) {
_.set(jsonItem, param[key], value) _.set(jsonItem, param[key], value)
}) })
} }
jsonItem.sort = data.sort
jsonItem.typeId = data.type jsonItem.typeId = data.type
jsonItem.__config__.formId = data.formItemId jsonItem.__config__.formId = data.formItemId
jsonItem.__config__.label = data.label jsonItem.__config__.label = data.label

58
src/views/form/DraggableItem.vue
View File

@ -4,24 +4,26 @@ import render from '@/components/render/render'
const components = { const components = {
itemBtns(h, currentItem, index, list) { itemBtns(h, currentItem, index, list) {
const { copyItem, deleteItem } = this.$listeners const {copyItem, deleteItem} = this.$listeners
return [ return [
<span class="drawing-item-copy" title="复制" onClick={event => { <span class="drawing-item-copy" title="复制" onClick={event => {
copyItem(currentItem, list); event.stopPropagation() copyItem(currentItem, list)
event.stopPropagation()
}}> }}>
<i class="el-icon-copy-document" /> <i class="el-icon-copy-document"/>
</span>, </span>,
<span class="drawing-item-delete" title="删除" onClick={event => { <span class="drawing-item-delete" title="删除" onClick={event => {
deleteItem(index, list); event.stopPropagation() deleteItem(index, list)
event.stopPropagation()
}}> }}>
<i class="el-icon-delete" /> <i class="el-icon-delete"/>
</span> </span>
] ]
} }
} }
const layouts = { const layouts = {
colFormItem(h, currentItem, index, list) { colFormItem(h, currentItem, index, list) {
const { activeItem, changeLabel } = this.$listeners const {activeItem, changeLabel} = this.$listeners
const config = currentItem.__config__ const config = currentItem.__config__
const child = renderChildren.apply(this, arguments) const child = renderChildren.apply(this, arguments)
let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item' let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
@ -30,10 +32,13 @@ const layouts = {
if (config.showLabel === false) labelWidth = '0' if (config.showLabel === false) labelWidth = '0'
return ( return (
<el-col span={config.span} class={className} <el-col span={config.span} class={className}
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}> nativeOnClick={event => {
activeItem(currentItem)
event.stopPropagation()
}}>
<el-form-item label-width={labelWidth} <el-form-item label-width={labelWidth}
label={config.showLabel ? config.label : ''} required={config.required}> label={config.showLabel ? config.label : ''} required={config.required}>
<render key={config.renderKey} conf={currentItem} onInput={ event => { <render key={config.renderKey} conf={currentItem} onInput={event => {
this.$set(config, 'defaultValue', event) this.$set(config, 'defaultValue', event)
}}> }}>
{child} {child}
@ -44,7 +49,7 @@ const layouts = {
) )
}, },
rowFormItem(h, currentItem, index, list) { rowFormItem(h, currentItem, index, list) {
const { activeItem } = this.$listeners const {activeItem} = this.$listeners
const config = currentItem.__config__ const config = currentItem.__config__
const className = this.activeId === config.formId const className = this.activeId === config.formId
? 'drawing-row-item active-from-item' ? 'drawing-row-item active-from-item'
@ -58,7 +63,10 @@ const layouts = {
return ( return (
<el-col span={config.span}> <el-col span={config.span}>
<el-row gutter={config.gutter} class={className} <el-row gutter={config.gutter} class={className}
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}> nativeOnClick={event => {
activeItem(currentItem)
event.stopPropagation()
}}>
<span class="component-name">{config.componentName}</span> <span class="component-name">{config.componentName}</span>
<draggable list={config.children || []} animation={340} <draggable list={config.children || []} animation={340}
group="componentsGroup" class="drag-wrapper"> group="componentsGroup" class="drag-wrapper">
@ -72,7 +80,7 @@ const layouts = {
raw(h, currentItem, index, list) { raw(h, currentItem, index, list) {
const config = currentItem.__config__ const config = currentItem.__config__
const child = renderChildren.apply(this, arguments) const child = renderChildren.apply(this, arguments)
return <render key={config.renderKey} conf={currentItem} onInput={ event => { return <render key={config.renderKey} conf={currentItem} onInput={event => {
this.$set(config, 'defaultValue', event) this.$set(config, 'defaultValue', event)
}}> }}>
{child} {child}
@ -118,3 +126,31 @@ export default {
} }
} }
</script> </script>
<style scoped>
/deep/ .el-radio-group {
margin-left: 10px;
}
/deep/ .el-radio {
display: block;
height: 23px;
line-height: 23px;
}
/deep/ .el-checkbox-group {
margin-left: 10px;
}
/deep/ .el-checkbox {
display: block;
}
/deep/ .item-other-input {
margin-left: 20px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
/deep/ .item-other-input:focus {
outline: none;
}
</style>

2
src/views/form/ProjectForm.vue
View File

@ -17,7 +17,7 @@
</h4> </h4>
<div <div
v-show="projectTheme.showDescribe" v-show="projectTheme.showDescribe"
class="form-name-text" v-html="formConf.description" > class="form-name-text" v-html="formConf.description">
</div> </div>
<el-divider> <el-divider>
</el-divider> </el-divider>

395
src/views/form/RightPanel.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="right-board"> <div class="right-board">
<el-tabs v-model="currentTab" class="center-tabs"> <el-tabs v-model="currentTab" class="center-tabs">
<el-tab-pane label="组件属性" name="field" /> <el-tab-pane label="组件属性" name="field"/>
</el-tabs> </el-tabs>
<div class="field-box"> <div class="field-box">
<el-scrollbar class="right-scrollbar"> <el-scrollbar class="right-scrollbar">
@ -21,42 +21,45 @@
:label="item.__config__.label" :label="item.__config__.label"
:value="item.__config__.tagIcon" :value="item.__config__.tagIcon"
> >
<svg-icon :name="item.__config__.tagIcon" class="node-icon" /> <svg-icon :name="item.__config__.tagIcon" class="node-icon"/>
<!-- <svg-icon class="node-icon" :icon-class="item.__config__.tagIcon" />--> <!-- <svg-icon class="node-icon" :icon-class="item.__config__.tagIcon" />-->
<span> {{ item.__config__.label }}{{item.__config__.tagIcon}}</span> <span> {{ item.__config__.label }}{{ item.__config__.tagIcon }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item v-if="activeData.__vModel__!==undefined" label="字段名">--> <!-- <el-form-item v-if="activeData.__vModel__!==undefined" label="字段名">-->
<!-- <el-input v-model="activeData.__vModel__" placeholder="请输入字段名（v-model）" />--> <!-- <el-input v-model="activeData.__vModel__" placeholder="请输入字段名（v-model）" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名"> <el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名">
{{ activeData.__config__.componentName }} {{ activeData.__config__.componentName }}
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.label!==undefined" label="标题"> <el-form-item v-if="activeData.__config__.label!==undefined" label="标题">
<el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey" /> <el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.placeholder!==undefined" label="占位提示"> <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" /> <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位"> <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" /> <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位"> <el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" /> <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.span!==undefined" label="表单栅格"> <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-slider v-model="activeData.__config__.span" :max="24" :min="1" :marks="{12:''}"
@change="spanChange"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined" label="栅格间隔"> <el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined"
<el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" /> label="栅格间隔">
<el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.type!==undefined" label="布局模式"> <el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.type!==undefined"
label="布局模式">
<el-radio-group v-model="activeData.type"> <el-radio-group v-model="activeData.type">
<el-radio-button label="default" /> <el-radio-button label="default"/>
<el-radio-button label="flex" /> <el-radio-button label="flex"/>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列"> <el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
@ -71,16 +74,17 @@
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列"> <el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
<el-radio-group v-model="activeData.align"> <el-radio-group v-model="activeData.align">
<el-radio-button label="top" /> <el-radio-button label="top"/>
<el-radio-button label="middle" /> <el-radio-button label="middle"/>
<el-radio-button label="bottom" /> <el-radio-button label="bottom"/>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.labelWidth!==undefined" label="标签宽度"> <el-form-item v-if="activeData.__config__.labelWidth!==undefined" label="标签宽度">
<el-input v-model.number="activeData.__config__.labelWidth" type="number" placeholder="请输入标签宽度" /> <el-input v-model.number="activeData.__config__.labelWidth" type="number"
placeholder="请输入标签宽度"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度"> <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
<el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable /> <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__vModel__!==undefined" label="默认值"> <el-form-item v-if="activeData.__vModel__!==undefined" label="默认值">
<el-input <el-input
@ -106,10 +110,10 @@
/> />
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀"> <el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
<el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀" /> <el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀"> <el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
<el-input v-model="activeData.__slot__.append" placeholder="请输入后缀" /> <el-input v-model="activeData.__slot__.append" placeholder="请输入后缀"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标"> <el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
<el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称"> <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
@ -136,28 +140,28 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="选项分隔符"> <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="选项分隔符">
<el-input v-model="activeData.separator" placeholder="请输入选项分隔符" /> <el-input v-model="activeData.separator" placeholder="请输入选项分隔符"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.autosize !== undefined" label="最小行数"> <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
<el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" /> <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.autosize !== undefined" label="最大行数"> <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
<el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" /> <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数"/>
</el-form-item> </el-form-item>
<el-form-item v-if="isShowMin" label="最小值"> <el-form-item v-if="isShowMin" label="最小值">
<el-input-number v-model="activeData.min" placeholder="最小值" /> <el-input-number v-model="activeData.min" placeholder="最小值"/>
</el-form-item> </el-form-item>
<el-form-item v-if="isShowMax" label="最大值"> <el-form-item v-if="isShowMax" label="最大值">
<el-input-number v-model="activeData.max" placeholder="最大值" /> <el-input-number v-model="activeData.max" placeholder="最大值"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.height!==undefined" label="组件高度"> <el-form-item v-if="activeData.height!==undefined" label="组件高度">
<el-input-number v-model="activeData.height" placeholder="高度" @input="changeRenderKey" /> <el-input-number v-model="activeData.height" placeholder="高度" @input="changeRenderKey"/>
</el-form-item> </el-form-item>
<el-form-item v-if="isShowStep" label="步长"> <el-form-item v-if="isShowStep" label="步长">
<el-input-number v-model="activeData.step" placeholder="步数" /> <el-input-number v-model="activeData.step" placeholder="步数"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.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-input-number v-model="activeData.precision" :min="0" placeholder="精度"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.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-group v-model="activeData['controls-position']">
@ -177,10 +181,10 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示"> <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
<el-input v-model="activeData['active-text']" placeholder="请输入开启提示" /> <el-input v-model="activeData['active-text']" placeholder="请输入开启提示"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示"> <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
<el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" /> <el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['active-value'] !== undefined" label="开启值"> <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
<el-input <el-input
@ -214,9 +218,9 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item v-if="activeData.name !== undefined" label="文件字段名">--> <!-- <el-form-item v-if="activeData.name !== undefined" label="文件字段名">-->
<!-- <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />--> <!-- <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item v-if="activeData.accept !== undefined" label="文件类型"> <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
<el-select <el-select
v-model="activeData.accept" v-model="activeData.accept"
@ -224,27 +228,28 @@
:style="{ width: '100%' }" :style="{ width: '100%' }"
clearable clearable
> >
<el-option label="图片" value="image/*" /> <el-option label="图片" value="image/*"/>
<el-option label="视频" value="video/*" /> <el-option label="视频" value="video/*"/>
<el-option label="音频" value="audio/*" /> <el-option label="音频" value="audio/*"/>
<el-option label="excel" value=".xls,.xlsx" /> <el-option label="excel" value=".xls,.xlsx"/>
<el-option label="word" value=".doc,.docx" /> <el-option label="word" value=".doc,.docx"/>
<el-option label="pdf" value=".pdf" /> <el-option label="pdf" value=".pdf"/>
<el-option label="txt" value=".txt" /> <el-option label="txt" value=".txt"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.fileSize !== undefined" label="文件大小"> <el-form-item v-if="activeData.__config__.fileSize !== undefined" label="文件大小">
<el-input v-model.number="activeData.__config__.fileSize" placeholder="请输入文件大小"> <el-input v-model.number="activeData.__config__.fileSize" placeholder="请输入文件大小">
<el-select slot="append" v-model="activeData.__config__.sizeUnit" :style="{ width: '66px' }"> <el-select slot="append" v-model="activeData.__config__.sizeUnit"
<el-option label="KB" value="KB" /> :style="{ width: '66px' }">
<el-option label="MB" value="MB" /> <el-option label="KB" value="KB"/>
<el-option label="GB" value="GB" /> <el-option label="MB" value="MB"/>
<el-option label="GB" value="GB"/>
</el-select> </el-select>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item v-if="activeData.action !== undefined" label="上传地址">--> <!-- <el-form-item v-if="activeData.action !== undefined" label="上传地址">-->
<!-- <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />--> <!-- <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型"> <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
<el-radio-group v-model="activeData['list-type']" size="small"> <el-radio-group v-model="activeData['list-type']" size="small">
<el-radio-button label="text"> <el-radio-button label="text">
@ -263,12 +268,12 @@
label="按钮类型" label="按钮类型"
> >
<el-select v-model="activeData.type" :style="{ width: '100%' }"> <el-select v-model="activeData.type" :style="{ width: '100%' }">
<el-option label="primary" value="primary" /> <el-option label="primary" value="primary"/>
<el-option label="success" value="success" /> <el-option label="success" value="success"/>
<el-option label="warning" value="warning" /> <el-option label="warning" value="warning"/>
<el-option label="danger" value="danger" /> <el-option label="danger" value="danger"/>
<el-option label="info" value="info" /> <el-option label="info" value="info"/>
<el-option label="text" value="text" /> <el-option label="text" value="text"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@ -276,16 +281,16 @@
v-show="'picture-card' !== activeData['list-type']" v-show="'picture-card' !== activeData['list-type']"
label="按钮文字" label="按钮文字"
> >
<el-input v-model="activeData.__config__.buttonText" placeholder="请输入按钮文字" /> <el-input v-model="activeData.__config__.buttonText" placeholder="请输入按钮文字"/>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="activeData.__config__.tag === 'el-button'" v-if="activeData.__config__.tag === 'el-button'"
label="按钮文字" label="按钮文字"
> >
<el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字" /> <el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符"> <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
<el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" /> <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段"> <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
<el-input <el-input
@ -300,7 +305,8 @@
@input="setTimeValue($event)" @input="setTimeValue($event)"
/> />
</el-form-item> </el-form-item>
<template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.__config__.tag) > -1"> <template
v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.__config__.tag) > -1">
<el-divider>选项</el-divider> <el-divider>选项</el-divider>
<draggable <draggable
:list="activeData.__slot__.options" :list="activeData.__slot__.options"
@ -310,17 +316,18 @@
> >
<div v-for="(item, index) in activeData.__slot__.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"> <div class="select-line-icon option-drag">
<i class="el-icon-s-operation" /> <i class="el-icon-s-operation"/>
</div> </div>
<el-input v-model="item.label" placeholder="选项名" size="small" /> <el-input v-model="item.label" placeholder="选项名" size="small"/>
<!-- <el-input--> <!-- <el-input-->
<!-- placeholder="选项值"--> <!-- placeholder="选项值"-->
<!-- size="small"--> <!-- size="small"-->
<!-- :value="item.value"--> <!-- :value="item.value"-->
<!-- @input="setOptionValue(item, $event)"--> <!-- @input="setOptionValue(item, $event)"-->
<!-- />--> <!-- />-->
<div class="close-btn select-line-icon" @click="activeData.__slot__.options.splice(index, 1)"> <div class="close-btn select-line-icon"
<i class="el-icon-remove-outline" /> @click="activeData.__slot__.options.splice(index, 1)">
<i class="el-icon-remove-outline"/>
</div> </div>
</div> </div>
</draggable> </draggable>
@ -333,61 +340,70 @@
> >
添加选项 添加选项
</el-button> </el-button>
<el-button
v-if="['el-checkbox-group', 'el-radio-group'].indexOf(activeData.__config__.tag) > -1"
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addSelectOtherItem"
>
添加其他
</el-button>
</div> </div>
<el-divider /> <el-divider/>
</template> </template>
<template v-if="['el-cascader'].indexOf(activeData.__config__.tag) > -1"> <template v-if="['el-cascader'].indexOf(activeData.__config__.tag) > -1">
<el-divider>选项</el-divider> <el-divider>选项</el-divider>
<!-- <el-form-item label="数据类型">--> <!-- <el-form-item label="数据类型">-->
<!-- <el-radio-group v-model="activeData.__config__.dataType" size="small">--> <!-- <el-radio-group v-model="activeData.__config__.dataType" size="small">-->
<!-- <el-radio-button label="dynamic">--> <!-- <el-radio-button label="dynamic">-->
<!-- 动态数据--> <!-- 动态数据-->
<!-- </el-radio-button>--> <!-- </el-radio-button>-->
<!-- <el-radio-button label="static">--> <!-- <el-radio-button label="static">-->
<!-- 静态数据--> <!-- 静态数据-->
<!-- </el-radio-button>--> <!-- </el-radio-button>-->
<!-- </el-radio-group>--> <!-- </el-radio-group>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <template v-if="activeData.__config__.dataType === 'dynamic'">--> <!-- <template v-if="activeData.__config__.dataType === 'dynamic'">-->
<!-- <el-form-item label="接口地址">--> <!-- <el-form-item label="接口地址">-->
<!-- <el-input--> <!-- <el-input-->
<!-- v-model="activeData.__config__.url"--> <!-- v-model="activeData.__config__.url"-->
<!-- :title="activeData.__config__.url"--> <!-- :title="activeData.__config__.url"-->
<!-- placeholder="请输入接口地址"--> <!-- placeholder="请输入接口地址"-->
<!-- clearable--> <!-- clearable-->
<!-- >--> <!-- >-->
<!-- <el-select--> <!-- <el-select-->
<!-- slot="prepend"--> <!-- slot="prepend"-->
<!-- v-model="activeData.__config__.method"--> <!-- v-model="activeData.__config__.method"-->
<!-- :style="{width: '85px'}"--> <!-- :style="{width: '85px'}"-->
<!-- >--> <!-- >-->
<!-- <el-option label="get" value="get" />--> <!-- <el-option label="get" value="get" />-->
<!-- <el-option label="post" value="post" />--> <!-- <el-option label="post" value="post" />-->
<!-- <el-option label="put" value="put" />--> <!-- <el-option label="put" value="put" />-->
<!-- <el-option label="delete" value="delete" />--> <!-- <el-option label="delete" value="delete" />-->
<!-- </el-select>--> <!-- </el-select>-->
<!-- </el-input>--> <!-- </el-input>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="数据位置">--> <!-- <el-form-item label="数据位置">-->
<!-- <el-input v-model="activeData.__config__.dataKey" placeholder="请输入标签键名" />--> <!-- <el-input v-model="activeData.__config__.dataKey" placeholder="请输入标签键名" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="标签键名">--> <!-- <el-form-item label="标签键名">-->
<!-- <el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />--> <!-- <el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="值键名">--> <!-- <el-form-item label="值键名">-->
<!-- <el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />--> <!-- <el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="子级键名">--> <!-- <el-form-item label="子级键名">-->
<!-- <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />--> <!-- <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </template>--> <!-- </template>-->
<!-- 级联选择静态树 --> <!-- 级联选择静态树 -->
<el-tree <el-tree
v-if="activeData.__config__.dataType === 'static'" v-if="activeData.__config__.dataType === 'static'"
draggable draggable="true"
:data="activeData.options" :data="activeData.options"
node-key="id" node-key="id"
:expand-on-click-node="false" :expand-on-click-node="false"
@ -403,7 +419,7 @@
添加父级 添加父级
</el-button> </el-button>
</div> </div>
<el-divider /> <el-divider/>
</template> </template>
<el-form-item v-if="activeData.__config__.optionType !== undefined" label="选项样式"> <el-form-item v-if="activeData.__config__.optionType !== undefined" label="选项样式">
@ -417,40 +433,40 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色"> <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
<el-color-picker v-model="activeData['active-color']" /> <el-color-picker v-model="activeData['active-color']"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色"> <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
<el-color-picker v-model="activeData['inactive-color']" /> <el-color-picker v-model="activeData['inactive-color']"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.showLabel !== undefined <el-form-item v-if="activeData.__config__.showLabel !== undefined
&& activeData.__config__.labelWidth !== undefined" label="显示标签" && activeData.__config__.labelWidth !== undefined" label="显示标签"
> >
<el-switch v-model="activeData.__config__.showLabel" /> <el-switch v-model="activeData.__config__.showLabel"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.branding !== undefined" label="品牌烙印"> <el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
<el-switch v-model="activeData.branding" @input="changeRenderKey" /> <el-switch v-model="activeData.branding" @input="changeRenderKey"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选"> <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
<el-switch v-model="activeData['allow-half']" /> <el-switch v-model="activeData['allow-half']"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字"> <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
<el-switch v-model="activeData['show-text']" @change="rateTextChange" /> <el-switch v-model="activeData['show-text']" @change="rateTextChange"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数"> <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
<el-switch v-model="activeData['show-score']" @change="rateScoreChange" /> <el-switch v-model="activeData['show-score']" @change="rateScoreChange"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点"> <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
<el-switch v-model="activeData['show-stops']" /> <el-switch v-model="activeData['show-stops']"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.range !== undefined" label="范围选择"> <el-form-item v-if="activeData.range !== undefined" label="范围选择">
<el-switch v-model="activeData.range" @change="rangeChange" /> <el-switch v-model="activeData.range" @change="rangeChange"/>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="activeData.__config__.border !== undefined && activeData.__config__.optionType === 'default'" v-if="activeData.__config__.border !== undefined && activeData.__config__.optionType === 'default'"
label="是否带边框" label="是否带边框"
> >
<el-switch v-model="activeData.__config__.border" /> <el-switch v-model="activeData.__config__.border"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-color-picker'" label="颜色格式"> <el-form-item v-if="activeData.__config__.tag === 'el-color-picker'" label="颜色格式">
<el-select <el-select
@ -489,52 +505,52 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计"> <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
<el-switch v-model="activeData['show-word-limit']" /> <el-switch v-model="activeData['show-word-limit']"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.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-switch v-model="activeData['step-strictly']"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="任选层级"> <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="任选层级">
<el-switch v-model="activeData.props.props.checkStrictly" /> <el-switch v-model="activeData.props.props.checkStrictly"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="是否多选"> <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="是否多选">
<el-switch v-model="activeData.props.props.multiple" /> <el-switch v-model="activeData.props.props.multiple"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="展示全路径"> <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="展示全路径">
<el-switch v-model="activeData['show-all-levels']" /> <el-switch v-model="activeData['show-all-levels']"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选"> <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选">
<el-switch v-model="activeData.filterable" /> <el-switch v-model="activeData.filterable"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.clearable !== undefined" label="能否清空"> <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
<el-switch v-model="activeData.clearable" /> <el-switch v-model="activeData.clearable"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示"> <el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
<el-switch v-model="activeData.__config__.showTip" /> <el-switch v-model="activeData.__config__.showTip"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件"> <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
<el-switch v-model="activeData.multiple" /> <el-switch v-model="activeData.multiple"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="文件个数"> <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="文件个数">
<el-input-number v-model="activeData.limit" /> <el-input-number v-model="activeData.limit"/>
</el-form-item> </el-form-item>
<!-- <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">--> <!-- <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">-->
<!-- <el-switch v-model="activeData['auto-upload']" />--> <!-- <el-switch v-model="activeData['auto-upload']" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item v-if="activeData.readonly !== undefined" label="是否只读"> <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
<el-switch v-model="activeData.readonly" /> <el-switch v-model="activeData.readonly"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.disabled !== undefined" label="是否禁用"> <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
<el-switch v-model="activeData.disabled" /> <el-switch v-model="activeData.disabled"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-select'" label="能否搜索"> <el-form-item v-if="activeData.__config__.tag === 'el-select'" label="能否搜索">
<el-switch v-model="activeData.filterable" /> <el-switch v-model="activeData.filterable"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选"> <el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选">
<el-switch v-model="activeData.multiple" @change="multipleChange" /> <el-switch v-model="activeData.multiple" @change="multipleChange"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.required !== undefined" label="是否必填"> <el-form-item v-if="activeData.__config__.required !== undefined" label="是否必填">
<el-switch v-model="activeData.__config__.required" /> <el-switch v-model="activeData.__config__.required"/>
</el-form-item> </el-form-item>
<template v-if="activeData.__config__.layoutTree"> <template v-if="activeData.__config__.layoutTree">
@ -544,11 +560,11 @@
:props="layoutTreeProps" :props="layoutTreeProps"
node-key="renderKey" node-key="renderKey"
default-expand-all default-expand-all
draggable draggable="true"
> >
<span slot-scope="{ node, data }"> <span slot-scope="{ node, data }">
<span class="node-label"> <span class="node-label">
<svg-icon :name="data.__config__?data.__config__.tagIcon:data.tagIcon" class="node-icon" /> <svg-icon :name="data.__config__?data.__config__.tagIcon:data.tagIcon" class="node-icon"/>
{{ node.label }} {{ node.label }}
</span> </span>
</span> </span>
@ -563,13 +579,13 @@
class="reg-item" class="reg-item"
> >
<span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)"> <span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)">
<i class="el-icon-close" /> <i class="el-icon-close"/>
</span> </span>
<el-form-item label="表达式"> <el-form-item label="表达式">
<el-input v-model="item.pattern" placeholder="请输入正则" /> <el-input v-model="item.pattern" placeholder="请输入正则"/>
</el-form-item> </el-form-item>
<el-form-item label="错误提示" style="margin-bottom:0"> <el-form-item label="错误提示" style="margin-bottom:0">
<el-input v-model="item.message" placeholder="请输入错误提示" /> <el-input v-model="item.message" placeholder="请输入错误提示"/>
</el-form-item> </el-form-item>
</div> </div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
@ -581,13 +597,13 @@
</el-form> </el-form>
<el-form v-show="currentTab === 'form'" size="small" label-width="90px"> <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
<el-form-item label="表单名"> <el-form-item label="表单名">
<el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" /> <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）"/>
</el-form-item> </el-form-item>
<el-form-item label="表单模型"> <el-form-item label="表单模型">
<el-input v-model="formConf.formModel" placeholder="请输入数据模型" /> <el-input v-model="formConf.formModel" placeholder="请输入数据模型"/>
</el-form-item> </el-form-item>
<el-form-item label="校验模型"> <el-form-item label="校验模型">
<el-input v-model="formConf.formRules" placeholder="请输入校验模型" /> <el-input v-model="formConf.formRules" placeholder="请输入校验模型"/>
</el-form-item> </el-form-item>
<el-form-item label="表单尺寸"> <el-form-item label="表单尺寸">
<el-radio-group v-model="formConf.size"> <el-radio-group v-model="formConf.size">
@ -616,39 +632,42 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="标签宽度"> <el-form-item label="标签宽度">
<el-input v-model.number="formConf.labelWidth" type="number" placeholder="请输入标签宽度" /> <el-input v-model.number="formConf.labelWidth" type="number" placeholder="请输入标签宽度"/>
</el-form-item> </el-form-item>
<el-form-item label="栅格间隔"> <el-form-item label="栅格间隔">
<el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" /> <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔"/>
</el-form-item> </el-form-item>
<el-form-item label="禁用表单"> <el-form-item label="禁用表单">
<el-switch v-model="formConf.disabled" /> <el-switch v-model="formConf.disabled"/>
</el-form-item> </el-form-item>
<el-form-item label="表单按钮"> <el-form-item label="表单按钮">
<el-switch v-model="formConf.formBtns" /> <el-switch v-model="formConf.formBtns"/>
</el-form-item> </el-form-item>
<el-form-item label="显示未选中组件边框"> <el-form-item label="显示未选中组件边框">
<el-switch v-model="formConf.unFocusedComponentBorder" /> <el-switch v-model="formConf.unFocusedComponentBorder"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
</div> </div>
<treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" /> <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode"/>
<icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" /> <icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon"/>
</div> </div>
</template> </template>
<script> <script>
import { isArray } from 'util' import {isArray} from 'util'
import TreeNodeDialog from '@/views/form/TreeNodeDialog' import TreeNodeDialog from '@/views/form/TreeNodeDialog'
import { isNumberStr } from '@/utils/index' import {isNumberStr} from '@/utils/index'
import IconsDialog from './IconsDialog' import IconsDialog from './IconsDialog'
import { import {
inputComponents, selectComponents inputComponents, selectComponents
} from '@/components/generator/config' } from '@/components/generator/config'
import { saveFormConf } from '@/utils/db' import DraggableItem from './DraggableItem'
import {debounce} from "throttle-debounce" import {saveFormConf} from '@/utils/db'
import {debounce} from 'throttle-debounce'
import draggable from 'vuedraggable'
const dateTimeFormat = { const dateTimeFormat = {
date: 'yyyy-MM-dd', date: 'yyyy-MM-dd',
week: 'yyyy 第 WW 周', week: 'yyyy 第 WW 周',
@ -666,6 +685,7 @@ const needRerenderList = ['tinymce']
export default { export default {
components: { components: {
TreeNodeDialog, TreeNodeDialog,
draggable,
IconsDialog IconsDialog
}, },
props: ['showField', 'activeData', 'formConf'], props: ['showField', 'activeData', 'formConf'],
@ -809,17 +829,17 @@ export default {
}, },
deep: true deep: true
}, },
activeData : { activeData: {
handler(newValue,oldValue) { handler(newValue, oldValue) {
// 切换选中时不触发 // 切换选中时不触发
if(newValue.__config__.formId===oldValue.__config__.formId){ if (newValue.__config__.formId === oldValue.__config__.formId) {
if(newValue){ if (newValue) {
this.dataChange(newValue) this.dataChange(newValue)
} }
} }
}, },
deep: true deep: true
}, }
}, },
methods: { methods: {
addReg() { addReg() {
@ -832,7 +852,20 @@ export default {
this.activeData.__slot__.options.push({ this.activeData.__slot__.options.push({
label: '', label: '',
value: this.activeData.__slot__.options.length+1 value: this.activeData.__slot__.options.length + 1
})
},
addSelectOtherItem() {
let item = this.activeData.__slot__.options.find((item) => {
return item.value == 0
})
console.log(item)
if (item) {
return
}
this.activeData.__slot__.options.push({
label: '其他',
value: 0
}) })
}, },
addTreeItem() { addTreeItem() {
@ -840,7 +873,7 @@ export default {
this.dialogVisible = true this.dialogVisible = true
this.currentNode = this.activeData.options this.currentNode = this.activeData.options
}, },
renderContent(h, { node, data, store }) { renderContent(h, {node, data, store}) {
return ( return (
<div class="custom-tree-node"> <div class="custom-tree-node">
<span>{node.label}</span> <span>{node.label}</span>
@ -866,7 +899,7 @@ export default {
}, },
remove(node, data) { remove(node, data) {
this.activeData.__config__.defaultValue = [] // 避免删除时报错 this.activeData.__config__.defaultValue = [] // 避免删除时报错
const { parent } = node const {parent} = node
const children = parent.data.children || parent.data const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id) const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1) children.splice(index, 1)
@ -975,62 +1008,76 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/styles/form/index'; @import '@/assets/styles/form/index';
.right-board { .right-board {
width: 350px; width: 350px;
position: absolute; position: absolute;
right: 17px; right: 17px;
top: 0; top: 0;
padding-top: 3px; padding-top: 3px;
background-color: #FFFFFF;
.field-box { .field-box {
position: relative; position: relative;
height: calc(100vh - 242px); height: calc(100vh - 242px);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.el-scrollbar { .el-scrollbar {
height: 100%; height: 100%;
} }
} }
.select-item { .select-item {
display: flex; display: flex;
border: 1px dashed #fff; border: 1px dashed #fff;
box-sizing: border-box; box-sizing: border-box;
& .close-btn { & .close-btn {
cursor: pointer; cursor: pointer;
color: #f56c6c; color: #f56c6c;
} }
& .el-input + .el-input { & .el-input + .el-input {
margin-left: 4px; margin-left: 4px;
} }
} }
.select-item + .select-item { .select-item + .select-item {
margin-top: 4px; margin-top: 4px;
} }
.select-item.sortable-chosen { .select-item.sortable-chosen {
border: 1px dashed #409eff; border: 1px dashed #409eff;
} }
.select-line-icon { .select-line-icon {
line-height: 32px; line-height: 32px;
font-size: 22px; font-size: 22px;
padding: 0 4px; padding: 0 4px;
color: #777; color: #777;
} }
.option-drag { .option-drag {
cursor: move; cursor: move;
} }
.time-range { .time-range {
.el-date-editor { .el-date-editor {
width: 227px; width: 227px;
} }
::v-deep .el-icon-time { ::v-deep .el-icon-time {
display: none; display: none;
} }
} }
.node-label{ .node-label {
font-size: 14px; font-size: 14px;
} }
.node-icon{
.node-icon {
color: #bebfc3; color: #bebfc3;
} }
</style> </style>

2
src/views/form/editor.vue
View File

@ -280,9 +280,9 @@ export default {
this.activeData = tempActiveData this.activeData = tempActiveData
this.activeId = this.idGlobal this.activeId = this.idGlobal
} }
this.onItemEnd(obj)
}, },
onItemEnd(obj) { onItemEnd(obj) {
console.log(obj)
let params = {'projectKey': this.projectKey} let params = {'projectKey': this.projectKey}
if (this.drawingList[obj.newIndex - 1]) { if (this.drawingList[obj.newIndex - 1]) {
let sort1 = this.drawingList[obj.newIndex - 1].sort let sort1 = this.drawingList[obj.newIndex - 1].sort

7
src/views/project/MyProject.vue
View File

@ -69,6 +69,7 @@
<div v-if="dataShowType=='gird'" class="project-grid-container"> <div v-if="dataShowType=='gird'" class="project-grid-container">
<div <div
v-if="projectList.length" v-if="projectList.length"
v-loading="projectListLoading"
class="project-grid-view" class="project-grid-view"
> >
<div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer" :span="4"> <div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer" :span="4">
@ -194,6 +195,7 @@
</template> </template>
<script> <script>
import DataEmpty from '@/components/DataEmpty' import DataEmpty from '@/components/DataEmpty'
let projectStatusList = [ let projectStatusList = [
{code: 1, name: '未发布', color: '#006EFF'}, {code: 1, name: '未发布', color: '#006EFF'},
{code: 2, name: '收集中', color: '#34C82A'}, {code: 2, name: '收集中', color: '#34C82A'},
@ -216,7 +218,8 @@ export default {
status: null status: null
}, },
projectStatusList: projectStatusList, projectStatusList: projectStatusList,
projectList: [] projectList: [],
projectListLoading: true
} }
}, },
computed: { computed: {
@ -241,6 +244,7 @@ export default {
this.$router.push({path: '/project/form', query: {key: key, active: type}}) this.$router.push({path: '/project/form', query: {key: key, active: type}})
}, },
queryProjectPage() { queryProjectPage() {
this.$api.get('/user/project/page', { this.$api.get('/user/project/page', {
params: this.queryParams params: this.queryParams
}).then(res => { }).then(res => {
@ -248,6 +252,7 @@ export default {
this.projectList = records this.projectList = records
this.total = total this.total = total
this.queryParams.size = size this.queryParams.size = size
this.projectListLoading = false
}) })
} }
} }

28
src/views/test.vue
View File

@ -1,23 +1,26 @@
<template> <template>
<div> <div>
<Verify <el-radio-group v-model="radio">
ref="verify" <el-radio :label="3">备选项</el-radio>
:mode="'pop'" <el-radio :label="6">备选项</el-radio>
:captcha-type="'blockPuzzle'" <el-radio :label="9">备选项</el-radio>
:img-size="{ width: '330px', height: '155px' }" <el-radio :label="0">其他<input/>
@success="success" </el-radio>
/> </el-radio-group>
<button @click="useVerify">调用验证组件</button>
</div> </div>
</template> </template>
<script> <script>
// 引入组件 // 引入组件
import Verify from '@/components/verifition/Verify' // import Verify from '@/components/verifition/Verify'
export default { export default {
name: 'App', name: 'App',
components: { components: {
Verify },
data() {
return {
radio: 3
}
}, },
created() { created() {
}, },
@ -34,3 +37,8 @@ export default {
} }
} }
</script> </script>
<style scoped>
.el-radio {
display: block;
}
</style>

Write Preview
Loading…
Cancel
Save