| | |
| | | <template> |
| | | <up-popup :show="popupShow" mode="bottom" :popup="false" |
| | | :mask="true" :closeable="true" :safe-area-inset-bottom="true" |
| | | :mask="true" :closeable="closeable" :safe-area-inset-bottom="true" |
| | | close-icon-color="#ffffff" :z-index="uZIndex" |
| | | :maskCloseAble="maskCloseAble" @close="close"> |
| | | <view class="up-p-t-30 up-p-l-20 up-m-b-10" v-if="headerDirection =='column'"> |
| | | <view class="up-p-t-30 up-p-l-20 up-m-b-10" v-if="headerDirection ==='column'"> |
| | | <up-steps v-if="popupShow" dot direction="column" v-model:current="tabsIndex"> |
| | | <up-steps-item v-for="(item, index) in genTabsList" |
| | | @click="tabsIndex = index" :title="item.name"></up-steps-item> |
| | | <view v-for="(item, index) in genTabsList" @click="toFatherIndex(index)"> |
| | | <up-steps-item |
| | | :title="item.name"/> |
| | | </view> |
| | | </up-steps> |
| | | </view> |
| | | <view class="up-p-t-20 up-m-b-10" v-else> |
| | |
| | | * @property {String} labelKey 指定选项标签为选项对象中的哪个属性值 |
| | | * @property {String} childrenKey 指定选项的子选项为选项对象中的哪个属性值 |
| | | * @property {Boolean} autoClose 是否在选择最后一级时自动关闭并触发confirm(默认false) |
| | | * @property {Boolean} closeable 是否显示关闭图标(默认true) |
| | | */ |
| | | import { t } from '../../libs/i18n' |
| | | export default { |
| | |
| | | optionsCols: { |
| | | type: [Number], |
| | | default: 2 |
| | | }, |
| | | // 是否显示关闭图标 |
| | | closeable: { |
| | | type: Boolean, |
| | | default: true |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | data: { |
| | | handler() { |
| | | this.initLevelList(); |
| | | this.setDefaultValue(); |
| | | }, |
| | | immediate: true |
| | | }, |
| | |
| | | }, |
| | | modelValue: { |
| | | handler() { |
| | | this.init(); |
| | | // 初始化选中值 |
| | | this.setDefaultValue(); |
| | | }, |
| | | immediate: true |
| | | } |
| | |
| | | let tabsList = [{ |
| | | name: "请选择" |
| | | }]; |
| | | |
| | | |
| | | // 根据选中的值动态生成tabs |
| | | for (let i = 0; i < this.selectedValueIndexs.length; i++) { |
| | | if (this.selectedValueIndexs[i] !== undefined && this.levelList[i]) { |
| | |
| | | name: selectedItem[this.labelKey] |
| | | }; |
| | | // 如果还有下一级,则添加"请选择" |
| | | if (i === this.selectedValueIndexs.length - 1 && |
| | | selectedItem[this.childrenKey] && |
| | | if (i === this.selectedValueIndexs.length - 1 && |
| | | selectedItem[this.childrenKey] && |
| | | selectedItem[this.childrenKey].length > 0) { |
| | | tabsList.push({ |
| | | name: "请选择" |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | return tabsList; |
| | | }, |
| | | uZIndex() { |
| | |
| | | } |
| | | }, |
| | | // 新增confirm事件 |
| | | emits: ['update:modelValue', 'change', 'confirm'], |
| | | emits: ['update:modelValue', 'update:show', 'change', 'confirm', 'cancel'], |
| | | methods: { |
| | | t, |
| | | init() { |
| | | // 初始化选中值 |
| | | if (this.modelValue && this.modelValue.length > 0) { |
| | | this.setDefaultValue(); |
| | | } |
| | | }, |
| | | initLevelList() { |
| | | // 初始化第一级数据 |
| | | if (this.data && this.data.length > 0) { |
| | |
| | | } |
| | | }, |
| | | setDefaultValue() { |
| | | // 检查data是否为空 |
| | | if (!this.data || this.data.length == 0) return; |
| | | // 检查modelValue是否为空 |
| | | if (!this.modelValue || this.modelValue.length == 0) return; |
| | | // 根据默认值设置选中项 |
| | | // 根据modelValue获取indexs给selectedValueIndexs |
| | | this.selectedValueIndexs = []; |
| | | this.levelList = []; // 设置层级数据为空 |
| | | let currentLevelData = this.data; |
| | | |
| | | |
| | | for (let i = 0; i < this.modelValue.length; i++) { |
| | | const value = this.modelValue[i]; |
| | | const index = currentLevelData.findIndex(item => item[this.valueKey] === value); |
| | | |
| | | this.levelList[i] = currentLevelData; // 设置每一层级的数据 |
| | | |
| | | if (index !== -1) { |
| | | this.selectedValueIndexs.push(index); |
| | | // 更新下一级的数据 |
| | |
| | | } |
| | | }, |
| | | close() { |
| | | this.$emit('cancel'); |
| | | this.$emit('update:show', false); |
| | | }, |
| | | tabsChange(item) { |
| | |
| | | levelChange(levelIndex, index) { |
| | | // 设置当前级的选中值 |
| | | this.$set(this.selectedValueIndexs, levelIndex, index); |
| | | |
| | | |
| | | // 清除后续级别的选中值 |
| | | this.selectedValueIndexs.splice(levelIndex + 1); |
| | | this.tabsIndex = Math.min(this.tabsIndex, levelIndex); |
| | | |
| | | |
| | | // 清除后续级别的列表 |
| | | this.levelList.splice(levelIndex + 1); |
| | | |
| | | |
| | | // 获取当前选中项 |
| | | const currentItem = this.levelList[levelIndex][index]; |
| | | |
| | | |
| | | // 如果有子级数据,则初始化下一级 |
| | | if (currentItem && currentItem[this.childrenKey] && currentItem[this.childrenKey].length > 0) { |
| | | // 确保levelList数组足够长 |
| | |
| | | if (this.autoClose) { |
| | | // 如果启用自动关闭,则触发change事件并关闭 |
| | | this.emitChange(); |
| | | this.handleConfirm(); |
| | | } else { |
| | | // 否则只触发change事件,不关闭 |
| | | this.emitChange(false); |
| | |
| | | result.push(this.levelList[i][this.selectedValueIndexs[i]][this.valueKey]); |
| | | } |
| | | } |
| | | |
| | | |
| | | // 更新confirmValues |
| | | this.confirmValues = [...result]; |
| | | |
| | | |
| | | // 触发change事件,返回value数组 |
| | | this.$emit('change', this.confirmValues); |
| | | |
| | | |
| | | // 根据参数决定是否关闭弹窗 |
| | | if (closePopup) { |
| | | this.close(); |
| | |
| | | this.$emit('update:modelValue', this.confirmValues); |
| | | this.$emit('confirm', this.confirmValues); |
| | | this.close(); |
| | | } |
| | | }, |
| | | // 跳转父节点 |
| | | toFatherIndex(index){ |
| | | this.tabsIndex = index; |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | height: 800rpx; |
| | | } |
| | | } |
| | | |
| | | |
| | | // 添加按钮区域样式 |
| | | .u-cascader-action { |
| | | border-top: 1px solid #eee; |
| | | } |
| | | </style> |
| | | </style> |