|
|
|
@ -29,10 +29,10 @@ |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-row> |
|
|
|
<draggable id="sf" class="dragArea min-height" v-model="selectedFields" :options="{group:{ name:'g1'}, animation:150}" @add="add" :no-transition-on-drag="true" @start="drag=true" @end="drag=false"> |
|
|
|
<draggable id="sf" class="dragArea min-height" v-model="selectedFields" :options="{group:{ name:'g1'}, animation:150}" @add="onAdd" :no-transition-on-drag="true" @start="drag=true" @end="drag=false"> |
|
|
|
|
|
|
|
<el-col v-for="(item,index) in selectedFields" @click.ctrl.native="doChildDelete(item,index,selectedFields)" :key="index" :span="calcSpan(item)"> |
|
|
|
<mdp-field :gutter="0" :span="24" :value="item" @change="(v)=>Object.assign(item,v)"></mdp-field> |
|
|
|
<mdp-field :find-not-in-child="findNotInChild" :has-child="hasChild" :gutter="0" :span="24" :value="item" @change="(v)=>Object.assign(item,v)"></mdp-field> |
|
|
|
</el-col> |
|
|
|
</draggable> |
|
|
|
</el-row> |
|
|
|
@ -142,6 +142,7 @@ import draggable from 'vuedraggable' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import MdpField from './Field.vue' |
|
|
|
import {listTableColumn} from '@/api/mdp/form/FormField.js' |
|
|
|
import treeTool from '@/components/mdp-ui/js/treeTool.js' |
|
|
|
export default { |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
@ -340,28 +341,22 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
onTplStart(evt){ |
|
|
|
var item=evt.item |
|
|
|
var item2=JSON.parse(JSON.stringify(item)) |
|
|
|
var noSelectFieldId=this.fieldIds.find(i=>{ |
|
|
|
return !this.selectedFields.some(k=>k.id==i.id && k.isNewAdd!='1'); |
|
|
|
}) |
|
|
|
item2.id=noSelectFieldId.id |
|
|
|
item2.fieldId=noSelectFieldId.fieldId |
|
|
|
item2.fieldIdCamel=noSelectFieldId.fieldIdCamel |
|
|
|
item=item2 |
|
|
|
}, |
|
|
|
add(evt){ |
|
|
|
onAdd(evt){ |
|
|
|
debugger; |
|
|
|
let item=this.selectedFields[evt.newIndex]; |
|
|
|
item.isNewAdd='1' |
|
|
|
var item2=JSON.parse(JSON.stringify(item)) |
|
|
|
var noSelectFieldId=this.fieldIds.find(i=>{ |
|
|
|
return !this.selectedFields.some(k=>k.id==i.id && k.isNewAdd!='1'); |
|
|
|
return !this.hasChild(i.id); |
|
|
|
}) |
|
|
|
if(!noSelectFieldId){ |
|
|
|
this.selectedFields.splice(evt.newIndex,1) |
|
|
|
this.$notify.error('当前组件已经超过最大数量，不能再添加'); |
|
|
|
return; |
|
|
|
} |
|
|
|
item2.id=noSelectFieldId.id |
|
|
|
item2.fieldId=noSelectFieldId.fieldId |
|
|
|
item2.fieldIdCamel=noSelectFieldId.fieldIdCamel |
|
|
|
item2.isNewAdd='0' |
|
|
|
this.selectedFields[evt.newIndex]=item2; |
|
|
|
this.addForm=item2; |
|
|
|
|
|
|
|
@ -553,12 +548,61 @@ export default { |
|
|
|
return axiosObj |
|
|
|
}, |
|
|
|
doChildDelete(child,idx,children){ |
|
|
|
debugger; |
|
|
|
children.splice(idx,1) |
|
|
|
this.$emit('delete',child,idx,children) |
|
|
|
}, |
|
|
|
/**end 在上面加自定义方法**/ |
|
|
|
hasChild(id){ |
|
|
|
return this.hasMyChild(id,this.selectedFields) |
|
|
|
}, |
|
|
|
hasMyChild(id,children){ |
|
|
|
debugger; |
|
|
|
if(!children||children.length==0){ |
|
|
|
return false; |
|
|
|
}else{ |
|
|
|
if(children.some(c=>c.id==id && c.isNewAdd!=true)){ |
|
|
|
return true |
|
|
|
}else{ |
|
|
|
for(var i=0;i<children.length;i++){ |
|
|
|
var childs=children[i].children |
|
|
|
var has= this.hasMyChild(id,childs) |
|
|
|
if(has){ |
|
|
|
return true; |
|
|
|
}else{ |
|
|
|
continue; |
|
|
|
} |
|
|
|
} |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
findNotInChild(){ |
|
|
|
return this.fieldIds.find(i=>{ |
|
|
|
return !this.hasChild(i.id); |
|
|
|
}) |
|
|
|
}, |
|
|
|
getMyFieldList(list,children){ |
|
|
|
if(children && children.length>0){ |
|
|
|
children.forEach(k=>{ |
|
|
|
if(k.children && k.children.length>0){ |
|
|
|
var childs=k.children |
|
|
|
delete k.children |
|
|
|
list.push(k) |
|
|
|
this.getMyFieldList(list,childs) |
|
|
|
}else{ |
|
|
|
list.push(k) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
getFieldList(){ |
|
|
|
var list=[] |
|
|
|
this.getMyFieldList(list,this.selectedFields) |
|
|
|
return list; |
|
|
|
}, |
|
|
|
getMaxFields(){ |
|
|
|
return this.fieldIds.length |
|
|
|
} |
|
|
|
},//end method |
|
|
|
components: { |
|
|
|
//在下面添加其它组件 'form-field-edit':FormFieldEdit |
|
|
|
@ -568,7 +612,7 @@ export default { |
|
|
|
|
|
|
|
this.myFormDef=this.formDef |
|
|
|
if(this.formFields){ |
|
|
|
this.selectedFields=JSON.parse(JSON.stringify(this.formFields)) |
|
|
|
this.selectedFields=treeTool.translateDataToTree(this.formFields,'groupId','id') |
|
|
|
}else{ |
|
|
|
this.selectedFields=[] |
|
|
|
} |
|
|
|
|
陈裕财
2 years ago