baoshi-swms-app-web/src/components/Owner.vue

<template>
  <van-dialog v-model:show="ownerTrueFalseBy"
              title="货主列表"
              :show-confirm-button="false"
              close-on-click-overlay
  >
    <van-search v-model="value" @input="onClickButton" @search="onClickButton" show-action placeholder="请输入搜索货主" >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
    <div style="width:100%;max-height:65vh;overflow:auto">
      <van-radio-group v-model="owner">
        <van-cell-group inset>
          <van-cell v-for="(item,i) in ownerFilterList" :title="item.name" clickable @click="onOwner(item)"  :key="i" >
            <template #right-icon>
              <van-radio :name="item.code" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
  </van-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { getOwner, getPrinter } from '@/api/basic/index'
import { closeLoading, showLoading } from '@/utils/loading'
import pinyin from 'pinyin'
const value=ref('')
const ownerTrueFalseBy=ref(false)
const owner=ref('')
const ownerList=ref([])
const ownerFilterList=ref([])
const onClickButton=()=>{
  ownerFilterList.value=ownerList.value.filter((item) => {
    return item.pinyin.includes(value.value) || item.name.includes(value.value)
  });
}
const convertToPinyin = (text) => {
  return pinyin(text, { style: pinyin.STYLE_NORMAL }).join('');
};
const modeType=ref('')
const show=(type)=>{
  modeType.value=type
  owner.value=''
  value.value=''
  if(localStorage.getItem('OWNER:KEY')){
    const list=JSON.parse(localStorage.getItem('OWNER:KEY'))
    ownerList.value=list
    ownerFilterList.value=list
    ownerTrueFalseBy.value=true
    return
  }
  showLoading()
  getOwner().then(res => {
    res.data.forEach(item=>{
      item.pinyin=convertToPinyin(item.name)
    })
    ownerList.value=res.data
    ownerFilterList.value=res.data
    localStorage.setItem('OWNER:KEY',JSON.stringify(res.data))
    ownerTrueFalseBy.value=true
  }).finally(() => {
    closeLoading()
  })

}
const emit = defineEmits()
const onOwner=(item)=>{
  owner.value = item.code
  ownerTrueFalseBy.value=false
  emit('onOwner', item,modeType.value)
}
defineExpose({show})
</script>
<style scoped lang="sass">
</style>