From 1e8fe2262e34d694b07161f3d0ab4e912faa9714 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Sat, 7 Oct 2023 04:27:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mdp/form/formField/Field.vue    | 79 +++++++++++++++----
 src/views/mdp/form/formField/FieldCfg.vue | 92 ++++++++++++-----------
 src/views/mdp/form/formField/Index.vue    | 89 ++++++++++++----------
 3 files changed, 162 insertions(+), 98 deletions(-)

diff --git a/src/views/mdp/form/formField/Field.vue b/src/views/mdp/form/formField/Field.vue
index f25e757..6c6f867 100644
--- a/src/views/mdp/form/formField/Field.vue
+++ b/src/views/mdp/form/formField/Field.vue
@@ -1,6 +1,6 @@
 <template>
-	<section @click="select=!select" @click.alt.stop="showPopover=(sample==true?false:!showPopover)" :class="{'form-field':true,'select':showPopover}"> 
-		<el-row v-if="field.extType=='row'" slot="reference" :gutter="gutter">     
+	<section @click.alt.stop="showPopover=(sample==true?false:!showPopover)" :class="{'form-field':true,'select':showPopover}"> 
+		<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  :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>
@@ -12,7 +12,50 @@
 				</el-col> 
 			</draggable>   
 		</el-row>  
-		<el-form-item  slot="reference" v-else  :label="field.title" :prop="field.idCamel" :rules="[{ required: field.isRequired=='1', message: '该项必填', trigger: 'change' }]"> 
+		<el-card v-else-if="field.extType=='card'" :gutter="gutter"> 
+			<div slot="header" class="clearfix">
+				<span>{{ field.title }}</span> 
+			</div>    
+			<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  :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>
+					</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  :has-child="hasChild" :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-card> 
+		<el-tabs v-else-if="field.extType=='tabs'" v-model="showData[field.idCamel]">     
+			<template v-if="sample==true">
+				<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  :has-child="hasChild" :parent-field="field" :gutter="gutter" :span="span" v-if="child" :value="child" @change="(v)=>onChildChange(child,v)" @delete="onChildDelete"></mdp-field>
+						</el-col> 
+					</el-row> 
+				</el-tab-pane>
+			</template>
+			<el-tab-pane :label="tab" v-else v-for=" tab,tidx in tabListCpd" :key="tidx" :name="tab">
+				<el-row :gutter="gutter"> 
+					<draggable @add="onAdd" v-model="field.children" :options="{group:{ name:'g1', pull:'clone'}, animation:150}"> 
+						<el-col v-if="!field.children.some(c=>c.gname==tab||!c.gname)" style="height:100px">
+							<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  :has-child="hasChild" :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-tab-pane>
+			
+		</el-tabs> 
+		<el-form-item  v-else  :label="field.title" :prop="field.idCamel" :rules="[{ required: field.isRequired=='1', message: '该项必填', trigger: 'change' }]"> 
 			<div  v-if="field.qx=='nr'"></div>
 			 
 		<!--用户-->
@@ -102,7 +145,7 @@
 		</mdp-dialog>  
 		
 		<el-drawer :visible.sync="showPopover" append-to-body :modal="false">
-				<mdp-field-cfg :form-def="formDef" :value="field" :visible="showPopover" @change="onFieldCfgChange" @close="showPopover=false"></mdp-field-cfg>
+				<mdp-field-cfg :parent-field="parentField" :form-def="formDef" :value="field" :visible="showPopover" @change="onFieldCfgChange" @close="showPopover=false"></mdp-field-cfg>
 			</el-drawer>
 	</section>
 </template>
@@ -115,7 +158,13 @@
 	    computed: {
 		    ...mapGetters([
 		      'userInfo'
-		    ])
+		    ]),
+			tabListCpd(){
+				if(!this.field.gname){
+					return []
+				}
+				return this.field.gname.split(",")
+			}
 		}, 
 		props:{
 			visible:{
@@ -175,6 +224,12 @@
 				immediate:true,
 				handler:function(){
 					this.field=this.value
+					if(this.field.extType=='tabs'){
+						if(this.field.gname){
+							this.showData[this.field.idCamel]=this.field.gname.split(",")[0]
+						}
+						
+					}
 				}
 		   }
 	    },	
@@ -235,16 +290,12 @@
 				children.splice(idx,1)
 				this.$emit('delete',child,idx,children)
 			},
