一、elementUI设置el-date-picker中的picker-options的可用时间段
sTimeOptions: {
//控制可选时间范围
disabledDate(time) {
let curData = (new Date()).getTime()
let day = 13 * 24 * 3600 * 1000
let dateRegion = curData + day
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > dateRegion;
}
},
二、处理后台返回的时间戳，时间格式，展示到table中的
<el-table-column prop="seeDoctorTime" label="就诊时间" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.seeDoctorTime | formatDate }}</template>
</el-table-column>
Vue.filter('formatDate', function (datas) {
var date = new Date(datas);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
});
三、改变时间格式的方法
getdata(data) {
var date = new Date(data);
var YY = date.getFullYear() + "-";
var MM =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return YY + MM + DD;
}
四、给elmentUI中的form设置表单验证
<el-form-item prop="phoneNumber" label="联系电话：" size="medium">
<el-input v-model="formInline.phoneNumber" placeholder="联系电话"></el-input>
</el-form-item>
rules:{
phoneNumber: [
// { required: true, message: "请输入手机号码", trigger: "blur" },
{ pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,message: "请输入正确的手机号码", trigger: "blur" }
],
},
五、页面跳转功能------ 可在后面加上query
//退费操作 --- 退号退费操作
outPatient(row) {
console.log(row);
this.$router.push({ name: "退号退费操作", query: { id: row.id } });
},
六、js获取已知日期的星期
let day = new Date(e);
let today = [
"星期天",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
];
let index = day.getDay();
this.form.week2 = index ? today[index] : "";
七、导入Excel表
<el-upload action style="margin-left:10px" :on-change="handleChange" :http-request="uploadFile" ref="upload" class="upload-demo searchBtn">
<el-button size="small" style="background-color:#2d8cf0" icon="el-icon-upload" type="primary" class="btn_1">导入</el-button>
</el-upload>
//导入功能
handleChange(file) {
// 上传文件，获取文件流
this.file = file.raw;
},
// 导入excel
uploadFile() {
let form = new FormData();
// 后端接受参数 ，可以接受多个参数,
form.append("file", this.file);
form.append("type", "xls,xlsx");
UpLoadScheduling(form)
.then(res => {
console.log(res);
if (res == true) {
this.$message({
message: "导入医生排班表成功",
type: "success"
});
} else {
this.$message.error(res.message || "导入失败");
}
this.$refs.upload.clearFiles();
})
.catch(res => {
console.log(res);
});
},
八、导出Excel表
<Button type="primary" style="margin-left:10px" icon="md-cloud-download" class="searchBtn" @click="load">导出</Button>
1 // 导出
2 load() {
3 // 导出需要传递的参数
4 let params = {
5 deptName: this.deptName, //科室名称
6 deptNo: this.deptNo, //科室编号
7 doctorName: this.doctorName, //医生名称
8 doctorNo: this.doctorNo, //医生编号
9 limit: this.pageSize, //每页显示条数
10 pageNum: this.currentPage, //当前页
11 rgtTypeName: this.rgtTypeName, //挂号类型名称
12 rgtTypeNo: this.rgtTypeNo, //挂号类型编号
13 workDate: this.schedulTime, //日期
14 workTime: this.workTime //时间
15 };
16 console.log(params);
17 // params.responseType= 'blob'
18 // LoadScheduling 是请求接口的api方法
19 LoadScheduling(params)
20 .then(res => {
21 if (res) {
22 console.log(res);
23 this.blobDownload(res,"医生排班列表")
24 }
25 })
26 .catch(res => {
27 console.log(res);
28 });
29 },
30 // 生成Excel // data是数据
31 blobDownload(data, name) {
32 let m = this;
33 name = name || "111";
34 var content = data;
35 // var data = new Blob([content],{type:"application/octet-stream;charset=utf-8"});
36 var data = new Blob([content], {
37 type: "application/vnd.ms-excel;charset=utf-8"
38 });
39 var downloadUrl = window.URL.createObjectURL(data);
40 var anchor = document.createElement("a");
41 anchor.href = downloadUrl;
42 anchor.download = name + ".xls";
43 anchor.click();
44 window.URL.revokeObjectURL(data);
45 },
