From 2afe569ec87ec65d2cc0d36e067fe296abde1c48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Mon, 9 Oct 2023 18:08:34 +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

---
 package.json                        |   2 +
 src/main.js                         |   3 +-
 src/views/mdp/form/formDef/Form.vue |   2 +-
 src/views/mdp/form/source/Index.vue | 173 ++++++++++++++++------------
 4 files changed, 103 insertions(+), 77 deletions(-)

diff --git a/package.json b/package.json
index ba4fd34..8b55059 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "test": "npm run lint"
   },
   "dependencies": {
+    "@highlightjs/vue-plugin": "^1.0.2",
     "@jiaminghi/data-view": "^2.10.0",
     "axios": "0.17.1",
     "clipboard": "1.7.1",
@@ -28,6 +29,7 @@
     "font-awesome": "4.7.0",
     "gantt-elastic": "^1.0.11",
     "gantt-elastic-header": "^0.1.11",
+    "highlight.js": "^11.9.0",
     "html2canvas": "^1.0.0-alpha.9",
     "js-cookie": "2.2.0",
     "js-md5": "^0.7.3",
diff --git a/src/main.js b/src/main.js
index d489141..b7f6a8c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,4 @@
-import Vue from 'vue'
-
+import Vue from 'vue' 
 
 import 'normalize.css/normalize.css'// A modern alternative to CSS resets
 
diff --git a/src/views/mdp/form/formDef/Form.vue b/src/views/mdp/form/formDef/Form.vue
index e438efd..c0ef656 100644
--- a/src/views/mdp/form/formDef/Form.vue
+++ b/src/views/mdp/form/formDef/Form.vue
@@ -60,7 +60,7 @@
     </mdp-dialog>
     <mdp-dialog ref="sourceDialog">
         <template v-slot="{visible,data,dialog}">
-            <mdp-source :form-def="editForm" :form-fields="formFields"></mdp-source>
+            <mdp-source :visible="visible" :form-def="editForm" :form-fields="formFields"></mdp-source>
         </template>
     </mdp-dialog>
 </el-row>
diff --git a/src/views/mdp/form/source/Index.vue b/src/views/mdp/form/source/Index.vue
index 431676d..ed3764a 100644
--- a/src/views/mdp/form/source/Index.vue
+++ b/src/views/mdp/form/source/Index.vue
@@ -1,13 +1,30 @@
 <template>
-	<section> 
-		<pre><code>{{createSource()}}</code></pre>
-
+	<section >   
+		<pre>
+			<code>{{code}}</code>
+		</pre>
+		
+		<pre>
+			<code>
+import { MdpFormMixin } from '@/components/mdp-ui/mixin/MdpFormMixin.js'; 
+export default {
+	mixin:[MdpFormMixin], 
+	data(){
+		editForm:{}
+	},
+	method:{
+		initCurrData(){ 
+			
+		}, 
+	}
+}
+			</code>
+		</pre>
 	</section>
 </template>
 
-<script> 
-
-import treeTool from '@/components/mdp-ui/js/treeTool.js'
+<script>   
+ import treeTool from '@/components/mdp-ui/js/treeTool.js'
 export default { 
 	computed: { 
 	}, 
@@ -26,8 +43,8 @@ export default {
 		},  
 	},
 	watch: {  
-		'visible':function(visible) { 
-			 
+		formFields(){
+			this.createSource();
 		} 
 	},	
 	data() {
@@ -152,6 +169,7 @@ export default {
 			defaultField:{formId:'formId',showStyle:'origin',id:'four',idCamel:'four',title:'布局-列1',dict:'',gname:'',typ:'text',len:12,span:24,dval:'',mul:'0',hol:'请输入',req:'0',remark:'属性',extType:'',toFlow:'0',bkey:'0',qx:'',isNewAdd:true},
 			extInfosList:[],
 			extInfosMap:{},
+			code:'',
 			/**end 在上面加自定义属性**/
 		}//end return
 	},//end data
@@ -160,66 +178,60 @@ export default {
 		handleCancel:function(){
 			this.$emit('cancel');
 		},  
-		createSource(){
+		createSource(){ 
  			this.fields=treeTool.translateDataToTree(this.formFields,'pid','id')
-			 var sourceStr=`<el-form :model="editForm" ref="editForm">${this.createSubSource(1,this.fields)}\n</el-form>` 
-			return sourceStr 
-		},
+			 var sourceStr=`<el-form :model="editForm" ref="editForm">\n\t${this.createSubSource(1,this.fields)}\n</el-form>` 
+			 this.code=sourceStr;
+ 		},
 		
 		createSubSource(lvl,children){
 			 
-			var sourceStr=""
+			
 			if(!children || children.length==0){
-				return sourceStr;
+				return "";
 			}  
 			var lvlt=this.getTabByLvl(lvl)
 			var lvlt1=this.getTabByLvl(lvl+1)
+			var srcList=[]
 			children.forEach((field,idx)=>{ 
+				var sourceStr=""
 				var extInfosMap=this.getExtInfosMap(field);
-				var hasChild=field.children&&field.children.length>0; 
+				var hasChild=field.children&&field.children.length>0;  
+				var styleObj=(field.styleObj!=null && field.styleObj.length>0)?":style=\""+field.styleObj+"\"":"";
 				if(field.extType=='row'){
-					var subSrc=hasChild?lvlt1+this.rowChildSrc(lvl+1,field):"";  
-					sourceStr=`${sourceStr}\n${lvlt}<el-row>${subSrc}\n${lvlt}</el-row>` 
+					var subSrc=hasChild?this.rowChildSrc(lvl+1,field):"";  
+					sourceStr=`<el-row>\n${lvlt1}${subSrc}\n${lvlt}</el-row>` 
 				}else if(field.extType=='card'){ 
-					var header=`
-					<div slot="header" class="clearfix">
-						<span>${field.title}</span>
-					</div>
-					`
-					var subSrc=hasChild?lvlt1+this.rowChildSrc(lvl+1,field):"";  
-					sourceStr=`${sourceStr}\n${lvlt}<card>${header}\n${lvlt}\t<el-row>${subSrc}\n${lvlt}\t</el-row>\n${lvlt}</card>` 
+					var header=`<div slot="header" class="clearfix"><span>${field.title}</span></div>`
+					var subSrc=hasChild?this.rowChildSrc(lvl+1,field):"";  
+					sourceStr=`<card>\n${lvlt1}${header}\n${lvlt1}<el-row>\n${lvlt1}\t${subSrc}\n${lvlt1}</el-row>\n${lvlt}</card>`
 				}else if(field.extType=='tabs'){ 
-					var subSrc=hasChild?lvlt1+this.tabsChildSrc(lvl+1,field):"";  
-					sourceStr=`${sourceStr}\n${lvlt}<el-tabs>${subSrc}\n${lvlt}</el-tabs>` 
+					var subSrc=hasChild?this.tabsChildSrc(lvl+1,field):"";  
+					sourceStr=`<el-tabs>\n${lvlt1}${subSrc}\n${lvlt}</el-tabs>` 
 				}else{
 					var fieldSrc=""
+					var showStyle=`${field.showStyle?"show-style=\""+field.showStyle+"\"":""}`
 					if(field.extType=='user'){
-						fieldSrc=`<mdp-select-user :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol}"  split=","></mdp-select-user>`
+						fieldSrc=`<mdp-select-user ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  split=","></mdp-select-user>`
 					}else if(field.extType=='dept'){
-						fieldSrc=`<mdp-select-dept :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" :show-checkbox="${field.mul=='1'}"  label="${field.title}"  placeholder="${field.hol}"  split=","></mdp-select-dept>`
+						fieldSrc=`<mdp-select-dept ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}" :show-checkbox="${field.mul=='1'}"  label="${field.title}"  placeholder="${field.hol||field.title}"  split=","></mdp-select-dept>`
 
 					}else if(field.extType=='tag'){
-						fieldSrc=`<mdp-select-tag :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol}"  split=","></mdp-select-tag>`
+						fieldSrc=`<mdp-select-tag ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  split=","></mdp-select-tag>`
 
 					}else  if( ['select','radio','checkbox'].some(k=>k==field.typ)){
 						
 						var plusOptions=""
 						if(extInfosMap['plusOptions']){
 							plusOptions=`:plus-options="${extInfosMap['plusOptions']}"`
-						}
-						fieldSrc=`<mdp-select  :plus-options="${field.ext}" ${plusOptions} show-type="${field.typ}" :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol}"  split=","></mdp-select>`
+						} 
+						fieldSrc=`<mdp-select ${plusOptions} show-type="${field.typ}" ${showStyle} :disabled="${field.ronly=='1'}" :multiple="${field.mul=='1'}" v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  split=","></mdp-select>`
 
  					}else  if(field.extType=='html'){ 
 						if(field.ronly=='1'){
 							fieldSrc=`<div v-html="${field.dval||'无'}"></div>`
 						}else{ 
-						fieldSrc=`<el-popover
-								placement="top-start"
-								width="400"
-								trigger="hover">
-								<el-input  type="textarea" rows="4" v-model="editForm.${field.idCamel}"></el-input>
-								<div slot="reference"  v-html="editForm.${field.idCamel}||${field.dval}||'无'"></div>
-							</el-popover>`
+						fieldSrc=`<el-popover placement="top-start"	width="400"	trigger="hover"><el-input  type="textarea" rows="4" v-model="editForm.${field.idCamel}"></el-input><div slot="reference"  v-html="editForm.${field.idCamel}||${field.dval}||'无'"></div></el-popover>`
 						}
 					}else  if(field.extType=='link'){
 						if(field.ronly=='1'){
@@ -235,7 +247,7 @@ export default {
 						}
 					}else  if(field.extType=='image'){
 						if(field.ronly=='1'){
-							fieldSrc=`<el-image :style="${field.styleObj}"
+							fieldSrc=`<el-image ${styleObj}
 										:src="editForm.${field.idCamel}||${field.dval}"
 										fit="contain" >
 									</el-image>`
@@ -245,7 +257,7 @@ export default {
 								width="400"
 								trigger="hover">
 								<el-button  @click="$refs['imageDialog'].open({formData:editForm,prop:'${field.idCamel}'})">上传图片</el-button>  
-								<el-image slot="reference" :style="${field.styleObj}"
+								<el-image slot="reference" ${styleObj}
 									:src="editForm.${field.idCamel}||${field.dval}"
 									fit="contain" >
 								</el-image>
@@ -263,34 +275,32 @@ export default {
 								<el-link slot="reference" :href="editForm.${field.idCamel}" target="_blank">{{ editForm.${field.idCamel}||${field.dval}||'无' }}</el-link> 
 							</el-popover>`
 						}
-					}else  if(field.extType=='text'){
-						fieldSrc=`<mdp-input :show-style="${field.showStyle}"  :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}"  label="${field.title}" auto-complete="off" placeholder="${field.hol}"  :clearable="${field.clear!='0'}" > </mdp-input>`
+					}else  if(field.typ=='text'){
+						fieldSrc=`<mdp-input ${showStyle}  :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  :clearable="${field.clear!='0'}" > </mdp-input>`
 
-					}else  if(field.extType=='number'){
-						fieldSrc=`<mdp-number :show-style="${field.showStyle}"  :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}"  label="${field.title}" auto-complete="off" placeholder="${field.hol}"  :clearable="${field.clear!='0'}" > </mdp-number>`
+					}else  if(field.typ=='number'){
+						fieldSrc=`<mdp-number ${showStyle}  :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  :clearable="${field.clear!='0'}" > </mdp-number>`
 
-					}else  if(field.extType=='amount'){
-						fieldSrc=`<mdp-number :show-style="${field.showStyle}"  :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}"  label="${field.title}" auto-complete="off" placeholder="${field.hol}"  :clearable="${field.clear!='0'}" > </mdp-number>`
-					}else  if(field.extType=='textarea'){
-						fieldSrc=`<mdp-input :show-style="${field.showStyle}" type="textarea" :rows="${extInfosMap.rows}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}"  label="${field.title}" auto-complete="off" placeholder="${field.hol}"  :clearable="${field.clear!='0'}" > </mdp-input>`
+					}else  if(field.typ=='amount'){
+						fieldSrc=`<mdp-number ${showStyle}  :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  :clearable="${field.clear!='0'}" > </mdp-number>`
+					}else  if(field.typ=='textarea'){
+						fieldSrc=`<mdp-input ${showStyle} type="textarea" :rows="${extInfosMap.rows}" :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  :clearable="${field.clear!='0'}" > </mdp-input>`
 
-					}else  if(field.extType=='time'){
-						fieldSrc=`<el-time-picker :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}"  label="${field.title}" auto-complete="off" placeholder="${field.hol}"  :clearable="${field.clear!='0'}" > </el-time-picker>`
-					}else  if(field.extType=='date'){
-						fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" align="right" type="date" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd HH:mm:ss'}" format="${extInfosMap.format||'yyyy-MM-dd'}" placeholder="${field.hol||'选择日期'}"> </mdp-date>`
+					}else  if(field.typ=='time'){
+						fieldSrc=`<el-time-picker :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}"  label="${field.title}"  placeholder="${field.hol||field.title}"  :clearable="${field.clear!='0'}" > </el-time-picker>`
+					}else  if(field.typ=='date'){
+						fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="date" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd HH:mm:ss'}" format="${extInfosMap.format||'yyyy-MM-dd'}" placeholder="${field.hol||'选择日期'}"> </mdp-date>`
 
-					}else  if(field.extType=='datetime'){
-						fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" align="right" type="datetime" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd HH:mm:ss'}" format="${extInfosMap.format||'yyyy-MM-dd HH:mm:ss'}" placeholder="${field.hol||'选择日期时间'}"> </mdp-date>`
+					}else  if(field.typ=='datetime'){
+						fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="datetime" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd HH:mm:ss'}" format="${extInfosMap.format||'yyyy-MM-dd HH:mm:ss'}" placeholder="${field.hol||'选择日期时间'}"> </mdp-date>`
 
-					}else  if(field.extType=='month'){
-						fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" align="right" type="month" value-format="${extInfosMap.valueFormat||'yyyy-MM'}" format="${extInfosMap.format||'yyyy-MM'}" placeholder="${field.hol||'选择月份'}"> </mdp-date>`
-					}else  if(field.extType=='year'){
-						fieldSrc=`<mdp-date :show-style="${field.showStyle}" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" v-model="editForm.${field.idCamel}" align="right" type="year" value-format="${extInfosMap.valueFormat||'yyyy'}" format="${extInfosMap.format||'yyyy'}" placeholder="${field.hol||'选择年份'}"> </mdp-date>`
+					}else  if(field.typ=='month'){
+						fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="month" value-format="${extInfosMap.valueFormat||'yyyy-MM'}" format="${extInfosMap.format||'yyyy-MM'}" placeholder="${field.hol||'选择月份'}"> </mdp-date>`
+					}else  if(field.typ=='year'){
+						fieldSrc=`<mdp-date ${showStyle} :disabled="${field.ronly=='1'}" ${styleObj} v-model="editForm.${field.idCamel}" align="right" type="year" value-format="${extInfosMap.valueFormat||'yyyy'}" format="${extInfosMap.format||'yyyy'}" placeholder="${field.hol||'选择年份'}"> </mdp-date>`
 
-					}else  if(field.extType=='daterange'){
-						fieldSrc=`<mdp-date-range :show-style="field.showStyle" :disabled="${field.ronly=='1'}" :style="${field.styleObj}" :value="editForm[${field.idCamel}]?editForm[${field.idCamel}].split(','):[]" align="right" type="daterange" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd'}" format="${extInfosMap.format||'yyyy-MM-dd'}" placeholder="${field.hol||'选择起止时间'}"
-							@change="(vs)=>editForm[${field.idCamel}]=vs.join(',')"
-						> </mdp-date-range> `	
+					}else  if(field.typ=='daterange'){
+						fieldSrc=`<mdp-date-range :show-style="field.showStyle" :disabled="${field.ronly=='1'}" ${styleObj} :value="editForm[${field.idCamel}]?editForm[${field.idCamel}].split(','):[]" align="right" type="daterange" value-format="${extInfosMap.valueFormat||'yyyy-MM-dd'}" format="${extInfosMap.format||'yyyy-MM-dd'}" placeholder="${field.hol||'选择起止时间'}" @change="(vs)=>editForm[${field.idCamel}]=vs.join(',')"> </mdp-date-range> `	
 					}
 					var vrules=field.vrules?JSON.parse(field.vrules):[]
 					if(field.req=='1'){
@@ -298,32 +308,47 @@ export default {
 							vrules.push({required:true,message:"此项必填",trigger:"change"})
 						}
 					}
-					sourceStr=`${sourceStr}<el-form-item label="${field.title}" prop="${field.idCamel}" :rules="${JSON.stringify(vrules)}">${fieldSrc}</el-form-item>`
+					sourceStr=`<el-form-item label="${field.title}" prop="${field.idCamel}" :rules="${JSON.stringify(vrules)}">\n${lvlt1}${fieldSrc}\n${lvlt}</el-form-item>`
+				}
+				if(sourceStr){
+					srcList.push(sourceStr)
 				}
 				
 			}) 
-			return sourceStr;
+			return srcList.join(`\n${lvlt}`);
 		},
 		rowChildSrc(lvl,field){
-			var src=""
+			var srcList=[] 
+			var lvlt=this.getTabByLvl(lvl)
+			var lvlt1=this.getTabByLvl(lvl+1)
 			if(field.children && field.children.length>0){
 				field.children.forEach(k=>{
 					var span=k.span?k.span:24
-					src=`${src}<el-col :span="${span}">${this.createSubSource(lvl,[k])}</el-col>`
+					var src=`<el-col :span="${span}">\n${lvlt1}${this.createSubSource(lvl+1,[k])}\n${lvlt}</el-col>`
+					srcList.push(src)
 				})
+				return srcList.join("\n"+lvlt) 
+			}else{
+				return "";
 			}
-			return src 
+			
 		},
 		
 		tabsChildSrc(lvl,field){
-			var src=""
+			var srcList=[]
+			if(!field.gname || field.gname.length==0){
+				return ""
+			}	 
+			var lvlt=this.getTabByLvl(lvl)
+			var lvlt1=this.getTabByLvl(lvl+1)
 			var tabList=field.gname.split(",")
 			tabList.forEach(tab=>{
 				var childs=field.children.filter(f=>f.gname==tab||!f.gname)
-				var subSrc=childs&&childs.length>0?this.rowChildSrc(lvl,{children:childs}):"" 
-				src=`${src}<el-tab-pane name="${tab}"><el-row>${subSrc}</el-row></el-tab-pane>`
+				var subSrc=childs&&childs.length>0?this.rowChildSrc(lvl+1,{children:childs}):"" 
+				var src=`<el-tab-pane name="${tab}">\n${lvlt1}<el-row>\n${lvlt1}\t${subSrc}\n${lvlt1}</el-row>\n${lvlt}</el-tab-pane>`
+				srcList.push(src)
 			})
-			return src 
+			return srcList.join("\n"+lvlt) 
 		},
 		getTabByLvl(lvl){
 			var str=""
@@ -341,10 +366,10 @@ export default {
 			return extInfosMap;
 		}, 
 	},//end method
-	components: {   
+	components: {    
 	},
-	mounted() {
-		 
+	mounted() { 
+		this.createSource(); 
 		
 	}//end mounted
 }