面板组件

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

 <template>
   <el-row type="flex">
-    <el-col :span="24" class="detail-content" style="margin:0 50px;">
+    <el-col :span="hmCollapse" class="detail-content" style="margin:0 auto">
       <h2 class="title">面板页面</h2>
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>这是面板Demo</span>
+      <el-card class="box-card" :style="hmStyle">
+        <div slot="header" class="clearfix" :class="hmTitleClass">
+          <span>{{hmTitle}}</span>
         </div>
-        <div style="height:100px;">
-          <el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">
-            <el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">
-              <div>{{detail[column.codeCamel]}}</div>
-            </el-form-item>
-          </el-form>
+        <div :style="hmPanelHeight" :class="hmContentClass">
+          <span>{{hmContentText}}</span>
+          <!--<el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">-->
+            <!--<el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">-->
+              <!--<div>{{detail[column.codeCamel]}}</div>-->
+            <!--</el-form-item>-->
+          <!--</el-form>-->
         </div>
       </el-card>
     </el-col>
@@ -69,6 +70,34 @@
       userId: {
         type: null,
         required: true
+      },
+      hmTitle: {
+        type: null,
+        required: false
+      },
+      hmTitleClass: {
+        type: null,
+        required: false
+      },
+      hmContentClass: {
+        type: null,
+        required: false
+      },
+      hmContentText: {
+        type: null,
+        required: false
+      },
+      hmStyle: {
+        type: Object,
+        required: false
+      },
+      hmPanelHeight: {
+        type: Object,
+        required: false
+      },
+      hmCollapse: {
+        type: null,
+        required: false
       }
     },
     data() {
@@ -157,4 +186,7 @@
   .title{
     text-align: center;
   }
+  .center{
+    text-align: center;
+  }
 </style>

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

 <template>
   <div>
-    <hm-complex-panel :schema="schema['HmUser']" :userId="userId">
+    <hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass"
+                      :hmContentText="hmContentText" :hmStyle="hmStyle" :hmPanelHeight="hmPanelHeight" :hmCollapse="collapses">
     </hm-complex-panel>
-    <hm-complex-panel :schema="schema['HmUser']" :userId="userId" :columns="showUserColumns">
+    <hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="titleBak" :hmContentClass="hmContentClass" :showFields="showFields"
+                      :hmContentText="hmContentTextBak" :hmStyle="styleBak" :hmPanelHeight="panelHeightBak" :hmCollapse="collapseBak">
     </hm-complex-panel>
   </div>
 </template>
@@ -21,7 +23,7 @@
     },
     data() {
       return {
-        showUserColumns: ['mobile', 'loginid']
+        showFields: ['username', 'loginid', 'password', 'mobile', 'email']
       }
     },
     computed: {
@@ -31,6 +33,31 @@
     created() {
       this.schema = schema
       this.userId = '0e26566e953449a7a7500c34be39fd26'
+      this.hmTitle = '面版名称'
+      this.hmTitleClass = 'center'
+      this.hmContentClass = 'center'
+      this.hmContentText = '面板文字'
+      this.hmStyle = {
+        width: '50%',
+        background: '#42b983',
+        margin: '0 auto'
+      }
+      this.hmPanelHeight = {
+        height: '100px'
+      }
+      this.collapses = 12
+      this.showFields = ['username', 'loginid', 'password', 'mobile', 'email']
+      this.titleBak = '测试面板'
+      this.hmContentTextBak = '我测试一下'
+      this.styleBak = {
+        width: '100%',
+        background: '#f56c6c',
+        marginBottom: '20px'
+      }
+      this.panelHeightBak = {
+        height: '200px'
+      }
+      this.collapseBak = 22
     },
     methods: {}
   }