|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <div class="shannon-transfer">
|
|
|
+ <div class="shannon-transfer-panel">
|
|
|
+ <div class="shannon-transfer-panel__header">
|
|
|
+ <div class="item-flex justify">
|
|
|
+ <div class="item-flex justify cursor" @click="leftAllf">
|
|
|
+ <span class="label-block" :class="leftAll ? 'is-checked' : ''"></span>
|
|
|
+ <span class="label-name">{{ title[0] }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="label-number">{{ leftSelectArr.length }}/{{ leftArr.length }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="shannon-transfer-panel__body">
|
|
|
+ <el-input placeholder="请输入内容" prefix-icon="el-icon-search shannon-transfer-panel__filter"></el-input>
|
|
|
+ <div class="shannon-transfer-panel__list is-filterable">
|
|
|
+ <div class="shannon-transfer-panel__item" v-for="(item, index) in newArr[0]" :key="item.id">
|
|
|
+ <div class="item-flex cursor" @click="leftThis(item, index)">
|
|
|
+ <span class="label-block" :class="item.isChecked ? 'is-checked' : ''"></span>
|
|
|
+ <span class="label-name">{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div>{{ newArr }}</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="shannon-transfer-panel__empty">无匹配数据</p>
|
|
|
+ <p class="shannon-transfer-panel__empty">无数据</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="shannon-transfer__buttons">
|
|
|
+ <el-button type="primary" class="shannon-transfer__button" @click="moveData('left')">
|
|
|
+ <span><i class="el-icon-arrow-left"></i></span>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" class="shannon-transfer__button" @click="moveData('right')">
|
|
|
+ <span><i class="el-icon-arrow-right"></i></span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="shannon-transfer-panel">
|
|
|
+ <div class="shannon-transfer-panel__header">
|
|
|
+ <div class="item-flex justify">
|
|
|
+ <div class="item-flex justify cursor" @click="rightAllf">
|
|
|
+ <span class="label-block" :class="rightAll ? 'is-checked' : ''"></span>
|
|
|
+ <span class="label-name">{{ title[0] }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="label-number">{{ rightSelectArr.length }}/{{ rightArr.length }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="shannon-transfer-panel__body">
|
|
|
+ <el-input placeholder="请输入内容" prefix-icon="el-icon-search shannon-transfer-panel__filter"></el-input>
|
|
|
+ <div class="shannon-transfer-panel__list is-filterable">
|
|
|
+ <div class="shannon-transfer-panel__item" v-for="item in newArr[1]" :key="item.id">
|
|
|
+ <div class="item-flex cursor" @click="rightThis(item)">
|
|
|
+ <span class="label-block" :class="item.isChecked ? 'is-checked' : ''"></span>
|
|
|
+ <span class="label-name">{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="shannon-transfer-panel__empty">无匹配数据</p>
|
|
|
+ <p class="shannon-transfer-panel__empty">无数据</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ arr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ label: '测试一号',
|
|
|
+ isChecked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ label: '测试二号',
|
|
|
+ isChecked: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ['待选列表', '已选列表']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //左右数据 左右勾选数据
|
|
|
+ leftArr: [],
|
|
|
+ rightArr: [],
|
|
|
+ leftSelectArr: [],
|
|
|
+ rightSelectArr: [],
|
|
|
+ leftAll: false,
|
|
|
+ rightAll: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ rightSelectArr: {
|
|
|
+ deep: true,
|
|
|
+ handler(n) {
|
|
|
+ console.log(n);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ newArr() {
|
|
|
+ let newData = [];
|
|
|
+ if (this.rightArr.length == 0) {
|
|
|
+ newData[0] = this.arr;
|
|
|
+ this.leftArr = this.arr;
|
|
|
+ } else {
|
|
|
+ newData[0] = this.leftArr;
|
|
|
+ this.rightArr = this.rightArr;
|
|
|
+ }
|
|
|
+ newData[1] = this.rightArr;
|
|
|
+ return newData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ leftAllf() {
|
|
|
+ this.leftArr.map((item) => {
|
|
|
+ if (!item.isChecked) {
|
|
|
+ item.isChecked = true;
|
|
|
+ } else {
|
|
|
+ item.isChecked = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.allTrue(0);
|
|
|
+ },
|
|
|
+ rightAllf() {
|
|
|
+ this.rightArr.map((item) => {
|
|
|
+ if (!item.isChecked) {
|
|
|
+ item.isChecked = true;
|
|
|
+ } else {
|
|
|
+ item.isChecked = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.allTrue(1);
|
|
|
+ },
|
|
|
+ leftThis(item, index) {
|
|
|
+ item.isChecked = !item.isChecked;
|
|
|
+ if (item.isChecked) {
|
|
|
+ this.leftSelectArr.push(item.id);
|
|
|
+ } else {
|
|
|
+ this.leftSelectArr.map((its, inx) => {
|
|
|
+ if (item.id == its) {
|
|
|
+ this.leftSelectArr.splice(inx, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.allTrue(0);
|
|
|
+ },
|
|
|
+ rightThis(item) {
|
|
|
+ item.isChecked = !item.isChecked;
|
|
|
+ if (item.isChecked) {
|
|
|
+ this.rightSelectArr.push(item.id);
|
|
|
+ } else {
|
|
|
+ this.rightSelectArr.map((its, inx) => {
|
|
|
+ if (item.id == its) {
|
|
|
+ this.rightSelectArr.splice(inx, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.allTrue(1);
|
|
|
+ },
|
|
|
+ moveData(direction) {
|
|
|
+ if (direction == 'right' && this.leftSelectArr.length !== 0) {
|
|
|
+ this.rightArr.push(this.leftSelectArr);
|
|
|
+ let thisLeft = this.leftArr.filter((item, index) => {
|
|
|
+ return this.leftSelectArr[index] !== item.id;
|
|
|
+ });
|
|
|
+ let thisRight = this.leftArr.filter((item, index) => {
|
|
|
+ item.isChecked = false;
|
|
|
+ return this.leftSelectArr[index] == item.id;
|
|
|
+ });
|
|
|
+ console.log(thisLeft);
|
|
|
+ console.log(thisRight);
|
|
|
+ this.leftArr = thisLeft;
|
|
|
+ this.rightArr = thisRight;
|
|
|
+ this.leftSelectArr = [];
|
|
|
+ } else if (direction == 'left' && this.rightSelectArr.length !== 0) {
|
|
|
+ this.leftArr.push(this.rightSelectArr);
|
|
|
+ let thisRight = this.rightArr.filter((item, index) => {
|
|
|
+ return this.rightSelectArr[index] !== item.id;
|
|
|
+ });
|
|
|
+ let thisLeft = this.rightArr.filter((item, index) => {
|
|
|
+ item.isChecked = false;
|
|
|
+ return this.rightSelectArr[index] == item.id;
|
|
|
+ });
|
|
|
+ console.log(thisLeft);
|
|
|
+ console.log(thisRight);
|
|
|
+ this.leftArr = thisLeft;
|
|
|
+ this.rightArr = thisRight;
|
|
|
+ this.rightSelectArr = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ allTrue(sun) {
|
|
|
+ if (sun == 0) {
|
|
|
+ let leftAll = false;
|
|
|
+ this.newArr[0].map((item) => {
|
|
|
+ leftAll = item.isChecked;
|
|
|
+ if (leftAll == false) {
|
|
|
+ this.leftAll = 'Multiple';
|
|
|
+ } else {
|
|
|
+ this.leftAll = 'all';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.leftAll = leftAll;
|
|
|
+ } else {
|
|
|
+ let rightAll = false;
|
|
|
+ this.newArr[1].map((item) => {
|
|
|
+ rightAll = item.isChecked;
|
|
|
+ });
|
|
|
+ this.rightAll = rightAll;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+$name: shannon-transfer;
|
|
|
+$panelName: #{$name}-panel;
|
|
|
+$white: white;
|
|
|
+.backWhite {
|
|
|
+ background: $white;
|
|
|
+}
|
|
|
+$eaeff: #0eaeff;
|
|
|
+.color0eaeff {
|
|
|
+ color: $eaeff;
|
|
|
+}
|
|
|
+.cursor {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.#{$name} {
|
|
|
+ &-panel {
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ @extend .backWhite;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 200px;
|
|
|
+ max-height: 100%;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .#{$name}-panel__header {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ margin: 0;
|
|
|
+ padding-left: 15px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .#{$panelName}__body {
|
|
|
+ height: 246px;
|
|
|
+ .#{$panelName}__filter {
|
|
|
+ text-align: center;
|
|
|
+ margin: 15px;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: block;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ .#{$panelName}__list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 6px 0;
|
|
|
+ list-style: none;
|
|
|
+ height: 246px;
|
|
|
+ overflow: auto;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .#{$panelName}__item {
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 0 15px;
|
|
|
+ .label-block {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input--prefix {
|
|
|
+ margin: 15px;
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-flex {
|
|
|
+ display: flex;
|
|
|
+ &.justify {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label-block {
|
|
|
+ position: relative;
|
|
|
+ height: 14px;
|
|
|
+ width: 14px;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-top: 13px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ @extend .backWhite;
|
|
|
+ cursor: pointer;
|
|
|
+ &.is-checked {
|
|
|
+ background: $eaeff;
|
|
|
+ border-color: $eaeff;
|
|
|
+ }
|
|
|
+ &.is-checked {
|
|
|
+ background: $eaeff;
|
|
|
+ border-color: $eaeff;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ border-color: $eaeff;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 2px;
|
|
|
+ top: 2px;
|
|
|
+ width: 50%;
|
|
|
+ height: 25%;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ border-radius: 1px;
|
|
|
+ border-top: none;
|
|
|
+ border-right: none;
|
|
|
+ background: transparent;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label-name {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &__buttons {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding: 0 30px;
|
|
|
+ .#{$name}__button {
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|