|
|
@ -1,18 +1,17 @@ |
|
|
<template> |
|
|
<template> |
|
|
<section> |
|
|
|
|
|
<el-popover trigger="hover" width="100px" placement="right-start"> |
|
|
|
|
|
<el-row v-if="field.extFieldType=='row'" class="form-field" slot="reference" :gutter="gutter"> |
|
|
|
|
|
<template v-if="sample==true"> |
|
|
|
|
|
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)"> |
|
|
|
|
|
<mdp-field :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="doChildDelete(child,idx,field.children)" :sample="sample"></mdp-field> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</template> |
|
|
|
|
|
<draggable v-else-if="field.children && field.children.length>0" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}"> |
|
|
|
|
|
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)"> |
|
|
|
|
|
<mdp-field :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="doChildDelete(child,idx,field.children)"></mdp-field> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</draggable> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
<section @click="showPopover=(sample==true?false:!showPopover)"> |
|
|
|
|
|
<el-row v-if="field.extFieldType=='row'" class="form-field" slot="reference" :gutter="gutter"> |
|
|
|
|
|
<template v-if="sample==true"> |
|
|
|
|
|
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)"> |
|
|
|
|
|
<mdp-field :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="doChildDelete(child,idx,field.children)" :sample="sample"></mdp-field> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</template> |
|
|
|
|
|
<draggable v-else-if="field.children && field.children.length>0" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}"> |
|
|
|
|
|
<el-col v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)"> |
|
|
|
|
|
<mdp-field :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="doChildDelete(child,idx,field.children)"></mdp-field> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</draggable> |
|
|
|
|
|
</el-row> |
|
|
<el-form-item slot="reference" v-else class="form-field" :label="field.fieldTitle" :prop="field.fieldIdCamel" :rules="[{ required: field.isRequired=='1', message: '该项必填', trigger: 'change' }]"> |
|
|
<el-form-item slot="reference" v-else class="form-field" :label="field.fieldTitle" :prop="field.fieldIdCamel" :rules="[{ required: field.isRequired=='1', message: '该项必填', trigger: 'change' }]"> |
|
|
<div v-if="field.qx=='nr'"></div> |
|
|
<div v-if="field.qx=='nr'"></div> |
|
|
|
|
|
|
|
|
@ -74,16 +73,7 @@ |
|
|
<mdp-date-range :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='daterange'" :value="showData[field.fieldIdCamel]?showData[field.fieldIdCamel].split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" |
|
|
<mdp-date-range :show-style="field.showStyle" :disabled="field.qx=='r'" v-else-if="field.fieldType=='daterange'" :value="showData[field.fieldIdCamel]?showData[field.fieldIdCamel].split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" |
|
|
@change="(vs)=>showData[field.fieldIdCamel]=vs.join(',')" |
|
|
@change="(vs)=>showData[field.fieldIdCamel]=vs.join(',')" |
|
|
> </mdp-date-range> |
|
|
> </mdp-date-range> |
|
|
</el-form-item> |
|
|
|
|
|
<el-row v-if="sample"> |
|
|
|
|
|
<el-button v-if=" !parentField || parentField.extFieldType!='row'" type="warning" icon="el-icon-edit" circle @click="showPopover=!showPopover"></el-button> |
|
|
|
|
|
<div v-else>布局元素=el-row</div> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
<el-row v-else> |
|
|
|
|
|
<el-button type="warning" icon="el-icon-edit" circle @click="showPopover=!showPopover"></el-button> |
|
|
|
|
|
<el-button type="danger" icon="el-icon-delete" circle @click="fieldDelete(field)"></el-button> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
</el-popover> |
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
<mdp-dialog ref="imageDialog" title="选择图片" width="80%" :modal="false"> |
|
|
<mdp-dialog ref="imageDialog" title="选择图片" width="80%" :modal="false"> |
|
|
<template v-slot="{visible,data,dialog}"> |
|
|
<template v-slot="{visible,data,dialog}"> |
|
|
<mdp-select-image v-if="visible" :visible="visible" @select="(imgs)=>{ |
|
|
<mdp-select-image v-if="visible" :visible="visible" @select="(imgs)=>{ |
|
|
|
陈裕财
2 years ago