UP 1.0.4

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "SCUI-Admin",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",

public/json/user.json

@@ -36,6 +36,14 @@
 							"title": "过滤器"
 						},
 						"component": "vab/filterBar"
+					},
+					{
+						"path": "/vab/print",
+						"name": "print",
+						"meta": {
+							"title": "打印"
+						},
+						"component": "vab/print"
 					}
 				]
 			},

src/components/scEcharts/index.vue

@@ -6,6 +6,7 @@
 	import * as echarts from 'echarts';
 	import T from './echarts-theme-T.js';
 	echarts.registerTheme('T', T);
+	const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
 	
 	export default {
 		...echarts,
@@ -17,7 +18,17 @@
 			option: { type: Object, default: () => {} }
 		},
 		data() {
-			return {}
+			return {
+				myChart: null
+			}
+		},
+		watch: {
+			option: {
+				deep:true,
+				handler (v) {
+					unwarp(this.myChart).setOption(v);
+				}
+			}
 		},
 		computed: {
 			myOptions: function() {
@@ -29,9 +40,10 @@
 		},
 		methods: {
 			draw(){
-				let myChart = echarts.init(this.$refs.scEcharts, 'T');
+				var myChart = echarts.init(this.$refs.scEcharts, 'T');
 				myChart.setOption(this.myOptions);
-				window.addEventListener('resize', () => myChart.resize() );
+				this.myChart = myChart;
+				window.addEventListener('resize', () => myChart.resize());
 			}
 		}
 	}

src/config/index.js

@@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
 	//标题
 	APP_NAME: "SCUI",
 	//版本号
-	APP_VER: "1.0.2",
+	APP_VER: "1.0.4",
 	//接口地址
 	API_URL: ""
 }

src/utils/print.js

@@ -0,0 +1,131 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function(dom, options) {
+	if (!(this instanceof Print)) return new Print(dom, options);
+
+	this.options = this.extend({
+		'noPrint': '.no-print'
+	}, options);
+
+	if ((typeof dom) === "string") {
+		this.dom = document.querySelector(dom);
+	} else {
+		this.isDOM(dom)
+		this.dom = this.isDOM(dom) ? dom : dom.$el;
+	}
+
+	this.init();
+};
+Print.prototype = {
+	init: function() {
+		var content = this.getStyle() + this.getHtml();
+		this.writeIframe(content);
+	},
+	extend: function(obj, obj2) {
+		for (var k in obj2) {
+			obj[k] = obj2[k];
+		}
+		return obj;
+	},
+
+	getStyle: function() {
+		var str = "",
+			styles = document.querySelectorAll('style,link');
+		for (var i = 0; i < styles.length; i++) {
+			str += styles[i].outerHTML;
+		}
+		str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') +
+			"{display:none;}</style>";
+
+		return str;
+	},
+
+	getHtml: function() {
+		var inputs = document.querySelectorAll('input');
+		var textareas = document.querySelectorAll('textarea');
+		var selects = document.querySelectorAll('select');
+
+		for (var k = 0; k < inputs.length; k++) {
+			if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+				if (inputs[k].checked == true) {
+					inputs[k].setAttribute('checked', "checked")
+				} else {
+					inputs[k].removeAttribute('checked')
+				}
+			} else if (inputs[k].type == "text") {
+				inputs[k].setAttribute('value', inputs[k].value)
+			} else {
+				inputs[k].setAttribute('value', inputs[k].value)
+			}
+		}
+
+		for (var k2 = 0; k2 < textareas.length; k2++) {
+			if (textareas[k2].type == 'textarea') {
+				textareas[k2].innerHTML = textareas[k2].value
+			}
+		}
+
+		for (var k3 = 0; k3 < selects.length; k3++) {
+			if (selects[k3].type == 'select-one') {
+				var child = selects[k3].children;
+				for (var i in child) {
+					if (child[i].tagName == 'OPTION') {
+						if (child[i].selected == true) {
+							child[i].setAttribute('selected', "selected")
+						} else {
+							child[i].removeAttribute('selected')
+						}
+					}
+				}
+			}
+		}
+
+		return this.dom.outerHTML;
+	},
+
+	writeIframe: function(content) {
+		var w, doc, iframe = document.createElement('iframe'),
+			f = document.body.appendChild(iframe);
+		iframe.id = "myIframe";
+		//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+		iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+		w = f.contentWindow || f.contentDocument;
+		doc = f.contentDocument || f.contentWindow.document;
+		doc.open();
+		doc.write(content);
+		doc.close();
+		var _this = this
+		iframe.onload = function() {
+			_this.toPrint(w);
+			setTimeout(function() {
+				document.body.removeChild(iframe)
+			}, 100)
+		}
+	},
+
+	toPrint: function(frameWindow) {
+		try {
+			setTimeout(function() {
+				frameWindow.focus();
+				try {
+					if (!frameWindow.document.execCommand('print', false, null)) {
+						frameWindow.print();
+					}
+				} catch (e) {
+					frameWindow.print();
+				}
+				frameWindow.close();
+			}, 10);
+		} catch (err) {
+			console.log('err', err);
+		}
+	},
+	isDOM: (typeof HTMLElement === 'object') ?
+		function(obj) {
+			return obj instanceof HTMLElement;
+		} : function(obj) {
+			return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+		}
+};
+
+export default Print

