zhangzl
/
nsgk_mobile
2
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
移动端
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
1592 Commit
7 Rami (Branch)
79 MiB
 
 
Albero (Tree): 6b4d40c088
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '6b4d40c088'
${ noResults }
nsgk_mobile/src/views/sunVillage_info/detailed_liabilities.vue

757 righe
21 KiB
Originale Blame Cronologia 

  1. <template>

  2.     <div class="home_wrapper">

  3.       <div class="header_main">

  4.         资产负债表

  5.         <div class="return_btn" @click="onClickLeft"></div>

  6. <!--            <div class="add_btn" v-show="showBtn" @click="goAdd"></div>-->

  7.       </div>

  8. 

  9. 

  10.       <div class="search_info">

  11.         <div class="date_box" @click="showPickerTime = true">

  12.           <img src="../../assets/images/sunVillage_info/date_icon.png">

  13.           <p>{{date}}</p>

  14.         </div>

  15.         <van-popup v-model="showPickerTime" position="bottom">

  16.           <van-datetime-picker

  17.             v-model="currentDate"

  18.             type="year-month"

  19.             title="选择年月"

  20.             :min-date="minDate"

  21.             :max-date="maxDate"

  22.             @confirm="onConfirm"

  23.             @cancel="showPicker = false"

  24.             :formatter="formatter"

  25.           />

  26.         </van-popup>

  27.         <div class="search_block">

  28.           <i class="icon"></i>

  29.           <input readonly type="text" class="ipt" v-model="searchDate.templateName" placeholder="请选择科目查询" @click="visible=true">

  30.         </div>

  31.         <van-popup v-model="visible" position="bottom">

  32.           <van-picker

  33.             show-toolbar

  34.             :columns="expressionOptions"

  35.             value-key="name"

  36.             @confirm="onConfirmExpression"

  37.             @cancel="visible = false"

  38.           />

  39.         </van-popup>

  40. <!--        <div class="total">共{{listLength}}个资产</div> @input="getSearch"-->

  41.       </div>

  42. 

  43. <!--      <div class="radio_box">-->

  44. <!--        <van-checkbox v-model="queryParams.showSubSubject" @change="showSub" checked-color="#2facfe">显示明细</van-checkbox>-->

  45. <!--        <div class="total">共{{listLength}}条</div>-->

  46. <!--      </div>-->

  47. 

  48.       <div class="balance-main">

  49.         <div class="main-title">

  50.           <div class="company">编制单位：{{ this.$store.getters.bookName }}</div>

  51.           <div class="nper">{{ accountingYear }}年{{ accountingMonth }}期</div>

  52.           <div class="amountOf">金额单位:元</div>

  53.         </div>

  54.         <div class="main-center">

  55.           <div class="datagrid">

  56.             <div class="header">

  57.               <div class="xmmc">资产</div>

  58.               <div class="qj">年初余额</div>

  59.               <div class="zy">期末余额</div>

  60.               <div class="dfje">负债与所有者权益</div>

  61.               <div class="fx">年初余额</div>

  62.               <div class="ye">期末余额</div>

  63.             </div>

  64.             <div class="mok_list">

  65.               <ul class="list">

  66.                 <li v-for="(item, index) in list" :key="index">

  67.                   <div class="xmmc">{{ item.subjectNameLeft }}</div>

  68.                   <div class="qj">{{ item.ncyeLeft }}</div>

  69.                   <div class="zy">{{ item.qmyeLeft }}</div>

  70.                   <div class="dfje">{{ item.subjectNameRight }}</div>

  71.                   <div class="fx">{{ item.ncyeRight }}</div>

  72.                   <div class="ye">{{ item.qmyeRight }}</div>

  73.                 </li>

  74.               </ul>

  75.             </div>

  76.           </div>

  77.         </div>

  78.       </div>

  79. 

  80.     </div>

  81. </template>

  82. 

  83. <script>

  84.   import { trailBalanceList , expressionReportByCategory,getLoginBook,assetLiabilityReportByExpTpl } from "@/api/sunVillage_info/fixedAssets";

  85.   import SubjectTreeChooser from "@/components/form/SubjectTreeChooser";

  86.   import Cookies from "js-cookie";

  87.   import request from '@/utils/request'

  88.   import {FINANCE} from "@/utils/finance";

  89.   export default {

  90.     name: "certificateList",

  91.     components: { SubjectTreeChooser },

  92.     data() {

  93.       return {

  94.         expressionOptions:[],

  95.         searchDate: {

  96.           bookDate: "",

  97.           templateName: '资产负债表',

  98.           signature: false, // 添加底部落款

  99.         },

  100. 

  101.         list: [],

  102.         accountingYear: "",

  103.         accountingMonth: "",

  104.         // 显示搜索条件

  105.         visible: false,

  106.         showPickerTime: false,

  107. 

  108.         minDate: new Date(2020, 0, 1),

  109.         maxDate: new Date(2025, 10, 1),

  110.         currentDate: new Date(),

  111.         date:''

  112.       };

  113.     },

  114.     created() {

  115.       getLoginBook().then((res) => {

  116.         if (res.code == 200) {

  117.           let currentDays = res.data.currentDay;

  118.           if (currentDays == null) {

  119.             this.$message.error("当前账套未开启!");

  120.             return false;

  121.           }

  122. 

  123.           let dealDays = currentDays.split("-");

  124.           this.accountingYear = dealDays[0]; //当前帐套年

  125.           this.accountingMonth = dealDays[1]; //当前帐套月

  126. 

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

  128. 

  129.           this.$set(this.searchDate, "bookDate", currentDays);

  130.           this.initPage();

  131.         }

  132.       });

  133.       expressionReportByCategory('资产负债表').then((resp) => {

  134.         this.expressionOptions = resp.data;

  135.       });

  136.     },

  137.     methods: {

  138.       initPage() {

  139.         assetLiabilityReportByExpTpl(this.searchDate).then((res) => {

  140.           if (res.code == 200) {

  141.             let content = res.data;

  142.             this.list = content.list.map((x) => {

  143.               x.ncyeLeft = FINANCE.formatNum(x.ncyeLeft);

  144.               x.qmyeLeft = FINANCE.formatNum(x.qmyeLeft);

  145.               x.ncyeRight = FINANCE.formatNum(x.ncyeRight);

  146.               x.qmyeRight = FINANCE.formatNum(x.qmyeRight);

  147.               return x;

  148.             });

  149.           }

  150.         });

  151.       },

  152.       searchFrom() {

  153.         this.voucherFormShow = false;

  154.         let dealDays = this.searchDate.bookDate.split("-");

  155.         this.accountingYear = dealDays[0]; //当前帐套年

  156.         this.accountingMonth = dealDays[1]; //当前帐套月

  157.         this.initPage();

  158.       },

  159.       onConfirm(time) {

  160.         console.log(this.format(time,'yyyy-MM'))

  161.         this.date = this.format(time,'yyyy年MM月');

  162.         this.searchDate.bookDate = this.format(time,'yyyy-MM');

  163.         this.initPage();

  164.         this.showPickerTime = false;

  165.         let dealDays = this.searchDate.bookDate.split("-");

  166.         this.accountingYear = dealDays[0]; //当前帐套年

  167.         this.accountingMonth = dealDays[1]; //当前帐套月

  168.       },

  169.       onConfirmExpression(data){

  170.         this.searchDate.templateName = data.name;

  171.         this.visible = false;

  172.         this.initPage();

  173.       },

  174.       formatter(type, val) {

  175.         if (type === 'year') {

  176.           return `${val}年`;

  177.         } else if (type === 'month') {

  178.           return `${val}月`;

  179.         }

  180.         return val;

  181.       },

  182.       getSearch(val){

  183.         console.log(val)

  184.         this.subjectName = val.subjectId + " " + val.subjectName;

  185.         this.queryParams.endSubjectId = this.queryParams.startSubjectId;

  186.         this.getList();

  187.       }

  188.     },

  189.   }

  190. </script>

  191. 

  192. <style scoped lang="scss">

  193. 

  194.   .balance-main {

  195.     background: #fff;

  196.     .main-title {

  197.       margin-bottom: 5PX;

  198.       padding: 0 10PX;

  199.       height: 33PX;

  200.       line-height: 33PX;

  201.       color: #333;

  202.       font-size: 13PX;

  203.       display: flex;

  204.       justify-content: space-between;

  205.       .company {

  206.       }

  207.       .nper {

  208.         text-align: center;

  209.       }

  210.       .amountOf {

  211.         text-align: right;

  212.       }

  213.     }

  214.     .main-center {

  215.       // min-height: 404PX;

  216.       border: 1PX solid #CACBCC;

  217.       border-bottom: 0;

  218.       overflow-x: scroll;

  219.       .datagrid {

  220.         min-height: 100PX;

  221.         width: 250%;

  222.         .header {

  223.           background: #f8f8f9;

  224.           font-weight: bold;

  225.           display: flex;

  226.         }

  227.         .kmbm,

  228.         .xmmc,

  229.         .qj,

  230.         .zy,

  231.         .jfje,

  232.         .dfje,

  233.         .fx,

  234.         .ye {

  235.           height: 29PX;

  236.           line-height: 29PX;

  237.           font-size: 13PX;

  238.           border-bottom: 1PX solid #CACBCC;

  239.           border-right: 1PX solid #CACBCC;

  240.           text-align: center;

  241.         }

  242.         .xmmc {

  243.           width: 26%;

  244.           text-align: left;

  245.           padding-left: 10PX;

  246.         }

  247.         .qj {

  248.           width: 12%;

  249.           text-align: right;

  250.           padding-right: 10PX;

  251.         }

  252.         .zy {

  253.           width: 12%;

  254.           text-align: right;

  255.           padding-right: 10PX;

  256.         }

  257. 

  258.         .dfje {

  259.           width: 26%;

  260.           text-align: left;

  261.           padding-left: 10PX;

  262.         }

  263.         .fx {

  264.           width: 12%;

  265.           text-align: right;

  266.           padding-right: 10PX;

  267.         }

  268.         .ye {

  269.           width: 12%;

  270.           text-align: right;

  271.           padding-right: 10PX;

  272.           border-right: 0;

  273.         }

  274.         .mok_list {

  275.           display: block;

  276.           overflow-y: scroll;

  277.           height: calc(100vh - 200PX);

  278.           //background: url("~@/assets/images/report_line.png") repeat;

  279.         }

  280.         .list {

  281.           width: 100%;

  282.         }

  283.         ul {

  284.           margin: 0;

  285.           padding: 0;

  286.           li {

  287.             display: block;

  288.             overflow: hidden;

  289.             list-style: none;

  290.             &.header {

  291.               background: #f8f8f9;

  292.               font-weight: bold;

  293.             }

  294.             .kmbm,

  295.             .xmmc,

  296.             .qj,

  297.             .zy,

  298.             .jfje,

  299.             .dfje,

  300.             .fx,

  301.             .ye {

  302.               height: 29PX;

  303.               line-height: 29PX;

  304.               float: left;

  305.               font-size: 13PX;

  306.               border-bottom: 1PX solid #CACBCC;

  307.               border-right: 1PX solid #CACBCC;

  308.               text-align: center;

  309.             }

  310.             .xmmc {

  311.               width: 26%;

  312.               text-align: left;

  313.               padding-left: 10PX;

  314.             }

  315.             .qj {

  316.               width: 12%;

  317.               text-align: right;

  318.               padding-right: 10PX;

  319.             }

  320.             .zy {

  321.               width: 12%;

  322.               text-align: right;

  323.               padding-right: 10PX;

  324.             }

  325. 

  326.             .dfje {

  327.               width: 26%;

  328.               text-align: left;

  329.               padding-left: 10PX;

  330.             }

  331.             .fx {

  332.               width: 12%;

  333.               text-align: right;

  334.               padding-right: 10PX;

  335.             }

  336.             .ye {

  337.               width: 12%;

  338.               text-align: right;

  339.               padding-right: 10PX;

  340.               border-right: 0;

  341.             }

  342.           }

  343.         }

  344.       }

  345.     }

  346.   }

  347. 

  348.   /deep/ .van-radio__label{

  349.     font-size: 14PX;

  350.     color: #2facfe;

  351.   }

  352.   .radio_box{

  353.     display: flex;

  354.     justify-content: space-between;

  355.     align-items: center;

  356.     padding:20px 23px;

  357.   }

  358.   .date_box{

  359.     display: flex;

  360.     align-items: center;

  361.     img{

  362.       width: 30PX;

  363.       border-radius: 100%;

  364.       box-shadow: 0px 6px 10px rgba(63,68,75,0.5);

  365.     }

  366.     p{

  367.       font-size: 14PX;

  368.       margin-left: 5PX;

  369.       color: #2facfe;

  370.     }

  371.   }

  372.   .search_info{

  373.     padding:20px 23px;

  374.     display: flex;

  375.     justify-content: space-between;

  376.     align-items: center;

  377.     .search_block{

  378.       height: 59px;

  379.       width: 450px;

  380.       border-radius: 59px;

  381.       background: #fff;

  382.       display: flex;

  383.       padding-right: 35px;

  384.       align-items: center;

  385.       box-shadow: 0px 6px 5px rgba(63,68,75,0.2);

  386.       .icon{

  387.         width: 30px;

  388.         height: 30px;

  389.         background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;

  390.         background-size: 100% 100%;

  391.         display: block;

  392.         margin:0 8px 0 26px;

  393.       }

  394.       .delete_icon{

  395.         width: 15PX;

  396.         height: 15PX;

  397.         background: url('../../assets/images/sunVillage_info/delete_icon_input.png') no-repeat;

  398.         background-size: 100% 100%;

  399.         display: block;

  400.         margin:0 8px 0 26px;

  401.       }

  402.       .ipt{

  403.         flex: 1;

  404.         font-size: 26px;

  405.         background: none;

  406.         border:0 none;

  407.         line-height: 59px;

  408.       }

  409.     }

  410.   }

  411.   .total{

  412.     font-size: 14PX;

  413.     color: #858585;

  414.   }

  415. .home_wrapper{

  416.     background: #e9e9e9;

  417.     min-height: 100vh;

  418.     width: 100vw;

  419.     .header_main{

  420.         height: 116px;

  421.         background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;

  422.         background-size: 100% 100%;

  423.         position: fixed;

  424.         top: 0;

  425.         left: 0;

  426.         width: 100%;

  427.         font-size: 36px;

  428.         line-height: 116px;

  429.         text-align: center;

  430.         color: #fff;

  431.         position: relative;

  432.         .return_btn{

  433.             width: 24px;

  434.             height: 43.2px;

  435.             background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;

  436.             background-size: 20px 36px;

  437.             position: absolute;

  438.             left: 38px;

  439.             top: 36px;

  440.         }

  441.         .add_btn{

  442.             width: 56.4px;

  443.             height: 40.8px;

  444.             background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;

  445.             background-size: 47px 34px;

  446.             position: absolute;

  447.             right: 38px;

  448.             top: 36px;

  449.         }

  450.     }

  451.     .record_main{

  452.         padding:30px 22px;

  453.         .record_det{

  454.             height: 38px;

  455.             line-height: 38px;

  456.             display: flex;

  457.             justify-content:space-between;

  458.             .year_l{

  459.                 font-size: 30px;

  460.                 display: flex;

  461.                 align-items: center;

  462.                 color: #858585;

  463. 

  464.                 .unit{

  465.                     padding-left: 5px;

  466.                 }

  467.                 .icon{

  468.                     width: 23px;

  469.                     height: 12px;

  470.                     display: block;

  471.                     background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;

  472.                     background-size: 100% 100%;

  473.                     margin-bottom: 4px;

  474.                     margin-right: 8px;

  475.                     &.zk {

  476.                         transform: rotate(0deg)

  477.                     }

  478.                     &.ss{

  479.                         transform: rotate(180deg)

  480.                     }

  481. 

  482.                 }

  483.             }

  484.             .total_r{

  485.                 font-size: 26px;

  486.                 letter-spacing: 2px;

  487.             }

  488.         }

  489.         .record_list{

  490.             display: flex;

  491.             flex-flow: wrap;

  492.             margin-top: 12PX;

  493.             .flex_block{

  494.                 font-size: 30px;

  495.                 color: #878787;

  496.                 padding-right: 30px;

  497.                 &.current{

  498.                     color: #4199fe;

  499.                     font-weight: bold;

  500.                 }

  501.             }

  502.         }

  503.     }

  504.     .list_main{

  505.         padding:0 22px;

  506.         .item{

  507.             height: 100px;

  508.             border-radius: 30px;

  509.             background: #fff;

  510.             box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  511.             padding:15px 32px;

  512.             display: flex;

  513.             margin-bottom: 20px;

  514.             .info{

  515.                 flex:1;

  516.                 display: flex;

  517.                 align-items: center;

  518.                 justify-content: space-between;

  519.                 .title{

  520.                     display: flex;

  521.                     font-size: 32px;

  522.                     align-items: center;

  523.                     height: 58px;

  524.                     .icon_box{

  525.                         width: 34px;

  526.                         display: block;

  527.                         height: 30px;

  528.                         background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat;

  529.                         background-size: 100% 100%;

  530.                         margin-right: 10px;

  531.                     }

  532.                     .news_title{

  533.                         max-width:416px;

  534.                         overflow: hidden;

  535.                         white-space: nowrap;

  536.                         text-overflow: ellipsis;

  537.                         -o-text-overflow: ellipsis;

  538.                     }

  539.                     .tips_mark{

  540.                         width: 34px;

  541.                         height: 34px;

  542.                         background: #fa0c0c;

  543.                         border-radius: 8px;

  544.                         font-size: 24px;

  545.                         color: #fff;

  546.                         text-align: center;

  547.                         line-height: 34px;

  548.                         margin-left: 10px;

  549.                     }

  550.                 }

  551.                 .red{

  552.                   color: #fa0c0c;

  553.                 }

  554.                 .green{

  555.                   color: #4caf50;

  556.                 }

  557.                 .time{

  558.                     font-size: 32px;

  559.                     display: flex;

  560.                     align-items: center;

  561.                     justify-content: right;

  562.                     height: 30px;

  563.                     margin-top: 6px;

  564.                     .icon_time{

  565.                         width: 25px;

  566.                         height: 25px;

  567.                         background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;

  568.                         background-size: 100% 100%;

  569.                         margin-right: 10px;

  570.                     }

  571.                 }

  572.             }

  573.             .operation{

  574.                 flex: 1;

  575.                 display: flex;

  576.                 align-items: center;

  577.                 justify-content: flex-end;

  578.                 text-align: right;

  579.                 .opera_btn{

  580.                     width: 52px;

  581.                     height: 52px;

  582.                     border-radius: 50%;

  583.                     display: flex;

  584.                     align-items: center;

  585.                     justify-content:center;

  586. 

  587.                     &.delete{

  588.                         background:#df0707;

  589.                         margin-left: 28px;

  590.                         .icon{

  591.                             width: 22px;

  592.                             height: 29px;

  593.                             background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat;

  594.                             background-size: 100% 100%;

  595.                             display: block;

  596.                         }

  597.                     }

  598.                     &.edit{

  599.                         background: #79cf13;

  600.                         .icon {

  601.                             width: 26px;

  602.                             height: 25px;

  603.                             background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat;

  604.                             background-size: 100% 100%;

  605.                             display: block;

  606.                         }

  607.                     }

  608.                      &.view{

  609.                         background: #3494ff;

  610.                         .icon {

  611.                             width: 29px;

  612.                             height: 21px;

  613.                             background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat;

  614.                             background-size: 100% 100%;

  615.                             display: block;

  616.                         }

  617.                     }

  618.                 }

  619.             }

  620.         }

  621. 

  622.     }

  623.     .bottom_tips{

  624.         font-size: 24px;

  625.          color: #a7a6a6;

  626.          text-align: center;

  627.          margin-top: 32px;

  628.          background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;

  629.          background-size: 260px 2px;

  630.          .xs{

  631.             padding:0 8px;

  632.             background: #e9e9e9;

  633.          }

  634.     }

  635.     .banner {

  636.       display: flex;

  637.       background:#3494ff;

  638.       color:#fff;

  639.       text-align: center;

  640.       margin:3%;

  641.       border-radius: 10PX;

  642.     }

  643.     .banner_tabs{

  644.       flex:1;

  645.       padding:10PX 0;

  646.       font-size: 16PX;

  647.       div:nth-child(2){

  648.         font-size: 14PX;

  649.         margin-top: 5PX;

  650.       }

  651.     }

  652. }

  653. .top_head_title{

  654.   font-size: 16PX;

  655.   text-align: center;

  656.   padding: 15PX 0;

  657. }

  658.   .name_box{

  659.     float: left;

  660.     width: 180PX;

  661.     position: relative;

  662.     .name_bg{

  663.       background-color: rgba(47,172,254,0.2);

  664.       width: 180PX;

  665.       height: 100%;

  666.       position: absolute;

  667.       top: 0;

  668.     }

  669.     .name_icon{

  670.       position: absolute;

  671.       top: 60PX;

  672.       left: 50%;

  673.       transform: translateX(-50%);

  674.     }

  675.     .van-row:nth-child(odd){

  676.       .van-col {

  677.         background-color: #ffffff;

  678.       }

  679.     }

  680.     .van-row:nth-child(1){

  681.       border-top-left-radius: 10PX;

  682.       border-bottom-left-radius: 10PX;

  683.       background-color: #ffffff;

  684.       .van-col {

  685.         background-color: #2facfe;

  686.         color: #ffffff;

  687.         border-radius: 10PX;

  688.         line-height: 60PX;

  689.         text-align: center;

  690.       }

  691.     }

  692.     .van-col{

  693.       font-size: 16PX;

  694.       padding: 0PX 5PX;

  695.       text-align: left;

  696.       line-height: 40PX;

  697.       display: -webkit-box;

  698.       -webkit-box-orient: vertical;

  699.       -webkit-line-clamp: 1;

  700.       word-break: break-all;

  701.       overflow: hidden;

  702.     }

  703.   }

  704.   .center_box{

  705.     padding: 0 3%;

  706.   }

  707.   .right_box{

  708.     float: left;

  709.     width: calc(100%);

  710.     overflow:hidden;

  711.     overflow-x: scroll;

  712.     white-space:nowrap;

  713.     display: -webkit-box;

  714.     -webkit-overflow-scrolling: touch;

  715.     .right_box_box{

  716.       width: 600PX;

  717.     }

  718.     .van-row:nth-child(odd){

  719.       .van-col{

  720.         background-color: #ffffff;

  721.       }

  722.     }

  723.     .van-row:nth-child(1){

  724.       .van-col{

  725.         color: #2facfe;

  726.         height: 60PX;

  727.         text-align: center;

  728.         line-height: 30PX;

  729.         border-right: 1px solid #ccc;

  730.       }

  731.     }

  732.     .van-col{

  733.       font-size: 16PX;

  734.       text-align: right;

  735.       height: 40PX;

  736.       line-height: 40PX;

  737.       &:nth-child(2n){

  738.         border-right: 1px solid #ccc;

  739.       }

  740.     }

  741. 

  742.     .yue_type{

  743.       display: flex;

  744.       border-top: 1px solid #2facfe;

  745.       p{

  746.         width: 50%;

  747.         line-height: 30PX;

  748.         color: #333333;

  749.       }

  750.     }

  751. 

  752.   }

  753.   .clear{

  754.     clear: both;

  755.   }

  756. </style>