com.kasite.client.uniapp.patient/pagesPatient/st1/business/news/deptList/deptList.vue

<template>
  <view class="container">
    <view class="content">
      <view class="search">
        <view class="search_box">
          <input :class="[isFocus ? 'search_input' : 'search_input_none']" 
                 placeholder="搜索科室名称" 
                 :placeholder-class="isFocus ? 'placeholder' : 'placeholder_none'" 
                 v-model="searchValue" 
                 @focus="focusFn('focus')" />
          <image :class="['search_icon', isFocus ? 'search_icon_none' : '']" :src="iconUrl.search"></image>
          <image class="remove_icon" v-if="isFocus" :src="iconUrl.cha" @click.stop="focusFn('blur')"></image>
          <view v-if="isFocus" :class="['search_confirm', 'backgroundCustom_F08', isFocus ? 'search_confirm_active' : '']" @click="searchClick">搜索</view>
        </view>
      </view>
    </view>
    <view class="dept_list">
      <view class="dept_list_inner" v-if="deptList.length > 0">
        <view :class="['dept_list_fir', (deptListIndex >= 0 && deptList[deptListIndex]?.Data_1?.length > 0) ? 'dept_list_fir_short' : '']">
          <view :class="['dept_item', index == deptListIndex ? 'dept_item_active colorCustom' : '', index == deptListIndex - 1 ? 'toBoderRadio' : '']" 
                v-for="(item, index) in deptList" :key="index" 
                @click="deptClick('fir', item, index)">
            <view class="dept_item_inner border_bottom">
              {{item.DeptName}}
            </view>
          </view>
        </view>
        <view class="dept_list_sec" v-if="deptListIndex >= 0 && deptList[deptListIndex]?.Data_1?.length > 0">
          <view class="dept_item border_bottom" 
                v-for="(item, index) in deptList[deptListIndex].Data_1" :key="index" 
                @click="deptClick('sec', item, index)">
             {{item.DeptName}}
          </view>
        </view>
      </view>
    </view>
    <view v-if="deptList.length == 0" class="noData">
      <noData value="暂无数据"></noData>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { queryBaseDeptTreeV2 } from '@/pagesPatient/service/new/index';
import noData from '@/pages/st1/components/noData/noData.vue';

const iconUrl = icon;
const isFocus = ref(false);
const searchValue = ref('');
const queDeptList = ref<any[]>([]);
const deptList = ref<any[]>([]);
const deptListIndex = ref(-1);
const app = getApp();

onLoad((options) => {
  main();
});

const main = async () => {
  let queryData = {
    HospitalId: app.globalData?.districtId || app.globalData?.hosId,
    IsQueryUserSize: true,
    StatusList: "0,1"
  };
  let resp = await queryBaseDeptTreeV2(queryData);
  if (!common.isEmpty(resp)) {
    queDeptList.value = resp;
    deptList.value = resp;
    deptListIndex.value = 0;
  }
};

const deptClick = (type: string, item: any, index: number) => {
  let qb = encodeURIComponent(JSON.stringify(item));
  let url = "";
  if (type == 'fir') {
    deptListIndex.value = index;
    if (common.isEmpty(item.Data_1)) {
      url = `/pagesPatient/st1/business/news/deptDetails/deptDetails?queryBean=${qb}`;
    }
  } else if (type == 'sec') {
    url = `/pagesPatient/st1/business/news/deptDetails/deptDetails?queryBean=${qb}`;
  }
  
  if (!common.isEmpty(url)) {
    common.goToUrl(url);
  }
};

const searchClick = () => {
  if (common.isEmpty(searchValue.value)) {
    common.showModal('请输入搜索科室');
    return;
  }
  let tempDeptList: any[] = [];
  let tempQueDeptList = common.deepCopy(queDeptList.value, []);
  tempQueDeptList.map((item: any) => {
    let data_1: any[] = [];
    let has = false;
    if (common.isNotEmpty(item.Data_1)) {
      item.Data_1.map((ele: any) => {
        if (ele.DeptName.indexOf(searchValue.value) != -1) {
          has = true;
          data_1.push(ele);
        }
      });
    }
    if (item.DeptName.indexOf(searchValue.value) != -1) {
      has = true;
    }
    if (has) {
      item.Data_1 = data_1;
      tempDeptList.push(item);
    }
  });
  deptList.value = tempDeptList;
  deptListIndex.value = -1;
};

const focusFn = (type: string) => {
  if (type === 'focus') {
    isFocus.value = true;
  } else {
    isFocus.value = false;
    searchValue.value = '';
    deptList.value = queDeptList.value;
    deptListIndex.value = -1;
  }
};
</script>

<style lang="scss" scoped>
@import '@/pagesPatient/st1/static/css/search.wxss';

.content {
  padding-top: 110upx;
  position: relative;
  z-index: 10;
}

.dept_list {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95%;
  padding: 140upx 30upx 0;
}

.dept_list_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 24upx ;
  height: 100%;
}

.dept_list_fir {
  height: 100%;
  overflow: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}

.dept_list_fir_short {
  max-width: 316upx;
}
.dept_list_fir_short .dept_item {
    background: #F7F7FC;
}
.dept_list_sec {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 410upx;
  background-color: #fff;
}

.dept_list_sec .dept_item {
  text-indent: 30upx;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 34upx 0 34upx 30upx;
  line-height: 44upx;
}
.dept_item {
  font-size: 28upx;
  position: relative;
  color: #222326;
  padding-left: 30upx;
  padding-right: 30upx;
}

.dept_item_inner {
  padding: 34upx 0;
  line-height: 44upx;
}

.dept_item_active {
  font-size: 32upx;
  font-weight: bold;
}

.dept_list_fir_short .dept_item_active {
  background-color: #fff;
}
.dept_list_fir_short .dept_item_active  + .dept_item {
  border-radius: 0 30upx 0 0 ;
}
.toBoderRadio{
  border-radius: 0 0 30upx 0;
}
</style>