用顶部tab栏做排班表

入职快两个月了，老大要求做一个固定格式的医院预约挂号排班表，要求用 vue + vant 做。在网上搜了一下子，都很乱，不适合，一狠心就自己试着写了一个，因为技术很菜所以不是太好各位勿怪啊。

这个有一个大bug 你可以看我另外一篇博客，里面有解决方法

我是个很懒的人直接把我项目的整个页面贴过来了啊，慢慢看。。。别骂真的有点忙这是忙里偷闲发的。

<template><div class="main"><div class="gaoStyle">这里用了  vant  的 tab组件  <van-tabs:swipe-threshold="7"color="#72BEFF"title-active-color="#72BEFF"title-inactive-color="#353535"@click="dianjiqiehuanyisheng">//  Week[zhou_1] 是直接得到 一、二、三、四、五、六、日//  riqi   这个是下面得到的天数<van-tab :title=" Week[zhou_1]+ riqi "><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: 上午{{}}</p></div><div class="you" @click="guaHao"><span class="blueColor">挂号</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab><van-tab :title=" Week[zhou_2]+ riqi_1"><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: 上午{{}}</p></div><div class="you" @click="guaHao"><span class="blueColor">挂号</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab><van-tab :title=" Week[zhou_3]+ riqi_2"><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: 上午{{}}</p></div><div class="you" @click="guaHao"><span class="blueColor">挂号</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab><van-tab :title=" Week[zhou_4]+ riqi_3"><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: 上午{{}}</p></div><div class="you" @click="guaHao"><span class="blueColor">挂号</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab><van-tab :title=" Week[zhou_5]+ riqi_4"><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: 上午{{}}</p></div><div class="you" @click="guaHao"><span class="blueColor">挂号</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab><van-tab :title=" Week[zhou_6]+ riqi_5"><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: 上午{{}}</p></div><div class="you" @click="guaHao"><span class="blueColor">挂号</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab><van-tab :title=" Week[zhou_7]+ riqi_6"><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: 上午{{}}</p></div><div class="you" @click="guaHao"><span class="blueColor">挂号</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab></van-tabs></div></div>
</template><script>
import { CellGroup, Cell, Button, Toast, Icon, Tab, Tabs } from "vant";
import * as log from "loglevel";
import axios from "axios";
import properties from "../../properties.js";
import qs from "qs";
import store from 'store'export default {components: {"van-cell-group": CellGroup,"van-cell": Cell,"van-button": Button,Toast: Toast,"van-icon": Icon,"van-tabs": Tabs,"van-tab": Tab},上面都是无关的   这里才刚开始data() {return {deptCode: "",list: [],riqi: new Date().getDate(),riqi_1: new Date().getDate() + 1,riqi_2: new Date().getDate() + 2,riqi_3: new Date().getDate() + 3,riqi_4: new Date().getDate() + 4,riqi_5: new Date().getDate() + 5,riqi_6: new Date().getDate() + 6,Week: ["日", "一", "二", "三", "四", "五", "六"],zhou_1: 0,zhou_2: 0,zhou_3: 0,zhou_4: 0,zhou_5: 0,zhou_6: 0,zhou_7: 0};},created() {this.getWeek();this.deptCode = this.$route.query.deptCode;// console.log(this.deptCode);const dt = new Date();   var date = this.getTime(dt,0)this.getYiShengLieBiao(this.deptCode, date);},methods: {这里是得到动态的索引值// 格式化 周getWeek() {this.zhou_1 = (new Date().getDay() + 0) % 7;this.zhou_2 = (new Date().getDay() + 1) % 7;this.zhou_3 = (new Date().getDay() + 2) % 7;this.zhou_4 = (new Date().getDay() + 3) % 7;this.zhou_5 = (new Date().getDay() + 4) % 7;this.zhou_6 = (new Date().getDay() + 5) % 7;this.zhou_7 = (new Date().getDay() + 6) % 7;},// 格式化日期getTime (originVal,day) {const dt = new Date(originVal);const y = dt.getFullYear();const m = (dt.getMonth() + 1 + "").padStart(2, "0");const d = (dt.getDate() + day +"").padStart(2, "0");// const hh = (dt.getHours() + "").padStart(2, "0");// const mm = (dt.getMinutes() + "").padStart(2, "0");// const ss = (dt.getSeconds() + "").padStart(2, "0");// return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;return `${y}-${m}-${d} `;},// 点击tab 切换 医生  这里是 根据 索引切换日期切换 值班医生列表dianjiqiehuanyisheng (name,title) {let dt = new Date();   if(name === 0){var date = this.getTime(dt,0)this.getYiShengLieBiao(this.deptCode, date);// this.$toast(this.deptCode)this.$toast(date)} else if (name === 1){var date = this.getTime(dt,1)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 2){var date = this.getTime(dt,2)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 3){var date = this.getTime(dt,3)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 4){var date = this.getTime(dt,4)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 5){var date = this.getTime(dt,5)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 6){var date = this.getTime(dt,6)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} },// 点击挂号，跳转到号源详情页面guaHao() {this.$router.push("/guahao_yishengxiangqing");},// 获取医生列表getYiShengLieBiao(val, date) {// console.log(val + 'lalaal');const  hospitalId = store.get('__hospitalId__')const  areaId = store.get('__areaId__')const patientId = store.get('__patientId__')console.log(patientId);axios.post(properties.api_url + "/his/proxy", {tranCode: "2003",hospitalId: hospitalId,areaId: areaId,patientId: patientId,date: date,clinicClass: "全部",deptCode: val,operatorNo: "2012"}).then(resp => {// console.log(resp.data);this.list = resp.data.list;console.log(this.list);});}}
};
</script><style scoped>
* {margin: 0;padding: 0;
}.main,
body {background-color: #eee !important;font-size: 16px;
}
h3 {height: 87px;margin: 0;margin-left: 16px;font-size: 12px;line-height: 30px;color: #aaa;font-weight: normal;
}
.box {position: relative;width: 100%;height: 110px;background-color: #fff;overflow: hidden;
}
.line {height: 1px;width: 100%;background: #e5e5e5;
}
.box a {float: left;
}
.box a {display: block;width: 64px;height: 64px;border: 1px solid #b4b4b4;border-radius: 9px;border-radius: 9px;margin: 20px 13px 12px 15px;background-color: pink;
}
.box a img {width: 100%;height: 100%;
}
.zhong {width: 56.5%;height: 100%;margin: 12px 13px 0px 77px;
}
.zhong h2 {font-family: PingFangSC-Regular;font-size: 18px;color: #000000;letter-spacing: 0;
}
.zhong h2 .redColor {font-family: PingFangSC-Regular;font-size: 14px;color: #ff7977;letter-spacing: 0;text-align: right;
}
.zhong p {font-family: PingFangSC-Regular;font-size: 14px;color: #9b9b9b;
}
.you {position: absolute;top: 25%;right: 0;width: 14%;height: 40px;line-height: 41px;
}
.you .blueColor {font-family: PingFangSC-Regular;font-size: 14px;color: #72beff;letter-spacing: 0;text-align: right;
}
.van-icon {position: absolute;top: 12px;left: 30px;
}
/* 排班表下面样式 */
.gaoStyle .van-ellipsis {overflow: initial;white-space: normal;text-overflow: inherit;
}
/* 排班表下面样式 */
.gaoStyle .van-tabs--line .van-tabs__wrap {height: 90px;
}
</style>
<style >
.gaoStyle .van-tab {padding: 0 5%;
}
.gaoStyle .van-ellipsis {overflow: initial;white-space: normal;text-overflow: inherit;
}
.gaoStyle .van-tabs--line .van-tabs__wrap {height: 90px;
}
.van-button--default {background-color: #fff;
}
</style>

效果如下：

用顶部tab栏做排班表相关推荐

解决用vue+vant 写顶部tab栏做排班表的bug
主要的更改是解决了日期能到 31/32 的问题,实现了到月底自动切换到下一月的1号这里博主自己封了一个新的函数主要用到了 setDate()这个时间函数 //获取几天后日期dateCount( ...
php mysql 排班表_要做排班表灵活性比较强的
没做过,求高人给点思路回复讨论(解决方案) 能把你具体的需求说的更加清楚么?这样很难有人会回答! 能把你具体的需求说的更加清楚么?这样很难有人会回答! 需求是这样的:有白班夜班是上6天休息一天 ...
0 基础学脚本：给同事做一个排班表并每日通知「02」
Hello 小伙伴们早上.中午.下午.晚上.深夜好! 我是爱折腾的 jsliang~ 本系列文章和配套直播视频,面向金山文档的「轻维表」「表单」用户. 希望通过[自动化]和[脚本]等能力,让里面数据相 ...
php mysql 排班表_PHP倒班五班三倒
问题 : 甲乙丙丁戊五个人,一日三班(早中晚),全年轮值,做排班表 (不考虑节假日) 想法: 排班记录存数据库,或者本地缓存,方便以后查询, 代码如下: function cal_days_in_y ...
html 插入排班表,怎么用Word制作排班表，手把手教你学会
原标题:怎么用Word制作排班表,手把手教你学会在工作中,或者是在生活中,人们听到排班表的时候,一点也不会感觉惊讶,因为这是在工作中的需要,日常的工作都会有班次的安排,根据不同的情况给每个人安排不同 ...
excel自动排班表怎么做？哪里有免费的自动排班表？2022最新整理30份Excel自动排班表，建议收藏
你还在手动排班吗?别再这样做了,我有更高效的方法! 在工作中,我们经常需要进行排班,不管是假期值班,还是直播排班,都需要做一个排班表.以前的时候排班都是手动调的,你周一我周二,但这种做法效率比较低,而 ...
这样做excel排班表，省时又省力，附加模板~
如何做好一个排班表? 一个完整的 Excel 排班表应该包含以下内容: 员工信息:包括员工姓名.员工编号.职位等基本信息. 日期和时间:排班表应该有一个日期和时间的列,用于记录每天的排班情况. 班次/ ...
用python做了一个统计排班表
打开程序中,输入当月日期上传下图中每周的排班表, 上传后,点击扫描, 点击生成奖金表当出现"已制作成功" 就可以打开奖金表. 会自动生成奖金表其实这表格,只能算是统计每个人当 ...
php日历排班表,日历排班表软件下载
日历排班表软件app是一款掌上智能排版助手.日历排班表软件app主要为有倒班.值班需求的工作人员提供智能排班功能,您可以通过日历排班表软件app输入对应的数据,就可以精准算出自己的上班.值班时间,非常 ...

用顶部tab栏做排班表

这个有一个大bug 你可以看我另外一篇博客，里面有解决方法

用顶部tab栏做排班表相关推荐

最新文章

热门文章

用 顶部tab栏 做排班表

这个 有一个 大bug 你可以看 我另外一篇博客，里面有解决方法

用 顶部tab栏 做排班表相关推荐

最新文章

热门文章

用顶部tab栏做排班表

这个有一个大bug 你可以看我另外一篇博客，里面有解决方法

用顶部tab栏做排班表相关推荐