@ctsy/layui-vue
Version:
a component library for Vue 3 base on layui-vue
293 lines (292 loc) • 11.7 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, useSlots, ref, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, toDisplayString, createCommentVNode, Fragment, renderList, unref, renderSlot } from "vue";
var index = "";
const _hoisted_1 = { class: "layui-transfer layui-form layui-border-box" };
const _hoisted_2 = {
class: "layui-transfer-box",
style: { "width": "200px", "height": "360px" }
};
const _hoisted_3 = { class: "layui-transfer-header" };
const _hoisted_4 = {
key: 0,
class: "layui-transfer-search"
};
const _hoisted_5 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-search" }, null, -1);
const _hoisted_6 = {
class: "layui-transfer-data",
style: { "height": "320px" }
};
const _hoisted_7 = { key: 1 };
const _hoisted_8 = { class: "layui-transfer-active" };
const _hoisted_9 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-next" }, null, -1);
const _hoisted_10 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-prev" }, null, -1);
const _hoisted_11 = {
class: "layui-transfer-box",
style: { "width": "200px", "height": "360px" }
};
const _hoisted_12 = { class: "layui-transfer-header" };
const _hoisted_13 = {
key: 0,
class: "layui-transfer-search"
};
const _hoisted_14 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-search" }, null, -1);
const _hoisted_15 = {
class: "layui-transfer-data",
style: { "height": "320px" }
};
const _hoisted_16 = { key: 1 };
const __default__ = {
name: "LayTransfer"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
id: { default: "id" },
title: { default: () => ["\u4E3B\u5217\u8868", "\u526F\u5217\u8868"] },
showSearch: { default: false },
dataSource: { default: () => [] }
},
setup(__props) {
const props = __props;
const slot = useSlots();
const leftDataSource = ref([...props.dataSource]);
const rightDataSource = ref([]);
const _leftDataSource = ref([...props.dataSource]);
const _rightDataSource = ref([]);
const leftSelectedKeys = ref([]);
const rightSelectedKeys = ref([]);
const allLeftChecked = ref(false);
const allRightChecked = ref(false);
const allLeftChange = function(checked) {
if (checked) {
const ids = leftDataSource.value.map((item) => {
return item[props.id];
});
leftSelectedKeys.value = ids;
} else {
leftSelectedKeys.value = [];
}
};
watch(leftSelectedKeys, () => {
if (leftDataSource.value.length === leftSelectedKeys.value.length && leftDataSource.value.length != 0) {
allLeftChecked.value = true;
} else {
allLeftChecked.value = false;
}
}, { deep: true });
const allRightChange = function(checked) {
if (checked) {
const ids = rightDataSource.value.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;
}
}, { deep: true });
const add = function() {
if (leftSelectedKeys.value.length === 0) {
return;
}
leftDataSource.value.forEach((item) => {
if (leftSelectedKeys.value.indexOf(item.id) != -1) {
rightDataSource.value.push(item);
}
});
leftDataSource.value = leftDataSource.value.filter((item) => leftSelectedKeys.value.indexOf(item.id) === -1);
_leftDataSource.value.forEach((item) => {
if (leftSelectedKeys.value.indexOf(item.id) != -1) {
_rightDataSource.value.push(item);
}
});
_leftDataSource.value = _leftDataSource.value.filter((item) => leftSelectedKeys.value.indexOf(item.id) === -1);
leftSelectedKeys.value = [];
};
const remove = function() {
if (rightSelectedKeys.value.length === 0) {
return;
}
rightDataSource.value.forEach((item) => {
if (rightSelectedKeys.value.indexOf(item.id) != -1) {
leftDataSource.value.push(item);
}
});
rightDataSource.value = rightDataSource.value.filter((item) => rightSelectedKeys.value.indexOf(item.id) === -1);
_rightDataSource.value.forEach((item) => {
if (rightSelectedKeys.value.indexOf(item.id) != -1) {
_leftDataSource.value.push(item);
}
});
_rightDataSource.value = _rightDataSource.value.filter((item) => rightSelectedKeys.value.indexOf(item.id) === -1);
rightSelectedKeys.value = [];
};
const searchLeft = (e) => {
if (e.target.value === "") {
leftDataSource.value = _leftDataSource.value;
}
leftDataSource.value = _leftDataSource.value.filter((item) => {
if (item.title.indexOf(e.target.value) != -1) {
return item;
}
});
};
const searchRight = (e) => {
if (e.target.value === "") {
rightDataSource.value = _rightDataSource.value;
}
rightDataSource.value = _rightDataSource.value.filter((item) => {
if (item.title.indexOf(e.target.value) != -1) {
return item;
}
});
};
return (_ctx, _cache) => {
const _component_lay_checkbox = resolveComponent("lay-checkbox");
const _component_lay_button = resolveComponent("lay-button");
return openBlock(), createElementBlock("div", null, [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createVNode(_component_lay_checkbox, {
modelValue: allLeftChecked.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => allLeftChecked.value = $event),
skin: "primary",
label: "all",
onChange: allLeftChange
}, {
default: withCtx(() => [
createElementVNode("span", null, toDisplayString(__props.title[0]), 1)
]),
_: 1
}, 8, ["modelValue"])
]),
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_4, [
_hoisted_5,
createElementVNode("input", {
type: "input",
class: "layui-input",
onInput: searchLeft,
placeholder: "\u5173\u952E\u8BCD\u641C\u7D22"
}, null, 32)
])) : createCommentVNode("", true),
createElementVNode("ul", _hoisted_6, [
(openBlock(true), createElementBlock(Fragment, null, renderList(leftDataSource.value, (dataSource) => {
return openBlock(), createElementBlock("li", { key: dataSource }, [
createVNode(_component_lay_checkbox, {
modelValue: leftSelectedKeys.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => leftSelectedKeys.value = $event),
skin: "primary",
label: dataSource[__props.id]
}, {
default: withCtx(() => [
unref(slot).item ? renderSlot(_ctx.$slots, "item", {
key: 0,
data: dataSource
}) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(dataSource.title), 1))
]),
_: 2
}, 1032, ["modelValue", "label"])
]);
}), 128))
])
]),
createElementVNode("div", _hoisted_8, [
createVNode(_component_lay_button, {
type: "primary",
disabled: leftSelectedKeys.value.length == 0,
onClick: add
}, {
default: withCtx(() => [
_hoisted_9
]),
_: 1
}, 8, ["disabled"]),
createVNode(_component_lay_button, {
type: "primary",
disabled: rightSelectedKeys.value.length == 0,
onClick: remove
}, {
default: withCtx(() => [
_hoisted_10
]),
_: 1
}, 8, ["disabled"])
]),
createElementVNode("div", _hoisted_11, [
createElementVNode("div", _hoisted_12, [
createVNode(_component_lay_checkbox, {
modelValue: allRightChecked.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => allRightChecked.value = $event),
skin: "primary",
label: "all",
onChange: allRightChange
}, {
default: withCtx(() => [
createElementVNode("span", null, toDisplayString(__props.title[1]), 1)
]),
_: 1
}, 8, ["modelValue"])
]),
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_13, [
_hoisted_14,
createElementVNode("input", {
type: "input",
class: "layui-input",
onInput: searchRight,
placeholder: "\u5173\u952E\u8BCD\u641C\u7D22"
}, null, 32)
])) : createCommentVNode("", true),
createElementVNode("ul", _hoisted_15, [
(openBlock(true), createElementBlock(Fragment, null, renderList(rightDataSource.value, (dataSource) => {
return openBlock(), createElementBlock("li", { key: dataSource }, [
createVNode(_component_lay_checkbox, {
modelValue: rightSelectedKeys.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rightSelectedKeys.value = $event),
skin: "primary",
label: dataSource[__props.id]
}, {
default: withCtx(() => [
unref(slot).item ? renderSlot(_ctx.$slots, "item", {
key: 0,
data: dataSource
}) : (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(dataSource.title), 1))
]),
_: 2
}, 1032, ["modelValue", "label"])
]);
}), 128))
])
])
])
]);
};
}
}));
_sfc_main.install = (app) => {
app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };