(feature)MisTable组件使用typescript编写

jingchenxu · Jul 31, 2019 · 22b0c24 · 22b0c24
1 parent bec5b95
commit 22b0c24
Show file tree

Hide file tree

Showing 13 changed files with 232 additions and 72 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1325591_chahlv0fqpm.css">
     <!-- <script src="https://d3js.org/d3.v5.min.js"></script> -->
     <title>myViewAdmin</title>
   </head>

diff --git a/public/misimg/myView_Admin.png b/public/misimg/myView_Admin.png
diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -2,7 +2,7 @@
   <div class="login-container">
     <Form class="login-form" ref="login" :model="form" :rules="rule">
       <div class="logo-container">
-
+        <img src="../../public/misimg/myView_Admin.png"/>
       </div>
       <FormItem prop="user">
         <Input size="large" type="text" v-model="form.user" placeholder="Username">
@@ -78,8 +78,10 @@ export default {
     bottom: 0;
     .logo-container {
       height: 80px;
-      background-color: grey;
       margin-bottom: 20px;
+      img {
+        width: 100%;
+      }
     }
   }
 }

diff --git a/src/views/mis/MisContainer.vue b/src/views/mis/MisContainer.vue
@@ -7,7 +7,8 @@
       <el-container>
         <el-header>
           <span class="sider-trigger">
-            <Icon @click="handleSiderTrigger" style="font-size: 26px;" type="md-menu" />
+          <Icon v-if="!getExpandMisMenu" @click="handleSiderTrigger" custom="iconfont mvzhankai" size="20" />
+          <Icon v-else @click="handleSiderTrigger" custom="iconfont mvshouqi" size="20" />
           </span>
           <mis-header-item>
             <Icon @click="handleSetting" style="font-size: 18px;" type="md-more" />
@@ -38,50 +39,50 @@
 </template>
 
 <script>
