sone-ui-component-3.2.4 2.1.42 → 2.1.44

package/package.json

@@ -1,6 +1,6 @@
   {
   "name": "sone-ui-component-3.2.4",
-  "version": "2.1.42",
+  "version": "2.1.44",
   "private": false,
   "main": "lib/sone-ui.common.js",
   "files": [

package/packages/form/src/mainNoDrag.vue

@@ -186,10 +186,7 @@
 						</template>
 
 						<!-- 日期范围、日期时间范围 -->
-						<template 
-							v-if="(item.layoutType === 'daterange' ||
-							item.layoutType === 'datetimerange' ) && 
-							form.hasOwnProperty(item.fieldName)">
+						<template v-if="['daterange', 'datetimerange', 'monthrange'].includes(item.layoutType) && form.hasOwnProperty(item.fieldName)">
 							<el-date-picker
 								:clearable="item.hasOwnProperty('clearable') ? item.clearable : true" 
 								v-model="form[item.fieldName]" 
@@ -201,6 +198,7 @@
 								:disabled="item.disabled"
 								:value-format="item.valueFormat"
 								:default-time="item.defaultTime"
+								:picker-options="item.layoutType === 'monthrange'? monthPickerOptions : pickerOptions"
 								@focus="focusFn(item.fieldName)"
 								@change="val => updateDate(val, item)"
 							></el-date-picker>
@@ -305,6 +303,56 @@ export default {
 	data() {
 		return {
 			isBottomCollapse: false,
+			monthPickerOptions: {
+				shortcuts: [{
+					text: '本月',
+					onClick(picker) {
+						picker.$emit('pick', [new Date(), new Date()]);
+					}
+				}, {
+					text: '今年至今',
+					onClick(picker) {
+						const end = new Date();
+						const start = new Date(new Date().getFullYear(), 0);
+						picker.$emit('pick', [start, end]);
+					}
+				}, {
+					text: '最近六个月',
+					onClick(picker) {
+						const end = new Date();
+						const start = new Date();
+						start.setMonth(start.getMonth() - 6);
+						picker.$emit('pick', [start, end]);
+					}
+				}]
+			},
+			pickerOptions: {
+				shortcuts: [{
+					text: '最近一周',
+					onClick(picker) {
+						const end = new Date();
+						const start = new Date();
+						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+						picker.$emit('pick', [start, end]);
+					}
+				}, {
+					text: '最近一个月',
+					onClick(picker) {
+						const end = new Date();
+						const start = new Date();
+						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+						picker.$emit('pick', [start, end]);
+					}
+				}, {
+					text: '最近三个月',
+					onClick(picker) {
+						const end = new Date();
+						const start = new Date();
+						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+						picker.$emit('pick', [start, end]);
+					}
+				}]
+			},
 		}
   },
   methods: {
@@ -461,7 +509,37 @@ export default {
       this.$refs['sone-form'].$el.scrollTop = 0;
 			this.isBottomCollapse = !this.isBottomCollapse;
 			this.$emit('toggle', this.isBottomCollapse);
-		}
+		},
+
+		// pickerOptions(){
+		// 	return {
+		// 		shortcuts: [{
+		// 			text: '最近一周',
+		// 			onClick(picker) {
+		// 				const end = new Date();
+		// 				const start = new Date();
+		// 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+		// 				picker.$emit('pick', [start, end]);
+		// 			}
+		// 		}, {
+		// 			text: '最近一个月',
+		// 			onClick(picker) {
+		// 				const end = new Date();
+		// 				const start = new Date();
+		// 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+		// 				picker.$emit('pick', [start, end]);
+		// 			}
+		// 		}, {
+		// 			text: '最近三个月',
+		// 			onClick(picker) {
+		// 				const end = new Date();
+		// 				const start = new Date();
+		// 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+		// 				picker.$emit('pick', [start, end]);
+		// 			}
+		// 		}]
+		// 	}
+		// }
   },
 };
 </script>

package/packages/tree/src/main.vue

@@ -9,7 +9,10 @@
     <!-- 展示类型 -->
     <div class="sone-tree" v-if="type === 'normal'">
     <div v-if="lineDirection === 'left'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
