nsgk_mobile/src/views/sunVillage_info/detailed_liabilities.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="search_info">
        <div class="date_box" @click="showPickerTime = true">
          <img src="../../assets/images/sunVillage_info/date_icon.png">
          <p>{{date}}</p>
        </div>
        <van-popup v-model="showPickerTime" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            :formatter="formatter"
          />
        </van-popup>
        <div class="search_block">
          <i class="icon"></i>
          <input readonly type="text" class="ipt" v-model="searchDate.templateName" placeholder="请选择科目查询" @click="visible=true">
        </div>
        <van-popup v-model="visible" position="bottom">
          <van-picker
            show-toolbar
            :columns="expressionOptions"
            value-key="name"
            @confirm="onConfirmExpression"
            @cancel="visible = false"
          />
        </van-popup>
<!--        <div class="total">共{{listLength}}个资产</div> @input="getSearch"-->
      </div>

<!--      <div class="radio_box">-->
<!--        <van-checkbox v-model="queryParams.showSubSubject" @change="showSub" checked-color="#2facfe">显示明细</van-checkbox>-->
<!--        <div class="total">共{{listLength}}条</div>-->
<!--      </div>-->

      <div class="balance-main">
        <div class="main-title">
          <div class="company">单位:{{ this.$store.getters.bookName }}</div>
          <div class="nper">{{ accountingYear }}年{{ accountingMonth }}期</div>
          <div class="amountOf">金额:元</div>
        </div>
        <div class="main-center">
          <div class="datagrid">
            <div class="header">
              <div class="xmmc">资产</div>
              <div class="qj">年初余额</div>
              <div class="zy">期末余额</div>
              <div class="dfje">负债与所有者权益</div>
              <div class="fx">年初余额</div>
              <div class="ye">期末余额</div>
            </div>
            <div class="mok_list">
              <ul class="list">
                <li v-for="(item, index) in list" :key="index">
                  <div class="xmmc">{{ item.subjectNameLeft }}</div>
                  <div class="qj">{{ item.ncyeLeft }}</div>
                  <div class="zy">{{ item.qmyeLeft }}</div>
                  <div class="dfje">{{ item.subjectNameRight }}</div>
                  <div class="fx">{{ item.ncyeRight }}</div>
                  <div class="ye">{{ item.qmyeRight }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  import { trailBalanceList , expressionReportByCategory,getLoginBook,assetLiabilityReportByExpTpl } from "@/api/sunVillage_info/fixedAssets";
  import SubjectTreeChooser from "@/components/form/SubjectTreeChooser";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  import {FINANCE} from "@/utils/finance";
  export default {
    name: "certificateList",
    components: { SubjectTreeChooser },
    data() {
      return {
        expressionOptions:[],
        searchDate: {
          bookDate: "",
          templateName: '资产负债表',
          signature: false, // 添加底部落款
        },

        list: [],
        accountingYear: "",
        accountingMonth: "",
        // 显示搜索条件
        visible: false,
        showPickerTime: false,

        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        date:''
      };
    },
    created() {
      getLoginBook().then((res) => {
        if (res.code == 200) {
          let currentDays = res.data.currentDay;
          if (currentDays == null) {
            this.$message.error("当前账套未开启!");
            return false;
          }

          let dealDays = currentDays.split("-");
          this.accountingYear = dealDays[0]; //当前帐套年
          this.accountingMonth = dealDays[1]; //当前帐套月

          this.date = dealDays[0]+'年'+dealDays[1]+'月';

          this.$set(this.searchDate, "bookDate", currentDays);
          this.initPage();
        }
      });
      expressionReportByCategory('资产负债表').then((resp) => {
        this.expressionOptions = resp.data;
      });
    },
    methods: {
      initPage() {
        assetLiabilityReportByExpTpl(this.searchDate).then((res) => {
          if (res.code == 200) {
            let content = res.data;
            this.list = content.list.map((x) => {
              x.ncyeLeft = FINANCE.formatNum(x.ncyeLeft);
              x.qmyeLeft = FINANCE.formatNum(x.qmyeLeft);
              x.ncyeRight = FINANCE.formatNum(x.ncyeRight);
              x.qmyeRight = FINANCE.formatNum(x.qmyeRight);
              return x;
            });
          }
        });
      },
      searchFrom() {
        this.voucherFormShow = false;
        let dealDays = this.searchDate.bookDate.split("-");
        this.accountingYear = dealDays[0]; //当前帐套年
        this.accountingMonth = dealDays[1]; //当前帐套月
        this.initPage();
      },
      onConfirm(time) {
        console.log(this.format(time,'yyyy-MM'))
        this.date = this.format(time,'yyyy年MM月');
        this.searchDate.bookDate = this.format(time,'yyyy-MM');
        this.initPage();
        this.showPickerTime = false;
        let dealDays = this.searchDate.bookDate.split("-");
        this.accountingYear = dealDays[0]; //当前帐套年
        this.accountingMonth = dealDays[1]; //当前帐套月
      },
      onConfirmExpression(data){
        this.searchDate.templateName = data.name;
        this.visible = false;
        this.initPage();
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val;
      },
      getSearch(val){
        console.log(val)
        this.subjectName = val.subjectId + " " + val.subjectName;
        this.queryParams.endSubjectId = this.queryParams.startSubjectId;
        this.getList();
      }
    },
  }
</script>

<style scoped lang="scss">

  .balance-main {
    background: #fff;
    .main-title {
      margin-bottom: 5PX;
      padding: 0 10PX;
      height: 33PX;
      line-height: 33PX;
      color: #333;
      font-size: 13PX;
      display: flex;
      justify-content: space-between;
      .company {
      }
      .nper {
        text-align: center;
      }
      .amountOf {
        text-align: right;
      }
    }
    .main-center {
      // min-height: 404PX;
      border: 1PX solid #CACBCC;
      border-bottom: 0;
      overflow-x: scroll;
      .datagrid {
        min-height: 100PX;
        width: 250%;
        .header {
          background: #f8f8f9;
          font-weight: bold;
          display: flex;
          color: #278dff;
        }
        .kmbm,
        .xmmc,
        .qj,
        .zy,
        .jfje,
        .dfje,
        .fx,
        .ye {
          height: 29PX;
          line-height: 29PX;
          font-size: 13PX;
          border-bottom: 1PX solid #CACBCC;
          border-right: 1PX solid #CACBCC;
          text-align: center;
        }
        .xmmc {
          width: 26%;
          text-align: left;
          padding-left: 10PX;
        }
        .qj {
          width: 12%;
          text-align: right;
          padding-right: 10PX;
        }
        .zy {
          width: 12%;
          text-align: right;
          padding-right: 10PX;
        }

        .dfje {
          width: 26%;
          text-align: left;
          padding-left: 10PX;
        }
        .fx {
          width: 12%;
          text-align: right;
          padding-right: 10PX;
        }
        .ye {
          width: 12%;
          text-align: right;
          padding-right: 10PX;
          border-right: 0;
        }
        .mok_list {
          display: block;
          overflow-y: scroll;
          height: calc(100vh - 200PX);
          //background: url("~@/assets/images/report_line.png") repeat;
        }
        .list {
          width: 100%;
        }
        ul {
          margin: 0;
          padding: 0;
          li {
            display: block;
            overflow: hidden;
            list-style: none;
            &.header {
              background: #f8f8f9;
              font-weight: bold;
            }
            &:nth-child(even){
              background: #e9e9e9;
            }
            .kmbm,
            .xmmc,
            .qj,
            .zy,
            .jfje,
            .dfje,
            .fx,
            .ye {
              height: 29PX;
              line-height: 29PX;
              float: left;
              font-size: 13PX;
              border-bottom: 1PX solid #CACBCC;
              border-right: 1PX solid #CACBCC;
              text-align: center;
            }
            .xmmc {
              width: 26%;
              text-align: left;
              padding-left: 10PX;
            }
            .qj {
              width: 12%;
              text-align: right;
              padding-right: 10PX;
            }
            .zy {
              width: 12%;
              text-align: right;
              padding-right: 10PX;
            }

            .dfje {
              width: 26%;
              text-align: left;
              padding-left: 10PX;
            }
            .fx {
              width: 12%;
              text-align: right;
              padding-right: 10PX;
            }
            .ye {
              width: 12%;
              text-align: right;
              padding-right: 10PX;
              border-right: 0;
            }
          }
        }
      }
    }
  }

  /deep/ .van-radio__label{
    font-size: 14PX;
    color: #2facfe;
  }
  .radio_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:20px 23px;
  }
  .date_box{
    display: flex;
    align-items: center;
    img{
      width: 30PX;
      border-radius: 100%;
      box-shadow: 0px 6px 10px rgba(63,68,75,0.5);
    }
    p{
      font-size: 14PX;
      margin-left: 5PX;
      color: #2facfe;
    }
  }
  .search_info{
    padding:20px 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search_block{
      height: 59px;
      width: 450px;
      border-radius: 59px;
      background: #fff;
      display: flex;
      padding-right: 35px;
      align-items: center;
      box-shadow: 0px 6px 5px rgba(63,68,75,0.2);
      .icon{
        width: 30px;
        height: 30px;
        background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
        background-size: 100% 100%;
        display: block;
        margin:0 8px 0 26px;
      }
      .delete_icon{
        width: 15PX;
        height: 15PX;
        background: url('../../assets/images/sunVillage_info/delete_icon_input.png') no-repeat;
        background-size: 100% 100%;
        display: block;
        margin:0 8px 0 26px;
      }
      .ipt{
        flex: 1;
        font-size: 26px;
        background: none;
        border:0 none;
        line-height: 59px;
      }
    }
  }
  .total{
    font-size: 14PX;
    color: #858585;
  }
