1、前端封装通用日期组件选择日期mixins
This commit is contained in:
parent
507cf65cf2
commit
17d4d31461
|
|
@ -0,0 +1,52 @@
|
||||||
|
export const pickerOptions = {
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
//日期组件
|
||||||
|
pickerOptions: {
|
||||||
|
shortcuts: [{
|
||||||
|
text: '今天',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
end.setTime(start.getTime() + 3600 * 1000 * 24);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '昨天',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近一周',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近一个月',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近三个月',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -28,6 +28,7 @@
|
||||||
style="width: 240px"
|
style="width: 240px"
|
||||||
value-format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
||||||
type="daterange"
|
type="daterange"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
range-separator="-"
|
range-separator="-"
|
||||||
start-placeholder="开始日期"
|
start-placeholder="开始日期"
|
||||||
end-placeholder="结束日期"
|
end-placeholder="结束日期"
|
||||||
|
|
@ -267,10 +268,12 @@
|
||||||
<script>
|
<script>
|
||||||
import {listWord, getWord, delWord, addWord, updateWord, getWordRPC} from "@/api/business/english/word";
|
import {listWord, getWord, delWord, addWord, updateWord, getWordRPC} from "@/api/business/english/word";
|
||||||
import {getOneEnglishApi} from "@/api/business/openapi/oneenglish";
|
import {getOneEnglishApi} from "@/api/business/openapi/oneenglish";
|
||||||
|
import {pickerOptions} from "@/layout/mixin/PickerOptions"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Word",
|
name: "Word",
|
||||||
dicts: ['english_collect', 'english_top'],
|
dicts: ['english_collect', 'english_top'],
|
||||||
|
mixins: [pickerOptions],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 抽屉遮罩层
|
// 抽屉遮罩层
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,7 @@
|
||||||
style="width: 240px"
|
style="width: 240px"
|
||||||
value-format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
||||||
type="daterange"
|
type="daterange"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
range-separator="-"
|
range-separator="-"
|
||||||
start-placeholder="开始日期"
|
start-placeholder="开始日期"
|
||||||
end-placeholder="结束日期"
|
end-placeholder="结束日期"
|
||||||
|
|
@ -213,10 +214,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {listLog, delLog, getApiName} from "@/api/business/log/apilog";
|
import {listLog, delLog, getApiName} from "@/api/business/log/apilog";
|
||||||
|
import {pickerOptions} from "@/layout/mixin/PickerOptions"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Apilog",
|
name: "Apilog",
|
||||||
dicts: ['request_status', 'request_method'],
|
dicts: ['request_status', 'request_method'],
|
||||||
|
mixins: [pickerOptions],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
|
|
@ -242,11 +245,11 @@ export default {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
apiName: null,
|
apiName: null,
|
||||||
url:null,
|
url: null,
|
||||||
request:null,
|
request: null,
|
||||||
response:null,
|
response: null,
|
||||||
isSuccess:null,
|
isSuccess: null,
|
||||||
method:null,
|
method: null,
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {},
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="daterangeCreateTime"
|
v-model="daterangeCreateTime"
|
||||||
size="small"
|
size="small"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
style="width: 240px"
|
style="width: 240px"
|
||||||
value-format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
||||||
type="daterange"
|
type="daterange"
|
||||||
|
|
@ -147,9 +148,11 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {listWebmagicLog, delWebmagicLog} from "@/api/business/log/reptilelog";
|
import {listWebmagicLog, delWebmagicLog} from "@/api/business/log/reptilelog";
|
||||||
|
import {pickerOptions} from "@/layout/mixin/PickerOptions"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ReptileLog",
|
name: "ReptileLog",
|
||||||
|
mixins: [pickerOptions],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
|
|
@ -225,8 +228,8 @@ export default {
|
||||||
|
|
||||||
//回显的时候正常回显
|
//回显的时候正常回显
|
||||||
if (beginRequestTime != null && '' !== beginRequestTime && endRequestTime != null && '' !== endRequestTime) {
|
if (beginRequestTime != null && '' !== beginRequestTime && endRequestTime != null && '' !== endRequestTime) {
|
||||||
this.queryParams.beginRequestTime = beginRequestTime ;
|
this.queryParams.beginRequestTime = beginRequestTime;
|
||||||
this.queryParams.endRequestTime = endRequestTime ;
|
this.queryParams.endRequestTime = endRequestTime;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,11 +12,12 @@
|
||||||
placeholder="选择日期"
|
placeholder="选择日期"
|
||||||
format="yyyy 年 MM 月 dd 日"
|
format="yyyy 年 MM 月 dd 日"
|
||||||
value-format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
||||||
|
@change="getHistoryTopSearch"
|
||||||
:picker-options="pickerOptions">
|
:picker-options="pickerOptions">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="getHistoryTopSearch">查询</el-button>
|
<el-button type="" @click="getTopsearch">重置</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,7 +30,9 @@
|
||||||
<span>{{ douyin.word }}</span>
|
<span>{{ douyin.word }}</span>
|
||||||
<el-divider direction="vertical"></el-divider>
|
<el-divider direction="vertical"></el-divider>
|
||||||
<span style="color: red;margin-left: 25px">{{ douyin.label }}</span>
|
<span style="color: red;margin-left: 25px">{{ douyin.label }}</span>
|
||||||
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ douyin.createTime }}</span>
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
|
||||||
|
douyin.createTime
|
||||||
|
}}</span>
|
||||||
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
@ -40,7 +43,9 @@
|
||||||
<span>{{ weibo.hotword }}</span>
|
<span>{{ weibo.hotword }}</span>
|
||||||
<el-divider direction="vertical"></el-divider>
|
<el-divider direction="vertical"></el-divider>
|
||||||
<span style="color: red;margin-left: 25px">{{ weibo.hottag }}</span>
|
<span style="color: red;margin-left: 25px">{{ weibo.hottag }}</span>
|
||||||
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ weibo.createTime }}</span>
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
|
||||||
|
weibo.createTime
|
||||||
|
}}</span>
|
||||||
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
@ -83,7 +88,9 @@
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<div v-for="wechat in topsearchList.wechatList" :key="wechat.id" class="douyin">
|
<div v-for="wechat in topsearchList.wechatList" :key="wechat.id" class="douyin">
|
||||||
<span>{{ wechat.word }}</span>
|
<span>{{ wechat.word }}</span>
|
||||||
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{ wechat.createTime }}</span>\
|
<span style="font-size: 13px;font-weight: 500;margin-left: 25px;float: right">{{
|
||||||
|
wechat.createTime
|
||||||
|
}}</span>\
|
||||||
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
@ -92,7 +99,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 回到顶部-->
|
<!-- 回到顶部-->
|
||||||
<el-backtop target="" :bottom="100">
|
<el-backtop target="" :bottom="100">
|
||||||
</el-backtop>
|
</el-backtop>
|
||||||
|
|
@ -157,18 +163,19 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
//获取历史热搜榜
|
//获取历史热搜榜
|
||||||
getHistoryTopSearch() {
|
getHistoryTopSearch() {
|
||||||
this.topsearchList={}
|
this.topsearchList = {}
|
||||||
this.loading = true
|
this.loading = true
|
||||||
console.log(this.dateValue)
|
getHistoryTopSearch(this.dateValue).then(res => {
|
||||||
getHistoryTopSearch(this.dateValue).then(res =>{
|
|
||||||
this.loading = false
|
this.loading = false
|
||||||
this.topsearchList=res.data
|
this.topsearchList = res.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
//获取热搜榜
|
//获取热搜榜
|
||||||
getTopsearch() {
|
getTopsearch() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
|
this.dateValue = null
|
||||||
|
|
||||||
getTopsearch().then(res => {
|
getTopsearch().then(res => {
|
||||||
this.topsearchList = res.data
|
this.topsearchList = res.data
|
||||||
this.loading = false
|
this.loading = false
|
||||||
|
|
|
||||||
|
|
@ -98,10 +98,15 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import {listSinaNews, delSinaNews,getType} from "@/api/business/webmagic/sina/sinaNews"
|
import {listSinaNews, delSinaNews, getType} from "@/api/business/webmagic/sina/sinaNews"
|
||||||
|
|
||||||
|
import {pickerOptions} from "@/layout/mixin/PickerOptions"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "SinaNews",
|
name: "SinaNews",
|
||||||
|
|
||||||
|
mixins: [pickerOptions],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
|
|
@ -138,44 +143,9 @@ export default {
|
||||||
daterangeCreateTime: [],
|
daterangeCreateTime: [],
|
||||||
|
|
||||||
//类型集合
|
//类型集合
|
||||||
typeList:[],
|
typeList: [],
|
||||||
|
|
||||||
|
|
||||||
//日期组件
|
|
||||||
pickerOptions: {
|
|
||||||
shortcuts: [{
|
|
||||||
text: '昨天',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: '最近一周',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: '最近一个月',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: '最近三个月',
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -186,8 +156,8 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
//获取类型
|
//获取类型
|
||||||
getType() {
|
getType() {
|
||||||
getType().then(res =>{
|
getType().then(res => {
|
||||||
this.typeList=res.data
|
this.typeList = res.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue