初始化
袁子龙
parent
32b397b6ed
commit
a54362bbb8
|
|
@ -0,0 +1,182 @@
|
||||||
|
@import './variables.scss';
|
||||||
|
@import './mixin.scss';
|
||||||
|
@import './transition.scss';
|
||||||
|
@import './element-ui.scss';
|
||||||
|
@import './sidebar.scss';
|
||||||
|
@import './btn.scss';
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-padding {
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padding-content {
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus,
|
||||||
|
a:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:focus,
|
||||||
|
a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-5 {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl-5 {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inlineBlock {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
&:after {
|
||||||
|
visibility: hidden;
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
content: " ";
|
||||||
|
clear: both;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
background: #eef1f6;
|
||||||
|
padding: 8px 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: block;
|
||||||
|
line-height: 32px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
color: #2c3e50;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #337ab7;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgb(32, 160, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//main-container全局样式
|
||||||
|
.app-container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-container {
|
||||||
|
margin: 30px 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-navbar {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 20px;
|
||||||
|
transition: 600ms ease position;
|
||||||
|
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.draft {
|
||||||
|
background: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.deleted {
|
||||||
|
background: #d0d0d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-type,
|
||||||
|
.link-type:focus {
|
||||||
|
color: #337ab7;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: rgb(32, 160, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-container {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||||
|
<transition-group name="breadcrumb">
|
||||||
|
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
||||||
|
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
|
||||||
|
class="no-redirect">{{ item.meta.title }}</span>
|
||||||
|
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||||
|
</el-breadcrumb-item>
|
||||||
|
</transition-group>
|
||||||
|
</el-breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
levelList: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route(route) {
|
||||||
|
// if you go to the redirect page, do not update the breadcrumbs
|
||||||
|
if (route.path.startsWith('/redirect/')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.getBreadcrumb()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getBreadcrumb()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getBreadcrumb() {
|
||||||
|
// only show routes with meta.title
|
||||||
|
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
|
||||||
|
const first = matched[0]
|
||||||
|
|
||||||
|
if (!this.isDashboard(first)) {
|
||||||
|
matched = [{path: '/index', meta: {title: '首页'}}].concat(matched)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||||
|
},
|
||||||
|
isDashboard(route) {
|
||||||
|
const name = route && route.name
|
||||||
|
if (!name) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return name.trim() === 'Index'
|
||||||
|
},
|
||||||
|
handleLink(item) {
|
||||||
|
const {redirect, path} = item
|
||||||
|
if (redirect) {
|
||||||
|
this.$router.push(redirect)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$router.push(path)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.app-breadcrumb.el-breadcrumb {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 50px;
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
.no-redirect {
|
||||||
|
color: #97a8be;
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,437 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tabs type="border-card">
|
||||||
|
<el-tab-pane v-if="shouldHide('second')" label="秒">
|
||||||
|
<CrontabSecond
|
||||||
|
ref="cronsecond"
|
||||||
|
:check="checkNumber"
|
||||||
|
:cron="crontabValueObj"
|
||||||
|
@update="updateCrontabValue"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane v-if="shouldHide('min')" label="分钟">
|
||||||
|
<CrontabMin
|
||||||
|
ref="cronmin"
|
||||||
|
:check="checkNumber"
|
||||||
|
:cron="crontabValueObj"
|
||||||
|
@update="updateCrontabValue"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane v-if="shouldHide('hour')" label="小时">
|
||||||
|
<CrontabHour
|
||||||
|
ref="cronhour"
|
||||||
|
:check="checkNumber"
|
||||||
|
:cron="crontabValueObj"
|
||||||
|
@update="updateCrontabValue"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane v-if="shouldHide('day')" label="日">
|
||||||
|
<CrontabDay
|
||||||
|
ref="cronday"
|
||||||
|
:check="checkNumber"
|
||||||
|
:cron="crontabValueObj"
|
||||||
|
@update="updateCrontabValue"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane v-if="shouldHide('month')" label="月">
|
||||||
|
<CrontabMonth
|
||||||
|
ref="cronmonth"
|
||||||
|
:check="checkNumber"
|
||||||
|
:cron="crontabValueObj"
|
||||||
|
@update="updateCrontabValue"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane v-if="shouldHide('week')" label="周">
|
||||||
|
<CrontabWeek
|
||||||
|
ref="cronweek"
|
||||||
|
:check="checkNumber"
|
||||||
|
:cron="crontabValueObj"
|
||||||
|
@update="updateCrontabValue"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane v-if="shouldHide('year')" label="年">
|
||||||
|
<CrontabYear
|
||||||
|
ref="cronyear"
|
||||||
|
:check="checkNumber"
|
||||||
|
:cron="crontabValueObj"
|
||||||
|
@update="updateCrontabValue"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
|
<div class="popup-main">
|
||||||
|
<div class="popup-result">
|
||||||
|
<p class="title">时间表达式</p>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<th v-for="item of tabTitles" :key="item" width="40">{{ item }}</th>
|
||||||
|
<th>Cron 表达式</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueObj.second }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueObj.min }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueObj.hour }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueObj.day }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueObj.month }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueObj.week }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueObj.year }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>{{ crontabValueString }}</span>
|
||||||
|
</td>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<CrontabResult :ex="crontabValueString"></CrontabResult>
|
||||||
|
|
||||||
|
<div class="pop_btn">
|
||||||
|
<el-button size="small" type="primary" @click="submitFill">确定</el-button>
|
||||||
|
<el-button size="small" type="warning" @click="clearCron">重置</el-button>
|
||||||
|
<el-button size="small" @click="hidePopup">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CrontabSecond from "./second.vue";
|
||||||
|
import CrontabMin from "./min.vue";
|
||||||
|
import CrontabHour from "./hour.vue";
|
||||||
|
import CrontabDay from "./day.vue";
|
||||||
|
import CrontabMonth from "./month.vue";
|
||||||
|
import CrontabWeek from "./week.vue";
|
||||||
|
import CrontabYear from "./year.vue";
|
||||||
|
import CrontabResult from "./result.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabTitles: ["秒", "分钟", "小时", "日", "月", "周", "年"],
|
||||||
|
tabActive: 0,
|
||||||
|
myindex: 0,
|
||||||
|
crontabValueObj: {
|
||||||
|
second: "*",
|
||||||
|
min: "*",
|
||||||
|
hour: "*",
|
||||||
|
day: "*",
|
||||||
|
month: "*",
|
||||||
|
week: "?",
|
||||||
|
year: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
name: "vcrontab",
|
||||||
|
props: ["expression", "hideComponent"],
|
||||||
|
methods: {
|
||||||
|
shouldHide(key) {
|
||||||
|
if (this.hideComponent && this.hideComponent.includes(key)) return false;
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
resolveExp() {
|
||||||
|
// 反解析 表达式
|
||||||
|
if (this.expression) {
|
||||||
|
let arr = this.expression.split(" ");
|
||||||
|
if (arr.length >= 6) {
|
||||||
|
//6 位以上是合法表达式
|
||||||
|
let obj = {
|
||||||
|
second: arr[0],
|
||||||
|
min: arr[1],
|
||||||
|
hour: arr[2],
|
||||||
|
day: arr[3],
|
||||||
|
month: arr[4],
|
||||||
|
week: arr[5],
|
||||||
|
year: arr[6] ? arr[6] : "",
|
||||||
|
};
|
||||||
|
this.crontabValueObj = {
|
||||||
|
...obj,
|
||||||
|
};
|
||||||
|
for (let i in obj) {
|
||||||
|
if (obj[i]) this.changeRadio(i, obj[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 没有传入的表达式 则还原
|
||||||
|
this.clearCron();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// tab切换值
|
||||||
|
tabCheck(index) {
|
||||||
|
this.tabActive = index;
|
||||||
|
},
|
||||||
|
// 由子组件触发，更改表达式组成的字段值
|
||||||
|
updateCrontabValue(name, value, from) {
|
||||||
|
"updateCrontabValue", name, value, from;
|
||||||
|
this.crontabValueObj[name] = value;
|
||||||
|
if (from && from !== name) {
|
||||||
|
console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
|
||||||
|
this.changeRadio(name, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 赋值到组件
|
||||||
|
changeRadio(name, value) {
|
||||||
|
let arr = ["second", "min", "hour", "month"],
|
||||||
|
refName = "cron" + name,
|
||||||
|
insValue;
|
||||||
|
|
||||||
|
if (!this.$refs[refName]) return;
|
||||||
|
|
||||||
|
if (arr.includes(name)) {
|
||||||
|
if (value === "*") {
|
||||||
|
insValue = 1;
|
||||||
|
} else if (value.indexOf("-") > -1) {
|
||||||
|
let indexArr = value.split("-");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].cycle01 = 0)
|
||||||
|
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||||||
|
this.$refs[refName].cycle02 = indexArr[1];
|
||||||
|
insValue = 2;
|
||||||
|
} else if (value.indexOf("/") > -1) {
|
||||||
|
let indexArr = value.split("/");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].average01 = 0)
|
||||||
|
: (this.$refs[refName].average01 = indexArr[0]);
|
||||||
|
this.$refs[refName].average02 = indexArr[1];
|
||||||
|
insValue = 3;
|
||||||
|
} else {
|
||||||
|
insValue = 4;
|
||||||
|
this.$refs[refName].checkboxList = value.split(",");
|
||||||
|
}
|
||||||
|
} else if (name == "day") {
|
||||||
|
if (value === "*") {
|
||||||
|
insValue = 1;
|
||||||
|
} else if (value == "?") {
|
||||||
|
insValue = 2;
|
||||||
|
} else if (value.indexOf("-") > -1) {
|
||||||
|
let indexArr = value.split("-");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].cycle01 = 0)
|
||||||
|
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||||||
|
this.$refs[refName].cycle02 = indexArr[1];
|
||||||
|
insValue = 3;
|
||||||
|
} else if (value.indexOf("/") > -1) {
|
||||||
|
let indexArr = value.split("/");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].average01 = 0)
|
||||||
|
: (this.$refs[refName].average01 = indexArr[0]);
|
||||||
|
this.$refs[refName].average02 = indexArr[1];
|
||||||
|
insValue = 4;
|
||||||
|
} else if (value.indexOf("W") > -1) {
|
||||||
|
let indexArr = value.split("W");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].workday = 0)
|
||||||
|
: (this.$refs[refName].workday = indexArr[0]);
|
||||||
|
insValue = 5;
|
||||||
|
} else if (value === "L") {
|
||||||
|
insValue = 6;
|
||||||
|
} else {
|
||||||
|
this.$refs[refName].checkboxList = value.split(",");
|
||||||
|
insValue = 7;
|
||||||
|
}
|
||||||
|
} else if (name == "week") {
|
||||||
|
if (value === "*") {
|
||||||
|
insValue = 1;
|
||||||
|
} else if (value == "?") {
|
||||||
|
insValue = 2;
|
||||||
|
} else if (value.indexOf("-") > -1) {
|
||||||
|
let indexArr = value.split("-");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].cycle01 = 0)
|
||||||
|
: (this.$refs[refName].cycle01 = indexArr[0]);
|
||||||
|
this.$refs[refName].cycle02 = indexArr[1];
|
||||||
|
insValue = 3;
|
||||||
|
} else if (value.indexOf("#") > -1) {
|
||||||
|
let indexArr = value.split("#");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].average01 = 1)
|
||||||
|
: (this.$refs[refName].average01 = indexArr[0]);
|
||||||
|
this.$refs[refName].average02 = indexArr[1];
|
||||||
|
insValue = 4;
|
||||||
|
} else if (value.indexOf("L") > -1) {
|
||||||
|
let indexArr = value.split("L");
|
||||||
|
isNaN(indexArr[0])
|
||||||
|
? (this.$refs[refName].weekday = 1)
|
||||||
|
: (this.$refs[refName].weekday = indexArr[0]);
|
||||||
|
insValue = 5;
|
||||||
|
} else {
|
||||||
|
this.$refs[refName].checkboxList = value.split(",");
|
||||||
|
insValue = 6;
|
||||||
|
}
|
||||||
|
} else if (name == "year") {
|
||||||
|
if (value == "") {
|
||||||
|
insValue = 1;
|
||||||
|
} else if (value == "*") {
|
||||||
|
insValue = 2;
|
||||||
|
} else if (value.indexOf("-") > -1) {
|
||||||
|
insValue = 3;
|
||||||
|
} else if (value.indexOf("/") > -1) {
|
||||||
|
insValue = 4;
|
||||||
|
} else {
|
||||||
|
this.$refs[refName].checkboxList = value.split(",");
|
||||||
|
insValue = 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$refs[refName].radioValue = insValue;
|
||||||
|
},
|
||||||
|
// 表单选项的子组件校验数字格式（通过-props传递）
|
||||||
|
checkNumber(value, minLimit, maxLimit) {
|
||||||
|
// 检查必须为整数
|
||||||
|
value = Math.floor(value);
|
||||||
|
if (value < minLimit) {
|
||||||
|
value = minLimit;
|
||||||
|
} else if (value > maxLimit) {
|
||||||
|
value = maxLimit;
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
// 隐藏弹窗
|
||||||
|
hidePopup() {
|
||||||
|
this.$emit("hide");
|
||||||
|
},
|
||||||
|
// 填充表达式
|
||||||
|
submitFill() {
|
||||||
|
this.$emit("fill", this.crontabValueString);
|
||||||
|
this.hidePopup();
|
||||||
|
},
|
||||||
|
clearCron() {
|
||||||
|
// 还原选择项
|
||||||
|
("准备还原");
|
||||||
|
this.crontabValueObj = {
|
||||||
|
second: "*",
|
||||||
|
min: "*",
|
||||||
|
hour: "*",
|
||||||
|
day: "*",
|
||||||
|
month: "*",
|
||||||
|
week: "?",
|
||||||
|
year: "",
|
||||||
|
};
|
||||||
|
for (let j in this.crontabValueObj) {
|
||||||
|
this.changeRadio(j, this.crontabValueObj[j]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
crontabValueString: function () {
|
||||||
|
let obj = this.crontabValueObj;
|
||||||
|
let str =
|
||||||
|
obj.second +
|
||||||
|
" " +
|
||||||
|
obj.min +
|
||||||
|
" " +
|
||||||
|
obj.hour +
|
||||||
|
" " +
|
||||||
|
obj.day +
|
||||||
|
" " +
|
||||||
|
obj.month +
|
||||||
|
" " +
|
||||||
|
obj.week +
|
||||||
|
(obj.year == "" ? "" : " " + obj.year);
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
CrontabSecond,
|
||||||
|
CrontabMin,
|
||||||
|
CrontabHour,
|
||||||
|
CrontabDay,
|
||||||
|
CrontabMonth,
|
||||||
|
CrontabWeek,
|
||||||
|
CrontabYear,
|
||||||
|
CrontabResult,
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
expression: "resolveExp",
|
||||||
|
hideComponent(value) {
|
||||||
|
// 隐藏部分组件
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.resolveExp();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.pop_btn {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-main {
|
||||||
|
position: relative;
|
||||||
|
margin: 10px auto;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title {
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 34px;
|
||||||
|
padding-top: 6px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-result {
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 25px auto;
|
||||||
|
padding: 15px 10px 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-result .title {
|
||||||
|
position: absolute;
|
||||||
|
top: -28px;
|
||||||
|
left: 50%;
|
||||||
|
width: 140px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: -70px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-result table {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-result table span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-family: arial;
|
||||||
|
line-height: 30px;
|
||||||
|
height: 30px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-result-scroll {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
height: 10em;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<template v-for="(item, index) in options">
|
||||||
|
<template v-if="values.includes(item.value)">
|
||||||
|
<span
|
||||||
|
v-if="(item.raw.listClass == 'default' || item.raw.listClass == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)"
|
||||||
|
:key="item.value"
|
||||||
|
:class="item.raw.cssClass"
|
||||||
|
:index="index"
|
||||||
|
>{{ item.label + " " }}</span
|
||||||
|
>
|
||||||
|
<el-tag
|
||||||
|
v-else
|
||||||
|
:key="item.value"
|
||||||
|
:class="item.raw.cssClass"
|
||||||
|
:disable-transitions="true"
|
||||||
|
:index="index"
|
||||||
|
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
|
||||||
|
>
|
||||||
|
{{ item.label + " " }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-if="unmatch && showValue">
|
||||||
|
{{ unmatchArray | handleArray }}
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "DictTag",
|
||||||
|
props: {
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
value: [Number, String, Array],
|
||||||
|
// 当未找到匹配的数据时，显示value
|
||||||
|
showValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
unmatchArray: [], // 记录未匹配的项
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
values() {
|
||||||
|
if (this.value !== null && typeof this.value !== "undefined") {
|
||||||
|
return Array.isArray(this.value) ? this.value : [String(this.value)];
|
||||||
|
} else {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unmatch() {
|
||||||
|
this.unmatchArray = [];
|
||||||
|
if (this.value !== null && typeof this.value !== "undefined") {
|
||||||
|
// 传入值为非数组
|
||||||
|
if (!Array.isArray(this.value)) {
|
||||||
|
if (this.options.some((v) => v.value == this.value)) return false;
|
||||||
|
this.unmatchArray.push(this.value);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
// 传入值为Array
|
||||||
|
this.value.forEach((item) => {
|
||||||
|
if (!this.options.some((v) => v.value == item))
|
||||||
|
this.unmatchArray.push(item);
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
// 没有value不显示
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
handleArray(array) {
|
||||||
|
if (array.length === 0) return "";
|
||||||
|
return array.reduce((pre, cur) => {
|
||||||
|
return pre + " " + cur;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.el-tag + .el-tag {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,292 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-upload
|
||||||
|
v-if="this.type == 'url'"
|
||||||
|
ref="upload"
|
||||||
|
:action="uploadUrl"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
:headers="headers"
|
||||||
|
:on-error="handleUploadError"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
:show-file-list="false"
|
||||||
|
name="file"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
|
</el-upload>
|
||||||
|
<div ref="editor" :style="styles" class="editor"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Quill from "quill";
|
||||||
|
import "quill/dist/quill.core.css";
|
||||||
|
import "quill/dist/quill.snow.css";
|
||||||
|
import "quill/dist/quill.bubble.css";
|
||||||
|
import {getToken} from "@/utils/auth";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Editor",
|
||||||
|
props: {
|
||||||
|
/* 编辑器的内容 */
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
/* 高度 */
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
/* 最小高度 */
|
||||||
|
minHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
/* 只读 */
|
||||||
|
readOnly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
/* 上传文件大小限制(MB) */
|
||||||
|
fileSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
},
|
||||||
|
/* 类型（base64格式、url格式） */
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "url",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
|
||||||
|
headers: {
|
||||||
|
Authorization: "Bearer " + getToken()
|
||||||
|
},
|
||||||
|
Quill: null,
|
||||||
|
currentValue: "",
|
||||||
|
options: {
|
||||||
|
theme: "snow",
|
||||||
|
bounds: document.body,
|
||||||
|
debug: "warn",
|
||||||
|
modules: {
|
||||||
|
// 工具栏配置
|
||||||
|
toolbar: [
|
||||||
|
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||||
|
["blockquote", "code-block"], // 引用 代码块
|
||||||
|
[{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
|
||||||
|
[{indent: "-1"}, {indent: "+1"}], // 缩进
|
||||||
|
[{size: ["small", false, "large", "huge"]}], // 字体大小
|
||||||
|
[{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
|
||||||
|
[{color: []}, {background: []}], // 字体颜色、字体背景颜色
|
||||||
|
[{align: []}], // 对齐方式
|
||||||
|
["clean"], // 清除文本格式
|
||||||
|
["link", "image", "video"] // 链接、图片、视频
|
||||||
|
],
|
||||||
|
},
|
||||||
|
placeholder: "请输入内容",
|
||||||
|
readOnly: this.readOnly,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styles() {
|
||||||
|
let style = {};
|
||||||
|
if (this.minHeight) {
|
||||||
|
style.minHeight = `${this.minHeight}px`;
|
||||||
|
}
|
||||||
|
if (this.height) {
|
||||||
|
style.height = `${this.height}px`;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
if (val !== this.currentValue) {
|
||||||
|
this.currentValue = val === null ? "" : val;
|
||||||
|
if (this.Quill) {
|
||||||
|
this.Quill.pasteHTML(this.currentValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.Quill = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
const editor = this.$refs.editor;
|
||||||
|
this.Quill = new Quill(editor, this.options);
|
||||||
|
// 如果设置了上传地址则自定义图片上传事件
|
||||||
|
if (this.type == 'url') {
|
||||||
|
let toolbar = this.Quill.getModule("toolbar");
|
||||||
|
toolbar.addHandler("image", (value) => {
|
||||||
|
if (value) {
|
||||||
|
this.$refs.upload.$children[0].$refs.input.click();
|
||||||
|
} else {
|
||||||
|
this.quill.format("image", false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.Quill.pasteHTML(this.currentValue);
|
||||||
|
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||||
|
const html = this.$refs.editor.children[0].innerHTML;
|
||||||
|
const text = this.Quill.getText();
|
||||||
|
const quill = this.Quill;
|
||||||
|
this.currentValue = html;
|
||||||
|
this.$emit("input", html);
|
||||||
|
this.$emit("on-change", {html, text, quill});
|
||||||
|
});
|
||||||
|
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||||
|
this.$emit("on-text-change", delta, oldDelta, source);
|
||||||
|
});
|
||||||
|
this.Quill.on("selection-change", (range, oldRange, source) => {
|
||||||
|
this.$emit("on-selection-change", range, oldRange, source);
|
||||||
|
});
|
||||||
|
this.Quill.on("editor-change", (eventName, ...args) => {
|
||||||
|
this.$emit("on-editor-change", eventName, ...args);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 上传前校检格式和大小
|
||||||
|
handleBeforeUpload(file) {
|
||||||
|
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
|
||||||
|
const isJPG = type.includes(file.type);
|
||||||
|
// 检验文件格式
|
||||||
|
if (!isJPG) {
|
||||||
|
this.$message.error(`图片格式错误!`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 校检文件大小
|
||||||
|
if (this.fileSize) {
|
||||||
|
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||||
|
if (!isLt) {
|
||||||
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
handleUploadSuccess(res, file) {
|
||||||
|
// 如果上传成功
|
||||||
|
if (res.data.code == 200) {
|
||||||
|
// 获取富文本组件实例
|
||||||
|
let quill = this.Quill;
|
||||||
|
// 获取光标所在位置
|
||||||
|
let length = quill.getSelection().index;
|
||||||
|
// 插入图片 res.data.url为服务器返回的图片地址
|
||||||
|
quill.insertEmbed(length, "image", res.data.url);
|
||||||
|
// 调整光标到最后
|
||||||
|
quill.setSelection(length + 1);
|
||||||
|
} else {
|
||||||
|
this.$message.error("图片插入失败");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleUploadError() {
|
||||||
|
this.$message.error("图片插入失败");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.editor, .ql-toolbar {
|
||||||
|
white-space: pre-wrap !important;
|
||||||
|
line-height: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quill-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
||||||
|
content: "请输入链接地址:";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||||
|
border-right: 0px;
|
||||||
|
content: "保存";
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
||||||
|
content: "请输入视频地址:";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||||
|
content: "14px";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||||
|
content: "10px";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
||||||
|
content: "18px";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
||||||
|
content: "32px";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||||
|
content: "文本";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||||
|
content: "标题1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||||
|
content: "标题2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||||
|
content: "标题3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||||
|
content: "标题4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||||
|
content: "标题5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||||
|
content: "标题6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||||
|
content: "标准字体";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
||||||
|
content: "衬线字体";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||||
|
content: "等宽字体";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
import app from './modules/app'
|
||||||
|
import dict from './modules/dict'
|
||||||
|
import user from './modules/user'
|
||||||
|
import tagsView from './modules/tagsView'
|
||||||
|
import permission from './modules/permission'
|
||||||
|
import settings from './modules/settings'
|
||||||
|
import getters from './getters'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
app,
|
||||||
|
dict,
|
||||||
|
user,
|
||||||
|
tagsView,
|
||||||
|
permission,
|
||||||
|
settings
|
||||||
|
},
|
||||||
|
getters
|
||||||
|
})
|
||||||
|
|
||||||
|
export default store
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import Dict from './Dict'
|
||||||
|
import {mergeOptions} from './DictOptions'
|
||||||
|
|
||||||
|
export default function (Vue, options) {
|
||||||
|
mergeOptions(options)
|
||||||
|
Vue.mixin({
|
||||||
|
data() {
|
||||||
|
if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
const dict = new Dict()
|
||||||
|
dict.owner = this
|
||||||
|
return {
|
||||||
|
dict
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (!(this.dict instanceof Dict)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
options.onCreated && options.onCreated(this.dict)
|
||||||
|
this.dict.init(this.$options.dicts).then(() => {
|
||||||
|
options.onReady && options.onReady(this.dict)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$emit('dictReady', this.dict)
|
||||||
|
if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) {
|
||||||
|
this.$options.methods.onDictReady.call(this, this.dict)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,390 @@
|
||||||
|
import {parseTime} from './muyu'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格时间格式化
|
||||||
|
*/
|
||||||
|
export function formatDate(cellValue) {
|
||||||
|
if (cellValue == null || cellValue == "") return "";
|
||||||
|
var date = new Date(cellValue)
|
||||||
|
var year = date.getFullYear()
|
||||||
|
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
|
||||||
|
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
||||||
|
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
|
||||||
|
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||||
|
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
||||||
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} time
|
||||||
|
* @param {string} option
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export function formatTime(time, option) {
|
||||||
|
if (('' + time).length === 10) {
|
||||||
|
time = parseInt(time) * 1000
|
||||||
|
} else {
|
||||||
|
time = +time
|
||||||
|
}
|
||||||
|
const d = new Date(time)
|
||||||
|
const now = Date.now()
|
||||||
|
|
||||||
|
const diff = (now - d) / 1000
|
||||||
|
|
||||||
|
if (diff < 30) {
|
||||||
|
return '刚刚'
|
||||||
|
} else if (diff < 3600) {
|
||||||
|
// less 1 hour
|
||||||
|
return Math.ceil(diff / 60) + '分钟前'
|
||||||
|
} else if (diff < 3600 * 24) {
|
||||||
|
return Math.ceil(diff / 3600) + '小时前'
|
||||||
|
} else if (diff < 3600 * 24 * 2) {
|
||||||
|
return '1天前'
|
||||||
|
}
|
||||||
|
if (option) {
|
||||||
|
return parseTime(time, option)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
d.getMonth() +
|
||||||
|
1 +
|
||||||
|
'月' +
|
||||||
|
d.getDate() +
|
||||||
|
'日' +
|
||||||
|
d.getHours() +
|
||||||
|
'时' +
|
||||||
|
d.getMinutes() +
|
||||||
|
'分'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} url
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
export function getQueryObject(url) {
|
||||||
|
url = url == null ? window.location.href : url
|
||||||
|
const search = url.substring(url.lastIndexOf('?') + 1)
|
||||||
|
const obj = {}
|
||||||
|
const reg = /([^?&=]+)=([^?&=]*)/g
|
||||||
|
search.replace(reg, (rs, $1, $2) => {
|
||||||
|
const name = decodeURIComponent($1)
|
||||||
|
let val = decodeURIComponent($2)
|
||||||
|
val = String(val)
|
||||||
|
obj[name] = val
|
||||||
|
return rs
|
||||||
|
})
|
||||||
|
return obj
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} input value
|
||||||
|
* @returns {number} output value
|
||||||
|
*/
|
||||||
|
export function byteLength(str) {
|
||||||
|
// returns the byte length of an utf8 string
|
||||||
|
let s = str.length
|
||||||
|
for (var i = str.length - 1; i >= 0; i--) {
|
||||||
|
const code = str.charCodeAt(i)
|
||||||
|
if (code > 0x7f && code <= 0x7ff) s++
|
||||||
|
else if (code > 0x7ff && code <= 0xffff) s += 2
|
||||||
|
if (code >= 0xDC00 && code <= 0xDFFF) i--
|
||||||
|
}
|
||||||
|
return s
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Array} actual
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
export function cleanArray(actual) {
|
||||||
|
const newArray = []
|
||||||
|
for (let i = 0; i < actual.length; i++) {
|
||||||
|
if (actual[i]) {
|
||||||
|
newArray.push(actual[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return newArray
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} json
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
export function param(json) {
|
||||||
|
if (!json) return ''
|
||||||
|
return cleanArray(
|
||||||
|
Object.keys(json).map(key => {
|
||||||
|
if (json[key] === undefined) return ''
|
||||||
|
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
|
||||||
|
})
|
||||||
|
).join('&')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} url
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
export function param2Obj(url) {
|
||||||
|
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
|
||||||
|
if (!search) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
const obj = {}
|
||||||
|
const searchArr = search.split('&')
|
||||||
|
searchArr.forEach(v => {
|
||||||
|
const index = v.indexOf('=')
|
||||||
|
if (index !== -1) {
|
||||||
|
const name = v.substring(0, index)
|
||||||
|
const val = v.substring(index + 1, v.length)
|
||||||
|
obj[name] = val
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return obj
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} val
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export function html2Text(val) {
|
||||||
|
const div = document.createElement('div')
|
||||||
|
div.innerHTML = val
|
||||||
|
return div.textContent || div.innerText
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Merges two objects, giving the last one precedence
|
||||||
|
* @param {Object} target
|
||||||
|
* @param {(Object|Array)} source
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
export function objectMerge(target, source) {
|
||||||
|
if (typeof target !== 'object') {
|
||||||
|
target = {}
|
||||||
|
}
|
||||||
|
if (Array.isArray(source)) {
|
||||||
|
return source.slice()
|
||||||
|
}
|
||||||
|
Object.keys(source).forEach(property => {
|
||||||
|
const sourceProperty = source[property]
|
||||||
|
if (typeof sourceProperty === 'object') {
|
||||||
|
target[property] = objectMerge(target[property], sourceProperty)
|
||||||
|
} else {
|
||||||
|
target[property] = sourceProperty
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return target
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} element
|
||||||
|
* @param {string} className
|
||||||
|
*/
|
||||||
|
export function toggleClass(element, className) {
|
||||||
|
if (!element || !className) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let classString = element.className
|
||||||
|
const nameIndex = classString.indexOf(className)
|
||||||
|
if (nameIndex === -1) {
|
||||||
|
classString += '' + className
|
||||||
|
} else {
|
||||||
|
classString =
|
||||||
|
classString.substr(0, nameIndex) +
|
||||||
|
classString.substr(nameIndex + className.length)
|
||||||
|
}
|
||||||
|
element.className = classString
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} type
|
||||||
|
* @returns {Date}
|
||||||
|
*/
|
||||||
|
export function getTime(type) {
|
||||||
|
if (type === 'start') {
|
||||||
|
return new Date().getTime() - 3600 * 1000 * 24 * 90
|
||||||
|
} else {
|
||||||
|
return new Date(new Date().toDateString())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Function} func
|
||||||
|
* @param {number} wait
|
||||||
|
* @param {boolean} immediate
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
|
export function debounce(func, wait, immediate) {
|
||||||
|
let timeout, args, context, timestamp, result
|
||||||
|
|
||||||
|
const later = function () {
|
||||||
|
// 据上一次触发时间间隔
|
||||||
|
const last = +new Date() - timestamp
|
||||||
|
|
||||||
|
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
||||||
|
if (last < wait && last > 0) {
|
||||||
|
timeout = setTimeout(later, wait - last)
|
||||||
|
} else {
|
||||||
|
timeout = null
|
||||||
|
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
||||||
|
if (!immediate) {
|
||||||
|
result = func.apply(context, args)
|
||||||
|
if (!timeout) context = args = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return function (...args) {
|
||||||
|
context = this
|
||||||
|
timestamp = +new Date()
|
||||||
|
const callNow = immediate && !timeout
|
||||||
|
// 如果延时不存在，重新设定延时
|
||||||
|
if (!timeout) timeout = setTimeout(later, wait)
|
||||||
|
if (callNow) {
|
||||||
|
result = func.apply(context, args)
|
||||||
|
context = args = null
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is just a simple version of deep copy
|
||||||
|
* Has a lot of edge cases bug
|
||||||
|
* If you want to use a perfect deep copy, use lodash's _.cloneDeep
|
||||||
|
* @param {Object} source
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
export function deepClone(source) {
|
||||||
|
if (!source && typeof source !== 'object') {
|
||||||
|
throw new Error('error arguments', 'deepClone')
|
||||||
|
}
|
||||||
|
const targetObj = source.constructor === Array ? [] : {}
|
||||||
|
Object.keys(source).forEach(keys => {
|
||||||
|
if (source[keys] && typeof source[keys] === 'object') {
|
||||||
|
targetObj[keys] = deepClone(source[keys])
|
||||||
|
} else {
|
||||||
|
targetObj[keys] = source[keys]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return targetObj
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Array} arr
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
export function uniqueArr(arr) {
|
||||||
|
return Array.from(new Set(arr))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export function createUniqueString() {
|
||||||
|
const timestamp = +new Date() + ''
|
||||||
|
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
|
||||||
|
return (+(randomNum + timestamp)).toString(32)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if an element has a class
|
||||||
|
* @param {HTMLElement} elm
|
||||||
|
* @param {string} cls
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
export function hasClass(ele, cls) {
|
||||||
|
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add class to element
|
||||||
|
* @param {HTMLElement} elm
|
||||||
|
* @param {string} cls
|
||||||
|
*/
|
||||||
|
export function addClass(ele, cls) {
|
||||||
|
if (!hasClass(ele, cls)) ele.className += ' ' + cls
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove class from element
|
||||||
|
* @param {HTMLElement} elm
|
||||||
|
* @param {string} cls
|
||||||
|
*/
|
||||||
|
export function removeClass(ele, cls) {
|
||||||
|
if (hasClass(ele, cls)) {
|
||||||
|
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
|
||||||
|
ele.className = ele.className.replace(reg, ' ')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function makeMap(str, expectsLowerCase) {
|
||||||
|
const map = Object.create(null)
|
||||||
|
const list = str.split(',')
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
map[list[i]] = true
|
||||||
|
}
|
||||||
|
return expectsLowerCase
|
||||||
|
? val => map[val.toLowerCase()]
|
||||||
|
: val => map[val]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const exportDefault = 'export default '
|
||||||
|
|
||||||
|
export const beautifierConf = {
|
||||||
|
html: {
|
||||||
|
indent_size: '2',
|
||||||
|
indent_char: ' ',
|
||||||
|
max_preserve_newlines: '-1',
|
||||||
|
preserve_newlines: false,
|
||||||
|
keep_array_indentation: false,
|
||||||
|
break_chained_methods: false,
|
||||||
|
indent_scripts: 'separate',
|
||||||
|
brace_style: 'end-expand',
|
||||||
|
space_before_conditional: true,
|
||||||
|
unescape_strings: false,
|
||||||
|
jslint_happy: false,
|
||||||
|
end_with_newline: true,
|
||||||
|
wrap_line_length: '110',
|
||||||
|
indent_inner_html: true,
|
||||||
|
comma_first: false,
|
||||||
|
e4x: true,
|
||||||
|
indent_empty_lines: true
|
||||||
|
},
|
||||||
|
js: {
|
||||||
|
indent_size: '2',
|
||||||
|
indent_char: ' ',
|
||||||
|
max_preserve_newlines: '-1',
|
||||||
|
preserve_newlines: false,
|
||||||
|
keep_array_indentation: false,
|
||||||
|
break_chained_methods: false,
|
||||||
|
indent_scripts: 'normal',
|
||||||
|
brace_style: 'end-expand',
|
||||||
|
space_before_conditional: true,
|
||||||
|
unescape_strings: false,
|
||||||
|
jslint_happy: true,
|
||||||
|
end_with_newline: true,
|
||||||
|
wrap_line_length: '110',
|
||||||
|
indent_inner_html: true,
|
||||||
|
comma_first: false,
|
||||||
|
e4x: true,
|
||||||
|
indent_empty_lines: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 首字母大小
|
||||||
|
export function titleCase(str) {
|
||||||
|
return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下划转驼峰
|
||||||
|
export function camelCase(str) {
|
||||||
|
return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase())
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isNumberStr(str) {
|
||||||
|
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue