From 04560e3067744684fd6c23aa431e8d30abb99e77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Sun, 8 Oct 2023 01:27:26 +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

---
 .../mdp-ui-ext/mdp-expand/FormData.vue        |  63 +----
 .../mdp-ui-ext/mdp-expand/FormDataItem.vue    | 223 ++++++++++++++++++
 2 files changed, 226 insertions(+), 60 deletions(-)
 create mode 100644 src/components/mdp-ui-ext/mdp-expand/FormDataItem.vue

diff --git a/src/components/mdp-ui-ext/mdp-expand/FormData.vue b/src/components/mdp-ui-ext/mdp-expand/FormData.vue
index d4c6ddb..023ef3f 100644
--- a/src/components/mdp-ui-ext/mdp-expand/FormData.vue
+++ b/src/components/mdp-ui-ext/mdp-expand/FormData.vue
@@ -4,66 +4,7 @@
  			<!--新增界面 FormData 表单数据表--> 
 			<el-form :model="editForm" :label-width="labelWidthCpd" :label-position="labelPosition" :show-message="true" :rules="editFormRules" ref="editForm"> 
 				<el-col :span="spanCalc(item)" v-for="(item,index) in fields" :key="index"> 
-					<span  v-if="item.nr"></span>
-					<el-form-item v-else :label="item.fieldTitle" :prop="item.fieldIdCamel">  
-						<div  v-if="item.nr"></div>
-					<!--用户-->
-						<mdp-select-user v-else-if=" item.extFieldType=='user'" :show-style="item.showStyle" :disabled="item.ne" :multiple="item.isMultiple=='1'" v-model="editForm[item.fieldIdCamel]" :label-width="labelWidthCpd" :label="item.fieldTitle"  :placeholder="item.placeholder"  split="," @change="(e)=>onFieldChange(e,item)">			 
-						</mdp-select-user>  
-					<!--部门-->
-						<mdp-selecct-dept v-else-if=" item.extFieldType=='deppt'" :show-style="item.showStyle" :disabled="item.ne" :branch-id="userInfo.branchId" :show-checkbox="item.isMultiple=='1'" :multiple="item.isMultiple=='1'" split="," @change="(e)=>onFieldChange(e,item)"></mdp-selecct-dept>
-
-					<!--标签-->
-						<mdp-select-tag  v-else-if=" item.extFieldType=='tag'" :show-style="item.showStyle" :disabled="item.ne" :multiple="item.isMultiple=='1'" v-model="editForm[item.fieldIdCamel]" :label-width="labelWidthCpd" :label="item.fieldTitle"  :placeholder="item.placeholder"  split="," @change="(e)=>onFieldChange(e,item)">			 
-						</mdp-select-tag>  
-					<!--下拉框-->
-						<mdp-select v-else-if=" ['select','radio','checkbox'].some(k=>k==item.fieldType)"  :show-style="item.showStyle" :disabled="item.ne" :show-type="item.fieldType"  :item-code="item.dictCode" :multiple="item.isMultiple=='1'" v-model="editForm[item.fieldIdCamel]" :label-width="labelWidthCpd" :label="item.fieldTitle"  :placeholder="item.placeholder" split="," @change="(e)=>onFieldChange(e,item)">			 
-						</mdp-select>
-					<!--html-->
-						<el-popover v-else-if=" item.extFieldType=='html'"
-							placement="top-start"
-							width="400"
-							trigger="hover">
-							<el-input  type="textarea" rows="4" v-model="editForm[item.fieldIdCamel]" :disabled="item.ne" @change="(e)=>onFieldChange(e,item)"></el-input>
-							<div slot="reference"  v-html="editForm[item.fieldIdCamel]||item.defaultValue||'无'"></div>
-						</el-popover>
-					<!--link 链接-->
-						<el-popover v-else-if=" item.extFieldType=='link'"
-							placement="top-start"
-							width="400"
-							trigger="hover">
-							<el-input v-model="editForm[item.fieldIdCamel]" :disabled="item.ne" @change="(e)=>onFieldChange(e,item)"></el-input>
- 							<el-link slot="reference" :href="editForm[item.fieldIdCamel]" target="_blank">{{ editForm[item.fieldIdCamel]||item.fieldTitle }}</el-link> 
-						</el-popover>
-					<!--image-->
-						<el-popover v-else-if=" item.extFieldType=='image'"
-							placement="top-start" 
-							trigger="hover">
-							<el-button  @click="$refs['imageDialog'].open({formData:editForm,item:item})" :disabled="item.ne">上传图片</el-button> 
-							<el-image slot="reference"  :style="item.styleObj||{maxHeight:'100px',maxWidth:'100px'}"
-								:src="editForm[item.fieldIdCamel]"
-								fit="contain" >
-							</el-image>
- 						</el-popover>
-					<!--att 附件-->
-						<el-popover v-else-if=" item.extFieldType=='att'"
-							placement="top-start" 
-							trigger="hover">
-							<el-button  @click="$refs['attDialog'].open({formData:editForm,item:item})" :disabled="item.ne">上传附件</el-button> 
- 							<el-link slot="reference" :href="editForm[item.fieldIdCamel]" target="_blank">{{ editForm[item.fieldIdCamel]||item.fieldTitle }}</el-link> 
-						</el-popover>
-					<!--其它类型-->
-						<mdp-input :show-style="item.showStyle"  :disabled="item.ne" v-else-if="item.fieldType=='text'" style="width: 90%;"  v-model="editForm[item.fieldIdCamel]" :label-width="labelWidthCpd" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder"  clearable @change="(e)=>onFieldChange(e,item)"> </mdp-input>
- 						<mdp-number :show-style="item.showStyle" :disabled="item.ne"   v-else-if="item.fieldType=='number'"  v-model="editForm[item.fieldIdCamel]" :label-width="labelWidthCpd" :label="item.fieldTitle" auto-complete="off"  placeholder="请输入内容"  clearable @change="(e)=>onFieldChange(e,item)"></mdp-number>
-						<mdp-number :show-style="item.showStyle" :disabled="item.ne"   v-else-if="item.fieldType=='amount'"  v-model="editForm[item.fieldIdCamel]" :label-width="labelWidthCpd" :label="item.fieldTitle" auto-complete="off"  placeholder="请输入内容"  clearable @change="(e)=>onFieldChange(e,item)"></mdp-number>
-						<mdp-input :show-style="item.showStyle" :disabled="item.ne"   v-else-if="item.fieldType=='textarea'"   type="textarea" :rows="2" v-model="editForm[item.fieldIdCamel]" :label-width="labelWidthCpd" :label="item.fieldTitle"  placeholder="请输入内容" @change="(e)=>onFieldChange(e,item)"></mdp-input>
-						<el-time-picker :show-style="item.showStyle" :disabled="item.ne"   v-else-if="item.fieldType=='time'"   v-model="editForm[item.fieldIdCamel]"  placeholder="任意时间点" value-format="HH:mm:ss" format="HH:mm:ss" @change="(e)=>onFieldChange(e,item)"> </el-time-picker> 
-						<mdp-date :show-style="item.showStyle" :disabled="item.ne"   v-else-if="item.fieldType=='date'"  v-model="editForm[item.fieldIdCamel]" align="right" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="(e)=>onFieldChange(e,item)"> </mdp-date>
-						<mdp-date :show-style="item.showStyle" :disabled="item.ne" v-else-if="item.fieldType=='datetime'"  v-model="editForm[item.fieldIdCamel]" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" @change="(e)=>onFieldChange(e,item)"> </mdp-date>
-						<mdp-date :show-style="item.showStyle" :disabled="item.ne" v-else-if="item.fieldType=='month'"  v-model="editForm[item.fieldIdCamel]" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择月份" @change="(e)=>onFieldChange(e,item)"></mdp-date>
-						<mdp-date :show-style="item.showStyle" :disabled="item.ne" v-else-if="item.fieldType=='year'"  v-model="editForm[item.fieldIdCamel]" type="month" value-format="yyyy" format="yyyy" placeholder="选择年" @change="(e)=>onFieldChange(e,item)"></mdp-date>
-						<mdp-date-range :show-style="item.showStyle" :disabled="item.ne"   v-else-if="item.fieldType=='daterange'"  :value="editForm[item.fieldIdCamel]?editForm[item.fieldIdCamel].split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="(vs)=>{editForm[item.fieldIdCamel]=vs.join(',');onFieldChange(vs)}"> </mdp-date-range>  
-					</el-form-item>        
+					 <mdp-form-data-item v-model="editForm[item.idCamel]" :field="item"></mdp-form-data-item>     
 				</el-col>
 			</el-form> 
 		</el-row>
