332 lines
11 KiB
JavaScript
332 lines
11 KiB
JavaScript
"use strict";
|
||
const common_vendor = require("../../../../common/vendor.js");
|
||
const _sfc_main = {
|
||
name: "up-cascader",
|
||
props: {
|
||
// 通过双向绑定控制组件的弹出与收起
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 级联数据
|
||
data: {
|
||
type: Array,
|
||
default() {
|
||
return [];
|
||
}
|
||
},
|
||
// 默认选中的值
|
||
modelValue: {
|
||
type: Array,
|
||
default() {
|
||
return [];
|
||
}
|
||
},
|
||
// 指定选项的值为选项对象中的哪个属性值
|
||
valueKey: {
|
||
type: String,
|
||
default: "value"
|
||
},
|
||
// 指定选项标签为选项对象中的哪个属性值
|
||
labelKey: {
|
||
type: String,
|
||
default: "label"
|
||
},
|
||
// 指定选项的子选项为选项对象中的哪个属性值
|
||
childrenKey: {
|
||
type: String,
|
||
default: "children"
|
||
},
|
||
// 是否允许通过点击遮罩关闭Picker
|
||
maskCloseAble: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 弹出的z-index值
|
||
zIndex: {
|
||
type: [String, Number],
|
||
default: 0
|
||
},
|
||
// 是否在选择最后一级时自动关闭并触发confirm
|
||
autoClose: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 选中项目的展示方向direction垂直方向适合文字长度过长
|
||
headerDirection: {
|
||
type: String,
|
||
default: "row"
|
||
},
|
||
// 选项区域列数，支持1列和2列，默认为2列
|
||
optionsCols: {
|
||
type: [Number],
|
||
default: 2
|
||
},
|
||
// 是否显示关闭图标
|
||
closeable: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 存储每一级的数据
|
||
levelList: [],
|
||
// 存储每一级选中的索引
|
||
selectedValueIndexs: [],
|
||
tabsIndex: 0,
|
||
popupShow: false,
|
||
// 新增confirmValues用于存储确认的值
|
||
confirmValues: []
|
||
};
|
||
},
|
||
watch: {
|
||
data: {
|
||
handler() {
|
||
this.initLevelList();
|
||
this.setDefaultValue();
|
||
},
|
||
immediate: true
|
||
},
|
||
show() {
|
||
this.popupShow = this.show;
|
||
},
|
||
modelValue: {
|
||
handler() {
|
||
this.setDefaultValue();
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
computed: {
|
||
isChange() {
|
||
return this.tabsIndex > 1;
|
||
},
|
||
genTabsList() {
|
||
let tabsList = [{
|
||
name: "请选择"
|
||
}];
|
||
for (let i = 0; i < this.selectedValueIndexs.length; i++) {
|
||
if (this.selectedValueIndexs[i] !== void 0 && this.levelList[i]) {
|
||
const selectedItem = this.levelList[i][this.selectedValueIndexs[i]];
|
||
if (selectedItem) {
|
||
tabsList[i] = {
|
||
name: selectedItem[this.labelKey]
|
||
};
|
||
if (i === this.selectedValueIndexs.length - 1 && selectedItem[this.childrenKey] && selectedItem[this.childrenKey].length > 0) {
|
||
tabsList.push({
|
||
name: "请选择"
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return tabsList;
|
||
},
|
||
uZIndex() {
|
||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||
}
|
||
},
|
||
// 新增confirm事件
|
||
emits: ["update:modelValue", "update:show", "change", "confirm", "cancel"],
|
||
methods: {
|
||
t: common_vendor.t$1,
|
||
initLevelList() {
|
||
if (this.data && this.data.length > 0) {
|
||
this.levelList = [this.data];
|
||
this.selectedValueIndexs = [];
|
||
}
|
||
},
|
||
setDefaultValue() {
|
||
if (!this.data || this.data.length == 0)
|
||
return;
|
||
if (!this.modelValue || this.modelValue.length == 0)
|
||
return;
|
||
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);
|
||
if (currentLevelData[index][this.childrenKey]) {
|
||
currentLevelData = currentLevelData[index][this.childrenKey];
|
||
} else {
|
||
break;
|
||
}
|
||
} else {
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
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) {
|
||
if (this.levelList.length <= levelIndex + 1) {
|
||
this.levelList.push(currentItem[this.childrenKey]);
|
||
} else {
|
||
this.$set(this.levelList, levelIndex + 1, currentItem[this.childrenKey]);
|
||
}
|
||
this.tabsIndex = levelIndex + 1;
|
||
} else {
|
||
if (this.autoClose) {
|
||
this.emitChange();
|
||
this.handleConfirm();
|
||
} else {
|
||
this.emitChange(false);
|
||
}
|
||
}
|
||
},
|
||
// 修改emitChange方法，增加closePopup参数
|
||
emitChange(closePopup = true) {
|
||
const result = [];
|
||
for (let i = 0; i < this.selectedValueIndexs.length; i++) {
|
||
if (this.selectedValueIndexs[i] !== void 0 && this.levelList[i]) {
|
||
result.push(this.levelList[i][this.selectedValueIndexs[i]][this.valueKey]);
|
||
}
|
||
}
|
||
this.confirmValues = [...result];
|
||
this.$emit("change", this.confirmValues);
|
||
if (closePopup) {
|
||
this.close();
|
||
}
|
||
},
|
||
handleCancel() {
|
||
this.close();
|
||
},
|
||
handleConfirm() {
|
||
this.$emit("update:modelValue", this.confirmValues);
|
||
this.$emit("confirm", this.confirmValues);
|
||
this.close();
|
||
}
|
||
}
|
||
};
|
||
if (!Array) {
|
||
const _easycom_up_steps_item2 = common_vendor.resolveComponent("up-steps-item");
|
||
const _easycom_up_steps2 = common_vendor.resolveComponent("up-steps");
|
||
const _easycom_up_tabs2 = common_vendor.resolveComponent("up-tabs");
|
||
const _easycom_up_icon2 = common_vendor.resolveComponent("up-icon");
|
||
const _easycom_up_cell2 = common_vendor.resolveComponent("up-cell");
|
||
const _easycom_up_cell_group2 = common_vendor.resolveComponent("up-cell-group");
|
||
const _easycom_up_button2 = common_vendor.resolveComponent("up-button");
|
||
const _easycom_up_popup2 = common_vendor.resolveComponent("up-popup");
|
||
(_easycom_up_steps_item2 + _easycom_up_steps2 + _easycom_up_tabs2 + _easycom_up_icon2 + _easycom_up_cell2 + _easycom_up_cell_group2 + _easycom_up_button2 + _easycom_up_popup2)();
|
||
}
|
||
const _easycom_up_steps_item = () => "../u-steps-item/u-steps-item.js";
|
||
const _easycom_up_steps = () => "../u-steps/u-steps.js";
|
||
const _easycom_up_tabs = () => "../u-tabs/u-tabs.js";
|
||
const _easycom_up_icon = () => "../u-icon/u-icon.js";
|
||
const _easycom_up_cell = () => "../u-cell/u-cell.js";
|
||
const _easycom_up_cell_group = () => "../u-cell-group/u-cell-group.js";
|
||
const _easycom_up_button = () => "../u-button/u-button.js";
|
||
const _easycom_up_popup = () => "../u-popup/u-popup.js";
|
||
if (!Math) {
|
||
(_easycom_up_steps_item + _easycom_up_steps + _easycom_up_tabs + _easycom_up_icon + _easycom_up_cell + _easycom_up_cell_group + _easycom_up_button + _easycom_up_popup)();
|
||
}
|
||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||
return common_vendor.e({
|
||
a: $props.headerDirection == "column"
|
||
}, $props.headerDirection == "column" ? common_vendor.e({
|
||
b: $data.popupShow
|
||
}, $data.popupShow ? {
|
||
c: common_vendor.f($options.genTabsList, (item, index, i0) => {
|
||
return {
|
||
a: common_vendor.o(($event) => $data.tabsIndex = index),
|
||
b: "2b4d73a7-2-" + i0 + ",2b4d73a7-1",
|
||
c: common_vendor.p({
|
||
title: item.name
|
||
})
|
||
};
|
||
}),
|
||
d: common_vendor.o(($event) => $data.tabsIndex = $event),
|
||
e: common_vendor.p({
|
||
dot: true,
|
||
direction: "column",
|
||
current: $data.tabsIndex
|
||
})
|
||
} : {}) : common_vendor.e({
|
||
f: $data.popupShow
|
||
}, $data.popupShow ? {
|
||
g: common_vendor.sr("tabs", "2b4d73a7-3,2b4d73a7-0"),
|
||
h: common_vendor.o($options.tabsChange),
|
||
i: common_vendor.o(($event) => $data.tabsIndex = $event),
|
||
j: common_vendor.p({
|
||
list: $options.genTabsList,
|
||
scrollable: true,
|
||
current: $data.tabsIndex
|
||
})
|
||
} : {}), {
|
||
k: common_vendor.f($data.levelList, (levelData, levelIndex, i0) => {
|
||
return common_vendor.e({
|
||
a: $props.optionsCols == 2 || levelIndex == $data.tabsIndex
|
||
}, $props.optionsCols == 2 || levelIndex == $data.tabsIndex ? common_vendor.e({
|
||
b: levelIndex === 0 || $data.selectedValueIndexs[levelIndex - 1] !== void 0
|
||
}, levelIndex === 0 || $data.selectedValueIndexs[levelIndex - 1] !== void 0 ? {
|
||
c: common_vendor.f(levelData, (item, index, i1) => {
|
||
return common_vendor.e({
|
||
a: $data.selectedValueIndexs[levelIndex] === index
|
||
}, $data.selectedValueIndexs[levelIndex] === index ? {
|
||
b: "2b4d73a7-6-" + i0 + "-" + i1 + "," + ("2b4d73a7-5-" + i0 + "-" + i1),
|
||
c: common_vendor.p({
|
||
size: "17",
|
||
name: "checkbox-mark"
|
||
})
|
||
} : {}, {
|
||
d: index,
|
||
e: common_vendor.o(($event) => $options.levelChange(levelIndex, index), index),
|
||
f: "2b4d73a7-5-" + i0 + "-" + i1 + "," + ("2b4d73a7-4-" + i0),
|
||
g: common_vendor.p({
|
||
title: item[$props.labelKey],
|
||
arrow: false,
|
||
index
|
||
})
|
||
});
|
||
}),
|
||
d: "2b4d73a7-4-" + i0 + ",2b4d73a7-0"
|
||
} : {}, {
|
||
e: $props.optionsCols == 2 ? "33.33333%" : "750rpx"
|
||
}) : {}, {
|
||
f: levelIndex
|
||
});
|
||
}),
|
||
l: $options.isChange ? 1 : "",
|
||
m: $props.optionsCols == 2 && $options.isChange ? "translateX(-33.3333333%)" : "",
|
||
n: common_vendor.t($options.t("up.common.cancel")),
|
||
o: common_vendor.o($options.handleCancel),
|
||
p: common_vendor.p({
|
||
type: "default"
|
||
}),
|
||
q: common_vendor.t($options.t("up.common.confirm")),
|
||
r: common_vendor.o($options.handleConfirm),
|
||
s: common_vendor.p({
|
||
type: "primary"
|
||
}),
|
||
t: common_vendor.o($options.close),
|
||
v: common_vendor.p({
|
||
show: $data.popupShow,
|
||
mode: "bottom",
|
||
popup: false,
|
||
mask: true,
|
||
closeable: $props.closeable,
|
||
["safe-area-inset-bottom"]: true,
|
||
["close-icon-color"]: "#ffffff",
|
||
["z-index"]: $options.uZIndex,
|
||
maskCloseAble: $props.maskCloseAble
|
||
})
|
||
});
|
||
}
|
||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zsq/Sources/github/2025property-pay/pay-employee/node_modules/uview-plus/components/u-cascader/u-cascader.vue"]]);
|
||
wx.createComponent(Component);
|