From f5ad8f5323975f48c41835987468c8fe55df20a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Fri, 6 Oct 2023 02:39:03 +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    | 22 ++++++++++++++-------
 src/views/mdp/form/formField/FieldCfg.vue |  3 +--
 src/views/mdp/form/formField/Index.vue    | 24 ++++++++++++++---------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/views/mdp/form/formField/Field.vue b/src/views/mdp/form/formField/Field.vue
index d1d06e7..6213038 100644
--- a/src/views/mdp/form/formField/Field.vue
+++ b/src/views/mdp/form/formField/Field.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/mdp/form/formField/FieldCfg.vue b/src/views/mdp/form/formField/FieldCfg.vue
index 56be97d..22b5272 100644
--- a/src/views/mdp/form/formField/FieldCfg.vue
+++ b/src/views/mdp/form/formField/FieldCfg.vue
@@ -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>  
diff --git a/src/views/mdp/form/formField/Index.vue b/src/views/mdp/form/formField/Index.vue
index 1807f3e..91c26b9 100644
--- a/src/views/mdp/form/formField/Index.vue
+++ b/src/views/mdp/form/formField/Index.vue
@@ -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