修改问题功能和接口联调

解润东
20211104

src/views/notice/noticeList/index.vue

@@ -35,16 +35,41 @@
             </van-tab>
             <van-tab title="问题记录">
                 <van-checkbox-group v-model="result" @change="checkedEvent" ref="checkboxGroup">
-                    <div class="card" v-for="(item,index) in noticeQuestionList"  :key="index" @click="cardClick(item)">
+                    <div class="card" v-for="(item,index) in noticeQuestionList"  :key="index">
+                        <van-overlay @click.stop="close(item)" :show="item.show"  >
+                            <van-button round type="primary" size="small" @click.stop="update(index,item)">修改</van-button>
+                            <van-button round type="primary" size="small" @click.stop="cardCommit(item)">提交</van-button>
+                        </van-overlay>
                         <van-checkbox :name="item.id" :disabled="finish=='true'?true:item.checkSubmitId?true:false">问题{{index+1}}</van-checkbox>
-                        <div>负责人姓名：{{item.realName}}</div>
-                        <div>问题名称：{{item.title}}</div>
-                        <div>问题位置：{{item.address}}</div>
-                        <div>问题内容：{{item.context}}</div>
-                        <div>发现时间：{{item.checkTime}}</div>
+                        <div @click="cardClick(item)">
+                            <div>负责人姓名：{{item.realName}}</div>
+                            <div>问题名称：{{item.title}}</div>
+                            <div>问题位置：{{item.address}}</div>
+                            <div>问题内容：{{item.context}}</div>
+                            <div>发现时间：{{item.checkTime}}</div>
+                        </div>
                     </div>
                 </van-checkbox-group>
-                
+                <van-dialog v-model="dialogShow" @confirm="commitDialog()" :title="dialogTitle" show-cancel-button>
+                    <van-field
+                        v-model="updateObj.title"
+                        name="问题名称"
+                        label="问题名称"
+                        placeholder="问题名称"
+                    />
+                    <van-field
+                        v-model="updateObj.address"
+                        name="问题位置"
+                        label="问题位置"
+                        placeholder="问题位置"
+                    />
+                    <van-field
+                        v-model="updateObj.context"
+                        name="问题内容"
+                        label="问题内容"
+                        placeholder="问题内容"
+                    />
+                </van-dialog>
                 <div class="page-footer">
                     <van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick" :disabled="finish=='true'?true:false">全选</van-checkbox>
                 </div>
@@ -83,7 +108,7 @@ export default {
     },
     data() {
         return {
-            show:false,//遮罩层是否展示
+            dialogShow:false,//弹框是否显示
             istext:true,//是否显示文字
             isImg:false,//是否显示图片
             istext2:true,//是否显示文字2
@@ -101,6 +126,14 @@ export default {
             showCalendar: false,//弹出层状态
             finish:'',//检查状态
             isFinish:false,//提交状态
+            dialogTitle:'标题',//弹框标题
+            //修改问题对象
+            updateObj:{
+                id:'',//问题ID
+                title:'',//问题名称
+                address:'',//问题位置
+                context:''//问题内容
+            },
         }
     },
     watch:{
@@ -187,8 +220,10 @@ export default {
                 /* ---新增---- */
                 this.isFinish=Response.data.isFinish
                 this.noticeQuestionList=Response.data.list
+                //初始化每个div的弹框，遮罩层显示状态
                 this.noticeQuestionList.forEach((item)=>{
                     item.show=false
+                    item.dialogShow=false
                 })
                 console.log(this.noticeQuestionList)
                 /* ----详情---- */
@@ -329,19 +364,80 @@ export default {
             })
         },
         //卡片单击事件
-        cardClick(){
-            
+        cardClick(item){
+            item.show=true
+            this.$forceUpdate()//强制刷新
+        },
+        //关闭遮罩层事件
+        close(item){
+            item.show=false
+            this.$forceUpdate()//强制刷新
+        },
+        //修改卡片值
+        update(index,item){
+            item.show=false
+            this.dialogShow=true
+            //把列表可编辑数据回显到弹框表单中
+            this.dialogTitle='问题'+(index+1),//标题
+            this.updateObj.id=item.id,//问题ID
+            this.updateObj.title=item.title,//问题名称
+            this.updateObj.address=item.address,//问题位置
+            this.updateObj.context=item.context//问题内容
+            this.$forceUpdate()//强制刷新
+        },
+        //卡片提交
+        cardCommit(item){
+            item.show=false
+            this.$forceUpdate()//强制刷新
+            this.$toast.loading({
+                message:'提交中...',
+                forbidClick: true,
+                loadingType: 'spinner',
+                duration: 0
+            })
+            postFun('check/trouble/update',this.updateObj).then((Response)=>{
+                if(Response.code==0){
+                   this.$toast.clear()
+                   this.$toast.success('提交成功') 
+                }
+            }).catch(()=>{
+                this.$toast.clear()
+                this.$toast.fail('提交失败,请稍后再试')
+            })
+        },
+        //弹框数据提交
+        commitDialog(){
+            this.noticeQuestionList.forEach((item)=>{
+                if(item.id=this.updateObj.id){
+                    item.title=this.updateObj.title,//问题名称
+                    item.addressthis.updateObj.address,//问题位置
+                    item.context=this.updateObj.context//问题内容
+                }
+            })
+            this.$forceUpdate()//强制刷新
         }
     }
 }
 </script>
 <style lang="less" scoped>
     .card{
+        position: relative;
         width:90%;
         box-shadow: 0px 0px 10px 2px #F3F3F3;
         padding: 0.25rem;
         margin:0.4rem auto;
         background: white;
+        .van-overlay {
+            display:flex;
+            justify-content: space-evenly;
+            align-items: center;
+            .van-button{
+                width: 30%;
+                margin-top: 0;
+            }
+            text-align: center;
+            position: absolute;
+        }
     }
     .card div{
         font-size: 0.4rem;
@@ -386,8 +482,4 @@ export default {
         width: 2rem;
         height: 1rem;
     }
-    .wrapper {
-    width: 10%;
-    height: 10%;
-  }
 </style>