-import MisMenu from "./components/MisMenu";
-import MisTabNavi from "./components/MisTabNavi";
-import MisHeaderItem from "./components/MisHeaderItem";
-import { mapGetters } from "vuex";
+import MisMenu from './components/MisMenu'
+import MisTabNavi from './components/MisTabNavi'
+import MisHeaderItem from './components/MisHeaderItem'
+import { mapGetters } from 'vuex'
 
 export default {
-  name: "MisContainer",
+  name: 'MisContainer',
   components: {
     MisMenu,
     MisTabNavi,
     MisHeaderItem
   },
-  data() {
+  data () {
     return {
       showSetting: false
-    };
+    }
   },
   computed: {
-    ...mapGetters(["getLogin", "getExpandMisMenu"])
+    ...mapGetters(['getLogin', 'getExpandMisMenu'])
   },
   methods: {
-    handleSiderTrigger() {
-      this.$store.dispatch("CHANGEEXPANDMISMENU");
+    handleSiderTrigger () {
+      this.$store.dispatch('CHANGEEXPANDMISMENU')
     },
-    handleExit() {
+    handleExit () {
       // TODO 调用退出接口
       this.$router.push({
-        name: "login"
-      });
+        name: 'login'
+      })
     },
-    handleSetting() {
-      this.showSetting = true;
+    handleSetting () {
+      this.showSetting = true
     }
   },
-  mounted() {
+  mounted () {
     if (!this.getLogin) {
-      this.$axios.get("/api/getonlineuser").then(res => {
+      this.$axios.get('/api/getonlineuser').then(res => {
         if (res.success) {
-          this.$store.dispatch("UPDATECURRENTUSER", res.data);
+          this.$store.dispatch('UPDATECURRENTUSER', res.data)
         }
-      });
+      })
     }
   }
-};
+}
 </script>
 
 <style lang="less">
@@ -116,6 +117,7 @@ export default {
       color: #333;
       box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
       z-index: 1;
+      transition: all .2s ease-in-out;
     }
 
     .el-main {

diff --git a/src/views/mis/components/MisMenu/MisMenu.vue b/src/views/mis/components/MisMenu/MisMenu.vue
@@ -12,6 +12,7 @@
     background-color="#001529"
     text-color="#fff"
     active-text-color="#ffd04b"
+    unique-opened
     :collapse="getExpandMisMenu">
       <el-submenu
       v-for="menu of getMenuTree"

diff --git a/src/views/mis/components/MisTab/MisTab.vue b/src/views/mis/components/MisTab/MisTab.vue
@@ -29,6 +29,7 @@ export default {
 .mis-tab {
   padding: 0 15px;
   min-height: 75vh;
+  margin-top: 44px;
   .list-container {
     width: 100%;
     background-color: white;
@@ -50,13 +51,12 @@ export default {
 
 <style lang="less">
 .search-items-container {
-  border-bottom: 1px solid #dadada;
   .ivu-form-item {
     margin-bottom: 10px;
   }
 }
 .action-items-container {
-  border-bottom: 1px solid #dadada;
+  border-bottom: 1px solid #EBEEF5;
   .ivu-form-item {
     margin-bottom: 10px;
   }

diff --git a/src/views/mis/components/MisTabNavi/MisTabNavi.vue b/src/views/mis/components/MisTabNavi/MisTabNavi.vue
@@ -1,33 +1,103 @@
 <template>
   <div class="mis-tab-navi">
-    <div class="tab-item">测试菜单1</div>
-    <div class="tab-item">测试菜单1</div>
-    <div class="tab-item">测试菜单1</div>
-    <div class="tab-item">测试菜单1</div>
-    <div class="tab-item">测试菜单1</div>
+    <div style="position: relative; overflow: hidden;">
+      <div class="tab-navi-container">
+        <span @click="handlePrev" class="tab-navi-prev">
+          <Icon type="ios-arrow-back" />
+        </span>
+        <div class="tab-navi-scroll">
+          <div class="tab-navi">
+            <div class="tab-item">测试菜单1<Icon style="margin-right: -6px;" type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+          </div>
+        </div>
+        <span @click="handleNext" class="tab-navi-next">
+          <Icon type="ios-arrow-forward" />
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'MisTabNavi'
-}
+  name: "MisTabNavi",
+  methods: {
+    handlePrev () {
+
+    },
+    handleNext () {
+      
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
 .mis-tab-navi {
-  width: 100%;
+  width: calc(100% - 284px);
   height: 44px;
-  background-color: transparent;;
-  padding: 6px 10px;
-  .tab-item {
-    width: 100px;
-    margin-right: 10px;
-    height: 32px;
-    line-height: 32px;
-    background-color: white;
-    float: left;
-    padding: 0 10px;
+  background-color: transparent;
+  position: fixed;
+  margin: 0 12px;
+  z-index: 2;
+  .tab-navi-container {
+    padding: 6px 32px;
+    position: relative;
+    .tab-navi-prev {
+      width: 32px;
+      text-align: center;
+      position: absolute;
+      line-height: 32px;
+      cursor: pointer;
+      left: 0;
+      font-size: 16px;
+    }
+    .tab-navi-scroll {
+      overflow: hidden;
+      white-space: nowrap;
+      .tab-navi {
+        padding-left: 0;
+        margin: 0;
+        float: left;
+        list-style: none;
+        box-sizing: border-box;
+        position: relative;
+        transition: transform 0.5s ease-in-out;
+        .tab-item {
+          width: 100px;
+          margin-right: 10px;
+          height: 32px;
+          line-height: 32px;
+          background-color: white;
+          padding: 0 10px;
+          display: inline-block;
+          cursor: pointer;
+          position: relative;
+        }
+        .tab-item:hover {
+          background-color: #f5f7f9;
+        }
+      }
+    }
+    .tab-navi-next {
+      width: 32px;
+      text-align: center;
+      position: absolute;
+      line-height: 32px;
+      cursor: pointer;
+      right: 0;
+      top: 6px;
+      font-size: 16px;
+    }
   }
 }
 </style>
diff --git a/src/views/mis/components/MisTable/MisTable.vue b/src/views/mis/components/MisTable/MisTable.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="mis-table">
-    <el-table :data="data" style="width: 100%" @row-dblclick="handleDbclick">
+    <el-table :data="data" style="width: 100%" border size="small" @row-dblclick="handleDbclick">
+      <el-table-column type="index" align="center" width="50">
+      </el-table-column>
+      <el-table-column type="selection" align="center" width="55">
+      </el-table-column>
       <el-table-column prop="date" label="日期" width="180">
       </el-table-column>
       <el-table-column prop="name" label="姓名" width="180">
@@ -12,47 +16,88 @@
 </template>
 
 <script>
+import TableColumn from './TableColumn'
+
 export default {
-  name: 'MisTable',
+  name: "MisTable",
   props: {
+    column: {
+      type: Array,
+      default: () => {
+
+      }
+    },
     data: {
       type: Array,
       default: () => {
         return [
           {
-            date: '2016-05-02',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄'
+            date: "2016-05-02",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
+          },
+          {
+            date: "2016-05-04",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
+          },
+          {
+            date: "2016-05-01",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
           },
           {
-            date: '2016-05-04',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄'
+            date: "2016-05-03",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
           },
           {
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄'
+            date: "2016-05-03",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
           },
           {
-            date: '2016-05-03',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄'
+            date: "2016-05-03",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
+          },
+          {
+            date: "2016-05-03",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
+          },
+          {
+            date: "2016-05-03",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
+          },
+          {
+            date: "2016-05-03",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
+          },
+          {
+            date: "2016-05-03",
+            name: "王小虎",
+            address: "上海市普陀区金沙江路 1518 弄"
           }
-        ]
+        ];
       }
     }
   },
-  data () {
-    return {}
+  data() {
+    return {};
   },
   methods: {
-    handleDbclick (row, column, event) {
-      console.log('双击被触发了')
-      this.$emit('handleDbclick', row, column, event)
+    handleDbclick(row, column, event) {
+      console.log("双击被触发了");
+      this.$emit("handleDbclick", row, column, event);
     }
+  },
+  mounted () {
+    console.dir(new TableColumn())
   }
-}
+};
 </script>
 
 <style lang="less" scoped>