From ddaaa9f333720f599d4b601a75a5c892f18c07d1 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Tue, 27 Aug 2019 18:04:27 +0800
Subject: [PATCH] 完善Detail文档

---
 examples/styles/markdown.scss           |  1 +
 examples/views/docs/component/detail.md | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------
 packages/form/index.vue                 |  2 +-
 packages/search/index.vue               |  2 +-
 4 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/examples/styles/markdown.scss b/examples/styles/markdown.scss
index 11fe39b..e09e08e 100644
--- a/examples/styles/markdown.scss
+++ b/examples/styles/markdown.scss
@@ -89,6 +89,7 @@
     border-bottom: 1px solid $border;
     text-align: left;
     padding: 10px 15px;
+    max-width: 250px;
   }
   & > table th {
     white-space: nowrap;
diff --git a/examples/views/docs/component/detail.md b/examples/views/docs/component/detail.md
index f93281b..b1e4a72 100644
--- a/examples/views/docs/component/detail.md
+++ b/examples/views/docs/component/detail.md
@@ -10,7 +10,7 @@
 
 ```html
 <template>
-  <eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
+  <eagle-detail v-model="model" :list="list" style="width: 800px;"></eagle-detail>
 </template>
 
 <script>
@@ -45,7 +45,7 @@ export default {
 
 将需要展示的数据分组显示
 
-::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
+::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组，group可以是一个Object，用于快速配置一些预置的效果
 
 ```html
 <template>
@@ -55,6 +55,7 @@ export default {
 <script>
 export default {
   data() {
+    const partnerGroup = { key: 'partner', icon: 'star-on', label: '附加信息' }
     return {
       list: [
         { key: 'name', label: '姓名' },
@@ -62,7 +63,7 @@ export default {
         { key: 'political', label: '政治面貌', group: '工作信息' },
         { key: 'troop', label: '部队番号', group: '工作信息' },
         { key: 'position', label: '职务', group: '工作信息' },
-        { key: 'partner', label: '搭档', group: '工作信息' },
+        { key: 'partner', label: '搭档', group: partnerGroup },
       ],
       model: {
         name: '李云龙',
@@ -82,19 +83,21 @@ export default {
 
 ## 自定义内容
 
-基本的数据展示并不能满足复杂页面展示需求，因此可以通过**具名插槽**的方式替换对应的展示位
+基本的数据展示并不能满足复杂页面展示需求，因此可以通过**列表项具名插槽**的方式替换对应的展示位
 
-::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
+::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为`item-key`，返回值有model、value及对应配置项所有参数
 
 ```html
 <template>
   <eagle-detail :value="model" :list="list" style="width: 800px;">
-    <!-- <template #item-position="{ value }">
+    <template #item-position="{ value }">
       <el-tag type="primary" size="small">{{ value }}</el-tag>
-    </template> -->
-    <el-tag slot="item-position" slot-scope="{ value }" type="primary" size="small">{{ value }}</el-tag>
+    </template>
     <template #item-partner="{ model }">
-      <el-tag type="danger" size="small">{{ model ? model.partner : '-' }}</el-tag>
+      <el-tag type="danger" size="small">{{ model.partner }}</el-tag>
+    </template>
+    <template #item-picture="{ value }">
+      <img :src="value" height="100" />
     </template>
   </eagle-detail>
 </template>
@@ -102,6 +105,7 @@ export default {
 <script>
 export default {
   data() {
+    
     return {
       list: [
         { key: 'name', label: '姓名' },
@@ -110,6 +114,7 @@ export default {
         { key: 'troop', label: '部队番号', group: '工作信息' },
         { key: 'position', label: '职务', group: '工作信息' },
         { key: 'partner', label: '搭档', group: '工作信息' },
+        { key: 'picture', label: '图片', group: '证明材料' },
       ],
       model: {
         name: '李云龙',
@@ -118,6 +123,7 @@ export default {
         troop: '独立团',
         position: '团长',
         partner: '赵刚',
+        picture: '/img/logo.svg',
       }
     }
   },
@@ -127,7 +133,59 @@ export default {
 
 :::
 
----
+## 自定义表头
+
+在特定的业务场景下，分组标题需要展示图标或旁边需要放置按钮，此时便可以使用**表头具名插槽**替换表头内容
+
+> 注意：自定义表头只支持Object类型的group配置
+
+::: snippet 在组件内部通过具名插槽的方式，替换对应内容，表头具名插槽格式为`group-key`，返回值包括key及group配置内容
+
+```html
+<template>
+  <eagle-detail :value="model" :list="list" style="width: 800px;">
+    <template #group-work="{ label }">
+      <div style="padding: 15px 5px;border-bottom: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
+        <span>{{ label }}
+          <el-tooltip class="item" effect="light" content="保密条例" placement="top">
+            <template #content><span style="color: red;padding-right: 5px;">*</span>保密条例</template>
+            <i class="el-icon-info"></i>
+          </el-tooltip>
+        </span>
+        <el-button size="mini" type="primary">下载</el-button>
+      </div>
+    </template>
+  </eagle-detail>
+</template>
+
+<script>
+export default {
+  data() {
+    const groupWork = { key: 'work', label: '工作信息' };
+    return {
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄' },
+        { key: 'political', label: '政治面貌', group: groupWork },
+        { key: 'troop', label: '部队番号', group: groupWork },
+        { key: 'position', label: '职务', group: groupWork },
+        { key: 'partner', label: '搭档', group: groupWork },
+      ],
+      model: {
+        name: '李云龙',
+        age: 18,
+        political: '中共党员',
+        troop: '独立团',
+        position: '团长',
+        partner: '赵刚',
+      }
+    }
+  },
+}
+</script>
+```
+
+:::
 
 ## API
 
@@ -139,6 +197,8 @@ value / v-model |	绑定值 | Object | - | {}
 list | 表单项配置列表 | Array | - | []
 formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
 span | 数据项占位 | Number | 0 - 24 | 8
+formatter | 格式化 | Function | - | -
+agentKey | 代理key，用另一个key的值表示当前内容 | String | - | -
 
 ## List 表单项配置列表
 
@@ -146,4 +206,5 @@ span | 数据项占位 | Number | 0 - 24 | 8
 -|-|-|-|-
 key | 参数名 | String | - | -
 label | 参数标签 | String | - | -
-span | 数据项占位 | Number | 0 - 24 | -
\ No newline at end of file
+span | 数据项占位 | Number | 0 - 24 | -
+group | 数据项分组，为**Object**类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | -
diff --git a/packages/form/index.vue b/packages/form/index.vue
index a24d197..41dadb9 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -33,7 +33,7 @@
           <template v-for="(item, index) in data.list">
             <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? span : item.span">
               <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="bindItemRules(item)">
-                <slot v-if="$scopedSlots[`label-${item.key}`] || $slots[`label-${item.key}`]" :name="`label-${item.key}`" slot="label" :model="model" v-bind="item"></slot>
+                <slot v-if="$scopedSlots[`label-${item.key}`] || $slots[`label-${item.key}`]" :name="`label-${item.key}`" slot="label" :model="model" :value="model[item.key]" v-bind="item"></slot>
                 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
                   <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
                   <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component>
diff --git a/packages/search/index.vue b/packages/search/index.vue
index ced65ce..3445a90 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -14,7 +14,7 @@
         <el-col v-if="bindItemVisible(item.visible)" v-show="!(collapse && index > visibleColNum - 2)" :key="index + 'data'" :span="!item.span ? span : item.span">
           <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
             <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
-              <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" :model="model" v-bind="item"></slot>
+              <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" :model="model" :value="model[item.key]" v-bind="item"></slot>
               <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component>
             </el-tooltip>
           </el-form-item>
--
libgit2 0.21.0