nsgk_mobile/src/views/sunVillage_info/list_finance.vue

<template>
    <div class="home_wrapper">
        <div class="header_main">
            财务公开榜
            <div class="return_btn" @click="onClickLeft"></div>
            <div class="add_btn" v-show="showBtn" @click="goAdd"></div>
        </div>
        <div class="record_main">
            <div class="record_det">
                <div class="year_l" @click="tabShow"><i :class="{'icon':true , 'zk':!showTab ,  'ss':showTab } "></i>{{queryParams.year == '' ? '全部': queryParams.year}}<span class="unit">{{queryParams.year == '' ? '': '年'}}</span></div>
                <div class="total_r">共{{listLength}}条公告</div>
            </div>
            <div class="record_list" v-if="showTab">
                <div :class="{'flex_block':true , 'current':queryParams.year == ''}" @click="tabClick('')">全部</div>
                <div :class="{'flex_block':true , 'current':queryParams.year == '2022'}" @click="tabClick('2022')">2022</div>
                <div :class="{'flex_block':true , 'current':queryParams.year == '2021'}" @click="tabClick('2021')">2021</div>
                <div :class="{'flex_block':true , 'current':queryParams.year == '2020'}" @click="tabClick('2020')">2020</div>
            </div>
        </div>
        <div class="list_main">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <!----1-->
            <div class="item" v-for="(item,index) in applicationList" :key="index">
                <div class="info" @click="goDetail(item.id)">
                    <div class="title">
                        <i class="icon_box"></i>
                        <p class="news_title">{{item.openName}}</p>
                        <p class="tips_mark" v-if="index==0">新</p>
                    </div>
                    <div class="time">
                        <div class="icon_time"></div>
                        {{item.openNy}}
                    </div>
                </div>
                <div class="operation">
                    <!-- delete 删除 edit编辑 view查看 -->
                  <div class="opera_btn list" @click="goRanking(item.id,item.openNy)">
                    <i class="icon "></i>
                  </div>
                    <div class="opera_btn edit" @click="goEdit(item.id)" v-show="showBtn">
                        <i class="icon "></i>
                    </div>
                    <div class="opera_btn delete" @click="goRemove(item.id)" v-show="showBtn">
                        <i class="icon"></i>
                    </div>
                    <div class="opera_btn view" @click="goDetail(item.id)" v-show="!showBtn">
                        <i class="icon "></i>
                    </div>

                </div>
            </div>
          </van-list>
        </div>
<!--        <div class="bottom_tips">-->
<!--            <span class="xs">已经到底啦</span>-->
<!--        </div>-->
    </div>
</template>

<script>
  import { financePublicList,openRemove } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        applicationList:[],
        applicationListSecond:[],
        assetStatusOptions:[],
        auditStatus:[],
        loading: false,
        finished: false,
        show: false,
        showTab: false,
        fileList:[],
        listLength:'0',
        searchInput:'',
        queryParams:{
          pageNum:1,
          pageSize:10,
          orderByColumn:'createTime',
          isAsc:'desc',
          year:'',
        },
        uploadFiles1:[],
        projectId:'',
        projectIndex:'',
        showBtn:true,
      };
    },
    created() {
      this.queryParams.bookId = Cookies.get('bookId');
      this.queryParams.deptId = Cookies.get('deptId');
      if (this.$route.query.type == 'code'){
        this.showBtn = false;
      }
    },
    methods: {
      getList(){
        var _this = this;
        setTimeout(() => {
          console.log(_this.queryParams)
          financePublicList(_this.queryParams).then(response => {
            _this.listLength = response.total;
            _this.applicationList = response.rows;

            if(_this.applicationList.length >= response.total){
              _this.finished = true;
              return;
            }else{
              _this.loading = false;
              _this.queryParams.pageNum += 1 ;
            }
          });
        }, 1000);
      },
      tabClick(year){
        this.queryParams.year = year ;
        this.applicationList = [];
        this.getList();
      },
      tabShow(){
        this.showTab = !this.showTab;
      },
      /** 删除按钮操作 */
      handleDelete(row,index) {
        let assetStatus = row.assetStatus ? row.assetStatus : data[0].assetStatus;
        if (assetStatus === '2' || assetStatus === '3') {
          this.$notify({
            message: "不允许删除已出售或已报废的资产",
            type: "warning",
          });
          return;
        }
        let useType = row.useType;
        if(useType == 3) {
          this.$notify({
            message: "出租或出借的资产不允许删除",
            type: "warning",
          });
          return ;
        }
        const ids = row.id || this.ids;

        this.$dialog.alert(
          {
            message:'是否确认删除固定资产?',
            title:"警告",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        )
          .then(function () {
            return delPermanent(ids);
          })
          .then(() => {
            this.applicationList.splice(index, 1);
            this.$notify({ type: 'success', message: '删除成功' });
          });
      },
      goAdd(){
        this.$router.push('/sunVillage_info/list_finance_add')
      },
      goDetail(id){
        this.$router.push({path:'/sunVillage_info/list_finance_detail',query: {id:id,type:'finance'}})
      },
      goRanking(id,time){
        this.$router.push({path:'/sunVillage_info/list_finance_ranking',query: {id:id,time:time}})
      },
      goEdit(id){
        this.$router.push({path:'/sunVillage_info/list_finance_edit',query: {id:id,type:'finance'}})
      },
      goRemove(id){
        this.$dialog.alert({
          title: '提示',
          message: '确认删除？',
          showCancelButton:true,
        })
          .then(() => {
            openRemove(id).then(response => {
              this.$notify({ type: 'success', message: '删除成功' });
              this.getList()
            });
          })
          .catch(() => {
            // on cancel
          });

      }
    },
  }
