feat: 新增SchemaTransfer组件

刘汉宸
1 parent 10eba06c
Showing 3 changed files with 443 additions and 0 deletions Show diff stats
examples/router/routes.js
examples/views/docs/component/schema-transfer.md
packages/schema-transfer/index.vue
@@ -101,6 +101,12 @@ const _components = [
         meta: { title: 'Schema Select 选择器' },
         component: () => import('@/views/docs/component/schema-select.md'),
       },
+      {
+        path: 'schema-transfer',
+        name: 'schema-transfer',
+        meta: { title: 'Schema Transfer 穿梭框' },
+        component: () => import('@/views/docs/component/schema-transfer.md'),
+      },
     ],
   },
 ];
@@ -0,0 +1,208 @@
+# Schema Transfer 方案穿梭框
+
+通过配置JSON Schema的方式快速生成一个穿梭框，与常规穿梭框不同的是，本穿梭框是表格型穿梭框。
+
+## 基础用法
+
+一个展示内容更多的表格形式的下拉选择器，基本配置项与`z-schema-page`中`schema`相同。
+
+::: snippet `source`设置数据源, `titles`设置标题, `value-key`设置绑定值主键，默认为**id**。
+
+```html
+<template>
+  <z-schema-transfer v-model="model" :schema="schema" :titles="titles" :source="source" value-key="id" size="small"></z-schema-transfer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: [],
+      source: [
+        { id: '0', name: '姓名0', age: 17 },
+        { id: '1', name: '姓名1', age: 26 },
+      ],
+      titles: ['左边数据源', '右边已选中'],
+      schema: {
+        table: {
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120 },
+            { label: '年龄', prop: 'age', minWidth: 120 },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        },
+      },
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## 远程搜索
+
+数据源支持远程搜索。
+
+::: snippet `api-search`设置查询方法，返回值格式与`z-schema-page`相同。
+
+```html
+<template>
+  <z-schema-transfer v-model="model" :schema="schema" :value-filter.sync="filterModel" value-key="id" size="small" :api-search="searchAPI" auto></z-schema-transfer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: [],
+      filterModel: { name: '' },
+      schema: {
+        filter: {
+          items: [
+            { is: 'el-input', label: '姓名', prop: 'name' },
+          ]
+        },
+        table: {
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120 },
+            { label: '年龄', prop: 'age', minWidth: 120 },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        },
+      },
+    }
+  },
+  methods: {
+    searchAPI(params) {
+      console.log('search', params);
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const list = [
+            { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+            { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+            { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+            { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+            { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+          ]
+          resolve([list, 37]);
+        }, 500);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
+## 选中表格配置
+
+可以单独配置已选中的表格
+
+::: snippet `schema`中设置`selected`，格式与`z-schema-table`相同。
+
+```html
+<template>
+  <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small"></z-schema-transfer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: [],
+      source: [
+        { id: '0', name: '姓名0', age: 17 },
+        { id: '1', name: '姓名1', age: 26 },
+      ],
+      schema: {
+        table: {
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120 },
+            { label: '年龄', prop: 'age', minWidth: 120 },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        },
+        selected: {
+          props: { border: true, editable: true },
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120, editable: false },
+            { label: '年龄', prop: 'age', minWidth: 120, editalways: true },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        }
+      },
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## 自定义内容
+
+在不满足业务需求的情况下，可以设置插槽自定义左右内容
+
+::: snippet 默认插槽`default`表示数据源，插槽`selected`表示已选中的内容
+
+```html
+<template>
+  <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small">
+    <template #title-left>未选择 <i class="el-icon-minus"></i></template>
+    <template #default="{ onChoose, valueFormatter }">
+      <div>
+        <el-button size="mini" v-for="item in valueFormatter(source)" @click="onChoose(item)">{{ item.name }}</el-button>
+      </div>
+    </template>
+    <template #title-right>已选择 <i class="el-icon-check"></i></template>
+    <template #selected="{ onRemove }">
+      <div>
+        <el-button size="mini" v-for="item in model" @click="onRemove(item)">{{ item.name }}</el-button>
+      </div>
+    </template>
+  </z-schema-transfer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: [],
+      source: [
+        { id: '0', name: '姓名0', age: 17 },
+        { id: '1', name: '姓名1', age: 26 },
+      ],
+      schema: {
+        table: {
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120 },
+            { label: '年龄', prop: 'age', minWidth: 120 },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        },
+        selected: {
+          props: { border: true, editable: true },
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120, editable: false },
+            { label: '年龄', prop: 'age', minWidth: 120, editalways: true },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        }
+      },
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+schema | JSON Schema配置项列表 | Array | - | []
 \ No newline at end of file
@@ -0,0 +1,229 @@
+<style lang="scss">
+.z-schema-transfer {
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  &__left,
+  &__right {
+    width: 50%;
+    flex: 1;
+    border: 1px solid #ebeef5;
+  }
+  &__left {
+    border-right: 0;
+  }
+  &__header {
+    display: flex;
+    background: #f5f7fa;
+    padding: 8px 10px;
+    font-size: 14px;
+  }
+  &__content {
+    padding: 10px;
+  }
+}
+</style>
+
+<template>
+  <div class="z-schema-transfer">
+    <div class="z-schema-transfer__left">
+      <div class="z-schema-transfer__header">
+        <div class="z-schema-transfer__title">
+          <slot name="title-left">{{ titles[0] }}</slot>
+        </div>
+      </div>
+      <div class="z-schema-transfer__content">
+        <slot :onChoose="onChoose" :valueFormatter="valueFormatter">
+          <z-schema-page
+            :size="transferSize"
+            :value-filter="valueFilter"
+            :value-table="valueTable"
+            :schema="schemaLeft"
+            :api-search="searchMethod"
+            @update:value-filter="e => $emit('update:value-filter', e)"
+            :auto="auto"
+          >
+            <template #operation>
+              <el-table-column label="操作" width="80" align="center" fixed="right">
+                <template #default="{ row, $index }">
+                  <div class="z-schema-page__table-operation">
+                    <el-button type="text" :disabled="_rowDisabled(row, $index)" @click="onChoose(row)">选择</el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </template>
+          </z-schema-page>
+        </slot>
+      </div>
+    </div>
+    <div class="z-schema-transfer__right">
+      <div class="z-schema-transfer__header">
+        <div class="z-schema-transfer__title">
+          <slot name="title-right">{{ titles[1] }}</slot>
+        </div>
+      </div>
+      <div class="z-schema-transfer__content">
+        <slot name="selected" :onRemove="onRemove">
+          <z-schema-table :size="transferSize" :value="value" :schema="schemaRight" @input="onInput">
+            <el-table-column label="操作" width="80" align="center" fixed="right">
+              <template #default="{ row, $index }">
+                <div class="z-schema-page__table-operation">
+                  <el-button type="text" :disabled="_rowDisabled(row, $index)" @click="onRemove(row, $index)">移除</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </z-schema-table>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { cloneDeep, get } from '../utils';
+
+export default {
+  name: 'SchemaTransfer',
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    schema: {
+      required: true,
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    titles: {
+      type: Array,
+      default() {
+        return ['未选中', '已选中'];
+      },
+    },
+    source: Array,
+    valueKey: {
+      type: String,
+      default: 'id',
+    },
+    size: String,
+    disabled: Boolean,
+    auto: Boolean,
+    rowDisabled: Function,
+    apiSearch: Function,
+    valueFilter: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  inject: {
+    elForm: {
+      default: undefined,
+    },
+    elFormItem: {
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      dataSource: this.source || [],
+    };
+  },
+  watch: {
+    source(val) {
+      this.dataSource = val || [];
+    },
+  },
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    transferSize() {
+      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
+    },
+    transferDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+    schemaFilter() {
+      return this.schema.filter || {};
+    },
+    schemaLeft() {
+      return {
+        ...this.schema,
+        selection: false,
+        action: false,
+        filter: this.schema.filter
+          ? {
+              props: {
+                span: 12,
+                ...(this.schemaFilter.props || {}),
+              },
+              ...this.schemaFilter,
+            }
+          : false,
+        pagination: !this.apiSearch ? false : get(this.schema, 'pagination'),
+      };
+    },
+    schemaRight() {
+      if (this.schema.selected) {
+        return this.schema.selected;
+      }
+      return {
+        props: {
+          border: true,
+          'highlight-current-row': true,
+          ...(get(this.schema, 'table.props') || {}),
+        },
+        ...this.schema.table,
+      };
+    },
+    valueKeys() {
+      return this.value.map(item => item[this.valueKey]);
+    },
+    valueTable() {
+      return this.valueFormatter(this.dataSource || []);
+    },
+  },
+  methods: {
+    _rowDisabled(row, index) {
+      if (this.transferDisabled) {
+        return true;
+      }
+      if (this.rowDisabled) {
+        return this.rowDisabled({ row, index });
+      }
+      return false;
+    },
+    valueFormatter(value) {
+      return value.filter(item => !this.valueKeys.includes(item[this.valueKey]));
+    },
+    onChoose(row) {
+      this.$emit('input', [...this.value, row]);
+    },
+    onRemove(row, index) {
+      const newValue = cloneDeep(this.value || []);
+      newValue.splice(index, 1);
+      this.$emit('input', newValue);
+    },
+    onInput(value) {
+      this.$emit('input', value);
+    },
+    searchMethod(e) {
+      if (this.apiSearch) {
+        return this.apiSearch(e).then(result => {
+          this.dataSource = result[0] || [];
+          return [this.valueTable, result[1]];
+        });
+      }
+      return new Promise(resolve => {
+        resolve([]);
+      });
+    },
+  },
+};
+</script>
	@@ -101,6 +101,12 @@ const _components = [		@@ -101,6 +101,12 @@ const _components = [
101	meta: { title: 'Schema Select 选择器' },	101	meta: { title: 'Schema Select 选择器' },
102	component: () => import('@/views/docs/component/schema-select.md'),	102	component: () => import('@/views/docs/component/schema-select.md'),
103	},	103	},
		104	+ {
		105	+ path: 'schema-transfer',
		106	+ name: 'schema-transfer',
		107	+ meta: { title: 'Schema Transfer 穿梭框' },
		108	+ component: () => import('@/views/docs/component/schema-transfer.md'),
		109	+ },
104	],	110	],
105	},	111	},
106	];	112	];
	@@ -0,0 +1,208 @@		@@ -0,0 +1,208 @@
		1	+# Schema Transfer 方案穿梭框
		2	+
		3	+通过配置JSON Schema的方式快速生成一个穿梭框，与常规穿梭框不同的是，本穿梭框是表格型穿梭框。
		4	+
		5	+## 基础用法
		6	+
		7	+一个展示内容更多的表格形式的下拉选择器，基本配置项与`z-schema-page`中`schema`相同。
		8	+
		9	+::: snippet `source`设置数据源, `titles`设置标题, `value-key`设置绑定值主键，默认为id。
		10	+
		11	+```html
		12	+<template>
		13	+ <z-schema-transfer v-model="model" :schema="schema" :titles="titles" :source="source" value-key="id" size="small"></z-schema-transfer>
		14	+</template>
		15	+
		16	+<script>
		17	+export default {
		18	+ data() {
		19	+ return {
		20	+ model: [],
		21	+ source: [
		22	+ { id: '0', name: '姓名0', age: 17 },
		23	+ { id: '1', name: '姓名1', age: 26 },
		24	+ ],
		25	+ titles: ['左边数据源', '右边已选中'],
		26	+ schema: {
		27	+ table: {
		28	+ items: [
		29	+ { label: '姓名', prop: 'name', minWidth: 120 },
		30	+ { label: '年龄', prop: 'age', minWidth: 120 },
		31	+ { label: '地址', prop: 'address', minWidth: 120 },
		32	+ ]
		33	+ },
		34	+ },
		35	+ }
		36	+ },
		37	+}
		38	+</script>
		39	+```
		40	+
		41	+:::
		42	+
		43	+## 远程搜索
		44	+
		45	+数据源支持远程搜索。
		46	+
		47	+::: snippet `api-search`设置查询方法，返回值格式与`z-schema-page`相同。
		48	+
		49	+```html
		50	+<template>
		51	+ <z-schema-transfer v-model="model" :schema="schema" :value-filter.sync="filterModel" value-key="id" size="small" :api-search="searchAPI" auto></z-schema-transfer>
		52	+</template>
		53	+
		54	+<script>
		55	+export default {
		56	+ data() {
		57	+ return {
		58	+ model: [],
		59	+ filterModel: { name: '' },
		60	+ schema: {
		61	+ filter: {
		62	+ items: [
		63	+ { is: 'el-input', label: '姓名', prop: 'name' },
		64	+ ]
		65	+ },
		66	+ table: {
		67	+ items: [
		68	+ { label: '姓名', prop: 'name', minWidth: 120 },
		69	+ { label: '年龄', prop: 'age', minWidth: 120 },
		70	+ { label: '地址', prop: 'address', minWidth: 120 },
		71	+ ]
		72	+ },
		73	+ },
		74	+ }
		75	+ },
		76	+ methods: {
		77	+ searchAPI(params) {
		78	+ console.log('search', params);
		79	+ return new Promise(resolve => {
		80	+ setTimeout(() => {
		81	+ const list = [
		82	+ { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
		83	+ { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
		84	+ { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
		85	+ { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
		86	+ { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
		87	+ ]
		88	+ resolve([list, 37]);
		89	+ }, 500);
		90	+ });
		91	+ },
		92	+ }
		93	+}
		94	+</script>
		95	+```
		96	+
		97	+:::
		98	+
		99	+## 选中表格配置
		100	+
		101	+可以单独配置已选中的表格
		102	+
		103	+::: snippet `schema`中设置`selected`，格式与`z-schema-table`相同。
		104	+
		105	+```html
		106	+<template>
		107	+ <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small"></z-schema-transfer>
		108	+</template>
		109	+
		110	+<script>
		111	+export default {
		112	+ data() {
		113	+ return {
		114	+ model: [],
		115	+ source: [
		116	+ { id: '0', name: '姓名0', age: 17 },
		117	+ { id: '1', name: '姓名1', age: 26 },
		118	+ ],
		119	+ schema: {
		120	+ table: {
		121	+ items: [
		122	+ { label: '姓名', prop: 'name', minWidth: 120 },
		123	+ { label: '年龄', prop: 'age', minWidth: 120 },
		124	+ { label: '地址', prop: 'address', minWidth: 120 },
		125	+ ]
		126	+ },
		127	+ selected: {
		128	+ props: { border: true, editable: true },
		129	+ items: [
		130	+ { label: '姓名', prop: 'name', minWidth: 120, editable: false },
		131	+ { label: '年龄', prop: 'age', minWidth: 120, editalways: true },
		132	+ { label: '地址', prop: 'address', minWidth: 120 },
		133	+ ]
		134	+ }
		135	+ },
		136	+ }
		137	+ },
		138	+}
		139	+</script>
		140	+```
		141	+
		142	+:::
		143	+
		144	+## 自定义内容
		145	+
		146	+在不满足业务需求的情况下，可以设置插槽自定义左右内容
		147	+
		148	+::: snippet 默认插槽`default`表示数据源，插槽`selected`表示已选中的内容
		149	+
		150	+```html
		151	+<template>
		152	+ <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small">
		153	+ <template #title-left>未选择 <i class="el-icon-minus"></i></template>
		154	+ <template #default="{ onChoose, valueFormatter }">
		155	+ <div>
		156	+ <el-button size="mini" v-for="item in valueFormatter(source)" @click="onChoose(item)">{{ item.name }}</el-button>
		157	+ </div>
		158	+ </template>
		159	+ <template #title-right>已选择 <i class="el-icon-check"></i></template>
		160	+ <template #selected="{ onRemove }">
		161	+ <div>
		162	+ <el-button size="mini" v-for="item in model" @click="onRemove(item)">{{ item.name }}</el-button>
		163	+ </div>
		164	+ </template>
		165	+ </z-schema-transfer>
		166	+</template>
		167	+
		168	+<script>
		169	+export default {
		170	+ data() {
		171	+ return {
		172	+ model: [],
		173	+ source: [
		174	+ { id: '0', name: '姓名0', age: 17 },
		175	+ { id: '1', name: '姓名1', age: 26 },
		176	+ ],
		177	+ schema: {
		178	+ table: {
		179	+ items: [
		180	+ { label: '姓名', prop: 'name', minWidth: 120 },
		181	+ { label: '年龄', prop: 'age', minWidth: 120 },
		182	+ { label: '地址', prop: 'address', minWidth: 120 },
		183	+ ]
		184	+ },
		185	+ selected: {
		186	+ props: { border: true, editable: true },
		187	+ items: [
		188	+ { label: '姓名', prop: 'name', minWidth: 120, editable: false },
		189	+ { label: '年龄', prop: 'age', minWidth: 120, editalways: true },
		190	+ { label: '地址', prop: 'address', minWidth: 120 },
		191	+ ]
		192	+ }
		193	+ },
		194	+ }
		195	+ },
		196	+}
		197	+</script>
		198	+```
		199	+
		200	+:::
		201	+
		202	+## API
		203	+
		204	+## Attribute 属性
		205	+
		206	+参数\|说明\|类型\|可选值\|默认值
		207	+-\|-\|-\|-\|-
		208	+schema \| JSON Schema配置项列表 \| Array \| - \| []
