itsm-wx-handle/pages/setPolling/selectPolling.vue

<template>
  <view class="consumableList">
    <view class="head">
      <uni-search-bar v-model="dataInfo.keyWord" :placeholder="placeHolder" bgColor="#F8F8F8" @input="search" cancelButton="none" focus :radius="18" />
    </view>
    <view class="body" v-if="dataInfo.list.length">
      <view class="body_item ellipsis" :class="dataInfo.index == index ? 'activeClass' :''" v-for="(data, index) in dataInfo.list" :key="data.id" @click="clickItem(data,index)">
        {{data.name}}
      </view>
    </view>
    <view class="zanwu" v-else>
      <text class="newicon newicon-zanwu"></text>
    </view>
    <view class="foot_common_btns">
      <button @click="goBackPage" type="default" class="primaryButton btn">确定</button>
    </view>
  </view>
</template>

<script setup>
  import { debounce } from 'lodash-es'
  import { ref, reactive} from 'vue'
  import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
  import { api_inspectionNode } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useIncidentBuildStore } from '@/stores/incidentBuild'
  import { useGoBack } from '@/share/useGoBack.js'
  
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const incidentBuildStore = useIncidentBuildStore();
  const { goBack }  = useGoBack();
  
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
  const placeHolder = ref('请搜索巡检点');
  
	const entranceType = ref(null);
	
	// 院区id
	const branchId = ref(null);
	
  // 数据
  const dataInfo = reactive({
    list: [],//工单列表
    idx: 0,//页码
    hasMore: true,//是否有更多数据
    incidentData: {},//事件对象
    keyWord: '',//搜索的关键词
		item:null,
		index:null
  })
  
  // 搜索
  const search = debounce(getList.bind(null, 0), 500);

  // 获取列表信息
  function getList(idx){
    if(dataInfo.keyWord.trim() === ''){
      dataInfo.list = [];
      return;
    }
    
    uni.showLoading({
      title: "加载中",
      mask: true,
    });

    let postData = {
      idx: dataInfo.idx,
      sum: 9999,
      inspectionNode: {
				hosId: loginUserStore.loginUser.user.currentHospital.id,
				name: dataInfo.keyWord
      }
    }
    api_inspectionNode(postData).then(res => {
      uni.hideLoading();
      if(res.status == 200){
        let list = res.list || [];
        if(list.length){
          dataInfo.hasMore = true;
          dataInfo.list = list;
        }else{
          dataInfo.hasMore = false;
        }
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
	function goBackPage(){
		if(!dataInfo.item){
			uni.showToast({
			  icon: 'none',
			  title: '请选择巡检点！'
			});
			return
		}
		let data = JSON.stringify(dataInfo.item)
		uni.navigateTo({
		  url: '/pages/setPolling/setPolling?data=' + data
		})
	}
	
  // 点击
  function clickItem(data,index){
		dataInfo.index = index
		dataInfo.item = data;
		console.log(444,dataInfo.item)
  }
  
  onLoad((option) => {
    getList(0);
  })
  
  onPullDownRefresh(() => {

  })
  
  onReachBottom(() => {

  })
</script>

<style lang="scss" scoped>
.consumableList{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .head{
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;
    position: fixed;
    z-index: 99;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient( 90deg, #58CF66 0%, #DDE9FC 100%);
  }
  .body{
    margin-bottom: 140rpx;
    margin-top: 88rpx;
    font-size: 26rpx;
    .body_item{
      border-bottom: 1rpx solid #DEDEDE;
      padding: 24rpx;
    }
		.activeClass{
			color: #49b856;
		}
  }
  .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>