Eldate.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
  2. /** @class Eldate 基于Element UI的日期选择组件。
  3. * @o2cn 日期选择
  4. * @example
  5. * //可以在脚本中获取该组件
  6. * //方法1:
  7. * var input = this.form.get("name"); //获取组件
  8. * //方法2
  9. * var input = this.target; //在组件事件脚本中获取
  10. * @extends MWF.xApplication.process.Xform.$Module
  11. * @o2category FormComponents
  12. * @o2range {Process|CMS|Portal}
  13. * @hideconstructor
  14. * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|Element UI DatePicker 日期选择器}
  15. */
  16. MWF.xApplication.process.Xform.Eldate = MWF.APPEldate = new Class(
  17. /** @lends MWF.xApplication.process.Xform.Eldate# */
  18. {
  19. Implements: [Events],
  20. Extends: MWF.APP$Elinput,
  21. options: {
  22. "moduleEvents": ["load", "queryLoad", "postLoad"],
  23. /**
  24. * 当 input 失去焦点时触发。this.event[0]指向组件实例
  25. * @event MWF.xApplication.process.Xform.Eldate#blur
  26. * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|日期选择组件的Events章节}
  27. */
  28. /**
  29. * 当 input 获得焦点时触发。this.event[0]指向组件实例
  30. * @event MWF.xApplication.process.Xform.Eldate#focus
  31. * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|日期选择组件的Events章节}
  32. */
  33. /**
  34. * 用户确认选定的值时触发。this.event[0]为组件绑定值;格式与绑定值一致,可受 value-format 控制
  35. * @event MWF.xApplication.process.Xform.Eldate#change
  36. * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|日期选择组件的Events章节}
  37. */
  38. "elEvents": ["focus", "blur", "change"]
  39. },
  40. _loadMergeReadContentNode: function( contentNode, data ){
  41. var d = o2.typeOf( data.data ) === "array" ? data.data : [data.data];
  42. contentNode.set("text", d.join( this.json.rangeSeparator ? " "+this.json.rangeSeparator+" " : " 至 " ) );
  43. },
  44. _queryLoaded: function(){
  45. var data = this._getBusinessData();
  46. if (data){
  47. if( ["monthrange","daterange"].contains(this.json.selectType) ) {
  48. if (typeOf(data) === "string") this._setBusinessData([data, ""]);
  49. }else if( ["dates"].contains(this.json.selectType) ){
  50. if (typeOf(data) === "string") this._setBusinessData([data]);
  51. }else{
  52. if( typeOf(data) === "array" )this._setBusinessData(data[0] || "");
  53. }
  54. }
  55. },
  56. __setReadonly: function(data){
  57. if (this.isReadonly()){
  58. var format = this.json.format || this.json.valueFormat;
  59. if( o2.typeOf(data) === "array" ){
  60. if( ["monthrange","daterange"].contains(this.json.selectType) ) {
  61. var ds = data.map(function (d){
  62. return this.formatDate(new Date(d), format);
  63. }.bind(this));
  64. this.node.set("text", this.json.rangeSeparator ? ds.join(this.json.rangeSeparator) : ds);
  65. }else{
  66. this.node.set("text", data ? this.formatDate(new Date(data), format) : "" );
  67. }
  68. }else{
  69. this.node.set("text", data ? this.formatDate(new Date(data), format) : "" );
  70. }
  71. if( this.json.elProperties ){
  72. this.node.set(this.json.elProperties );
  73. }
  74. if (this.json.elStyles){
  75. this.node.setStyles( this._parseStyles(this.json.elStyles) );
  76. }
  77. if( !this.eventLoaded ){
  78. this._loadDomEvents();
  79. this.eventLoaded = true;
  80. }
  81. this.fireEvent("postLoad");
  82. this.fireEvent("load");
  83. this.isLoaded = true;
  84. }
  85. },
  86. _appendVueData: function(){
  87. if (!this.json.isReadonly && !this.form.json.isReadonly) this.json.isReadonly = false;
  88. if (!this.json.disabled) this.json.disabled = false;
  89. if (!this.json.clearable) this.json.clearable = false;
  90. if (!this.json.disabled) this.json.disabled = false;
  91. if (!this.json.editable) this.json.editable = false;
  92. if (!this.json.size) this.json.size = "";
  93. if (!this.json.valueFormat) this.json.valueFormat = this.json.format || "";
  94. if (!this.json.prefixIcon) this.json.prefixIcon = "";
  95. if (!this.json.description) this.json.description = "";
  96. this.json.pickerOptions = {
  97. firstDayOfWeek: this.json.firstDayOfWeek.toInt()
  98. }
  99. if (this.json.disabledDate && this.json.disabledDate.code){
  100. this.json.pickerOptions.disabledDate = function(date){
  101. return this.form.Macro.fire(this.json.disabledDate.code, this, date);
  102. }.bind(this)
  103. }
  104. },
  105. _createElementHtml: function() {
  106. var html = "<el-date-picker";
  107. html += " v-model=\""+this.json.$id+"\"";
  108. html += " :type=\"selectType\"";
  109. html += " :readonly=\"isReadonly\"";
  110. html += " :disabled=\"disabled\"";
  111. html += " :editable=\"editable\"";
  112. html += " :clearable=\"clearable\"";
  113. html += " :size=\"size\"";
  114. html += " :prefix-icon=\"prefixIcon\"";
  115. html += " :range-separator=\"rangeSeparator\"";
  116. html += " :start-placeholder=\"startPlaceholder\"";
  117. html += " :end-placeholder=\"endPlaceholder\"";
  118. html += " :value-format=\"valueFormat\"";
  119. html += " :format=\"format\"";
  120. html += " :picker-options=\"pickerOptions\"";
  121. // html += " :picker-options=\"{" +
  122. // ":firstDayOfWeek=firstDayOfWeek," +
  123. // ":disabledDate=\"disabledDateFun\""+
  124. // "}\"";
  125. this.options.elEvents.forEach(function(k){
  126. html += " @"+k+"=\"$loadElEvent_"+k.camelCase()+"\"";
  127. });
  128. if (this.json.elProperties){
  129. Object.keys(this.json.elProperties).forEach(function(k){
  130. if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
  131. }, this);
  132. }
  133. if (this.json.elStyles) html += " :style=\"elStyles\"";
  134. html += ">";
  135. if (this.json.vueSlot) html += this.json.vueSlot;
  136. html += "</el-date-picker>";
  137. return html;
  138. },
  139. getInputData: function(){
  140. var data = this.json[this.json.$id];
  141. if( data === null ){
  142. if( ["monthrange","daterange"].contains(this.json.selectType) ) {
  143. return [];
  144. }else if( ["dates"].contains(this.json.selectType) ){
  145. return [];
  146. }else{
  147. return "";
  148. }
  149. }
  150. return this.json[this.json.$id];
  151. },
  152. getExcelData: function(){
  153. var value = this.getData();
  154. return o2.typeOf(value) === "array" ? value.join(", ") : value;
  155. },
  156. setExcelData: function(data){
  157. var arr = this.stringToArray(data);
  158. this.excelData = arr;
  159. var value = arr.length === 0 ? arr[0] : arr;
  160. this.setData(value, true);
  161. },
  162. formatDate: function (date, format) {
  163. var o = {
  164. 'M+': date.getMonth() + 1, // 月份
  165. 'd+': date.getDate(), // 日
  166. 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
  167. 'H+': date.getHours(), // 小时
  168. 'm+': date.getMinutes(), // 分
  169. 's+': date.getSeconds(), // 秒
  170. 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
  171. d: date.getDay(),
  172. S: date.getMilliseconds(), // 毫秒
  173. a: date.getHours() < 12 ? 'am' : 'pm', // 上午/下午
  174. A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
  175. };
  176. if (/(y+)/.test(format)) {
  177. format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  178. }
  179. if (/(W+)/.test(format)) {
  180. o['W+'] = this.weekNumberOfDate(date);
  181. }
  182. for (let k in o) {
  183. if (new RegExp('(' + k + ')').test(format)) {
  184. format = format.replace(
  185. RegExp.$1,
  186. RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
  187. );
  188. }
  189. }
  190. return format;
  191. },
  192. weekNumberOfDate: function ( date ){
  193. var target = new Date(date.getTime());
  194. var dayNumber = ( 7 + date.getDay() - parseInt( (this.json.firstDayOfWeek || 0) ) ) % 7;
  195. target.setDate(target.getDate() - dayNumber + 3);
  196. var firstThursday = target.valueOf();
  197. target.setMonth(0, 1);
  198. if (target.getDay() !== 4) {
  199. target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
  200. }
  201. return 1 + Math.ceil((firstThursday - target) / 608400000); // 604800000 = 7 * 24 * 3600 * 1000
  202. }
  203. });