面板具名slot

src/views/haomo/components/panel/HmPanel.md

@@ -17,6 +17,8 @@
         },
         'canCollapse': true
       }">
+      <div slot="title">面板标题</div>
+      <div slot="content">面板内容</div>
     </hm-panel>
 ```
 ### 不可收起的panel
@@ -25,6 +27,8 @@
 <template>
   <div>
     <hm-panel :options="options">
+      <div slot="title">面板标题</div>
+      <div slot="content">面板内容</div>
     </hm-panel>
   </div>
 </template>

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

@@ -4,9 +4,10 @@
       <!--<h2 class="title">面板页面</h2>-->
       <el-card class="box-card" :style="options.panel_style">
         <div slot="header" class="clearfix" :class="options.title_class" @click="toggle()">
-          <span>{{options.title}}</span>
+          <slot name="title"></slot>
         </div>
         <div :style="options.content_height" :class="options.content_class" v-show="collapse">
+          <slot name="content"></slot>
           <slot></slot>
         </div>
       </el-card>
@@ -15,9 +16,6 @@
 </template>
 
 <script>
-  import _ from 'lodash'
-  import request from '@/utils/request'
-
   export default {
     name: 'HmPanel',
     // 继承其他组件
@@ -27,9 +25,8 @@
     props: {
       /**
        * 在面板页传入面板对象
-       * 完整示例为：{ title: '面版名称', panel_class: '面板类名', title_class: '标题类名',
-        content_class: '内容类名', panel_style: '面板样式', panel_span: '面板宽度比例', content_height: '内容高度',
-        canCollapse: '是否可收起'}
+       * 完整示例为：{ panel_class: '面板类名', title_class: '标题类名', content_class: '内容类名', panel_style: '面板样式',
+       * panel_span: '面板宽度比例', content_height: '内容高度', canCollapse: '是否可收起'}
        */
       options: {
         type: Object,
@@ -55,69 +52,6 @@
         } else {
           console.log('不可收起')
         }
-      },
-      validate() {
-        const self = this
-        // this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
-        // 由于vue中不允许通过其他的props来验证当前props，只能在created里进行调用
-        _.each(self.columns, function(item) {
-          if (!item) {
-            return 0
-          }
-
-          if (typeof item !== 'string' && typeof item !== 'object') {
-            console.error(`传入的columns不符合要求，数组元素必须是字符串或对象`)
-          }
-          if (typeof item === 'string' && !_.keyBy(self.schema['columns'], 'code')[item.toUpperCase()]) {
-            console.error(`传入的columns不符合要求，字符串元素[${item}]必须是schema中定义的列[code]`)
-          }
-          if (typeof item === 'object' && !_.keyBy(self.schema['columns'], 'code')[item['code'].toUpperCase()]) {
-            console.error(`传入的columns不符合要求，元素的code属性[${item['code']}]必须是schema中定义的列[code]`)
-          }
-        })
-      },
-      init() {
-        const self = this
-        // 处理要显示的列
-        if (!self.columns || !self.columns.length) {
-          _.each(self.schema['columns'], function(column) {
-            const tmp = JSON.parse(JSON.stringify(column))
-            self.showColumns.push(tmp)
-          })
-        } else {
-          self.showColumns = []
-          // 将字符串对象进行替换处理
-          _.each(self.schema['columns'], function(column) {
-            _.each(self.columns, function(item) {
-              if (column.codeCamel === item) {
-                const tmp = JSON.parse(JSON.stringify(column))
-                self.showColumns.push(tmp)
-              }
-            })
-          })
-        }
-        if (!request.defaults.baseURL) {
-          request.defaults.baseURL = '/org/api'
-        }
-        console.log(request.defaults)
-        console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
-      },
-      getList: function() {
-        const self = this
-        self.listLoading = true
-        const params = {}
-        // 拿到所有的用户
-        request(self.schema.modelUnderscorePlural, {
-          params: params
-        }).then(resp => {
-          self.list = resp.data
-          // 匹配需要展示的用户
-          _.each(self.list, function(item) {
-            if (item.id === self.userId) {
-              self.detail = item
-            }
-          })
-        })
       }
     }
   }

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

 <template>
   <div>
     <hm-panel :options="options">
-      <hm-complex-detail :schema="schema['HmUser']" :tableId="userId">
-      </hm-complex-detail>
+      <div slot="title">面板标题</div>
+      <div slot="content">
+        <hm-complex-detail :schema="schema['HmUser']" :tableId="userId">
+        </hm-complex-detail>
+      </div>
     </hm-panel>
     <hm-panel :options="options2">
-      <hm-complex-form :schema="schema['HmUser']" :fields="showFields">
-      </hm-complex-form>
+      <div slot="title">
+        <hm-complex-form :schema="schema['HmUser']" :fields="showFields"></hm-complex-form>
+      </div>
+      <div slot="content">
+        <hm-complex-form :schema="schema['HmUser']" :fields="showFields"></hm-complex-form>
+      </div>
     </hm-panel>
   </div>
 </template>
@@ -38,7 +45,6 @@
     },
     created() {
       this.options = {
-        title: '面版名称',
         panel_class: 'center',
         title_class: 'weight',
         content_class: 'center',
@@ -54,7 +60,6 @@
         canCollapse: true
       }
       this.options2 = {
-        title: '测试面板',
         panel_class: 'center',
         title_class: 'center',
         content_class: 'center',