优化财务监管

src/router/index.js

@@ -2431,6 +2431,26 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/yinnong/bankAgriculture/bankOfDeposit/bankOfDepositModify'], resolve)
   },
+  {
+    
+    path: '/yinnong/listBalanceRanking',
+    name: 'yinnongListBalanceRanking',
+    meta: {
+      title: '科目余额表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/yinnong/listBalanceRanking'], resolve)
+  },
+  {
+    
+    path: '/yinnong/detailedLedger',
+    name: 'yinnongDetailedLedger',
+    meta: {
+      title: '明细账',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/yinnong/detailedLedger'], resolve)
+  },
   {
     path: '/lawEnforcement',
     name: 'lawEnforcement',

src/views/sunVillage_info/detailed_ledger.vue

@@ -116,7 +116,7 @@
         <van-action-sheet v-model="dateObj.subjectVisbile"  duration="0.2">
             <van-cascader
                 v-model="cascaderValue"
-                title="请选择所在地区"
+                title="请选择所在科目"
                 :options="subjectsTree"
                 @close="dateObj.subjectVisbile = false"
                 @finish="onFinish"
@@ -304,12 +304,12 @@ export default {
         });
     },
     onFinish({ selectedOptions }){
-
         let lastArr = selectedOptions[selectedOptions.length-1];
         this.queryParams.startSubjectId = lastArr.subjectId
         this.queryParams.endSubjectId = lastArr.subjectId
         this.subjectText = lastArr.label;
         this.initPage();
+        this.dateObj.subjectVisbile = false
     },
     onChangeAcidentArea(aaa){
         // console.log(aaa)

src/views/yinnong/detailedLedger.vue

@@ -0,0 +1,622 @@
+<template>
+    <div class="home_wrapper">
+        <div class="header_main">
+            明细账
+            <div class="return_btn" @click="onClickLeft"></div>
+        </div>
+        <!---期间-->
+        <div class="period_main">
+            <div class="bt_title">
+                <div class="icon"></div>
+                <div class="title">期间</div>
+            </div>
+            <div class="calendar_block" @click="startDateClick">{{queryParams.startDate.replace('-','年')}}月</div>
+            <div class="to">至</div>
+            <div class="calendar_block" @click="endDateClick">{{queryParams.endDate.replace('-','年')}}月</div>
+        </div>
+        <!--科目-->
+        <div class="subject_main">
+            <div class="bt_title">
+                <div class="icon"></div>
+                <div class="title">科目</div>
+            </div>
+            <div class="subject_block" @click="subjectClick">
+                <div class="title">{{subjectText}}</div>
+                <div class="xs_icon"></div>
+            </div>
+        </div>
+        <!--内容-->
+        <div class="center_box">
+            <div class="vocher_name">
+                <van-row class="head_m">
+                    <van-col :span="14" class="year_m">
+                        <div class="year_text">2022</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="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.voucherWordNum}}</div>
+                    </van-col>
+                </van-row>
+                <!-- <van-row class="vocher_mTitle">
+                    <van-col :span="7">09</van-col>
+                    <van-col :span="7">09</van-col>
+                    <van-col :span="10">
+                        <div class="pz_tx">记-06</div>
+                    </van-col>
+                </van-row> -->
+           
+            </div>
+            <div class="vocher_content">
+                <div class="vocher_cmain">
+                    <van-row class="head_m">
+                        <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 class="content_m">
+                        <van-row  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>
+        </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"
+            />
+        </van-action-sheet>
+        <!--结束日期-->
+        <van-action-sheet v-model="dateObj.endVisbile" duration="0.2" >
+            <van-datetime-picker
+                v-model="dateObj.endDate"
+                title="选择日期"
+                :min-date="dateObj.minDate"
+                :max-date="dateObj.maxDate"
+                @confirm="endConfirm"
+                @cancel	="startCancel"
+                type="year-month"
+            />
+        </van-action-sheet>
+        <!--科目选择-->
+        <van-action-sheet v-model="dateObj.subjectVisbile"  duration="0.2">
+            <van-cascader
+                v-model="cascaderValue"
+                title="请选择所在科目"
+                :options="subjectsTree"
+                @close="dateObj.subjectVisbile = false"
+                @finish="onFinish"
+                :field-names="fieldNames"
+    
+                @change="onChangeAcidentArea"
+            />
+        </van-action-sheet>
+
+
+
+    </div>
+</template>
+<script>
+import { subjectData ,getLoginBook,listNormalDetails} from "@/api/sunVillage_info/fixedAssets";
+export default {
+  name: "detailedLedger",
+  data() {
+    return{
+        //数据
+        tableList:[],
+        // 查询参数
+        queryParams: {
+            startDate:'', //开始日期
+            endDate:'',   //结束日期
+            startSubjectId:'', //开始科目
+            endSubjectId:'', //结束科目
+
+            startSubjectLevel: 1,
+            endSubjectLevel: 4,
+            filterZero: true,
+            includeNonVoucher: false,
+            groupBySubject: true
+        },
+        //日期相关
+        dateObj:{
+            //开始日期-弹窗显隐
+            startVisbile:false,
+            startDate: new Date(),
+            minDate:new Date(2018, 0, 1),
+            maxDate:new Date(2028, 5, 1),
+            //结束日期-弹窗显隐
+            endVisbile:false,
+            endDate:new Date(),
+            //科目选择
+            subjectVisbile:false
+        },
+        subjectText:'', //科目页面显示
+        SubjectsList:[], //科目选项
+        subjectsTree: [], //会计科目显示列表(树)
+        cascaderValue:"", //科目选择
+        fieldNames: {
+            text: 'label',
+            value: 'subjectId',
+            children: 'children',
+        },
+        subjectYear:''
+    }
+  },
+  mounted(){
+    //初始化账套
+    this.initLoginBook();
+
+    this.initAxios()
+  },
+  methods:{
+    initLoginBook(){
+        getLoginBook().then((res) => {
+            if (res.code == 200) {
+                let currentDays = res.data.currentDay;
+                if (currentDays == null) {
+                    this.$notify({
+                        message:'当前账套未开启!',
+                        type: 'error'
+                    });
+                    return false;
+                }
+                this.$set(this.queryParams, "startDate", currentDays);
+                this.$set(this.queryParams, "endDate", 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);
+
+                this.subjectYear = (currentDays.substr(0, 4));
+            }
+        })
+    },
+    initAxios(){
+        //获取会计科目列表数据
+      this.getDicts("subject_type").then((resp) => {
+        subjectData({year:this.subjectYear}).then((res) => {
+          res.rows.forEach((x) => {
+            x.label = x.subjectId + ' ' + x.subjectName
+          });
+          this.SubjectsList = res.rows;
+
+          let curObj = res.rows[0];
+          if(res.rows.length>0){
+            this.subjectText = curObj.label; 
+            this.queryParams.startSubjectId = curObj.subjectId; 
+            this.queryParams.endSubjectId = curObj.subjectId; 
+            this.cascaderValue =  curObj.subjectId; 
+            
+            this.initPage()
+            this.makeSubjectsTree(res.rows, resp.data);
+            }else{
+                this.subjectText = '暂无数据'; 
+            }
+        });
+      });
+    },
+    subjectClick(){
+        this.dateObj.subjectVisbile = true
+    },
+    makeSubjectsTree(SubjectsList, subjectTypes) {
+      let func = (pid) => {
+        let arr = null;
+        for(let v of SubjectsList)
+        {
+          let parentId = v.parentId || v.subjectId.substr(0, v.subjectId.length - 3) || null;
+          if(parentId == pid)
+          {
+            if(!arr) arr = [];
+            let a = func(v.subjectId);
+            if(a)
+              v.children = a;
+            v.label = v.subjectId + ' ' + v.subjectNameAll;
+            v.is_last = 'Y';
+            v.disabled = false;
+          
+            arr.push(v);
+          }
+        }
+        return arr;
+      };
+      let res = func(null);
+      let r = [];
+      res.forEach((x) => {
+        let subjectIdStart = x.subjectId[0];
+        let item = r.find((y) => y.subjectId == subjectIdStart);
+        if(!item)
+        {
+          let type = subjectTypes.find((y) => y.dictValue == subjectIdStart);
+          if(!type)
+            return;
+          item = {
+            subjectId: type.dictValue,
+            label: type.dictLabel,
+            sortFlag: type.dictSort,
+            is_last: 'N',
+            subjectNameAll: '',
+            children: [],
+            disabled: true
+          };
+          r.push(item);
+        }
+        item.children.push(x);
+      });
+      r.sort((a, b) => a.dictSort - b.dictSort);
+    //   console.log(r)
+      this.subjectsTree = r;
+     
+    },
+    initPage(){
+        listNormalDetails(this.queryParams).then((res)=>{
+            if(res.code == 200){
+                let content = res.rows;
+                if(content.length>0){
+                    this.tableList = content[0].list;
+                }else{
+                    this.tableList = []
+                }
+            }
+        })
+    },
+    subjectNameFun(num){
+        let endNum = num.split("-");
+        this.$router.push({
+            path: "/sunVillage_info/voucher",
+            query: {
+                vocherId: endNum[1],
+                num:encodeURI(num)
+            },
+        });
+    },
+    onFinish({ selectedOptions }){
+        let lastArr = selectedOptions[selectedOptions.length-1];
+        this.queryParams.startSubjectId = lastArr.subjectId
+        this.queryParams.endSubjectId = lastArr.subjectId
+        this.subjectText = lastArr.label;
+        this.initPage();
+        this.dateObj.subjectVisbile = false
+    },
+    onChangeAcidentArea(aaa){
+        // console.log(aaa)
+    },
+    //点击开始日期--显示弹窗
+    startDateClick(){
+        this.dateObj.startVisbile = true;
+    },
+    //弹窗-开始日期-确定
+    startConfirm(value){
+        let years = this.format(value,'yyyy');
+        let months = this.format(value,'MM');
+        this.queryParams.startDate = years+'-'+months;
+
+
+        this.dateObj.startVisbile = false;
+        this.initPage();
+    },
+    //弹窗-开始日期-取消
+    startCancel(){
+        this.dateObj.startVisbile = false;
+        this.dateObj.endVisbile = false;
+    },
+    //点击结束日期-显示弹窗
+    endDateClick(){
+        this.dateObj.endVisbile = true;
+    },
+    //弹窗--结束日期-确定
+    endConfirm(value){
+        let years = this.format(value,'yyyy');
+        let months = this.format(value,'MM');
+        this.queryParams.endDate = years+'-'+months;
+
+
+        this.dateObj.endVisbile = false;
+        this.initPage();
+    }
+ 
+  }
+}
+</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;
+       }
+
+   }
+   .period_main{
+        padding:28px 22px 0;
+        display: flex;
+        align-items: center;
+        .bt_title{
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .icon{
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                box-shadow: 4px 0px 7px rgba(63, 68, 75, 0.1);
+                background:#2facfe url('../../assets/images/sunVillage_info/list_icon_13.png') center center no-repeat;
+                background-size: 29px 25px;
+                margin-right: 12px;
+            }
+            .title{
+                font-size: 30px;
+                color: #2facfe;
+            }
+        }
+        .calendar_block{
+            flex: 1;
+            border-radius: 8px;
+            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
+            background: #fff;
+            height: 64px;
+            font-size: 30px;
+            display: flex;
+            align-items: center;
+            letter-spacing: 2px;
+            justify-content: center;
+        }
+        .to{
+            width: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 30px;
+            color: #868686;
+        }
+   }
+   .subject_main{
+        padding:20px 22px 0;
+        display: flex;
+        align-items: center;
+        .bt_title{
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .icon{
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                box-shadow: 4px 0px 7px rgba(63, 68, 75, 0.1);
+                background:#2facfe url('../../assets/images/sunVillage_info/list_icon_13.png') center center no-repeat;
+                background-size: 29px 25px;
+                margin-right: 12px;
+            }
+            .title{
+                font-size: 30px;
+                color: #2facfe;
+            }
+        }
+        .subject_block{
+            flex: 1;
+            border-radius: 8px;
+            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
+            background: #fff;
+            height: 64px;
+            display: flex;
+            padding:0 26px 0 22px;
+            align-items: center;
+            justify-content: space-between;
+            .title{
+                width: 475px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 30px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                color: #2b2b2b;
+            }
+            .xs_icon{
+                width: 11px;
+                height: 23px;
+                background: url('../../assets/images/sunVillage_info/list_icon_12.png') center center no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+   }
+   .center_box{
+    margin-left: 22px;
+    display: flex;
+    margin-top: 22px;
+    background: #fff;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    .vocher_name{
+        width: 405px;
+        .head_m{
+            height: 110px;
+            background: #2facfe;
+            border-radius: 8px;
+            .year_m{
+                border-right: 1px solid #fff;
+                .year_text{
+                    height: 56px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #fff;
+                    font-size: 30px;
+                }
+                .unit_m{
+                    height: 54px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding-bottom: 10px;
+                    .ubs{
+                        width: 94px;
+                        height: 43px;
+                        background: #cbeaff;
+                        font-size: 30px;
+                        color: #1a84c9;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 6px;
+                        &:nth-child(1){
+                            margin-right: 12px;
+                        }
+                    }
+                }
+            }
+            .credential_m{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #fff;
+                font-size: 30px;
+                height: 110px;
+            }
+        }
+        .vocher_mTitle{
+            background: #d7e8f3;
+            .van-col{
+                height: 84px;
+                font-size: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-right: 1px solid #fff;
+                .pz_tx{
+                    color: #278dff;
+                    padding-bottom: 8px;
+                    border-bottom: 1px solid #278dff;
+                }
+            }
+            &:nth-child(2n-1){
+                background: #e3f4ff;
+            }
+        }
+
+    }
+    .vocher_content{
+        flex: 1;
+        overflow:hidden;
+        overflow-x: scroll;
+        // white-space:nowrap;
+        display: -webkit-box;
+        -webkit-overflow-scrolling: touch;
+        .vocher_cmain{
+            width: 1200px;
+            .head_m{
+                .van-col{
+                    height: 110px;
+                    font-size: 30px;
+                    color: #2facfe;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-right: 1px solid #bfbfbf;
+                    &:last-child{
+                        border-right: 0;
+                    }
+                }
+
+            }
+            .content_m{
+                
+                .van-row{
+               
+                    &:nth-child(2n-1){
+                        background: #e9e9e9;
+                    }
+                }
+                .van-col{
+                    height: 84px;
+                    font-size: 30px;
+                    padding:0 22px;
+                    display: flex;
+                    align-items: center;
+                    border-right: 1px solid #bfbfbf;
+                    &:last-child{
+                        border-right: 0 none;
+                    }
+                    &.zy{
+                        display: flex;
+                        align-items: center;
+                        span{
+                            position: relative;
+                            overflow: hidden;
+                            text-overflow: -o-ellipsis-lastline;
+                            text-overflow: ellipsis;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 2;
+                            line-clamp: 2;
+                            -webkit-box-orient: vertical;
+                        }
+                    }
+                    &.je{
+                        justify-content: flex-end;
+                    }
+                    &.km{
+                        justify-content: center;
+                    }
+                }
+                
+            }
+        }
+
+    }
+   }
+}
+</style>

