tab

package.json

@@ -36,6 +36,7 @@
     "sortablejs": "1.7.0",
     "vue": "2.5.10",
     "vue-awesome": "^2.3.4",
+    "vue-awesome-swiper": "^3.1.2",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-multiselect": "2.0.8",

src/main.js

 import Vue from 'vue'
 import VueQuillEditor from 'vue-quill-editor' // 富文本插件
+import VueAwesomeSwiper from 'vue-awesome-swiper' // vue-awesome-swiper
 
 import 'normalize.css/normalize.css'// A modern alternative to CSS resets
 
@@ -20,6 +21,7 @@ import './mock' // simulation data
 
 import 'quill/dist/quill.core.css' // 富文本CSS
 import 'quill/dist/quill.snow.css' // 富文本CSS
+import 'swiper/dist/css/swiper.css' // swiper css
 
 import * as filters from './filters' // global filters
 
@@ -28,6 +30,7 @@ import Icon from 'vue-awesome/components/Icon'
 Vue.component('icon', Icon)
 
 Vue.use(VueQuillEditor) // 富文本
+Vue.use(VueAwesomeSwiper) // vue-awesome-swiper
 Vue.use(Element, {
   size: 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

src/router/index.js

@@ -118,6 +118,15 @@ export const asyncRouterMap = [
               title: '面板',
               icon: 'table'
             }
+          },
+          {
+            path: 'tab',
+            component: _import('haomo/components/tabs/index'),
+            name: 'haomo-tab',
+            meta: {
+              title: '选项卡',
+              icon: 'table'
+            }
           }
         ]
       },

src/views/haomo/components/forms/HmComplexForm.md

@@ -207,7 +207,7 @@
   <div>
     <hm-complex-form  
                       :tableId="tableId"
-                      :schema="schema['HmUser']" 
+                      :schema="schema['CcHmUser']" 
                       :columns="showUserColumns">
     </hm-complex-form>
   </div>

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

 <template>
   <div>
-    <hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :tableId="tableId">
+    <hm-complex-form :schema="schema['CcHmUser']" :columns="showUserColumns" :tableId="tableId">
     </hm-complex-form>
   </div>
 </template>

src/views/haomo/components/tabs/HmTab.vue

+<template>
+  <!--<el-row :gutter="20" style="margin-top: 20px;padding: 0 20px;">
+    <div width="1000px" height="500px">
+      <el-col :span="12" v-for="column in schema['columns']">
+        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
+          <el-tab-pane :label="column.name" name="first">
+            <ul style="list-style: none;margin: 0;padding: 0;">
+              <li>第1条数据</li>
+              <li>第2条数据</li>
+              <li>第3条数据</li>
+            </ul>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </div>
+  </el-row> -->
+  <swiper :options="swiperOption" style="padding: 20px 30px 0">
+    <swiper-slide v-for="(column,index) in schema['columns']" :key="index">
+      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
+        <el-tab-pane :label="column.name" name="first">
+          <ul style="list-style: none;margin: 0;padding: 0;">
+            <li>第1条数据</li>
+            <li>第2条数据</li>
+            <li>第3条数据</li>
+          </ul>
+        </el-tab-pane>
+      </el-tabs>
+    </swiper-slide>
+    <div class="swiper-button-prev" slot="button-prev" style="left: 1px;"></div>
+    <div class="swiper-button-next" slot="button-next" style="right: 3px;"></div>
+  </swiper>
+</template>
+
+<script>
+  // import _ from 'lodash'
+  // import request from '@/utils/request'
+  import schema from '../../schemas/hm_org_schema'
+
+  /**
+   * 毫末科技的选项卡组件.
+   *
+   *   demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/tabs
+   * @author 王康
+   */
+  export default {
+    name: 'HmTab',
+    // 集成其他组件
+    extends: {},
+    // 使用其它组件
+    components: {},
+    // 混入公共对象
+    mixins: [],
+    /**
+     * 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
+     * 对于所有毫末科技的组件，必须传schema，以完成数据的交互
+     */
+    props: {
+    },
+    data() {
+      return {
+        activeName: 'first',
+        schema: schema['CcHmUser'],
+        swiperOption: {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+          // loop: true,
+          spaceBetween: 30,
+          grabCursor: true,
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }
+        }
+      }
+    },
+    created() {
+      // this.validate()
+      // console.log(this.schema)
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event)
+        console.log(this.schema)
+      }
+    }
+  }
+</script>
+<style scoped>
+
+</style>

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

+<template>
+  <div>
+    <hm-tab></hm-tab>
+  </div>
+</template>
+
+<script>
+  import HmTab from './HmTab.vue'
+  // import schema from '../../schemas/hm_org_schema'
+  export default {
+    name: 'HmTab',
+    // 继承其他组件
+    extends: {},
+    // 使用其它组件
+    components: {
+      'hm-tab': HmTab
+    },
+    data() {
+      return {
+      }
+    },
+    computed: {
+    },
+    filters: {
+    },
+    created() {
+    },
+    methods: {}
+  }
+</script>
+<style scoped>
+</style>