task 阳光村务：

负债表：顶部表头用蓝色字体，表里内容用隔行换色加以区分
余额表：按照负债表的样式。并且余额表切换年度，筛选条件的下拉会计科目重新请求
明细账：按照负债表的样式。并且期间只能本年度内选择，不能跨年。切换开始期间年度时，筛选条件的下拉会计科目重新请求

src/components/form/SubjectTreeChooser.vue

@@ -23,7 +23,7 @@ export default {
   name: "SubjectTreeChooser",
   components: {SubjectTreeChooserNodeItem},
   props: [
-    'value', 'visible', 'height', 'canSelectNonLeaf',
+    'year','value', 'visible', 'height', 'canSelectNonLeaf',
   ],
   watch: {
     value: function (newVal, oldVal) {
@@ -33,6 +33,14 @@ export default {
         this.syncIndex();
       }
     },
+    year: function (newVal, oldVal) {
+      console.log(newVal)
+      if(newVal != this.yearNews)
+      {
+        this.yearNews = newVal;
+        this.getSubjects();
+      }
+    },
     visible: function(newVal, oldVal) {
       if(this.popupVisible !== newVal)
       {
@@ -53,6 +61,7 @@ export default {
     return {
       popupVisible: false,
       internalValue: this.value,
+      yearNews: this.year,
       searchValue: '',
       active: '1',
       subjects: [],
@@ -76,7 +85,7 @@ export default {
           map[x.dictValue] = item;
           return item;
         });
-        let url = '/finance/subject/listAll'; // '/open/villageAffairs/public/subjects/153'
+        let url = '/finance/subject/listAll?year='+this.yearNews; // '/open/villageAffairs/public/subjects/153'
         request(url).then((resp) => {
           let list = this.makeTree(resp.rows || resp.data);
           for(let v of list)

src/views/sunVillage_info/detailed_ledger.vue

@@ -26,71 +26,55 @@
             </div>
         </div>
         <!--内容-->
-      <div style="width: 100vw;overflow-y: scroll;padding: 11px 0 0 11px;">
-        <div class="center_box">
-            <div class="vocher_name">
-                <van-row class="head_m">
-                    <van-col :span="14" class="year_m">
-                        <div class="year_text">{{queryParams.startDate.substr(0,4)}}</div>
-                        <div class="unit_m">
-                            <div class="ubs">月</div>
-                            <div class="ubs">日</div>
-                        </div>
-                    </van-col>
-                    <van-col :span="10" class="credential_m">凭证字</van-col>
-                </van-row>
-                <van-row class="head_m_s">
-                  <van-col :span="9">摘要</van-col>
-                  <van-col :span="4">借方</van-col>
-                  <van-col :span="4">贷方</van-col>
-                  <van-col :span="3">方向</van-col>
-                  <van-col :span="4">余额</van-col>
-                </van-row>
-
-            </div>
-            <div class="vocher_content">
-                <div class="vocher_cmain">
-
-                  <div style="width: 20%;">
-                    <van-row class="vocher_mTitle" v-for="(item,index) in tableList" :key="index">
-                      <van-col :span="7">{{item.month}}</van-col>
-                      <van-col :span="7">{{item.day}}</van-col>
-                      <van-col :span="10">
-                        <div class="pz_tx" @click="subjectNameFun(item.voucherWordNum,item.voucherId)">{{item.voucherWordNum}}</div>
-                      </van-col>
-                    </van-row>
-                  </div>
-                    <div class="content_m">
-                        <van-row  class="content_m_b" v-for="(item,index) in tableList" :key="index">
-                            <van-col :span="9" class="zy">
-                                <span>{{item.voucherSummary}}</span>
-                            </van-col>
-                            <van-col :span="4" class="je">{{item.jieAmount}}</van-col>
-                            <van-col :span="4" class="je">{{item.daiAmount}}</van-col>
-                            <van-col :span="3" class="km">{{item.balanceDirection}}</van-col>
-                            <van-col :span="4" class="je">{{item.balance}}</van-col>
-                        </van-row>
-                        <!-- <van-row >
-                            <van-col :span="9" class="zy">摘要</van-col>
-                            <van-col :span="4" class="je">200.00</van-col>
-                            <van-col :span="4" class="je">20000.00</van-col>
-                            <van-col :span="3" class="km">借</van-col>
-                            <van-col :span="4" class="je">200.00</van-col>
-                        </van-row> -->
-
-
-                    </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">{{queryParams.startDate.substr(0,4)}}</div>
+                <div class="qj">凭证字</div>
+                <div class="zy">摘要</div>
+                <div class="dfje">借方</div>
+                <div class="qj">贷方</div>
+                <div class="zy">方向</div>
+                <div class="dfje">余额</div>
+              </div>
+<!--              <div class="header header_sec">-->
+<!--                <div class="xmmc">编码</div>-->
+<!--                <div class="qj">名称</div>-->
+<!--                <div class="zy">本期发生</div>-->
+<!--                <div class="dfje">期末余额</div>-->
+<!--                <div class="xmmc">科目</div>-->
+<!--                <div class="qj">期初余额</div>-->
+<!--                <div class="zy">本期发生</div>-->
+<!--                <div class="dfje">期末余额</div>-->
+<!--              </div>-->
+              <div class="mok_list">
+                <ul class="list">
+                  <li class="header_sec" v-for="(item, index) in tableList" :key="index">
+                    <div class="xmmc" style="display: flex;justify-content: space-evenly;"><span>月：{{item.month}}</span><span>日：{{item.day==null?'无':item.day}}</span></div>
+                    <div class="qj pz_tx" @click="subjectNameFun(item.voucherWordNum,item.voucherId)">{{item.voucherWordNum}}</div>
+                    <div class="zy">{{item.voucherSummary}}</div>
+                    <div class="dfje">{{item.jieAmount}}</div>
+                    <div class="qj">{{item.daiAmount}}</div>
+                    <div class="zy">{{item.balanceDirection}}</div>
+                    <div class="dfje">{{item.balance}}</div>
+                  </li>
+                </ul>
+              </div>
             </div>
+          </div>
         </div>
-      </div>
+
         <!--开始日期-->
         <van-action-sheet v-model="dateObj.startVisbile" duration="0.2" >
             <van-datetime-picker
                 v-model="dateObj.startDate"
                 title="选择日期"
-                :min-date="dateObj.minDate"
-                :max-date="dateObj.maxDate"
                 @confirm="startConfirm"
                 @cancel	="startCancel"
                 type="year-month"
@@ -153,7 +137,7 @@ export default {
             startVisbile:false,
             startDate: new Date(),
             minDate:new Date(2018, 0, 1),
-            maxDate:new Date(2028, 5, 1),
+            maxDate:new Date(2018, 0, 1),
             //结束日期-弹窗显隐
             endVisbile:false,
             endDate:new Date(),
@@ -192,7 +176,8 @@ export default {
                 }
                 this.$set(this.queryParams, "startDate", currentDays);
                 this.$set(this.queryParams, "endDate", currentDays);
-
+                this.$set(this.dateObj, "maxDate", new Date(new Date(currentDays).getFullYear(),11));
+                this.$set(this.dateObj, "minDate", new Date(currentDays));
                 let dataArr = currentDays.split('-')
                 this.$set(this.dateObj, "startDate", new Date(dataArr[0], dataArr[1]-1), 1);
                 this.$set(this.dateObj, "endDate", new Date(dataArr[0], dataArr[1]-1), 1);
@@ -219,9 +204,12 @@ export default {
 
             this.initPage()
             this.makeSubjectsTree(res.rows, resp.data);
-            }else{
-                this.subjectText = '暂无数据';
-            }
+          }else{
+              this.subjectText = '暂无数据';
+              this.subjectsTree = []; //会计科目显示列表(树)
+              this.cascaderValue = ""; //科目选择
+              this.initPage()
+          }
         });
       });
     },
@@ -318,10 +306,15 @@ export default {
         let years = this.format(value,'yyyy');
         let months = this.format(value,'MM');
         this.queryParams.startDate = years+'-'+months;
+        this.dateObj.startVisbile = false;
 
+        this.queryParams.endDate = years+'-'+months;
+        this.subjectYear = years;
 
-        this.dateObj.startVisbile = false;
-        this.initPage();
+        const end = new Date(value.getFullYear(),11) //年份的最后一个月+1，就是次年的1月
+        this.dateObj.minDate = value;
+        this.dateObj.maxDate = end;
+        this.initAxios();
     },
     //弹窗-开始日期-取消
     startCancel(){
@@ -337,16 +330,185 @@ export default {
         let years = this.format(value,'yyyy');
         let months = this.format(value,'MM');
         this.queryParams.endDate = years+'-'+months;
-
-
         this.dateObj.endVisbile = false;
-        this.initPage();
+        this.initAxios();
     }
 
   }
 }
 </script>
 <style scoped lang="scss">
+  .balance-main {
+    background: #fff;
+    margin-top: 20px;
+    .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;
+        }
+        .header_sec{
+          div{
+            width: 14.2%;
+          }
+        }
+        .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: 14.2%;
+          text-align: center;
+          padding-left: 10PX;
+        }
+        .qj {
+          width: 14.2%;
+          text-align: center;
+          padding-right: 10PX;
+        }
+        .zy {
+          width: 14.2%;
+          text-align: center;
+          padding-right: 10PX;
+        }
+
+        .dfje {
+          width: 14.2%;
+          text-align: center;
+          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 - 230PX);
+          //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;
+            }
+            &.header_sec{
+              div{
+                width: 14.2%;
+              }
+            }
+            &:nth-child(even){
+              background: #e9e9e9;
+            }
+            .pz_tx{
+              color: #278dff;
+            }
+            .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: center;
+              padding-left: 10PX;
+            }
+            .qj {
+              width: 12%;
+              text-align: center;
+              padding-right: 10PX;
+            }
+            .zy {
+              width: 12%;
+              text-align: center;
+              padding-right: 10PX;
+            }
+
+            .dfje {
+              width: 26%;
+              text-align: center;
+              padding-left: 10PX;
+            }
+            .fx {
+              width: 12%;
+              text-align: right;
+              padding-right: 10PX;
+            }
+            .ye {
+              width: 12%;
+              text-align: right;
+              padding-right: 10PX;
+              border-right: 0;
+            }
+          }
+        }
+      }
+    }
+  }
 .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;

