labsop_h5/src/components/select-inst.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-11 18:02:10
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-04-16 16:19:33
 * @FilePath: \vant-demo-master\vant\vue3-ts\src\view\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <van-popup v-model:show="state.showPicker" round position="bottom" :style="{ height: '60%' }">
    <div class="flex">
      <van-search class="search-input" v-model="state.params.instName" placeholder="请输入仪器名称" shape="round" @search="getDataList" />
      <van-button style="" class="search-btn" type="success" size="small" round @click="getDataList">搜索</van-button>
    </div>
    <van-picker
      title="选择仪器"
      :loading="state.loading"
      show-toolbar
      :columns="state.columns"
      :columns-field-names="{ text: 'instName', value: 'id' }"
      @confirm="onConfirm"
      @cancel="onCancel"
      visible-item-count="8"
    />
  </van-popup>
</template>

<script name="selectInst" lang="ts" setup>
  import { reactive } from 'vue'
  import { useInstrApi } from '/@/api/instr/index'
  import to from 'await-to-js'

  const emit = defineEmits(['selectInst'])
  const instrApi = useInstrApi()
  const state = reactive({
    showPicker: false,
    searchValue: '',
    columns: [],
    loading: false,
    params: {
      instStatus: '10',
      pageNum: 1,
      pageSize: 9999,
      instName: ''
    }
  })

  const openPopup = () => {
    state.showPicker = true
    state.columns = []
    getDataList()
  }

  const getDataList = async () => {
    state.loading = true
    const [err, res]: ToResponse = await to(instrApi.getList({ ...state.params }))
    state.loading = false
    if (err) return
    state.columns = res.data.list
  }
  const onConfirm = ({ selectedOptions }: { selectedOptions: any[] }) => {
    state.showPicker = false
    const selectedOption = selectedOptions[selectedOptions.length - 1]
    emit('selectInst', selectedOption)
  }
  const onCancel = () => {
    state.showPicker = false
  }
  // 暴露变量
  defineExpose({
    openPopup
  })
</script>

<style lang="scss" scoped>
  .search-input {
    flex: 1;
  }
  .search-btn {
    width: 70px;
    height: 30px;
    margin: 0 10px;
    font-size: 14px;
  }
</style>