itsm-wx-handle/components/InspectionListFilter.vue

<template>
  <view class="container" @touchmove.stop.prevent v-if="pageData.pageRouter === 'default'">
    <view class="container_form">
      <view class="category" @click="clickPageRouter('inspectionForm')">
        <text class="name">巡检单</text>
        <text class="value ellipsis">{{searchData.inspectionForm ? searchData.inspectionForm.name : ''}}</text>
      </view>
      
      <view class="area" @click="clickPageRouter('area')">
        <text class="name">楼栋</text>
        <text class="value ellipsis">{{searchData.area ? searchData.area.buildingName : ''}}</text>
      </view>
      
      <view class="acceptDate" @click="changeIsShowDate()">
        <text class="name">登记时间</text>
        <text class="value ellipsis" v-if="searchData.acceptDate.length">{{searchData.acceptDate[0] || ''}}至{{searchData.acceptDate[1] || ''}}</text>
        <text class="value ellipsis" v-else>全部</text>
      </view>
    </view>
    <view class="container_foot">
      <view class="clear" @click="clear">清除选项</view>
      <view class="foot_btns">
        <view class="cancel" @click="cancel">取消</view>
        <view class="confirm" @click="confirm">确认</view>
      </view>
    </view>
    <PyhRdtpicker
        :show="isShowDate"
        :start="start"
        :end="end"
        @showchange="showDatechange"
        :value="searchData.acceptDate"
        @change="bindDateChange"
        :themeColor="primaryColor"
    ></PyhRdtpicker>
  </view>
  <view class="container" @touchmove.stop.prevent v-else-if="pageData.pageRouter === 'area'">
    <view class="container_form">
      <view class="hospital">
        <text class="name">楼栋</text>
      </view>
      
      <scroll-view scroll-y class="areas">
        <view class="areas_item" v-for="area in pageData.areaList" :key="area.id" @click="clickArea(area)">{{area.buildingName}}</view>
      </scroll-view>
    </view>
    <view class="container_foot">
      <view class="foot_btns">
        <view class="cancel" @click="clickPageRouter('default')">取消</view>
      </view>
    </view>
  </view>
  <view class="container" @touchmove.stop.prevent v-else-if="pageData.pageRouter === 'inspectionForm'">
    <view class="container_form">
      <view class="hospital">
        <text class="name">巡检单</text>
      </view>
      
      <scroll-view scroll-y class="categorys">
        <view class="categorys_item" v-for="item in pageData.inspectionFormList" :key="item.id" @click="clickInspectionForm(item)">{{item.name}}</view>
      </scroll-view>
    </view>
    <view class="container_foot">
      <view class="foot_btns">
        <view class="cancel" @click="clickPageRouter('default')">取消</view>
      </view>
    </view>
  </view>
  <view class="mask" @touchmove.stop.prevent></view>
  <view class="line" @touchmove.stop.prevent></view>
  
</template>

