<template> <van-popup :show="innerShow" position="bottom" class="doc-unit"> <van-picker :loading="loading" title="科室选择" :columns="array" :columns-field-names="fieldNames" v-model="innerValue" @confirm="onConfirm" @cancel="onCancel" > </van-picker> </van-popup> </template> <script> import { getOfficeList } from '@/api/doctor/generalFU.js' export default { name: 'DocOffice', props: { show: Boolean, value: [String, Number], unitId: [String, Number], fieldNames: { type: Object, default: () => { return {text: 'officeName', value: 'id'} } } }, emits: ['update:show', 'update:value', 'change'], data() { return { innerValue: undefined, array: [], loading: false, } }, computed: { innerShow() { return this.show } }, created() { this.getData() }, methods: { getData() { this.array = [] if (!this.unitId) return this.loading = true getOfficeList(this.unitId).then(res => { this.array = res.data || [] }).finally(() => { this.loading = false }) }, onConfirm({ selectedValues, selectedOptions }) { this.$emit('update:value', selectedValues[0]) this.$emit('change', selectedOptions[0]) this.$emit('update:show', false) }, onCancel() { this.$emit('update:show', false) } }, watch: { value: { handler(value) { if (value == null) return this.innerValue = [value] }, immediate: true }, unitId: { handler() { this.getData() } }, } } </script> <style lang="less" scoped> </style>