工单作业、报工查询、工单查询

src/pages/Login.vue

@@ -152,7 +152,7 @@ export default {
         let res = await handLogin(this.loginname, encrypt(this.password))
         this.$store.dispatch('saveUserInfo', JSON.stringify(res.user.user))
         this.$store.dispatch('saveToken', res.token)
-        this.$router.push('/home')
+        this.$router.push('/workorderassignment')
         this.disabled = false
       } catch (e) {
         this.disabled = false

src/pages/assignment/workordermanage.vue

@@ -5,7 +5,7 @@
         <div class="wrap-filters">
           <div class="filter_item">
             <div class="filter_label">工单日期</div>
-            <div class="filter_input">
+            <div class="filter-input-wrap">
               <el-date-picker
                 v-model="value1"
                 type="daterange"
@@ -17,7 +17,7 @@
           </div>
           <div class="filter_item">
             <div class="filter_label">关键字</div>
-            <div class="filter_input">
+            <div class="filter-input-wrap">
               <input type="text" class="filter-input" v-model="keyValue" placeholder="请输入工单号、物料编码">
               <i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
             </div>

src/pages/homeset/Home.vue

@@ -45,12 +45,12 @@ export default {
   data () {
     return {
       timer: null,
-      dataList: []
+      dataList: [{device_code: '1', is_run: '1'}]
     }
   },
   mounted () {
-    this.getList()
+    // this.getList()
-    this.refresh()
+    // this.refresh()
   },
   methods: {
     refresh () {

src/pages/modules/workorder/index.vue

@@ -0,0 +1,181 @@
+<template>
+<div class="content">
+    <div class="header">
+        <div class="header-user-content">
+            <div class="header-user-txt">
+                <span class="span1">登录人员：</span>
+                <span class="span2">{{userName}}</span>
+            </div>
+            <div class="drop-button-wraper" @click="toSelect"><span class="icon_dropdown"></span></div>
+            <div v-show="show" class="dropdown-wrap">
+                <ul class="dropdown-list drift">
+                    <li class="dropdown-item" @click="exit">退出</li>
+                </ul>
+            </div>
+        </div>
+        <div class="header-time-wrap">
+            <div class="header-time">
+                <div class="xj_time">{{time}}</div>
+                <div class="date_week">
+                    <div class="xj_date">{{date}}</div>
+                    <div class="xj_week">{{week}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="body-container">
+        <div class="tabs_wrap">
+            <ul class="tabs">
+                <li v-for="i in menus" :key="i.index">
+                    <router-link :to="i.router" :class="{'router-link-active': i.router === $route.path}">{{i.label}}</router-link>
+                </li>
+            </ul>
+        </div>
+        <div class="main-container">
+            <router-view></router-view>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
+      timer: null,
+      time: '',
+      date: '',
+      week: '',
+      show: false,
+      menus: [
+        {
+          label: '工单作业',
+          router: '/workorderassignment'
+        },
+        {
+          label: '报工查询',
+          router: '/workreportquery'
+        },
+        {
+          label: '工单查询',
+          router: '/workorderquery'
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  methods: {
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    },
+    toSelect () {
+      this.show = !this.show
+    },
+    exit () {
+      this.$store.dispatch('delUserInfo')
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin.styl'
+.content
+    _wh(100%, 100vh)
+    background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)
+.header
+    height 45px
+    _fj()
+    padding 0 15px
+.header-user-content
+    position relative
+    height 45px
+    _fj(flex-start)
+.header-user-txt
+    height 100%
+    line-height 45px
+    .span1
+        _font(14px, 1, #fff,,)
+    .span2
+        _font(16px, 1, #fff,,)
+.drop-button-wraper
+    height 100%
+    line-height 45px
+    font-size 14px
+    color #fff
+    margin-left 15px
+    vertical-align middle
+.dropdown-wrap
+    position absolute
+    top 45px
+    right 0
+    transform-origin center top
+    transition transform .3s ease-in-out
+    border 1px solid #e4e7ed
+    border-radius 4px
+    background-color #fff
+    box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
+    margin 5px 0
+.dropdown-list
+    padding 0
+.dropdown-item
+    _font(14px, 34px, #606266,,)
+    padding 0 20px
+.header-time-wrap
+    height 45px
+.header-time
+    height 45px
+    _fj(center,flex-end,column)
+.xj_time
+    _font(14px, 18px, #fff,,right)
+.date_week
+    _fj()
+.xj_date
+    _font(12px, 18px, #fff,,)
+.xj_week
+    _font(12px, 18px, #fff,,)
+.body-container
+    _wh(calc(100% - 30px), calc(100% - 65px))
+    margin 0 auto 20px
+    padding 5px
+    border 1px solid #484cce
+.tabs_wrap
+    height 34px
+    margin-bottom 10px
+.tabs
+  height 34px
+  li
+    float left
+    line-height 32px
+    text-align center
+    padding-right 10px
+    a
+      display inline-block
+      color #fff
+      width 100%
+      padding 0 10px
+      font-size 14px
+      border-bottom 1px solid #2aa6f9
+    .router-link-active
+        background linear-gradient(#0de0ff 0%,#2aa6f9 100%)
+        border-top-left-radius 12px
+        border-top-right-radius 12px
+.main-container
+    _wh(100%, calc(100% - 44px))
+</style>

src/pages/modules/workorder/work-order-assignment.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="order-wraper">
+        <div class="wrap-filter-buttons">
+            <div class="wrap-filters">
+                <div class="filter_item">
+                    <div class="filter_label">设备</div>
+                    <div class="filter-input-wrap">
+                        <el-select v-model="value" placeholder="请选择">
+                            <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </div>
+            </div>
+            <div class="wrap-buttons">
+                <button class="button button--primary" @click="getDatas">查询</button>
+                <button class="button button--primary" :disabled="disabled1" @click="_openStart">开工</button>
+                <button class="button button--primary" :disabled="disabled2" @click="_saveReport">报工</button>
+                <button class="button button--primary" :disabled="disabled3" @click="_tofinish">强制完成</button>
+            </div>
+        </div>
+        <div class="grid_wraper">
+            <table class="filter-table">
+                <tr>
+                    <th width="4%"></th>
+                    <th width="8%">工单日期</th>
+                    <th width="8%">工单号</th>
+                    <th width="10%">状态</th>
+                    <th width="8%">设备</th>
+                    <th width="10%">物料规格</th>
+                    <th width="10%">工序</th>
+                    <th width="10%">计划生产</th>
+                    <th width="9%">待生产</th>
+                    <th width="9%">已生产</th>
+                    <th width="13%">开工时间</th>
+                </tr>
+                <tr v-for="e in dataList" :key="e.workorder_id">
+                    <td>
+                        <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+                    </td>
+                    <td>{{e.workorder_code}}</td>
+                    <td>{{e.shift_type_scode_name}}</td>
+                    <td>{{e.material_name}}</td>
+                    <td>{{e.workprocedure_name}}</td>
+                    <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+                    <td>{{e.plan_qty}}</td>
+                    <td>{{e.real_qty}}</td>
+                    <td>
+                    </td>
+                    <td>{{e.realproducestart_date}}</td>
+                    <td>{{e.realproduceend_date}}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: '选项1',
+        label: '超级管理员'
+      }, {
+        value: '选项2',
+        label: '系统管理员'
+      }, {
+        value: '选项3',
+        label: '普通用户'
+      }, {
+        value: '选项4',
+        label: '开发人员'
+      }],
+      value: '',
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  methods: {
+    getDatas () {
+
+    },
+    _openStart () {
+
+    },
+    _saveReport () {
+
+    },
+    _tofinish () {
+
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
+      this.pkObj = this.pkId === e.workorder_id ? e : {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.filter_label
+    width 32px
+.filter-input-wrap
+    width calc(100% - 32px)
+</style>

src/pages/modules/workorder/work-order-query.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="order-wraper">
+      <div class="wrap-filter-buttons">
+          <div class="wrap-filters">
+              <div class="filter_item">
+                  <div class="filter_label">工单日期</div>
+                  <div class="filter-input-wrap">
+                      <el-date-picker
+                          v-model="value1"
+                          type="daterange"
+                          range-separator="-"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期">
+                      </el-date-picker>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z2">设备</div>
+                  <div class="filter-input-wrap filter-input-wrap_z2">
+                    <el-select v-model="value" placeholder="请选择">
+                      <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z3">关键字</div>
+                  <div class="filter-input-wrap filter-input-wrap_z3">
+                  <input type="text" class="filter-input" v-model="keyValue" placeholder="请输入工单号、物料编码">
+                  <i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
+                  </div>
+              </div>
+          </div>
+          <div class="wrap-buttons">
+              <button class="button button--primary" @click="getDatas">查询</button>
+          </div>
+      </div>
+      <div class="grid_wraper">
+          <table class="filter-table">
+              <tr>
+                  <th width="4%"></th>
+                  <th width="8%">工单日期</th>
+                  <th width="8%">工单号</th>
+                  <th width="8%">设备</th>
+                  <th width="8%">状态</th>
+                  <th width="8%">物料名称</th>
+                  <th width="8%">工序</th>
+                  <th width="8%">工单数量</th>
+                  <th width="8%">实际数量</th>
+                  <th width="8%">报废数量</th>
+                  <th width="7%">报修数量</th>
+                  <th width="8%">开始时间</th>
+                  <th width="8%">开始时间</th>
+              </tr>
+              <tr v-for="e in dataList" :key="e.workorder_id">
+                  <td>
+                      <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+                  </td>
+                  <td>{{e.workorder_code}}</td>
+                  <td>{{e.shift_type_scode_name}}</td>
+                  <td>{{e.material_name}}</td>
+                  <td>{{e.workprocedure_name}}</td>
+                  <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+                  <td>{{e.plan_qty}}</td>
+                  <td>{{e.real_qty}}</td>
+                  <td>
+                  </td>
+                  <td>{{e.realproducestart_date}}</td>
+                  <td>{{e.realproduceend_date}}</td>
+                  <td></td>
+                  <td></td>
+              </tr>
+          </table>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value1: [new Date(), new Date()],
+      options: [],
+      value: '',
+      keyValue: '',
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  computed: {
+    closeIcon1 () {
+      return this.keyValue !== ''
+    }
+  },
+  methods: {
+    clearData (e) {
+      switch (e) {
+        case 1:
+          this.keyValue = ''
+          break
+      }
+    },
+    getDatas () {
+
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
+      this.pkObj = this.pkId === e.workorder_id ? e : {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.wrap-filters
+  width calc(100% - 60px)
+.wrap-buttons
+  width 60px
+.filter_label_z2
+  width 32px
+.filter-input-wrap_z2
+  width calc(100% - 32px)
+.filter_label_z3
+  width 43px
+.filter-input-wrap_z3
+  width calc(100% - 43px)
+.filter_item
+  &:nth-child(1)
+      width 55%
+  &:nth-child(2)
+      width calc(45% - 10px)
+</style>

src/pages/modules/workorder/work-report-query.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="order-wraper">
+      <div class="wrap-filter-buttons">
+          <div class="wrap-filters">
+              <div class="filter_item">
+                  <div class="filter_label">工单日期</div>
+                  <div class="filter-input-wrap">
+                      <el-date-picker
+                          v-model="value1"
+                          type="daterange"
+                          range-separator="-"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期">
+                      </el-date-picker>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z2">设备</div>
+                  <div class="filter-input-wrap filter-input-wrap_z2">
+                    <el-select v-model="value" placeholder="请选择">
+                      <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </div>
+              </div>
+          </div>
+          <div class="wrap-buttons">
+              <button class="button button--primary" @click="getDatas">查询</button>
+              <button class="button button--primary" :disabled="disabled1">修改</button>
+              <button class="button button--primary" :disabled="disabled2">删除</button>
+          </div>
+      </div>
+      <div class="grid_wraper">
+          <table class="filter-table">
+              <tr>
+                  <th width="4%"></th>
+                  <th width="7%">工单号</th>
+                  <th width="6%">设备</th>
+                  <th width="8%">顺序号</th>
+                  <th width="8%">班次</th>
+                  <th width="8%">物料名称</th>
+                  <th width="8%">开始时间</th>
+                  <th width="8%">结束时间</th>
+                  <th width="7%">电气数量</th>
+                  <th width="10%">上报合格数</th>
+                  <th width="7%">上报报废数</th>
+                  <th width="6%">上报报修数</th>
+                  <th width="6%">操作工</th>
+                  <th width="5%">状态</th>
+              </tr>
+              <tr v-for="e in dataList" :key="e.workorder_id">
+                  <td>
+                      <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+                  </td>
+                  <td>{{e.workorder_code}}</td>
+                  <td>{{e.shift_type_scode_name}}</td>
+                  <td>{{e.material_name}}</td>
+                  <td>{{e.workprocedure_name}}</td>
+                  <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+                  <td>{{e.plan_qty}}</td>
+                  <td>{{e.real_qty}}</td>
+                  <td>
+                  </td>
+                  <td>{{e.realproducestart_date}}</td>
+                  <td>{{e.realproduceend_date}}</td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+              </tr>
+          </table>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [],
+      value: '',
+      value1: [new Date(), new Date()],
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  methods: {
+    getDatas () {
+
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
+      this.pkObj = this.pkId === e.workorder_id ? e : {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.wrap-filters
+  width calc(100% - 270px)
+.wrap-buttons
+  width 270px
+.filter_label_z2
+  width 32px
+.filter-input-wrap_z2
+  width calc(100% - 32px)
+.filter_item
+  &:nth-child(1)
+      width 55%
+  &:nth-child(2)
+      width calc(45% - 10px)
+</style>

src/router/index.js

@@ -2,6 +2,11 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 const Login = r => require.ensure([], () => r(require('@page/Login')), 'Login')
+const modulesIndex = r => require.ensure([], () => r(require('@page/modules/workorder/index')), 'modules')
+const workOrderAssignment = r => require.ensure([], () => r(require('@page/modules/workorder/work-order-assignment')), 'modules')
+const workReportQuery = r => require.ensure([], () => r(require('@page/modules/workorder/work-report-query')), 'modules')
+const workOrderQuery = r => require.ensure([], () => r(require('@page/modules/workorder/work-order-query')), 'modules')
+
 const Homeset = r => require.ensure([], () => r(require('@page/homeset/index')), 'Homeset')
 const Home = r => require.ensure([], () => r(require('@page/homeset/Home')), 'Home')
 const IfWork = r => require.ensure([], () => r(require('@page/homeset/IfWork')), 'IfWork')
@@ -26,6 +31,20 @@ export default new Router({
       path: '/login',
       component: Login
     },
+    {
+      path: '/modulesindex',
+      component: modulesIndex,
+      children: [{
+        path: '/workorderassignment', // 工单作业
+        component: workOrderAssignment
+      }, {
+        path: '/workreportquery', // 报工查询
+        component: workReportQuery
+      }, {
+        path: '/workorderquery', // 工单查询
+        component: workOrderQuery
+      }]
+    },
     {
       path: '/workordermanage',
       component: workordermanage

src/style/iconfont.styl

@@ -11,3 +11,20 @@
   content '\e60f'
 .selected_icon::before
   content '\e608'
+
+// new
+[class*=" icon_"],[class^=icon_]
+  font-family: "iconfont" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+.icon_dropdown
+  &::before
+    content: '\e626'

src/style/layout.styl

@@ -10,28 +10,55 @@
       url('iconfont/iconfont.svg#iconfont') format('svg');
 
 /**日历*/
-[class*=" el-icon-"], [class^=el-icon-]
+// [class*=" el-icon-"], [class^=el-icon-]
-  color #c0c4cc
+//   color #c0c4cc
-.el-date-range-picker__header div
+// .el-date-range-picker__header div
-  color #606266
+//   color #606266
-.el-date-table td span
+// .el-date-table td span
-  color #606266
+//   color #606266
-.el-date-editor .el-range__close-icon
+// .el-date-editor .el-range__close-icon
-  line-height 24px
+//   line-height 24px
-.el-date-range-picker
+// .el-date-range-picker
-  width 5.5rem
+//   width 5.5rem
-.el-date-table td span
+// .el-date-table td span
-  width .2rem
+//   width .2rem
-  height .2rem
+//   height .2rem
-  line-height .2rem
+//   line-height .2rem
-  font-size .14rem
+//   font-size .14rem
-.el-date-table td div
+// .el-date-table td div
-  height .24rem
+//   height .24rem
-.el-date-table td
+// .el-date-table td
-  padding 0
+//   padding 0
-  height .28rem
+//   height .28rem
-.el-date-range-picker__content
+// .el-date-range-picker__content
-  padding .06rem
+//   padding .06rem
+.el-input__inner
+  height 30px
+  line-height 30px
+.el-range-editor.el-input__inner
+  padding 0 5px
+.el-date-editor .el-range__icon
+  font-size 12px
+  line-height 30px
+.el-date-editor .el-range-input
+  font-size 12px
+.el-date-editor .el-range-separator
+  line-height 30px
+  font-size 12px
+// 选择器
+.el-select
+  width 100%
+.el-input
+  line-height 30px
+  font-size 12px
+.el-input__icon
+  line-height 30px
+.el-select-dropdown__item
+  line-height 30px
+  font-size 12px
+  height 30px
+  span
+    font-size 12px
 
 /**icon*/  
 .iconfont
@@ -99,8 +126,8 @@
   font-size: 14px;
   border-radius: 4px;
 .button--primary
-  background-color #67c23a
+  background-color #008f8f
-  border-color #67c23a
+  border-color #008f8f
 .button--defalut
   color #fff
   border 1px solid #c9c9c9
@@ -121,71 +148,82 @@ header
   color #fff
 
 /**nav*/
-.tabs
+// .tabs
-  width 100%
+//   width 100%
-  height 34px
+//   height 34px
-  margin-bottom 10px
+//   margin-bottom 10px
-  li
+//   li
-    float left
+//     float left
-    line-height 32px
+//     line-height 32px
-    text-align center
+//     text-align center
-    a
+//     a
-      display inline-block
+//       display inline-block
-      color #fff
+//       color #fff
-      width 100%
+//       width 100%
-      font-size 14px
+//       font-size 14px
-      padding 0 20px
+//       padding 0 20px
-    .router-link-active
+//     .router-link-active
-      border-bottom 1px solid #15347b
+//       border-bottom 1px solid #15347b
-      box-shadow 0 2px 0 rgba(228, 243, 244, 0.5)
+//       box-shadow 0 2px 0 rgba(228, 243, 244, 0.5)
 
 /**content*/
-.wrap
+.order-wraper
   width 100%
-  height calc(100% - 46px)
+  height 100%
-  padding 15px
 .wrap-filter-buttons
+  display flex
+  justify-content space-between
+  align-items center
   width 100%
+  height 30px
   margin-bottom 15px
 .wrap-filters
   display flex
-  justify-content space-between
+  justify-content flex-start
-  width 100%
+  align-items center
-  height 40px
+  width 60%
+  height 30px
 .wrap-buttons
-  width 100%
+  width 40%
   height 100%
-  margin 10px 0
   text-align right
 .filter_item
-  width 49%
+  width calc(50% - 10px)
   display flex
   justify-content space-between
+  align-items center
+  +.filter_item
+    margin-left 10px
 .filter_label
-  _font(14px, 40px, #fff,,)
+  _font(12px, 30px, #fff,,)
-  width 70px
+  width 50px
-.filter_input
+.filter-input-wrap
   position relative
-  width calc(100% - 70px)
+  width calc(100% - 55px)
-  height 40px
+  height 30px
-  line-height 40px
+  line-height 30px
+  display flex
+  justify-content center
+  align-items center
 .filter-input
-  _wh(100%, 40px)
+  _wh(100%, 29px)
-  _font(14px, 34px, #606266,,)
+  _font(12px, 30px, #606266,,)
-  padding 3px 10px
+  padding 0 10px
   border-radius 4px
+  background-color #fff
 .grid_wraper
-  _wh(100%, calc(100% - 95px))
+  _wh(100%, calc(100% - 45px))
   overflow-y auto
 .filter-table
   width 100%
   text-align center
+  border 1px solid #8B90A6
   th
     position: sticky;
     top -1px
     z-index 1
     color #606266
-    background-color #8B90A6
+    border-left 1px solid #8B90A6
   th,td
     line-height 18px
     font-size 12px