From 303ef68882af7d8e6b235acc89b0447735476d57 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Tue, 16 Mar 2021 12:01:00 +0800
Subject: [PATCH] feat: 优化SchemaTransfer

---
 .env                                             |  2 +-
 examples/views/docs/component/schema-transfer.md | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 packages/schema-transfer/index.vue               | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------
 3 files changed, 144 insertions(+), 27 deletions(-)

diff --git a/.env b/.env
index c6ad451..d7d0d37 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
 # 版本号
-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
diff --git a/examples/views/docs/component/schema-transfer.md b/examples/views/docs/component/schema-transfer.md
index 606a002..ee3b9ac 100644
--- a/examples/views/docs/component/schema-transfer.md
+++ b/examples/views/docs/component/schema-transfer.md
@@ -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>
diff --git a/packages/schema-transfer/index.vue b/packages/schema-transfer/index.vue
index 4dc2a7d..ea32141 100644
--- a/packages/schema-transfer/index.vue
+++ b/packages/schema-transfer/index.vue
@@ -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 || []);
--
libgit2 0.21.0