itsm-wx-handle/pages/searchPlace/searchPlace.vue

<template>
  <view class="searchPlace">
    <view class="head">
      <view class="one">{{dataInfo.parentName}}<uni-icons class="right" type="right" :size="16" :color="primaryColor"></uni-icons></view>
      <text class="two ellipsis">{{dataInfo.placeObj.place}}</text>
    </view>
    <view class="body" v-if="dataInfo.list.length">
      <uni-data-checkbox v-model="dataInfo.place" :localdata="dataInfo.list" mode="list" wrap icon="right" :map="{text:'floorName',value:'id'}" @change="selectItem"></uni-data-checkbox>
    </view>
    <view class="zanwu" v-else>
      <text class="newicon newicon-zanwu"></text>
    </view>
    <view class="foot_common_btns">
      <button @click="goBack" type="default" class="primaryButton btn">上一级</button>
      <button @click="confirm" type="default" class="primaryButton btn">确认</button>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive} from 'vue'
  import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
  import { api_place, getFetchDataList } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useHandlerStore } from '@/stores/handler'
  import { useIncidentBuildStore } from '@/stores/incidentBuild'
  import { useGoBack } from '@/share/useGoBack.js'
  
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const handlerStore = useHandlerStore();
  const incidentBuildStore = useIncidentBuildStore();
  const { goBack }  = useGoBack();
  
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
  // 数据
  const dataInfo = reactive({
    list: [],//工单列表
    idx: 0,//页码
    hasMore: true,//是否有更多数据
    incidentId: undefined,//事件ID
    paramData: {},//传参
    parentId: undefined,//区域id
    parentName: '',//区域名称
    place: undefined,//地点-回显
    placeObj: {},//地点列表-已选择
		incidentData: {}
  })
  
  // 选择
  function selectItem(e){
    dataInfo.placeObj = e.detail.data;
  }
  
  // 确认
  function confirm(){
    if(!dataInfo.place){
      uni.showToast({
      	icon: 'none',
        title: '请选择地点'
      });
      return;
    }
    dataInfo.paramData.place = dataInfo.placeObj;
    incidentBuildStore.setIncidentBuildData(dataInfo.paramData, incidentBuildStore.incidentBuild.type, incidentBuildStore.incidentBuild.sign);
    uni.navigateTo({
      url: `/pages/${incidentBuildStore.incidentBuild.type}/${incidentBuildStore.incidentBuild.type}?incidentId=${dataInfo.incidentId}`,
    })
  }
  
  // 获取传递的数据
  function getParamData(){
    dataInfo.paramData = incidentBuildStore.incidentBuild.data || {};
    dataInfo.place = dataInfo.paramData.place ? dataInfo.paramData.place.id : undefined;
    dataInfo.placeObj =  dataInfo.paramData.place || {};
    getList(0);
  }
  
  // 获取列表信息
  function getList(idx){
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    
    // dataInfo.idx = idx === undefined ? dataInfo.idx : idx;
    // if(dataInfo.idx === 0){
    //   dataInfo.list = [];
    // }

    // let postData = {
    //   idx: dataInfo.idx,
    //   sum: 20,
    //   place: {
    //     areaId: dataInfo.parentId,
    //   }
    // }
    
    // api_place(postData).then(res => {
    //   uni.hideLoading();
    //   uni.stopPullDownRefresh();
    //   if(res.status == 200){
    //     let list = res.list || [];
    //     if(list.length){
    //       dataInfo.hasMore = true;
    //       dataInfo.list = dataInfo.idx === 0 ? list : dataInfo.list.concat(list);
    //     }else{
    //       dataInfo.hasMore = false;
    //     }
    //   }else{
    //     uni.showToast({
    //       icon: 'none',
    //       title: res.msg || '请求数据失败！'
    //     });
    //   }
    // })
		let hosId = null
		
		if(dataInfo.incidentData && dataInfo.incidentData.branch){
			hosId = dataInfo.incidentData.branch
		}else{
			if(loginUserStore.loginUser.user.currentHospital.parent){
				hosId = loginUserStore.loginUser.user.currentHospital.parent.id
			}else{
				hosId = loginUserStore.loginUser.user.currentHospital.id
			}
		}
		let postData = {
		  idx: 0,
		  sum: 9999,
			floor:{
				hosId: hosId,
				buildId:dataInfo.parentId
			}
		};
		getFetchDataList("simple/data", "floor", postData)
		  .then((res) => {
				uni.hideLoading();
		    dataInfo.list = res.list
		  });
  }
  
  onLoad((option) => {
    dataInfo.incidentId = option.incidentId;
    dataInfo.parentId = option.parentId;
    dataInfo.parentName = option.parentName;
		if(incidentBuildStore.incidentBuild.data){
		  dataInfo.incidentData = incidentBuildStore.incidentBuild.data;
		}
    getParamData();
  })
  
  onPullDownRefresh(() => {
    // getList(0)
  })
  
  onReachBottom(() => {
    // dataInfo.idx += 1;
    // if (dataInfo.hasMore) {
    //   getList(); // 当触底时加载更多数据
    // }
  })
</script>

<style lang="scss" scoped>
.searchPlace{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .head{
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    position: fixed;
    z-index: 99;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    font-size: 26rpx;
    color: $uni-primary;
    .right{
      margin-top: 2rpx;
    }
    .two{
      flex: 1;
    }
  }
  .body{
    border-top: 1rpx solid #DEDEDE;
    margin-bottom: 140rpx;
    margin-top: 88rpx;
    font-size: 26rpx;
    .body_item{
      border-bottom: 1rpx solid #DEDEDE;
      padding: 24rpx;
    }
  }
  .zanwu{
    margin-bottom: 140rpx;
    margin-top: 88rpx;
    display: flex;
    justify-content: center;
    .newicon-zanwu{
      font-size: 256rpx;
      color: #D6D6D6;
      margin-top: 140rpx;
    }
  }
  .foot_common_btns{
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
}
</style>