</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;
        }
    }
    .record_main{
        padding:30px 22px;
        .record_det{
            height: 38px;
            line-height: 38px;
            display: flex;
            justify-content:space-between;
            .year_l{
                font-size: 30px;
                display: flex;
                align-items: center;
                color: #858585;

                .unit{
                    padding-left: 5px;
                }
                .icon{
                    width: 23px;
                    height: 12px;
                    display: block;
                    background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;
                    background-size: 100% 100%;
                    margin-bottom: 4px;
                    margin-right: 8px;
                    &.zk {
                        transform: rotate(0deg)
                    }
                    &.ss{
                        transform: rotate(180deg)
                    }

                }
            }
            .total_r{
                font-size: 26px;
                letter-spacing: 2px;
            }
        }
        .record_list{
            display: flex;
            flex-flow: wrap;
            margin-top: 12PX;
            .flex_block{
                font-size: 30px;
                color: #878787;
                padding-right: 30px;
                &.current{
                    color: #4199fe;
                    font-weight: bold;
                }
            }
        }
    }
    .list_main{
        padding:0 22px;
        .item{
            height: 140px;
            border-radius: 30px;
            background: #fff;
            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
            padding:25px 32px;
            display: flex;
            margin-bottom: 20px;
            .info{
                flex:0 0 450px;
                .title{
                    display: flex;
                    font-size: 32px;
                    align-items: center;
                    height: 58px;
                    .icon_box{
                        width: 34px;
                        display: block;
                        height: 30px;
                        background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }
                    .news_title{
                        max-width:416px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        -o-text-overflow: ellipsis;
                    }
                    .tips_mark{
                        width: 34px;
                        height: 34px;
                        background: #fa0c0c;
                        border-radius: 8px;
                        font-size: 24px;
                        color: #fff;
                        text-align: center;
                        line-height: 34px;
                        margin-left: 10px;
                    }
                }
                .time{
                    font-size: 24px;
                    color: #858585;
                    display: flex;
                    align-items: center;
                    height: 30px;
                    margin-top: 6px;
                    .icon_time{
                        width: 25px;
                        height: 25px;
                        background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }
                }
            }
            .operation{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: right;
                .opera_btn{
                    width: 52px;
                    height: 52px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content:center;
                    &.delete{
                        background:#df0707;
                        .icon{
                            width: 22px;
                            height: 29px;
                            background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                        }
                    }
                    &.edit{
                        background: #79cf13;
                        .icon {
                            width: 26px;
                            height: 25px;
                            background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                        }
                    }
                     &.view{
                        background: #3494ff;
                        .icon {
                            width: 29px;
                            height: 21px;
                            background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                        }
                    }
                     &.list{
                        background: #79cf13;
                        .icon {
                            width: 29px;
                            height: 21px;
                            background: url('../../assets/images/sunVillage_info/list_icon_10.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                        }
                    }
                }
            }
        }

    }
    .bottom_tips{
        font-size: 24px;
         color: #a7a6a6;
         text-align: center;
         margin-top: 32px;
         background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
         background-size: 260px 2px;
         .xs{
            padding:0 8px;
            background: #e9e9e9;
         }
    }
}
</style>