-      <div class="show-line-box" @click="onShow(2)" :style="showStyle2"></div>
+      <div class="show-line-box" @click="onShow(2)">
+        <img v-show="show" :src="leftImg"/>
+        <img v-show="!show" :src="rightImg"/>
+      </div>
     </div>
     <div class="tree-wrap" ref="menu" v-show="show" :style="'width:' + defaultWidth + 'px'">
       <div class="sone-tree-title">
@@ -59,13 +62,19 @@
       </div>
     </div>
     <div v-if="lineDirection === 'right'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
-      <div class="show-line-box" @click="onShow(1)" :style="showStyle"></div>
+      <div class="show-line-box" @click="onShow(1)">
+        <img v-show="show" :src="leftImg"/>
+        <img v-show="!show" :src="rightImg"/>
+      </div>
     </div>
     </div>
     <!-- 操作类型 -->
     <div class="sone-tree" v-else >
       <div v-if="lineDirection === 'left'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
-        <div class="show-line-box" @click="onShow(2)" :style="showStyle2"></div>
+        <div class="show-line-box" @click="onShow(2)">
+          <img v-show="show" :src="leftImg"/>
+          <img v-show="!show" :src="rightImg"/>
+        </div>
       </div>
       <div class="tree-wrap" ref="menu" v-show="show" :style="'width:' + defaultWidth + 'px'" >
         <div class="sone-tree-title">
@@ -157,7 +166,10 @@
 
       </div>
       <div v-if="lineDirection === 'right'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
-        <div class="show-line-box" @click="onShow(1)" :style="showStyle"></div>
+        <div class="show-line-box" @click="onShow(1)">
+          <img v-show="show" :src="leftImg"/>
+          <img v-show="!show" :src="rightImg"/>
+        </div>
       </div>
     </div>
   </div>
@@ -165,6 +177,8 @@
 
 <script>
 // import { deepClone } from '../../../../src/utils/util';
+import leftImg from "../img/left.png"
+import rightImg from "../img/right.png"
 export const getObjType = obj => {
   var toString = Object.prototype.toString
   var map = {
@@ -281,6 +295,8 @@ export default {
   },
   data() {
     return {
+      leftImg,
+      rightImg,
       show: true,
       showStyle: "border-right: 6px solid #019bee;transform: translate(-100%,-50%)",
       showStyle2: "border-left: 6px solid #019bee;transform: translate(0,-50%)",

package/src/index.js

@@ -57,7 +57,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.1.42',
+  version: '2.1.44',
   locale: locale.use,
   i18n: locale.i18n,
   install,

package/src/styles/form.scss

@@ -191,8 +191,8 @@
   
   .more-line {
     width: 100%;
-    height: 8px;
-    border-top: 1px solid #009bee;
+    height: 14px;
+    // border-top: 1px solid #009bee;
     background: #fff;
     cursor: pointer;
     position: absolute;
@@ -201,8 +201,11 @@
   }
   .more-line::before {
     content: "";
-    border: 6px solid transparent;
-    border-top-color: #009bee;
+    // border: 6px solid transparent;
+    // border-top-color: #009bee;
+    width: 28px;
+    height: 14px;
+    background-image:url('../assets/img/down.png');
     position: absolute;
     left: calc(50% - 5px);
     top: 0px;
@@ -210,14 +213,17 @@
   }
   .more-collapse{
     border-top: none !important;
-    border-bottom: 1px solid #009bee;
+    // border-bottom: 1px solid #009bee;
     background: unset;
     position: sticky;
   }
   .more-collapse::before {
     content: "";
-    border: 6px solid transparent;
-    border-bottom-color: #009bee;
+    // border: 6px solid transparent;
+    // border-bottom-color: #009bee;
+    width: 28px;
+    height: 14px;
+    background-image:url('../assets/img/up.png');
     position: absolute;
     z-index: 10;
     left: calc(50% - 5px);

package/src/styles/tree.scss

@@ -76,14 +76,18 @@
     .show-line{
         position: relative;
         height: 100%;
-        border-right:1px solid #019bee;
+        border-right:1px solid #fff;
+        width: 18px;
+        background: #fff;
+        box-shadow: 10px 0 5px -3px rgba(0, 0, 0, 0.12);
         .show-line-box{
+            border: 1px solid red;
             width: 0;
             height: 0;
             cursor: pointer;
             border: 6px solid transparent;
             position: absolute;
-            top: 50%;
+            top: 49%;
         }
     }
 }