更新记录

1.0.0（2026-01-07） 下载此版本

首次提交

平台兼容性

uni-app(4.84)

uni-app x(4.85)

picker-modal

1.引入

```
import pickerSelect from '@/uni_modules/picker-modal/components/picker-modal/picker-modal.vue'
```

2.使用

    html
    <pickerSelectModal title="检验设备"  v-model="formData.inspectionFacilityDoc"  :columns="deviceSelectionColumns"
    :apiConfig="deviceSelectionApiConfig" :disabled="false"></pickerSelectModal>

    js
    const deviceSelectionColumns = reactive([
        {
            value: 'facilityName',
            label: '检验仪器',
            width: '100%',
            isTitle:true, //标题
            query: true
        },
        {
            value: 'measurementRange',
            label: '量⠀⠀⠀程',
            width: '100%',
        },
        {
            value: 'maxFranchise',
            label: '最大允差',
            width: '100%',
            unit:'级',//单位
        },
        {

            value: 'leaveFactoryNumber',
            label: '出厂编号',
            width: '100%',
            query:true
        },
    ])

    //检验设备选择弹框接口及默认传参配置
    const deviceSelectionApiConfig = reactive({
        url: '/cqyt/facility-info/page',
        method: 'GET',
        params: {
            businessType: 2 
        }
    })

    //传参配置
    const props = defineProps({
    visible: { //是否显示弹框
        type: Boolean,
        default: false
    },
    showInput:{
        type: Boolean,
        default: true // 是否显示选择框
    },
    mode: {
        type: String, //弹窗方向
        default: 'bottom', // left、top、right、bottom、center
    },
    title: {
        type: String,
        default: '人员列表' // 弹窗标题
    },
    round: {
        type: Number,
        default: 10 // 弹窗圆角
    },
    overlay: {
        type: Boolean,
        default: true // 是否显示遮罩层
    },
    overlayOpacity: {
        type: Number,
        default: 0.1 // 遮罩层透明度
    },
    closeable: {
        type: Boolean,
        default: true // 是否显示关闭按钮
    },
    overlayStyle: {
        type: Object,
        default: () => ({}) // 遮罩层样式
    },
    closeOnClickOverlay: {
        type: Boolean,
        default: false // 是否点击遮罩层关闭弹窗
    },
    zIndex: {
        type: Number,
        default: 999 // 弹窗z-index
    },
    bgColor: {
        type: String,
        default: 'rgba(255,255,255,1)' // 弹窗背景颜色
    },
    //弹窗自定义样式
    customStyle: {
        type: Object,
        default: () => ({
            // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
        })
    },
    multiple: {
        type: Boolean,
        default: true // 是否支持多选
    },
    apiConfig: { //接口配置
        type: Object,
        default: () => ({
            url: '/cqyt/personnel-info/getAdminUserInfoPage',
            method: 'GET',
            params: {}
        })
    },
    //主键id，唯一，用于单选多选
    keyStr: {
        type: String,
        default: 'id'
    },
    //输入框显示字段名称
    displayField:{
        type:String,
        default:'facilityName'
    },
    //默认列
    columns: {
        type: Array,
        default: () => [{
                value: 'nickname',
                label: '姓名',
                width: '100%',
                query:true
            },
            {
                value: 'userNo',
                label: '员工编号',
                width: '100%',
            },
        ]
    },
    //是否禁用
    disabled:{
        type:Boolean,
        default:false
    },
    modelValue:{
        type: Array,
        default: ()=>[]
    }
})

3.功能介绍

1.该组件采用vue3语法搭配uview-plus框架

2.表单里边用，v-model双向绑定，禁用状态，列表接口及默认传参配置，单选和多选配置，列表字段可动态配置并可设置宽度，查询条件也可动态配置，等等。

3.如需单独使用弹框列表，可使用,传参showInput，隐藏掉输入框，可使用组件抛出的方法openModal打开弹窗