sync

src/views/home/components/Business.vue

@@ -4,16 +4,33 @@
       <span>Business</span>
       <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
     </div>
-    <el-carousel class="biz-content" :autoplay="false" arrow="never" trigger="click">
-      <el-carousel-item v-for="(page,index) in carouselData" :key="index">
-        <div class="system-box">
-          <div v-for="item in page" :key="item.id" class="system-item-box">
-            <el-avatar :size="56" fit="fill" :src="item.link" />
-            <div class="system-title">{{ item.name }}</div>
-          </div>
-        </div>
-      </el-carousel-item>
-    </el-carousel>
+    <el-tabs class="business-content" value="todo">
+      <el-tab-pane label="All" name="all">
+        <el-table :data="todoData" :show-header="false" size="mini" height="calc(100% - 30px)">
+          <el-table-column width="40">
+            <template>
+              <el-avatar shape="square" size="small"><svg-icon icon-class="yujing" /></el-avatar>
+            </template>
+          </el-table-column>
+          <el-table-column show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
+              <div>{{ scope.row.appName }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createDate" width="140" />
+          <el-table-column prop="createUser" width="70" show-overflow-tooltip />
+          <el-table-column width="105">
+            <template>
+              <el-button size="mini">不再提醒</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane v-if="type in bizType" :key="type" :label="type" :name="type">
+        <el-button v-for="item in bizData[type]" :key="item.id" type="test">{{ item.name }}</el-button>
+      </el-tab-pane>
+    </el-tabs>
   </el-card>
 </template>
 
@@ -32,32 +49,32 @@ export default {
   data() {
     return {
       rawData: [
-        { id: '1', code: '1', name: 'System1', link: '', icon: 'icon-1' },
-        { id: '2', code: '2', name: 'System2', link: '', icon: 'icon-2' },
-        { id: '3', code: '3', name: 'System3', link: '', icon: 'icon-3' },
-        { id: '4', code: '4', name: 'System4', link: '', icon: 'icon-4' },
-        { id: '5', code: '5', name: 'System5', link: '', icon: 'icon-5' },
-        { id: '6', code: '6', name: 'System6', link: '', icon: 'icon-6' },
-        { id: '7', code: '7', name: 'System7', link: '', icon: 'icon-7' },
-        { id: '8', code: '8', name: 'System8', link: '', icon: 'icon-8' },
-        { id: '9', code: '9', name: 'System9', link: '', icon: 'icon-9' },
-        { id: '10', code: '10', name: 'System10', link: '', icon: 'icon-10' },
-        { id: '11', code: '11', name: 'System11', link: '', icon: 'icon-11' },
-        { id: '12', code: '12', name: 'System12', link: '', icon: 'icon-12' },
-        { id: '13', code: '13', name: 'System13', link: '', icon: 'icon-13' }
+        { id: '1', code: '1', name: 'System1', type: 'type1', link: '', icon: 'icon-1' },
+        { id: '2', code: '2', name: 'System2', type: 'type1', link: '', icon: 'icon-2' },
+        { id: '3', code: '3', name: 'System3', type: 'type1', link: '', icon: 'icon-3' },
+        { id: '4', code: '4', name: 'System4', type: 'type1', link: '', icon: 'icon-4' },
+        { id: '5', code: '5', name: 'System5', type: 'type2', link: '', icon: 'icon-5' },
+        { id: '6', code: '6', name: 'System6', type: 'type2', link: '', icon: 'icon-6' },
+        { id: '7', code: '7', name: 'System7', type: 'type2', link: '', icon: 'icon-7' },
+        { id: '8', code: '8', name: 'System8', type: 'type3', link: '', icon: 'icon-8' },
+        { id: '9', code: '9', name: 'System9', type: 'type3', link: '', icon: 'icon-9' },
+        { id: '10', code: '10', name: 'System10', type: 'type3', link: '', icon: 'icon-10' },
+        { id: '11', code: '11', name: 'System11', type: 'type3', link: '', icon: 'icon-11' },
+        { id: '12', code: '12', name: 'System12', type: 'type3', link: '', icon: 'icon-12' },
+        { id: '13', code: '13', name: 'System13', type: 'type3', link: '', icon: 'icon-13' }
       ],
-      carouselData2: []
+      bizType: ['type1', 'type2', 'type3', 'type4']
     }
   },
   computed: {
-    carouselData() {
-      const result = []
+    bizData() {
+      const result = {}
       if (this.rawData && this.rawData.length > 0) {
-        const len = this.rawData.length
-        const page = Math.ceil(len / this.pageSize)
-        for (var i = 0; i < page; i++) {
-          result.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
-        }
+        this.rawData.forEach(item => {
+          const group = item.type
+          result[group] = result[group] || []
+          result[group].push(item)
+        })
       }
       return result
     }
@@ -81,48 +98,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.biz-content {
-  ::v-deep {
-    .el-carousel__container {
-      height: 100%;
-      // width: 100%;
-    }
-    .el-carousel__button {
-      background-color: #cccccc;
-      opacity: 1;
-    }
-    .el-carousel__indicator.is-active .el-carousel__button {
-      background-color: #0056dd;
-    }
-    .el-carousel__indicator--horizontal {
-      padding: 12px 4px 2px 4px;
-    }
-  }
-
-  .system-box {
-    display: flex;
-    flex-wrap: wrap;
-
-    .system-item-box {
-      width: 156px;
-      height: 110px;
-      border: 1px solid rgba(0,0,0,0.09);
-      border-radius:  10px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin: 5px 10px 5px 0;
+.business-content {
 
-      .system-title {
-        font-size: 16px;
-        color: rgba(0,0,0,0.65);
-        margin-top: 10px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
-  }
 }
 </style>