@@ -106,6 +47,7 @@
 
 <script> 
 	import { mapGetters } from 'vuex'  
+	import MdpFormDataItem from './FormDataItem.vue'
 	/**
 	 * 表单数据填单
 	 */
@@ -409,6 +351,7 @@
 			}
 		},//end method
 		components: {   
+			MdpFormDataItem,
 		},
 		mounted() {    
 			this.initData(); 
diff --git a/src/components/mdp-ui-ext/mdp-expand/FormDataItem.vue b/src/components/mdp-ui-ext/mdp-expand/FormDataItem.vue
new file mode 100644
index 0000000..6769b07
--- /dev/null
+++ b/src/components/mdp-ui-ext/mdp-expand/FormDataItem.vue
@@ -0,0 +1,223 @@
+<template>
+	<section>
+		<el-row>  
+			<el-row v-if="field.extType=='row'" :gutter="gutter">     
+				<el-col  v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
+					<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="myVal" @change="onChildChange"  ></mdp-form-data-item>
+				</el-col> 
+			</el-row>  
+			<el-card v-else-if="field.extType=='card'" :gutter="gutter"> 
+				<div slot="header" class="clearfix">
+					<span>{{ field.title }}</span> 
+				</div>    
+				<el-row :gutter="gutter" v-if="field.children && field.children.length>0"> 
+						<el-col  v-for="child,idx in field.children" :key="idx" :span="calcSpan(child,field)">
+							<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="myVal" @change="onChildChange"  ></mdp-form-data-item>
+						</el-col> 
+				</el-row> 
+			</el-card> 
+			<el-tabs v-else-if="field.extType=='tabs'" v-model="myVal">     
+				<el-tab-pane :label="tab" v-for=" tab,tidx in tabListCpd" :key="tidx" :name="tab">
+					<el-row :gutter="gutter"> 
+						<el-col  v-for="child,idx in field.children.filter(c=>c.gname==tab||!c.gname)" :key="idx" :span="calcSpan(child,field)">
+							<mdp-form-data-item :field="child" :parent-field="field" :gutter="gutter" :span="span" v-model="myVal" @change="onChildChange"  ></mdp-form-data-item>
+						</el-col> 
+					</el-row> 
+				</el-tab-pane> 
+			</el-tabs> 
+			<el-form-item v-else :label="field.title" :prop="field.idCamel">  
+				<div  v-if="field.nr"></div>
+			<!--用户-->
+				<mdp-select-user v-else-if=" field.extType=='user'" :show-style="field.showStyle" :disabled="field.ne" :multiple="field.mul=='1'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title"  :placeholder="field.hol"  split="," @change="onFieldChange">			 
+				</mdp-select-user>  
+			<!--部门-->
+				<mdp-selecct-dept v-else-if=" field.extType=='deppt'" :show-style="field.showStyle" :disabled="field.ne" :branch-id="userInfo.branchId" :show-checkbox="field.mul=='1'" :multiple="field.mul=='1'" split="," @change="onFieldChange"></mdp-selecct-dept>
+
+			<!--标签-->
+				<mdp-select-tag  v-else-if=" field.extType=='tag'" :show-style="field.showStyle" :disabled="field.ne" :multiple="field.mul=='1'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title"  :placeholder="field.hol"  split="," @change="onFieldChange">			 
+				</mdp-select-tag>  
+			<!--下拉框-->
+				<mdp-select v-else-if=" ['select','radio','checkbox'].some(k=>k==field.typ)"  :show-style="field.showStyle" :disabled="field.ne" :show-type="field.typ"  :item-code="field.dict" :multiple="field.mul=='1'" v-model="myVal" :label-width="labelWidthCpd" :label="field.title"  :placeholder="field.hol" split="," @change="onFieldChange">			 
+				</mdp-select>
+			<!--html-->
+				<el-popover v-else-if=" field.extType=='html'"
+					placement="top-start"
+					width="400"
+					trigger="hover">
+					<el-input  type="textarea" rows="4" v-model="myVal" :disabled="field.ne" @change="onFieldChange"></el-input>
+					<div slot="reference"  v-html="myVal||field.defaultValue||'无'"></div>
+				</el-popover>
+			<!--link 链接-->
+				<el-popover v-else-if=" field.extType=='link'"
+					placement="top-start"
+					width="400"
+					trigger="hover">
+					<el-input v-model="myVal" :disabled="field.ne" @change="onFieldChange"></el-input>
+					<el-link slot="reference" :href="myVal" target="_blank">{{ myVal||field.title }}</el-link> 
+				</el-popover>
+			<!--image-->
+				<el-popover v-else-if=" field.extType=='image'"
+					placement="top-start" 
+					trigger="hover">
+					<el-button  @click="$refs['imageDialog'].open({formData:editForm,item:item})" :disabled="field.ne">上传图片</el-button> 
+					<el-image slot="reference"  :style="field.styleObj||{maxHeight:'100px',maxWidth:'100px'}"
+						:src="myVal"
+						fit="contain" >
+					</el-image>
+				</el-popover>
+			<!--att 附件-->
+				<el-popover v-else-if=" field.extType=='att'"
+					placement="top-start" 
+					trigger="hover">
+					<el-button  @click="$refs['attDialog'].open({formData:editForm,item:item})" :disabled="field.ne">上传附件</el-button> 
+					<el-link slot="reference" :href="myVal" target="_blank">{{ myVal||field.title }}</el-link> 
+				</el-popover>
+			<!--其它类型-->
+				<mdp-input :show-style="field.showStyle"  :disabled="field.ne" v-else-if="field.typ=='text'" style="width: 90%;"  v-model="myVal" :label-width="labelWidthCpd" :label="field.title" auto-complete="off" :placeholder="field.hol"  clearable @change="onFieldChange"> </mdp-input>
+				<mdp-number :show-style="field.showStyle" :disabled="field.ne"   v-else-if="field.typ=='number'"  v-model="myVal" :label-width="labelWidthCpd" :label="field.title" auto-complete="off"  placeholder="请输入内容"  clearable @change="onFieldChange"></mdp-number>
+				<mdp-number :show-style="field.showStyle" :disabled="field.ne"   v-else-if="field.typ=='amount'"  v-model="myVal" :label-width="labelWidthCpd" :label="field.title" auto-complete="off"  placeholder="请输入内容"  clearable @change="onFieldChange"></mdp-number>
+				<mdp-input :show-style="field.showStyle" :disabled="field.ne"   v-else-if="field.typ=='textarea'"   type="textarea" :rows="2" v-model="myVal" :label-width="labelWidthCpd" :label="field.title"  placeholder="请输入内容" @change="onFieldChange"></mdp-input>
+				<el-time-picker :show-style="field.showStyle" :disabled="field.ne"   v-else-if="field.typ=='time'"   v-model="myVal"  placeholder="任意时间点" value-format="HH:mm:ss" format="HH:mm:ss" @change="onFieldChange"> </el-time-picker> 
+				<mdp-date :show-style="field.showStyle" :disabled="field.ne"   v-else-if="field.typ=='date'"  v-model="myVal" align="right" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="onFieldChange"> </mdp-date>
+				<mdp-date :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='datetime'"  v-model="myVal" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" @change="onFieldChange"> </mdp-date>
+				<mdp-date :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='month'"  v-model="myVal" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择月份" @change="onFieldChange"></mdp-date>
+				<mdp-date :show-style="field.showStyle" :disabled="field.ne" v-else-if="field.typ=='year'"  v-model="myVal" type="month" value-format="yyyy" format="yyyy" placeholder="选择年" @change="onFieldChange"></mdp-date>
+				<mdp-date-range :show-style="field.showStyle" :disabled="field.ne"   v-else-if="field.typ=='daterange'"  :value="myVal?myVal.split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="(vs)=>{myVal=vs.join(',');onFieldChange(vs)}"> </mdp-date-range>  
+			</el-form-item>        
+				 
+		</el-row> 
+
+		
+		<mdp-dialog ref="imageDialog" title="选择图片" width="80%" :modal="false">
+			<template v-slot="{visible,data,dialog}">
+				<mdp-select-image v-if="visible" :visible="visible" @select="(imgs)=>{
+					if(data.field.mul=='1'){
+						data.formData[data.field.idCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
+					}else{
+						data.formData[data.field.idCamel]=imgs&&imgs.length>0?imgs[0].url:null
+					}
+					dialog.close();
+				}"></mdp-select-image>
+			</template> 
+		</mdp-dialog>  
+		<mdp-dialog ref="attDialog" title="选择文件" width="80%" :modal="false">
+			<template v-slot="{visible,data,dialog}">
+				<mdp-select-att v-if="visible" :visible="visible" :multiple="data.field.mul=='1'" @select="(imgs)=>{ 
+					if(data.field.mul=='1'){
+						data.formData[data.field.idCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
+					}else{
+						data.formData[data.field.idCamel]= (imgs?imgs.url:null)
+					}
+					 
+					 dialog.close();
+				}" split=","></mdp-select-att>
+			</template> 
+		</mdp-dialog>  
+	</section>
+</template>
+
+<script> 
+	import { mapGetters } from 'vuex'  
+	/**
+	 * 表单数据填单
+	 */
+	export default { 
+	    computed: {
+		    ...mapGetters([
+		      'userInfo'
+			]),
+			labelWidthCpd:function(){
+				if(this.labelWidth){
+					return this.labelWidth
+				}
+				return this.labelWidthCalc();
+			},  
+			tabListCpd(){
+				if(!this.field.gname){
+					return []
+				}
+				return this.field.gname.split(",")
+			}
+		},
+		props:{ 
+			value:{type:[Object,String,Array,Number],default:null}, 
+			field:{type:Object,default:null}, 
+			labelWidth:{type:String,default:null},			
+			labelPosition:{type:String,default:null},
+			span:{
+				type:Number,
+				default:24
+			}, 
+			parentField:{
+				type:Object,
+				default:function(){
+					return {}
+				}
+			},
+		
+		},
+		watch: {
+			value:function(){
+				this.initData()
+			}, 
+			field:function(field) {   
+			},  
+	    },	
+		data() {
+			return {
+				pickerOptions: this.$mdp.getPickerOptions(), 
+				myVal:null,
+			} 
+		}, 
+		methods: { 
+			labelWidthCalc:function(){
+				if (screen.width <=375){
+					return "80px"
+				}else  if (screen.width <= 500){
+						return "80px"
+				}else if (screen.width<=1024){
+						return "100px"
+				}else {
+						return "120px"
+				}
+			} ,   
+			initData(){
+				
+				if(this.value){
+					this.editForm=Object.assign({},this.value)
+				}else{
+					this.editForm={}
+				}
+			},
+			
+			onChildChange(val,field){
+				this.$emit('input',val)
+				this.$emit('change',val,field)
+			},   
+			calcSpan(child,parent){ 
+				if(child.span>0){
+					return child.span
+				}else{
+					return this.span
+				}  
+			},
+			
+			onFieldChange(val){    
+				this.$emit('input',this.myVal)
+				this.$emit('change',this.myVal,this.field) 
+				
+			},
+		},//end method
+		components: {   
+			"mdp-form-data-item": ()=>import('@/components/mdp-ui-ext/mdp-expand/FormDataItem.vue'),
+		},
+		mounted() {    
+			this.initData();   
+		}//end mounted
+	}
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file