面板文档

src/views/haomo/components/panel/HmComplexPanel.vue

@@ -8,8 +8,7 @@
         </div>
         <div :style="hmPanelHeight" :class="hmContentClass">
           <span>{{hmContentText}}</span>
-          <hm-complex-detail :schema="schema['HmUser']" :tableId="userId" :columns="showFields">
-          </hm-complex-detail>
+          <slot></slot>
         </div>
       </el-card>
     </el-col>
@@ -17,19 +16,15 @@
 </template>
 
 <script>
-  import HmComplexDetail from '../details/HmComplexDetail.vue'
-  import schema from '../../schemas/hm_org_schema'
   import _ from 'lodash'
   import request from '@/utils/request'
 
   export default {
-    name: 'HmComplexDetail',
+    name: 'HmComplexPanel',
     // 继承其他组件
     extends: {},
     // 使用其它组件
-    components: {
-      'hm-complex-detail': HmComplexDetail
-    },
+    components: {},
     props: {
       /**
        * 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
@@ -65,39 +60,53 @@
           return true
         }
       },
-      /*
-       * 在详情页需要传入用户的id用来带出用户信息
-       * */
-      userId: {
-        type: String,
-        required: true
-      },
+      /**
+       * 在面板页传入面板标题
+       */
       hmTitle: {
         type: String,
         required: false
       },
+      /**
+       * 在面板页传入标题类名
+       */
       hmTitleClass: {
         type: String,
         required: false
       },
+      /**
+       * 在面板页传入内容类名
+       */
       hmContentClass: {
         type: String,
         required: false
       },
+      /**
+       * 在面板页传入内容
+       */
       hmContentText: {
         type: String,
         required: false
       },
+      /**
+       * 在面板页传入面板样式
+       */
       hmStyle: {
         type: Object,
         required: false
       },
+      /**
+       * 在面板页传入面板内容高度
+       */
       hmPanelHeight: {
         type: Object,
         required: false
       },
+      /**
+       * 在面板页传入面板宽度
+       */
       hmCollapse: {
-        type: null,
+        type: String,
         required: false
       },
       showFields: {
@@ -116,11 +125,7 @@
     },
     filters: {
     },
-    created() {
-      this.schema = schema
-      this.getList()
-      this.init()
-    },
+    created() {},
     methods: {
       validate() {
         const self = this
@@ -189,8 +194,8 @@
   }
 </script>
 <style scoped>
-  .title{
-    text-align: center;
+  .weight{
+    font-weight: 700;
   }
   .center{
     text-align: center;

src/views/haomo/components/panel/index.vue

 <template>
   <div>
-    <hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="titleBak" :hmContentClass="hmContentClass" :showFields="showFields"
+    <hm-complex-panel :schema="schema['HmUser']" :hmTitle="titleBak" :hmContentClass="hmContentClass"
                       :hmStyle="styleBak" :hmPanelHeight="panelHeightBak" :hmCollapse="collapseBak">
     </hm-complex-panel>
-    <hm-complex-panel :schema="schema['HmUser']" :userId="userId2" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass" :showFields="showFields2"
+    <hm-complex-panel :schema="schema['HmUser']" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass"
                       :hmContentText="hmContentText" :hmStyle="hmStyle" :hmPanelHeight="hmPanelHeight" :hmCollapse="collapses">
     </hm-complex-panel>
   </div>
@@ -12,6 +12,7 @@
 <script>
   import HmComplexPanel from './HmComplexPanel.vue'
   import schema from '../../schemas/hm_org_schema'
+  import HmComplexDetail from '../details/HmComplexDetail.vue'
 
   export default {
     name: 'HmComplexPanel',
@@ -19,7 +20,8 @@
     extends: {},
     // 使用其它组件
     components: {
-      'hm-complex-panel': HmComplexPanel
+      'hm-complex-panel': HmComplexPanel,
+      'hm-complex-detail': HmComplexDetail
     },
     data() {
       return {

styleguide.config.js

@@ -28,7 +28,8 @@ const sections = [
       return [
         './src/views/haomo/components/tables/HmComplexTable.vue',
         './src/views/haomo/components/forms/HmComplexForm.vue',
-        './src/views/haomo/components/details/HmComplexDetail.vue'
+        './src/views/haomo/components/details/HmComplexDetail.vue',
+        './src/views/haomo/components/panel/HmComplexPanel.vue'
       ]
     }
   },