新增Detail组件，修复Scheme组件设置值BUG

Aaron
1 parent d5eb7584
Showing 9 changed files with 309 additions and 54 deletions Show diff stats
examples/router/routes.js
examples/views/docs/detail.md
examples/views/docs/scheme.md
packages/detail/index.vue
packages/form/index.vue
packages/index.js
packages/scheme/index.vue
packages/search/index.vue
packages/table/index.vue
@@ -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 表单' },
@@ -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
@@ -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>
@@ -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
@@ -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') {
 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 &#39;./tree-select&#39;
 const components = {
   Code,
   Confirm,
+  Detail,
   DistPicker,
   Editor,
   FileUpload,
@@ -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 }) {
@@ -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') {
@@ -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 {
       // 表格数据
	@@ -19,6 +19,12 @@ const _components = [		@@ -19,6 +19,12 @@ const _components = [
19	group: '高级',	19	group: '高级',
20	children: [	20	children: [
21	{	21	{
		22	+ path: 'detail',
		23	+ name: 'detail',
		24	+ meta: { title: 'Detail 详情' },
		25	+ component: () => import('@/views/docs/detail.md'),
		26	+ },
		27	+ {
22	path: 'form',	28	path: 'form',
23	name: 'form',	29	name: 'form',
24	meta: { title: 'Form 表单' },	30	meta: { title: 'Form 表单' },
	@@ -0,0 +1,52 @@		@@ -0,0 +1,52 @@
		1	+# Detail 详情
		2	+
		3	+将Form组件的值展示位详情
		4	+
		5	+## 基础用法
		6	+
		7	+配置项list将无视配置的type，统一渲染为label
		8	+
		9	+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为el-form-item的子组件
		10	+
		11	+```html
		12	+<template>
		13	+ <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
		14	+</template>
		15	+
		16	+<script>
		17	+export default {
		18	+ data() {
		19	+ return {
		20	+ detailList: [
		21	+ { type: 'el-input', key: 'name', label: '名称' },
		22	+ { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
		23	+ { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
		24	+ { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
		25	+ ],
		26	+ detailModel: {
		27	+ name: '老A',
		28	+ address: 'Any where',
		29	+ postcode: 123456,
		30	+ number: 'N栋N-N'
		31	+ }
		32	+ }
		33	+ },
		34	+}
		35	+</script>
		36	+```
		37	+
		38	+:::
		39	+
		40	+## Attribute 属性
		41	+
		42	+参数\|说明\|类型\|可选值\|默认值
		43	+-\|-\|-\|-\|-
		44	+value / v-model \| 绑定值 \| Object \| - \| -
		45	+list \| 表单项配置列表 \| Array \| - \| []
		46	+
		47	+## List 表单项配置列表
		48	+
		49	+参数\|说明\|类型\|可选值\|默认值
		50	+-\|-\|-\|-\|-
		51	+key \| 参数名 \| String \| - \| -
		52	+label \| 参数标签 \| String \| - \| -
0	\ No newline at end of file	53	\ No newline at end of file
	@@ -0,0 +1,164 @@		@@ -0,0 +1,164 @@
		1	+<style>
		2	+.eagle-detail {
		3	+ padding: 0px;
		4	+}
		5	+.eagle-detail__group-title {
		6	+ font-weight: bold;
		7	+ padding: 15px 5px;
		8	+ border-bottom: 1px solid #d9d9d9;
		9	+ margin-bottom: 30px;
		10	+}
		11	+.eagle-detail__group-icon {
		12	+ padding-right: 10px;
		13	+}
		14	+.eagle-detail__group-content {
		15	+ margin: 15px 0px;
		16	+}
		17	+</style>
		18	+
		19	+<template>
		20	+ <el-form class="eagle-detail" :model="model" v-bind="detailProps">
		21	+ <el-row :gutter="15">
		22	+ <template v-for="(data, index) in listOption.dataList">
		23	+ <template v-if="listOption.isGroup">
		24	+ <slot v-if="$scopedSlots[data.key] \|\| $slots[data.key]" :name="data.key" v-bind="data"></slot>
		25	+ <el-col v-else class="eagle-detail__group-title" :span="24" :key="data.key">
		26	+ <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-detail__group-icon`"></i>
		27	+ <span>{{ data.label }}</span>
		28	+ </el-col>
		29	+ </template>
		30	+ <el-row :class="{ 'eagle-detail__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
		31	+ <template v-for="(item, index) in data.list">
		32	+ <el-col :key="index + 'data'" :span="!item.span ? span : item.span">
		33	+ <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth \|\| '0px'" :prop="item.key">
		34	+ <slot v-if="$scopedSlots[`item-${item.key}`] \|\| $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
		35	+ <label v-else><b>{{ model[item.key] }}</b></label>
		36	+ </el-form-item>
		37	+ </el-col>
		38	+ </template>
		39	+ </el-row>
		40	+ </template>
		41	+ </el-row>
		42	+ </el-form>
		43	+</template>
		44	+
		45	+<script>
		46	+export default {
		47	+ name: 'Detail',
		48	+ props: {
		49	+ // 用于实例化本组件绑定v-model的值
		50	+ value: {
		51	+ type: Object,
		52	+ default: () => {
		53	+ return {};
		54	+ }
		55	+ },
		56	+ // 配置列表
		57	+ list: {
		58	+ type: Array,
		59	+ required: true
		60	+ },
		61	+ // 表单参数
		62	+ detailProps: {
		63	+ type: Object,
		64	+ default() {
		65	+ return {
		66	+ size: 'small',
		67	+ 'label-width': '70px'
		68	+ }
		69	+ }
		70	+ },
		71	+ // 表单项占位
		72	+ span: {
		73	+ type: Number,
		74	+ default: 8
		75	+ }
		76	+ },
		77	+ data() {
		78	+ return {
		79	+ // 编辑器表单模型
		80	+ model: {}
		81	+ };
		82	+ },
		83	+ created() {
		84	+ // 初始化表单模型
		85	+ this.initModel(this.list);
		86	+ },
		87	+ mounted() {
		88	+ this.setModelValue(this.value);
		89	+ },
		90	+ computed: {
		91	+ // 配置列表键值对形式
		92	+ listKeySet() {
		93	+ let result = {};
		94	+ this.list.forEach(item => {
		95	+ result[item.key] = item;
		96	+ });
		97	+ return result;
		98	+ },
		99	+ // 配置列表解析为渲染配置项
		100	+ listOption() {
		101	+ let groupSet = {};
		102	+ this.list.forEach(data => {
		103	+ if (data.group) {
		104	+ if (typeof data.group === 'object') {
		105	+ if (!groupSet[`group-${data.group.key}`]) {
		106	+ groupSet[`group-${data.group.key}`] = {
		107	+ icon: data.group.icon,
		108	+ label: data.group.label,
		109	+ list: []
		110	+ };
		111	+ }
		112	+ groupSet[`group-${data.group.key}`].list.push(data);
		113	+ } else if (typeof data.group === 'string') {
		114	+ if (!groupSet[data.group]) {
		115	+ groupSet[data.group] = {
		116	+ label: data.group,
		117	+ list: []
		118	+ };
		119	+ }
		120	+ groupSet[data.group].list.push(data);
		121	+ }
		122	+ } else {
		123	+ if (!groupSet['group-default']) {
		124	+ groupSet['group-default'] = {
		125	+ label: '基本信息',
		126	+ list: []
		127	+ };
		128	+ }
		129	+ groupSet['group-default'].list.push(data);
		130	+ }
		131	+ });
		132	+ const isGroup = Object.keys(groupSet).length > 1;
		133	+ const dataList = Object.keys(groupSet).map(key => {
		134	+ return { key, ...groupSet[key] };
		135	+ })
		136	+ return { isGroup, dataList };
		137	+ }
		138	+ },
		139	+ watch: {
		140	+ // 组件外部v-model值更新后同步刷新model
		141	+ value(val) {
		142	+ this.setModelValue(val);
		143	+ },
		144	+ // 配置列表有改动时初始化表单模型
		145	+ list(value) {
		146	+ this.initModel(value);
		147	+ },
		148	+ },
		149	+ methods: {
		150	+ // 设置表单值
		151	+ setModelValue(value) {
		152	+ Object.keys(this.model).forEach(key => {
		153	+ this.model[key] = value ? value[key] : undefined;
		154	+ });
		155	+ },
		156	+ // 初始化表单模型
		157	+ initModel(list) {
		158	+ list.forEach(item => {
		159	+ this.$set(this.model, item.key, item.default \|\| undefined)
		160	+ });
		161	+ },
		162	+ }
		163	+};
		164	+</script>
0	\ No newline at end of file	165	\ No newline at end of file