自己实际用：
<template>
<div>
<el-form :inline="true" :model="searchForm" style="margin-top:20px;">
<el-row>
<el-col :span="2">
<el-form-item>
<span>注册日期:</span>
</el-form-item>
</el-col>
<el-col :span="2" style="margin-left:-30px;">
<el-form-item>
<el-button type="primary" @click="day" plain> 昨天 </el-button>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item>
<el-button type="primary" @click="week" plain>近一周 </el-button>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item>
<el-button type="primary" @click="month" plain>近一个月</el-button>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form>
<el-form-item label="自定义日期：">
<el-date-picker
v-model="time"
type="datetimerange"
align="right"
unlink-panels
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="getTime"
></el-date-picker>
</el-form-item>
</el-form>
</el-col>
<el-col :span="2">
<el-form-item>
<el-button type="primary" @click="search(item)">查询</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table :data="tableData" border style=" 100%;margin-top:50px;" v-loading="loading">
<el-table-column fixed prop="id" label="序号" width="100" align="center"></el-table-column>
<el-table-column prop="name" align="center" label="姓名" width="110"></el-table-column>
<el-table-column label="角色" width="80" align="center">
<template slot-scope="scope">{{workerType(scope.row).text}}</template>
</el-table-column>
<el-table-column label="所属地区" width="150" align="center">
<template slot-scope="scope">{{scope.row.province}}—{{scope.row.city}}</template>
</el-table-column>
<el-table-column label="状态" width="110" align="center">
<template slot-scope="scope">{{stateType(scope.row).text}}</template>
</el-table-column>
<el-table-column prop="hospitalName" label="服务医院" width="170" align="center"></el-table-column>
<el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
<el-table-column prop="source" label="注册来源" width="110" align="center"></el-table-column>
<el-table-column prop="tjName" label="推荐人" width="110" align="center"></el-table-column>
<el-table-column prop="managerName" label="区域经理" width="110" align="center"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageParams.size"
layout="total, prev, pager, next"
:total="pageParams.totalCount"
></el-pagination>
<el-button type="primary" @click="export2Excel">导出</el-button>
</div>
</template>
<script>
import { DateDay } from "utils/formData"; //时间转化格式
import queryString from "querystring";
import page from "data/page";
export default {
name: "signUser",
mixins: [page],
data() {
return {
loading: false,
tableData: [],
addSum: {},
addallSum: {},
searchForm: {
page: 0,
size: 10,
beginTime: "",
endTime: ""
},
time: "",
staday: "",
endday: "",
staweek: "",
endweek: "",
stamonth: "",
endmonth: "",
dayFalse: ""
};
},
mounted() {
this.search();
this.getaddSum();
this.getaddallSum();
},
methods: {
export2Excel() {
require.ensure([], () => {
const {
export_json_to_excel
} = require("../../../vendor/Export2Excel");
const tHeader = [
"序号",
"姓名",
"角色",
"所属地区",
"状态",
"服务医院",
"注册时间",
"注册来源",
"推荐人",
"区域经理"
]; //对应表格输出的title
const filterVal = [
"id",
"name",
"workerType",
"province",
"state",
"hospitalName",
"createTime",
"source",
"tjName",
"managerName"
]; // 对应表格输出的数据
const list = this.tableData;
list.forEach(function(value, index, array) {
value.province = value.province + "-" + value.city;
});
const data = this.formatJson(filterVal, list);
data.forEach(function(value, index, array) {
if (value[2] == 100) {
value[2] = "医生";
} else if (value[2] == 200) {
value[2] = "护士";
} else if (value[2] == 300) {
value[2] = "其他";
} else {
value[2] = value[2];
}
if (value[4] == -1) {
value[4] = "待审核";
} else if (value[4] == 0) {
value[4] = "正常";
} else if (value[4] == -2) {
value[4] = "被拒绝";
} else if (value[4] == -2) {
value[4] = "被拒绝";
} else if (value[4] == 10) {
value[4] = "信息未完善";
} else if (value[4] == 20) {
value[4] = "未实名认证";
} else {
value[4] = value[4];
}
});
const excelTitle =
this.searchForm.beginTime + "至" + this.searchForm.endTime;
export_json_to_excel(tHeader, data, excelTitle); //对应下载文件的名字
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
num(s) {
return s < 10 ? "0" + s : s;
},
getTime() {
// console.log(this.time);
this.dayFalse = "4";
this.searchForm.beginTime = this.time[0];
this.searchForm.endTime = this.time[1];
},
day() {
let day = new Date();
day.setTime(day.getTime() - 24 * 60 * 60 * 1000);
let dayOld =
day.getFullYear() +
"-" +
this.num(day.getMonth() + 1) +
"-" +
this.num(day.getDate());
this.staday = dayOld + " " + "00:00:00";
this.endday = dayOld + " " + "24:00:00";
this.dayFalse = "1";
this.search();
},
week() {
let nowdate = new Date();
nowdate.setTime(nowdate.getTime());
var dayDate =
nowdate.getFullYear() +
"-" +
this.num(nowdate.getMonth() + 1) +
"-" +
this.num(nowdate.getDate());
let week = new Date(nowdate - 6 * 24 * 3600 * 1000);
let y = week.getFullYear();
let m = week.getMonth() + 1;
let d = week.getDate();
let formatwdate = y + "-" + this.num(m) + "-" + this.num(d);
this.staweek = formatwdate + " " + "00:00:00";
this.endweek = dayDate + " " + "24:00:00";
// console.log(this.staweek, this.endweek);
this.dayFalse = "2";
this.search();
},
month() {
let nowdate = new Date();
nowdate.setMonth(nowdate.getMonth());
let y = nowdate.getFullYear();
let m = nowdate.getMonth() + 1;
let d = nowdate.getDate();
let month = y + "-" + this.num(m) + "-" + this.num(d);
this.endmonth = month + " " + "24:00:00";
this.stamonth = DateDay(nowdate) + " " + "00:00:00";
this.dayFalse = "3";
this.search();
},
// 查询
search() {
this.getaddSum();
this.getaddallSum();
this.loading = true;
this.searchForm.page = this.currentPage - 1;
this.searchForm.size = 10;
if (this.dayFalse == "1") {
this.searchForm.beginTime = this.staday;
this.searchForm.endTime = this.endday;
} else if (this.dayFalse == "2") {
this.searchForm.beginTime = this.staweek;
this.searchForm.endTime = this.endweek;
} else if (this.dayFalse == "3") {
this.searchForm.beginTime = this.stamonth;
this.searchForm.endTime = this.endmonth;
} else if (this.dayFalse == "4") {
this.searchForm.beginTime = this.searchForm.beginTime;
this.searchForm.endTime = this.searchForm.endTime;
} else {
this.searchForm.beginTime = "";
this.searchForm.endTime = "";
}
this.axios
.post("/tj/register/list", this.searchForm)
.then(res => {
if (res.data.code == 200) {
this.loading = false;
if (!res.data) return;
this.tableData = res.data.data.list;
this.dayFalse = "";
// console.log("this.tableData", this.tableData);
this.setPage(res.data.data);
}
})
.catch(err => {
this.$message(err.message);
});
},
getaddSum() {
var dayNow = new Date();
dayNow.setTime(dayNow.getTime());
var dayDate =
dayNow.getFullYear() +
"-" +
(dayNow.getMonth() + 1) +
"-" +
dayNow.getDate();
// console.log(dayDate);
let form = {
beginTime: dayDate + " " + "00:00:00",
endTime: dayDate + " " + "24:00:00"
};
if (this.dayFalse == "1") {
form.beginTime = this.staday;
form.endTime = this.endday;
} else if (this.dayFalse == "2") {
form.beginTime = this.staweek;
form.endTime = this.endweek;
} else if (this.dayFalse == "3") {
form.beginTime = this.stamonth;
form.endTime = this.endmonth;
} else if (this.dayFalse == "4") {
form.beginTime = this.searchForm.beginTime;
form.endTime = this.searchForm.endTime;
} else {
form.beginTime = form.beginTime;
form.endTime = form.endTime;
}
this.axios
.post("/tj/register/sum", form)
.then(res => {
if (res.data.code == 200) {
this.loading = false;
if (!res.data) return;
this.addSum = res.data.data;
}
})
.catch(err => {
this.$message(err.message);
});
},
getaddallSum() {
let form = {
beginTime: "",
endTime: ""
};
this.axios
.post("/tj/register/sum", form)
.then(res => {
if (res.data.code == 200) {
this.loading = false;
if (!res.data) return;
this.addallSum = res.data.data;
}
})
.catch(err => {
this.$message(err.message);
});
},
workerType(item) {
let status = item.workerType;
let res = { num: status, text: "" };
switch (status) {
case 100:
res.text = "医生";
break;
case 200:
res.text = "护士";
break;
case 300:
res.text = "其他";
break;
case null:
res.text = "";
break;
case "":
res.text = "";
break;
}
return res;
},
stateType(item) {
let status = item.state;
let res = { num: status, text: "" };
switch (status) {
case -1:
res.text = "待审核";
break;
case 0:
res.text = "正常";
break;
case -2:
res.text = "被拒绝";
break;
case 10:
res.text = "信息未完善";
break;
case 20:
res.text = "未实名认证";
break;
case null:
res.text = "";
break;
case "":
res.text = "";
break;
}
return res;
}
}
};
</script>
<style lang="less">
.el-row {
&:last-child {
margin-bottom: 0;
}
}
.dis_flex {
display: flex;
font-display: row;
align-items: center;
}
.box {
120px;
text-align: center;
height: 50px;
line-height: 25px;
}
</style>