itsm-wx-handle/components/IncidentListFilter.vue

<template>
  <view class="container" @touchmove.stop.prevent v-if="pageData.pageRouter === 'default'">
    <view class="container_form">
      <view class="hospital" v-if="!showDept">
        <text class="name">院区</text>
        <text class="value">{{loginUserStore.loginUser.user.currentHospital.hosName}}</text>
      </view>

			<view class="category" v-if="showDept">
			  <text class="name">维修科室</text>
			  <text class="value flex-1">
					<uni-data-picker @change="deptChange" v-model="searchData.deptValue" :localdata="pageData.deptList" popup-title="请选择维修科室" :map="{text:'hosName',value:'id'}">

					</uni-data-picker>
				</text>
			</view>

      <view class="tabs">
        <view class="tab" :class="{active: tab.value === searchData.selected}" v-for="tab in tabs" :key="tab.value" @click="clickTab(tab)">{{tab.name}}<text class="newicon newicon-xuanzejiaobiao"></text></view>
      </view>

      <view class="area" @click="clickPageRouter('area')">
        <text class="name">楼栋</text>
        <text class="value ellipsis">{{searchData.areaName.length>0 ? searchData.areaName.join('/') : ''}}</text>
      </view>

      <view class="category">
        <text class="name">故障现象</text>
        <text class="value flex-1">
					<uni-data-picker @change="categoryChange" v-model="searchData.categoryValue" :localdata="pageData.categoryList" popup-title="请选择故障信息" :map="{text:'category',value:'id'}">

					</uni-data-picker>
				</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="view-box">
					<view class="areas_item" v-for="area in pageData.areaList"
					:key="area.id" @click="clickAreaItem(area)" 
					:class="searchData.selectBuildingId.indexOf(area.id)!=-1 ? 'ActiveClass': ''"
					>{{area.buildingName}}</view>
				</view>
      </scroll-view>
    </view>
    <view class="container_foot">
      <view class="foot_btns">
        <view class="cancel" @click="clickPageRouter('default')">取消</view>
				<view class="cancel submit" @click="clickArea()">确定</view>
      </view>
    </view>
  </view>
