半成品

src/components/header.vue

@@ -0,0 +1,240 @@
+<template>
+    <div class="header">
+        <div class="header-time-wrap">
+            <div class="header-time">
+                <div class="date_week">
+                    <div class="xj_date">{{date}}</div>
+                    <div class="xj_week">{{week}}</div>
+                </div>
+                <div class="xj_time">{{time}}</div>
+            </div>
+        </div>
+        <div class="header-center">{{ title }}</div>
+        <div class="header_wrap_left">
+            <div class="header-user-content">
+                <div class="header-user-txt" @click="toSelect">
+                    <div class="span2">{{userName}}</div>
+                    <div class="span1"></div>
+                </div>
+                <div v-show="show" class="dropdown-wrap">
+                    <ul class="dropdown-list drift">
+                        <li class="dropdown-item__1" @click="exit">
+                            <i class="icon_exit"></i>
+                            <i class="exit_txt">退出</i>
+                        </li>
+                    </ul>
+                    <div class="popper__arrow"></div>
+                </div>
+            </div>
+            <div class="drop-button-wraper">
+                <div class="colors_3_wrap" @click="toSelectColor">
+                    <div class="color_item color_1"></div>
+                    <div class="color_item color_2"></div>
+                    <div class="color_item color_3"></div>
+                </div>
+                <div v-show="showColor" class="dropdown-wrap">
+                    <ul class="dropdown-list drift">
+                        <li class="dropdown-item color_button_wrap">
+                            <div class="color_button overall_orange" @click="switchColor(1)"></div>
+                            <div class="color_button overall_lightgreen" @click="switchColor(2)"></div>
+                            <div class="color_button overall_blue" @click="switchColor(3)"></div>
+                        </li>
+                    </ul>
+                    <div class="popper__arrow"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).person_name : '',
+      timer: null,
+      time: '',
+      date: '',
+      week: '',
+      show: false,
+      showColor: false
+    }
+  },
+  props: {
+    title: String
+  },
+  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')
+    },
+    toSelectColor () {
+      this.showColor = !this.showColor
+    },
+    switchColor (type) {
+      this.$emit('switchColor', type)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin.styl'
+.header
+    height 45px
+    _fj()
+    padding 0 15px
+    // border-bottom 1px solid #2aa6f9
+    // box-shadow 0 1px 2px 0 rgba(42,166,249,.4)
+.header_wrap_left
+    _wh(35%,45px)
+    _fj(flex-end)
+.header-center
+    _wh(30%, 45px)
+    _font(18px, 45px, #fff,,center)
+.header-user-content
+    position relative
+    height 45px
+    _fj(flex-start)
+    cursor pointer
+.header-user-txt
+    _fj()
+    .span1
+        _wh(18px, 18px)
+        background url(../images/user.png) center center / 100% 100% no-repeat
+        margin-left 10px
+    .span2
+        _font(16px, 20px, #fff,,)
+        margin-bottom -2px
+.drop-button-wraper
+    position relative
+    height 100%
+    line-height 45px
+    font-size 14px
+    color #fff
+    margin-left 15px
+    vertical-align middle
+    _fj(center)
+.dropdown-wrap
+    position absolute
+    min-width 75px
+    top 35px
+    right 0
+    z-index 1
+    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
+    height 34px
+    _font(14px, 34px, #606266,,center)
+    padding 0 10px
+    &:hover
+        background-color $gray2
+.dropdown-item__1
+    height 34px
+    _font(14px, 34px, #606266,,center)
+    padding 0 10px
+    _fj(center)
+    &:hover
+        background-color $gray2
+.icon_exit
+    _font(14px, 34px, #606266,,center)
+.exit_txt
+    _font(14px, 34px, #606266,,center)
+    font-style normal
+    margin-left 5px
+.popper__arrow
+    position absolute
+    display block
+    width 0
+    height 0
+    border-color transparent
+    border-style solid
+    border-width 6px
+    filter drop-shadow(0 2px 12px rgba(0,0,0,.03))
+    top -5px
+    right 2px
+    border-top-width 0
+    border-bottom-color #fff
+.header-time-wrap
+    _wh(35%, 45px)
+.header-time
+    height 45px
+    _fj(flex-start)
+.xj_time
+    _font(16px, 18px, #fff,,right)
+.date_week
+    _fj()
+.xj_date
+    _font(15px, 18px, #fff,,)
+.xj_week
+    _font(15px, 18px, #fff,,)
+    margin 0 5px 0 1px
+.drop-button-wraper
+    .dropdown-list
+        padding 0 10px
+    .dropdown-item
+        float left
+        padding 0
+        &:nth-child(2)
+            padding 0 10px
+.colors_3_wrap
+    position relative
+    _wh(18px, 18px)
+    border 1px solid $gray3
+    border-radius 50%
+    overflow hidden
+    >.color_item
+        _wh(58%, 58%)
+        position absolute
+        top 50%
+        left 50%
+        transform-origin 0% 0%
+.color_1
+    transform rotate(0deg) skewX(-30deg)
+    background-color #ffa530
+.color_2
+    transform rotate(120deg) skewX(-30deg)
+    background-color #b7e15d
+.color_3
+    transform rotate(240deg) skewX(-30deg)
+    background-color #484cce
+.color_button_wrap
+    display block
+    _fj()
+.color_button
+    _wh(30px, 30px)
+    line-height 30px
+    font-size 30px
+    border-radius 50%
+    overflow hidden
+    &:nth-child(2)
+        margin 0 5px
+</style>

src/pages/modules/semifinished/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="content blue" ref="content">
+        <jxHeader
+        :title="title"
+        @switchColor="switchColor"
+        />
+        <div class="body-container">
+            <div class="main-container">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+    </template>
+
+<script>
+import jxHeader from '@components/header.vue'
+export default {
+  components: {
+    jxHeader
+  },
+  data () {
+    return {
+      title: ['半成品入库', '半成品入库查询'][Number(this.$route.meta.guidePath) - 1]
+    }
+  },
+  methods: {
+    switchColor (type) {
+      switch (type) {
+        case 1:
+          this.$refs.content.classList.value = 'content overall_orange'
+          break
+        case 2:
+          this.$refs.content.classList.value = 'content overall_lightgreen'
+          break
+        case 3:
+          this.$refs.content.classList.value = 'content overall_blue'
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin.styl'
+.content
+    _wh(100%, 100vh)
+.body-container
+    _wh(calc(100% - 30px), calc(100% - 55px))
+    margin 0 auto 10px
+    padding 5px
+    border 1px solid #484cce
+.main-container
+    _wh(100%, 100%)
+</style>

src/pages/modules/semifinished/semi-finished-instore-search.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="order-wraper">
+        <div class="search-confirm-wrap">
+            <div class="search-wrap">
+                <div class="search-item">
+                    <div class="search-label">仓库</div>
+                    <div class="filter_input_wraper">
+                        <el-select v-model="value1" filterable clearable placeholder="请选择">
+                          <el-option
+                              v-for="item in options1"
+                              :key="item.device_code"
+                              :label="item.device_name"
+                              :value="item.device_code">
+                          </el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">日期</div>
+                    <div class="filter_input_wraper">
+                        <el-date-picker
+                        v-model="value1"
+                        type="daterange"
+                        range-separator="-"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+                      </el-date-picker>
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">业务类型</div>
+                    <div class="filter_input_wraper">
+                        <el-select v-model="value2" filterable clearable placeholder="请选择">
+                          <el-option
+                              v-for="item in options2"
+                              :key="item.device_code"
+                              :label="item.device_name"
+                              :value="item.device_code">
+                          </el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">物料</div>
+                    <div class="filter_input_wraper">
+                        <input type="text" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">载具号</div>
+                    <div class="filter_input_wraper">
+                        <input type="text" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item flexend">
+                    <button class="button button--primary">查询</button>
+                    <button class="button button--primary">强制确认</button>
+                </div>
+            </div>
+        </div>
+        <div class="grid_wraper">
+            <table class="filter-table">
+                <thead>
+                    <tr>
+                        <th>序号</th>
+                        <th>单据号</th>
+                        <th>状态</th>
+                        <th>类型</th>
+                        <th>物料编号</th>
+                        <th>物料规格</th>
+                        <th>数量(个)</th>
+                        <th>单重(g)</th>
+                        <th>重量(kg)</th>
+                        <th>载具号</th>
+                        <th>入库点</th>
+                        <th>货位</th>
+                        <th>创建时间</th>
+                        <th>创建人</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(e, i) in [1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7]" :key="i">
+                        <td>序号</td>
+                        <td>单据号</td>
+                        <td>状态</td>
+                        <td>类型</td>
+                        <td>物料编号</td>
+                        <td>物料规格</td>
+                        <td>数量(个)</td>
+                        <td>单重(g)</td>
+                        <td>重量(kg)</td>
+                        <td>载具号</td>
+                        <td>入库点</td>
+                        <td>货位</td>
+                        <td>创建时间</td>
+                        <td>创建人ldjlfjlfjl劳动纪律放假了</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options1: [],
+      value1: '',
+      options2: [],
+      value2: '',
+      options3: [],
+      value3: ''
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.grid_wraper
+    height calc(100% - 95px)
+</style>

src/pages/modules/semifinished/semi-finished-instore.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="order-wraper">
+        <div class="search-confirm-wrap">
+            <div class="search-wrap">
+                <div class="search-item">
+                    <div class="search-label">仓库</div>
+                    <div class="filter_input_wraper">
+                        <el-select v-model="value1" filterable clearable placeholder="请选择">
+                          <el-option
+                              v-for="item in options1"
+                              :key="item.device_code"
+                              :label="item.device_name"
+                              :value="item.device_code">
+                          </el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">单据类型</div>
+                    <div class="filter_input_wraper">
+                        <el-select v-model="value2" filterable clearable placeholder="请选择">
+                          <el-option
+                              v-for="item in options2"
+                              :key="item.device_code"
+                              :label="item.device_name"
+                              :value="item.device_code">
+                          </el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">物料</div>
+                    <div class="filter_input_wraper">
+                        <input type="text" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">规格</div>
+                    <div class="filter_input_wraper">
+                        <input type="text" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">重量(kg)</div>
+                    <div class="filter_input_wraper">
+                        <input type="number" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">单重(g)</div>
+                    <div class="filter_input_wraper">
+                        <input type="number" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">数量(个)</div>
+                    <div class="filter_input_wraper">
+                        <input type="number" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">入库点</div>
+                    <div class="filter_input_wraper">
+                        <el-select v-model="value3" filterable clearable placeholder="请选择">
+                          <el-option
+                              v-for="item in options3"
+                              :key="item.device_code"
+                              :label="item.device_name"
+                              :value="item.device_code">
+                          </el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">载具号</div>
+                    <div class="filter_input_wraper">
+                        <input type="text" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item">
+                    <div class="search-label">备注</div>
+                    <div class="filter_input_wraper">
+                        <input type="text" class="filter-input">
+                    </div>
+                </div>
+                <div class="search-item_2">
+                    <button class="button button--primary">确认入库</button>
+                    <button class="button button--primary">作业查询</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options1: [],
+      value1: '',
+      options2: [],
+      value2: '',
+      options3: [],
+      value3: ''
+    }
+  }
+}
+</script>

src/router/index.js

@@ -2,10 +2,19 @@ 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 workorderIndex = r => require.ensure([], () => r(require('@page/modules/workorder/index')), 'workorder')
+const workOrderAssignment = r => require.ensure([], () => r(require('@page/modules/workorder/work-order-assignment')), 'workorder')
+const workReportQuery = r => require.ensure([], () => r(require('@page/modules/workorder/work-report-query')), 'workorder')
+const workOrderQuery = r => require.ensure([], () => r(require('@page/modules/workorder/work-order-query')), 'workorder')
+const semifinishedIndex = r => require.ensure([], () => r(require('@page/modules/semifinished/index')), 'semifinished')
+const semiFinishedInstore = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-instore')), 'semifinished')
+const semiFinishedInstoreSearch = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-instore-search')), 'semifinished')
+const semiFinishedOutstore = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-outstore')), 'semifinished')
+const semiFinishedOutstoreSearch = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-outstore-search')), 'semifinished')
+const semiFinishedCheck = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-check')), 'semifinished')
+const semiFinishedCheckSearch = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-check-search')), 'semifinished')
+const semiFinishedCompose = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-compose')), 'semifinished')
+const semiFinishedComposeSearch = r => require.ensure([], () => r(require('@page/modules/semifinished/semi-finished-compose-search')), 'semifinished')
 
 const Homeset = r => require.ensure([], () => r(require('@page/homeset/index')), 'Homeset')
 const Home = r => require.ensure([], () => r(require('@page/homeset/Home')), 'Home')
@@ -32,8 +41,8 @@ export default new Router({
       component: Login
     },
     {
-      path: '/modulesindex',
-      component: modulesIndex,
+      path: '/workorderindex',
+      component: workorderIndex,
       children: [{
         path: '/workorderassignment', // 工单作业
         component: workOrderAssignment
@@ -45,6 +54,43 @@ export default new Router({
         component: workOrderQuery
       }]
     },
+    {
+      path: '/semifinishedindex',
+      component: semifinishedIndex,
+      children: [{
+        path: '/semifinishedinstore', // 半成品入库
+        component: semiFinishedInstore,
+        meta: {guidePath: '1'}
+      }, {
+        path: '/semifinishedinstoresearch',
+        component: semiFinishedInstoreSearch,
+        meta: {guidePath: '2'}
+      }, {
+        path: '/semifinishedoutstore', // 半成品入库
+        component: semiFinishedOutstore,
+        meta: {guidePath: '3'}
+      }, {
+        path: '/semifinishedoutstoresearch', // 半成品出库
+        component: semiFinishedOutstoreSearch,
+        meta: {guidePath: '4'}
+      }, {
+        path: '/semifinishedcheck', // 半成品盘点
+        component: semiFinishedCheck,
+        meta: {guidePath: '5'}
+      }, {
+        path: '/semifinishedchecksearch',
+        component: semiFinishedCheckSearch,
+        meta: {guidePath: '6'}
+      }, {
+        path: '/semifinishedcompose', // 半成品拼盘
+        component: semiFinishedCompose,
+        meta: {guidePath: '7'}
+      }, {
+        path: '/semifinishedcomposesearch',
+        component: semiFinishedComposeSearch,
+        meta: {guidePath: '8'}
+      }]
+    },
     {
       path: '/workordermanage',
       component: workordermanage

src/style/layout.styl

@@ -48,6 +48,7 @@
 // 选择器
 .el-select
   width 100%
+  display block
 .el-input
   line-height 30px
   font-size 12px
@@ -230,7 +231,6 @@ header
     top -1px
     z-index 1
     color #606266
-    border 1px solid #8B90A6
     padding 5px 0
     font-weight bold
     background-color #8B90A6
@@ -239,8 +239,12 @@ header
     font-size 12px
     color #fff
     word-break break-all
+    border-right 1px solid #8B90A6
+    border-bottom 1px solid #8B90A6
+    box-sizing border-box
+    &:first-child
+      border-left 1px solid #8B90A6
   td
-    border 1px solid #8B90A6
     padding 5px
 .input
   width 1.8rem
@@ -249,6 +253,38 @@ header
   font-size .13rem
   color #606266
   text-indent .05rem
+.slide_new
+  width: 100%
+  height: 100%
+  overflow-y: auto
+.zd_wrapper
+  height calc(100% - 95px)
+  overflow hidden
+  .grid_wraper
+    table-layout fixed
+    width auto
+    min-width 100%
+    height 100%
+    th
+      position sticky
+      top -1px
+      z-index 49
+      &:first-child
+        position sticky
+        left -1px
+        z-index 51
+    th,td
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+    td
+      &:first-child
+        position sticky
+        left -1px
+        z-index 50
+        background-color #8b90a6
+        color #fff
+
 .message-box__wrapper
   position fixed
   top 0
@@ -364,6 +400,43 @@ input::-webkit-input-placeholder
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   width: 100%;
 
+// 半成品
+.search-confirm-wrap
+  margin 0 auto
+  border-radius 5px
+  padding-bottom 15px
+.search-wrap
+  width 100%
+  padding 0 10px
+  _fj(flex-start)
+  flex-wrap wrap
+.search-item
+  _fj()
+  width 32%
+  margin-top 10px
+  &:nth-child(3n+2)
+    margin-left 2%
+    margin-right 2%
+  .button+.button
+    margin-left 5px
+.search-label
+  _wh(60px, 30px)
+  _font(12px, 30px,#fff,,)
+.filter_input_wraper
+	width calc(100% - 60px)
+	height 30px
+	line-height 30px
+.search-item_2
+  _fj(flex-end)
+  width 64%
+  margin-top 10px
+  margin-left 4%
+  .button+.button
+    margin-left 5px
+.flexend
+  justify-content flex-end
+
+// 颜色切换
 .overall_orange
     background linear-gradient(#ff7a31 0%,#ff6b00 20%,#ff5200 100%)
     .body-container