@@ -2,7 +2,7 @@
* @ Author : zwq
* @ Date : 2021 - 11 - 18 14 : 16 : 25
* @ LastEditors : DY
* @ LastEditTime : 2023 - 12 - 22 16 : 02 : 25
* @ LastEditTime : 2023 - 12 - 26 16 : 59 : 25
* @ Description :
-- >
< template >
@@ -16,8 +16,17 @@
<!-- < small-title slot = "title" :no-padding = "true" >
{ { isdetail ? '详情' : ! dataForm . id ? '新增' : '编辑' } }
< / small-title > -- >
< div v-show = "workOrderButton.length" >
< el -button v-for = "(work, index) in workOrderButton" :key="index" type="primary" @click="init(work.id, true)" > {{ work.name }} < / el -button >
< div v-show = "workOrderButton.length" class="buttonDiv" >
< div style = "display: flex; width: 100%;" >
< el-button v-show = "showScroll" type="text" style="width: 30px; background: white; margin-right: 8px" @click="scrollLeft" icon="el-icon-caret-left" > < / el -button >
< div ref = "content" class = "scrollDiv" >
< el-button style = "border: none" v-for = "(work, index) in workOrderButton" :key="index" @click="init(work.id, true)" > {{ work.name }} < / el -button >
< / div >
< el-button v-show = "showScroll" type="text" @click="scrolRight" style="width: 30px; background: white; margin-left: 8px" icon="el-icon-caret-right" > < / el -button >
< el-button style = "float: right" type = "primary" size = "small" plain @click ="goback()" >
< svg -icon icon -class = " return " / > 返回
< / el-button >
< / div >
< / div >
< div class = "content" >
< div class = "card" >
@@ -25,7 +34,7 @@
< span class = "blueTitle" > < / span >
< span > 工单编码 : { { dataForm . code } } < / span >
< / div >
< el-button style = "float: right" type= "primary" size= "small" plain @click ="goback()">
< el-button v-if = "!workOrderButton.length" style= "float: right" type= "primary" size= "small" plain @click="goback()">
< svg -icon icon -class = " return " / > 返回
< / el-button >
< div class = "formContent" >
@@ -293,8 +302,10 @@ export default {
// orderArray: [],
visible : false ,
isdetail : false ,
showScroll : false ,
workOrderButton : [ ] ,
processFlowList : [ ] ,
timer : null
// tableH: this.tableHeight(510) / 2
} ;
} ,
@@ -311,6 +322,13 @@ export default {
name : work . name
}
} )
const contentRef = this . $refs . content
if ( contentRef . scrollWidth > contentRef . clientWidth ) {
this . showScroll = true
} else {
this . showScroll = false
}
console . log ( contentRef . scrollWidth , contentRef . clientWidth )
this . init ( this . workOrderButton [ 0 ] . id , true )
} )
} else {
@@ -318,6 +336,24 @@ export default {
}
} ,
methods : {
scrolRight ( ) {
// let contentRef = this.$refs.content
// console.log('你好啊啊', contentRef.scrollWidth, contentRef.clientWidth)
this . stopScroll ( )
this . timer = setTimeout ( ( ) => {
this . $refs . content . scrollLeft += 50
} , 100 )
// if (contentRef.scrollWidth > contentRef.clientWi)
} ,
scrollLeft ( ) {
this . stopScroll ( )
this . timer = setTimeout ( ( ) => {
this . $refs . content . scrollLeft -= 50
} , 100 )
} ,
stopScroll ( ) {
clearTimeout ( this . timer )
} ,
getDict ( ) {
// 工艺
getProcessFlowList ( ) . then ( res => {
@@ -458,6 +494,20 @@ export default {
} ;
< / script >
< style scoped >
. scrollDiv {
width : 100 % ;
overflow - x : hidden ;
/* height: 50px; */
display : flex ;
/* padding-bottom: -10px; */
}
. scrollDiv : : - webkit - scrollbar - track {
display : none ;
}
. buttonDiv {
margin - bottom : 8 px ;
display : flex ;
}
. formContent {
font - size : 16 px ;
line - height : 1.5 ;
@@ -481,7 +531,7 @@ export default {
margin - bottom : 8 px ;
}
. lightTip {
height: 16 px ;
/* height: 16px; */
font - size : 14 px ;
font - weight : 400 ;
color : rgba ( 102 , 102 , 102 , 0.75 ) ;