添加穿梭框组件

examples/containers/Transfer.vue

+<template>
+  <list-layout>
+    <ks-transfer
+      v-model="value"
+      :list="list"
+    />
+  </list-layout>
+</template>
+
+<script>
+export default {
+  name: 'transferPage',
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          label: '1111',
+        },
+        {
+          id: 2,
+          label: '2222',
+        },
+        {
+          id: 3,
+          label: '3333',
+        },
+      ],
+      value: [],
+    };
+  },
+};
+</script>
+

examples/route.js

@@ -6,6 +6,8 @@ import SearchItem from './containers/SearchItem.vue';
 import Pagination from './containers/Pagination.vue';
 import Dialog from './containers/Dialog.vue';
 import NormalDialog from './containers/NormalDialog.vue';
+import Transfer from './containers/Transfer.vue';
+
 import layoutIcon from '../src/assets/images/menu/home.png';
 
 Vue.use(Router);
@@ -51,6 +53,12 @@ export const routerMap = [
         component: Pagination,
         meta: { title: '分页器' },
       },
+      {
+        path: 'Transfer',
+        name: 'Transfer',
+        component: Transfer,
+        meta: { title: '穿梭框' },
+      },
     ],
   },
   {

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "任意门组件库",
   "main": "lib/rymUi.common.js",
   "scripts": {

src/components/Transfer/Transfer.vue

+<template>
+  <div class="transfer-wrap">
+    <div class="transfer-allData">
+      <div class="transfer-allData-filter">
+        <span>{{titles&&titles[0]?titles[0]:'全部'}}</span>
+        <div class="transfer-filter-input">
+          <el-input
+            v-model="filters.all"
+            :maxlength="200"
+            placeholder="请输入"
+            clearable
+          ></el-input>
+        </div>
+        <div>
+          <el-button
+            size="mini"
+            @click="filterAllData"
+          >查询</el-button>
+        </div>
+      </div>
+      <div class="transfer-allData-box">
+        <select
+          class="transfer-allData-select"
+          multiple
+          v-model="selected.all"
+        >
+          <option
+            v-for="(item, index) in allDataOptions"
+            :key="index"
+            :value="getValue('key',item)"
+          >{{getValue('label',item)}}</option>
+        </select>
+      </div>
+    </div>
+    <div class="transfer-btnBox">
+      <div class="cancel-btn-box">
+        <div
+          class="transfer-btnBox-btn"
+          @click="removeSelectedValue(true)"
+        >
+          <i class="el-icon-d-arrow-left"></i>
+        </div>
+        <div
+          class="transfer-btnBox-btn"
+          @click="removeSelectedValue()"
+        >
+          <i class="el-icon-arrow-left"></i>
+        </div>
+      </div>
+      <div class="selected-btn-box">
+        <div
+          class="transfer-btnBox-btn"
+          @click="addSelectedValue()"
+        >
+          <i class="el-icon-arrow-right"></i>
+        </div>
+        <div
+          class="transfer-btnBox-btn"
+          @click="addSelectedValue(true)"
+        >
+          <i class="el-icon-d-arrow-right"></i>
+        </div>
+      </div>
+      <el-button
+        size="mini"
+        type="primary"
+        @click="submitHandle"
+      >确定</el-button>
+      <br>
+      <br>
+      <el-button
+        size="mini"
+        @click="cancelHandle"
+      >取消</el-button>
+    </div>
+    <div class="transfer-selectData">
+      <div class="transfer-selectData-filter">
+        <span>{{titles&&titles[1]?titles[1]:'已选'}}</span>
+        <div class="transfer-filter-input">
+          <el-input
+            v-model.trim="filters.selected"
+            :maxlength="200"
+            placeholder="请输入"
+            clearable
+          ></el-input>
+        </div>
+        <div>
+          <el-button
+            size="mini"
+            @click="filterSelectedData"
+          >查询</el-button>
+        </div>
+      </div>
+      <div class="transfer-selectData-box">
+        <select
+          class="transfer-selectData-select"
+          multiple
+          v-model="selected.value"
+        >
+          <option
+            v-for="(item, index) in selectDataOptions"
+            :key="index"
+            :value="getValue('key',item)"
+          >{{getValue('label',item)}}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ks-transfer',
+  props: {
+    titles: Array,
+    list: Array,
+    value: Array,
+    onChange: Function,
+    mapProps: Object,
+  },
+
+  data() {
+    return {
+      filters: this.initFilter(),
+      trueValue: this.value,
+      selected: {
+        all: [],
+        value: [],
+      },
+    };
+  },
+  watch: {
+    value(nVal) {
+      this.trueValue = nVal;
+    },
+  },
+  computed: {
+    allDataOptions() {
+      return this.list
+        .filter(
+          i =>
+            !this.trueValue.includes(
+              this.mapProps ? i[this.mapProps.key] : i.id
+            )
+        )
+        .filter(i =>
+          this.filters.allValue
+            ? this.mapProps
+              ? i[this.mapProps.label].includes(this.filters.allValue)
+              : i.label.includes(this.filters.allValue)
+            : true
+        );
+    },
+    selectDataOptions() {
+      return this.list
+        .filter(i =>
+          this.trueValue.includes(this.mapProps ? i[this.mapProps.key] : i.id)
+        )
+        .filter(i =>
+          this.filters.selectedValue
+            ? this.mapProps
+              ? i[this.mapProps.label].includes(this.filters.selectedValue)
+              : i.label.includes(this.filters.selectedValue)
+            : true
+        );
+    },
+  },
+  methods: {
+    initFilter() {
+      return {
+        all: '',
+        allValue: '',
+        selected: '',
+        selectedValue: '',
+      };
+    },
+    filterAllData() {
+      this.filters.allValue = this.filters.all;
+    },
+    filterSelectedData() {
+      this.filters.selectedValue = this.filters.selected;
+    },
+    addSelectedValue(flag) {
+      this.trueValue = flag
+        ? this.list.map(i => i.id)
+        : [...this.trueValue, ...this.selected.all];
+    },
+    removeSelectedValue(flag) {
+      this.trueValue = flag
+        ? []
+        : this.trueValue.filter(i => !this.selected.value.includes(i));
+    },
+    submitHandle() {
+      this.filters = this.initFilter();
+      if (this.onChange) {
+        this.onChange(this.trueValue);
+      } else {
+        this.$emit('input', this.trueValue);
+        this.$emit('close');
+      }
+    },
+    cancelHandle() {
+      this.filters = this.initFilter();
+      this.$emit('close');
+    },
+    getValue(key, item) {
+      if (this.mapProps) {
+        return item[this.mapProps[key]];
+      }
+      if (key === 'key') return item.id;
+      return item[key];
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.transfer-wrap {
+  height: 600px;
+  display: flex;
+  .transfer-allData,
+  .transfer-selectData {
+    flex: 1;
+    .transfer-selectData-box,
+    .transfer-allData-box {
+      width: 100%;
+      height: 560px;
+      .transfer-selectData-select,
+      .transfer-allData-select {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .transfer-btnBox {
+    width: 100px;
+    text-align: center;
+    .transfer-btnBox-btn {
+      width: 50px;
+      height: 50px;
+      line-height: 50px;
+      margin: 0 auto;
+      font-size: 30px;
+    }
+    .cancel-btn-box {
+      margin-top: 100px;
+      margin-bottom: 100px;
+    }
+    .selected-btn-box {
+      margin-bottom: 50px;
+    }
+  }
+  .transfer-selectData-filter,
+  .transfer-allData-filter {
+    display: flex;
+    height: 40px;
+    line-height: 40px;
+    .transfer-filter-input {
+      flex: 1;
+      margin: 0 10px 0 5px;
+    }
+  }
+}
+</style>

src/components/Transfer/index.js

+import Transfer from './Transfer.vue';
+
+Transfer.install = Vue => {
+  Vue.component(Transfer.name, Transfer);
+};
+
+export default Transfer;

src/index.js

@@ -14,6 +14,7 @@ import { Option } from 'element-ui';
 import FormArea from './components/FormArea/index';
 import FormLine from './components/FormLine/index';
 import FormItem from './components/FormItem/index';
+import Transfer from './components/Transfer/index';
 
 const install = Vue => {
   // Layout
@@ -31,6 +32,7 @@ const install = Vue => {
   Vue.component(FormArea.name, FormArea);
   Vue.component(FormLine.name, FormLine);
   Vue.component(FormItem.name, FormItem);
+  Vue.component(Transfer.name, Transfer);
   // Element-ui
   Vue.component(Option.name, Option);
   // input