centaline-data-driven 1.5.68 → 1.5.69

package/src/centaline/dynamicCalendar/src/dynamicCalendar.vue

@@ -0,0 +1,623 @@
+<template>
+	<div>
+		<ct-searchScreen ref="screen" :api="searchConditionApi" :screenPara="apiParam" @search="search"  @loaded="screenLoaded"
+      @clickHandler="rolRouterClickHandler" style="margin-bottom: 10px;"></ct-searchScreen>
+
+	<div class="canlendar" :style="getCalerndarStyle" :class="[theme ? theme : '']">
+		<div class="canlendar_title">
+			<div v-if="!$slots.header" class="flex flex-center">
+				<!-- <div @click="prevYear" class="canlendar_button">上一年</div> -->
+				<div @click="prevMonth" class="canlendar_button">上一月</div>
+				<div class="year">
+					<span>{{ this.year }}</span>
+					年 -
+					<span>{{ this.month >= 10 ? this.month : '0' + this.month }}</span>
+					月
+				</div>
+				<div @click="nexMonth" class="canlendar_button">下一月</div>
+				<!-- <div @click="nextYear" class="canlendar_button">下一年</div> -->
+			</div>
+			<slot name="header"></slot>
+		</div>
+		<div class="canlendar_content flex flex-wrap">
+			<div class="header-item flex flex-column flex-center" v-for="item in weekArr">
+				<div>{{ item }}</div>
+			</div>
+			<div
+				v-for="item in dayArr"
+				:class="[
+					item.isCurrentMonth ? '' : 'item-disabled',
+					item.isSelected && !item.isToday ? 'canlendar_selected' : '',
+					item.isToday ? 'canlendar_today' : '',
+					'item canlendar_item flex flex-column flex-center',
+				]"
+				@click="dateClick(item)"
+			>
+				<div>{{ item.day }}</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script>
+import dynamicElement from '../../mixins/dynamicElement'
+import dynamicSearchScreen from '../../dynamicSearchList/src/dynamicSearchScreen.vue';
+import moment from 'moment';
+export default {
+  name: 'ct-calendar',
+  mixins: [dynamicElement],
+  // 注册局部组件
+  components: {
+    'ct-searchScreen': dynamicSearchScreen
+  },
+	props: {
+		width: {
+			type: [Number, String],
+			default: '100%',
+		},
+		height: {
+			type: [Number, String],
+			default: '',
+		},
+		theme: {
+			type: String,
+			default: '',
+		},
+		autoMonthSwitch: {
+			type: Boolean,
+			default: true,
+		},
+    vmodel: Object,
+    api: String,
+	searchConditionApi: String,
+  searchDataApi: String,
+	apiParam: {
+      type: Object,
+      default: () => { }
+    }
+	},
+	computed: {
+		getCalerndarStyle() {
+			return {
+				width: this.width,
+				height: this.height,
+			};
+		},
+	},
+	created() {
+
+	},
+  mounted() {     
+    
+    },
+	data() {
+		let year = moment().year();
+		let month = moment().month() + 1;
+		let day = moment().date();
+		return {
+      loaded: {
+          screenLoaded: false,
+        },
+      currentTime:'',
+			today: moment().format('YYYY-MM-DD'),
+			year: year,
+			month: month,
+			day: day,
+			dayArr: [],
+			weekArr: ['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+		};
+	},
+	methods: {
+    screenLoaded(defaultSearch) {
+      var self = this;
+      self.loaded.screenLoaded = true;
+        self.loaderObj.Canlendar(self.searchDataApi,self.$refs.screen.model,defaultSearch,self.load);
+        self.$emit('loaded', self.$refs.screen.model);
+      },
+    initdate(){
+      if (this.currentTime && moment(this.currentTime).isValid()) {
+			this.day = moment(this.currentTime).date();
+			this.month = moment(this.currentTime).month() + 1;
+			this.year = moment(this.currentTime).year();
+			this.today = this.currentTime;
+		}
+		this.build();
+    },
+		search() {
+      var self = this;
+      if (typeof self.searchDataApi !== 'undefined') {
+        self.loaderObj.Canlendar(self.searchDataApi,self.$refs.screen.model,this.$refs.screen.model.defaultSearch,self.load);
+        self.initdate();
+        }
+    }, 
+    load(data) {
+      var self = this;
+      self.model = data;
+        if (self.model.listData.length > 0) {
+          self.currentTime = self.model.listData[0].date;
+        this.model.value = 0;
+      }
+      },
+	rolRouterClickHandler(field) {
+      this.routerClickHandler(field, {}, "");
+    },
+    routerClickHandler(field, submitData, action) {
+      let self = this;
+      action = action || field.action;
+      var clickAcion = function () {
+        //若不是客户端方法，则直接访问接口
+        if (!field.isClientFuntion) {
+          // 外部框架tab页打开
+          if (field.isFormPageInTab) {
+            submitData = field.getActionPara(submitData).para;
+            if (field.pageStyle) {
+              submitData.pageStyle = field.pageStyle;
+            }
+            self.$emit('doClosePopoverHandle');
+            self.$common.getDataDrivenOpts().handler.openTab(action, submitData, field.pageTitle, self.model, field.dialogWidth);
+          }
+          else if (field.isSearchPageInTab) {// 外部框架tab页打开
+            submitData = field.getActionPara(submitData).para;
+            self.$emit('doClosePopoverHandle');
+            self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
+          }
+          else if (field.isBrowserNewTab) {// 浏览器打开
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            window.open(action + query, "_blank");
+          }
+          else if (field.isOpenUrlInBrowse) {// 浏览器打开
+            window.open(submitData[field.submitFormField], "_blank");
+          }
+          else if (field.isSeeVoice) {//看视频
+            self.$common.browseVideo(field, submitData);
+          }
+          else if (field.isBrowseAttachment) {//浏览附件
+            var mediaviewpagetype=(field.isFormPageInTab||field.isSearchPageInTab)?2:0; 
+            var MediaAlbum = [
+              { albumName: self.model.title || "媒体", medias: [] },
+            ];
+            if (field.action) {
+              var callback = function (data) {
+               if(typeof data =='object'&&data.mediaAlbums)
+                {
+                MediaAlbum = data.mediaAlbums;
+                }
+                else
+                {
+                  MediaAlbum[0].medias = data;
+                }
+                self.$common.viewerfile(field.pageTitle, MediaAlbum, 0, 0,mediaviewpagetype);
+              }
+              self.model.getAction(field.action, submitData, callback);
+            }
+            else {
+              submitData.mediaData.forEach((v) => {
+                MediaAlbum[0].medias.push(v);
+              });
+              self.$common.viewerfile(field.pageTitle, MediaAlbum, 0, 0,mediaviewpagetype);
+            }
+          }
+          else if (field.isUrlInLayer) {//URL页面（弹层）
+            var dialogOption = {
+              title: field.pageTitle,
+              pane: self.$common.getParentPane(self),
+              content: [
+                {
+                  component: "ct-iframe",
+                  attrs: {
+                    src: submitData[field.submitListField],
+                    width: field.dialogWidth + "px",
+                    height: field.dialogHeight + "px",
+                  },
+                  on: {
+                    new(id) {
+                      field.flagAddRowAfterAction = true;
+                      field.flagFreshCurrentRow = false;
+                      var res = { responseData: { content: id } };
+                      self.updateCurrentRow(field, res);
+                      self.$forceUpdate();
+                      self.$refs.footer.$forceUpdate();
+                      self.$common.closeDialog(dialogOption.dialog);
+                    },
+                    update() {
+                      field.flagAddRowAfterAction = false;
+                      field.flagFreshCurrentRow = true;
+                      self.updateCurrentRow(field, null);
+                      self.$common.closeDialog(dialogOption.dialog);
+                    },
+                    delete() {
+                      var res = {};
+                      res.notification = 4;
+                      res.content = self.model.listData[self.model.selectIndex][self.model.primaryKey];
+                      self.model.doAction(res);
+                      self.$common.closeDialog(dialogOption.dialog);
+                    },
+                    refreshParent() {
+                      self.getPage(1);
+                      self.$common.closeDialog(dialogOption.dialog);
+                    },
+                    closeDialog() {
+                      self.$common.closeDialog(dialogOption.dialog);
+                    },
+                  },
+                },
+              ],
+            };
+            self.$common.openDialog(dialogOption);
+          }
+          else if (field.isExport || field.flagAsync) {
+            if (field.flagAsync) {
+              field.doAction(submitData, (res) => {
+                if (res.content && res.content.action) {
+                  var dialogOption = {
+                    title: field.pageTitle || field.label,
+                    content: [{
+                      component: 'ct-progress',
+                      attrs: {
+                        progressAction: res.content.action,
+                        progressKey: res.content.key,
+                        progressType: field.isExport ? 'export' : 'import',
+                        width: '350px',
+                        height: '165px'
+                      },
+                      on: {
+                        finished() {
+                          self.$common.closeDialog(dialogOption.dialog);
+                          self.getPage(1);
+                        },
+                        error(data) {
+                          self.$common.closeDialog(dialogOption.dialog);
+                          self.$message({
+                            message: data.rtnMsg,
+                            type: 'warning',
+                            showClose:true,
+                          });
+                        }
+                      }
+                    }]
+                  };
+                  self.$common.openDialog(dialogOption);
+                }
+              });
+            }
+            else {
+              if (field.action.indexOf("http://") === 0 || field.action.indexOf("https://") === 0) {
+                window.open(field.action, "_blank");
+              }
+              else {
+                field.doAction(submitData, (data) => {
+                  if (data.content) {
+                    if (data.content.indexOf("http://") === 0 || data.content.indexOf("https://") === 0) {
+                      window.open(data.content, "_blank");
+                    }
+                    else {
+                    }
+                  }
+                });
+              }
+            }
+          }
+          else {
+            //self.operationLoading = true;
+
+            //Form
+            if (field.isOpenForm) {
+              var dialogOption = {
+                title: field.pageTitle,
+                pane: self.$common.getParentPane(self),
+                content: [
+                  {
+                    component: field.navToNewPageName,
+                    attrs: {
+                      //source: data.content,
+                      api: action,
+                      apiParam: field.getActionPara(submitData).para,
+                      showTitle: false,
+                      width: field.dialogWidth + "px",
+                      height: field.dialogHeight + "px",
+                    },
+                    on: {
+                      submit(ev) {
+                        if (ev.responseData.notification == 24) {
+                          //更新列
+                          self.model.selectIndex = 0;
+                          if (self.currentRow !== null) {
+                            for (var i = 0; i < self.currentRow.children.length; i++) {
+                              self.currentRow.children[i].classList.remove("select");
+                            }
+                          }
+                          if (typeof self.$refs.tableParent !== "undefined") {
+                            self.$refs.tableParent.scrollTop = 0;
+                            self.$refs.tableParent.scrollLeft = 0;
+                            self.scrollTop = 0;
+                            self.scrollLeft = 0;
+                          }
+                          self.$forceUpdate();
+                          self.$nextTick(() => {
+                            if (self.$refs.tableParent.scrollHeight <= self.$refs.tableParent.offsetHeight) {
+                              self.tableLoading = true;
+                              self.model.nextPage(next);
+                            }
+                            else {
+                              self.tableLoading = false;
+                              self.rowColorChange();
+                              self.resetScroll();
+                              self.calculatingRowHeight();
+                              self.getScrollAttr();
+                            }
+                            self.setfixedSize();
+                          });
+                          self.loaderObj.SearchTable(self.api, self.load, self.model.searchModel, true);
+                          self.$common.closeDialog(dialogOption.dialog);
+                        }
+                        else {
+                          if (!field.flagFreshCurrentRow && !field.flagAddRowAfterAction) {
+                            self.model.doAction(ev);
+                          }
+                          self.$forceUpdate();
+                          self.$refs.footer.$forceUpdate();
+                          self.$common.closeDialog(dialogOption.dialog);
+                          self.updateCurrentRow(field, ev);
+                        }
+                      },
+                      refreshParent() {
+                        self.getPage(1);
+                        self.$common.closeDialog(dialogOption.dialog);
+                      },
+                      closeDialog() {
+                        // self.updateCurrentRow(field);
+                      },
+                    },
+                  },
+                ],
+              };
+              self.$common.openDialog(dialogOption);
+            }
+            //SearchList
+            else if (field.isOpenList) {
+              var dialogOption = {
+                title: field.pageTitle,
+                pane: self.$common.getParentPane(self),
+                content: [
+                  {
+                    component: field.navToNewPageName,
+                    attrs: {
+                      searchConditionApi: field.actionForSearchLayout,
+                      searchDataApi: field.actionForSearch,
+                      apiParam: field.getActionPara(submitData).para,
+                      width: field.dialogWidth + "px",
+                      height: field.dialogHeight + "px",
+                    },
+                    on: {
+                      refreshParent() {
+                        self.getPage(1);
+                        self.$common.closeDialog(dialogOption.dialog);
+                      },
+                      closeDialog() {
+                        self.updateCurrentRow(field);
+                      },
+                    },
+                  },
+                ],
+              };
+              self.$common.openDialog(dialogOption);
+            }
+            //Tabs
+            else if (field.isOpenTabs) {
+              var dialogOption = {
+                title: field.pageTitle,
+                pane: self.$common.getParentPane(self),
+                content: [
+                  {
+                    component: field.navToNewPageName,
+                    attrs: {
+                      searchConditionApi: field.actionForSearchLayout,
+                      searchDataApi: field.actionForSearch,
+                      apiParam: field.getActionPara(submitData).para,
+                      width: field.dialogWidth + "px",
+                      height: field.dialogHeight + "px",
+                    },
+                    on: {},
+                  },
+                ],
+              };
+              self.$common.openDialog(dialogOption);
+            }
+            else {
+              self.operationLoading = true;
+              field.doAction(submitData, (data) => {
+                self.operationLoading = false;
+                if (!field.flagFreshCurrentRow && !field.flagAddRowAfterAction) {
+                  self.model.doAction({ responseData: data });
+                  self.$emit("refreshRowHandle");
+                }
+                self.$forceUpdate();
+                self.$refs.footer.$forceUpdate();
+                self.updateCurrentRow(field, data);
+              });
+            }
+          }
+        }
+        //执行客户端脚本
+        else {
+          // let parm={submitData:submitData,field:field}
+          // self.$common.excuteFunStr.call(self.model.scripts, field.action,parm);
+          // var fun = self.model.scripts.formData[action];
+          // fun(submitData,field);
+          let title = field.pageTitle == undefined ? field.label : field.pageTitle;
+          submitData.actionType = field.actionType;
+          var fun = self.$common.getDataDrivenOpts().handler[action];
+          fun(submitData, title, self.$parent);
+        }
+      };
+
+      if (field.alert) {
+        self.$common.confirm(field.alertMsg, field.alertCaption, {
+          confirmButtonText: field.alertOKButtonText,
+          cancelButtonText: field.alertCancelButtonText,
+          //type: 'warning'
+          center: field.alertCenter,
+        })
+          .then(() => {
+            clickAcion();
+          })
+          .catch(() => { });
+      }
+      else {
+        clickAcion();
+      }
+    },
+		prevMonth() {
+			this.build(this.year, this.month - 1, this.day);
+		},
+		nexMonth() {
+			this.build(this.year, this.month + 1, this.day);
+		},
+		prevYear() {
+			this.build(this.year - 1, this.month, this.day);
+		},
+		nextYear() {
+			this.build(this.year + 1, this.month, this.day);
+		},
+		backToToday() {
+			let year = this.today.split('-')[0];
+			let month = this.today.split('-')[1];
+			let day = this.today.split('-')[2];
+			this.build(year, month, day);
+		},
+   
+		change() {
+			let fullDate = moment(
+				this.year + '-' + this.month + '-' + this.day,
+				'YYYY-MM-DD'
+			).format();
+			this.$emit('change', fullDate);
+		},
+		dateClick(item) {
+			if (this.autoMonthSwitch) {
+				//点击上月日期
+				if (!item.isCurrentMonth && item.month < this.month) {
+					this.prevMonth();
+					return;
+				}
+				//点击下月日期
+				if (!item.isCurrentMonth && item.month > this.month) {
+					this.nexMonth();
+					return;
+				}
+			}
+			this.dayArr = this.dayArr.map(day => {
+				day.isSelected = false;
+				if (day.day === item.day && day.month === item.month) {
+					day.isSelected = true;
+				}
+				return day;
+			});
+			this.$emit('dateClick', item);
+			this.$emit(
+				'update:currentTime',
+				moment(this.year + '-' + this.month + '-' + item.day, 'YYYY-MM-DD').format(
+					'YYYY-MM-DD'
+				)
+			);
+		},
+		build: function (year, month, day,labelName) {
+			year = year || this.year;
+			month === 0 ? (month = -1) : (month = month || this.month);
+			day = day || this.day;
+
+			if (month <= 0) {
+				year = year - 1;
+				month = 12;
+			}
+
+			if (month > 12) {
+				year = year + 1;
+				month = 1;
+			}
+
+			this.year = year;
+			this.month = month;
+			this.day = day;
+      this.labelName = labelName;
+
+			//获取当前年月可用天数
+			let days = moment(year + '-' + month, 'YYYY-MM').daysInMonth();
+			//计算当前月份第一天是周几
+			let firstDay = moment(year + '-' + month + '-01', 'YYYY-MM-DD').day();
+			this.dayArr = [];
+			//构建日历数组
+			//构建上个月的日期
+			for (let i = 1; i <= firstDay; i++) {
+				//获取上个月的天数
+				let lastMonthDays = moment(year + '-' + month, 'YYYY-MM')
+					.subtract(1, 'months')
+					.daysInMonth();
+				//计算上个月的日期
+				let lastMonthDay = lastMonthDays - firstDay + i ;
+				//前面补空
+				this.dayArr.push({
+					day: lastMonthDay,
+					month: month - 1,
+					isCurrentMonth: false,
+				});
+			}
+			//构建当前月份的日期
+			for (let i = 1; i <= days; i++) {
+				let fullDate = moment(year + '-' + month + '-' + i, 'YYYY-MM-DD').format(
+					'YYYY-MM-DD'
+				);
+				let isToday = false;
+				if (fullDate === this.today) {
+					isToday = true;
+				}
+				if (i === day && isToday) {
+					this.dayArr.push({
+						month: month,
+						day: i,
+						isCurrentMonth: true,
+						isSelected: true,
+						isToday: true,
+					});
+				} else {
+					this.dayArr.push({
+						month: month,
+						day: i,
+						isCurrentMonth: true,
+					});
+				}
+			}
+			//构建下个月的日期
+			let nextMonthDay = 1;
+			while (this.dayArr.length < 35) {
+				this.dayArr.push({
+					day: nextMonthDay,
+					month: month + 1,
+					isCurrentMonth: false,
+				});
+				nextMonthDay++;
+			}
+
+			if (this.dayArr.length > 35) {
+				//构建下个月的日期
+				let nextMonthDay = 1;
+				while (this.dayArr.length < 42) {
+					this.dayArr.push({
+						day: nextMonthDay,
+						month: month + 1,
+						isCurrentMonth: false,
+					});
+					nextMonthDay++;
+				}
+			}
+			this.change();
+		},
+	},
+};
+</script>
+
+<style>
+@import './index.css';
+</style>