<template>
<div id="app" style="text-align: center;">
<h1>{{ msg | format}}</h1>
</div>
</template> <script>
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
name: 'app',
data () {
return {
msg: new Date
}
},
filters:{
format(val){
// return moment(val).calendar() //默认为英文、引入后设置格式
// return moment(val).format('YYYY年MM月DD日') //自定义方案1，简写：LL 或 ll
// return moment(val).format('YYYY-MM-DD HH:mm:ss') //大写HH为24小时制，小写dd为星期
// return moment(val).format('hh:mm:ss a') //12小时制
// return moment(val).format('YYYYMMDDHHmmss') //纯数字日期
// return moment(val).subtract(1, "days").format("YYYY-MM-DD HH:mm:ss") //1天前(add:后)：weeks、months、years、hours、minutes、seconds
// return moment(val).format("LLLL") //全中文日期
// return moment(val).format("dddd") //获取星期
// return moment(val).valueOf() //完整的时间戳
// return moment(val).format('X') //秒结尾
// return moment(val).format('x') //毫秒结尾
return moment(val).format('LLLL')
}
}
}
</script>
常用时间范围设置：
//获取本日、本周week、本月month、本年year，注意没有yesterday,可以通过subtract（1，'days'）设置，这里带xxx-s！！！
const startDate = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
const startDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
如果是从今天开始到80年后：
[moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').add(80, "years").format('YYYY-MM-DD HH:mm:ss')],// 当前时间2019-12-25 00:00:00——2099-12-31 23:59:59【模板】：
const pickerOptionsTime = {
shortcuts: [
{
text: '昨天',
onClick (picker) {
const date = [moment().startOf('day').subtract(1, "days").format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').subtract(1, "days").format('YYYY-MM-DD HH:mm:ss')]
picker.$emit('pick', date)
}
}, {
text: '当天',
onClick (picker) {
const date = [moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')]
picker.$emit('pick', date)
}
}, {
text: '本周',
onClick (picker) {
const date = [moment().startOf('week').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('week').format('YYYY-MM-DD HH:mm:ss')]
picker.$emit('pick', date)
}
}
]
}封装的elementUI搜索表单：
<template>
<div class="search-text-form">
<el-form style="display:inline-block" inline :model="param" :rules="rules" ref="param">
<el-form-item label="起止时间：" class="search-text-form-item" prop="time">
<el-date-picker
clearable
id="popover_select_time"
v-model="param.time"
type="datetimerange"
:picker-options="pickerOptions"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
<el-form-item label="任务状态：" class="search-text-form-item" prop="status">
<el-select
id="popover_select_status"
v-model="param.status"
placeholder="请选择任务状态"
clearable
>
<el-option
style="text-align: center;"
v-for="(item,index) in statusOptions"
:key="index"
:label="item.cname"
:value="item.ename"
/>
</el-select>
</el-form-item>
<el-form-item label="关键字：" class="search-text-form-item" prop="kwd">
<el-input
id="popover_select_kwd"
style="width: 180px;"
v-model="param.kwd"
placeholder="多个关键字，使用空格分开"
clearable
/>
</el-form-item>
<el-form-item class="search-text-form-item">
<el-button
round
id="popover_select_clear"
:disabled="disabledSearch"
@click="searchFormChange('clear')"
>清空</el-button>
<el-button
round
id="popover_select_search"
style="float: right"
type="primary"
plain
@click="searchFormChange(param)"
>查询</el-button>
</el-form-item>
</el-form>
</div>
</template> <script>
import { pickerOptionsTime } from "@/utils/appManage"; // 公共的匹配值
export default {
props: {
param: {
type: Object,
default() {
return {
time: [],
status: "",
kwd: ""
};
}
}
},
computed: {
rules(){
return {
time: [
{ required: false, message: '请选择起止时间', trigger: 'select' ,type:'array'}
],
status: [
{ required: true, message: '请选择任务状态', trigger: 'select'}
],
kwd: [
{ required: false, message: '空格隔开，不可为空', trigger: 'blur' }
]
}
},
statusOptions(){
return [
{cname:'成功',ename:'success'},
{cname:'失败',ename:'fail'},
{cname:'运行中',ename:'running'},
{cname:'待调度',ename:'tobescheduled'},
{cname:'已终止',ename:'killed'},
]
},
pickerOptions(){
return pickerOptionsTime ||[]
},
disabledSearch() {
return !(this.param.status || this.param.kwd || (Array.isArray(this.param.time) && this.param.time.length > 0)
);
}
},
methods: {
searchFormChange(val) {
console.log(val,6666);
if(val==='clear'){
for(let key in this.param){
this.param[key] = key==='time'?[]:''
}
}else{
this.$refs['param'].validate((valid) => {
if (valid) {
this.$emit('call-back',val)
}
})
}
}
},
};
</script>