magiccube-vue3/package/components/department-picker/index.js

vue3-js版组件库

import '../../style/department-picker.less'
import { ref, computed, watchEffect } from 'vue'
import * as utils from '../../utils/common'
const DepartmentPicker = {
    name: 'McDepartmentPicker',
    props: {
        /**
         * 触发器的值
        */
        type: {
            type: String,
            default: 'input'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '所属部门'
        },
        /**
         * popup的值
        */
        title: {
            type: String,
            default: '所属部门'
        },
        width: {
            type: Number,
            default: 640
        },
        /**
         * department 的值
        */
        departmentData: {
            type: Array,
            default: () => []
        },
        modelValue: { // 默认选中的部门val
            type: Array,
            default: () => []
        },
        multi: {
            type: Boolean,
            default: true
        }
    },
    emits: ['change', 'update:modelValue'],
    setup(props, { emit, slots }) {
        /**
         * 控制popup的显示或隐藏
        */
        const popupVisible = ref(false)
        const handleVisible = () => {
            popupVisible.value = true
        }
        const handleClose = () => {
            popupVisible.value = false
        }
        /**
         * 处理选中的值
         * activeDepartmentKeys 每次选中时都会变化
         * model 只要点击确认才会变化
        */
        const activeDepartmentKeys = ref([])
        watchEffect(() => {
            activeDepartmentKeys.value = utils.deepCopy(props.modelValue)
        })
        const model = computed({
            get() {
                return props.modelValue || []
            },
            set(val) {
                emit('update:modelValue', val)
                emit('change')
            }
        })
        const codeToData = (keys, list) => {
            let arr = []
            for (let i = 0, len = list.length; i < len; i++) {
                const item = list[i]
                if (keys.includes(item.key)) arr.push(item)
                if (arr.length === keys.length) {
                    break
                } else {
                    if (item.children && item.children.length) arr = [...arr, ...codeToData(keys, item.children)]
                }
            }
            return arr
        }
        const resultString = computed(() => {
            let resStr = ''
            if (model.value.length) {
                const ary = codeToData(model.value, props.departmentData)
                resStr = ary.map(n => n.name).toString()
            }
            return resStr
        })
        const handleConfirm = () => {
            model.value = utils.deepCopy(activeDepartmentKeys.value)
            handleClose()
        }
        /**
         * 渲染模板
        */
        return () => (
            <div class="mc-department-picker">
                {
                    props.type === 'input' ? (
                        <McInput modelValue={resultString.value}
                            readonly
                            disabled={props.disabled}
                            placeholder={props.placeholder}
                            onFocus={handleVisible} />
                    ) : (
                        <McLink onClick={handleVisible}>{resultString.value || props.placeholder}</McLink>
                    )
                }
                <McPopup width={props.width}
                    title={props.title}
                    modelValue={popupVisible.value}
                    onCancel={handleClose}
                    onClose={handleClose}
                    onConfirm={handleConfirm}
                >
                    <div style={{
                        height: '400px',
                        overflow: 'auto'
                    }}>
                        <McDepartmentTree data={props.departmentData}
                            multi={props.multi}
                            v-model={activeDepartmentKeys.value}></McDepartmentTree>
                    </div>
                </McPopup>
            </div>
        )
    }
}
DepartmentPicker.install = Vue => {
    Vue.component(DepartmentPicker.name, DepartmentPicker)
}
const McDepartmentPicker = DepartmentPicker

export { McDepartmentPicker, McDepartmentPicker as default }