解决 用vue+vant 写顶部tab栏 做排班表的bug

2022-09-09 10:47:47

主要的更改是解决了 日期能到 31/32 的问题,实现了到月底自动切换到下一月的1号

这里博主自己封了一个新的函数 主要用到了 setDate()这个 时间函数

//获取几天后日期dateCount(arg, date){var date1= arg;var date2=newDate(date1);
        date2.setDate(date2.getDate()+parseInt(date));var times= date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+ date2.getDate();var Year=0;var Month=0;var Day=0;var CurrentDate="";
        Year= date2.getFullYear();
        Month= date2.getMonth()+1;
        Day= date2.getDate();
        CurrentDate+= Year+"-";if(Month>=10){
            CurrentDate+= Month+"-";}else{
            CurrentDate+="0"+ Month+"-";}if(Day>=10){
            CurrentDate+= Day;}else{
            CurrentDate+="0"+ Day;}return CurrentDate;},

这是整个项目页面的代码:

<template><divclass="main"><divclass="gaoStyle"><van-tabs:swipe-threshold="7"
        color="#72BEFF"
        title-active-color="#72BEFF"
        title-inactive-color="#353535"
        @click="dianjiqiehuanyisheng"><van-tab:title=" Week[zhou_1]+ riqi "><!-- 排班安排--><div v-for="(item,index) in list":key="index"><divclass="box"><a href="javascript:;"><img src alt/></a><divclass="zhong"><h2>{{ item.doctorName}}<spanclass="redColor">{{ item.regsitFee}}</span></h2><p>职称:{{ item.doctorTitle}}</p><p>科室:{{ item.clinicLabel}}</p><p>就诊时段:{{ item.timeType}}</p></div><divclass="you" @click="guaHao(item)"><spanclass="blueColor">选择挂号时段</span><van-icon name="arrow"/></div></div><!-- 底部那根细线--><divclass="line"></div></div></van-tab><van-tab:title=" Week[zhou_2]+ riqi_1"></van-tab><van-tab:title=" Week[zhou_3]+ riqi_2"></van-tab><van-tab:title=" Week[zhou_4]+ riqi_3"></van-tab><van-tab:title=" Week[zhou_5]+ riqi_4"></van-tab><van-tab:title=" Week[zhou_6]+ riqi_5"></van-tab><van-tab:title=" Week[zhou_7]+ riqi_6"></van-tab></van-tabs></div></div></template><script>import{ CellGroup, Cell, Button, Toast, Icon, Tab, Tabs}from"vant";import*as logfrom"loglevel";import axiosfrom"axios";import propertiesfrom"../../properties.js";import qsfrom"qs";import storefrom'store'exportdefault{
  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:newDate().getDate(),
      riqi_1:'',
      riqi_2:'',
      riqi_3:'',
      riqi_4:'',
      riqi_5:'',
      riqi_6:'',
      Week:["日","一","二","三","四","五","六"],
      zhou_1:0,
      zhou_2:0,
      zhou_3:0,
      zhou_4:0,
      zhou_5:0,
      zhou_6:0,
      zhou_7:0};},created(){let a=newDate();let b_1=this.dateCount(a,1)let b_2=this.dateCount(a,2)let b_3=this.dateCount(a,3)let b_4=this.dateCount(a,4)let b_5=this.dateCount(a,5)let b_6=this.dateCount(a,6)this.riqi_1=newDate(b_1).getDate();this.riqi_2=newDate(b_2).getDate();this.riqi_3=newDate(b_3).getDate();this.riqi_4=newDate(b_4).getDate();this.riqi_5=newDate(b_5).getDate();this.riqi_6=newDate(b_6).getDate();this.getWeek();this.deptCode=this.$route.query.deptCode;// console.log(this.deptCode);const dt=newDate();var date=this.getTime(dt)this.getYiShengLieBiao(this.deptCode, date);},

  methods:{// 格式化 周getWeek(){this.zhou_1=(newDate().getDay()+0)%7;this.zhou_2=(newDate().getDay()+1)%7;this.zhou_3=(newDate().getDay()+2)%7;this.zhou_4=(newDate().getDay()+3)%7;this.zhou_5=(newDate().getDay()+4)%7;this.zhou_6=(newDate().getDay()+5)%7;this.zhou_7=(newDate().getDay()+6)%7;},// 格式化日期getTime(originVal,day){const dt=newDate(originVal);const y= dt.getFullYear();const m=(dt.getMonth()+1+"").padStart(2,"0");const d=(dt.getDate()+"").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} `;},//获取几天后日期dateCount(arg, date){var date1= arg;var date2=newDate(date1);
        date2.setDate(date2.getDate()+parseInt(date));var times= date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+ date2.getDate();var Year=0;var Month=0;var Day=0;var CurrentDate="";
        Year= date2.getFullYear();
        Month= date2.getMonth()+1;
        Day= date2.getDate();
        CurrentDate+= Year+"-";if(Month>=10){
            CurrentDate+= Month+"-";}else{
            CurrentDate+="0"+ Month+"-";}if(Day>=10){
            CurrentDate+= Day;}else{
            CurrentDate+="0"+ Day;}return CurrentDate;},// 点击tab 切换 医生dianjiqiehuanyisheng(name,title){let dt=newDate();if(name===0){var date=this.dateCount(dt,0)this.getYiShengLieBiao(this.deptCode, date);// this.$toast(this.deptCode)this.$toast(date)}elseif(name===1){var date=this.dateCount(dt,1)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)}elseif(name===2){var date=this.dateCount(dt,2)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)}elseif(name===3){var date=this.dateCount(dt,3)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)}elseif(name===4){var date=this.dateCount(dt,4)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)}elseif(name===5){var date=this.dateCount(dt,5)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)}elseif(name===6){var date=this.dateCount(dt,6)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)}},// 点击挂号,跳转到号源详情页面guaHao(item){
      console.log(item);// this.$router.push({ path:'/guahao_yishengxiangqing',query: { clinicDate: ,regsitFee:, clinicFee:,deptAddr:,residualSource:}});this.$router.push({ path:'/guahao_yishengxiangqing',query:{item:item}})},// 获取医生列表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:
  • 作者:斯昂
  • 原文链接:https://blog.csdn.net/Leon_940002463/article/details/101543861
    更新时间:2022-09-09 10:47:47