123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213 |
- o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
- /** @class Eldate 基于Element UI的日期选择组件。
- * @o2cn 日期选择
- * @example
- * //可以在脚本中获取该组件
- * //方法1:
- * var input = this.form.get("name"); //获取组件
- * //方法2
- * var input = this.target; //在组件事件脚本中获取
- * @extends MWF.xApplication.process.Xform.$Module
- * @o2category FormComponents
- * @o2range {Process|CMS|Portal}
- * @hideconstructor
- * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|Element UI DatePicker 日期选择器}
- */
- MWF.xApplication.process.Xform.Eldate = MWF.APPEldate = new Class(
- /** @lends MWF.xApplication.process.Xform.Eldate# */
- {
- Implements: [Events],
- Extends: MWF.APP$Elinput,
- options: {
- "moduleEvents": ["load", "queryLoad", "postLoad"],
- /**
- * 当 input 失去焦点时触发。this.event[0]指向组件实例
- * @event MWF.xApplication.process.Xform.Eldate#blur
- * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|日期选择组件的Events章节}
- */
- /**
- * 当 input 获得焦点时触发。this.event[0]指向组件实例
- * @event MWF.xApplication.process.Xform.Eldate#focus
- * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|日期选择组件的Events章节}
- */
- /**
- * 用户确认选定的值时触发。this.event[0]为组件绑定值;格式与绑定值一致,可受 value-format 控制
- * @event MWF.xApplication.process.Xform.Eldate#change
- * @see {@link https://element.eleme.cn/#/zh-CN/component/date-picker|日期选择组件的Events章节}
- */
- "elEvents": ["focus", "blur", "change"]
- },
- _loadMergeReadContentNode: function( contentNode, data ){
- var d = o2.typeOf( data.data ) === "array" ? data.data : [data.data];
- contentNode.set("text", d.join( this.json.rangeSeparator ? " "+this.json.rangeSeparator+" " : " 至 " ) );
- },
- _queryLoaded: function(){
- var data = this._getBusinessData();
- if (data){
- if( ["monthrange","daterange"].contains(this.json.selectType) ) {
- if (typeOf(data) === "string") this._setBusinessData([data, ""]);
- }else if( ["dates"].contains(this.json.selectType) ){
- if (typeOf(data) === "string") this._setBusinessData([data]);
- }else{
- if( typeOf(data) === "array" )this._setBusinessData(data[0] || "");
- }
- }
- },
- __setReadonly: function(data){
- if (this.isReadonly()){
- var format = this.json.format || this.json.valueFormat;
- if( o2.typeOf(data) === "array" ){
- if( ["monthrange","daterange"].contains(this.json.selectType) ) {
- var ds = data.map(function (d){
- return this.formatDate(new Date(d), format);
- }.bind(this));
- this.node.set("text", this.json.rangeSeparator ? ds.join(this.json.rangeSeparator) : ds);
- }else{
- this.node.set("text", data ? this.formatDate(new Date(data), format) : "" );
- }
- }else{
- this.node.set("text", data ? this.formatDate(new Date(data), format) : "" );
- }
- if( this.json.elProperties ){
- this.node.set(this.json.elProperties );
- }
- if (this.json.elStyles){
- this.node.setStyles( this._parseStyles(this.json.elStyles) );
- }
- if( !this.eventLoaded ){
- this._loadDomEvents();
- this.eventLoaded = true;
- }
- this.fireEvent("postLoad");
- this.fireEvent("load");
- this.isLoaded = true;
- }
- },
- _appendVueData: function(){
- if (!this.json.isReadonly && !this.form.json.isReadonly) this.json.isReadonly = false;
- if (!this.json.disabled) this.json.disabled = false;
- if (!this.json.clearable) this.json.clearable = false;
- if (!this.json.disabled) this.json.disabled = false;
- if (!this.json.editable) this.json.editable = false;
- if (!this.json.size) this.json.size = "";
- if (!this.json.valueFormat) this.json.valueFormat = this.json.format || "";
- if (!this.json.prefixIcon) this.json.prefixIcon = "";
- if (!this.json.description) this.json.description = "";
- this.json.pickerOptions = {
- firstDayOfWeek: this.json.firstDayOfWeek.toInt()
- }
- if (this.json.disabledDate && this.json.disabledDate.code){
- this.json.pickerOptions.disabledDate = function(date){
- return this.form.Macro.fire(this.json.disabledDate.code, this, date);
- }.bind(this)
- }
- },
- _createElementHtml: function() {
- var html = "<el-date-picker";
- html += " v-model=\""+this.json.$id+"\"";
- html += " :type=\"selectType\"";
- html += " :readonly=\"isReadonly\"";
- html += " :disabled=\"disabled\"";
- html += " :editable=\"editable\"";
- html += " :clearable=\"clearable\"";
- html += " :size=\"size\"";
- html += " :prefix-icon=\"prefixIcon\"";
- html += " :range-separator=\"rangeSeparator\"";
- html += " :start-placeholder=\"startPlaceholder\"";
- html += " :end-placeholder=\"endPlaceholder\"";
- html += " :value-format=\"valueFormat\"";
- html += " :format=\"format\"";
- html += " :picker-options=\"pickerOptions\"";
- // html += " :picker-options=\"{" +
- // ":firstDayOfWeek=firstDayOfWeek," +
- // ":disabledDate=\"disabledDateFun\""+
- // "}\"";
- this.options.elEvents.forEach(function(k){
- html += " @"+k+"=\"$loadElEvent_"+k.camelCase()+"\"";
- });
- if (this.json.elProperties){
- Object.keys(this.json.elProperties).forEach(function(k){
- if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
- }, this);
- }
- if (this.json.elStyles) html += " :style=\"elStyles\"";
- html += ">";
- if (this.json.vueSlot) html += this.json.vueSlot;
- html += "</el-date-picker>";
- return html;
- },
- getInputData: function(){
- var data = this.json[this.json.$id];
- if( data === null ){
- if( ["monthrange","daterange"].contains(this.json.selectType) ) {
- return [];
- }else if( ["dates"].contains(this.json.selectType) ){
- return [];
- }else{
- return "";
- }
- }
- return this.json[this.json.$id];
- },
- getExcelData: function(){
- var value = this.getData();
- return o2.typeOf(value) === "array" ? value.join(", ") : value;
- },
- setExcelData: function(data){
- var arr = this.stringToArray(data);
- this.excelData = arr;
- var value = arr.length === 0 ? arr[0] : arr;
- this.setData(value, true);
- },
- formatDate: function (date, format) {
- var o = {
- 'M+': date.getMonth() + 1, // 月份
- 'd+': date.getDate(), // 日
- 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
- 'H+': date.getHours(), // 小时
- 'm+': date.getMinutes(), // 分
- 's+': date.getSeconds(), // 秒
- 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
- d: date.getDay(),
- S: date.getMilliseconds(), // 毫秒
- a: date.getHours() < 12 ? 'am' : 'pm', // 上午/下午
- A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
- };
- if (/(y+)/.test(format)) {
- format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
- }
- if (/(W+)/.test(format)) {
- o['W+'] = this.weekNumberOfDate(date);
- }
- for (let k in o) {
- if (new RegExp('(' + k + ')').test(format)) {
- format = format.replace(
- RegExp.$1,
- RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
- );
- }
- }
- return format;
- },
- weekNumberOfDate: function ( date ){
- var target = new Date(date.getTime());
- var dayNumber = ( 7 + date.getDay() - parseInt( (this.json.firstDayOfWeek || 0) ) ) % 7;
- target.setDate(target.getDate() - dayNumber + 3);
- var firstThursday = target.valueOf();
- target.setMonth(0, 1);
- if (target.getDay() !== 4) {
- target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
- }
- return 1 + Math.ceil((firstThursday - target) / 608400000); // 604800000 = 7 * 24 * 3600 * 1000
- }
- });
|