<script setup>
  import PyhRdtpicker from '@/components/PyhRdtpicker/PyhRdtpicker.vue';
  import { defineEmits, ref, reactive, defineProps } from 'vue'
  import { startOfYear, endOfYear, format, add } from 'date-fns'
  import { onLoad } from '@dcloudio/uni-app'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { api_building, api_inspectionForm } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  
  const emit = defineEmits(['cancelEmit', 'confirmEmit']);
  const { evt } = defineProps({
    evt: {
      type: Object,
      required: true,
    },
  });
  const loginUserStore = useLoginUserStore();
  
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
  // 登记时间
  const isShowDate = ref(false)
  
  const start = ref(format(startOfYear(add(new Date(), { years: -5})), 'yyyy-MM-dd'));
  const end = ref(format(endOfYear(add(new Date(), { years: 0})), 'yyyy-MM-dd'));
  
  // 页面数据
  const pageData = reactive({
    pageRouter: 'default',
    areaList: [],
    inspectionFormList: [],
  });
  
  const searchData = reactive({
    area: {id: 0, buildingName: '全部'},
    inspectionForm: {id: 0, name: '全部'},
    acceptDate: [],
  })
  
  // 显示登记时间
  function showDatechange(){
    isShowDate.value = !isShowDate.value;
  }
  
  // 登记时间确定
  function bindDateChange(e){
    console.log(e);
    searchData.acceptDate = e;
  }
  
  // 点击区域
  function clickArea(area){
    pageData.pageRouter = 'default';
    searchData.area = area;
  }
  
  // 点击故障现象
  function clickInspectionForm(inspectionForm){
    pageData.pageRouter = 'default';
    searchData.inspectionForm = inspectionForm;
  }
  
  // 清空
  function clear(){
    searchData.area = {id: 0, buildingName: '全部'};
    searchData.inspectionForm = {id: 0, name: '全部'};
    searchData.acceptDate = [];
    console.log(searchData.acceptDate)
  }
  
  // 取消
  function cancel(){
    emit('cancelEmit')
  }
  
  // 确认
  function confirm(){
    emit('confirmEmit', searchData);
  }
  
  // 获取楼栋列表
  function getAreaList(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    
    let postData = {
      idx: 0,
      sum: 9999,
      account: loginUserStore.loginUser.user.account,
      building: {},
    }
    api_building(postData).then(res => {
      uni.hideLoading();
      if(res.status == 200){
        let list = res.list || [];
        pageData.areaList = [{ id: 0, buildingName: '全部' }, ...list];
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
  // 获取故障现象列表
  function getInspectionFormList(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    
    let postData = {
      idx: 0,
      sum: 9999,
      account: loginUserStore.loginUser.user.account,
      inspectionForm: {
        status: {value: "1"},
      },
    }
    
    api_inspectionForm(postData).then(res => {
      uni.hideLoading();
      if(res.status == 200){
        let list = res.list || [];
        pageData.inspectionFormList = [{ id:0, name: '全部' }, ...list];
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
  // 页面路由跳转
  function clickPageRouter(type){
    pageData.pageRouter = type;
    switch(type){
      case 'area':
        getAreaList();
      break;
      case 'inspectionForm':
        getInspectionFormList();
      break;
    }
  }
  
  // 显示登记时间
  function changeIsShowDate(type){
    isShowDate.value = true;
  }
  
  onLoad((option) => {
    searchData.area = evt.area;
    searchData.inspectionForm = evt.inspectionForm;
    searchData.acceptDate = evt.acceptDate;
  })
</script>

<style lang="scss" scoped>
.mask{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
.line{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 8rpx;
  width: 100%;
  background-color: #EBEBEB;
}
.container{
  position: fixed;
  left: 125rpx;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: #F7F7F7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  .container_form{
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  
  .hospital{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 24rpx 24rpx;
    background-color: #fff;
    .name{
      font-size: 30rpx;
      flex-shrink: 0;
      margin-right: 24rpx;
    }
    .value{
      font-size: 26rpx;
      color: #5DAAB6;
    }
  }
  
  .areas{
    flex: 1;
    min-height: 0;
    margin-top: 16rpx;
    background-color: #fff;
    .areas_item{
      padding: 24rpx;
      border-bottom: 1rpx solid #DEDEDE;
    }
  }
  
  .categorys{
    flex: 1;
    min-height: 0;
    margin-top: 16rpx;
    background-color: #fff;
    .categorys_item{
      padding: 24rpx;
      border-bottom: 1rpx solid #DEDEDE;
    }
  }
  
  .tabs{
    margin-top: 16rpx;
    background-color: #FBFBFB;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16rpx 0;
    padding: 24rpx 16rpx;
    .tab{
      width: 180rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #F7F7F7;
      font-size: 28rpx;
      position: relative;
      .newicon-xuanzejiaobiao{
        opacity: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 38rpx;
        color: #53B9BB;
      }
      &.active{
        background-color: rgba(149, 220, 231, 0.30);
        .newicon-xuanzejiaobiao{
          opacity: 1;
        }
      }
    }
  }
  
  .area,
  .category,
  .acceptDate{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background-color: #fff;
    margin-top: 24rpx;
    .name{
      font-size: 28rpx;
      flex-shrink: 0;
      margin-right: 24rpx;
    }
  }
  
  .container_foot{
    .clear{
      padding: 24rpx;
      font-size: 28rpx;
      background-color: #fff;
      margin: 0 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .foot_btns{
      margin-top: 24rpx;
      display: flex;
      border-top: 1rpx solid #BFBFBF;
      .cancel{
        flex: 1;
        background-color: #fff;
        font-size: 32rpx;
        padding: 24rpx;
        display: flex;
        justify-content: center;
      }
      .confirm{
        flex: 1;
        font-size: 32rpx;
        padding: 24rpx;
        background-color: $uni-primary;
        display: flex;
        justify-content: center;
        color: #fff;
      }
    }
  }
}
</style>