src/views/sunVillage_info/detailed_liabilities.vue

@@ -223,6 +223,7 @@
           background: #f8f8f9;
           font-weight: bold;
           display: flex;
+          color: #278dff;
         }
         .kmbm,
         .xmmc,
@@ -291,6 +292,9 @@
               background: #f8f8f9;
               font-weight: bold;
             }
+            &:nth-child(even){
+              background: #e9e9e9;
+            }
             .kmbm,
             .xmmc,
             .qj,

src/views/sunVillage_info/list_balance_ranking.vue

@@ -37,58 +37,48 @@
         <div class="total">共{{listLength}}条</div>
       </div>
 
-      <div class="center_box">
-        <div class="name_box">
-          <van-row>
-            <van-col :span="24">科目编码/科目名称</van-col>
-          </van-row>
-          <van-row v-for="(item,index) in applicationList" :key="index">
-            <van-col :span="24">{{item.subjectId}} {{item.subjectName}}</van-col>
-          </van-row>
-          <div class="name_bg"></div>
-          <img src="../../assets/images/sunVillage_info/name_icon.png" class="name_icon"/>
-        </div>
-
-        <div class="right_box">
-          <div class="right_box_box">
-            <van-row>
-              <van-col :span="8">
-                <p>期初余额</p>
-                <div class="yue_type">
-                  <p>借方</p>
-                  <p>贷方</p>
-                </div>
-              </van-col>
-              <van-col :span="8">
-                <p>本期发生</p>
-                <div class="yue_type">
-                  <p>借方</p>
-                  <p>贷方</p>
-                </div>
-              </van-col>
-              <van-col :span="8">
-                <p>期末余额</p>
-                <div class="yue_type">
-                  <p>借方</p>
-                  <p>贷方</p>
-                </div>
-              </van-col>
-            </van-row>
-            <van-row v-for="(item,index) in applicationList" :key="index">
-              <van-col :span="4">{{item.qcjfye}}</van-col>
-              <van-col :span="4">{{item.qcdfye}}</van-col>
-              <van-col :span="4">{{item.bqjffs}}</van-col>
-              <van-col :span="4">{{item.bqdffs}}</van-col>
-              <van-col :span="4">{{item.qmjffs}}</van-col>
-              <van-col :span="4">{{item.qmdffs}}</van-col>
-            </van-row>
+      <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>
+            <div class="header header_sec">
+              <div class="xmmc">编码</div>
+              <div class="qj">名称</div>
+              <div class="zy">本期发生</div>
+              <div class="dfje">期末余额</div>
+              <div class="xmmc">科目</div>
+              <div class="qj">期初余额</div>
+              <div class="zy">本期发生</div>
+              <div class="dfje">期末余额</div>
+            </div>
+            <div class="mok_list">
+              <ul class="list">
+                <li class="header_sec" v-for="(item, index) in applicationList" :key="index">
+                  <div class="xmmc">{{ item.subjectId }}</div>
+                  <div class="xmmc">{{item.subjectName}}</div>
+                  <div class="qj">{{ item.qcjfye }}</div>
+                  <div class="qj">{{item.qcdfye}}</div>
+                  <div class="zy">{{item.bqjffs}}</div>
+                  <div class="zy">{{item.bqdffs}}</div>
+                  <div class="dfje">{{item.qmjffs}}</div>
+                  <div class="dfje">{{item.qmdffs}}</div>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
-
-        <div class="clear"></div>
       </div>
