{"version":3,"file":"CascadeDialog.cjs","sources":["../../../../../packages/components/dialog/CascadeDialog.vue"],"sourcesContent":["<template>\n    <el-dialog v-model=\"dialogVisible\" :title=\"title\" width=\"1000px\" center>\n        <div class=\"dialog-content-box\">\n            <div class=\"box-title\">\n                <div v-for=\"(item, index) in columnsNumber\" :key=\"index\">请选择{{ levelList[index] }}级选项</div>\n            </div>\n            <div class=\"split-line-row\"></div>\n            <div class=\"options-box\">\n                <div class=\"options-box-level\" v-for=\"itemA in columnsNumber\" :key=\"itemA\">\n                    <!-- 选项 -->\n                    <div\n                        v-for=\"(item, index) in selectList[itemA + '']\"\n                        @click=\"choseOptions(item, itemA + '', index + 1)\"\n                        :style=\"{\n                            borderColor: isShowFocusStyle(itemA + '', index) ? 'rgba(0, 110, 255, 1.00)' : ' rgba(229, 232, 238, 1.00)',\n                        }\"\n                        :key=\"index\"\n                        class=\"option-item\"\n                    >\n                        <div contenteditable=\"true\">{{ item.label }}</div>\n                        <svg-icon v-if=\"isShowFocusStyle(itemA + '', index)\" name=\"Subtract\" class=\"svg-icon\" />\n                        <div v-if=\"isShowFocusStyle(itemA + '', index)\" class=\"button-delete\" @click.stop=\"deleteOptions(itemA + '', index)\">-</div>\n                    </div>\n                    <div class=\"button-add\" v-if=\"itemA == 1 || current[itemA - 1]\" @click=\"addOptions(itemA + '')\">\n                        <svg-icon name=\"addOption\" />添加选项\n                    </div>\n                </div>\n            </div>\n        </div>\n        <template #footer>\n            <span class=\"dialog-footer\">\n                <el-button @click=\"dialogVisible = false\">取消</el-button>\n                <el-button type=\"primary\" @click=\"confirmEdit\">确认</el-button>\n            </span>\n        </template>\n    </el-dialog>\n</template>\n<script setup>\nimport { ref, reactive, watch } from \"vue\";\n\nconst emits = defineEmits([\"confirmOption\"]);\nconst props = defineProps({\n    title: {\n        type: String,\n        default: \"编辑选项\",\n    },\n    optionsList: {\n        type: Object,\n        default: {},\n    },\n    // 几级选项\n    columnsNumber: {\n        type: Number,\n        default: 4,\n    },\n});\nconst levelList = [\"一\", \"二\", \"三\", \"四\"];\nlet questionC = ref({});\nlet dialogVisible = ref(false);\nlet choseIconIndex = ref(\"\");\nlet selectList = ref({}); // 存储列表需要得数据\nlet current = ref({});\nlet columns = ref(0);\nlet columnsList = reactive([]);\n\nwatch(dialogVisible, () => {\n    initData();\n});\n\ndefineExpose({ dialogVisible });\n\nconst confirmEdit = async () => {\n    await findcolums(questionC.value, 1);\n    // 判断有几列数据\n    emits(\"confirmOption\", { data: questionC.value, columns: columns.value });\n    dialogVisible.value = false;\n};\n// 是否展示边框颜色和箭头\nconst isShowFocusStyle = (key, index) => {\n    return current.value[key] == index + 1;\n};\n\n// 初始化数据\nfunction initData() {\n    questionC.value = JSON.parse(JSON.stringify(props.optionsList));\n    choseIconIndex.value = \"1\";\n    selectList.value = {};\n    selectList.value[\"1\"] = questionC.value;\n    current.value = {};\n    columns.value = 0;\n    columnsList = [];\n    findDefaultOption(questionC.value, 1);\n}\n\n// 递归遍历数组,找到列数\nfunction findcolums(data, level) {\n    columns.value = level;\n    data.forEach((item) => {\n        if (item.children && item.children.length > 0) {\n            columnsList.push(level + 1);\n            findcolums(item.children, level + 1);\n        } else {\n            columnsList.push(level);\n        }\n    });\n    console.log(columnsList);\n    columns.value = columnsList.length > 0 ? Math.max(...columnsList) : 0;\n}\n// 递归，找到刚开弹框默认选中选项\nfunction findDefaultOption(data, level) {\n    for (let index = 1; index <= data.length; index++) {\n        let item = data[index - 1];\n        // 下一级别赋值\n        selectList.value[level + 1 + \"\"] = item.children;\n        if (item.children && item.children.length > 0) {\n            // 当前级别选中值\n            current.value[level + \"\"] = index + \"\";\n            findDefaultOption(item.children, level + 1);\n            break;\n        }\n    }\n}\nfunction choseOptions(item, key, index) {\n    // key + 1为 下一个层级key值\n    selectList.value[+key + 1] = item.children;\n    // 当前层级选中值\n    current.value[key] = index;\n    // 判断当前选中是哪一栏得，大于下一栏得所有数据清空\n    switch (key) {\n        case \"1\":\n            // 清空下一级后面级联数据\n            selectList.value[\"3\"] = [];\n            selectList.value[\"4\"] = [];\n            // 清空后面选中数据\n            current.value[\"2\"] = \"\";\n            current.value[\"3\"] = \"\";\n            current.value[\"4\"] = \"\";\n            break;\n        case \"2\":\n            // 清空下一级后面级联数据\n            selectList.value[\"4\"] = [];\n            current.value[\"3\"] = \"\";\n            current.value[\"4\"] = \"\";\n            break;\n        case \"3\":\n            // 清空下一级后面级联数据\n            current.value[\"4\"] = \"\";\n            break;\n    }\n}\n\n// 最后一列点击选中\nfunction choseOptions4(key, index) {\n    current.value[key] = index;\n}\n// 选项新增\nfunction addOptions(selectNum) {\n    // questionC 级联数据新增\n    // selectList 展示数据新增\n    let list = selectList.value[selectNum];\n    let obj = {\n        label: `选项${list.length + 1}`,\n        value: list.length + 1,\n        children: [],\n    };\n    selectList.value[selectNum].push(obj);\n}\n\n// 选项删除\nfunction deleteOptions(selectNum, index) {\n    selectList.value[selectNum].splice(index, 1);\n    switch (selectNum) {\n        case \"1\":\n            console.log(1);\n            // 清空后面级联数据\n            selectList.value[\"2\"] = [];\n            selectList.value[\"3\"] = [];\n            selectList.value[\"4\"] = [];\n            // 清空后面选中数据\n            current.value[\"1\"] = \"\";\n            current.value[\"2\"] = \"\";\n            current.value[\"3\"] = \"\";\n            current.value[\"4\"] = \"\";\n            break;\n        case \"2\":\n            selectList.value[\"3\"] = [];\n            selectList.value[\"4\"] = [];\n            current.value[\"2\"] = \"\";\n            current.value[\"3\"] = \"\";\n            current.value[\"4\"] = \"\";\n            break;\n        case \"3\":\n            selectList.value[\"4\"] = [];\n            current.value[\"3\"] = \"\";\n            current.value[\"4\"] = \"\";\n            break;\n        case \"4\":\n            current.value[\"4\"] = \"\";\n            break;\n    }\n}\n</script>\n<style lang=\"scss\" scoped>\n//滚动条样式\n::-webkit-scrollbar {\n    width: 1px;\n    border-radius: 2px;\n    background-color: rgba(204, 204, 204, 0.1);\n}\n::-webkit-scrollbar-thumb {\n    border-radius: 2px;\n    background-color: rgba(204, 204, 204, 1);\n}\n.dialog-content-box {\n    .box-title {\n        display: flex;\n        div {\n            flex: 1;\n            text-align: center;\n            font-size: 14px;\n            font-weight: 400;\n            color: rgba(112, 120, 134, 1);\n        }\n    }\n    .split-line-row {\n        width: 100%;\n        height: 1px;\n        background: rgba(229, 232, 238, 1);\n        margin: 5px 0 10px 0;\n    }\n    .options-box {\n        display: flex;\n        .options-box-level {\n            display: flex;\n            align-items: center;\n            flex: 1;\n            flex-direction: column;\n            height: 300px;\n            border-right: 1px solid rgba(229, 232, 238, 1);\n            overflow: auto;\n            padding-top: 7px;\n            &:last-child {\n                border-right: none;\n            }\n            .option-item {\n                width: 209px;\n                height: 29px;\n                border-radius: 4px;\n                background: rgba(255, 255, 255, 1);\n                border: 1px solid rgba(229, 232, 238, 1);\n                padding: 3px 5px;\n                font-size: 14px;\n                font-weight: 400;\n                color: rgba(112, 120, 134, 1);\n                margin-bottom: 11px;\n                position: relative;\n                div:focus-visible {\n                    outline: none;\n                    border-color: rgba(0, 110, 255, 1);\n                }\n                .svg-icon {\n                    width: 4px;\n                    height: 9px;\n                    position: absolute;\n                    right: 0;\n                    top: 50%;\n                    transform: translate(100%, -50%);\n                }\n            }\n            .button-add {\n                width: 209px;\n                font-size: 12px;\n                font-weight: 400;\n                color: rgba(34, 64, 195, 1);\n                cursor: pointer;\n            }\n            .button-delete {\n                position: absolute;\n                top: 0;\n                right: 0;\n                transform: translate(50%, -50%);\n                width: 13px;\n                height: 13px;\n                line-height: 8px;\n                border-radius: 50%;\n                background: rgba(251, 100, 100, 1);\n                color: rgba(255, 255, 255, 1);\n                text-align: center;\n                font-size: 18px;\n                font-weight: 700;\n                cursor: pointer;\n            }\n        }\n    }\n}\n</style>\n"],"names":["levelList","questionC","ref","dialogVisible","choseIconIndex","selectList","current","columns","columnsList","reactive","watch","initData","expose","confirmEdit","findcolums","emits","isShowFocusStyle","key","index","props","findDefaultOption","data","level","item","choseOptions","addOptions","selectNum","list","obj","deleteOptions"],"mappings":"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"}