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
Unified 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. 20
      src/views/mdp/form/formField/Index.vue

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

@ -1,18 +1,18 @@
<template> <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"> <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> </el-col>
</template> </template>
<draggable v-else-if="field.children && field.children.length>0" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}"> <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> </el-col>
</draggable> </draggable>
</el-row> </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> <div v-if="field.qx=='nr'"></div>
<!--用户--> <!--用户-->
@ -179,6 +179,7 @@
list: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}], list: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
yesOrNo: [{id:'0',name:'否'},{id:'1',name:'是'}], yesOrNo: [{id:'0',name:'否'},{id:'1',name:'是'}],
}, },
select:false,
}//end return }//end return
},//end data },//end data
methods: { methods: {
@ -213,8 +214,12 @@
this.$emit('change',this.field) this.$emit('change',this.field)
this.$emit('change2',this.field) this.$emit('change2',this.field)
}, },
onChildDelete(child,idx,children){
this.$emit('delete',child,idx,children)
},
doChildDelete(child,idx,children){ doChildDelete(child,idx,children){
children.splice(idx,1) children.splice(idx,1)
this.$emit('delete',child,idx,children)
}, },
calcSpan(child,parent){ calcSpan(child,parent){
@ -261,4 +266,7 @@
display: inline-block; display: inline-block;
} }
} }
.select {
border: 1px dashed #0000ff; /* 蓝色虚线边框 */
}
</style> </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-select v-model="primaryKeys" multiple label="" clearable placeholder="请选择">
<el-option label="创建人" key="cuserid" value="cuserid">创建人 </el-option> <el-option label="创建人" key="cuserid" value="cuserid">创建人 </el-option>
<el-option label="创建部门" key="deptid" value="deptid">创建部门 </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>
<el-form-item label="必需" prop="isRequired" > <el-form-item label="必需" prop="isRequired" >
<el-checkbox v-model="field.isRequired" :disabled="field.isBizKey=='1'" true-label="1" false-label="0">是否必输</el-checkbox> <el-checkbox v-model="field.isRequired" :disabled="field.isBizKey=='1'" true-label="1" false-label="0">是否必输</el-checkbox>

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

@ -3,12 +3,13 @@
<el-row class="border padding"> <el-row class="border padding">
<el-col :span="16"> <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"> <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"> <el-badge :value="selectedFields.length">
<span style="align:center;margin-top:50px;"> <span style="align:center;margin-top:50px;">
<slot name="setBtn"> <slot name="setBtn">
</slot>
&nbsp;&nbsp;将右边表单元素拖拽到方框内 拖拽表单元素可以排序,最多支持15个字段
</slot>&nbsp;将右边组件拖拽到方框内&nbsp;【删除】:ctrl+鼠标点击组件&nbsp;【配置】：alt+鼠标点击组件
</span> </span>
</el-badge> </el-badge>
</el-row> </el-row>
@ -30,8 +31,8 @@
<el-row> <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="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> </el-col>
</draggable> </draggable>
</el-row> </el-row>
@ -52,7 +53,7 @@
<draggable id="af" class="dragArea" :options="{group:{ name:'g1', pull:'clone'}, animation:150}" v-model="sampleFields" :move="onMove"> <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)"> <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> </el-col>
</draggable> </draggable>
@ -494,7 +495,12 @@ export default {
axiosObj.headers={} axiosObj.headers={}
} }
return axiosObj return axiosObj
}
},
doChildDelete(child,idx,children){
debugger;
children.splice(idx,1)
this.$emit('delete',child,idx,children)
},
/**end 在上面加自定义方法**/ /**end 在上面加自定义方法**/
},//end method },//end method

Write Preview
Loading…
Cancel
Save