<!--  <view class="container" @touchmove.stop.prevent v-else-if="pageData.pageRouter === 'category'">
    <view class="container_form">
      <view class="hospital">
        <text class="name">故障现象</text>
      </view>

      <scroll-view scroll-y class="categorys">
        <view class="categorys_item" v-for="category in pageData.categoryList" :key="category.id" @click="clickCategory(category)">{{category.category}}</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_area, getFetchDataList, api_incidentcategory } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { transform } from '@/utils/index.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 tabs = reactive([
    // { name: '全部事件', value: 'all' },
    { name: '待我处理', value: 'todoingAll' },
    { name: '与我关联', value: 'owns' },
    { name: '由我解决', value: 'resolve' },
  ])

  // 页面数据
  const pageData = reactive({
    pageRouter: 'default',
    areaList: [],
    categoryList: [],
		deptList:[],
		selectBuildingList:[],
  });
	
	// 是否开启跨科查看
	const showDept = ref(false);

  const searchData = reactive({
    hospital: {},
    selected: 'todoingAll',
    area: [],
    category: {},
		categoryValue:{},
    acceptDate: [],
		dept: {},
		deptValue: {},
		selectBuildingId:[],
		areaName:[]
  })

  // 显示登记时间
  function showDatechange(){
    isShowDate.value = !isShowDate.value;
  }

  // 登记时间确定
  function bindDateChange(e){
    console.log(e);
    searchData.acceptDate = e;
  }

  // 点击tab
  function clickTab(tab){
    searchData.selected = tab.value;
  }
	
	// 点击区域
	function clickAreaItem(item){
		let index = searchData.selectBuildingId.indexOf(item.id)
		if(index==-1){
			pageData.selectBuildingList.push(item)
		}else{
			pageData.selectBuildingList.splice(index, 1)
		}
		searchData.selectBuildingId = pageData.selectBuildingList.map(i=>{
			return i.id
		})
		// console.log(998998,searchData.selectBuildingId)
	}
	
  // 选中楼栋
  function clickArea(){
    pageData.pageRouter = 'default';
    searchData.area = pageData.selectBuildingList
		searchData.areaName = []
		pageData.selectBuildingList.forEach(i=>{
			searchData.areaName.push(i.buildingName)
		})
  }

  // 点击故障现象
  function clickCategory(category){
    pageData.pageRouter = 'default';
    searchData.category = category;
  }

  // 清空
  function clear(){
    setHospital();
    searchData.selected = 'todoingAll';
    searchData.area = [];
    searchData.category = {};
    searchData.acceptDate = [];
		searchData.categoryValue = {};
		searchData.dept = {};
		searchData.deptValue = {};
		searchData.selectBuildingId = [];
		searchData.areaName = [];
  }

  // 取消
  function cancel(){
    emit('cancelEmit')
  }

  // 确认
  function confirm(){
    emit('confirmEmit', searchData);
  }

  // 设置院区
  function setHospital(){
    if (loginUserStore.loginUser.user.duty) {
      // 当前的所属责任科室
      searchData.hospital = {
        id: loginUserStore.loginUser.user.duty.branch,
        hosName: loginUserStore.loginUser.user.duty.branchName
      };
    } else if (loginUserStore.loginUser.user.branch) {
      // 当前的所属院区
      searchData.hospital = {
        id: loginUserStore.loginUser.user.branch.id,
        hosName: loginUserStore.loginUser.user.branch.hosName
      };
    }
  }

	// 选择维修科室
	function deptChange(val){
		searchData.dept = val.detail.value[val.detail.value.length-1]
	}

	// 选择故障现象
	function categoryChange(val){
		searchData.category = val.detail.value[val.detail.value.length-1]
	}

  // 获取楼栋列表
  function getAreaList(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });

    // let postData = {
    //   idx: 0,
    //   sum: 9999,
    //   area: {
    //     branch: searchData.hospital.id,
    //   },
    // }
    // api_area(postData).then(res => {
    //   uni.hideLoading();
    //   if(res.status == 200){
    //     let list = res.list || [];
    //     pageData.areaList = [{ id: 0, area: '全部' }, ...list];
    //   }else{
    //     uni.showToast({
    //       icon: 'none',
    //       title: res.msg || '请求数据失败！'
    //     });
    //   }
    // })

		let postData = {
		  idx: 0,
		  sum: 9999,
			building:{
				hosId: null
			}
		};
		if(loginUserStore.loginUser.user.currentHospital.parent){
			postData.building.hosId = loginUserStore.loginUser.user.currentHospital.parent.id
		}else{
			postData.building.hosId = loginUserStore.loginUser.user.currentHospital.id
		}
		getFetchDataList("simple/data", "building", postData)
		  .then((res) => {
				uni.hideLoading();
		    let list = res.list || [];
				pageData.areaList = list;
		    // pageData.areaList = [{ id: 0, area: '全部' }, ...list];
		  });
  }

  // 获取故障现象列表
  function getCategoryList(){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });

    let postData = {
    		hasThird:true,
    		category: {
    			dutyIds: loginUserStore.loginUser.user.currentHospital.id,
    		},
    	}
    // if(loginUserStore.loginUser.user.duty){
    //   postData.incidentcategory.dutyToCategory = loginUserStore.loginUser.user.duty.id;
    // }else if(loginUserStore.loginUser.user.branch){
    //   postData.incidentcategory.selectType = 'one';
    // }

    // api_incidentcategory(postData).then(res => {
    //   uni.hideLoading();
    //   if(res.status == 200){
    //     let list = res.list || [];
    //     pageData.categoryList = [{ id:0, category: '全部' }, ...list];
    //   }else{
    //     uni.showToast({
    //       icon: 'none',
    //       title: res.msg || '请求数据失败！'
    //     });
    //   }
    // })


		 api_incidentcategory(postData).then(res => {
		   uni.hideLoading();
		   if(res.status == 200){
		     let list = res.data || [];
					list = list.map(i=> ({...i, parentid: i.parent?.id}))
					pageData.categoryList = transform(list, 'id', 'parentid')
		   }else{
		     uni.showToast({
		       icon: 'none',
		       title: res.msg || '请求数据失败！'
		     });
		   }
		 })
  }

  // 页面路由跳转
  function clickPageRouter(type){
    pageData.pageRouter = type;
    switch(type){
      case 'area':
        getAreaList();
      break;
    }
  }

  // 显示登记时间
  function changeIsShowDate(type){
    isShowDate.value = true;
  }

  onLoad((option) => {
		getCategoryList()
    // searchData.hospital = evt.hospital;
		let menu = JSON.parse(uni.getStorageSync("menuList")) || []; //菜单
		console.log(9555,menu)
		showDept.value = false
		menu.forEach((e) => {
		  if (e.title=='故障管理') {
		    e.childrens.forEach((el) => {
					if(el.link=='incidentManagement'){
						el.childrens.forEach(item =>{
							if(item.link=='strideLook'){
								showDept.value = true
							}else if(item.link=='all'){
								tabs.splice(0, 0 , { name: '全部事件', value: 'all' });
							}
						})
					}
		    });
		  }
		});
		let data = loginUserStore.loginUser.infoPermission
		pageData.deptList = data.dutyList
    setHospital();
		// console.log(999,evt)
    searchData.selected = evt.selected;
    searchData.area = evt.area;
		if(evt.area && evt.area.length>0){
			pageData.selectBuildingList = evt.area
			searchData.selectBuildingId = []
			searchData.areaName = []
			evt.area.forEach(i=>{
				searchData.selectBuildingId.push(i.id)
				searchData.areaName.push(i.buildingName)
			})
		}
    searchData.category = evt.category;
		searchData.categoryValue = evt.categoryValue;
    searchData.acceptDate = evt.acceptDate;
		if(showDept.value){
			searchData.deptValue = evt.deptValue;
			searchData.dept = evt.dept;
		}else{
			searchData.deptValue = {};
			searchData.dept = {};
		}
  })
</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: 20rpx;
		padding-top: 20rpx;
    background-color: #fff;
		.view-box{
			display: flex; 
			flex-wrap: wrap;
			.areas_item{
				width: 30%;
				height: 80rpx;
				background: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				margin: 0 10rpx 20rpx 10rpx;
			}
			.ActiveClass{
				background: #FFEAE7;
				color: #D95D4D;
				border: 1px solid #A13728;
				box-sizing: border-box;
			}
		}
    
  }

  .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;
    }
		.flex-1{
			flex: 3;
		}
  }

  .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;
      }
			.submit{
				color: #49b856;
				border-left: 1px solid #BFBFBF;
			}
      .confirm{
        flex: 1;
        font-size: 32rpx;
        padding: 24rpx;
        background-color: $uni-primary;
        display: flex;
        justify-content: center;
        color: #fff;
      }
    }
  }
}
</style>