-
-      <SubjectTreeChooser :visible.sync="visible" @select="getSearch" v-model="queryParams.startSubjectId" :can-select-non-leaf="true" height="480px"></SubjectTreeChooser>
+      <SubjectTreeChooser :visible.sync="visible" @select="getSearch" v-model="queryParams.startSubjectId" :year="queryParams.startDate ? queryParams.startDate.substr(0, 4) : null" :can-select-non-leaf="true" height="480px"></SubjectTreeChooser>
 
     </div>
 </template>
@@ -221,6 +211,173 @@
 </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;
+        }
+        .header_sec{
+          div{
+            width: 12.5%;
+          }
+        }
+        .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: 25%;
+          text-align: center;
+          padding-left: 10PX;
+        }
+        .qj {
+          width: 25%;
+          text-align: center;
+          padding-right: 10PX;
+        }
+        .zy {
+          width: 25%;
+          text-align: center;
+          padding-right: 10PX;
+        }
+
+        .dfje {
+          width: 25%;
+          text-align: center;
+          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 - 230PX);
+          //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;
+            }
+            &.header_sec{
+              div{
+                width: 12.5%;
+              }
+            }
+            &: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;
@@ -582,14 +739,14 @@
   }
   .right_box{
     float: left;
-    width: calc(100% - 180PX);
+    width: 100%;
     overflow:hidden;
     overflow-x: scroll;
     white-space:nowrap;
     display: -webkit-box;
     -webkit-overflow-scrolling: touch;
     .right_box_box{
-      width: 600PX;
+      width: 780PX;
     }
     .van-row:nth-child(odd){
       .van-col{
@@ -607,7 +764,7 @@
     }
     .van-col{
       font-size: 16PX;
-      text-align: right;
+      text-align: center;
       height: 40PX;
       line-height: 40PX;
       &:nth-child(2n){