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

fix

old
wangqing 4 years ago
parent
cfbe3c6cd5
commit
86b7fee019
5 changed files with 61 additions and 65 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. 4
      src/components/generator/config.js
  2. 3
      src/components/parser/Parser.vue
  3. 3
      src/utils/convert.js
  4. 104
      src/views/form/RightPanel.vue
  5. 4
      src/views/form/editor.vue

4
src/components/generator/config.js
View File

@ -521,7 +521,7 @@ export const imageComponents = [
typeId: 'IMAGE_CAROUSEL', typeId: 'IMAGE_CAROUSEL',
__config__: { __config__: {
label: '图片轮播', label: '图片轮播',
showLabel: true, showLabel: false,
labelWidth: null, labelWidth: null,
defaultValue: null, defaultValue: null,
showDefaultValue: false, showDefaultValue: false,
@ -539,7 +539,7 @@ export const imageComponents = [
__slot__: { __slot__: {
options: [{ options: [{
label: '文字', label: '文字',
image: 'https://qiniu.smileyi.top/757b505cfd34c64c85ca5b5690ee5293/b128cf03901945d6b6df46cf6acbfa01.jpg' image: ''
}] }]
}, },
style: {width: '100%'} style: {width: '100%'}

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

@ -231,7 +231,6 @@ function setOtherValueLabel(event, config) {
let value = this[this.formConf.formModel][config.__vModel__] let value = this[this.formConf.formModel][config.__vModel__]
// 临时保存其他的选项值 // 临时保存其他的选项值
this.$nextTick(() => { this.$nextTick(() => {
console.log(this[this.formConf.labelFormModel])
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event) this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event)
console.log(this[this.formConf.labelFormModel]) console.log(this[this.formConf.labelFormModel])
setValueLabel.call(this, value, config.__config__, config) setValueLabel.call(this, value, config.__config__, config)
@ -251,8 +250,6 @@ function setValueLabel(event, config, scheme) {
// 需要处理的类型 如果是input等则不需要处理 // 需要处理的类型 如果是input等则不需要处理
let tagOptionKey = processType[config.tag] let tagOptionKey = processType[config.tag]
if (tagOptionKey) { if (tagOptionKey) {
// eslint-disable-next-line no-debugger
// debugger
if (event instanceof Array) { if (event instanceof Array) {
let labelArr = new Array() let labelArr = new Array()
event.forEach(item => { event.forEach(item => {

3
src/utils/convert.js
View File

@ -130,8 +130,11 @@ const dataParams = {
}, },
// 单选框组 // 单选框组
'RADIO': { 'RADIO': {
'optionType': '__config__.optionType',
'border': '__config__.border',
'options': '__slot__.options', 'options': '__slot__.options',
'filterable': 'filterable', 'filterable': 'filterable',
'size': 'size',
'multiple': 'props.props.multiple' 'multiple': 'props.props.multiple'
}, },
// 多选框组 // 多选框组

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

@ -6,12 +6,12 @@
<div class="field-box"> <div class="field-box">
<el-scrollbar class="right-scrollbar"> <el-scrollbar class="right-scrollbar">
<!-- 组件属性 --> <!-- 组件属性 -->
<el-form v-show="currentTab==='field' && showField" size="small" label-width="90px"> <el-form v-show="currentTab==='field' && showField" label-width="90px" size="small">
<el-form-item v-if="activeData.__config__.changeTag" label="组件类型"> <el-form-item v-if="activeData.__config__.changeTag" label="组件类型">
<el-select <el-select
v-model="activeData.__config__.tagIcon" v-model="activeData.__config__.tagIcon"
placeholder="请选择组件类型"
:style="{width: '100%'}" :style="{width: '100%'}"
placeholder="请选择组件类型"
@change="tagChange" @change="tagChange"
> >
<el-option-group v-for="group in tagList" :key="group.label" :label="group.label"> <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
@ -50,7 +50,7 @@
<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:''}" <el-slider v-model="activeData.__config__.span" :marks="{12:''}" :max="24" :min="1"
@change="spanChange" @change="spanChange"
/> />
</el-form-item> </el-form-item>
@ -68,7 +68,7 @@
</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="水平排列">
<el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}"> <el-select v-model="activeData.justify" :style="{width: '100%'}" placeholder="请选择水平排列">
<el-option <el-option
v-for="(item, index) in justifyOptions" v-for="(item, index) in justifyOptions"
:key="index" :key="index"
@ -103,16 +103,16 @@
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="至少应选"> <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="至少应选">
<el-input-number <el-input-number
:value="activeData.min"
:min="0" :min="0"
:value="activeData.min"
placeholder="至少应选" placeholder="至少应选"
@input="$set(activeData, 'min', $event?$event:undefined)" @input="$set(activeData, 'min', $event?$event:undefined)"
/> />
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="最多可选"> <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="最多可选">
<el-input-number <el-input-number
:value="activeData.max"
:min="0" :min="0"
:value="activeData.max"
placeholder="最多可选" placeholder="最多可选"
@input="$set(activeData, 'max', $event?$event:undefined)" @input="$set(activeData, 'max', $event?$event:undefined)"
/> />
@ -214,8 +214,8 @@
> >
<el-select <el-select
v-model="activeData.type" v-model="activeData.type"
placeholder="请选择时间类型"
:style="{ width: '100%' }" :style="{ width: '100%' }"
placeholder="请选择时间类型"
@change="dateTypeChange" @change="dateTypeChange"
> >
<el-option <el-option
@ -232,9 +232,9 @@
<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"
placeholder="请选择文件类型"
:style="{ width: '100%' }" :style="{ width: '100%' }"
clearable clearable
placeholder="请选择文件类型"
> >
<el-option label="图片" value="image/*"/> <el-option label="图片" value="image/*"/>
<el-option label="视频" value="video/*"/> <el-option label="视频" value="video/*"/>
@ -319,8 +319,8 @@
> >
<el-divider>选项</el-divider> <el-divider>选项</el-divider>
<draggable <draggable
:list="activeData.__slot__.options"
:animation="340" :animation="340"
:list="activeData.__slot__.options"
group="selectItem" group="selectItem"
handle=".option-drag" handle=".option-drag"
> >
@ -344,8 +344,8 @@
</draggable> </draggable>
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<el-button <el-button
style="padding-bottom: 0;"
icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline"
style="padding-bottom: 0;"
type="text" type="text"
@click="addSelectItem" @click="addSelectItem"
> >
@ -353,8 +353,8 @@
</el-button> </el-button>
<el-button <el-button
v-if="['el-checkbox-group', 'el-radio-group'].indexOf(activeData.__config__.tag) > -1" v-if="['el-checkbox-group', 'el-radio-group'].indexOf(activeData.__config__.tag) > -1"
style="padding-bottom: 0;"
icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline"
style="padding-bottom: 0;"
type="text" type="text"
@click="addSelectOtherItem" @click="addSelectOtherItem"
> >
@ -369,8 +369,8 @@
> >
<el-divider>选项</el-divider> <el-divider>选项</el-divider>
<draggable <draggable
:list="activeData.__slot__.options"
:animation="340" :animation="340"
:list="activeData.__slot__.options"
group="selectItem" group="selectItem"
handle=".option-drag" handle=".option-drag"
> >
@ -391,18 +391,18 @@
<el-input v-model="item.image" placeholder="图片" size="small"/> <el-input v-model="item.image" placeholder="图片" size="small"/>
<el-upload <el-upload
ref="logoUpload" ref="logoUpload"
style="text-align: center;" :action="getUploadUrl"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader" :headers="getUploadHeader"
:on-progress="uploadProgressHandle"
:on-success="(response, file, fileList)=>{ :on-success="(response, file, fileList)=>{
item.image = response.data item.image = response.data
$set(activeData.__slot__.options,index,item) $set(activeData.__slot__.options,index,item)
closeUploadProgressHandle() closeUploadProgressHandle()
}" }"
:on-progress="uploadProgressHandle" :show-file-list="false"
:action="getUploadUrl" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:show-file-list="false"> style="text-align: center;">
<div class=" select-line-icon" slot="trigger"> <div slot="trigger" class=" select-line-icon">
<i class="el-icon-upload"/> <i class="el-icon-upload"/>
</div> </div>
</el-upload> </el-upload>
@ -412,8 +412,8 @@
</draggable> </draggable>
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<el-button <el-button
style="padding-bottom: 0;"
icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline"
style="padding-bottom: 0;"
type="text" type="text"
@click="addImageCarouselItem " @click="addImageCarouselItem "
> >
@ -427,8 +427,8 @@
> >
<el-divider>选项</el-divider> <el-divider>选项</el-divider>
<draggable <draggable
:list="activeData.options"
:animation="340" :animation="340"
:list="activeData.options"
group="selectItem" group="selectItem"
handle=".option-drag" handle=".option-drag"
> >
@ -449,18 +449,18 @@
<el-input v-model="item.image" placeholder="图片" size="small"/> <el-input v-model="item.image" placeholder="图片" size="small"/>
<el-upload <el-upload
ref="logoUpload" ref="logoUpload"
style="text-align: center;" :action="getUploadUrl"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader" :headers="getUploadHeader"
:on-progress="uploadProgressHandle"
:on-success="(response, file, fileList)=>{ :on-success="(response, file, fileList)=>{
item.image = response.data item.image = response.data
$set(activeData.options,index,item) $set(activeData.options,index,item)
closeUploadProgressHandle() closeUploadProgressHandle()
}" }"
:on-progress="uploadProgressHandle" :show-file-list="false"
:action="getUploadUrl" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:show-file-list="false"> style="text-align: center;">
<div class=" select-line-icon" slot="trigger"> <div slot="trigger" class=" select-line-icon">
<i class="el-icon-upload"/> <i class="el-icon-upload"/>
</div> </div>
</el-upload> </el-upload>
@ -470,8 +470,8 @@
</draggable> </draggable>
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<el-button <el-button
style="padding-bottom: 0;"
icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline"
style="padding-bottom: 0;"
type="text" type="text"
@click="addImageSelectItem" @click="addImageSelectItem"
> >
@ -530,16 +530,16 @@
<!-- 级联选择静态树 --> <!-- 级联选择静态树 -->
<el-tree <el-tree
v-if="activeData.__config__.dataType === 'static'" v-if="activeData.__config__.dataType === 'static'"
draggable="true"
:data="activeData.options" :data="activeData.options"
node-key="id"
:expand-on-click-node="false" :expand-on-click-node="false"
:render-content="renderContent" :render-content="renderContent"
draggable="true"
node-key="id"
/> />
<div v-if="activeData.__config__.dataType === 'static'" style="margin-left: 20px;"> <div v-if="activeData.__config__.dataType === 'static'" style="margin-left: 20px;">
<el-button <el-button
style="padding-bottom: 0;"
icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline"
style="padding-bottom: 0;"
type="text" type="text"
@click="addTreeItem" @click="addTreeItem"
> >
@ -589,18 +589,12 @@
<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
v-if="activeData.__config__.border !== undefined && activeData.__config__.optionType === 'default'"
label="是否带边框"
>
<el-switch v-model="activeData.__config__.border"/>
</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
v-model="activeData['color-format']" v-model="activeData['color-format']"
placeholder="请选择颜色格式"
:style="{ width: '100%' }" :style="{ width: '100%' }"
clearable clearable
placeholder="请选择颜色格式"
@change="colorFormatChange" @change="colorFormatChange"
> >
<el-option <el-option
@ -613,7 +607,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="activeData.size !== undefined && v-if="activeData.size !== undefined &&
(activeData.__config__.optionType === 'button' || (
activeData.__config__.border || activeData.__config__.border ||
activeData.__config__.tag === 'el-color-picker' || activeData.__config__.tag === 'el-color-picker' ||
activeData.__config__.tag === 'el-button')" activeData.__config__.tag === 'el-button')"
@ -696,16 +690,16 @@
<el-input v-model="activeData.src" placeholder="请输入图片url地址"/> <el-input v-model="activeData.src" placeholder="请输入图片url地址"/>
<el-upload <el-upload
ref="logoUpload" ref="logoUpload"
style="text-align: center;" :action="getUploadUrl"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader" :headers="getUploadHeader"
:on-progress="uploadProgressHandle" :on-progress="uploadProgressHandle"
:on-success="(response, file, fileList)=>{ :on-success="(response, file, fileList)=>{
activeData.src = response.data activeData.src = response.data
closeUploadProgressHandle() closeUploadProgressHandle()
}" }"
:action="getUploadUrl"
:show-file-list="false" :show-file-list="false"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
style="text-align: center;"
> >
<el-button slot="trigger" size="small" type="text">点击上传图片 *</el-button> <el-button slot="trigger" size="small" type="text">点击上传图片 *</el-button>
</el-upload> </el-upload>
@ -722,9 +716,9 @@
<el-tree <el-tree
:data="[activeData.__config__]" :data="[activeData.__config__]"
:props="layoutTreeProps" :props="layoutTreeProps"
node-key="renderKey"
default-expand-all default-expand-all
draggable="true" draggable="true"
node-key="renderKey"
> >
<span slot-scope="{ node, data }"> <span slot-scope="{ node, data }">
<span class="node-label"> <span class="node-label">
@ -762,7 +756,7 @@
</div> </div>
</template> </template>
</el-form> </el-form>
<el-form v-show="currentTab === 'form'" size="small" label-width="90px"> <el-form v-show="currentTab === 'form'" label-width="90px" size="small">
<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>
@ -799,7 +793,7 @@
</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" placeholder="请输入标签宽度" type="number"/>
</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="栅格间隔"/>
@ -818,7 +812,7 @@
</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 :current="activeData[currentIconModel]" :visible.sync="iconsVisible" @select="setIcon"/>
</div> </div>
</template> </template>
@ -827,14 +821,11 @@ 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 {imageComponents, inputComponents, selectComponents} from '@/components/generator/config'
imageComponents,
inputComponents, selectComponents
} from '@/components/generator/config'
import DraggableItem from './DraggableItem'
import {saveFormConf} from '@/utils/db' import {saveFormConf} from '@/utils/db'
import {debounce} from 'throttle-debounce' import {debounce} from 'throttle-debounce'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import _ from 'lodash'
const dateTimeFormat = { const dateTimeFormat = {
date: 'yyyy-MM-dd', date: 'yyyy-MM-dd',
@ -1030,23 +1021,26 @@ export default {
}) })
}, },
addSelectItem() { addSelectItem() {
let lastItem = _.last(this.activeData.__slot__.options)
this.activeData.__slot__.options.push({ this.activeData.__slot__.options.push({
label: '', label: '',
value: this.activeData.__slot__.options.length + 1 value: lastItem ? lastItem.value + 1 : 1
}) })
}, },
addImageSelectItem() { addImageSelectItem() {
let lastItem = _.last(this.activeData.__slot__.options)
this.activeData.options.push({ this.activeData.options.push({
label: '', label: '',
image: '', image: '',
value: this.activeData.options.length + 1 value: lastItem ? lastItem.value + 1 : 1
}) })
}, },
addImageCarouselItem() { addImageCarouselItem() {
let lastItem = _.last(this.activeData.__slot__.options)
this.activeData.__slot__.options.push({ this.activeData.__slot__.options.push({
label: '', label: '',
image: '', image: '',
value: this.activeData.__slot__.options.length + 1 value: lastItem ? lastItem.value + 1 : 1
}) })
}, },
addSelectOtherItem() { addSelectOtherItem() {
@ -1071,8 +1065,8 @@ export default {
}, },
closeUploadProgressHandle() { closeUploadProgressHandle() {
setTimeout(() => { setTimeout(() => {
this.loading.close(); this.loading.close()
}, 100); }, 100)
}, },
addTreeItem() { addTreeItem() {
++this.idGlobal ++this.idGlobal

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

@ -115,7 +115,8 @@ import {
assistComponents, assistComponents,
formConf, formConf,
imageComponents, imageComponents,
inputComponents, personalInfoComponents, inputComponents,
personalInfoComponents,
selectComponents selectComponents
} from '@/components/generator/config' } from '@/components/generator/config'
import {deepClone} from '@/utils/index' import {deepClone} from '@/utils/index'
@ -259,6 +260,7 @@ export default {
pItem.sort = res.data.sort pItem.sort = res.data.sort
isSuccess = true isSuccess = true
}) })
// 如果是分页组件 刷新所有分页的页码
if (item.typeId === 'PAGINATION') { if (item.typeId === 'PAGINATION') {
this.updatePaginationList() this.updatePaginationList()
} }

Write Preview
Loading…
Cancel
Save