更新记录

1.0.0（2023-09-14） 下载此版本

级联选择，uni-ui，自用

平台兼容性

uwo-data-picker

<uni-forms-item
                        label="级联选择"
                        name="treeData"
                        required
                        :rules="[
                            {
                                required: true,
                                errorMessage: '级联选择不能为空'
                            }
                        ]"
                    >
                        <uwo-data-picker
                            :map="{ id: 'id', name: 'name', fullName: 'fullName', parentId: 'pid' }"
                            :sourceData="treeSource"
                            v-model="formData.treeData"
                            @change="handleChange"
                        ></uwo-data-picker>
                    </uni-forms-item>
                    <uni-forms-item label="级联选择禁用" name="treeData">
                        <uwo-data-picker
                            :map="{ id: 'id', name: 'name', fullName: 'fullName', parentId: 'pid' }"
                            :disabled="true"
                            :sourceData="treeSource"
                            v-model="formData.treeData"
                        ></uwo-data-picker>
                    </uni-forms-item>

const treeSource = ref([
    {
        id: '1514905826354003968',
        name: '基础管理',
        code: '100',
        fullName: '基础管理',
        pid: '0'
    },
    {
        id: '1514905831177453568',
        name: '现场管理',
        code: '101',
        fullName: '现场管理',
        pid: '0'
    },
    {
        id: '1514905826475638784',
        name: '资质证照',
        code: '100100',
        fullName: '基础管理>资质证照',
        pid: '1514905826354003968'
    },
    {
        id: '1514905826953789440',
        name: '安全生产管理机构及人员',
        code: '100101',
        fullName: '基础管理>安全生产管理机构及人员',
        pid: '1514905826354003968'
    },
    {
        id: '1514905827318693888',
        name: '安全生产责任制',
        code: '100102',
        fullName: '基础管理>安全生产责任制',
        pid: '1514905826354003968'
    },
    {
        id: '1514905827658432512',
        name: '安全生产管理制度',
        code: '100103',
        fullName: '基础管理>安全生产管理制度',
        pid: '1514905826354003968'
    },
    {
        id: '1514905828006559744',
        name: '安全操作规程',
        code: '100104',
        fullName: '基础管理>安全操作规程',
        pid: '1514905826354003968'
    },
    {
        id: '1514905828358881280',
        name: '教育培训',
        code: '100105',
        fullName: '基础管理>教育培训',
        pid: '1514905826354003968'
    },
    {
        id: '1514905828707008512',
        name: '安全生产管理档案',
        code: '100106',
        fullName: '基础管理>安全生产管理档案',
        pid: '1514905826354003968'
    },
    {
        id: '1514905829055135744',
        name: '安全生产投入',
        code: '100107',
        fullName: '基础管理>安全生产投入',
        pid: '1514905826354003968'
    },
    {
        id: '1514905829399068672',
        name: '应急管理',
        code: '100108',
        fullName: '基础管理>应急管理',
        pid: '1514905826354003968'
    },
    {
        id: '1514905829747195904',
        name: '特种设备基础管理',
        code: '100109',
        fullName: '基础管理>特种设备基础管理',
        pid: '1514905826354003968'
    },
    {
        id: '1514905830103711744',
        name: '职业卫生基础管理',
        code: '100110',
        fullName: '基础管理>职业卫生基础管理',
        pid: '1514905826354003968'
    },
    {
        id: '1514905830460227584',
        name: '相关方基础管理',
        code: '100111',
        fullName: '基础管理>相关方基础管理',
        pid: '1514905826354003968'
    },
    {
        id: '1514905830820937728',
        name: '其他基础管理',
        code: '100112',
        fullName: '基础管理>其他基础管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471447724032',
        name: '安全基础管理',
        code: '100113',
        fullName: '基础管理>安全基础管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471447724033',
        name: '职业健康管理',
        code: '100114',
        fullName: '基础管理>职业健康管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471451918336',
        name: '危险化学品管理',
        code: '100115',
        fullName: '基础管理>危险化学品管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471456112640',
        name: '设备设施管理',
        code: '100116',
        fullName: '基础管理>设备设施管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471460306944',
        name: '特种设备管理',
        code: '100117',
        fullName: '基础管理>特种设备管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471464501248',
        name: '工艺安全管理',
        code: '100118',
        fullName: '基础管理>工艺安全管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471464501249',
        name: '消防安全管理',
        code: '100119',
        fullName: '基础管理>消防安全管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471468695552',
        name: '相关方管理',
        code: '100120',
        fullName: '基础管理>相关方管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471472889856',
        name: '作业安全管理',
        code: '100121',
        fullName: '基础管理>作业安全管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471477084160',
        name: '施工安全管理',
        code: '100122',
        fullName: '基础管理>施工安全管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471477084161',
        name: '食品安全管理',
        code: '100123',
        fullName: '基础管理>食品安全管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471481278464',
        name: '环保管理',
        code: '100124',
        fullName: '基础管理>环保管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471485472768',
        name: '辐射安全管理',
        code: '100125',
        fullName: '基础管理>辐射安全管理',
        pid: '1514905826354003968'
    },
    {
        name: '能源管理',
        fullName: '基础管理>能源管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471489667073',
        name: '机构、职责与投入',
        code: '100127',
        fullName: '基础管理>机构、职责与投入',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471493861376',
        name: '规章制度',
        code: '100128',
        fullName: '基础管理>规章制度',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471498055680',
        name: '事故应急管理',
        code: '100129',
        fullName: '基础管理>事故应急管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471502249984',
        name: '风险与隐患治理',
        code: '100130',
        fullName: '基础管理>风险与隐患治理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471502249985',
        name: '劳动防护',
        code: '100131',
        fullName: '基础管理>劳动防护',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471506444288',
        name: '交通安全管理',
        code: '100132',
        fullName: '基础管理>交通安全管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471510638592',
        name: '治安管理',
        code: '100133',
        fullName: '基础管理>治安管理',
        pid: '1514905826354003968'
    },
    {
        id: '1590602471514832896',
        name: '防疫卫生管理',
        code: '100134',
        fullName: '基础管理>防疫卫生管理',
        pid: '1514905826354003968'
    },
    {
        id: '1514905831294894080',
        name: '特种设备现场管理',
        code: '101100',
        fullName: '现场管理>特种设备现场管理',
        pid: '1514905831177453568'
    },
    {
        id: '1514905831768850432',
        name: '生产设备设施及工艺',
        code: '101101',
        fullName: '现场管理>生产设备设施及工艺',
        pid: '1514905831177453568'
    },
    {
        id: '1514905832121171968',
        name: '场所环境',
        code: '101102',
        fullName: '现场管理>场所环境',
        pid: '1514905831177453568'
    },
    {
        id: '1514905832477687808',
        name: '从业人员操作行为',
        code: '101103',
        fullName: '现场管理>从业人员操作行为',
        pid: '1514905831177453568'
    },
    {
        id: '1514905832834203648',
        name: '消防安全',
        code: '101104',
        fullName: '现场管理>消防安全',
        pid: '1514905831177453568'
    },
    {
        id: '1514905833186525184',
        name: '用电安全',
        code: '101105',
        fullName: '现场管理>用电安全',
        pid: '1514905831177453568'
    },
    {
        id: '1514905833543041024',
        name: '职业卫生现场安全',
        code: '101106',
        fullName: '现场管理>职业卫生现场安全',
        pid: '1514905831177453568'
    },
    {
        id: '1514905833891168256',
        name: '有限空间现场安全',
        code: '101107',
        fullName: '现场管理>有限空间现场安全',
        pid: '1514905831177453568'
    },
    {
        id: '1514905834247684096',
        name: '辅助动力系统',
        code: '101108',
        fullName: '现场管理>辅助动力系统',
        pid: '1514905831177453568'
    },
    {
        id: '1514905834608394240',
        name: '相关方现场管理',
        code: '101109',
        fullName: '现场管理>相关方现场管理',
        pid: '1514905831177453568'
    },
    {
        id: '1514905834960715776',
        name: '其他现场管理',
        code: '101110',
        fullName: '现场管理>其他现场管理',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471368032256',
        name: '作业场所布置',
        code: '101111',
        fullName: '现场管理>作业场所布置',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471376420864',
        name: '标志与标识',
        code: '101112',
        fullName: '现场管理>标志与标识',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471376420865',
        name: '设备设施',
        code: '101113',
        fullName: '现场管理>设备设施',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471380615168',
        name: '特种设备',
        code: '101114',
        fullName: '现场管理>特种设备',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471384809472',
        name: '电气系统',
        code: '101115',
        fullName: '现场管理>电气系统',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471389003776',
        name: '工艺与仪表系统',
        code: '101116',
        fullName: '现场管理>工艺与仪表系统',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471393198080',
        name: '危险化学品',
        code: '101117',
        fullName: '现场管理>危险化学品',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471397392384',
        name: '职业病危害',
        code: '101118',
        fullName: '现场管理>职业病危害',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471401586688',
        name: '作业行为',
        code: '101119',
        fullName: '现场管理>作业行为',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471405780992',
        name: '相关方作业',
        code: '101120',
        fullName: '现场管理>相关方作业',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471405780993',
        name: '食品安全',
        code: '101121',
        fullName: '现场管理>食品安全',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471409975296',
        name: '水气噪污染防治',
        code: '101122',
        fullName: '现场管理>水气噪污染防治',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471414169600',
        name: '能源节约',
        code: '101123',
        fullName: '现场管理>能源节约',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471418363904',
        name: '固废管理',
        code: '101124',
        fullName: '现场管理>固废管理',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471422558208',
        name: '施工作业',
        code: '101125',
        fullName: '现场管理>施工作业',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471426752512',
        name: '治安防范',
        code: '101126',
        fullName: '现场管理>治安防范',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471430946816',
        name: '交通安全',
        code: '101127',
        fullName: '现场管理>交通安全',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471430946817',
        name: '防疫卫生',
        code: '101128',
        fullName: '现场管理>防疫卫生',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471435141120',
        name: '其他类',
        code: '101129',
        fullName: '现场管理>其他类',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471439335424',
        name: '通风与排水',
        code: '101130',
        fullName: '现场管理>通风与排水',
        pid: '1514905831177453568'
    },
    {
        id: '1590602471443529728',
        name: '辐射安全',
        code: '101131',
        fullName: '现场管理>辐射安全',
        pid: '1514905831177453568'
    }
]);

const myForm = ref();
// 基础表单数据
const formData = ref({
    // treeData: '100100'//1514905831177453568 code 或者id
    treeData:{ 
        code: "100100",
        fullName: "基础管理>资质证照", //*
        id: "1514905826475638784",//*
        name: "资质证照",
        pid: "1514905826354003968",
    }
});

const handleChange = (v) => {
    console.log(v);
};