1、前端封装通用日期组件选择日期mixins

pull/254/head
xjs 4 years ago
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…
Cancel
Save