Browse Source

优化

master
陈裕财 2 years ago
parent
commit
18cc1535b3
  1. 2
      src/views/mdp/form/formDef/Form.vue
  2. 29
      src/views/mdp/form/formField/Field.vue
  3. 10
      src/views/mdp/form/formField/Index.vue

2
src/views/mdp/form/formDef/Form.vue

@ -4,7 +4,7 @@
<form-field ref="formFields" :form-def.sync="editForm" :form-fields="formFields" :visible="formFieldsVisible">
<span slot="setBtn">
<el-button type="success" @click="goToFormDefIndex()" icon="el-icon-search">表单中心</el-button>
<el-button type="primary" icon="el-icon-setting" @click="$refs['formSetDialog'].open(editForm)">配置</el-button>
<el-button type="primary" icon="el-icon-setting" @click="$refs['formSetDialog'].open(editForm)">表单配置</el-button>
</span>
<el-input slot="formName" label="标题" v-model="editForm.formName" required width="100%"> </el-input>
</form-field>

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

@ -1,10 +1,15 @@
<template>
<section>
<el-popover trigger="hover" width="100px" placement="right-start">
<el-popover trigger="hover" width="100px" placement="right-start">
<el-row v-if="field.extFieldType=='row'" class="form-field" slot="reference" :gutter="gutter">
<draggable v-if="field.children && field.children.length>0" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}">
<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 :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="doChildDelete(child,idx,field.children)"></mdp-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>
@ -69,7 +74,11 @@
@change="(vs)=>showData[field.fieldIdCamel]=vs.join(',')"
> </mdp-date-range>
</el-form-item>
<el-row>
<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>
@ -128,6 +137,13 @@
return {}
}
},
parentField:{
type:Object,
default:function(){
return {}
}
},
formDef:{
type:Object,
default:function(){
@ -141,6 +157,10 @@
gutter:{
type:Number,
default:0
},
sample:{
type:Boolean,
default:false
}
},
watch: {
@ -206,6 +226,7 @@
children.splice(idx,1)
},
calcSpan(child,parent){
if(child.fieldLength>0){
return child.fieldLength
}

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

@ -44,7 +44,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"></mdp-field>
<mdp-field :gutter="0" :span="24" :value="item" :sample="true"></mdp-field>
</el-col>
</draggable>
@ -158,10 +158,10 @@
{formId:'formId',id:'19',showStyle:'origin',fieldId:'nineteen',fieldIdCamel:'nineteen',fieldTitle:'标签',isDict:'0',dictCode:'',fieldType:'select',fieldLength:24,defaultValue:'',isMultiple:'1',placeholder:'多选标签',isRequired:'0',remark:'属性',extFieldType:'tag',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'21',showStyle:'origin',fieldId:'twentyOne',fieldIdCamel:'twentyOne',fieldTitle:'布局-行',isDict:'0',dictCode:'',fieldType:'row',fieldLength:24,defaultValue:'',isMultiple:'1',placeholder:'行',isRequired:'0',remark:'属性',extFieldType:'row',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:'',
children:[
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列1',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列2',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列1',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列2',isDict:'0',dictCode:'',fieldType:'text',fieldLength:24,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列1',isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列2',isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列1',isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
{formId:'formId',id:'22',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'布局-列2',isDict:'0',dictCode:'',fieldType:'text',fieldLength:12,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
]
}

Loading…
Cancel
Save