支付宝/钉钉小程序-请假审批列表组件与页面

页面效果图

待办按钮显示已提交表单，已办按钮显示审批通过表单

可以左右滚动，点击最右或最左会自动移动

切换时会默认切换到全部并且下方列表会滚动到顶部

点击不同类别通过a:if渲染不同数据

可以上下滚动，for循环渲染数据

组件

axml

<view class="pages">
  <!-- 代办和已办tabbar -->
  <tabs class="mytab" tabs="{{tabs}}" tabsName="activeTab" showPlus="{{false}}" onTabClick="handleTabClick" onChange="handleTabChange" activeTab="{{activeTab}}" swipeable="{{false}}" capsule="{{true}}"/>
  <view class="container">
    <!-- 上侧滚动栏 -->
    <scroll-view class="left" scroll-x="{{true}}"  scroll-into-view="{{toView}}">
      <view a:for="{{array}}" onTap="isActive" class="{{index===currentIndex?'active':''}}" data-index="{{index}}" data-title="{{item}}" id="{{index+1}}"> 
        {{item}}
      </view>
    </scroll-view>
    <!-- 下侧滚动栏   -->
    <scroll-view class="right" scroll-y  scroll-top="{{scrollTop}}" >
       <!--                                                                     默认0是全部并且根据代办已办来变化                  显示数据等于上方类别并且根据代办已办来变化 -->
      <view class="rightcontent" a:for="{{list}}" a:for-index="item1" a:if="{{currentIndex===0&&item.spproval===isApproval?true:item.type===showdata&&item.spproval===isApproval}}">
        <view class="title">
          <image mode="scaleToFill" src="/images/audit.png"/>
          <text>
          OA审批
          </text>
          <text>
          {{activeTab===1?'已办':'待办'}}
          </text>
        </view>
        <text>
          {{item.title}}提交的{{pages}}
        </text>
        <text>
          {{pages}}类型:{{item.type}}
        </text>
        <text>
          开始时间:{{item.starttime}}
        </text>
        <text>
          结束时间:{{item.endtime}}
        </text>
          <text>
          查看详情
          </text>
      </view>
    </scroll-view>
  </view>
</view>

js

Component({
  data: {
    scrollTop: -1
  },
  mixins: [],
  props: {
    isApproval: '已提交',
  },
  didMount() {
    // 默认是全部选项
    this.setData({
      currentIndex: 0,
    })
  },
  didUpdate() { },
  didUnmount() { },
  methods: {
    // 切换tab导航栏
    handleTabClick(e) {
      this.setData({
        activeTab: e.index
      })

      if (e.index === 1) {
        this.setData({
          isApproval: '审批通过',
          toView: e.index,
          currentIndex: 0,
          scrollTop:0
        })
      }
      if (e.index === 0) {
        this.setData({
          isApproval: '已提交',
          toView: e.index + 1,
          currentIndex: 0,
          scrollTop:0.01
        })
      }
    },
    totop(e) {
      console.log(e);
    },
    // 切换上侧分类栏
    isActive(e) {
      const { index } = e.currentTarget.dataset;
      const { title } = e.currentTarget.dataset;
      console.log(this.props.scrollTop);

      this.setData({
        currentIndex: index,
        showdata: title,
        toView: index,
      })
      dd.pageScrollTo({
        scrollTop: 0,
      })
    }
  },
});

json

{
  "component": true,
  "usingComponents": {
    "tabs": "mini-ali-ui/es/tabs/index"
  }
}

acss

.pages{
  background-color: #F7F7F7;
  height: 100%;
}
.mytab{
  height: 120rpx;
}
.container{
  height: calc( 100vh - 120rpx );
  background-color: #E5E5E5;
  display: flex;
  flex-direction: column;
  overflow:visible;
}
.left{
  flex: 0.5;
  background-color: white;
  display: flex;
  white-space: nowrap;
  width: 100%;
}
.left view{
  font-size: 40rpx;
  flex: 1;
  margin-left: 20rpx;
  padding:0rpx 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left view:first-child{
  margin-left: 0rpx;
}
.left view:last-child{
  padding:0rpx 20rpx;
}
.right{
  flex: 5;
  background-color: #E5E5E5;
}
.active{
  color: #409EFF;
  /* border-left: 9rpx solid currentColor; */
  border-bottom: 9rpx solid currentColor;
  height:auto!important;
}
.rightcontent{
  display: flex;
  margin: 40rpx 45rpx;
  flex-direction: column;
  background-color: #fff;
  border-radius: 20rpx;
  padding:10rpx 25rpx;
  cursor: pointer;
}
.title {
  display: flex;
  height: 55rpx;
}
.title image{
  width: 55rpx;
  height: 100%;
  margin-left: 20rpx;
  justify-content: space-between;
}
.title :nth-child(2){
  font-size: 40rpx!important;
  color: #FF943D!important;
  line-height: 40rpx;
  margin-left: -20rpx;
  flex: 2.5;
}
.title :nth-child(3){
  font-size: 38rpx!important;
  line-height: 50rpx;
  color: #1677FF;
  flex: 1;
}
.rightcontent :nth-child(2){
  font-size: 39rpx;
}
.rightcontent text{
  font-size: 32rpx;
  padding:10rpx 25rpx;
}
.rightcontent :nth-child(6){
  color: #409EFF;
}

页面
acss 无
axml

<approvalscroll  tabs="{{tabs}}" list="{{list}}" array="{{array}}" pages="{{pages}}"/>

js

Page({
  data: {
    currentIndex: 0,
    activeTab: 0,
    pages:'请假',
    tabs: [{
      title: '待办'
    },
    {
      title: '已办'
    }],
    array: ['全部','年假', '年假', '年假', '事假','婚假','婚假', '病假'],
    list: [
      {
      title: "王昭",
      type: "事假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "审批通过",
      pk_leave: "3"
    },
    {
      title: "王昭",
      type: "事假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "审批通过",
      pk_leave: "3"
    },
    {
      title: "王昭",
      type: "事假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "审批通过",
      pk_leave: "3"
    },
    {
      title: "王昭",
      type: "事假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "审批通过",
      pk_leave: "3"
    },
    {
      title: "王昭",
      type: "事假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "已提交",
      pk_leave: "3"
    },
    {
      title: "王昭",
      type: "年假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "已提交",
      pk_leave: "3"
    },
    {
      title: "王昭",
      type: "婚假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "已提交",
      pk_leave: "3"
    },
    {
      title: "王昭",
      type: "病假",
      starttime: "2020-3-21",
      endtime: "2020-11-22",
      spproval: "已提交",
      pk_leave: "3"
    }
   ] 
  },
  });

json

{
  "defaultTitle": "请假审批",
  "usingComponents": {
    "tabs": "mini-ali-ui/es/tabs/index",
    "approvalscroll":"/components/approvalscroll/approvalscroll"
  }
}