@ -9,24 +9,25 @@
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "name" label = "标题" > < el -table -column prop = "name" label = "标题" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< el -input placeholder = "请输入标题" v-model ="scope.row.title" > < / el -input > < el -input placeholder = "请输入标题" :disabled ="!scope.row.operate" @blur ="blur(scope.row)" @focus ="focus()" v-model ="scope.row.title" > < / el -input >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "name" label = "详情描述" > < el -table -column prop = "name" label = "详情描述" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< el -input placeholder = "请输入详情描述" type = "textarea" v-model ="scope.row.description" > < / el -input > < el -input placeholder = "请输入详情描述" :disabled ="!scope.row.operate" @blur ="blur(scope.row)" @focus ="focus()" type = "textarea" v-model ="scope.row.description" > < / el -input >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "name" label = "状态" width = "150" > < el -table -column prop = "name" label = "状态" width = "150" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< el -select v-model ="scope.row.status" clearable placeholder="请选择状态" > < el -select v-model ="scope.row.status" :disabled="!scope.row.operate" clearable placeholder="请选择状态" >
< el -option v-for ="(item,index) in statusList" :key="index" :label="item.name" :value="item.value" > < / el -option > < el -option v-for ="(item,index) in statusList" :key="index" @blur="blur(scope.row)" @focus="focus()" :label="item.name" :value="item.value" > < / el -option >
< / e l - s e l e c t > < / e l - s e l e c t >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column label = "操作" align = "center" width = "170" > < el -table -column label = "操作" align = "center" width = "170" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< el -button type = "text" @click ="saveData(scope.row)" > 保存 < / el -button > < el -button v-if ="!scope.row.operate" type="text" @click="operateIt(scope.row)" > 编辑 < / el -button >
< el -button v -else type = "text" @click ="saveData(scope.row)" > 保存 < / el -button >
< el -button type = "text" @click ="handleDelete(scope.row)" > 删除 < / el -button > < el -button type = "text" @click ="handleDelete(scope.row)" > 删除 < / el -button >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
@ -44,6 +45,7 @@ export default {
name : "matchProgress" , name : "matchProgress" ,
data ( ) { data ( ) {
return { return {
save : false ,
id : this . $route . query . id , id : this . $route . query . id ,
statusList : [ statusList : [
{ {
@ -65,19 +67,58 @@ export default {
pageSize : 10 , pageSize : 10 ,
totals : 0 , totals : 0 ,
touchTime : 0 , touchTime : 0 ,
timeOut : { }
} ; } ;
} , } ,
mounted ( ) { mounted ( ) {
this . getData ( ) ; this . getData ( ) ;
console . log ( this . listData )
} , } ,
methods : { methods : {
operateIt ( row ) {
this . $store . commit ( "match/setWait" , true ) ;
row . operate = true
} ,
blur ( row ) {
/ / i f ( t h i s . s a v e ) {
/ / c o n s o l e . l o g ( ' a r e y o u s a v e ? ' )
/ / }
this . timeOut = setTimeout ( ( ) => {
this . $confirm ( '暂未保存，是否保存本次编辑?' , '提示' , {
confirmButtonText : '确定' ,
cancelButtonText : '取消' ,
type : 'warning'
} ) . then ( ( ) => {
this . saveData ( row )
} ) . catch ( ( ) => {
this . $message ( {
type : 'success' ,
message : '已取消保存'
} ) ;
} ) ;
} , 500 )
} ,
focus ( ) {
clearInterval ( this . timeOut )
/ / t h i s . s a v e = f a l s e
} ,
getData ( ) { getData ( ) {
this . $get ( ` ${ this . api . getContestProgress } / ${ this . id } ` ) . then ( res => { this . $get ( ` ${ this . api . getContestProgress } / ${ this . id } ` ) . then ( res => {
this . listData = res . contestProgressList ; this . listData = res . contestProgressList ;
for ( let index = 0 ; index < this .listData.length ; index + + ) {
/ / 未 点 编 辑 时 不 可 输 入
this . $set ( this . listData , index , { operate : false , ... this . listData [ index ] } )
}
console . log ( this . listData )
} ) . catch ( res => { } ) . catch ( res => {
} ) ; } ) ;
} , } ,
saveData ( row ) { saveData ( row ) {
/ / 有 点 编 辑 的 时 候 就 要 等 待 确 认
this . $store . commit ( "match/setWait" , false ) ;
let data = row ; let data = row ;
if ( data . title . length ) { if ( data . title . length ) {
if ( row . id ) { if ( row . id ) {
@ -132,7 +173,8 @@ export default {
id : "" , id : "" ,
title : "" , title : "" ,
description : "" , description : "" ,
status : 0 status : 0 ,
operate : true
} ) ; } ) ;
console . log ( this . listData ) console . log ( this . listData )
} else { } else {
@ -144,13 +186,13 @@ export default {
id : "" , id : "" ,
title : "" , title : "" ,
description : "" , description : "" ,
status : 0 status : 1 , / / s t a t u s 为 1 时 表 示 未 保 存 的
operate : true
} ) ; } ) ;
} }
} , } ,
} , waitSave ( ) {
beforeDestroy ( ) { if ( this . hasEdit ) {
if ( this . touchTime > 0 ) {
this . $confirm ( '暂未保存，是否保存本次编辑?' , '提示' , { this . $confirm ( '暂未保存，是否保存本次编辑?' , '提示' , {
confirmButtonText : '确定' , confirmButtonText : '确定' ,
cancelButtonText : '取消' , cancelButtonText : '取消' ,
@ -183,13 +225,68 @@ export default {
message : '保存成功!' message : '保存成功!'
} ) ; } ) ;
} }
this . $store . commit ( "match/setWait" , false ) ;
this . $emit ( 'waitChange' )
} ) . catch ( ( ) => { } ) . catch ( ( ) => {
this . $message ( { this . $message ( {
type : 'info' , type : 'info' ,
message : '已取消保存' message : '已取消保存'
} ) ; } ) ;
this . $store . commit ( "match/setWait" , false ) ;
this . $emit ( 'waitChange' )
} ) ; } ) ;
} }
}
} ,
computed : {
hasEdit ( ) {
const judge = this . listData . some ( item => item . operate )
return judge
}
} ,
beforeDestroy ( ) {
/ / i f ( t h i s . t o u c h T i m e > 0 ) {
/ / i f ( t h i s . h a s E d i t ) {
/ / t h i s . $ c o n f i r m ( ' 暂 未 保 存 ， 是 否 保 存 本 次 编 辑 ? ' , ' 提 示 ' , {
/ / c o n f i r m B u t t o n T e x t : ' 确 定 ' ,
/ / c a n c e l B u t t o n T e x t : ' 取 消 ' ,
/ / t y p e : ' w a r n i n g '
/ / } ) . t h e n ( ( ) = > {
/ / l e t n u m = 0 ;
/ / f o r ( v a r i = 0 ; i < t h i s . l i s t D a t a . l e n g t h ; i + + ) {
/ / l e t d a t a = t h i s . l i s t D a t a [ i ] ;
/ / i f ( d a t a . t i t l e ) {
/ / i f ( t h i s . l i s t D a t a [ i ] . i d ) {
/ / t h i s . $ p u t ( t h i s . a p i . e d i t C o n t e s t P r o g r e s s , d a t a ) . t h e n ( r e s = > {
/ / } ) . c a t c h ( r e s = > {
/ / } ) ;
/ / } e l s e {
/ / n u m = n u m + 1
/ / }
/ / } e l s e {
/ / n u m = n u m + 1
/ / }
/ / }
/ / i f ( n u m > 0 ) {
/ / t h i s . $ m e s s a g e ( {
/ / t y p e : ' e r r o r ' ,
/ / m e s s a g e : ' 保 存 失 败 ， 有 未 填 项 目 '
/ / } ) ;
/ / } e l s e {
/ / t h i s . $ m e s s a g e ( {
/ / t y p e : ' s u c c e s s ' ,
/ / m e s s a g e : ' 保 存 成 功 ! '
/ / } ) ;
/ / }
/ / } ) . c a t c h ( ( ) = > {
/ / t h i s . $ m e s s a g e ( {
/ / t y p e : ' i n f o ' ,
/ / m e s s a g e : ' 已 取 消 保 存 '
/ / } ) ;
/ / } ) ;
/ / }
} , } ,
} ; } ;
< / script > < / script >
