@ajaxjs/ui 1.1.8 → 1.2.0

package/src/widget/Resize.vue

@@ -0,0 +1,104 @@
+<template>
+  <!-- 拖拉缩放效果 -->
+  <div class="resize-box">
+    <div class="rRightDown" @mousedown="start($event, rightDown)"> </div>
+    <div class="rLeftDown" @mousedown="start($event, leftDown)"> </div>
+    <div class="rRightUp" @mousedown="start($event, rightUp)"> </div>
+    <div class="rLeftUp" @mousedown="start($event, leftUp)"> </div>
+    <div class="rRight" @mousedown="start($event, right)"> </div>
+    <div class="rLeft" @mousedown="start($event, left)"> </div>
+    <div class="rDown" @mousedown="start($event, down)"></div>
+    <div class="rUp" @mousedown="start($event, up)"> </div>
+  </div>
+</template>
+
+<script lang="ts" src="./Resize.ts"></script>
+
+<style lang="less" scoped>
+.rRightDown,
+.rLeftDown,
+.rLeftUp,
+.rRightUp,
+.rRight,
+.rLeft,
+.rUp,
+.rDown {
+  position: absolute;
+  background: #c00;
+  width: 7px;
+  height: 7px;
+  z-index: 5;
+  font-size: 0;
+}
+
+.rLeftDown, .rRightUp {
+  cursor: ne-resize;
+}
+
+.rRightDown, .rLeftUp {
+  cursor: nw-resize;
+}
+
+.rRight, .rLeft {
+  cursor: e-resize;
+}
+
+.rUp, .rDown {
+  cursor: n-resize;
+}
+
+.rLeftDown {
+  left: -4px;
+  bottom: -4px;
+}
+
+.rRightUp {
+  right: -4px;
+  top: -4px;
+}
+
+.rRightDown {
+  right: -4px;
+  bottom: -4px;
+  background-color: 0f;
+}
+
+.rLeftUp {
+  left: -4px;
+  top: -4px;
+}
+
+.rRight {
+  right: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.rLeft {
+  left: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.rUp {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.rDown {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.resize-box {
+  border: 1px solid gray;
+  width: 100px;
+  height: 60px;
+  top: 150px;
+  left: 550px;
+  background: #fff;
+  position: absolute;
+}
+</style>

package/src/widget/TreeSelector.vue

@@ -0,0 +1,4 @@
+<!-- 下拉分类 -->
+<template>
+
+</template>

package/src/widget/calendar/BetweenDate.vue

@@ -0,0 +1,63 @@
+<template>
+  <form action="." method="GET" class="dateRange" @submit="valid">
+    <aj-form-calendar-input
+      :date-only="true"
+      :position-fixed="true"
+      placeholder="起始时间"
+      field-name="startDate"
+    ></aj-form-calendar-input>
+    -
+    <aj-form-calendar-input
+      :date-only="true"
+      :position-fixed="true"
+      placeholder="截至时间"
+      field-name="endDate"
+    ></aj-form-calendar-input>
+    <button class="aj-btn">按时间筛选</button>
+  </form>
+</template>
+
+<script lang="ts">
+/**
+ * 起始时间、截止时间的范围选择
+ */
+export default {
+  props: {
+    isAjax: { type: Boolean, default: true }, // 是否 AJAX 模式
+  },
+  methods: {
+    valid(this: Vue, ev: Event): void {
+      let start = (<HTMLInputElement>(
+          this.$el.querySelector("input[name=startDate]")
+        )).value,
+        end = (<HTMLInputElement>this.$el.querySelector("input[name=endDate]"))
+          .value;
+
+      if (!start || !end) {
+        alert("输入数据不能为空");
+        ev.preventDefault();
+        return;
+      }
+
+      if (new Date(start) > new Date(end)) {
+        alert("起始日期不能晚于结束日期");
+        ev.preventDefault();
+        return;
+      }
+
+      //@ts-ignore
+      if (this.isAjax) {
+        ev.preventDefault();
+        let grid: any = this.$parent.$parent;
+
+        Object.assign(grid.$refs.pager.extraParam, {
+          startDate: start,
+          endDate: end,
+        });
+
+        grid.reload();
+      }
+    },
+  },
+};
+</script>

package/src/widget/calendar/Calendar.less

@@ -0,0 +1,210 @@
+// 日历选择器
+.aj-form-calendar {
+	font-family        : Verdana;
+	font-size          : .8rem;
+	background-color   : white;
+	border             : 1px solid lightgray;
+	border-radius      : 5px;
+	box-shadow         : 0 5px 10px rgba(0, 0, 0, 0.2);
+	text-align         : center;
+	width              : 320px;
+	-webkit-user-select: none;
+	-moz-user-select   : none;
+	user-select        : none;
+	padding            : 10px;
+	line-height        : 1.5em;
+
+	a {
+		color: #1e5494;
+		text-decoration: none;
+	}
+
+	.selectYearMonth {
+		float: right;
+		width: 100px;
+
+		div {
+			display: inline-block;
+		}
+	}
+
+	.showCurrentYearMonth {
+		text-align: left;
+		color     : lightgray;
+		font-size : 1.6rem;
+		padding   : 5% 0;
+	}
+
+	table {
+		width          : 100%;
+		border         : 0;
+		border-spacing : 0;
+		border-collapse: collapse;
+
+		thead {
+			tr {
+				color        : #acacac;
+				border-bottom: 1px solid lightgray;
+				margin-bottom: 15px;
+			}
+		}
+
+		td {
+			font-size       : .8rem;
+			padding         : .4rem;
+			letter-spacing  : 1px;
+			border          : 0;
+			background-color: white;
+			text-align      : center;
+
+			&.day {
+				cursor    : pointer;
+				transition: background-color 190ms ease-in-out;
+			}
+
+			&.onToday {
+				font-weight: bold;
+				color      : #C60;
+			}
+
+			&.onSelect {
+				font-weight: bold;
+			}
+
+			&.day:hover {
+				color           : darken(#e0ecf9, 50%);
+				background-color: #e9e9e9;
+			}
+		}
+	}
+
+	.idCalendarPre,
+	.idCalendarNext {
+		cursor       : pointer;
+		font-size    : 1.2rem;
+		text-align   : center;
+		border-radius: 3px;
+		padding      : 2px 5px;
+
+		&:hover {
+			background-color: #e9e9e9;
+		}
+	}
+
+	.idCalendarPre {
+		float: left;
+	}
+
+	.idCalendarNext {
+		float: right;
+	}
+
+	.btns {
+		position: absolute;
+		left    : 15px;
+		bottom  : 5px;
+
+		input[type=button] {
+			font-size: .8rem;
+			padding  : 2px 4px;
+			margin   : 1px;
+		}
+	}
+	.showTime{
+		margin-top: 5%;
+		select {
+			min-width:50px;
+			text-align: center;
+		}
+	}
+}
+
+// 日历 悬浮出现
+.aj-form-calendar-input {
+	position: relative;
+	width   : 125px;
+	line-height: 19px;
+
+	&.show-time {
+		width: 170px;
+	}
+
+	display: inline-block;
+
+	input[type=text] {
+		// .aj-input-base();
+		max-width: 100% ! important;
+		width    : 100% ! important;
+
+	}
+
+	.icon {
+		position              : absolute;
+		width                 : 17px;
+		height                : 16px;
+		right                 : 5px;
+		top                   : 6px;
+		opacity               : .6;
+		cursor                : pointer;
+		//		.menu {
+		//			color: #000;
+		//			position: absolute;
+		//			margin-left: 2px;
+		//			margin-top: 8px;
+		//			width: 17px;
+		//			height: 1px;
+		//			background-color: currentColor;
+		//			&:before {
+		//				content: '';
+		//				position: absolute;
+		//				top: -5px;
+		//				left: 0;
+		//				width: 17px;
+		//				height: 1px;
+		//				background-color: currentColor;
+		//			}
+		//
+		//			&:after {
+		//				content: '';
+		//				position: absolute;
+		//				top: 5px;
+		//				left: 0;
+		//				width: 17px;
+		//				height: 1px;
+		//				background-color: currentColor;
+		//			}
+		//		}
+	}
+
+	.aj-form-calendar {
+		z-index : 999999999;
+		display : none;
+		position: absolute;
+
+		&.positionFixed {
+			// 若父元素 overflow:hidden，则 position: absolute 不能完整显示，故 fixed
+			position: fixed;
+		}
+
+		right: -3px;
+		top  : 25px;
+	}
+
+	&:hover .aj-form-calendar,
+	.aj-form-calendar:hover {
+		display: block;
+
+		.icon {
+			opacity: .5;
+		}
+	}
+
+	&:hover .icon {
+		opacity: 1;
+	}
+
+	.selectYearMonth select {
+		min-width: 65px;
+		outline: none;
+	}
+}

package/src/widget/calendar/Calendar.ts

@@ -0,0 +1,167 @@
+/**
+ * 日期选择器
+ */
+export default {
+    props: {
+        showTime: Boolean // 是否显示时间，即“时分秒”
+    },
+    data() {
+        let date: Date = new Date;
+        return {
+            date: date,
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: 1
+        };
+    },
+    mounted(): void {
+        this.$options.watch.date.call(this);
+    },
+    watch: {
+        date(): void {
+            this.year = this.date.getFullYear();
+            this.month = this.date.getMonth() + 1;
+            this.render();
+        }
+    },
+    methods: {
+        /**
+         * 画日历
+         */
+        render(): void {
+            let arr: number[] = this.getDateArr(),// 用来保存日期列表
+                frag: DocumentFragment = document.createDocumentFragment();// 插入日期
+
+            while (arr.length) {
+                let row: HTMLTableRowElement = document.createElement("tr"); // 每个星期插入一个 tr
+
+                for (let i = 1; i <= 7; i++) { // 每个星期有7天
+                    let cell: HTMLTableCellElement = document.createElement("td");
+
+                    if (arr.length) {
+                        let d: number = arr.shift();
+
+                        if (d) {
+                            let text: string = this.year + '-' + this.month + '-' + d;
+                            cell.title = text;  // 保存日期在 title 属性
+                            cell.className = 'day day_' + text;
+                            cell.innerHTML = d + "";
+
+                            let on: Date = new Date(this.year, this.month - 1, d);
+
+                            // 判断是否今日
+                            if (isSameDay(on, this.date)) {
+                                cell.classList.add('onToday');
+                                // this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
+                            }
+                            // 判断是否选择日期
+                            // this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
+                        }
+                    }
+
+                    row.appendChild(cell);
+                }
+
+                frag.appendChild(row);
+            }
+
+            // 先清空内容再插入
+            let tbody = <HTMLElement>this.$el.querySelector("table tbody");
+            tbody.innerHTML = '';
+            tbody.appendChild(frag);
+        },
+
+        /**
+         * 获取指定的日期
+         * 
+         * @param dateType 
+         * @param month 
+         */
+        getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void {
+            let nowYear: number = this.date.getFullYear(),
+                nowMonth: number = this.date.getMonth() + 1; // 当前日期
+
+            switch (dateType) {
+                case 'preMonth':// 上一月
+                    this.date = new Date(nowYear, nowMonth - 2, 1);
+                    break;
+                case 'nextMonth':// 下一月
+                    this.date = new Date(nowYear, nowMonth, 1);
+                    break;
+                case 'setMonth':// 指定月份
+                    this.date = new Date(nowYear, month - 1, 1);
+                    break;
+                case 'preYear':// 上一年
+                    this.date = new Date(nowYear - 1, nowMonth - 1, 1);
+                    break;
+                case 'nextYear':// 下一年
+                    this.date = new Date(nowYear + 1, nowMonth - 1, 1);
+                    break;
+            }
+        },
+
+        /**
+         * 
+         * 
+         * @param querySelectoreven
+         */
+        setMonth(ev: Event): void {
+            let el: HTMLSelectElement = <HTMLSelectElement>ev.target;
+            this.getDate('setMonth', Number(el.selectedOptions[0].value));
+        },
+
+        /**
+         * 获取空白的非上月天数 + 当月天数
+         * 
+         * @param this 
+         */
+        getDateArr(): number[] {
+            let arr: number[] = [];
+
+            // 算出这个月1号距离前面的星期天有多少天
+            for (let i = 1, firstDay: number = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
+                arr.push(0);
+
+            // 这个月有多少天。用上个月然后设置日子参数为 0，就可以得到本月有多天
+            for (let i = 1, monthDay: number = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
+                arr.push(i);
+
+            return arr;
+        },
+
+        /**
+         * 获取日期
+         * 
+         * @param event 
+         */
+        pickDay(ev: Event): string {
+            let el: HTMLElement = <HTMLElement>ev.target,
+                date: string = el.title;
+            this.$emit('pickdate', date);
+
+            return date;
+        },
+
+        /**
+         * 
+         * @param event 
+         */
+        pickupTime(event: Event): void {
+            let hour: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.hour'),
+                minute: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.minute'),
+                time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
+
+            this.$emit('pick-time', time);
+        }
+    }
+};
+
+/**
+  * 判断两个日期是否同一日
+  * 
+  * @param d1 
+  * @param d2 
+  */
+function isSameDay(d1: Date, d2: Date): boolean {
+    return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
+}

package/src/widget/calendar/Calendar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="aj-form-calendar">
+    <div class="selectYearMonth">
+      <a href="###" @click="getDate('preYear')" class="preYear" title="上一年">	&#171; <!-- &lt; --></a>
+      <select @change="setMonth" v-model="month">
+        <option value="1">一月</option>
+        <option value="2">二月</option>
+        <option value="3">三月</option>
+        <option value="4">四月</option>
+        <option value="5">五月</option>
+        <option value="6">六月</option>
+        <option value="7">七月</option>
+        <option value="8">八月</option>
+        <option value="9">九月</option>
+        <option value="10">十月</option>
+        <option value="11">十一月</option>
+        <option value="12">十二月</option>
+      </select>
+      <a href="###" @click="getDate('nextYear')" class="nextYear" title="下一年"> &#187;<!-- &gt; --> </a>
+    </div>
+    <div class="showCurrentYearMonth">
+      <span class="showYear">{{year}}</span>/<span class="showMonth">{{month}}</span>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <td>日</td>
+          <td>一</td>
+          <td>二</td>
+          <td>三</td>
+          <td>四</td>
+          <td>五</td>
+          <td>六</td>
+        </tr>
+      </thead>
+      <tbody @click="pickDay"></tbody>
+    </table>
+    <div v-if="showTime" class="showTime">
+      时 <select class="hour aj-select">
+        <option v-for="n in 24" :key="n">{{n}}</option>
+      </select>
+      分 <select class="minute aj-select">
+        <option v-for="n in 61" :key="n">{{n - 1}}</option>
+      </select>
+      <a href="#" @click="pickupTime">选择时间</a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./Calendar.ts"></script>
+
+<style lang="less" scoped  src="./Calendar.less"></style>

package/src/widget/calendar/CalendarInput.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="aj-form-calendar-input" :class="{'show-time': showTime}" @mouseover="onMouseOver">
+    <div class="icon fa fa-calendar"></div>
+    <input :placeholder="placeholder" size="12" :name="fieldName" :value="date + (dateOnly ? '' : ' ' + time)" type="text" autocomplete="off" />
+    <aj-form-calendar ref="calendar" :show-time="showTime" @pick-date="recEvent" @pick-time="recTimeEvent">
+    </aj-form-calendar>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * 帶有 input 輸入框的
+ */
+export default {
+  data() {
+    return {
+      date: this.fieldValue,
+      time: "",
+    };
+  },
+  props: {
+    fieldName: { type: String, required: true }, // 表单 name，字段名
+    fieldValue: { type: String, required: false, default: "" },
+    dateOnly: { type: Boolean, required: false, default: true }, // 是否只处理日期，不考虑时间
+    showTime: { type: Boolean, required: false, default: false },
+    positionFixed: Boolean, // 是否采用固定定位
+    placeholder: { type: String, default: "请输入日期" }, // 提示文字
+  },
+  watch: {
+    fieldValue( n: string): void {
+      this.date = n;
+    },
+  },
+  mounted(): void {
+    if (this.positionFixed) {
+      let el: HTMLElement = <HTMLElement>this.$el.$(".aj-form-calendar");
+      el.classList.add("positionFixed");
+    }
+
+    // 2012-07-08
+    // firefox中解析 new Date('2012/12-23') 不兼容，提示invalid date 无效的日期
+    // Chrome下可以直接将其格式化成日期格式，且时分秒默认为零
+    // var arr = date.split('-'), now = new Date(arr[0], arr[1] - 1, arr[2],
+    // " ", "", " ");
+    if (this.fieldValue) {
+      let arr: string = this.fieldValue.split(" ")[0],
+        _arr = arr.split("-");
+      // @ts-ignore
+      this.$refs.calendar.date = new Date(arr[0],arr[1] - 1, arr[2]," ", "", " ");
+    }
+  },
+  methods: {
+    recTimeEvent(time: string): void {
+      this.time = time;
+    },
+    recEvent(date: string): void {
+      this.date = date.trim();
+    },
+    onMouseOver(ev: Event): void {
+      if (this.positionFixed) {
+        let el: HTMLElement = <HTMLElement>ev.currentTarget,
+          b: DOMRect = el.getBoundingClientRect(),
+          c: HTMLElement = <HTMLElement>this.$el.$(".aj-form-calendar");
+
+        c.style.top = b.top + el.clientHeight - 0 + "px";
+        c.style.left = b.left - 0 + 0 + "px";
+      }
+    },
+  },
+};
+</script>