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

<template>
  <van-popup v-model:show="warehouseTrueFalseBy" position="center" round :close-on-click-overlay="false">
    <div class="select-warehouses">
      <div class="title">
        工作仓库设置
      </div>
      <van-radio-group v-model="code">
        <van-cell-group inset>
          <van-cell :title="value" clickable v-for="(value, key) in warehousesMap" @click="groupChange(key)">
            <template #right-icon>
              <van-radio :name="key" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <div class="btn" @click="onConfirm"> 确定</div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from '@/store/modules/user'
// 创建响应式数据
const warehouseTrueFalseBy = ref(false)
const warehousesMap = ref({
  'WH99': '测试仓库(WH99)',
  'WH01': '九干仓(WH01)',
  'WH02': '新浜一仓(WH02)',
  'WH10': '新浜二仓(WH10)',
})
const code = ref('')
const show = (warehouse) => {
  warehouseTrueFalseBy.value = true
  code.value = warehouse
}
const groupChange = (n) => {
  code.value = n
}
// 确认按钮事件
const storeUser = useStore()
const emit = defineEmits(['setWarehouse'])
const onConfirm = () => {
  storeUser.setToken({ warehouse: code.value, token: storeUser.token })
  emit('setWarehouse', code.value)
  warehouseTrueFalseBy.value = false
}
defineExpose({ show })
</script>
<style scoped lang="sass">
.select-warehouses
  padding: 10px 15px
  width: 300px

  .title
    font-size: 16px
    font-weight: 500
    padding-bottom: 10px

  .radio-item
    margin-bottom: 10px

  .btn
    color: #3c9cff
    line-height: 30px
    text-align: center
    cursor: pointer
</style>