end7less
/
program_lcode_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
陈裕财 2 years ago
parent
56efda5a5d
commit
f5ad8f5323
3 changed files with 31 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/views/mdp/form/formField/Field.vue
  2. 3
      src/views/mdp/form/formField/FieldCfg.vue
  3. 24
      src/views/mdp/form/formField/Index.vue

22
src/views/mdp/form/formField/Field.vue
View File

@ -1,18 +1,18 @@
<template>
<section @click="showPopover=(sample==true?false:!showPopover)">
<el-row v-if="field.extFieldType=='row'" class="form-field" slot="reference" :gutter="gutter">
<section @click="select=!select" @click.alt="showPopover=(sample==true?false:!showPopover)" :class="{'form-field':true,'select':showPopover}">
<el-row v-if="field.extFieldType=='row'" 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 @click.ctrl.native="doChildDelete(child,idx,field.children)" 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="onChildDelete" :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 @click.ctrl.native="doChildDelete(child,idx,field.children)" 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="onChildDelete"></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 :label="field.fieldTitle" :prop="field.fieldIdCamel" :rules="[{ required: field.isRequired=='1', message: '该项必填', trigger: 'change' }]">
<div v-if="field.qx=='nr'"></div>
<!--用户-->
@ -179,6 +179,7 @@
list: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
yesOrNo: [{id:'0',name:'否'},{id:'1',name:'是'}],
},
select:false,
}//end return
},//end data
methods: {
@ -213,8 +214,12 @@
this.$emit('change',this.field)
this.$emit('change2',this.field)
},
onChildDelete(child,idx,children){
this.$emit('delete',child,idx,children)
},
doChildDelete(child,idx,children){
children.splice(idx,1)
this.$emit('delete',child,idx,children)
},
calcSpan(child,parent){
@ -261,4 +266,7 @@
display: inline-block;
}
}
.select {
border: 1px dashed #0000ff; /* 蓝色虚线边框 */
}
</style>

3
src/views/mdp/form/formField/FieldCfg.vue
View File

@ -20,8 +20,7 @@
<el-select v-model="primaryKeys" multiple label="" clearable placeholder="请选择">
<el-option label="创建人" key="cuserid" value="cuserid">创建人 </el-option>
<el-option label="创建部门" key="deptid" value="deptid">创建部门 </el-option>
<el-option v-for="option in selectedFields" :label="option.fieldTitle" :key="option.fieldIdCamel" :value="option.fieldIdCamel">{{option.fieldTitle}} </el-option>
</el-select>
</el-select>
</el-form-item>
<el-form-item label="必需" prop="isRequired" >
<el-checkbox v-model="field.isRequired" :disabled="field.isBizKey=='1'" true-label="1" false-label="0">是否必输</el-checkbox>

24
src/views/mdp/form/formField/Index.vue
View File

@ -3,15 +3,16 @@
<el-row class="border padding">
<el-col :span="16">
<draggable id="delDrg" class="dragArea" :list="delFields" :options="{group:{ name:'g1'}, animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
<el-row type="flex">
<el-row type="flex" style="margin-bottom:5px;">
<el-badge :value="selectedFields.length">
<span style="align:center;margin-top:50px;">
<slot name="setBtn">
</slot>
&nbsp;&nbsp;将右边表单元素拖拽到方框内 拖拽表单元素可以排序,最多支持15个字段
</slot>&nbsp;将右边组件拖拽到方框内&nbsp;【删除】:ctrl+鼠标点击组件&nbsp;【配置】：alt+鼠标点击组件
</span>
</el-badge>
</el-row>
</el-badge>
</el-row>
</draggable>
<el-form class="drag" label-width="100px" v-adaptive style="width:100%;height:100px;overflow:auto" ref="showDataRef">
<div style="border:1px dashed #000;padding: 20px;">
@ -30,8 +31,8 @@
<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">
<el-col v-for="(item,index) in selectedFields" :key="index" :span="calcSpan(item)">
<mdp-field :gutter="0" :span="24" :value="item" @change="(v)=>Object.assign(item,v)"></mdp-field>
<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>
</el-col>
</draggable>
</el-row>
@ -52,7 +53,7 @@
<draggable id="af" class="dragArea" :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-field :gutter="0" :span="24" :value="item" :sample="true"></mdp-field>
</el-col>
</draggable>
@ -494,7 +495,12 @@ export default {
axiosObj.headers={}
}
return axiosObj
}
},
doChildDelete(child,idx,children){
debugger;
children.splice(idx,1)
this.$emit('delete',child,idx,children)
},
/**end 在上面加自定义方法**/
},//end method

Write Preview
Loading…
Cancel
Save