EmploymentSite/h5app/src/components/companySelect.vue

<template>
  <div class="b-select" @click="onOpen()">
    <div class="select-text select-placeholder">{{ resultInfo.text ? resultInfo.text : '请选择企业' }}</div>
    <a @click="onOpen()">选择</a>
  </div>
  <ion-modal :is-open="isOpen" @willPresent="onRest()">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onClose()"></ion-icon>
        </ion-buttons>
        <ion-title>选择企业</ion-title>
        <ion-buttons slot="end">
          <ion-button fill="clear" @click="onClose()">关闭</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-item class="search-item" style="--border-style: unset; --inner-padding-end: 0px;--padding-start: 0px;">
        <ion-input placeholder="请输入企业名称" class="custom"
                   v-model="searchParams.companyName"
                   @input="reload()" :clear-on-edit="true"
                   style="border: 1px solid #f2f2f5;border-radius: 14px;height: 35px;">
          <ion-icon slot="start" :icon="searchOutline" aria-hidden="true" style="padding: 0 10px;"></ion-icon>
        </ion-input>
      </ion-item>
      <div class="bw-vue-list">
        <div class="list-content">
          <ion-list>
            <ion-item v-for="(record,key) in dataList" :key="key">
              <ion-label @click="onSelect(record)">
                <span v-html="formatStr(record.companyName)"></span>
              </ion-label>
            </ion-item>
          </ion-list>
          <b-empty v-if="dataList.length<=0" :loading="loading"/>
        </div>
      </div>
    </ion-content>
  </ion-modal>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, ref, watch} from 'vue';
import {arrowBackOutline, searchOutline} from 'ionicons/icons';
import {IonIcon, onIonViewDidEnter} from '@ionic/vue';
import BEmpty from "@/components/empty.vue";
import {getCompanyList} from "@/api/company";
import {useUserStore} from "@/store/modules/user";

export default defineComponent({
  name: 'companySelect',
  components: {IonIcon, BEmpty},
  props: {},
  setup(props, context) {
    const total = ref(30);
    const loading = ref(false);
    const pagination = computed(() => ({
      total: total,
      current: searchParams.pageIndex,
      pageSize: searchParams.pageSize
    }));
    const searchParams = reactive({
      pageIndex: 1,
      pageSize: 30,
      companyName: '',
      loginUserID: ''
    });
    const isOpen = ref(false);
    const dataList = ref<any>([]);
    const resultInfo = reactive({value: '', text: ''})

    const reload = () => {
      loading.value = true;
      setTimeout(() => {
        searchParams.pageIndex = 1;
        const loginUserInfo = useUserStore().getUserInfo;
        searchParams.loginUserID = loginUserInfo.userID || '';
        getCompanyList(searchParams).then(data => {
          dataList.value = data.list;
          total.value = data.total;
          loading.value = false;
        })
      }, 300)
    }

    const onSelect = (item: any) => {
      resultInfo.text = item.companyName;
      resultInfo.value = item.companyID;
      context.emit("resultInfo", resultInfo);
      onClose();
    }

    const onOpen = () => {
      isOpen.value = true;
    }

    const onClose = () => {
      isOpen.value = false;
    };

    const onRest = () => {
      dataList.value = [];
      searchParams.companyName = '';
      searchParams.pageIndex = 1;
      resultInfo.text = '';
      resultInfo.value = '';

      reload();
    }

    const formatStr = (str: any) => {
      if (!str) {
        return "";
      }

      return str.replace(searchParams.companyName, '<span style="color: coral">' + searchParams.companyName + '</span>');
    }

    return {
      searchOutline,
      arrowBackOutline,
      total,
      loading,
      isOpen,
      dataList,
      pagination,
      searchParams,
      onSelect,
      onOpen,
      onClose,
      reload,
      onRest,
      formatStr,
      resultInfo
    }
  }
});
</script>