当进入页面时可以自动选定当前年月
HTML:
<template>
<div class="app-container">
<el-form
>
<el-form-item label="选择月份">
<div class="block">
<el-date-picker
v-model="selectofearmonth"
type="month"
placeholder="选择查询月份"
>
</el-date-picker>
</div>
</el-form-item>
</el-form>
<el-table :data="effect_salesList">
<el-table-column label="年份" align="center" prop="syear" />
<!-- <el-table-column label="季度" align="center" prop="squarter" /> -->
<el-table-column label="月份" align="center" prop="smonth" />
<!-- <el-table-column label="部门名称" align="center" prop="deptLine"/> -->
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
JS:
<script>
import {listEffect_sales} from "@/api/person/sales";
import {} from "@/utils/ruoyi";
export default {
name: "sales",
data() {
return {
// 总条数
total: 0,
// 表格数据
effect_salesList: [],
// 弹出层标题
title: "",
selectofearmonth: "",
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
syear: "",
smonth: "",
},
// 表单参数
form: {},
// 表单校验
rules: {},
};
},
watch: {
selectofearmonth: {
handler(newVal, oldVal) {
this.queryParams.syear = this.parseTime(newVal, "{y}");
this.queryParams.smonth = this.parseTime(newVal, "{m}");
this.getList();
},
},
},
created() {
this.getList();
//设置默认值为this.selectofearmonth
this.selectofearmonth = this.parseTime(new Date(), "{y}-{m}");
//截取字符串 yyyy-mm 赋初值
this.queryParams.syear = parseInt(this.selectofearmonth)
this.queryParams.smonth = parseInt(this.selectofearmonth.substring(4).substring(0).substring(1));
},
methods: {
/** 查询表 */
getList() {
listEffect_sales(this.queryParams).then((response) => {
this.effect_salesList = response.rows;
this.total = response.total;
});
},
},
};
</script>
// "@/utils/ruoyi"组件中日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
结果图:(10月后台无数据)
点击其他月份:
版权声明:本文为m0_60540878原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。