From 096f9b03d322b3ef83bb140a7259d051ea693c5a Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Fri, 26 Jul 2019 10:49:48 +0800
Subject: [PATCH] 新增Detail组件，修复Scheme组件设置值BUG

---
 examples/router/routes.js     |   6 ++++++
 examples/views/docs/detail.md |  52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/scheme.md |   7 +++++--
 packages/detail/index.vue     | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/form/index.vue       |  52 +++++++++++++++++++++++++++++++---------------------
 packages/index.js             |   2 ++
 packages/scheme/index.vue     |  47 +++++++++++++++++++++++++++++------------------
 packages/search/index.vue     |  21 ++++++++++++++-------
 packages/table/index.vue      |  12 ++++++------
 9 files changed, 309 insertions(+), 54 deletions(-)
 create mode 100644 examples/views/docs/detail.md
 create mode 100644 packages/detail/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index e9dea98..8a28080 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -19,6 +19,12 @@ const _components = [
     group: '高级',
     children: [
       {
+        path: 'detail',
+        name: 'detail',
+        meta: { title: 'Detail 详情' },
+        component: () => import('@/views/docs/detail.md'),
+      },
+      {
         path: 'form',
         name: 'form',
         meta: { title: 'Form 表单' },
diff --git a/examples/views/docs/detail.md b/examples/views/docs/detail.md
new file mode 100644
index 0000000..ce646d5
--- /dev/null
+++ b/examples/views/docs/detail.md
@@ -0,0 +1,52 @@
+# Detail 详情
+
+将Form组件的值展示位详情
+
+## 基础用法
+
+配置项list将无视配置的type，统一渲染为label
+
+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件
+
+```html
+<template>
+  <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detailList: [
+        { type: 'el-input', key: 'name', label: '名称' },
+        { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
+        { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
+        { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
+      ],
+      detailModel: {
+        name: '老A',
+        address: 'Any where',
+        postcode: 123456,
+        number: 'N栋N-N'
+      }
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value / v-model |	绑定值 | Object | - | -
+list | 表单项配置列表 | Array | - | []
+
+## List 表单项配置列表
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+key | 参数名 | String | - | -
+label | 参数标签 | String | - | -
\ No newline at end of file
diff --git a/examples/views/docs/scheme.md b/examples/views/docs/scheme.md
index d5b6c62..42c1de6 100644
--- a/examples/views/docs/scheme.md
+++ b/examples/views/docs/scheme.md
@@ -29,10 +29,13 @@ Scheme是一个数据驱动的解决方案，通过既定的业务配置参数�
     <template #form-item-status="{ model }">
       <el-input-number v-model="model.status"></el-input-number>
     </template>
-    <template #dialog-view="{ row }">
+    <template #view-item-code="{ model }">
+      <el-input disabled :value="model.code"></el-input>
+    </template>
+    <!-- <template #dialog-view="{ row }">
       <div>这是一个自定义弹出框内容</div>
       <div>{{ row }}</div>
-    </template>
+    </template> -->
     <template #dialog-status>
       <div>这是Status的内容</div>
     </template>
diff --git a/packages/detail/index.vue b/packages/detail/index.vue
new file mode 100644
index 0000000..0f01a3d
--- /dev/null
+++ b/packages/detail/index.vue
@@ -0,0 +1,164 @@
+<style>
+.eagle-detail {
+  padding: 0px;
+}
+.eagle-detail__group-title {
+  font-weight: bold;
+  padding: 15px 5px;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 30px;
+}
+.eagle-detail__group-icon {
+  padding-right: 10px;
+}
+.eagle-detail__group-content {
+  margin: 15px 0px;
+}
+</style>
+
+<template>
+  <el-form class="eagle-detail" :model="model" v-bind="detailProps">
+    <el-row :gutter="15">
+      <template v-for="(data, index) in listOption.dataList">
+        <template v-if="listOption.isGroup">
+          <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
+          <el-col v-else class="eagle-detail__group-title" :span="24" :key="data.key">
+            <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-detail__group-icon`"></i>
+            <span>{{ data.label }}</span>
+          </el-col>
+        </template>
+        <el-row :class="{ 'eagle-detail__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
+          <template v-for="(item, index) in data.list">
+            <el-col :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">
+                <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
+                <label v-else><b>{{ model[item.key] }}</b></label>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </template>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  props: {
+    // 用于实例化本组件绑定v-model的值
+    value: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    // 配置列表
+    list: {
+      type: Array,
+      required: true
+    },
+    // 表单参数
+    detailProps: {
+      type: Object,
+      default() {
+        return {
+          size: 'small',
+          'label-width': '70px'
+        }
+      }
+    },
+    // 表单项占位
+    span: {
+      type: Number,
+      default: 8
+    }
+  },
+  data() {
+    return {
+      // 编辑器表单模型
+      model: {}
+    };
+  },
+  created() {
+    // 初始化表单模型
+    this.initModel(this.list);
+  },
+  mounted() {
+    this.setModelValue(this.value);
+  },
+  computed: {
+    // 配置列表键值对形式
+    listKeySet() {
+      let result = {};
+      this.list.forEach(item => {
+        result[item.key] = item;
+      });
+      return result;
+    },
+    // 配置列表解析为渲染配置项
+    listOption() {
+      let groupSet = {};
+      this.list.forEach(data => {
+        if (data.group) {
+          if (typeof data.group === 'object') {
+            if (!groupSet[`group-${data.group.key}`]) {
+              groupSet[`group-${data.group.key}`] = {
+                icon: data.group.icon,
+                label: data.group.label,
+                list: []
+              };
+            }
+            groupSet[`group-${data.group.key}`].list.push(data);
+          } else if (typeof data.group === 'string') {
+            if (!groupSet[data.group]) {
+              groupSet[data.group] = {
+                label: data.group,
+                list: []
+              };
+            }
+            groupSet[data.group].list.push(data);
+          }
+        } else {
+          if (!groupSet['group-default']) {
+            groupSet['group-default'] = {
+              label: '基本信息',
+              list: []
+            };
+          }
+          groupSet['group-default'].list.push(data);
+        }
+      });
+      const isGroup = Object.keys(groupSet).length > 1;
+      const dataList = Object.keys(groupSet).map(key => {
+        return { key, ...groupSet[key] };
+      })
+      return { isGroup, dataList };
+    }
+  },
+  watch: {
+    // 组件外部v-model值更新后同步刷新model
+    value(val) {
+      this.setModelValue(val);
+    },
+    // 配置列表有改动时初始化表单模型
+    list(value) {
+      this.initModel(value);
+    },
+  },
+  methods: {
+    // 设置表单值
+    setModelValue(value) {
+      Object.keys(this.model).forEach(key => {
+        this.model[key] = value ? value[key] : undefined;
+      });
+    },
+    // 初始化表单模型
+    initModel(list) {
+      list.forEach(item => {
+        this.$set(this.model, item.key, item.default || undefined)
+      });
+    },
+  }
+};
+</script>
\ No newline at end of file
diff --git a/packages/form/index.vue b/packages/form/index.vue
index 6867ec8..9c7fd6c 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -101,24 +101,12 @@ export default {
       model: {}
     };
   },
-  watch: {
-    // 组件外部v-model值更新后同步刷新model
-    value(val) {
-      Object.keys(this.model).forEach(key => {
-        this.model[key] = val ? val[key] : undefined;
-      });
-    },
-    // 配置列表有改动时初始化表单模型
-    list(value) {
-      this.initModel(value);
-    },
-    model: {
-      handler(val) {
-        this.$emit("input", val);
-        this.$emit("change", val);
-      },
-      deep: true
-    }
+  created() {
+    // 初始化表单模型
+    this.initModel(this.list);
+  },
+  mounted() {
+    this.setModelValue(this.value);
   },
   computed: {
     // 配置列表键值对形式
@@ -170,11 +158,33 @@ export default {
       return { isGroup, dataList };
     }
   },
-  created() {
-    // 初始化表单模型
-    this.initModel(this.list);
+  watch: {
+    // 组件外部v-model值更新后同步刷新model
+    value(val) {
+      this.setModelValue(val);
+    },
+    // 配置列表有改动时初始化表单模型
+    list(value) {
+      this.initModel(value);
+    },
+    model: {
+      handler(val) {
+        this.$emit("input", val);
+        this.$emit("change", val);
+      },
+      deep: true
+    }
   },
   methods: {
+    // 设置表单值
+    setModelValue(value) {
+      Object.keys(this.model).forEach(key => {
+        this.model[key] = value ? value[key] : undefined;
+      });
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
     // 绑定提示组件参数
     bindItemTip(tip) {
       if (typeof tip === 'string') {
diff --git a/packages/index.js b/packages/index.js
index 3265034..4639c7f 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,5 +1,6 @@
 import Code from './code'
 import Confirm from './confirm'
+import Detail from './detail'
 import DistPicker from './dist-picker'
 import Editor from './editor'
 import FileUpload from './file-upload'
@@ -19,6 +20,7 @@ import TreeSelect from './tree-select'
 const components = {
   Code,
   Confirm,
+  Detail,
   DistPicker,
   Editor,
   FileUpload,
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index 8d7af19..691e9ae 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -109,7 +109,7 @@
       </div>
     </div>
     <el-dialog :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }">
-      <eagle-form v-if="dialogType === 'dialog-form'" :list="_formList" v-model="formModel" :span="formProps.span || 12" :formProps="{ size: 'small', 'label-width': '90px', ...formProps }" @submit="handleSubmit" @cancel="handleCancel">
+      <eagle-form v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" :list="_formList" v-model="formModel" :span="formProps.span || 12" :formProps="{ size: 'small', 'label-width': '90px', ...formProps }" @submit="handleSubmit" @cancel="handleCancel">
         <!-- 表单分组具名插槽 -->
         <template v-for="key in formGroupSlotsKeys">
           <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
@@ -119,9 +119,18 @@
           <slot v-if="$scopedSlots[`form-item-${item.key}`] || $slots[`form-item-${item.key}`]" :name="`form-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
         </template>
       </eagle-form>
-      <template v-else>
-        <slot :name="dialogType" :row="tableCurrentRow"></slot>
-      </template>
+      <eagle-detail v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="_formList">
+        <!-- 表单分组具名插槽 -->
+        <template v-for="key in formGroupSlotsKeys">
+          <slot v-if="$scopedSlots[`view-${key}`] || $slots[`view-${key}`]" :name="`view-${key}`" :slot="key" :model="formModel"></slot>
+        </template>
+        <!-- 表单项具名插槽 -->
+        <template v-for="item in _formList">
+          <slot v-if="$scopedSlots[`view-item-${item.key}`] || $slots[`view-item-${item.key}`]" :name="`view-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
+        </template>
+      </eagle-detail>
+      <!-- 自定义弹出框内容插槽 -->
+      <slot v-else :name="dialogType" :row="tableCurrentRow"></slot>
     </el-dialog>
   </div>
 </template>
@@ -281,6 +290,11 @@ export default {
       this.dialogTitle = '详情';
       this.dialogType = 'dialog-view';
       this.tableCurrentRow = row;
+      this.formModel = {};
+      // 设置表单值
+      Object.keys(row).forEach(key => {
+        this.formModel[key] = row[key];
+      });
       this.showDialog();
     },
     // 新增按钮
@@ -288,6 +302,7 @@ export default {
       this.dialogTitle = '新增';
       this.dialogType = 'dialog-form';
       this.tableCurrentRow = row;
+      this.formModel = {};
       this.showDialog();
     },
     // 编辑按钮
@@ -295,14 +310,12 @@ export default {
       this.dialogTitle = '编辑';
       this.dialogType = 'dialog-form';
       this.tableCurrentRow = row;
-      this.showDialog();
+      this.formModel = {};
       // 设置表单值
-      this.$nextTick(() => {
-        Object.keys(row).forEach(key => {
-          this.formModel[key] = row[key];
-        });
-        this.formModel.test = 'test'
+      Object.keys(row).forEach(key => {
+        this.formModel[key] = row[key];
       });
+      this.showDialog();
     },
     // 删除按钮
     handleDelete(type, scope) {
@@ -343,14 +356,12 @@ export default {
     // 隐藏弹出框
     hideDialog() {
       this.dialogVisible = false;
-      this.$nextTick(() => {
-        this.tableSelection = [];
-        this.tableLoading = false;
-        this.tableCurrentRow = null;
-        this.formModel = {};
-        this.dialogTitle = '';
-        this.dialogType = '';
-      });
+      this.tableSelection = [];
+      this.tableLoading = false;
+      this.tableCurrentRow = null;
+      this.formModel = {};
+      this.dialogTitle = '';
+      this.dialogType = '';
     },
     // 设置弹出框模式
     setDialog({ title, type }) {
diff --git a/packages/search/index.vue b/packages/search/index.vue
index 34b85e4..13ee4c1 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -78,6 +78,13 @@ export default {
       collapse: false,
     };
   },
+  created() {
+    // 初始化表单模型
+    this.initModel(this.list);
+  },
+  mounted() {
+    this.setModelValue(this.value);
+  },
   computed: {
     visibleColNum() {
       return 24 / this.span;
@@ -86,9 +93,7 @@ export default {
   watch: {
     // 组件外部v-model值更新后同步刷新model
     value(val) {
-      Object.keys(this.model).forEach(key => {
-        this.model[key] = val ? val[key] : undefined;
-      });
+      this.setModelValue(val);
     },
     // 配置列表有改动时初始化表单模型
     list(value) {
@@ -102,11 +107,13 @@ export default {
       deep: true
     }
   },
-  created() {
-    // 初始化表单模型
-    this.initModel(this.list);
-  },
   methods: {
+    // 设置表单值
+    setModelValue(value) {
+      Object.keys(this.model).forEach(key => {
+        this.model[key] = value ? value[key] : undefined;
+      });
+    },
     // 绑定提示组件参数
     bindItemTip(tip) {
       if (typeof tip === 'string') {
diff --git a/packages/table/index.vue b/packages/table/index.vue
index 42aa414..f358385 100644
--- a/packages/table/index.vue
+++ b/packages/table/index.vue
@@ -41,12 +41,6 @@ export default {
     // 表格事件
     tableEvents: Object,
   },
-  watch: {
-    // 组件外部v-model值更新后同步刷新model
-    value(val) {
-      this.tableData = val || [];
-    },
-  },
   mounted() {
     this.tableData = this.value || [];
   },
@@ -58,6 +52,12 @@ export default {
       }
     }
   },
+  watch: {
+    // 组件外部v-model值更新后同步刷新model
+    value(val) {
+      this.tableData = val || [];
+    },
+  },
   data() {
     return {
       // 表格数据
--
libgit2 0.21.0