This commit is contained in:
2023-06-30 11:27:19 +08:00
parent a49a28370b
commit 07bb2bc3fb
4 changed files with 464 additions and 116 deletions

252
src/components/header2.vue Normal file
View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 : {}
}
}
}