Hank
GitHub
commit
891e3a1d65
30
README.md
30
README.md
|
|
@ -3,21 +3,21 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://github.com/vuejs/vue">
|
<a href="https://github.com/vuejs/vue">
|
||||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/ElemeFE/element">
|
<a href="https://github.com/ElemeFE/element">
|
||||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
||||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
||||||
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
English | [简体中文](./README.zh-CN.md)
|
English | [简体中文](./README.zh-CN.md)
|
||||||
|
|
|
||||||
|
|
@ -3,21 +3,21 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://github.com/vuejs/vue">
|
<a href="https://github.com/vuejs/vue">
|
||||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/ElemeFE/element">
|
<a href="https://github.com/ElemeFE/element">
|
||||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
||||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
||||||
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
简体中文 | [English](./README.md)
|
简体中文 | [English](./README.md)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"development"',
|
NODE_ENV: '"development"',
|
||||||
ENV_CONFIG: '"dev"',
|
ENV_CONFIG: '"dev"',
|
||||||
BASE_API: '"https://api-dev"'
|
BASE_API: '"https://api-dev"'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"production"',
|
NODE_ENV: '"production"',
|
||||||
ENV_CONFIG: '"prod"',
|
ENV_CONFIG: '"prod"',
|
||||||
BASE_API: '"https://api-prod"'
|
BASE_API: '"https://api-prod"'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"production"',
|
NODE_ENV: '"production"',
|
||||||
ENV_CONFIG: '"sit"',
|
ENV_CONFIG: '"sit"',
|
||||||
BASE_API: '"https://api-sit"'
|
BASE_API: '"https://api-sit"'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
24
index.html
24
index.html
|
|
@ -1,15 +1,15 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<title>vue-element-admin</title>
|
<title>vue-element-admin</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
|
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "vue-element-admin",
|
"name": "vue-element-admin",
|
||||||
"version": "3.6.3",
|
"version": "3.6.4",
|
||||||
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
||||||
"author": "Pan <panfree23@gmail.com>",
|
"author": "Pan <panfree23@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -30,16 +30,16 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
transition: .38s;
|
transition: .38s;
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.is-active {
|
.hamburger.is-active {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,104 +1,104 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="vue-image-crop-upload" v-show="value">
|
<div class="vue-image-crop-upload" v-show="value">
|
||||||
<div class="vicp-wrap">
|
<div class="vicp-wrap">
|
||||||
<div class="vicp-close" @click="off">
|
<div class="vicp-close" @click="off">
|
||||||
<i class="vicp-icon4"></i>
|
<i class="vicp-icon4"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step1" v-show="step == 1">
|
<div class="vicp-step1" v-show="step == 1">
|
||||||
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
|
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
|
||||||
<i class="vicp-icon1" v-show="loading != 1">
|
<i class="vicp-icon1" v-show="loading != 1">
|
||||||
<i class="vicp-icon1-arrow"></i>
|
<i class="vicp-icon1-arrow"></i>
|
||||||
<i class="vicp-icon1-body"></i>
|
<i class="vicp-icon1-body"></i>
|
||||||
<i class="vicp-icon1-bottom"></i>
|
<i class="vicp-icon1-bottom"></i>
|
||||||
</i>
|
</i>
|
||||||
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
|
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
|
||||||
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
|
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
|
||||||
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
|
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-error" v-show="hasError">
|
<div class="vicp-error" v-show="hasError">
|
||||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
|
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step2" v-if="step == 2">
|
<div class="vicp-step2" v-if="step == 2">
|
||||||
<div class="vicp-crop">
|
<div class="vicp-crop">
|
||||||
<div class="vicp-crop-left" v-show="true">
|
<div class="vicp-crop-left" v-show="true">
|
||||||
<div class="vicp-img-container">
|
<div class="vicp-img-container">
|
||||||
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
|
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
|
||||||
@drag="preventDefault"
|
@drag="preventDefault"
|
||||||
@dragstart="preventDefault"
|
@dragstart="preventDefault"
|
||||||
@dragend="preventDefault"
|
@dragend="preventDefault"
|
||||||
@dragleave="preventDefault"
|
@dragleave="preventDefault"
|
||||||
@dragover="preventDefault"
|
@dragover="preventDefault"
|
||||||
@dragenter="preventDefault"
|
@dragenter="preventDefault"
|
||||||
@drop="preventDefault"
|
@drop="preventDefault"
|
||||||
@touchstart="imgStartMove"
|
@touchstart="imgStartMove"
|
||||||
@touchmove="imgMove"
|
@touchmove="imgMove"
|
||||||
@touchend="createImg"
|
@touchend="createImg"
|
||||||
@touchcancel="createImg"
|
@touchcancel="createImg"
|
||||||
@mousedown="imgStartMove"
|
@mousedown="imgStartMove"
|
||||||
@mousemove="imgMove"
|
@mousemove="imgMove"
|
||||||
@mouseup="createImg"
|
@mouseup="createImg"
|
||||||
@mouseout="createImg"
|
@mouseout="createImg"
|
||||||
ref="img">
|
ref="img">
|
||||||
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
|
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
|
||||||
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
|
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-range">
|
<div class="vicp-range">
|
||||||
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
|
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
|
||||||
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
|
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
|
||||||
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
|
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-rotate" v-if="!noRotate">
|
<div class="vicp-rotate" v-if="!noRotate">
|
||||||
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
|
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
|
||||||
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
|
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-crop-right" v-show="true">
|
<div class="vicp-crop-right" v-show="true">
|
||||||
<div class="vicp-preview">
|
<div class="vicp-preview">
|
||||||
<div class="vicp-preview-item" v-if="!noSquare">
|
<div class="vicp-preview-item" v-if="!noSquare">
|
||||||
<img :src="createImgUrl" :style="previewStyle">
|
<img :src="createImgUrl" :style="previewStyle">
|
||||||
<span>{{ lang.preview }}</span>
|
<span>{{ lang.preview }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
|
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
|
||||||
<img :src="createImgUrl" :style="previewStyle">
|
<img :src="createImgUrl" :style="previewStyle">
|
||||||
<span>{{ lang.preview }}</span>
|
<span>{{ lang.preview }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||||
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
|
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step3" v-if="step == 3">
|
<div class="vicp-step3" v-if="step == 3">
|
||||||
<div class="vicp-upload">
|
<div class="vicp-upload">
|
||||||
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
|
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
|
||||||
<div class="vicp-progress-wrap">
|
<div class="vicp-progress-wrap">
|
||||||
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
|
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-error" v-show="hasError">
|
<div class="vicp-error" v-show="hasError">
|
||||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-success" v-show="loading === 2">
|
<div class="vicp-success" v-show="loading === 2">
|
||||||
<i class="vicp-icon3"></i> {{ lang.success }}
|
<i class="vicp-icon3"></i> {{ lang.success }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||||
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
|
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -395,6 +395,7 @@ export default {
|
||||||
off() {
|
off() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$emit('input', false)
|
this.$emit('input', false)
|
||||||
|
this.$emit('close')
|
||||||
if (this.step == 3 && this.loading == 2) {
|
if (this.step == 3 && this.loading == 2) {
|
||||||
this.setStep(1)
|
this.setStep(1)
|
||||||
}
|
}
|
||||||
|
|
@ -408,7 +409,7 @@ export default {
|
||||||
}, 200)
|
}, 200)
|
||||||
},
|
},
|
||||||
/* 图片选择区域函数绑定
|
/* 图片选择区域函数绑定
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
preventDefault(e) {
|
preventDefault(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
return false
|
return false
|
||||||
|
|
@ -588,7 +589,7 @@ export default {
|
||||||
scale.x = rX
|
scale.x = rX
|
||||||
scale.y = rY
|
scale.y = rY
|
||||||
},
|
},
|
||||||
// 按钮按下开始向右旋转
|
// 按钮按下开始向右旋转
|
||||||
startRotateRight(e) {
|
startRotateRight(e) {
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
|
|
@ -736,7 +737,7 @@ export default {
|
||||||
}
|
}
|
||||||
}, 300)
|
}, 300)
|
||||||
},
|
},
|
||||||
// 生成需求图片
|
// 生成需求图片
|
||||||
createImg(e) {
|
createImg(e) {
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
|
|
@ -1131,9 +1132,9 @@ export default {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* 滑块
|
/* 滑块
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
/* 轨道
|
/* 轨道
|
||||||
---------------------------------------------------------------*/ }
|
---------------------------------------------------------------*/ }
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
||||||
outline: none; }
|
outline: none; }
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
||||||
<div class="pan-info">
|
<div class="pan-info">
|
||||||
<div class="pan-info-roles-container">
|
<div class="pan-info-roles-container">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="pan-thumb" :src="image">
|
<img class="pan-thumb" :src="image">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -19,7 +19,7 @@ export default {
|
||||||
},
|
},
|
||||||
zIndex: {
|
zIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 100
|
default: 1
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -35,106 +35,106 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.pan-item {
|
.pan-item {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info-roles-container {
|
.pan-info-roles-container {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-thumb {
|
.pan-thumb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform-origin: 95% 40%;
|
transform-origin: 95% 40%;
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-thumb:after {
|
.pan-thumb:after {
|
||||||
content: '';
|
content: '';
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
left: 95%;
|
left: 95%;
|
||||||
margin: -4px 0 0 -4px;
|
margin: -4px 0 0 -4px;
|
||||||
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
||||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info {
|
.pan-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info h3 {
|
.pan-info h3 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
position: relative;
|
position: relative;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin: 0 60px;
|
margin: 0 60px;
|
||||||
padding: 22px 0 0 0;
|
padding: 22px 0 0 0;
|
||||||
height: 85px;
|
height: 85px;
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p {
|
.pan-info p {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin: 0 30px;
|
margin: 0 30px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p a {
|
.pan-info p a {
|
||||||
display: block;
|
display: block;
|
||||||
color: #333;
|
color: #333;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
margin: 7px auto 0;
|
margin: 7px auto 0;
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
||||||
transform: translateX(60px) rotate(90deg);
|
transform: translateX(60px) rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p a:hover {
|
.pan-info p a:hover {
|
||||||
background: rgba(255, 255, 255, 0.5);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-item:hover .pan-thumb {
|
.pan-item:hover .pan-thumb {
|
||||||
transform: rotate(-110deg);
|
transform: rotate(-110deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-item:hover .pan-info p a {
|
.pan-item:hover .pan-info p a {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0px) rotate(0deg);
|
transform: translateX(0px) rotate(0deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -153,7 +153,10 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tinymce-container {
|
.tinymce-container {
|
||||||
position: relative
|
position: relative;
|
||||||
|
}
|
||||||
|
.tinymce-container>>>.mce-fullscreen {
|
||||||
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
.tinymce-textarea {
|
.tinymce-textarea {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="singleImageUpload2 upload-container">
|
<div class="singleImageUpload2 upload-container">
|
||||||
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
||||||
:on-success="handleImageScucess">
|
:on-success="handleImageScucess">
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">Drag或<em>点击上传</em></div>
|
<div class="el-upload__text">Drag或<em>点击上传</em></div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div v-show="imageUrl.length>0" class="image-preview">
|
<div v-show="imageUrl.length>0" class="image-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -66,53 +66,53 @@ export default {
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.upload-container {
|
.upload-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,34 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="upload-container">
|
<div class="upload-container">
|
||||||
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
||||||
:on-success="handleImageScucess">
|
:on-success="handleImageScucess">
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div class="image-preview image-app-preview">
|
<div class="image-preview image-app-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="image-preview">
|
<div class="image-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getToken } from '@/api/qiniu'
|
import { getToken } from '@/api/qiniu'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'singleImageUpload',
|
name: 'singleImageUpload3',
|
||||||
props: {
|
props: {
|
||||||
value: String
|
value: String
|
||||||
},
|
},
|
||||||
|
|
@ -76,70 +76,70 @@ export default {
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
.upload-container {
|
.upload-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-app-preview {
|
.image-app-preview {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
.app-fake-conver {
|
.app-fake-conver {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%; // background: rgba(0, 0, 0, .1);
|
width: 100%; // background: rgba(0, 0, 0, .1);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 64px;
|
line-height: 64px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -131,16 +131,14 @@ export function objectMerge(target, source) {
|
||||||
if (Array.isArray(source)) {
|
if (Array.isArray(source)) {
|
||||||
return source.slice()
|
return source.slice()
|
||||||
}
|
}
|
||||||
for (const property in source) {
|
Object.keys(source).forEach((property) => {
|
||||||
if (source.hasOwnProperty(property)) {
|
const sourceProperty = source[property]
|
||||||
const sourceProperty = source[property]
|
if (typeof sourceProperty === 'object') {
|
||||||
if (typeof sourceProperty === 'object') {
|
target[property] = objectMerge(target[property], sourceProperty)
|
||||||
target[property] = objectMerge(target[property], sourceProperty)
|
} else {
|
||||||
continue
|
|
||||||
}
|
|
||||||
target[property] = sourceProperty
|
target[property] = sourceProperty
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
return target
|
return target
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -253,15 +251,13 @@ export function deepClone(source) {
|
||||||
throw new Error('error arguments', 'shallowClone')
|
throw new Error('error arguments', 'shallowClone')
|
||||||
}
|
}
|
||||||
const targetObj = source.constructor === Array ? [] : {}
|
const targetObj = source.constructor === Array ? [] : {}
|
||||||
for (const keys in source) {
|
Object.keys(source).forEach((keys) => {
|
||||||
if (source.hasOwnProperty(keys)) {
|
if (source[keys] && typeof source[keys] === 'object') {
|
||||||
if (source[keys] && typeof source[keys] === 'object') {
|
targetObj[keys] = source[keys].constructor === Array ? [] : {}
|
||||||
targetObj[keys] = source[keys].constructor === Array ? [] : {}
|
targetObj[keys] = deepClone(source[keys])
|
||||||
targetObj[keys] = deepClone(source[keys])
|
} else {
|
||||||
} else {
|
targetObj[keys] = source[keys]
|
||||||
targetObj[keys] = source[keys]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
return targetObj
|
return targetObj
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -116,45 +116,43 @@ export function export_table_to_excel(id) {
|
||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
||||||
}
|
}
|
||||||
|
|
||||||
export function export_json_to_excel(th, jsonData, defaultTitle) {
|
export function export_json_to_excel({header, data, filename='excel-list', autoWidth=true}={}) {
|
||||||
|
|
||||||
/* original data */
|
/* original data */
|
||||||
|
data=[...data]
|
||||||
var data = jsonData;
|
data.unshift(header);
|
||||||
data.unshift(th);
|
|
||||||
var ws_name = "SheetJS";
|
var ws_name = "SheetJS";
|
||||||
|
|
||||||
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
||||||
|
|
||||||
/*设置worksheet每列的最大宽度*/
|
if(autoWidth){
|
||||||
const colWidth = data.map(row => row.map(val => {
|
/*设置worksheet每列的最大宽度*/
|
||||||
/*先判断是否为null/undefined*/
|
const colWidth = data.map(row => row.map(val => {
|
||||||
if (val == null) {
|
/*先判断是否为null/undefined*/
|
||||||
return {'wch': 10};
|
if (val == null) {
|
||||||
}
|
return {'wch': 10};
|
||||||
/*再判断是否为中文*/
|
}
|
||||||
else if (val.toString().charCodeAt(0) > 255) {
|
/*再判断是否为中文*/
|
||||||
return {'wch': val.toString().length * 2};
|
else if (val.toString().charCodeAt(0) > 255) {
|
||||||
} else {
|
return {'wch': val.toString().length * 2};
|
||||||
return {'wch': val.toString().length};
|
} else {
|
||||||
}
|
return {'wch': val.toString().length};
|
||||||
}))
|
}
|
||||||
/*以第一行为初始值*/
|
}))
|
||||||
let result = colWidth[0];
|
/*以第一行为初始值*/
|
||||||
for (let i = 1; i < colWidth.length; i++) {
|
let result = colWidth[0];
|
||||||
for (let j = 0; j < colWidth[i].length; j++) {
|
for (let i = 1; i < colWidth.length; i++) {
|
||||||
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
for (let j = 0; j < colWidth[i].length; j++) {
|
||||||
result[j]['wch'] = colWidth[i][j]['wch'];
|
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
||||||
|
result[j]['wch'] = colWidth[i][j]['wch'];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
ws['!cols'] = result;
|
||||||
}
|
}
|
||||||
ws['!cols'] = result;
|
|
||||||
|
|
||||||
/* add worksheet to workbook */
|
/* add worksheet to workbook */
|
||||||
wb.SheetNames.push(ws_name);
|
wb.SheetNames.push(ws_name);
|
||||||
wb.Sheets[ws_name] = ws;
|
wb.Sheets[ws_name] = ws;
|
||||||
|
|
||||||
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
||||||
var title = defaultTitle || 'excel-list'
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename + ".xlsx");
|
||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,30 +38,30 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.components-container {
|
.components-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-container {
|
.left-container {
|
||||||
background-color: #F38181;
|
background-color: #F38181;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container {
|
.right-container {
|
||||||
background-color: #FCE38A;
|
background-color: #FCE38A;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-container {
|
.top-container {
|
||||||
background-color: #FCE38A;
|
background-color: #FCE38A;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #95E1D3;
|
background-color: #95E1D3;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,317 +1,319 @@
|
||||||
.todoapp {
|
.todoapp {
|
||||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
color: #4d4d4d;
|
color: #4d4d4d;
|
||||||
min-width: 230px;
|
min-width: 230px;
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
margin: 0 auto ;
|
margin: 0 auto ;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
button {
|
button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: none;
|
background: none;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
:focus {
|
:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todoapp {
|
.todoapp {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin: 130px 0 40px 0;
|
margin: 130px 0 40px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.todoapp input::-webkit-input-placeholder {
|
.todoapp input::-webkit-input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp input::-moz-placeholder {
|
.todoapp input::-moz-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp input::input-placeholder {
|
.todoapp input::input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp h1 {
|
.todoapp h1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -155px;
|
top: -155px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgba(175, 47, 47, 0.15);
|
color: rgba(175, 47, 47, 0.15);
|
||||||
-webkit-text-rendering: optimizeLegibility;
|
-webkit-text-rendering: optimizeLegibility;
|
||||||
-moz-text-rendering: optimizeLegibility;
|
-moz-text-rendering: optimizeLegibility;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
.new-todo,
|
.new-todo,
|
||||||
.edit {
|
.edit {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
.new-todo {
|
.new-todo {
|
||||||
padding: 10px 16px 16px 60px;
|
padding: 10px 16px 16px 60px;
|
||||||
border: none;
|
border: none;
|
||||||
background: rgba(0, 0, 0, 0.003);
|
background: rgba(0, 0, 0, 0.003);
|
||||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
.main {
|
.main {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.toggle-all {
|
.toggle-all {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.toggle-all+label {
|
.toggle-all+label {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -52px;
|
top: -52px;
|
||||||
left: -13px;
|
left: -13px;
|
||||||
-webkit-transform: rotate(90deg);
|
-webkit-transform: rotate(90deg);
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
.toggle-all+label:before {
|
.toggle-all+label:before {
|
||||||
content: '❯';
|
content: '❯';
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
padding: 10px 27px 10px 27px;
|
padding: 10px 27px 10px 27px;
|
||||||
}
|
}
|
||||||
.toggle-all:checked+label:before {
|
.toggle-all:checked+label:before {
|
||||||
color: #737373;
|
color: #737373;
|
||||||
}
|
}
|
||||||
.todo-list {
|
.todo-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.todo-list li {
|
.todo-list li {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
border-bottom: 1px solid #ededed;
|
border-bottom: 1px solid #ededed;
|
||||||
}
|
}
|
||||||
.todo-list li:last-child {
|
.todo-list li:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.todo-list li.editing {
|
.todo-list li.editing {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.todo-list li.editing .edit {
|
.todo-list li.editing .edit {
|
||||||
display: block;
|
display: block;
|
||||||
width: 506px;
|
width: 506px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
margin: 0 0 0 43px;
|
margin: 0 0 0 43px;
|
||||||
}
|
}
|
||||||
.todo-list li.editing .view {
|
.todo-list li.editing .view {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
border: none;
|
border: none;
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle+label {
|
.todo-list li .toggle+label {
|
||||||
/*
|
/*
|
||||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||||
*/
|
*/
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center left;
|
background-position: center left;
|
||||||
background-size: 36px;
|
background-size: 36px;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle:checked+label {
|
.todo-list li .toggle:checked+label {
|
||||||
background-size: 36px;
|
background-size: 36px;
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
||||||
}
|
}
|
||||||
.todo-list li label {
|
.todo-list li label {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
padding: 15px 15px 15px 50px;
|
padding: 15px 15px 15px 50px;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.0;
|
line-height: 1.0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: color 0.4s;
|
transition: color 0.4s;
|
||||||
}
|
}
|
||||||
.todo-list li.completed label {
|
.todo-list li.completed label {
|
||||||
color: #d9d9d9;
|
color: #d9d9d9;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy {
|
.todo-list li .destroy {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #cc9a9a;
|
color: #cc9a9a;
|
||||||
transition: color 0.2s ease-out;
|
transition: color 0.2s ease-out;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy:hover {
|
.todo-list li .destroy:hover {
|
||||||
color: #af5b5e;
|
color: #af5b5e;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy:after {
|
.todo-list li .destroy:after {
|
||||||
content: '×';
|
content: '×';
|
||||||
}
|
}
|
||||||
.todo-list li:hover .destroy {
|
.todo-list li:hover .destroy {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.todo-list li .edit {
|
.todo-list li .edit {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todo-list li.editing:last-child {
|
.todo-list li.editing:last-child {
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
color: #777;
|
color: #777;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.footer:before {
|
.footer:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.todo-count {
|
.todo-count {
|
||||||
float: left;
|
float: left;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.todo-count strong {
|
.todo-count strong {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
.filters {
|
.filters {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
position: relative;
|
||||||
}
|
z-index: 1;
|
||||||
.filters li {
|
list-style: none;
|
||||||
display: inline;
|
}
|
||||||
}
|
.filters li {
|
||||||
.filters li a {
|
display: inline;
|
||||||
color: inherit;
|
}
|
||||||
font-size: 12px;
|
.filters li a {
|
||||||
padding: 3px 7px;
|
color: inherit;
|
||||||
text-decoration: none;
|
font-size: 12px;
|
||||||
border: 1px solid transparent;
|
padding: 3px 7px;
|
||||||
border-radius: 3px;
|
text-decoration: none;
|
||||||
}
|
border: 1px solid transparent;
|
||||||
.filters li a:hover {
|
border-radius: 3px;
|
||||||
border-color: rgba(175, 47, 47, 0.1);
|
}
|
||||||
}
|
.filters li a:hover {
|
||||||
.filters li a.selected {
|
border-color: rgba(175, 47, 47, 0.1);
|
||||||
border-color: rgba(175, 47, 47, 0.2);
|
}
|
||||||
}
|
.filters li a.selected {
|
||||||
.clear-completed,
|
border-color: rgba(175, 47, 47, 0.2);
|
||||||
html .clear-completed:active {
|
}
|
||||||
float: right;
|
.clear-completed,
|
||||||
position: relative;
|
html .clear-completed:active {
|
||||||
line-height: 20px;
|
float: right;
|
||||||
text-decoration: none;
|
position: relative;
|
||||||
cursor: pointer;
|
line-height: 20px;
|
||||||
}
|
text-decoration: none;
|
||||||
.clear-completed:hover {
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
}
|
||||||
}
|
.clear-completed:hover {
|
||||||
.info {
|
text-decoration: underline;
|
||||||
margin: 65px auto 0;
|
}
|
||||||
color: #bfbfbf;
|
.info {
|
||||||
font-size: 10px;
|
margin: 65px auto 0;
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
color: #bfbfbf;
|
||||||
text-align: center;
|
font-size: 10px;
|
||||||
}
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
.info p {
|
text-align: center;
|
||||||
line-height: 1;
|
}
|
||||||
}
|
.info p {
|
||||||
.info a {
|
line-height: 1;
|
||||||
color: inherit;
|
}
|
||||||
text-decoration: none;
|
.info a {
|
||||||
font-weight: 400;
|
color: inherit;
|
||||||
}
|
text-decoration: none;
|
||||||
.info a:hover {
|
font-weight: 400;
|
||||||
text-decoration: underline;
|
}
|
||||||
}
|
.info a:hover {
|
||||||
/*
|
text-decoration: underline;
|
||||||
Hack to remove background from Mobile Safari.
|
}
|
||||||
Can't use it globally since it destroys checkboxes in Firefox
|
/*
|
||||||
|
Hack to remove background from Mobile Safari.
|
||||||
|
Can't use it globally since it destroys checkboxes in Firefox
|
||||||
*/
|
*/
|
||||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||||
.toggle-all,
|
.toggle-all,
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 430px) {
|
@media (max-width: 430px) {
|
||||||
.footer {
|
.footer {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
.filters {
|
.filters {
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,35 +40,34 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.emptyGif {
|
.emptyGif {
|
||||||
display: block;
|
display: block;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-editor-container {
|
.dashboard-editor-container {
|
||||||
background-color: #e3e3e3;
|
background-color: #e3e3e3;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
margin-top: -50px;
|
padding: 50px 60px 0px;
|
||||||
padding: 100px 60px 0px;
|
.pan-info-roles {
|
||||||
.pan-info-roles {
|
font-size: 12px;
|
||||||
font-size: 12px;
|
font-weight: 700;
|
||||||
font-weight: 700;
|
color: #333;
|
||||||
color: #333;
|
display: block;
|
||||||
display: block;
|
}
|
||||||
}
|
.info-container {
|
||||||
.info-container {
|
position: relative;
|
||||||
position: relative;
|
margin-left: 190px;
|
||||||
margin-left: 190px;
|
height: 150px;
|
||||||
height: 150px;
|
line-height: 200px;
|
||||||
line-height: 200px;
|
.display_name {
|
||||||
.display_name {
|
font-size: 48px;
|
||||||
font-size: 48px;
|
line-height: 48px;
|
||||||
line-height: 48px;
|
color: #212121;
|
||||||
color: #212121;
|
position: absolute;
|
||||||
position: absolute;
|
top: 25px;
|
||||||
top: 25px;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- $t is vue-i18n global function to translate lang -->
|
<!-- $t is vue-i18n global function to translate lang -->
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
|
|
||||||
|
<label class="radio-label" style="padding-left:0;">Filename: </label>
|
||||||
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
<label class="radio-label">Cell Auto Width: </label>
|
||||||
|
<el-radio-group v-model="autoWidth">
|
||||||
|
<el-radio :label="true" border>True</el-radio>
|
||||||
|
<el-radio :label="false" border>False</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
||||||
|
|
||||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||||
<el-table-column align="center" label='Id' width="95">
|
<el-table-column align="center" label='Id' width="95">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|
@ -45,7 +53,8 @@ export default {
|
||||||
list: null,
|
list: null,
|
||||||
listLoading: true,
|
listLoading: true,
|
||||||
downloadLoading: false,
|
downloadLoading: false,
|
||||||
filename: ''
|
filename: '',
|
||||||
|
autoWidth: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -66,7 +75,12 @@ export default {
|
||||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||||
const list = this.list
|
const list = this.list
|
||||||
const data = this.formatJson(filterVal, list)
|
const data = this.formatJson(filterVal, list)
|
||||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: this.filename,
|
||||||
|
autoWidth: this.autoWidth
|
||||||
|
})
|
||||||
this.downloadLoading = false
|
this.downloadLoading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -82,3 +96,13 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.radio-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 12px 0 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,11 @@ export default {
|
||||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||||
const list = this.multipleSelection
|
const list = this.multipleSelection
|
||||||
const data = this.formatJson(filterVal, list)
|
const data = this.formatJson(filterVal, list)
|
||||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: this.filename
|
||||||
|
})
|
||||||
this.$refs.multipleTable.clearSelection()
|
this.$refs.multipleTable.clearSelection()
|
||||||
this.downloadLoading = false
|
this.downloadLoading = false
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
|
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
|
||||||
<sidebar class="sidebar-container"></sidebar>
|
<sidebar class="sidebar-container"></sidebar>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<navbar></navbar>
|
<navbar></navbar>
|
||||||
<tags-view></tags-view>
|
<tags-view></tags-view>
|
||||||
<app-main></app-main>
|
<app-main></app-main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -29,11 +29,11 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
.app-wrapper {
|
.app-wrapper {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="menu-wrapper">
|
<div class="menu-wrapper">
|
||||||
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
||||||
|
|
||||||
<router-link v-if="item.children.length===1 && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
|
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
|
||||||
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
||||||
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
||||||
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
|
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
|
||||||
|
|
@ -46,6 +46,15 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
hasOneShowingChildren(children) {
|
||||||
|
const showingChildren = children.filter(item => {
|
||||||
|
return !item.hidden
|
||||||
|
})
|
||||||
|
if (showingChildren.length === 1) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
generateTitle
|
generateTitle
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,35 +34,35 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.social-signup-container {
|
.social-signup-container {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
.sign-btn {
|
.sign-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
.wx-svg-container,
|
.wx-svg-container,
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.wx-svg-container {
|
.wx-svg-container {
|
||||||
background-color: #8dc349;
|
background-color: #8dc349;
|
||||||
}
|
}
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
background-color: #6BA2D6;
|
background-color: #6BA2D6;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue