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);
|