0	\ No newline at end of file	209	\ No newline at end of file
@@ -0,0 +1,229 @@		@@ -0,0 +1,229 @@
	1	+<style lang="scss">
	2	+.z-schema-transfer {
	3	+ display: flex;
	4	+ justify-content: space-between;
	5	+ box-sizing: border-box;
	6	+ &__left,
	7	+ &__right {
	8	+ width: 50%;
	9	+ flex: 1;
	10	+ border: 1px solid #ebeef5;
	11	+ }
	12	+ &__left {
	13	+ border-right: 0;
	14	+ }
	15	+ &__header {
	16	+ display: flex;
	17	+ background: #f5f7fa;
	18	+ padding: 8px 10px;
	19	+ font-size: 14px;
	20	+ }
	21	+ &__content {
	22	+ padding: 10px;
	23	+ }
	24	+}
	25	+</style>
	26	+
	27	+<template>
	28	+ <div class="z-schema-transfer">
	29	+ <div class="z-schema-transfer__left">
	30	+ <div class="z-schema-transfer__header">
	31	+ <div class="z-schema-transfer__title">
	32	+ <slot name="title-left">{{ titles[0] }}</slot>
	33	+ </div>
	34	+ </div>
	35	+ <div class="z-schema-transfer__content">
	36	+ <slot :onChoose="onChoose" :valueFormatter="valueFormatter">
	37	+ <z-schema-page
	38	+ :size="transferSize"
	39	+ :value-filter="valueFilter"
	40	+ :value-table="valueTable"
	41	+ :schema="schemaLeft"
	42	+ :api-search="searchMethod"
	43	+ @update:value-filter="e => $emit('update:value-filter', e)"
	44	+ :auto="auto"
	45	+ >
	46	+ <template #operation>
	47	+ <el-table-column label="操作" width="80" align="center" fixed="right">
	48	+ <template #default="{ row, $index }">
	49	+ <div class="z-schema-page__table-operation">
	50	+ <el-button type="text" :disabled="_rowDisabled(row, $index)" @click="onChoose(row)">选择</el-button>
	51	+ </div>
	52	+ </template>
	53	+ </el-table-column>
	54	+ </template>
	55	+ </z-schema-page>
	56	+ </slot>
	57	+ </div>
	58	+ </div>
	59	+ <div class="z-schema-transfer__right">
	60	+ <div class="z-schema-transfer__header">
	61	+ <div class="z-schema-transfer__title">
	62	+ <slot name="title-right">{{ titles[1] }}</slot>
	63	+ </div>
	64	+ </div>
	65	+ <div class="z-schema-transfer__content">
	66	+ <slot name="selected" :onRemove="onRemove">
	67	+ <z-schema-table :size="transferSize" :value="value" :schema="schemaRight" @input="onInput">
	68	+ <el-table-column label="操作" width="80" align="center" fixed="right">
	69	+ <template #default="{ row, $index }">
	70	+ <div class="z-schema-page__table-operation">
	71	+ <el-button type="text" :disabled="_rowDisabled(row, $index)" @click="onRemove(row, $index)">移除</el-button>
	72	+ </div>
	73	+ </template>
	74	+ </el-table-column>
	75	+ </z-schema-table>
	76	+ </slot>
	77	+ </div>
	78	+ </div>
	79	+ </div>
	80	+</template>
	81	+
	82	+<script>
	83	+import { cloneDeep, get } from '../utils';
	84	+
	85	+export default {
	86	+ name: 'SchemaTransfer',
	87	+ props: {
	88	+ value: {
	89	+ type: Array,
	90	+ default() {
	91	+ return [];
	92	+ },
	93	+ },
	94	+ schema: {
	95	+ required: true,
	96	+ type: Object,
	97	+ default() {
	98	+ return {};
	99	+ },
	100	+ },
	101	+ titles: {
	102	+ type: Array,
	103	+ default() {
	104	+ return ['未选中', '已选中'];
	105	+ },
	106	+ },
	107	+ source: Array,
	108	+ valueKey: {
	109	+ type: String,
	110	+ default: 'id',
	111	+ },
	112	+ size: String,
	113	+ disabled: Boolean,
	114	+ auto: Boolean,
	115	+ rowDisabled: Function,
	116	+ apiSearch: Function,
	117	+ valueFilter: {
	118	+ type: Object,
	119	+ default() {
	120	+ return {};
	121	+ },
	122	+ },
	123	+ },
	124	+ inject: {
	125	+ elForm: {
	126	+ default: undefined,
	127	+ },
	128	+ elFormItem: {
	129	+ default: undefined,
	130	+ },
	131	+ },
	132	+ data() {
	133	+ return {
	134	+ dataSource: this.source \|\| [],
	135	+ };
	136	+ },
	137	+ watch: {
	138	+ source(val) {
	139	+ this.dataSource = val \|\| [];
	140	+ },
	141	+ },
	142	+ computed: {
	143	+ _elFormItemSize() {
	144	+ return (this.elFormItem \|\| {}).elFormItemSize;
	145	+ },
	146	+ transferSize() {
	147	+ return this.size \|\| this._elFormItemSize \|\| (this.elForm \|\| {}).size \|\| (this.$ELEMENT \|\| {}).size;
	148	+ },
	149	+ transferDisabled() {
	150	+ return this.disabled \|\| (this.elForm \|\| {}).disabled;
	151	+ },
	152	+ schemaFilter() {
	153	+ return this.schema.filter \|\| {};
	154	+ },
	155	+ schemaLeft() {
	156	+ return {
	157	+ ...this.schema,
	158	+ selection: false,
	159	+ action: false,
	160	+ filter: this.schema.filter
	161	+ ? {
	162	+ props: {
	163	+ span: 12,
	164	+ ...(this.schemaFilter.props \|\| {}),
	165	+ },
	166	+ ...this.schemaFilter,
	167	+ }
	168	+ : false,
	169	+ pagination: !this.apiSearch ? false : get(this.schema, 'pagination'),
	170	+ };
	171	+ },
	172	+ schemaRight() {
	173	+ if (this.schema.selected) {
	174	+ return this.schema.selected;
	175	+ }
	176	+ return {
	177	+ props: {
	178	+ border: true,
	179	+ 'highlight-current-row': true,
	180	+ ...(get(this.schema, 'table.props') \|\| {}),
	181	+ },
	182	+ ...this.schema.table,
	183	+ };
	184	+ },
	185	+ valueKeys() {
	186	+ return this.value.map(item => item[this.valueKey]);
	187	+ },
	188	+ valueTable() {
	189	+ return this.valueFormatter(this.dataSource \|\| []);
	190	+ },
	191	+ },
	192	+ methods: {
	193	+ _rowDisabled(row, index) {
	194	+ if (this.transferDisabled) {
	195	+ return true;
	196	+ }
	197	+ if (this.rowDisabled) {
	198	+ return this.rowDisabled({ row, index });
	199	+ }
	200	+ return false;
	201	+ },
	202	+ valueFormatter(value) {
	203	+ return value.filter(item => !this.valueKeys.includes(item[this.valueKey]));
	204	+ },
	205	+ onChoose(row) {
	206	+ this.$emit('input', [...this.value, row]);
	207	+ },
	208	+ onRemove(row, index) {
	209	+ const newValue = cloneDeep(this.value \|\| []);
	210	+ newValue.splice(index, 1);
	211	+ this.$emit('input', newValue);
	212	+ },
	213	+ onInput(value) {
	214	+ this.$emit('input', value);
	215	+ },
	216	+ searchMethod(e) {
	217	+ if (this.apiSearch) {
	218	+ return this.apiSearch(e).then(result => {
	219	+ this.dataSource = result[0] \|\| [];
	220	+ return [this.valueTable, result[1]];
	221	+ });
	222	+ }
	223	+ return new Promise(resolve => {
	224	+ resolve([]);
	225	+ });
	226	+ },
	227	+ },
	228	+};
	229	+</script>