.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: 100px;
            border-radius: 30px;
            background: #fff;
            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
            padding:15px 32px;
            display: flex;
            margin-bottom: 20px;
            .info{
                flex:1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .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;
                    }
                }
                .red{
                  color: #fa0c0c;
                }
                .green{
                  color: #4caf50;
                }
                .time{
                    font-size: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: right;
                    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: flex-end;
                text-align: right;
                .opera_btn{
                    width: 52px;
                    height: 52px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content:center;

                    &.delete{
                        background:#df0707;
                        margin-left: 28px;
                        .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;
                        }
                    }
                }
            }
        }

    }
    .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;
         }
    }
    .banner {
      display: flex;
      background:#3494ff;
      color:#fff;
      text-align: center;
      margin:3%;
      border-radius: 10PX;
    }
    .banner_tabs{
      flex:1;
      padding:10PX 0;
      font-size: 16PX;
      div:nth-child(2){
        font-size: 14PX;
        margin-top: 5PX;
      }
    }
}
.top_head_title{
  font-size: 16PX;
  text-align: center;
  padding: 15PX 0;
}
  .name_box{
    float: left;
    width: 180PX;
    position: relative;
    .name_bg{
      background-color: rgba(47,172,254,0.2);
      width: 180PX;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .name_icon{
      position: absolute;
      top: 60PX;
      left: 50%;
      transform: translateX(-50%);
    }
    .van-row:nth-child(odd){
      .van-col {
        background-color: #ffffff;
      }
    }
    .van-row:nth-child(1){
      border-top-left-radius: 10PX;
      border-bottom-left-radius: 10PX;
      background-color: #ffffff;
      .van-col {
        background-color: #2facfe;
        color: #ffffff;
        border-radius: 10PX;
        line-height: 60PX;
        text-align: center;
      }
    }
    .van-col{
      font-size: 16PX;
      padding: 0PX 5PX;
      text-align: left;
      line-height: 40PX;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break: break-all;
      overflow: hidden;
    }
  }
  .center_box{
    padding: 0 3%;
  }
  .right_box{
    float: left;
    width: calc(100%);
    overflow:hidden;
    overflow-x: scroll;
    white-space:nowrap;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    .right_box_box{
      width: 600PX;
    }
    .van-row:nth-child(odd){
      .van-col{
        background-color: #ffffff;
      }
    }
    .van-row:nth-child(1){
      .van-col{
        color: #2facfe;
        height: 60PX;
        text-align: center;
        line-height: 30PX;
        border-right: 1px solid #ccc;
      }
    }
    .van-col{
      font-size: 16PX;
      text-align: right;
      height: 40PX;
      line-height: 40PX;
      &:nth-child(2n){
        border-right: 1px solid #ccc;
      }
    }

    .yue_type{
      display: flex;
      border-top: 1px solid #2facfe;
      p{
        width: 50%;
        line-height: 30PX;
        color: #333333;
      }
    }

  }
  .clear{
    clear: both;
  }
</style>