后台系统总结1
一、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 },