nsgk_mobile/src/views/sunVillage_info/statistical_report.vue

<template>
    <div class="home_wrapper">
        <div class="header_main">
            统计填报
            <div class="return_btn" @click="onClickLeft"></div>
            <div class="add_btn" @click="goAdd"></div>
        </div>

        <div class="list_main">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <!--1-->
            <van-swipe-cell right-width="150" class="item"  v-for="(item,index) in applicationList" :key="index">
               <div class="item_box" @click="$router.push({name:'sunVillageInfoStatisticalReportEdit',query:{id:item.id}})">
                 <div class="head_block">
                      <i class="icon"></i>
                      <div class="title">{{item.templateName}}</div>
                  </div>

                  <div class="order_block">
                        <div class="flex_block">
                            <i class="icon icon_1"></i>
                            <div class="text">{{item.time}}</div>
                        </div>
                        <div class="flex_block" v-if="item.applyUserName">
                            <i class="icon icon_2"></i>
                            <div class="text">{{item.applyUserName}}</div>
                        </div>
                        <div class="flex_block" v-if="item.processKey">
                            <i class="icon icon_2"></i>
                            <div class="text">{{item.processKey}}</div>
                        </div>
                  </div>
               </div>
              <template #right>
                <div style="background-color: #ee0a24;height: 100%" @click="handleDelete(item,index)" >删除</div>
                <router-link :to="{name:'sunVillageInfoStatisticalReportEdit',query:{id:item.id}}" style="background-color: #07c160">修改</router-link>
              </template>
            </van-swipe-cell>
          </van-list>

        </div>

   </div>
</template>

<script>
 import { statisticsList ,delStatisticsRemove} from "@/api/sunVillage_info/fixedAssets";
export default {
  name: "statisticalReport",
  data() {
    return {
      loading: false,
      finished: false,
      applicationList:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
        // orderByColumn:'createTime',
        // isAsc:'desc',
      },
  
    };
  },
  created() {
    
  },
  methods: {
    getList(){
      statisticsList(this.queryParams).then((response)=>{
        if(response.code == 200){
          for (var i = 0; i < response.rows.length; i++) {
            this.applicationList.push(response.rows[i]);
          }
     
          if(this.applicationList.length >= response.total){
             this.finished = true;
             return;
           }else{
             this.loading = false;
             this.queryParams.pageNum += 1 ;
           }
        }
      })  
    },
    /** 删除按钮操作 */
    handleDelete(row,index) {
      const ids = row.id || this.ids;
      this.$dialog.alert(
         {
           message:'是否确认删除填报信息?',
           title:"警告",
           showCancelButton:true,
           confirmButtonText: "确定",
           cancelButtonText: "取消",
         }
       )
       .then(function () {
          return delStatisticsRemove(ids)
       })
       .then(() => {
        this.applicationList.splice(index, 1);
        this.$notify({ type: 'success', message: '删除成功' });
       })
    },

    goAdd(){
      this.$router.push('/sunVillage_info/statistical_report_edit')
    },
  },
}
</script>

<style scoped lang="scss">
.home_wrapper{
   background: #e9e9e9;
   min-height: 100vh;
   width: 100vw;
   .header_main {
       height: 116px;
       background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
       background-size: 100% 100%;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       font-size: 36px;
       line-height: 116px;
       text-align: center;
       color: #fff;
       position: relative;

       .return_btn {
           width: 24px;
           height: 43.2px;
           background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
           background-size: 20px 36px;
           position: absolute;
           left: 38px;
           top: 36px;
       }

       .add_btn {
           width: 56.4px;
           height: 40.8px;
           background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
           background-size: 47px 34px;
           position: absolute;
           right: 38px;
           top: 36px;
       }
   }

   .list_main{
       padding:26px 22px 0;
       .item{
           height: 162px;
           border-radius: 30px;
           background: #fff;
           box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
           margin-bottom: 20px;
           .item_box{
             padding:25px 32px;
           }
           .head_block{
               height: 62px;
               display: flex;
               align-items: center;
               width: 100%;
                .icon{
                   width: 34px;
                   height: 30px;
                   background: url('../../assets/images/sunVillage_info/fixedAssets_icon_4.png') no-repeat;
                   background-size: 100% 100%;
                   display: block;
                   margin-right: 12px;
               }
               .title{
                   flex:1;
                   font-size: 32px;
                   color: #252525;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;
                   padding-right: 20px;

               }
           }
           .order_block{
                display: flex;
                height: 52px;
                padding-top: 12px;
                font-size: 24px;
                color: #858585;
                align-items: center;
                padding-bottom: 10px;
                .flex_block{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 28px;
                    height: 42px;
                    .icon{
                        width: 25px;
                        height: 25px;
                        margin-top: 3px;
                        margin-right: 8px;
                        &.icon_1{
                            background:  url('../../assets/images/sunVillage_info/fixedAssets_icon_3.png') no-repeat;
                            background-size: 100% 100%;
                        }
                        &.icon_2{
                            background:  url('../../assets/images/sunVillage_info/fixedAssets_icon_5.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
           }




       }
   }

   /deep/ .van-swipe-cell__right{
     display: flex;
     align-items: center;
     width: 150PX;
     margin-left: 5PX;
     a,div{
       margin: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #ffffff;
       font-size: 14PX;
       height: 100%;
       flex: 1;
     }
   }
}
</style>