-			calcSpan(child,parent){
-				
-				if(child.fieldLength>0){
-					return child.fieldLength
-				}
-				if(child.extType=='textarea'){
-					return 24
-				}else{ 
+			calcSpan(child,parent){ 
+				if(child.span>0){
+					return child.span
+				}else{
 					return this.span
-				}
+				}  
 			},
 			
 			onAdd(evt){  
diff --git a/src/views/mdp/form/formField/FieldCfg.vue b/src/views/mdp/form/formField/FieldCfg.vue
index d0b44f2..cf2d599 100644
--- a/src/views/mdp/form/formField/FieldCfg.vue
+++ b/src/views/mdp/form/formField/FieldCfg.vue
@@ -3,7 +3,7 @@
  
 				  <el-form v-model="field" :rules="fieldRules" ref="field" label-width="80px" style="width:350px;">
 				  	 <el-form-item v-if="(field.typ=='select' || (field.typ=='checkbox') || (field.typ=='radio')) && !field.extType" label="数据" prop="isDict">
-				  		<el-col :span="20">
+				  		<el-col :span="24">
 				  			<el-input  v-model="field.dict"  @focus="$refs['itemDialog'].open(field)" placeholder="点击关联基础数据"> </el-input>
 				  		</el-col>  
 				  		<el-col :span="4">
@@ -11,12 +11,12 @@
 				  		</el-col>  
 				  	</el-form-item>
 				  	<el-form-item label="名称" prop="title">
-				  		<el-col :span="20">
+				  		<el-col :span="24">
 				  			<el-input  v-model="field.title" label="属性名称" auto-complete="off"  placeholder="请输入内容"   > </el-input>
 				  		</el-col>
 				  	</el-form-item> 
 				  	<el-form-item label="编码" prop="id">
-				  		<el-col :span="20">
+				  		<el-col :span="24">
 				  			<el-input v-model="field.id" auto-complete="off"  placeholder="请输入内容"   > </el-input>
 				  		</el-col>
 				  	</el-form-item>  
@@ -31,43 +31,35 @@
 				  		<el-checkbox v-model="field.req" :disabled="field.bkey=='1'" true-label="1" false-label="0">是否必输</el-checkbox>  
 				  	</el-form-item>
 				  	<el-form-item label="长度" prop="len">
-				  		<el-col :span="20">
-				  			<el-input   v-model="field.len" auto-complete="off"  placeholder="请输入内容"   > </el-input>
-				  	</el-col>
-				  	</el-form-item>
+ 								<el-input   v-model="field.len" auto-complete="off"  placeholder="请输入内容"   > </el-input>
+ 					</el-form-item>
+				  	<el-form-item label="栅格宽度" prop="span" v-if="parentField && (parentField.extType=='row' || parentField.extType=='tabs')">
+ 				  			<el-input type="number" :max="24"  v-model="field.span" auto-complete="off"  placeholder="上级是row的情况下设定span"   > </el-input>
+ 				  	</el-form-item>
+					
+				  	<el-form-item label="tab列表" prop="gname" v-if="field.extType=='tabs'" title="输入新的名字直接增加tab页,删除名字直接删除tab页">
+ 				  			<el-input v-model="field.gname" auto-complete="off"  placeholder="tab名称,逗号分割多个"> </el-input> 
+ 				  	</el-form-item> 
+				  	<el-form-item label="归属tab" prop="gname" v-else-if="parentField && parentField.extType=='tabs' && parentField.gname">
+ 				  			<mdp-select v-model="field.gname" auto-complete="off"  placeholder="归属tab" :plus-options="parentField.gname.split(',').map(t=>{return {id:t,name:t}})"> </mdp-select>
+ 				  	</el-form-item>
 				  	<el-form-item label="占位符" prop="hol">
-				  		<el-col :span="20">
-				  			<el-input   v-model="field.hol" auto-complete="off"  placeholder="请输入内容"   > </el-input>
-				  	</el-col> 
-				  	</el-form-item>
+ 				  			<el-input   v-model="field.hol" auto-complete="off"  placeholder="请输入内容"   > </el-input>
+ 				  	</el-form-item>
 					<el-form-item v-if="field.typ=='select' || (field.typ=='checkbox') || (field.typ=='radio')" label="默认值" prop="dval">
-						<el-col :span="20">
-							<mdp-select :item-code="field.dict" v-model="field.dval"  clearable placeholder="请选择"/> 
-						</el-col> 
-				  	</el-form-item>
+ 							<mdp-select :item-code="field.dict" v-model="field.dval"  clearable placeholder="请选择"/> 
+ 				  	</el-form-item>
 					<el-form-item v-else label="默认值" prop="dval">
-				  		<el-col :span="20">
-				  			<el-input   v-model="field.dval" auto-complete="off"  placeholder="请输入内容"   > </el-input>
-				  	</el-col> 
-				  	</el-form-item>
+ 				  			<el-input   v-model="field.dval" auto-complete="off"  placeholder="请输入内容"   > </el-input>
+ 				  	</el-form-item>
 				  	<el-form-item label="多选" prop="mul">
-				  		<el-col :span="20">
-				  		    <el-checkbox  v-model="field.mul" :disabled=" field.typ!='checkbox' && field.typ!='select' && field.extType!='dept'" true-label="1" false-label="0">多选</el-checkbox>  
-				  	</el-col> 
-				  	</el-form-item>
+ 				  		    <el-checkbox  v-model="field.mul" :disabled=" field.typ!='checkbox' && field.typ!='select' && field.extType!='dept'" true-label="1" false-label="0">多选</el-checkbox>  
+ 				  	</el-form-item>
 				  	<el-form-item label="权限" prop="qx">
 						<el-button @click="$refs['qxDialog'].open(field)">字段权限设置</el-button>
 				  	</el-form-item>
-				  	<el-form-item label="展示风格" prop="showStyle">
-				  		<el-col :span="20">
-				  		<el-radio v-model="field.showStyle" label="origin">原生-origin</el-radio> 
-						
-				  		<el-radio v-model="field.showStyle" label="tag">标签-tag</el-radio> 
-						
-				  		<el-radio v-model="field.showStyle" label="x">综合-x</el-radio> 
-				  	</el-col> 
-				  	</el-form-item>
-				  	<el-form-item label="样式" prop="styleObj">
+					
+				  	<el-form-item label="css样式" prop="styleObj">
 						<el-popover  
 									placement="top-start"
 									width="400"
@@ -78,9 +70,16 @@
 								</el-popover>
 
 				  	</el-form-item>
-					
-				  	<el-form-item label="校验规则" prop="vrules">
-				  		<el-col :span="20"> 
+				  	<el-form-item label="展示风格" prop="showStyle">
+				  		<el-row type="flex">
+							<el-radio v-model="field.showStyle" label="origin">原生-origin</el-radio> 
+							
+							<el-radio v-model="field.showStyle" label="tag">标签-tag</el-radio> 
+							
+							<el-radio v-model="field.showStyle" label="x">综合-x</el-radio> 
+				  		</el-row> 
+				  	</el-form-item> 
+				  	<el-form-item label="校验规则" prop="vrules"> 
 							  <el-popover  
 									placement="top-start"
 									width="400"
@@ -88,26 +87,23 @@
 									<el-input type="textarea" rows="4" v-model="field.vrules" auto-complete="off"  placeholder='请输入json 对象 如 [{required:true,message:"此项必填",trigger:"change"}]'   > </el-input>
 
  									<el-button slot="reference">校验规则</el-button> 
-								</el-popover>
-				  		</el-col>  
+								</el-popover> 
 				  	</el-form-item>
-				  	<el-form-item label="扩展信息" prop="extInfos">
-				  		<el-col :span="20"> 
+				  	<el-form-item label="扩展信息" prop="extInfos"> 
 							  <el-popover  
 									placement="top-start"
 									width="400"
 									trigger="hover">
 									<mdp-form-expand  v-model="field.extInfos" expand-id="form_field"></mdp-form-expand> 
 									<el-button slot="reference">显示扩展信息</el-button> 
-								</el-popover>
-				  		</el-col>  
+								</el-popover> 
 				  	</el-form-item>
 
 				  </el-form>
-				  <div style="text-align: right; margin: 0">
+				  <el-row class="footer">
 				    <el-button  type="text" @click="handleCancel">关闭</el-button>
 				    <el-button type="primary"  @click="handleConfirm">确定</el-button>
-				  </div>
+				  </el-row>
 				 
 		<!--基础数据查询 CodeDetail sys_code_detail界面-->
 		<mdp-dialog ref="itemDialog" title="选择数据组" width="80%" :modal="false">
@@ -152,7 +148,13 @@
 				default:function(){
 					return {}
 				}
-			}
+			}, 
+			parentField:{
+				type:Object,
+				default:function(){
+					return {}
+				}
+			},
 		},
 		watch: { 
 	       value:{
diff --git a/src/views/mdp/form/formField/Index.vue b/src/views/mdp/form/formField/Index.vue
index dce7968..54a99b0 100644
--- a/src/views/mdp/form/formField/Index.vue
+++ b/src/views/mdp/form/formField/Index.vue
@@ -223,43 +223,57 @@ export default {
 					{ required: false, message: '主键', trigger: 'blur' }
 				]
 			},
-			addForm: {formId:'formId',showStyle:'origin',id:'one',idCamel:'one',title:'文本',typ:'text',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',dict:'',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+			addForm: {formId:'formId',showStyle:'origin',id:'one',idCamel:'one',title:'文本',typ:'text',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',dict:'',gname:'',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
 			myFormDef:{tableName:'',tableOwner:'',isCreateTable:'',formName:'',userid:'',deptid:'',formType:'',isTemplate:'',bizType:'',ctime:'',branchId:''},
 			selectedFields:[],
 			sampleFields:[
-				{formId:'formId',showStyle:'origin',id:'one',idCamel:'one',title:'文本',dict:'',typ:'text',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'多行文本',dict:'',typ:'textarea',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'four1',idCamel:'four1',title:'html',dict:'',typ:'text',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'html',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'four2',idCamel:'four2',title:'图片',dict:'',typ:'image',len:24,span:12,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'image',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'four3',idCamel:'four3',title:'文件',dict:'',typ:'att',len:24,span:12,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'att',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'four4',idCamel:'four4',title:'链接',dict:'',typ:'link',len:24,span:12,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'link',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'one',idCamel:'one',title:'文本',dict:'',gname:'',typ:'text',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'多行文本',dict:'',gname:'',typ:'textarea',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'four1',idCamel:'four1',title:'html',dict:'',gname:'',typ:'text',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'html',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'four2',idCamel:'four2',title:'图片',dict:'',gname:'',typ:'image',len:24,span:24,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'image',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'four3',idCamel:'four3',title:'文件',dict:'',gname:'',typ:'att',len:24,span:24,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'att',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'four4',idCamel:'four4',title:'链接',dict:'',gname:'',typ:'link',len:24,span:24,dval:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'link',toFlow:'0',bkey:'0',qx:''},
 
-				{formId:'formId',showStyle:'origin',id:'two',idCamel:'two',title:'数字',dict:'',typ:'number',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'three',idCamel:'three',title:'金额',dict:'',typ:'amount',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'two',idCamel:'two',title:'数字',dict:'',gname:'',typ:'number',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'three',idCamel:'three',title:'金额',dict:'',gname:'',typ:'amount',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
 
-				{formId:'formId',showStyle:'origin',id:'five',idCamel:'five',title:'单选下拉',dict:'',plusOptions:options.list,typ:'select',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'six',idCamel:'six',title:'多选下拉',dict:'',plusOptions:options.list,typ:'select',len:24,span:12,dval:'',mul:'1',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'five',idCamel:'five',title:'单选下拉',dict:'',gname:'',plusOptions:options.list,typ:'select',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'six',idCamel:'six',title:'多选下拉',dict:'',gname:'',plusOptions:options.list,typ:'select',len:24,span:24,dval:'',mul:'1',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
 
-				{formId:'formId',showStyle:'origin',id:'seven',idCamel:'seven',title:'单选',dict:'',plusOptions:options.yesOrNo,typ:'radio',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'eight',idCamel:'eight',title:'单选框',dict:'',plusOptions:options.list,typ:'checkbox',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'nine',idCamel:'nine',title:'多选框',dict:'',plusOptions:options.list,typ:'checkbox',len:24,span:12,dval:'',mul:'1',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'seven',idCamel:'seven',title:'单选',dict:'',gname:'',plusOptions:options.yesOrNo,typ:'radio',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'eight',idCamel:'eight',title:'单选框',dict:'',gname:'',plusOptions:options.list,typ:'checkbox',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'nine',idCamel:'nine',title:'多选框',dict:'',gname:'',plusOptions:options.list,typ:'checkbox',len:24,span:24,dval:'',mul:'1',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
 
-				{formId:'formId',showStyle:'origin',id:'ten',idCamel:'ten',title:'时间',dict:'',typ:'time',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'eleven',idCamel:'eleven',title:'日期',dict:'',typ:'date',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'twelve',idCamel:'twelve',title:'日期时间',dict:'',typ:'datetime',len:24,span:12,dval:'',mul:'0',hol:'请输入日期时间',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'thirteen',idCamel:'thirteen',title:'年',dict:'',typ:'year',len:24,span:12,dval:'',mul:'0',hol:'请选中年份',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'fourteen',idCamel:'fourteen',title:'月',dict:'',typ:'month',len:24,span:12,dval:'',mul:'0',hol:'请选中月份',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',id:'141',showStyle:'origin',id:'fourteen1',idCamel:'fourteen1',title:'日期区间',dict:'',typ:'daterange',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'ten',idCamel:'ten',title:'时间',dict:'',gname:'',typ:'time',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'eleven',idCamel:'eleven',title:'日期',dict:'',gname:'',typ:'date',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'twelve',idCamel:'twelve',title:'日期时间',dict:'',gname:'',typ:'datetime',len:24,span:24,dval:'',mul:'0',hol:'请输入日期时间',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'thirteen',idCamel:'thirteen',title:'年',dict:'',gname:'',typ:'year',len:24,span:24,dval:'',mul:'0',hol:'请选中年份',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'fourteen',idCamel:'fourteen',title:'月',dict:'',gname:'',typ:'month',len:24,span:24,dval:'',mul:'0',hol:'请选中月份',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',id:'141',showStyle:'origin',id:'fourteen1',idCamel:'fourteen1',title:'日期区间',dict:'',gname:'',typ:'daterange',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
 
-				{formId:'formId',showStyle:'origin',id:'fifteen',idCamel:'fifteen',title:'部门',dict:'',typ:'select',len:24,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'dept',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'seventeen',idCamel:'seventeen',title:'员工',dict:'',typ:'select',len:24,span:12,dval:'',mul:'1',hol:'支持多选',isRequired:'0',remark:'属性',extType:'user',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'nineteen',idCamel:'nineteen',title:'标签',dict:'',typ:'select',len:24,span:12,dval:'',mul:'1',hol:'多选标签',isRequired:'0',remark:'属性',extType:'tag',toFlow:'0',bkey:'0',qx:''},
-				{formId:'formId',showStyle:'origin',id:'twentyOne',idCamel:'twentyOne',title:'布局-行',dict:'',typ:'row',len:24,span:12,dval:'',mul:'1',hol:'行',isRequired:'0',remark:'属性',extType:'row',toFlow:'0',bkey:'0',qx:'',
+				{formId:'formId',showStyle:'origin',id:'fifteen',idCamel:'fifteen',title:'部门',dict:'',gname:'',typ:'select',len:24,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'dept',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'seventeen',idCamel:'seventeen',title:'员工',dict:'',gname:'',typ:'select',len:24,span:24,dval:'',mul:'1',hol:'支持多选',isRequired:'0',remark:'属性',extType:'user',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'nineteen',idCamel:'nineteen',title:'标签',dict:'',gname:'',typ:'select',len:24,span:24,dval:'',mul:'1',hol:'多选标签',isRequired:'0',remark:'属性',extType:'tag',toFlow:'0',bkey:'0',qx:''},
+				{formId:'formId',showStyle:'origin',id:'twenty_one',idCamel:'twentyOne',title:'布局-行',dict:'',gname:'',typ:'row',len:24,span:24,dval:'',mul:'1',hol:'行',isRequired:'0',remark:'属性',extType:'row',toFlow:'0',bkey:'0',qx:'',
 					children:[
-						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列2',dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
-						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列2',dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列2',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列2',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+					]
+				},
+				{formId:'formId',showStyle:'origin',id:'twenty_two',idCamel:'twentyTwo',title:'卡片',dict:'',gname:'',typ:'card',len:24,span:24,dval:'',mul:'1',hol:'行',isRequired:'0',remark:'属性',extType:'card',toFlow:'0',bkey:'0',qx:'',
+					children:[
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'卡片-列1',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'卡片-列2',dict:'',gname:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+  					]
+				},
+				{formId:'formId',showStyle:'origin',id:'twenty_three',idCamel:'twentyThree',title:'tabs',dict:'',gname:'tab1,tab2',typ:'tabs',len:24,span:24,dval:'',mul:'1',hol:'行',isRequired:'0',remark:'属性',extType:'tabs',toFlow:'0',bkey:'0',qx:'',
+					children:[
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab1-列1',dict:'',gname:'tab1',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab1-列2',dict:'',gname:'tab1',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab2-列1',dict:'',gname:'tab2',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+						{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'tab2-列2',dict:'',gname:'tab2',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
 					]
 				}
 
@@ -296,7 +310,7 @@ export default {
 				id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:''
 			},
 			primaryKeys:[],
-			defaultField:{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
+			defaultField:{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',gname:'',typ:'text',len:12,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''},
 
 			/**end 在上面加自定义属性**/
 		}//end return
@@ -367,14 +381,11 @@ export default {
 			this.addForm.dict=''; 
 		},   
 		calcSpan(child){
-			if(child.lenth>0){
-				return child.lenth
-			}
-			if(child.extType=='textarea'){
-				return 24
+			if(child.span>0){
+				return child.span
 			}else{
 				return this.span
-			}
+			} 
 		},
 				//move回调方法
 		onMove(e,originalEvent){ 
@@ -423,7 +434,7 @@ export default {
 					var columList=datas.slice(1); 
 					columList.forEach(k=>{
 						var c=k.split("\t")
-						var field={formId:'formId',id:c[columnIdIdx],showStyle:'origin',id:c[columnIdIdx],idCamel:c[columnIdIdx],title:c[columnRemarkIdx],dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''}
+						var field={formId:'formId',id:c[columnIdIdx],showStyle:'origin',id:c[columnIdIdx],idCamel:c[columnIdIdx],title:c[columnRemarkIdx],dict:'',gname:'',typ:'text',len:12,span:24,dval:'',mul:'0',hol:'请输入',isRequired:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:''}
 						var noSelectFieldId=this.fieldIds.find(i=>{
 							return !this.selectedFields.some(k=>k.id==i.id);
 						}) 
@@ -480,7 +491,7 @@ export default {
 						}
 						if(datas && datas.length>0){
 							Object.keys(datas[0]).forEach(k=>{
-								var field={formId:'formId',id:k,showStyle:'origin',id:k,idCamel:k,title:k,dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入'+k,isRequired:'0',remark:'',extType:'',toFlow:'0',bkey:'0',qx:''}
+								var field={formId:'formId',id:k,showStyle:'origin',id:k,idCamel:k,title:k,dict:'',gname:'',typ:'text',len:12,span:24,dval:'',mul:'0',hol:'请输入'+k,isRequired:'0',remark:'',extType:'',toFlow:'0',bkey:'0',qx:''}
 								var noSelectFieldId=this.fieldIds.find(i=>{
 									return !this.selectedFields.some(k=>k.id==i.id);
 								}) 
@@ -506,7 +517,7 @@ export default {
 			
 		},
 		transColumnToField(o){
-			var field={formId:'formId',id:o.columnName,showStyle:'origin',id:o.columnName,idCamel:o.camelsColumnName,title:o.chinaName,dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入'+o.chinaName,isRequired:'0',remark:'',extType:'',toFlow:'0',bkey:'0',qx:''}
+			var field={formId:'formId',id:o.columnName,showStyle:'origin',id:o.columnName,idCamel:o.camelsColumnName,title:o.chinaName,dict:'',gname:'',typ:'text',len:12,span:24,dval:'',mul:'0',hol:'请输入'+o.chinaName,isRequired:'0',remark:'',extType:'',toFlow:'0',bkey:'0',qx:''}
 			var noSelectFieldId=this.fieldIds.find(i=>{
 				return !this.selectedFields.some(k=>k.id==i.id);
 			}) 
@@ -517,7 +528,7 @@ export default {
 			return field;
 		},
 		transOptionToField(o){
-			var field={formId:'formId',id:o.id,showStyle:'origin',id:o.id,idCamel:o.id,title:o.name,dict:'',typ:'text',len:12,span:12,dval:'',mul:'0',hol:'请输入'+o.name,isRequired:'0',remark:'',extType:'',toFlow:'0',bkey:'0',qx:''}
+			var field={formId:'formId',id:o.id,showStyle:'origin',id:o.id,idCamel:o.id,title:o.name,dict:'',gname:'',typ:'text',len:12,span:24,dval:'',mul:'0',hol:'请输入'+o.name,isRequired:'0',remark:'',extType:'',toFlow:'0',bkey:'0',qx:''}
 			var noSelectFieldId=this.fieldIds.find(i=>{
 				return !this.selectedFields.some(k=>k.id==i.id);
 			})