337 lines
20 KiB
JavaScript
337 lines
20 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, useSlots, ref, watch, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, unref, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, renderSlot } from "vue";
|
|
import { _ as _sfc_main$2 } from "../input/index2.js";
|
|
import { _ as _sfc_main$3 } from "../button/index2.js";
|
|
import { _ as _sfc_main$1 } from "../checkbox/index2.js";
|
|
import "../_chunks/@layui/index.js";
|
|
import "../dropdownMenu/index2.js";
|
|
var index = /* @__PURE__ */ (() => ":root{--button-primary-text-color: #fff;--button-primary-background-color: var(--global-primary-color);--button-primary-border-color: var(--global-primary-color);--button-normal-text-color: #fff;--button-normal-background-color: var(--global-normal-color);--button-normal-border-color: var(--global-normal-color);--button-warm-text-color: #fff;--button-warm-background-color: var(--global-warm-color);--button-warm-border-color: var(--global-warm-color);--button-danger-text-color: #fff;--button-danger-background-color: var(--global-danger-color);--button-danger-border-color: var(--global-danger-color);--button-border-radius: var(--global-border-radius);--button-border-color: var(--global-neutral-color-6);--button-background-color: 0 0;--button-text-color: #666}.layui-btn{height:38px;line-height:36px;padding:0 18px;font-size:14px;text-align:center;white-space:nowrap;color:var(--button-text-color);background:var(--button-background-color);border-radius:var(--button-border-radius);border-color:var(--button-border-color);border-width:1px;border-style:solid;cursor:pointer}.layui-btn-primary{color:var(--button-primary-text-color);background-color:var(--button-primary-background-color);border-color:var(--button-primary-border-color)}.layui-btn-normal{color:var(--button-normal-text-color);background-color:var(--button-normal-background-color);border-color:var(--button-normal-border-color)}.layui-btn-warm{color:var(--button-warm-text-color);background-color:var(--button-warm-background-color);border-color:var(--button-warm-border-color)}.layui-btn-danger{color:var(--button-danger-text-color);background-color:var(--button-danger-background-color);border-color:var(--button-danger-border-color)}.layui-btn:hover{opacity:.8;filter:alpha(opacity=80)}.layui-btn:active{opacity:1;filter:alpha(opacity=100)}.layui-btn-lg{height:44px;line-height:44px;padding:0 25px;font-size:16px}.layui-btn-sm{height:30px;line-height:30px;padding:0 10px;font-size:12px}.layui-btn-xs{height:22px;line-height:22px;padding:0 5px;font-size:12px}.layui-btn-xs i{font-size:12px!important}.layui-btn-fluid{width:100%}.layui-btn-radius{border-radius:100px}.layui-btn-disabled,.layui-btn-disabled:active,.layui-btn-disabled:hover{border-color:#eee!important;background-color:#fbfbfb!important;color:#d2d2d2!important;cursor:not-allowed!important;opacity:1}.layui-btn+.layui-btn{margin-left:10px}.layui-btn .layui-icon{padding:0 2px;vertical-align:middle\\ ;vertical-align:bottom}.layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border-top:1px solid var(--global-neutral-color-6);border-bottom:1px solid var(--global-neutral-color-6);border-right:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}:root{--transfer-box-border-radius: var(--global-border-radius)}.layui-transfer{display:flex}.layui-transfer .layui-btn+.layui-btn{margin-left:0}.layui-transfer-box,.layui-transfer-header,.layui-transfer-search{border-width:0;border-style:solid;border-color:#eee}.layui-transfer-box{position:relative;border-width:1px;display:flex;flex-direction:column;border-radius:var(--transfer-box-border-radius);background-color:#fff}.layui-transfer-box .layui-form-checkbox{width:100%;margin:0!important}.layui-transfer-header{height:38px;line-height:38px;padding:0 10px;border-bottom-width:1px;flex:0}.layui-transfer-search{position:relative;padding:10px;border-bottom-width:1px;flex:0}.layui-transfer-search .layui-input{height:35px;padding-left:2px;font-size:13px;letter-spacing:1px}.layui-transfer-search .layui-icon-search{color:#666}.layui-transfer-active{margin:0 15px}.layui-transfer-active .layui-btn{display:block;margin:0;padding:0 15px;background-color:#5fb878;border-color:#5fb878;color:#fff}.layui-transfer-active .layui-btn-disabled{background-color:#fbfbfb;border-color:#eee;color:#d2d2d2}.layui-transfer-active .layui-btn:first-child{margin-bottom:15px}.layui-transfer-active .layui-btn .layui-icon{margin:0;font-size:14px!important}.layui-transfer-data{padding:5px 0;overflow:auto;flex:1}.layui-transfer-data li{height:32px;line-height:32px;padding:0 10px}.layui-transfer-data li:hover{background-color:#f6f6f6;transition:.5s all}.layui-transfer-data .layui-none{padding:15px 10px;text-align:center;color:#999}.layui-transfer-active{display:flex;align-items:center;justify-items:center}.layui-transfer-footer{flex:0;height:38px;line-height:38px;border-top:1px solid #eee;padding:0 10px}\n")();
|
|
const _hoisted_1 = { class: "layui-transfer layui-form layui-border-box" };
|
|
const _hoisted_2 = { class: "layui-transfer-header" };
|
|
const _hoisted_3 = {
|
|
key: 0,
|
|
class: "layui-transfer-search"
|
|
};
|
|
const _hoisted_4 = { class: "layui-transfer-data" };
|
|
const _hoisted_5 = {
|
|
key: 1,
|
|
class: "layui-transfer-footer"
|
|
};
|
|
const _hoisted_6 = { class: "layui-transfer-active" };
|
|
const _hoisted_7 = { class: "layui-transfer-button-group" };
|
|
const _hoisted_8 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-next" }, null, -1);
|
|
const _hoisted_9 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-prev" }, null, -1);
|
|
const _hoisted_10 = { class: "layui-transfer-header" };
|
|
const _hoisted_11 = {
|
|
key: 0,
|
|
class: "layui-transfer-search"
|
|
};
|
|
const _hoisted_12 = { class: "layui-transfer-data" };
|
|
const _hoisted_13 = {
|
|
key: 1,
|
|
class: "layui-transfer-footer"
|
|
};
|
|
const __default__ = {
|
|
name: "LayTransfer"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
id: { default: "id" },
|
|
title: { default: () => ["\u4E3B\u5217\u8868", "\u526F\u5217\u8868"] },
|
|
width: { default: "200px" },
|
|
height: { default: "360px" },
|
|
showSearch: { default: false },
|
|
dataSource: { default: () => [] },
|
|
modelValue: { default: () => [] }
|
|
},
|
|
emits: ["update:modelValue", "change"],
|
|
setup(__props, { emit: emits }) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const leftDataSource = ref([]);
|
|
const rightDataSource = ref([]);
|
|
const _leftDataSource = ref([]);
|
|
const _rightDataSource = ref([]);
|
|
const leftSelectedKeys = ref([]);
|
|
const rightSelectedKeys = ref([]);
|
|
const allLeftChecked = ref(false);
|
|
const allRightChecked = ref(false);
|
|
const hasLeftChecked = ref(false);
|
|
const hasRightChecked = ref(false);
|
|
const allLeftChange = (isChecked) => {
|
|
if (isChecked) {
|
|
const datasources = leftDataSource.value.filter((item) => {
|
|
return !item.disabled;
|
|
});
|
|
const ids = datasources.map((item) => {
|
|
return item[props.id];
|
|
});
|
|
leftSelectedKeys.value = [...ids];
|
|
} else {
|
|
leftSelectedKeys.value = [];
|
|
}
|
|
};
|
|
watch(
|
|
() => [props.modelValue, props.dataSource],
|
|
() => {
|
|
let targetDataSource = [];
|
|
props.dataSource.forEach((ds) => {
|
|
if (props.modelValue.includes(ds[props.id])) {
|
|
targetDataSource.push(ds);
|
|
}
|
|
});
|
|
leftDataSource.value = props.dataSource.filter(
|
|
(item) => !props.modelValue.includes(item[props.id])
|
|
);
|
|
_leftDataSource.value = props.dataSource.filter(
|
|
(item) => !props.modelValue.includes(item[props.id])
|
|
);
|
|
rightDataSource.value = [...targetDataSource];
|
|
_rightDataSource.value = [...targetDataSource];
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
watch(
|
|
leftSelectedKeys,
|
|
() => {
|
|
if (leftDataSource.value.length === leftSelectedKeys.value.length && leftDataSource.value.length != 0) {
|
|
allLeftChecked.value = true;
|
|
} else {
|
|
allLeftChecked.value = false;
|
|
}
|
|
if (leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0) {
|
|
hasLeftChecked.value = true;
|
|
} else {
|
|
hasLeftChecked.value = false;
|
|
}
|
|
},
|
|
{ deep: true }
|
|
);
|
|
const allRightChange = (checked) => {
|
|
if (checked) {
|
|
const datasources = rightDataSource.value.filter((item) => {
|
|
return !item.disabled;
|
|
});
|
|
const ids = datasources.map((item) => {
|
|
return item[props.id];
|
|
});
|
|
rightSelectedKeys.value = [...ids];
|
|
} else {
|
|
rightSelectedKeys.value = [];
|
|
}
|
|
};
|
|
watch(
|
|
rightSelectedKeys,
|
|
() => {
|
|
if (rightDataSource.value.length === rightSelectedKeys.value.length && rightDataSource.value.length > 0) {
|
|
allRightChecked.value = true;
|
|
} else {
|
|
allRightChecked.value = false;
|
|
}
|
|
if (rightSelectedKeys.value.length > 0 && rightDataSource.value.length != 0) {
|
|
hasRightChecked.value = true;
|
|
} else {
|
|
hasRightChecked.value = false;
|
|
}
|
|
},
|
|
{ deep: true }
|
|
);
|
|
const add = () => {
|
|
if (leftSelectedKeys.value.length === 0) {
|
|
return;
|
|
}
|
|
let targetKeys = [];
|
|
leftDataSource.value.forEach((item) => {
|
|
if (leftSelectedKeys.value.indexOf(item[props.id]) != -1) {
|
|
targetKeys.push(item[props.id]);
|
|
}
|
|
});
|
|
rightDataSource.value.forEach((item) => {
|
|
targetKeys.push(item[props.id]);
|
|
});
|
|
emits("change", targetKeys);
|
|
emits("update:modelValue", targetKeys);
|
|
leftSelectedKeys.value = [];
|
|
};
|
|
const remove = () => {
|
|
if (rightSelectedKeys.value.length === 0) {
|
|
return;
|
|
}
|
|
let targetKeys = [];
|
|
rightDataSource.value.forEach((item) => {
|
|
if (rightSelectedKeys.value.indexOf(item[props.id]) == -1) {
|
|
targetKeys.push(item[props.id]);
|
|
}
|
|
});
|
|
emits("change", targetKeys);
|
|
emits("update:modelValue", targetKeys);
|
|
rightSelectedKeys.value = [];
|
|
};
|
|
const searchLeft = (e) => {
|
|
if (e === "") {
|
|
leftDataSource.value = _leftDataSource.value;
|
|
}
|
|
leftDataSource.value = _leftDataSource.value.filter((item) => {
|
|
if (item.title.indexOf(e) != -1) {
|
|
return item;
|
|
}
|
|
});
|
|
};
|
|
const searchRight = (e) => {
|
|
if (e === "") {
|
|
rightDataSource.value = _rightDataSource.value;
|
|
}
|
|
rightDataSource.value = _rightDataSource.value.filter((item) => {
|
|
if (item.title.indexOf(e) != -1) {
|
|
return item;
|
|
}
|
|
});
|
|
};
|
|
const boxStyle = computed(() => {
|
|
return {
|
|
width: props.width,
|
|
height: props.height
|
|
};
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", null, [
|
|
createElementVNode("div", _hoisted_1, [
|
|
createElementVNode("div", {
|
|
class: "layui-transfer-box",
|
|
style: normalizeStyle(unref(boxStyle))
|
|
}, [
|
|
createElementVNode("div", _hoisted_2, [
|
|
createVNode(_sfc_main$1, {
|
|
modelValue: hasLeftChecked.value,
|
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hasLeftChecked.value = $event),
|
|
"is-indeterminate": !allLeftChecked.value,
|
|
skin: "primary",
|
|
value: "all",
|
|
onChange: allLeftChange
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(__props.title[0]), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "is-indeterminate"])
|
|
]),
|
|
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
createVNode(_sfc_main$2, {
|
|
"prefix-icon": "layui-icon-search",
|
|
onInput: searchLeft,
|
|
placeholder: "\u5173\u952E\u8BCD\u641C\u7D22"
|
|
})
|
|
])) : createCommentVNode("", true),
|
|
createElementVNode("ul", _hoisted_4, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(leftDataSource.value, (dataSource) => {
|
|
return openBlock(), createElementBlock("li", { key: dataSource }, [
|
|
createVNode(_sfc_main$1, {
|
|
modelValue: leftSelectedKeys.value,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => leftSelectedKeys.value = $event),
|
|
skin: "primary",
|
|
disabled: dataSource.disabled,
|
|
value: dataSource[__props.id]
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(slots).item ? renderSlot(_ctx.$slots, "item", {
|
|
key: 0,
|
|
data: dataSource
|
|
}) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(dataSource.title), 1)
|
|
], 64))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["modelValue", "disabled", "value"])
|
|
]);
|
|
}), 128))
|
|
]),
|
|
unref(slots).leftFooter ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
|
renderSlot(_ctx.$slots, "leftFooter")
|
|
])) : createCommentVNode("", true)
|
|
], 4),
|
|
createElementVNode("div", _hoisted_6, [
|
|
createElementVNode("div", _hoisted_7, [
|
|
createVNode(_sfc_main$3, {
|
|
type: "primary",
|
|
disabled: leftSelectedKeys.value.length == 0,
|
|
onClick: add
|
|
}, {
|
|
default: withCtx(() => [
|
|
_hoisted_8
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled"]),
|
|
createVNode(_sfc_main$3, {
|
|
type: "primary",
|
|
disabled: rightSelectedKeys.value.length == 0,
|
|
onClick: remove
|
|
}, {
|
|
default: withCtx(() => [
|
|
_hoisted_9
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled"])
|
|
])
|
|
]),
|
|
createElementVNode("div", {
|
|
class: "layui-transfer-box",
|
|
style: normalizeStyle(unref(boxStyle))
|
|
}, [
|
|
createElementVNode("div", _hoisted_10, [
|
|
createVNode(_sfc_main$1, {
|
|
modelValue: hasRightChecked.value,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hasRightChecked.value = $event),
|
|
"is-indeterminate": !allRightChecked.value,
|
|
skin: "primary",
|
|
value: "all",
|
|
onChange: allRightChange
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(__props.title[1]), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "is-indeterminate"])
|
|
]),
|
|
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_11, [
|
|
createVNode(_sfc_main$2, {
|
|
"prefix-icon": "layui-icon-search",
|
|
onInput: searchRight,
|
|
placeholder: "\u5173\u952E\u8BCD\u641C\u7D22"
|
|
})
|
|
])) : createCommentVNode("", true),
|
|
createElementVNode("ul", _hoisted_12, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(rightDataSource.value, (dataSource) => {
|
|
return openBlock(), createElementBlock("li", { key: dataSource }, [
|
|
createVNode(_sfc_main$1, {
|
|
skin: "primary",
|
|
modelValue: rightSelectedKeys.value,
|
|
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rightSelectedKeys.value = $event),
|
|
disabled: dataSource.disabled,
|
|
value: dataSource[__props.id]
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(slots).item ? renderSlot(_ctx.$slots, "item", {
|
|
key: 0,
|
|
data: dataSource
|
|
}) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(dataSource.title), 1)
|
|
], 64))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["modelValue", "disabled", "value"])
|
|
]);
|
|
}), 128))
|
|
]),
|
|
unref(slots).rightFooter ? (openBlock(), createElementBlock("div", _hoisted_13, [
|
|
renderSlot(_ctx.$slots, "rightFooter")
|
|
])) : createCommentVNode("", true)
|
|
], 4)
|
|
])
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { component as default };
|