{"version":3,"file":"KrCascade.cjs","sources":["../../../../../packages/src/kr-cascade/KrCascade.vue"],"sourcesContent":["<template>\n    <div class=\"question-item\">\n        <div class=\"question-item-num\">\n            <question-title v-if=\"titleIsEdit\" :dataList=\"dataList\" @numberBlur=\"(e) => emits('numberChange', e)\" />\n            <div v-else style=\"margin-top: 8px\">{{ dataList.questionNumber }}</div>\n        </div>\n        <div class=\"question-item-content\">\n            <div class=\"title\">\n                <rich-text-editor ref=\"titileInput\" class=\"titile-input\" v-model:valueData=\"dataList.title\" />\n            </div>\n            <ul class=\"content\">\n                <el-select\n                    style=\"margin-right: 20px\"\n                    v-for=\"(column, index) in dataList.optionsColumList\"\n                    v-model=\"valueObj[`${index + 1}`]\"\n                    value-key=\"value\"\n                    @change=\"changePreSelect($event, index + 1)\"\n                    class=\"m-2\"\n                    placeholder=\"请选择\"\n                    size=\"large\"\n                >\n                    <el-option v-for=\"item in selectList[index + 1 + '']\" :key=\"item.value\" :label=\"item.label\" :value=\"item\" />\n                </el-select>\n            </ul>\n            <!-- 底部操作栏 -->\n            <div class=\"footer-operation\" v-if=\"footerShow\">\n                <action-bar\n                    class=\"action-bar\"\n                    @addCopy=\"() => emits('copyQuestion', dataList)\"\n                    @deleteQuestion=\"() => emits('deleteQuestion')\"\n                    @view=\"(e) => emits('singlePreview', e)\"\n                >\n                    <!-- 添加左侧操作按钮 -->\n                    <template #operation>\n                        <div class=\"bottom-operation\">\n                            <div class=\"button1\" @click=\"openBatchDialog\"><svg-icon name=\"batchEdit\" class=\"icon\" />编辑选项</div>\n                        </div>\n                    </template>\n                </action-bar>\n            </div>\n            <cascade-dialog ref=\"CascadeEdit\" :optionsList=\"dataList.optionsList\" :columnsNumber=\"columnsNumber\" @confirmOption=\"confirmOption\" />\n        </div>\n    </div>\n</template>\n<script setup name=\"kr-cascade\">\n// js\nimport { ref, watch } from \"vue\";\n\n// components\nimport RichTextEditor from \"@/components/editor/RichTextEditor.vue\";\nimport ActionBar from \"@/components/action/ActionBar.vue\";\nimport CascadeDialog from \"@/components/dialog/CascadeDialog.vue\";\nimport QuestionTitle from \"@/components/question/QuestionNumber.vue\";\n\n// props\nconst props = defineProps({\n    // 是否展示底部操作栏\n    footerShow: {\n        type: Boolean,\n        default: true,\n    },\n    // 题号是否可编辑\n    titleIsEdit: {\n        type: Boolean,\n        default: true,\n    },\n    // 数据渲染\n    dataList: {\n        type: Object,\n        default: () => ({}),\n    },\n    // 编辑选项弹框默认几列选项\n    columnsNumber: {\n        type: Number,\n        default: 4,\n    },\n});\n// 复制题目，删除题目, 数据改变, 单题预览, 标题修改后\nconst emits = defineEmits([\"copyQuestion\", \"deleteQuestion\", \"change\", \"singlePreview\", \"numberChange\"]);\n\nconst CascadeEdit = ref(null);\nconst titileInput = ref(null); // 为了标题聚焦使用\nlet selectList = ref({});\nlet valueObj = ref({}); // 虚拟绑定值\n\nselectList.value[\"1\"] = JSON.parse(JSON.stringify(props.dataList.optionsList));\n\nwatch(\n    () => props.dataList,\n    (curr, old) => {\n        // 绑定数据改变时调change方法\n        emits(\"change\", curr);\n    },\n    { deep: true }\n);\n\ndefineExpose({ titileInput });\n\n// 展示当前下拉框\nfunction changePreSelect(e, index) {\n    selectList.value[index + 1 + \"\"] = JSON.parse(JSON.stringify(e.children));\n}\n// 打开批量编辑选项弹框\nfunction openBatchDialog() {\n    CascadeEdit.value.dialogVisible = true;\n}\nfunction confirmOption(res) {\n    props.dataList.optionsList = res.data;\n    selectList.value[\"1\"] = res.data && res.data.length > 0 ? JSON.parse(JSON.stringify(res.data)) : [];\n    // 列数\n    props.dataList.optionsColumList = res.columns;\n}\n</script>\n<style lang=\"scss\" scoped>\n@use \"@/css/common.scss\" as *;\n\n:deep(.el-select--large) {\n    height: 34px;\n}\n.question-item {\n    .content {\n        display: flex;\n    }\n    .footer-operation {\n        .bottom-operation {\n            display: flex;\n            justify-content: space-between;\n            color: rgba(34, 64, 195, 1);\n            font-size: 13px;\n            .button1 {\n                cursor: pointer;\n                &:nth-child(2) {\n                    margin: 0 30px;\n                }\n                .icon {\n                    margin-right: 7px;\n                    font-size: 13px;\n                }\n            }\n        }\n    }\n}\n</style>\n"],"names":["CascadeEdit","ref","titileInput","selectList","valueObj","props","watch","curr","old","emits","expose","changePreSelect","e","index","openBatchDialog","confirmOption","res"],"mappings":"k/BAgFAA,EAAAC,EAAAA,IAAA,IAAA,EACAC,EAAAD,EAAAA,IAAA,IAAA,EACA,IAAAE,EAAAF,EAAAA,IAAA,CAAA,CAAA,EACAG,EAAAH,EAAAA,IAAA,CAAA,CAAA,EAEAE,EAAA,MAAA,CAAA,EAAA,KAAA,MAAA,KAAA,UAAAE,EAAA,SAAA,WAAA,CAAA,EAEAC,EAAA,MACA,IAAAD,EAAA,SACA,CAAAE,EAAAC,IAAA,CAEAC,EAAA,SAAAF,CAAA,CACA,EACA,CAAA,KAAA,EAAA,CACA,EAEAG,EAAA,CAAA,YAAAR,CAAA,CAAA,EAGA,SAAAS,EAAAC,EAAAC,EAAA,CACAV,EAAA,MAAAU,EAAA,EAAA,EAAA,EAAA,KAAA,MAAA,KAAA,UAAAD,EAAA,QAAA,CAAA,CACA,CAEA,SAAAE,GAAA,CACAd,EAAA,MAAA,cAAA,EACA,CACA,SAAAe,EAAAC,EAAA,CACAX,EAAA,SAAA,YAAAW,EAAA,KACAb,EAAA,MAAA,CAAA,EAAAa,EAAA,MAAAA,EAAA,KAAA,OAAA,EAAA,KAAA,MAAA,KAAA,UAAAA,EAAA,IAAA,CAAA,EAAA,GAEAX,EAAA,SAAA,iBAAAW,EAAA,OACA"}