feat: 优化SchemaTransfer

刘汉宸
1 parent bffb3d99
Showing 3 changed files with 144 additions and 27 deletions Show diff stats
.env
examples/views/docs/component/schema-transfer.md
packages/schema-transfer/index.vue
 # 版本号
-VUE_APP_VERSION = '2.0.0.alpha.9'
+VUE_APP_VERSION = '2.0.0.alpha.12'
 # 自定义变量 Cookie失效时间 1天
 VUE_APP_NAME = 'Zee'
 \ No newline at end of file
@@ -100,11 +100,86 @@ export default {
 可以单独配置已选中的表格
-::: snippet `schema`中设置`selected`，格式与`z-schema-table`相同。
+::: snippet `schema`中设置`selected`，配置与`SchemaTable`相同。其中已选中项的表格字段可以与数据源不同，设置`choose-formatter`改变选择的数据格式。
 ```html
 <template>
-  <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small"></z-schema-transfer>
+  <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small" :choose-formatter="chooseFormatter"></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: 'gender', minWidth: 120, editable: false },
+            { label: '民族', prop: 'ethnicity', minWidth: 120, editalways: true },
+          ]
+        }
+      },
+    }
+  },
+  methods: {
+    chooseFormatter(row) {
+      return { id: row.id, name: row.name, gender: '男', ethnicity: '汉'  };
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 自定义插槽
+
+同其他组件一样，可以对部分内容设置插槽
+
+::: snippet 左侧插槽格式默认与`SchemaPage`组件相同，已选中表格的插槽以`selected-`开头
+
+```html
+<template>
+  <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small">
+    <template #table-cell-name="{ value, size }">
+      <el-tag :size="size">{{ value }}</el-tag>
+    </template>
+    <template #operation="{ choose }">
+      <el-table-column label="新操作" width="80" align="center" fixed="right">
+        <template #default="{ row, $index }">
+          <div class="z-schema-page__table-operation">
+            <el-button size="mini" @click="choose(row)">选中</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </template>
+    <template #selected-cell-name="{ value, size }">
+      <el-tag :size="size" type="success">{{ value }}</el-tag>
+    </template>
+    <template #selected-operation="{ remove }">
+      <el-table-column label="新操作" width="80" align="center" fixed="right">
+        <template #default="{ row, $index }">
+          <div class="z-schema-page__table-operation">
+            <el-button size="mini" @click="remove(row)">移除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </template>
+  </z-schema-transfer>
 </template>
 <script>
@@ -151,15 +226,15 @@ export default {
 <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 }">
+    <template #default="{ choose, deselect }">
       <div>
-        <el-button size="mini" v-for="item in valueFormatter(source)" @click="onChoose(item)">{{ item.name }}</el-button>
+        <el-button size="mini" v-for="item in deselect(source)" @click="choose(item)">{{ item.name }}</el-button>
       </div>
     </template>
     <template #title-right>已选择 <i class="el-icon-check"></i></template>
-    <template #selected="{ onRemove }">
+    <template #selected="{ remove }">
       <div>
-        <el-button size="mini" v-for="item in model" @click="onRemove(item)">{{ item.name }}</el-button>
+        <el-button size="mini" v-for="item in model" @click="remove(item)">{{ item.name }}</el-button>
       </div>
     </template>
   </z-schema-transfer>
@@ -29,11 +29,11 @@
     <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>
+          <slot name="title-left" v-bind="_slotScope">{{ titles[0] }}</slot>
         </div>
       </div>
       <div class="z-schema-transfer__content">
-        <slot :onChoose="onChoose" :valueFormatter="valueFormatter">
+        <slot v-bind="_slotScope">
           <z-schema-page
             :size="transferSize"
             :value-filter="valueFilter"
@@ -43,14 +43,19 @@
             @update:value-filter="e => $emit('update:value-filter', e)"
             :auto="auto"
           >
+            <template v-for="item in getSlotKeys('table-')" #[item.name]="slotScope">
+              <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+            </template>
             <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>
+              <slot name="operation" v-bind="_slotScope">
+                <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>
+              </slot>
             </template>
           </z-schema-page>
         </slot>
@@ -63,15 +68,20 @@
         </div>
       </div>
       <div class="z-schema-transfer__content">
-        <slot name="selected" :onRemove="onRemove">
+        <slot name="selected" v-bind="_slotScope">
           <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>
+            <template v-for="item in getSlotKeys('selected-', true)" #[item.name]="slotScope">
+              <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+            </template>
+            <slot name="selected-operation" v-bind="_slotScope">
+              <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>
+            </slot>
           </z-schema-table>
         </slot>
       </div>
@@ -114,6 +124,7 @@ export default {
     auto: Boolean,
     rowDisabled: Function,
     apiSearch: Function,
+    chooseFormatter: Function,
     valueFilter: {
       type: Object,
       default() {
@@ -186,10 +197,37 @@ export default {
       return this.value.map(item => item[this.valueKey]);
     },
     valueTable() {
-      return this.valueFormatter(this.dataSource || []);
+      return this.deselect(this.dataSource || []);
+    },
+    slotKeys() {
+      return Object.keys(this.$scopedSlots);
+    },
+    _slotScope() {
+      const methods = ['deselect'];
+      const defaultScope = {
+        size: this.transferSize,
+        disabled: this.transferDisabled,
+        choose: this.onChoose,
+        remove: this.onRemove,
+      };
+      return [...methods].reduce((result, current) => {
+        result[current] = this[current];
+        return result;
+      }, defaultScope);
     },
   },
   methods: {
+    getSlotKeys(prefix, fixed) {
+      return this.slotKeys.reduce((result, current) => {
+        if (current.indexOf(prefix) === 0) {
+          result.push({
+            slot: current,
+            name: fixed ? current.substring(prefix.length) : current,
+          });
+        }
+        return result;
+      }, []);
+    },
     _rowDisabled(row, index) {
       if (this.transferDisabled) {
         return true;
@@ -199,11 +237,15 @@ export default {
       }
       return false;
     },
-    valueFormatter(value) {
+    deselect(value) {
       return value.filter(item => !this.valueKeys.includes(item[this.valueKey]));
     },
     onChoose(row) {
-      this.$emit('input', [...this.value, row]);
+      let newRow = cloneDeep(row);
+      if (this.chooseFormatter) {
+        newRow = this.chooseFormatter(newRow);
+      }
+      this.$emit('input', [...this.value, newRow]);
     },
     onRemove(row, index) {
       const newValue = cloneDeep(this.value || []);
1	# 版本号	1	# 版本号
2	-VUE_APP_VERSION = '2.0.0.alpha.9'	2	+VUE_APP_VERSION = '2.0.0.alpha.12'
3	# 自定义变量 Cookie失效时间 1天	3	# 自定义变量 Cookie失效时间 1天
4	VUE_APP_NAME = 'Zee'	4	VUE_APP_NAME = 'Zee'
5	\ No newline at end of file	5	\ No newline at end of file
	@@ -100,11 +100,86 @@ export default {		@@ -100,11 +100,86 @@ export default {
100		100
101	可以单独配置已选中的表格	101	可以单独配置已选中的表格
102		102
103	-::: snippet `schema`中设置`selected`，格式与`z-schema-table`相同。	103	+::: snippet `schema`中设置`selected`，配置与`SchemaTable`相同。其中已选中项的表格字段可以与数据源不同，设置`choose-formatter`改变选择的数据格式。
104		104
105	```html	105	```html
106	<template>	106	<template>
107	- <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small"></z-schema-transfer>	107	+ <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small" :choose-formatter="chooseFormatter"></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: 'gender', minWidth: 120, editable: false },
		132	+ { label: '民族', prop: 'ethnicity', minWidth: 120, editalways: true },
		133	+ ]
		134	+ }
		135	+ },
		136	+ }
		137	+ },
		138	+ methods: {
		139	+ chooseFormatter(row) {
		140	+ return { id: row.id, name: row.name, gender: '男', ethnicity: '汉' };
		141	+ }
		142	+ }
		143	+}
		144	+</script>
		145	+```
		146	+
		147	+:::
		148	+
		149	+## 自定义插槽
		150	+
		151	+同其他组件一样，可以对部分内容设置插槽
		152	+
		153	+::: snippet 左侧插槽格式默认与`SchemaPage`组件相同，已选中表格的插槽以`selected-`开头
		154	+
		155	+```html
		156	+<template>
		157	+ <z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small">
		158	+ <template #table-cell-name="{ value, size }">
		159	+ <el-tag :size="size">{{ value }}</el-tag>
		160	+ </template>
		161	+ <template #operation="{ choose }">
		162	+ <el-table-column label="新操作" width="80" align="center" fixed="right">
		163	+ <template #default="{ row, $index }">
		164	+ <div class="z-schema-page__table-operation">
		165	+ <el-button size="mini" @click="choose(row)">选中</el-button>
		166	+ </div>
		167	+ </template>
		168	+ </el-table-column>
		169	+ </template>
		170	+ <template #selected-cell-name="{ value, size }">
		171	+ <el-tag :size="size" type="success">{{ value }}</el-tag>
		172	+ </template>
		173	+ <template #selected-operation="{ remove }">
		174	+ <el-table-column label="新操作" width="80" align="center" fixed="right">
		175	+ <template #default="{ row, $index }">
		176	+ <div class="z-schema-page__table-operation">
		177	+ <el-button size="mini" @click="remove(row)">移除</el-button>
		178	+ </div>
		179	+ </template>
		180	+ </el-table-column>
		181	+ </template>
		182	+ </z-schema-transfer>
108	</template>	183	</template>
109		184
110	<script>	185	<script>
	@@ -151,15 +226,15 @@ export default {		@@ -151,15 +226,15 @@ export default {
151	<template>	226	<template>
152	<z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small">	227	<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>	228	<template #title-left>未选择 <i class="el-icon-minus"></i></template>
154	- <template #default="{ onChoose, valueFormatter }">	229	+ <template #default="{ choose, deselect }">
155	<div>	230	<div>
156	- <el-button size="mini" v-for="item in valueFormatter(source)" @click="onChoose(item)">{{ item.name }}</el-button>	231	+ <el-button size="mini" v-for="item in deselect(source)" @click="choose(item)">{{ item.name }}</el-button>
157	</div>	232	</div>
158	</template>	233	</template>
159	<template #title-right>已选择 <i class="el-icon-check"></i></template>	234	<template #title-right>已选择 <i class="el-icon-check"></i></template>
160	- <template #selected="{ onRemove }">	235	+ <template #selected="{ remove }">
161	<div>	236	<div>
162	- <el-button size="mini" v-for="item in model" @click="onRemove(item)">{{ item.name }}</el-button>	237	+ <el-button size="mini" v-for="item in model" @click="remove(item)">{{ item.name }}</el-button>
163	</div>	238	</div>
164	</template>	239	</template>
165	</z-schema-transfer>	240	</z-schema-transfer>