init
This commit is contained in:
127
src/component/transfer/index.less
Normal file
127
src/component/transfer/index.less
Normal file
@@ -0,0 +1,127 @@
|
||||
@import "../button/index.less";
|
||||
@import "../checkbox/index.less";
|
||||
|
||||
: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: 0.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;
|
||||
}
|
||||
5
src/component/transfer/index.ts
Normal file
5
src/component/transfer/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { withInstall, WithInstallType } from "../../utils";
|
||||
import Component from "./index.vue";
|
||||
|
||||
const component: WithInstallType<typeof Component> = withInstall(Component);
|
||||
export default component;
|
||||
311
src/component/transfer/index.vue
Normal file
311
src/component/transfer/index.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayTransfer",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayButton from "../button/index.vue";
|
||||
import LayCheckbox from "../checkbox/index.vue";
|
||||
import { computed, Ref, ref, useSlots, watch } from "vue";
|
||||
import { BooleanOrString, Recordable } from "../../types";
|
||||
|
||||
export interface TransferProps {
|
||||
id?: string;
|
||||
title?: string[];
|
||||
width?: string;
|
||||
height?: string;
|
||||
showSearch?: BooleanOrString;
|
||||
dataSource: Recordable[];
|
||||
modelValue?: Recordable[];
|
||||
}
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
const props = withDefaults(defineProps<TransferProps>(), {
|
||||
id: "id",
|
||||
title: () => ["主列表", "副列表"],
|
||||
dataSource: () => [],
|
||||
showSearch: false,
|
||||
modelValue: () => [],
|
||||
width: "200px",
|
||||
height: "360px",
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const leftDataSource: Ref<any[]> = ref([]);
|
||||
const rightDataSource: Ref<any[]> = ref([]);
|
||||
const _leftDataSource: Ref<any[]> = ref([]);
|
||||
const _rightDataSource: Ref<any[]> = ref([]);
|
||||
const leftSelectedKeys: Ref<string[]> = ref([]);
|
||||
const rightSelectedKeys: Ref<string[]> = ref([]);
|
||||
const allLeftChecked = ref(false);
|
||||
const allRightChecked = ref(false);
|
||||
const hasLeftChecked = ref(false);
|
||||
const hasRightChecked = ref(false);
|
||||
|
||||
const allLeftChange = (isChecked: boolean) => {
|
||||
if (isChecked) {
|
||||
const datasources = leftDataSource.value.filter((item: any) => {
|
||||
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: any[] = [];
|
||||
|
||||
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: any) => {
|
||||
if (checked) {
|
||||
const datasources = rightDataSource.value.filter((item: any) => {
|
||||
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: any[] = [];
|
||||
|
||||
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: any[] = [];
|
||||
|
||||
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: any) => {
|
||||
if (e === "") {
|
||||
leftDataSource.value = _leftDataSource.value;
|
||||
}
|
||||
leftDataSource.value = _leftDataSource.value.filter((item) => {
|
||||
if (item.title.indexOf(e) != -1) {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const searchRight = (e: any) => {
|
||||
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,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="layui-transfer layui-form layui-border-box">
|
||||
<div class="layui-transfer-box" :style="boxStyle">
|
||||
<div class="layui-transfer-header">
|
||||
<LayCheckbox
|
||||
v-model="hasLeftChecked"
|
||||
:is-indeterminate="!allLeftChecked"
|
||||
skin="primary"
|
||||
value="all"
|
||||
@change="allLeftChange"
|
||||
>
|
||||
{{ title[0] }}
|
||||
</LayCheckbox>
|
||||
</div>
|
||||
<div class="layui-transfer-search" v-if="showSearch">
|
||||
<lay-input
|
||||
prefix-icon="layui-icon-search"
|
||||
@input="searchLeft"
|
||||
placeholder="关键词搜索"
|
||||
></lay-input>
|
||||
</div>
|
||||
<ul class="layui-transfer-data">
|
||||
<li v-for="dataSource in leftDataSource" :key="dataSource">
|
||||
<LayCheckbox
|
||||
v-model="leftSelectedKeys"
|
||||
skin="primary"
|
||||
:disabled="dataSource.disabled"
|
||||
:value="dataSource[id]"
|
||||
>
|
||||
<slot v-if="slots.item" name="item" :data="dataSource"></slot>
|
||||
<template v-else>{{ dataSource.title }}</template>
|
||||
</LayCheckbox>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="layui-transfer-footer" v-if="slots.leftFooter">
|
||||
<slot name="leftFooter"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-transfer-active">
|
||||
<div class="layui-transfer-button-group">
|
||||
<LayButton
|
||||
type="primary"
|
||||
:disabled="leftSelectedKeys.length == 0"
|
||||
@click="add"
|
||||
><i class="layui-icon layui-icon-next"></i
|
||||
></LayButton>
|
||||
<LayButton
|
||||
type="primary"
|
||||
:disabled="rightSelectedKeys.length == 0"
|
||||
@click="remove"
|
||||
><i class="layui-icon layui-icon-prev"></i
|
||||
></LayButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-transfer-box" :style="boxStyle">
|
||||
<div class="layui-transfer-header">
|
||||
<LayCheckbox
|
||||
v-model="hasRightChecked"
|
||||
:is-indeterminate="!allRightChecked"
|
||||
skin="primary"
|
||||
value="all"
|
||||
@change="allRightChange"
|
||||
>
|
||||
{{ title[1] }}
|
||||
</LayCheckbox>
|
||||
</div>
|
||||
<div class="layui-transfer-search" v-if="showSearch">
|
||||
<lay-input
|
||||
prefix-icon="layui-icon-search"
|
||||
@input="searchRight"
|
||||
placeholder="关键词搜索"
|
||||
></lay-input>
|
||||
</div>
|
||||
<ul class="layui-transfer-data">
|
||||
<li v-for="dataSource in rightDataSource" :key="dataSource">
|
||||
<LayCheckbox
|
||||
skin="primary"
|
||||
v-model="rightSelectedKeys"
|
||||
:disabled="dataSource.disabled"
|
||||
:value="dataSource[id]"
|
||||
>
|
||||
<slot v-if="slots.item" name="item" :data="dataSource"></slot>
|
||||
<template v-else>{{ dataSource.title }}</template>
|
||||
</LayCheckbox>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="layui-transfer-footer" v-if="slots.rightFooter">
|
||||
<slot name="rightFooter"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
1
src/component/transfer/interface.ts
Normal file
1
src/component/transfer/interface.ts
Normal file
@@ -0,0 +1 @@
|
||||
import { Recordable } from "../../types";
|
||||
Reference in New Issue
Block a user