增加Eldatetime组件

59d22ed5 · unknown · 8bcd231a · 59d22ed5 · 59d22ed5 · 59d22ed5
3 changed file
--- a/o2web/source/x_component_process_FormDesigner/Module/Eldatetime.js
+++ b/o2web/source/x_component_process_FormDesigner/Module/Eldatetime.js
@@ -14,40 +14,16 @@ MWF.xApplication.process.FormDesigner.Module.Eldatetime = MWF.FCEldatetime = new
 		this.moduleName = "eldatetime";
 	},
 	_createElementHtml: function(){
-		//var html = "<el-input placeholder=\"请输入内容\"></el-input>";
-		var html = "<el-input";
-		// if (this.json.description) html += " placeholder=\""+this.json.description+"\"";
-		// html += " type=\""+(this.json.inputType || "text")+"\"";
-		// if (this.json.maxlength) html += " maxlength=\""+this.json.maxlength+"\"";
-		// if (this.json.showWordLimit) html += " show-word-limit";
-		// if (this.json.clearable) html += " clearable";
-		// if (this.json.showPassword) html += " show-password";
-		// if (this.json.size && this.json.size!=="default") html += " size=\""+this.json.size+"\"";
-		// html += " rows=\""+(this.json.textareaRows || "2")+"\"";

-		html += " :placeholder=\"description\"";
-		html += " :type=\"inputType\"";
-		html += " :maxlength=\"maxlength\"";
-		html += " :show-word-limit=\"showWordLimit\"";
-		html += " :clearable=\"clearable\"";
-		html += " :show-password=\"showPassword\"";
+		var html = "<el-date-picker";
+		html += " :type=\"selectType\"";
 		html += " :size=\"size\"";
-		html += " :rows=\"rows\"";
-		html += " :resize=\"resize\"";
 		html += " :prefix-icon=\"prefixIcon\"";
-		html += " :suffix-icon=\"suffixIcon\"";
-
-
-
-		// if (this.json.autosize){
-		// 	var o = {};
-		// 	if (this.json.minRows) o.minRows = this.json.minRows;
-		// 	if (this.json.maxRows) o.maxRows = this.json.maxRows;
-		// 	html += " autosize=\""+JSON.stringify(o)+"\"";
-		// }
-		// if (this.json.resize) html += " resize=\""+this.json.resize+"\"";
-		// if (this.json.prefixIcon) html += " prefix-icon=\""+this.json.prefixIcon+"\"";
-		// if (this.json.suffixIcon) html += " suffix-icon=\""+this.json.suffixIcon+"\"";
+		html += " :range-separator=\"rangeSeparator\"";
+		html += " readonly";
+		html += " placeholder="+this.json.id;
+		html += " start-placeholder="+this.json.id;
+		html += " end-placeholder="+this.json.id;

 		if (this.json.elProperties){
 			Object.keys(this.json.elProperties).forEach(function(k){
@@ -56,18 +32,9 @@ MWF.xApplication.process.FormDesigner.Module.Eldatetime = MWF.FCEldatetime = new
 		}

 		html += " :style=\"elStyles\"";
-
-		// if (this.json.elStyles){
-		// 	var style = "";
-		// 	Object.keys(this.json.elStyles).forEach(function(k){
-		// 		if (this.json.elStyles[k]) style += k+":"+this.json.elStyles[k]+";";
-		// 	}, this);
-		// 	html += " style=\""+style+"\"";
-		// }
-
 		html += " :value=\"id\">";
 		if (this.json.vueSlot) html += this.json.vueSlot;
-		html += "</el-input>";
+		html += "</el-date-picker>";
 		return html;
 	},
 	_createCopyNode: function(){

--- a/o2web/source/x_component_process_FormDesigner/Module/Eldatetime/eldatetime.html
+++ b/o2web/source/x_component_process_FormDesigner/Module/Eldatetime/eldatetime.html
@@ -13,54 +13,33 @@
 		    <td class="editTableTitle">{{$.lp.description}}:</td>
 		    <td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
 		  </tr>
-			<tr>
-				<td class="editTableTitle">{{$.lp.readonly}}:</td>
-				<td class="editTableValue">
-					<input type="radio" name="isReadonly" value="true" text{($.isReadonly)?'checked':''}/>{{$.lp.yes}}
-					<input type="radio" name="isReadonly" value="false" text{(!$.isReadonly)?'checked':''}/>{{$.lp.no}}
-				</td>
-			</tr>
 		</table>

 		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
 			<tr>
 				<td class="editTableTitle">{{$.lp.selectType}}:</td>
 				<td class="editTableValue">
-					<input type="radio" name="selectType" text{($.selectType=='datetime')?'checked':''} value="datetime"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', '')}"/>{{$.lp.dateTime}}
-					<input type="radio" name="selectType"  text{($.selectType=='date')?'checked':''} value="date"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', 'none')}"/>{{$.lp.dateOnly}}
-					<input type="radio" name="selectType"  text{($.selectType=='dates')?'checked':''} value="dates"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', 'none')}"/>{{$.lp.multidateOnly}}
-					<input type="radio" name="selectType" text{($.selectType=='time')?'checked':''} value="time"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', '')}"/>{{$.lp.timeOnly}}
-					<br/>
-					<input type="radio" name="selectType"  text{($.selectType=='month')?'checked':''} value="month"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', 'none')}"/>{{$.lp.monthOnly}}
-					<input type="radio" name="selectType"  text{($.selectType=='year')?'checked':''} value="year"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', 'none')}"/>{{$.lp.yearOnly}}
-					<input type="radio" name="selectType"  text{($.selectType=='week')?'checked':''} value="week"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', 'none')}"/>{{$.lp.weekOnly}}
-					<br/>
-					<input type="radio" name="selectType" text{($.selectType=='datetimerange')?'checked':''} value="datetimerange"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', '')}"/>{{$.lp.datetimerange}}
-					<input type="radio" name="selectType" text{($.selectType=='daterange')?'checked':''} value="daterange"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', '')}"/>{{$.lp.daterange}}
-					<input type="radio" name="selectType" text{($.selectType=='timerange')?'checked':''} value="timerange"
-						   onclick="if (this.checked){ $('text{$.pid}timeSelectTable').setStyle('display', '')}"/>{{$.lp.timerange}}
-				</td>
-			</tr>
-			<tr id="text{$.pid}timeSelectTypeTr" style="text{['time','timerange'].contains($.selectType)?'':'none'}">
-				<td class="editTableTitle">{{$.lp.timeSelectType2}}:</td>
-				<td class="editTableValue">
-					<input type="radio" name="timeSelectType" value="picker" text{($.timeSelectType!=='select')?'checked':''}/>{{$.lp.anyTimePoint}}
-					<input type="radio" name="timeSelectType" value="select" text{($.timeSelectType==='select')?'checked':''}/>{{$.lp.fixedTimePoint}}
+					<input type="radio" name="selectType"  text{(!$.selectType || $.selectType=='datetime')?'checked':''} value="datetime"
+						   onclick="if (this.checked){
+						   	$('text{$.pid}rangeTable').setStyle('display', 'none')
+					}"/>{{$.lp.datetime}}
+					<input type="radio" name="selectType"  text{($.selectType=='dates')?'checked':''} value="datetimerange"
+						   onclick="if (this.checked){
+						   	$('text{$.pid}rangeTable').setStyle('display', '')
+					}"}"/>{{$.lp.datetimerange}}
 				</td>
 			</tr>
-			<tr id="text{$.pid}formatTr" style="(text{['time','timerange'].contains($.selectType) && $.timeSelectType!=='select') ? 'none':''}">
+			<tr id="text{$.pid}formatTr">
 				<td class="editTableTitle">{{$.lp.format}}:</td>
 				<td class="editTableValue"><input type="text" name="format" value="text{$.format}" class="editTableInput"/></td>
 			</tr>
+			<tr>
+				<td class="editTableTitle">{{$.lp.readonly}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="isReadonly" value="true" text{($.isReadonly)?'checked':''}/>{{$.lp.yes}}
+					<input type="radio" name="isReadonly" value="false" text{(!$.isReadonly)?'checked':''}/>{{$.lp.no}}
+				</td>
+			</tr>
 			<tr>
 				<td class="editTableTitle">{{$.lp.disabled}}:</td>
 				<td class="editTableValue">
@@ -71,15 +50,15 @@
 			<tr>
 				<td class="editTableTitle">{{$.lp.editable}}:</td>
 				<td class="editTableValue">
-					<input type="radio" name="editable" value="true" text{($.editable!==false)?'checked':''}/>{{$.lp.yes}}
-					<input type="radio" name="editable" value="false" text{($.editable===false)?'checked':''}/>{{$.lp.no}}
+					<input type="radio" name="editable" value="true" text{($.editable)?'checked':''}/>{{$.lp.yes}}
+					<input type="radio" name="editable" value="false" text{(!$.editable)?'checked':''}/>{{$.lp.no}}
 				</td>
 			</tr>
 			<tr>
 				<td class="editTableTitle">{{$.lp.clearable}}:</td>
 				<td class="editTableValue">
-					<input type="radio" name="clearable" value="true" text{($.clearable===true)?'checked':''}/>{{$.lp.yes}}
-					<input type="radio" name="clearable" value="false" text{($.clearable!==true)?'checked':''}/>{{$.lp.no}}
+					<input type="radio" name="clearable" value="true" text{($.clearable)?'checked':''}/>{{$.lp.yes}}
+					<input type="radio" name="clearable" value="false" text{(!$.clearable)?'checked':''}/>{{$.lp.no}}
 				</td>
 			</tr>
 			<tr>
@@ -91,30 +70,6 @@
 					<input type="radio" name="size" value="mini" text{($.size==='mini')?'checked':''}/>mini
 				</td>
 			</tr>
-		</table>
-		<table id="text{$.pid}timeSelectTable" style="(text{!['time','timerange'].contains($.selectType) || $.timeSelectType!=='select') ? 'none':''}">
-			<tr>
-				<td class="editTableTitle">{{$.lp.step}}:</td>
-				<td class="editTableValue"><input type="number" name="step" value="text{$.step || '1'}" class="editTableInput"/></td>
-			</tr>
-		</table>
-		<table id="text{$.pid}timePickTable" style="
-				( text{['datetime','datetimerange'].contains($.selectType) || (text{['time','timerange'].contains($.selectType) && $.timeSelectType!=='select') ) ? '':'none'}">
-			<tr>
-				<td class="editTableTitle">{{$.lp.arrowControl}}:</td>
-				<td class="editTableValue">
-					<input type="radio" name="arrowControl" value="true" text{($.arrowControl)?'checked':''}/>{{$.lp.yes}}
-					<input type="radio" name="arrowControl" value="false" text{(!$.arrowControl)?'checked':''}/>{{$.lp.no}}
-				</td>
-			</tr>
-		</table>
-		<table id="text{$.pid}datePickTable">
-			<tr>
-				<td colspan="2">
-					<div>{{$.lp.disabledDateNote}}</div>
-					<div class="MWFFormulaArea" name="disabledDate" title="{{$.lp.disabledDateScript}}"></div>
-				</td>
-			</tr>
 			<tr>
 				<td class="editTableTitle">{{$.lp.firstDayOfWeek}}:</td>
 				<td class="editTableValue">
@@ -129,32 +84,40 @@
 					</select>
 				</td>
 			</tr>
-		</table>
-		<table id="text{$.pid}noRangeTable">
 			<tr>
-				<td class="editTableTitle">{{$.lp.placeholder}}:</td>
-				<td class="editTableValue"><input type="text" name="placeholder" value="text{$.placeholder}" class="editTableInput"/></td>
+				<td class="editTableTitle">{{$.lp.arrowControl}}:</td>
+				<td class="editTableValue">
+					<input type="radio" name="arrowControl" value="true" text{($.arrowControl)?'checked':''}/>{{$.lp.yes}}
+					<input type="radio" name="arrowControl" value="false" text{(!$.arrowControl)?'checked':''}/>{{$.lp.no}}
+				</td>
+			</tr>
+			<tr>
+				<td colspan="2">
+					<div>{{$.lp.disabledDateNote}}</div>
+					<div class="MWFFormulaArea" name="disabledDate" title="{{$.lp.disabledDateScript}}"></div>
+				</td>
 			</tr>
 		</table>
-		<table id="text{$.pid}rangeTable">
+		<table id="text{$.pid}rangeTable" style="display: text{(!['datetimerange'].contains($.selectType)) ? 'none':''};">
 			<tr>
 				<td class="editTableTitle">{{$.lp.rangeSeparator}}:</td>
-				<td class="editTableValue"><input type="text" name="rangeSeparator" value="text{$.rangeSeparator || '至'}" class="editTableInput"/></td>
+				<td class="editTableValue"><input type="text" name="rangeSeparator" value="text{$.rangeSeparator}" class="editTableInput"/></td>
 			</tr>
 			<tr>
 				<td class="editTableTitle">{{$.lp.startPlaceholder}}:</td>
-				<td class="editTableValue"><input type="text" name="startPlaceholder" value="text{$.startPlaceholder || '开始'}" class="editTableInput"/></td>
+				<td class="editTableValue"><input type="text" name="startPlaceholder" value="text{$.startPlaceholder}" class="editTableInput"/></td>
 			</tr>
 			<tr>
 				<td class="editTableTitle">{{$.lp.endPlaceholder}}:</td>
-				<td class="editTableValue"><input type="text" name="endPlaceholder" value="text{$.endPlaceholder || '结束'}" class="editTableInput"/></td>
+				<td class="editTableValue"><input type="text" name="endPlaceholder" value="text{$.endPlaceholder}" class="editTableInput"/></td>
 			</tr>
 		</table>
+
 		<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999;font-weight:bold;">{{$.lp.prefixIcon}}</div>
 		<div style="display: text{($.prefixIcon)?'block':'none'}" class="MWFElIcon" name="prefixIcon"></div>

-		<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999;font-weight:bold;">{{$.lp.suffixIcon}}</div>
-		<div style="display: text{($.suffixIcon)?'block':'none'}" class="MWFElIcon" name="suffixIcon"></div>
+<!--		<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999;font-weight:bold;">{{$.lp.suffixIcon}}</div>-->
+<!--		<div style="display: text{($.suffixIcon)?'block':'none'}" class="MWFElIcon" name="suffixIcon"></div>-->

 		<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
 		<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>

--- a/o2web/source/x_component_process_FormDesigner/Module/Eldatetime/template.json
+++ b/o2web/source/x_component_process_FormDesigner/Module/Eldatetime/template.json
@@ -6,6 +6,15 @@
 	"isReadonly" : false,
 	"selectType": "dateTime",
 	"format": "yyyy-MM-dd HH:mm:ss",
+	"isRange": false,
+	"disabled": false,
+	"editable": false,
+	"clearable": false,
+	"size" : "default",
+	"firstDayOfWeek" : "7",
+	"rangeSeparator": MWF.xApplication.process.FormDesigner.LP.propertyTemplate.to,
+	"startPlaceholder": MWF.xApplication.process.FormDesigner.LP.propertyTemplate.startTime,
+	"endPlaceholder": MWF.xApplication.process.FormDesigner.LP.propertyTemplate.endTime,
 	"vueData": {},
 	"vueMethods": {},
 	"vueCss": {},