Browse Source

优化

master
陈裕财 2 years ago
parent
commit
853c1db921
  1. 16
      src/views/mdp/form/formField/Field.vue
  2. 8
      src/views/mdp/form/formField/Index.vue

16
src/views/mdp/form/formField/Field.vue

@ -3,12 +3,12 @@
<el-row v-if="field.extType=='row'" :gutter="gutter">
<template v-if="sample==true">
<el-col @click.ctrl.native.stop="doChildDelete(child,idx,field.children)" v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
<mdp-field :find-not-in-child="findNotInChild" @bkey-change="onBkeyChange" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete" :sample="sample"></mdp-field>
<mdp-form-field :find-not-in-child="findNotInChild" @bkey-change="onBkeyChange" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete" :sample="sample"></mdp-form-field>
</el-col>
</template>
<draggable v-else-if="field.children && field.children.length>0" @add="onAdd" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}">
<el-col @click.ctrl.native.stop="doChildDelete(child,idx,field.children)" v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
<mdp-field :find-not-in-child="findNotInChild" @bkey-change="onBkeyChange" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-field>
<mdp-form-field :find-not-in-child="findNotInChild" @bkey-change="onBkeyChange" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-form-field>
</el-col>
</draggable>
</el-row>
@ -19,14 +19,14 @@
<template v-if="sample==true">
<el-row :gutter="gutter">
<el-col @click.ctrl.native.stop="doChildDelete(child,idx,field.children)" v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
<mdp-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete" :sample="sample"></mdp-field>
<mdp-form-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete" :sample="sample"></mdp-form-field>
</el-col>
</el-row>
</template>
<el-row :gutter="gutter" v-else-if="field.children && field.children.length>0">
<draggable @add="onAdd" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}">
<el-col @click.ctrl.native.stop="doChildDelete(child,idx,field.children)" v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
<mdp-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-field>
<mdp-form-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-form-field>
</el-col>
</draggable>
</el-row>
@ -36,7 +36,7 @@
<el-tab-pane :label="tab" v-for=" tab,tidx in tabListCpd" :key="tidx" :name="tab">
<el-row :gutter="gutter">
<el-col @click.ctrl.native.stop="doChildDelete(child,idx,field.children)" v-for="child,idx in field.children.filter(c=>c.gname==tab)" :key="idx" :span="calcSpan(child,field)">
<mdp-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-field>
<mdp-form-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-form-field>
</el-col>
</el-row>
</el-tab-pane>
@ -48,7 +48,7 @@
<div>拖拽组件到此</div>
</el-col>
<el-col v-else @click.ctrl.native.stop="doChildDelete(child,idx,field.children)" v-for="child,idx in field.children.filter(c=>c.gname==tab||!c.gname)" :key="idx" :span="calcSpan(child,field)">
<mdp-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-field>
<mdp-form-field :find-not-in-child="findNotInChild" :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-form-field>
</el-col>
</draggable>
</el-row>
@ -143,7 +143,7 @@
</mdp-dialog>
<el-drawer :visible.sync="showPopover" append-to-body :modal="false">
<mdp-field-cfg @bkey-change="onBkeyChange" :has-child="hasChild" :parent-field="parentField" :form-def="formDef" :value="field" :visible="showPopover" @change="onFieldCfgChange" @close="showPopover=false"></mdp-field-cfg>
<mdp-form-field-cfg @bkey-change="onBkeyChange" :has-child="hasChild" :parent-field="parentField" :form-def="formDef" :value="field" :visible="showPopover" @change="onFieldCfgChange" @close="showPopover=false"></mdp-form-field-cfg>
</el-drawer>
</section>
</template>
@ -349,7 +349,7 @@
},//end method
components: {
draggable,
"mdp-field": ()=>import('@/views/mdp/form/formField/Field.vue'),
"mdp-form-field": ()=>import('@/views/mdp/form/formField/Field.vue'),
MdpFieldCfg
},

8
src/views/mdp/form/formField/Index.vue

@ -32,7 +32,7 @@
<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 @bkey-change="onBkeyChange" :find-not-in-child="findNotInChild" :has-child="hasChild" :gutter="0" :span="24" :value="item" @change="(v)=>Object.assign(item,v)"></mdp-field>
<mdp-form-field @bkey-change="onBkeyChange" :find-not-in-child="findNotInChild" :has-child="hasChild" :gutter="0" :span="24" :value="item" @change="(v)=>Object.assign(item,v)"></mdp-form-field>
</el-col>
</draggable>
</el-row>
@ -53,7 +53,7 @@
<draggable id="af" :sort="false" class="dragArea" @start="onTplStart" :options="{group:{ name:'g1', pull:'clone'}, animation:150}" v-model="sampleFields" :move="onMove">
<el-col v-for="(item,index) in sampleFields" :key="index" :span="calcSpan(item)">
<mdp-field :gutter="0" :span="24" :value="item" :sample="true"></mdp-field>
<mdp-form-field :gutter="0" :span="24" :value="item" :sample="true"></mdp-form-field>
</el-col>
</draggable>
@ -140,7 +140,7 @@ import { getToken} from '@/utils/auth'
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import MdpField from './Field.vue'
import MdpFormField from './Field.vue'
import {listTableColumn} from '@/api/mdp/form/FormField.js'
import treeTool from '@/components/mdp-ui/js/treeTool.js'
export default {
@ -649,7 +649,7 @@ export default {
},//end method
components: {
// 'form-field-edit':FormFieldEdit
draggable, MdpField
draggable, MdpFormField
},
mounted() {

Loading…
Cancel
Save