|
|
|
@ -48,12 +48,15 @@ |
|
|
|
<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示"/> |
|
|
|
</el-form-item> |
|
|
|
<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 v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined" 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.__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-button label="default"/> |
|
|
|
<el-radio-button label="flex"/> |
|
|
|
@ -77,7 +80,8 @@ |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<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 v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度"> |
|
|
|
<el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable/> |
|
|
|
@ -235,7 +239,8 @@ |
|
|
|
</el-form-item> |
|
|
|
<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-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"/> |
|
|
|
@ -300,7 +305,8 @@ |
|
|
|
@input="setTimeValue($event)" |
|
|
|
/> |
|
|
|
</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> |
|
|
|
<draggable |
|
|
|
:list="activeData.__slot__.options" |
|
|
|
@ -319,7 +325,8 @@ |
|
|
|
<!-- :value="item.value"--> |
|
|
|
<!-- @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" |
|
|
|
@click="activeData.__slot__.options.splice(index, 1)"> |
|
|
|
<i class="el-icon-remove-outline"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -333,6 +340,15 @@ |
|
|
|
> |
|
|
|
添加选项 |
|
|
|
</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> |
|
|
|
<el-divider/> |
|
|
|
</template> |
|
|
|
@ -387,7 +403,7 @@ |
|
|
|
<!-- 级联选择静态树 --> |
|
|
|
<el-tree |
|
|
|
v-if="activeData.__config__.dataType === 'static'" |
|
|
|
draggable |
|
|
|
draggable="true" |
|
|
|
:data="activeData.options" |
|
|
|
node-key="id" |
|
|
|
:expand-on-click-node="false" |
|
|
|
@ -544,7 +560,7 @@ |
|
|
|
:props="layoutTreeProps" |
|
|
|
node-key="renderKey" |
|
|
|
default-expand-all |
|
|
|
draggable |
|
|
|
draggable="true" |
|
|
|
> |
|
|
|
<span slot-scope="{ node, data }"> |
|
|
|
<span class="node-label"> |
|
|
|
@ -647,8 +663,11 @@ import IconsDialog from './IconsDialog' |
|
|
|
import { |
|
|
|
inputComponents, selectComponents |
|
|
|
} from '@/components/generator/config' |
|
|
|
import DraggableItem from './DraggableItem' |
|
|
|
import {saveFormConf} from '@/utils/db' |
|
|
|
import {debounce} from "throttle-debounce" |
|
|
|
import {debounce} from 'throttle-debounce' |
|
|
|
import draggable from 'vuedraggable' |
|
|
|
|
|
|
|
const dateTimeFormat = { |
|
|
|
date: 'yyyy-MM-dd', |
|
|
|
week: 'yyyy 第 WW 周', |
|
|
|
@ -666,6 +685,7 @@ const needRerenderList = ['tinymce'] |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
TreeNodeDialog, |
|
|
|
draggable, |
|
|
|
IconsDialog |
|
|
|
}, |
|
|
|
props: ['showField', 'activeData', 'formConf'], |
|
|
|
@ -819,7 +839,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
deep: true |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
addReg() { |
|
|
|
@ -835,6 +855,19 @@ export default { |
|
|
|
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() { |
|
|
|
++this.idGlobal |
|
|
|
this.dialogVisible = true |
|
|
|
@ -975,53 +1008,66 @@ export default { |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@import '@/assets/styles/form/index'; |
|
|
|
|
|
|
|
.right-board { |
|
|
|
width: 350px; |
|
|
|
position: absolute; |
|
|
|
right: 17px; |
|
|
|
top: 0; |
|
|
|
padding-top: 3px; |
|
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
.field-box { |
|
|
|
position: relative; |
|
|
|
height: calc(100vh - 242px); |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.el-scrollbar { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.select-item { |
|
|
|
display: flex; |
|
|
|
border: 1px dashed #fff; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
& .close-btn { |
|
|
|
cursor: pointer; |
|
|
|
color: #f56c6c; |
|
|
|
} |
|
|
|
|
|
|
|
& .el-input + .el-input { |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.select-item + .select-item { |
|
|
|
margin-top: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.select-item.sortable-chosen { |
|
|
|
border: 1px dashed #409eff; |
|
|
|
} |
|
|
|
|
|
|
|
.select-line-icon { |
|
|
|
line-height: 32px; |
|
|
|
font-size: 22px; |
|
|
|
padding: 0 4px; |
|
|
|
color: #777; |
|
|
|
} |
|
|
|
|
|
|
|
.option-drag { |
|
|
|
cursor: move; |
|
|
|
} |
|
|
|
|
|
|
|
.time-range { |
|
|
|
.el-date-editor { |
|
|
|
width: 227px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-icon-time { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
@ -1030,6 +1076,7 @@ export default { |
|
|
|
.node-label { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.node-icon { |
|
|
|
color: #bebfc3; |
|
|
|
} |
|
|
|
|
wangqing
5 years ago