src/utils/template.js

@@ -4,6 +4,7 @@
  * Copyright 2015 yanhaijing. All Rights Reserved
  * Licensed under MIT (https://github.com/yanhaijing/template.js/blob/master/MIT-LICENSE.txt)
  */
+/* eslint-disable */
 ;(function(root, factory) {
     var template = factory(root);
     if (typeof define === 'function' && define.amd) {

src/views/home/components/C1.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-loading="loading">
-		<scEcharts height="300px" :option="option"></scEcharts>
+		<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
 	</div>
 </template>
 
@@ -30,7 +30,17 @@
 				},
 				xAxis: {
 					boundaryGap: false,
-					data: ['周一', '周二', '周三', '周四', '周五', '周六'],
+					type: 'category',
+					data: (function (){
+						var now = new Date();
+						var res = [];
+						var len = 30;
+						while (len--) {
+							res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
+							now = new Date(now - 2000);
+						}
+						return res;
+					})()
 				},
 				yAxis: [{
 					type: 'value',
@@ -43,29 +53,44 @@
 					{
 						name: '收入',
 						type: 'line',
-						symbolSize: 6,
+						symbol: 'none',
-						smooth: true,
 						lineStyle: {
-							width: 8,
+							width: 1,
-							shadowColor: 'rgba(0,0,0,0.2)',
+							color: '#F56C6C'
-							shadowBlur: 15,
-							shadowOffsetY: 15,
-							color: new scEcharts.graphic.LinearGradient(0, 0, 0, 1, [{
-								offset: 0,
-								color: '#409EFF'
-								}, {
-								offset: 1,
-								color: '#36CE9E'
-							}])
 						},
-						'areaStyle': {
+						areaStyle: {
-							'opacity': 0
+							opacity: 0.1,
+							color: '#F56C6C'
 						},
-						data: [15, 15, 35, 5, 35, 15],
+						data: (function (){
+							var res = [];
+							var len = 30;
+							while (len--) {
+								res.push(Math.round(Math.random() * 0));
+							}
+							return res;
+						})()
 					},
 				],
 			};
 			this.option = option;
-		}
+
+		},
+		mounted(){
+			 var _this = this;
+			setInterval(function (){
+				var o = _this.option;
+
+				o.series[0].data.shift()
+				o.series[0].data.push(Math.round(Math.random() * 100));
+
+				o.xAxis.data.shift();
+				o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+
+
+				//_this.$refs.c1.myChart.setOption(o)
+			},2100)
+
+		},
 	}
 </script>

src/views/home/components/C2.vue

@@ -22,6 +22,14 @@
 		data() {
 			return {
 				activities: [
+					{
+						content: [
+							"[新增] 打印工具",
+							"[新增] 移动端菜单布局",
+							'[修复] scEcharts数据双向绑定'
+						],
+						timestamp: '2021-05-09'
+					},
 					{
 						content: [
 							"[新增] 个性列表模板",

src/views/vab/print.vue

@@ -0,0 +1,38 @@
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<el-tabs tab-position="top">
+				<el-tab-pane label="普通打印">
+					<el-alert title="打印当前页面已存在的元素,如包含.no-print样式就忽略" type="success" style="margin-bottom:20px;"></el-alert>
+					<el-button type="primary" @click="print">普通打印</el-button>
+					<div style="height:20px"></div>
+					<div class="printMain" ref="printMain">
+						打印内容
+						<p class="no-print">忽略打印</p>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import print from '@/utils/print'
+
+	export default {
+		name: 'print',
+		data() {
+			return {}
+		},
+		methods: {
+			print(){
+				print(this.$refs.printMain)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.printMain {padding:20px;border: 1px solid #eee;}
+	.printMain p {margin-top: 20px;color: #999;}
+</style>