From 07bb2bc3fbdb44c0b616dc3d6d6d4c5acdd426ec Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Fri, 30 Jun 2023 11:27:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A5=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header2.vue                    | 252 ++++++++++++++++++
 src/pages/homeset/index.vue                   | 134 +++-------
 src/pages/homeset/index2.vue                  | 113 ++++++++
 .../modules/finished/finished-instore.vue     |  81 ++++--
 4 files changed, 464 insertions(+), 116 deletions(-)
 create mode 100644 src/components/header2.vue
 create mode 100644 src/pages/homeset/index2.vue

diff --git a/src/components/header2.vue b/src/components/header2.vue
new file mode 100644
index 0000000..676004e
--- /dev/null
+++ b/src/components/header2.vue
@@ -0,0 +1,252 @@
+<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 class="home_tip_wrap" @click="backHome">
+                <div class="iconfont icon_home"></div>
+            </div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).person_name : 'admin',
+      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)
+    },
+    backHome () {
+      this.$router.push('/home')
+    }
+  }
+}
+</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
+.home_tip_wrap
+    _wh(18px, 45px)
+    _fj(center)
+    margin-left 15px
+    .icon_home
+        _font(18px, 45px, #fff,,center)
+.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>
diff --git a/src/pages/homeset/index.vue b/src/pages/homeset/index.vue
index b38e4f1..0e18317 100644
--- a/src/pages/homeset/index.vue
+++ b/src/pages/homeset/index.vue
@@ -1,113 +1,55 @@
 <template>
-<div class="container">
-  <header>
-    <div class="left-box">
-      <button class="fl logo iconfont dropdown_icon" ref="logo" @click="getInfo">登录人员：{{userName}}</button>
-      <ul class="drift dropdown-ul" id="dropdown-ul" :style="{'height': drift+'rem','width' : cwidth + 'px'}">
-        <li @click="exit">退出</li>
-      </ul>
+    <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>
-    <div class="fr date-box">
-      <p class="time">{{time}}</p>
-      <p class="date">{{date}}<span class="week">{{week}}</span></p>
-    </div>
-  </header>
-  <router-view></router-view>
-</div>
-</template>
+    </template>
 
 <script>
+import jxHeader from '@components/header2.vue'
 export default {
-  name: 'homeset',
+  components: {
+    jxHeader
+  },
   data () {
     return {
-      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
-      timer: null,
-      time: '',
-      date: '',
-      week: '',
-      drift: 0,
-      cwidth: ''
+      title: ['成品入库', '选择成品箱物料', '成品入库查询'][Number(this.$route.meta.guidePath) - 1]
     }
   },
-  mounted () {
-    this.timer = window.setInterval(this.updateTime, 1000)
-  },
   methods: {
-    getInfo () {
-      this.cwidth = this.$refs.logo.clientWidth
-      this.drift = this.drift === 0 ? 0.5 : 0
-    },
-    exit () {
-      this.$store.dispatch('delUserInfo')
-      this.$router.push('/login')
-    },
-    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}`
+    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>
-.left-box
-  position relative
-.logo
-  position relative
-  height 45px
-  overflow hidden
-  padding-right .3rem
-  line-height 45px
-  font-size 16px
-  background none
-  color #fff
-.dropdown-ul
-    position absolute
-    background #3157a3
-    top calc(.6rem + 3px)
-    left 0
-    overflow hidden
-    border-bottom-left-radius .05rem
-    border-bottom-right-radius .05rem
-    box-shadow 0 2px 3px rgba(228,243,244,0.5)
-    li
-      text-align center
-      line-height .5rem
-      font-size .15rem
-      color #fff
-      border-bottom 1px solid #767a82
-      &:last-child
-        border-bottom none
-.date-box
-  max-width 50%
-  height 45px
-  overflow hidden
-  display flex
-  justify-content flex-end
-  align-items center
-.time
-  font-size 16px
-  line-height 24px
-  margin-right 10px
-  color #fff
-.date
-  font-size 16px
-  line-height 24px
-  color #fff
-.week
-  font-size 16px
-.drift
-  transition height .3s linear
+@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>
diff --git a/src/pages/homeset/index2.vue b/src/pages/homeset/index2.vue
new file mode 100644
index 0000000..b38e4f1
--- /dev/null
+++ b/src/pages/homeset/index2.vue
@@ -0,0 +1,113 @@
+<template>
+<div class="container">
+  <header>
+    <div class="left-box">
+      <button class="fl logo iconfont dropdown_icon" ref="logo" @click="getInfo">登录人员：{{userName}}</button>
+      <ul class="drift dropdown-ul" id="dropdown-ul" :style="{'height': drift+'rem','width' : cwidth + 'px'}">
+        <li @click="exit">退出</li>
+      </ul>
+    </div>
+    <div class="fr date-box">
+      <p class="time">{{time}}</p>
+      <p class="date">{{date}}<span class="week">{{week}}</span></p>
+    </div>
+  </header>
+  <router-view></router-view>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'homeset',
+  data () {
+    return {
+      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
+      timer: null,
+      time: '',
+      date: '',
+      week: '',
+      drift: 0,
+      cwidth: ''
+    }
+  },
+  mounted () {
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  methods: {
+    getInfo () {
+      this.cwidth = this.$refs.logo.clientWidth
+      this.drift = this.drift === 0 ? 0.5 : 0
+    },
+    exit () {
+      this.$store.dispatch('delUserInfo')
+      this.$router.push('/login')
+    },
+    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}`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.left-box
+  position relative
+.logo
+  position relative
+  height 45px
+  overflow hidden
+  padding-right .3rem
+  line-height 45px
+  font-size 16px
+  background none
+  color #fff
+.dropdown-ul
+    position absolute
+    background #3157a3
+    top calc(.6rem + 3px)
+    left 0
+    overflow hidden
+    border-bottom-left-radius .05rem
+    border-bottom-right-radius .05rem
+    box-shadow 0 2px 3px rgba(228,243,244,0.5)
+    li
+      text-align center
+      line-height .5rem
+      font-size .15rem
+      color #fff
+      border-bottom 1px solid #767a82
+      &:last-child
+        border-bottom none
+.date-box
+  max-width 50%
+  height 45px
+  overflow hidden
+  display flex
+  justify-content flex-end
+  align-items center
+.time
+  font-size 16px
+  line-height 24px
+  margin-right 10px
+  color #fff
+.date
+  font-size 16px
+  line-height 24px
+  color #fff
+.week
+  font-size 16px
+.drift
+  transition height .3s linear
+</style>
diff --git a/src/pages/modules/finished/finished-instore.vue b/src/pages/modules/finished/finished-instore.vue
index 12592fd..d184aa0 100644
--- a/src/pages/modules/finished/finished-instore.vue
+++ b/src/pages/modules/finished/finished-instore.vue
@@ -8,9 +8,9 @@
                         <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">
+                              :key="item.stor_id"
+                              :label="item.stor_name"
+                              :value="item.stor_id">
                           </el-option>
                         </el-select>
                     </div>
@@ -21,9 +21,9 @@
                         <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">
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
                           </el-option>
                         </el-select>
                     </div>
@@ -34,9 +34,9 @@
                         <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">
+                              :key="item.point_code"
+                              :label="item.point_name"
+                              :value="item.point_code">
                           </el-option>
                         </el-select>
                     </div>
@@ -56,7 +56,7 @@
                 <div class="search-item_2 flexend">
                     <button class="button button--primary">确认入库</button>
                     <button class="button button--primary">作业查询</button>
-                    <button class="button button--primary">添加单据物料</button>
+                    <button class="button button--primary" @click="toAddBillMater">添加单据物料</button>
                     <button class="button button--primary">删除一行</button>
                 </div>
             </div>
@@ -76,15 +76,15 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="(e, i) in [1, 2, 3]" :key="i">
-                        <td>1</td>
-                        <td>030301010031</td>
-                        <td>碳化钨粉ZW300</td>
-                        <td>1000</td>
-                        <td>个</td>
-                        <td>xno01</td>
-                        <td>RT20210616001</td>
-                        <td>供应商甲</td>
+                    <tr v-for="(e, i) in dataList" :key="i" :class="{'selected_icon': pkId === e.material_code}" @click="toRadio(e)">
+                        <td>i</td>
+                        <td>{{e.material_code}}</td>
+                        <td>{{e.material_name}}</td>
+                        <td>{{e.sale_qty}}</td>
+                        <td>{{e.qty_unit_name}}</td>
+                        <td>{{e.bucketunique}}</td>
+                        <td>{{e.sale_code}}</td>
+                        <td>{{e.cust_name}}</td>
                     </tr>
                 </tbody>
             </table>
@@ -93,6 +93,7 @@
 </template>
 
 <script>
+import { getBcpStor, getBillType, getPoint } from '../../../config/getData1.js'
 export default {
   data () {
     return {
@@ -101,7 +102,47 @@ export default {
       options2: [],
       value2: '',
       options3: [],
-      value3: ''
+      value3: '',
+      dataList: [{material_code: '030301010031'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  beforeRouteLeave (to, from, next) {
+    if (to.path === '/home' || to.path === '/login') {
+      this.$store.dispatch('setKeepAlive', [])
+    }
+    next()
+  },
+  activated () {
+  },
+  created () {
+    this._getBcpStor()
+    this._getBillType()
+    this._getPoint()
+  },
+  methods: {
+    // 仓库下拉框
+    async _getBcpStor () {
+      let res = await getBcpStor()
+      this.options1 = [...res.data]
+    },
+    // 单据类型下拉框
+    async _getBillType () {
+      let res = await getBillType()
+      this.options2 = [...res.data]
+    },
+    // 入库点下拉框
+    async _getPoint () {
+      let res = await getPoint()
+      this.options3 = [...res.data]
+    },
+    toAddBillMater () {
+      this.$router.push('/selectfinishedmater')
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.material_code ? '' : e.material_code
+      this.pkObj = this.pkId === e.material_code ? e : {}
     }
   }
 }