src/views/yinnong/listBalanceRanking.vue

@@ -0,0 +1,632 @@
+<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="subjectName" placeholder="请选择科目查询" @click="visible=true">
+          <i class="delete_icon" v-show="subjectName" @click="emptyInput"></i>
+        </div>
+<!--        <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="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>
+        </div>
+
+        <div class="clear"></div>
+      </div>
+
+      <SubjectTreeChooser :visible.sync="visible" @select="getSearch" v-model="queryParams.startSubjectId" :can-select-non-leaf="true" height="480px"></SubjectTreeChooser>
+
+    </div>
+</template>
+
+<script>
+  import { trailBalanceList , getLoginBook } from "@/api/sunVillage_info/fixedAssets";
+  import SubjectTreeChooser from "@/components/form/SubjectTreeChooser";
+  import Cookies from "js-cookie";
+  import request from '@/utils/request'
+  export default {
+    name: "certificateList",
+    components: { SubjectTreeChooser },
+    data() {
+      return {
+        subjectName:'',
+        visible:false,
+        subjectId:'',
+        radio:'1',
+        applicationList:[],
+        applicationListSecond:[],
+        assetStatusOptions:[],
+        auditStatus:[],
+        loading: false,
+        finished: false,
+        show: false,
+        showTab: false,
+        showPickerTime: false,
+        fileList:[],
+        listLength:'0',
+        searchInput:'',
+        queryParams:{
+          pageNum:1,
+          pageSize:999,
+          startDate:'',
+          startSubjectId:'',
+          endSubjectId:'',
+          showSubSubject:false
+        },
+        uploadFiles1:[],
+        projectId:'',
+        projectIndex:'',
+        showBtn:true,
+        yearMonth:[],
+        deptName:'',
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(),
+        date:''
+      };
+    },
+    created() {
+      getLoginBook().then((res) => {
+        if (res.code == 200) {
+          if (res.data.currentDay != null || res.data.startDay != null){
+            let resDate = res.data.currentDay != null ? res.data.currentDay : res.data.startDay != null ? res.data.startDay : this.format(new Date(),'yyyy-MM')
+            this.queryParams.startDate = resDate;
+            let date = resDate.split('-');
+            this.date = date[0] + '年' + date[1] + '月';
+            this.currentDate = new Date(date[0], date[1]-1, 1)
+          }
+        }
+      });
+      this.getList();
+    },
+    methods: {
+      getList(){
+        var _this = this;
+        setTimeout(() => {
+          console.log(_this.queryParams)
+          trailBalanceList(_this.queryParams).then(response => {
+            _this.listLength = response.total;
+            response.rows.map(res=>{
+              res.bqjffs = Number(res.bqjffs).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+                return $1 + ","; }).replace(/\.$/, "");
+              res.bqdffs = Number(res.bqdffs).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+                return $1 + ","; }).replace(/\.$/, "");
+              res.qcjfye = Number(res.qcjfye).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+                return $1 + ","; }).replace(/\.$/, "");
+              res.qcdfye = Number(res.qcdfye).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+                return $1 + ","; }).replace(/\.$/, "");
+              res.qmjffs = Number(res.qmjffs).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+                return $1 + ","; }).replace(/\.$/, "");
+              res.qmdffs = Number(res.qmdffs).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+                return $1 + ","; }).replace(/\.$/, "");
+            })
+            _this.applicationList = response.rows;
+            if(_this.applicationList.length >= response.total){
+              _this.finished = true;
+              return;
+            }else{
+              _this.loading = false;
+              _this.queryParams.pageNum += 1 ;
+            }
+          });
+        }, 1000);
+      },
+      onConfirm(time) {
+        this.date = this.format(time,'yyyy年MM月');
+        this.queryParams.startDate = this.format(time,'yyyy-MM');
+        this.getList();
+        this.showPickerTime = false;
+      },
+      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();
+      },
+      showSub(val){
+        console.log(val)
+        this.queryParams.showSubSubject = val;
+        this.getList();
+      },
+      emptyInput(){
+        this.subjectName = '';
+        this.queryParams.endSubjectId = '';
+        this.queryParams.startSubjectId = '';
+        this.getList();
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  /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-left: 3%;
+  }
+  .right_box{
+    float: left;
+    width: calc(100% - 180PX);
+    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>

src/views/yinnong/workbench.vue

@@ -60,15 +60,15 @@
           </template>
         </van-cell>
         <van-grid :border="false">
-          <van-grid-item text="科目余额表" :to="{name:'approvalList'}" >
-            <div class="icon" slot="default" style="background:#FF4646;" >
-              <img src="../../../static/images/onlineHome/icon_Y1.png" alt />
+          <van-grid-item text="科目余额表" :to="{name:'yinnongListBalanceRanking'}" >
+            <div class="icon all" slot="default"  >
+              <img src="../../../static/images/onlineHome/icon_Y11.png" alt />
             </div>
             <p style="margin-top: 5px;color: #666666;">科目余额表</p>
           </van-grid-item>
-          <van-grid-item text="科目明细账" :to="{name:'approvalList'}" >
-            <div class="icon" slot="default" style="background:#FF4646;" >
-              <img src="../../../static/images/onlineHome/icon_Y2.png" alt />
+          <van-grid-item text="科目明细账" :to="{name:'yinnongDetailedLedger'}" >
+            <div class="icon all" slot="default">
+              <img src="../../../static/images/onlineHome/icon_Y12.png" alt />
             </div>
             <p style="margin-top: 5px;color: #666666;">科目明细账</p>
           </van-grid-item>
@@ -285,6 +285,17 @@
   >>> .icon img{
     width:50px;
   }
+  >>> .icon.all{
+    width: 80px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  >>> .icon.all img{
+    width: 80px;
+    /* padding: 0; */
+  }
   >>> .indexCard{
     margin:2%;width:96%;padding:20px 0;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff
   }