Merge branch 'master' of http://116.255.223.226:3000/zhangzl/nsgk_mobile

src/api/sunVillage_info/fixedAssets.js

@@ -437,3 +437,72 @@ export function publicPoll(id) {
     method: 'get'
   })
 }
+
+// 获取会计科目列表
+export const subjectData = (query) => {
+  return request({
+    url: '/finance/subject/listAll',
+    method: 'get',
+    params: query
+  })
+}
+
+//普通明细账接口
+export function listNormalDetails(query) {
+  return request({
+      url: '/finance/balance/listNormalDetails',
+      method: 'get',
+      params: query
+  })
+}
+//查询凭证信息明细
+export const voucherDetail = (data) => {
+  return request({
+    url: '/finance/voucher/detail',
+    method: 'get',
+    params: data
+  })
+}
+
+//统计填报列表数据
+export const statisticsList = (data) => {
+  return request({
+    url: '/entity/statistics/list',
+    method: 'get',
+    params: data
+  })
+}
+
+// 删除统计填报列表数据
+export function delStatisticsRemove(id) {
+  return request({
+    url: '/entity/statistics/remove/' + id,
+    method: 'get'
+  })
+} 
+
+//统计填报 - 模板
+export const entityStatisticsTemplate = (data) => {
+  return request({
+    url: '/entity/statistics/entityStatisticsTemplate',
+    method: 'get',
+    params: data
+  })
+}
+
+//统计填报 -保存模板
+export const entityStatisticsSave = (data) => {
+  return request({
+    url: '/entity/statistics/save',
+    method: 'post',
+    data: data
+  })
+}
+
+//统计填报 - 编辑
+export const entityStatisticsDetail = (id) => {
+  return request({
+    url: '/entity/statistics/detail/'+id,
+    method: 'get'
+  })
+}

src/router/index.js

@@ -2431,6 +2431,36 @@ 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: '/yinnong/detailedVoucher',
+    name: 'yinnongDetailedVoucher',
+    meta: {
+      title: '记账凭证',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/yinnong/voucher'], resolve)
+  },
   {
     path: '/lawEnforcement',
     name: 'lawEnforcement',
@@ -3422,6 +3452,42 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/sunVillage_info/list_register_detail'], resolve)
   },
+  { // 统计填报
+    path: '/sunVillage_info/statistical_report',
+    name: 'sunVillageInfoStatisticalReport',
+    meta: {
+      title: '统计填报',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/statistical_report'], resolve)
+  },
+  { // 统计填报--编辑
+    path: '/sunVillage_info/statistical_report_edit',
+    name: 'sunVillageInfoStatisticalReportEdit',
+    meta: {
+      title: '统计填报',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/statistical_report_edit'], resolve)
+  },
+  { //明细账
+    path: '/sunVillage_info/detailed_ledger',
+    name: 'sunVillageInfoDetailedLedger',
+    meta: {
+      title: '明细账',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/detailed_ledger'], resolve)
+  },
+  { //查看记账凭证
+    path: '/sunVillage_info/voucher',
+    name: 'sunVillageInfoVoucher',
+    meta: {
+      title: '记账凭证',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/voucher'], resolve)
+  },
   { ////阳光村务（新）-- 合同信息
     path: '/sunVillage_info/user',
     name: 'sunVillageInfoUser',

src/store/getters.js

@@ -6,7 +6,7 @@ const getters = {
   roles: state => state.user.roles,
   permissions: state => state.user.permissions,
   bookName: state => state.user.bookName,
-
+  deptName:  state => state.user.deptName,
   nickName: state => state.user.nickName,
   baseRoutingUrl: state => state.user.baseRoutingUrl,
   businessLevel: state => state.user.businessLevel,

src/store/modules/user.js

@@ -12,7 +12,7 @@ const user = {
     roles: [],
     permissions: [],
     bookName: '',
-
+    deptName:'',
     nickName: '',
     baseRoutingUrl: '',
     businessLevel: '',

src/utils/request.js

@@ -64,7 +64,7 @@ service.interceptors.response.use(res => {
   if (code === 401) {
     Dialog.confirm({
       title: '系统提示',
-      message: '登录状态已过期，您可以继续留在该页面，或者重新登录',
+      message: '登录状态已过期，请重新登录',
       confirmButtonText: '重新登录',
       cancelButtonText: '取消'
     })

src/views/sunVillage_info/detailed_ledger.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/sunVillage_info/index.vue

@@ -56,6 +56,7 @@
                 <router-link :to="{name:'sunVillageInfoListFinance'}" class="nav_item n_1">财务公开榜</router-link>
                 <router-link :to="{name:'sunVillageInfoListTourists'}" class="nav_item n_2">零工公开榜</router-link>
                 <router-link :to="{name:'sunVillageInfoListRegister'}" class="nav_item n_8">零工登记</router-link>
+                <router-link :to="{name:'sunVillageInfoStatisticalReport'}" class="nav_item n_9">统计填报</router-link>
                 <router-link :to="{name:'sunVillageInfoListIssues'}" class="nav_item n_3">重大事项</router-link>
                 <router-link :to="{name:'sunVillageInfoListVote'}" class="nav_item n_5">发布投票</router-link>
               </div>
@@ -142,7 +143,8 @@
                   <p style="font-weight: bold;font-size: 18px;display: inline-block">财务信息</p>
                 </template>
               </van-cell>
-              <router-link :to="{name:'sunVillageInfoListBalanceRanking'}" class="nav_item n_4">科目余额表</router-link>
+              <router-link :to="{name:'sunVillageInfoListBalanceRanking'}" class="nav_item n_4">余额表</router-link>
+              <router-link :to="{name:'sunVillageInfoDetailedLedger'}" class="nav_item n_10">明细账</router-link>
               <router-link :to="{name:'sunVillageInfoFixedAssets'}" class="nav_item n_6">固定资产</router-link>
               <router-link :to="{name:'sunVillageInfoInformation'}" class="nav_item n_7">合同信息</router-link>
             </div>
@@ -273,7 +275,6 @@
         })
       },
       selectChange(val){
-        console.log(val)
         val.index == 0 ? this.$router.push({path:"/sunVillage_info/user"}) : val.index == 1 ? this.$router.push({path:"/sunVillage_info/passWord"}) : val.index == 2 ? this.logout() : '';
       }
     },
@@ -404,23 +405,38 @@
                 &.n_4 {
                     background: url('../../assets/images/sunVillage_info/index_block_04.png') no-repeat center top;
                     background-size: 50%;
-                    margin-bottom: 20PX;
+                    // margin-bottom: 20PX;
                 }
                 &.n_5 {
                     background: url('../../assets/images/sunVillage_info/index_block_05.png') no-repeat center top;
                     background-size: 50%;
+                    margin-bottom: 20PX;
                 }
                 &.n_6 {
                     background: url('../../assets/images/sunVillage_info/index_block_06.png') no-repeat center top;
                     background-size: 50%;
+                    // margin-bottom: 20PX;
                 }
                 &.n_7 {
                     background: url('../../assets/images/sunVillage_info/index_block_07.png') no-repeat center top;
                     background-size: 50%;
+                    // margin-bottom: 20PX;
                 }
                 &.n_8 {
                     background: url('../../assets/images/sunVillage_info/index_block_08.png') no-repeat center top;
                     background-size: 50%;
+                    margin-bottom: 20PX;
+                }
+                &.n_9 {
+                    background: url('../../assets/images/sunVillage_info/index_block_09.png') no-repeat center top;
+                    background-size: 50%;
+                    margin-bottom: 20PX;
+
+                }
+                &.n_10 {
+                    background: url('../../assets/images/sunVillage_info/index_block_10.png') no-repeat center top;
+                    background-size: 50%;
+                    // margin-bottom: 20PX;
                 }
             }
           .icon{
@@ -441,6 +457,7 @@
       font-size: 22px;
       color: #3f3d56;
       text-align: center;
+      padding-top: 20px;
       padding-bottom: 25PX;
     }
 }

src/views/sunVillage_info/statistical_report.vue

@@ -0,0 +1,247 @@
+<template>
+    <div class="home_wrapper">
+        <div class="header_main">
+            统计填报
+            <div class="return_btn" @click="onClickLeft"></div>
+            <div class="add_btn" @click="goAdd"></div>
+        </div>
+
+        <div class="list_main">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="getList"
+          >
+            <!--1-->
+            <van-swipe-cell right-width="150" class="item"  v-for="(item,index) in applicationList" :key="index">
+               <div class="item_box" @click="$router.push({name:'sunVillageInfoStatisticalReportEdit',query:{id:item.id}})">
+                 <div class="head_block">
+                      <i class="icon"></i>
+                      <div class="title">{{item.templateName}}</div>
+                  </div>
+
+                  <div class="order_block">
+                        <div class="flex_block">
+                            <i class="icon icon_1"></i>
+                            <div class="text">{{item.time}}</div>
+                        </div>
+                        <div class="flex_block" v-if="item.applyUserName">
+                            <i class="icon icon_2"></i>
+                            <div class="text">{{item.applyUserName}}</div>
+                        </div>
+                        <div class="flex_block" v-if="item.processKey">
+                            <i class="icon icon_2"></i>
+                            <div class="text">{{item.processKey}}</div>
+                        </div>
+                  </div>
+               </div>
+              <template #right>
+                <div style="background-color: #ee0a24;height: 100%" @click="handleDelete(item,index)" >删除</div>
+                <router-link :to="{name:'sunVillageInfoStatisticalReportEdit',query:{id:item.id}}" style="background-color: #07c160">修改</router-link>
+              </template>
+            </van-swipe-cell>
+          </van-list>
+
+        </div>
+
+   </div>
+</template>
+
+<script>
+ import { statisticsList ,delStatisticsRemove} from "@/api/sunVillage_info/fixedAssets";
+export default {
+  name: "statisticalReport",
+  data() {
+    return {
+      loading: false,
+      finished: false,
+      applicationList:[],
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        // orderByColumn:'createTime',
+        // isAsc:'desc',
+      },
+  
+    };
+  },
+  created() {
+    
+  },
+  methods: {
+    getList(){
+      statisticsList(this.queryParams).then((response)=>{
+        if(response.code == 200){
+          for (var i = 0; i < response.rows.length; i++) {
+            this.applicationList.push(response.rows[i]);
+          }
+     
+          if(this.applicationList.length >= response.total){
+             this.finished = true;
+             return;
+           }else{
+             this.loading = false;
+             this.queryParams.pageNum += 1 ;
+           }
+        }
+      })  
+    },
+    /** 删除按钮操作 */
+    handleDelete(row,index) {
+      const ids = row.id || this.ids;
+      this.$dialog.alert(
+         {
+           message:'是否确认删除填报信息?',
+           title:"警告",
+           showCancelButton:true,
+           confirmButtonText: "确定",
+           cancelButtonText: "取消",
+         }
+       )
+       .then(function () {
+          return delStatisticsRemove(ids)
+       })
+       .then(() => {
+        this.applicationList.splice(index, 1);
+        this.$notify({ type: 'success', message: '删除成功' });
+       })
+    },
+
+    goAdd(){
+      this.$router.push('/sunVillage_info/statistical_report_edit')
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.home_wrapper{
+   background: #e9e9e9;
+   min-height: 100vh;
+   width: 100vw;
+   .header_main {
+       height: 116px;
+       background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
+       background-size: 100% 100%;
+       position: fixed;
+       top: 0;
+       left: 0;
+       width: 100%;
+       font-size: 36px;
+       line-height: 116px;
+       text-align: center;
+       color: #fff;
+       position: relative;
+
+       .return_btn {
+           width: 24px;
+           height: 43.2px;
+           background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+           background-size: 20px 36px;
+           position: absolute;
+           left: 38px;
+           top: 36px;
+       }
+
+       .add_btn {
+           width: 56.4px;
+           height: 40.8px;
+           background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+           background-size: 47px 34px;
+           position: absolute;
+           right: 38px;
+           top: 36px;
+       }
+   }
+
+   .list_main{
+       padding:26px 22px 0;
+       .item{
+           height: 162px;
+           border-radius: 30px;
+           background: #fff;
+           box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+           margin-bottom: 20px;
+           .item_box{
+             padding:25px 32px;
+           }
+           .head_block{
+               height: 62px;
+               display: flex;
+               align-items: center;
+               width: 100%;
+                .icon{
+                   width: 34px;
+                   height: 30px;
+                   background: url('../../assets/images/sunVillage_info/fixedAssets_icon_4.png') no-repeat;
+                   background-size: 100% 100%;
+                   display: block;
+                   margin-right: 12px;
+               }
+               .title{
+                   flex:1;
+                   font-size: 32px;
+                   color: #252525;
+                   overflow: hidden;
+                   text-overflow: ellipsis;
+                   white-space: nowrap;
+                   padding-right: 20px;
+
+               }
+           }
+           .order_block{
+                display: flex;
+                height: 52px;
+                padding-top: 12px;
+                font-size: 24px;
+                color: #858585;
+                align-items: center;
+                padding-bottom: 10px;
+                .flex_block{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 28px;
+                    height: 42px;
+                    .icon{
+                        width: 25px;
+                        height: 25px;
+                        margin-top: 3px;
+                        margin-right: 8px;
+                        &.icon_1{
+                            background:  url('../../assets/images/sunVillage_info/fixedAssets_icon_3.png') no-repeat;
+                            background-size: 100% 100%;
+                        }
+                        &.icon_2{
+                            background:  url('../../assets/images/sunVillage_info/fixedAssets_icon_5.png') no-repeat;
+                            background-size: 100% 100%;
+                        }
+                    }
+                }
+           }
+
+
+
+
+       }
+   }
+
+   /deep/ .van-swipe-cell__right{
+     display: flex;
+     align-items: center;
+     width: 150PX;
+     margin-left: 5PX;
+     a,div{
+       margin: 0;
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       color: #ffffff;
+       font-size: 14PX;
+       height: 100%;
+       flex: 1;
+     }
+   }
+}
+</style>

src/views/sunVillage_info/statistical_report_edit.vue

@@ -0,0 +1,821 @@
+<template>
+    <div class="home_wrapper">
+        <div class="header_main">
+            统计填报
+            <div class="return_btn" @click="onClickLeft"></div>
+        </div>
+        <div class="template_main">
+            <div class="title_wrap">
+                <div class="icon"></div>
+                <div class="title">模板</div>
+            </div>
+            <div class="search_wrap" @click="templateClick">
+                <div class="title">{{templateValue}}</div>
+                <div class="xs_icon"></div>
+            </div>
+        </div>
+        <div class="choose_main">
+            <div class="search_wrap">
+                <div class="title">申报类型</div>
+                <div class="content" @click="typeDeclarationClick">
+                    <div class="text">{{declarationTypeValue}}</div>
+                    <div class="xs_icon"></div>
+                </div>
+            </div>
+            <div class="search_wrap">
+                <div class="title">负责人</div>
+                <div class="content">
+                    <div class="text">
+                       <input v-model="from.principalName" type="text" class="fzr" placeholder="请输入">
+                    </div>
+                    <div class="xs_icon"></div>
+                </div>
+            </div>
+        </div>
+
+
+        <!--div class="table_main">
+            <div class="head_wrap">
+               <div class="project_name">项目名称</div>
+               <div class="unit_count">计数单位</div>
+               <div class="numerical_value">数值</div>
+            </div>
+            <div class="thead_wrap">
+                <div class="basic_info">
+                    <div class="basic_title">
+                        <div class="s_title">合作社发展基本情况</div>
+                    </div>
+                    <div class="type_wrap">
+                        <div class="industry_list">
+
+                            <div class="subdivision_list">
+                                <div class="subdivision_title">行业分布</div>
+                                <div class="subdivision_main">
+                                    <div class="planting_flex">
+                                        <div class="subclass">大豆种植</div>
+                                        <div class="unit_munt">个</div>
+                                        <div class="number_value">
+                                            <van-stepper v-model="stepperValue" /> 
+                                        </div>
+                                    </div>
+                                    <div class="planting_flex">
+                                        <div class="subclass">大豆种植</div>
+                                        <div class="unit_munt">个</div>
+                                        <div class="number_value">
+                                            <van-stepper v-model="stepperValue" /> 
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                        <div class="industry_list">
+                            <div class="type_project">各类合作社总数各类合</div>
+                            <div class="unit_munt">个</div>
+                            <div class="number_value">
+                                <van-stepper v-model="stepperValue" /> 
+                            </div>
+                        </div>
+                        <div class="industry_list">
+                            <div class="type_project">牧业</div>
+                            <div class="unit_munt">个</div>
+                            <div class="number_value">
+                                <van-stepper v-model="stepperValue" /> 
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="basic_info">
+                    <div class="basic_title">
+                        <div class="s_title">合作社发展基本情况</div>
+                    </div>
+                    <div class="type_wrap">
+                        <div class="industry_list">
+
+                            <div class="subdivision_list">
+                                <div class="subdivision_title">行业分布</div>
+                                <div class="subdivision_main">
+                                    <div class="planting_flex">
+                                        <div class="subclass">大豆种植</div>
+                                        <div class="unit_munt">个</div>
+                                        <div class="number_value">
+                                            <van-stepper v-model="stepperValue" /> 
+                                        </div>
+                                    </div>
+                                    <div class="planting_flex">
+                                        <div class="subclass">大豆种植</div>
+                                        <div class="unit_munt">个</div>
+                                        <div class="number_value">
+                                            <van-stepper v-model="stepperValue" /> 
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                        <div class="industry_list">
+                            <div class="type_project">各类合作社总数各类合</div>
+                            <div class="unit_munt">个</div>
+                            <div class="number_value">
+                                <van-stepper v-model="stepperValue" /> 
+                            </div>
+                        </div>
+                        <div class="industry_list">
+                            <div class="type_project">牧业</div>
+                            <div class="unit_munt">个</div>
+                            <div class="number_value">
+                                <van-stepper v-model="stepperValue" /> 
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div-->
+
+        <div class="table_main">
+            <div class="head_wrap">
+               <div class="project_name">项目名称</div>
+               <div class="unit_count">单位</div>
+               <div class="numerical_value">数值</div>
+            </div>
+            <div class="thead_wrap">
+                <!---1-->
+                <div class="basic_info" v-for="(item,index) in tEntityStatisticsNumberList" :key="index" >
+                    <div class="basic_title">
+                        <div class="s_title">{{item.projectName}}</div>
+                    </div>
+                    <div class="type_wrap">
+                        <!---2--->
+                        <div class="industry_list"  v-for="(data,idx) in item.children" :key="idx">
+                            <div v-if="data.children && data.children!=null" class="industry_block">
+                                <div class="subdivision_list">
+                                    <div class="subdivision_title">{{data.projectName}}</div>
+                                    <div class="subdivision_main">
+                                        <!---3--->
+                                        <div class="planting_flex" v-for="(val,num) in data.children" :key="num">
+                                            <div class="subclass">{{val.projectName}}</div>
+                                            <div class="unit_munt">{{val.measuringUnit}}</div>
+                                            <div class="number_value">
+                                                <!-- <van-stepper v-model="val.currentYearNumber"   min="0"/> 
+                                                <input type=""> -->
+                                                <van-field v-model="val.currentYearNumber" type="number" />
+                                            </div>
+                                        </div>
+                               
+
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else  class="industry_block">
+                                <div class="type_project">{{data.projectName}}</div>
+                                <div class="unit_munt">{{data.measuringUnit}}</div>
+                                <div class="number_value">
+                                    <!-- <van-stepper v-model="data.currentYearNumber" min="0" />  -->
+                                    <van-field v-model="data.currentYearNumber" type="number" />
+                                </div>
+                            </div>
+
+
+                        </div>
+           
+
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+
+        <div class="submit_btn">
+            <van-button type="info" @click="submitFrom" size="normal">保存填报信息</van-button>
+        </div>
+
+        <van-action-sheet v-model="popObj.typeDeclarationVisibile" duration="0.2" >
+            <van-picker
+                title="申报类型"
+                :columns="declarationTypeIdOptions"
+                show-toolbar
+                @confirm="declarationTypeIdConfirm"
+                @cancel="declarationTypeIdCancel"
+            >
+                <template #option="option">
+                <div style="display: flex; flex-direction: column; align-items: center;">
+                    <div>{{ option.dictLabel }}</div>
+                    <!-- <div>年龄：{{ option.age }}</div> -->
+                </div>
+                </template>
+            </van-picker>
+        </van-action-sheet>
+
+        <van-action-sheet v-model="popObj.templateVisbile" duration="0.2" >
+            <van-cascader
+                v-model="cascaderValue"
+                title="请选择所在地区"
+                :options="statisticsProject"
+                @close="popObj.templateVisbile = false"
+                @finish="projectOnFinish"
+                @change="projectOnChange"
+                :field-names="fieldNames"
+            />
+        </van-action-sheet>
+    </div>
+</template>
+
+<script>
+import {entityStatisticsTemplate ,entityStatisticsSave ,entityStatisticsDetail} from "@/api/sunVillage_info/fixedAssets";
+import {getInfo} from "../../api/login";
+export default {
+  name: "statisticalReportEdit",
+  data() {
+    return {
+        from:{
+            applyTime:null,
+            applyUserId:null,
+            applyUserName:null,
+            auditStatus:null,
+            createBy:null,
+            createTime:null,
+            deptId:null,
+            id:null,
+            instanceId:null,
+            processKey:null,
+            remark:null,
+            statisticsTypeId:null,
+            templateId:null, //模板id
+            updateBy:null,
+            updateTime:null,
+            templateName:null,  //模板名称
+            declarationTypeId:null, //申报类型 1 
+            principalName:null, //单位负责人  1 
+            preparer:null, //填表人  1
+            preparerDeptName:'', //填报单位 1
+            time:this.format(new Date(),'yyyy-MM-dd'), //填报时间
+            tEntityStatisticsNumberList:[]
+
+        },
+        //当前选中模板列表
+        tEntityStatisticsNumberList:[],
+        //选择模板标题
+        templateValue :'请选择模板',
+
+        popObj:{
+            typeDeclarationVisibile:false,
+            templateVisbile:false
+        },
+        // 申报类型ID字典
+        declarationTypeIdOptions: [],
+        declarationTypeValue:'请选择',
+        loading:true,
+        //模板list
+        //申报大项--列表
+        statisticsProject:[],
+        cascaderValue:null,
+        fieldNames:{
+            text: 'dictLabel',
+            value: 'dictValue',
+            children: 'children',
+        }
+        
+        
+  
+    };
+  },
+  created() {
+    this.getDicts("declaration_type_id").then(response => {
+        let content = response.data
+        this.declarationTypeIdOptions = content;
+
+        if(content.length>0){
+            this.from.declarationTypeId = content[0].dictValue;
+            this.declarationTypeValue = content[0].dictLabel;
+        }
+
+ 
+    });
+  },
+  mounted(){
+    getInfo().then(response => {
+        this.from.preparer = response.user.nickName
+        this.from.preparerDeptName = response.user.dept.deptName
+    });
+    let query = this.$route.query;
+    if(query&& query.id){
+        this.loading =true;
+        //編輯
+        let oId = this.$route.query.id;
+        entityStatisticsDetail(oId).then((res)=>{
+         
+            if(res.code == 200){
+                let content = res.data;
+                // let obj = {
+                //     applyTime:content.content,
+                //     applyTime:content.applyTime,
+                //     applyUserId:content.pplyUserId,
+                //     applyUserName:content.applyUserName,
+                //     auditStatus:content.auditStatus,
+                //     createBy:content.createBy,
+                //     createTime:content.createTime,
+                //     deptId:content.deptId,
+                //     id:content.id,
+                //     instanceId:content.instanceId,
+                //     processKey:content.processKey,
+                //     remark:content.remark,
+                //     statisticsTypeId:content.statisticsTypeId,
+                //     templateId:content.templateId, //模板id
+                //     updateBy:content.updateBy,
+                //     updateTime:content.updateTime,
+                //     templateName:content.templateName,  //模板名称
+                //     declarationTypeId:content.declarationTypeId, //申报类型 1 
+                //     principalName:content.principalName, //单位负责人  1 
+                //     preparer:content.preparer, //填表人  1
+                //     preparerDeptName:content.preparerDeptName, //填报单位 1
+                //     time:content.time,
+                //     tEntityStatisticsNumberList:content.tEntityStatisticsNumberList
+                // }
+
+                //当前选择模板
+                this.tEntityStatisticsNumberList = content.tEntityStatisticsNumberList;
+                //申报类型
+                let declarationTypeObj = this.declarationTypeIdOptions.find((account) => {
+                    //model就是上面的数据源
+                    return account.dictValue == content.declarationTypeId; //筛选出匹配数据
+                });
+                //请选择模板
+                this.templateValue = content.templateName
+
+                // this.loading =false;
+                this.declarationTypeValue = declarationTypeObj.dictLabel;
+                this.from = res.data;
+            }
+
+            
+        })
+    }
+
+    this.getDicts("newBusinessEntity_statistics_project").then(res => {
+        if(res.code == 200){
+            let content = res.data;
+            content.forEach((v)=>{
+                v.children = [];
+            })
+            this.statisticsProject = content;
+        }
+    });
+   
+  },
+  methods: {
+    projectOnFinish(data){
+
+        let content = data.selectedOptions[data.selectedOptions.length -1]
+        console.log(content)
+
+        this.tEntityStatisticsNumberList = content.templateForm.tEntityStatisticsNumberList;
+        this.templateValue = content.dictLabel;
+        // // this.from.templateName = data.label;
+        this.from = content.templateForm;
+        this.popObj.templateVisbile = false;
+    },
+    projectOnChange(value){
+        if(value.tabIndex == 0){
+           //查看
+            entityStatisticsTemplate({statisticsTypeId:value.selectedOptions[0].dictValue}).then((response)=>{
+                if(response.code == 200){ 
+                    let content = response.data;
+
+                    this.statisticsProject[Number(value.value)-1].children = content.map(item => {
+                        const recursionFileMap = obj => {
+                            obj.forEach((v,i)=>{
+
+                                if(v.currentYearNumber == null){
+                                    v.currentYearNumber = 0;
+                                }
+                                if (v.children && v.children != null) {
+                                    recursionFileMap(v.children)
+                                }
+                            })
+                        }
+                        recursionFileMap(item.tEntityStatisticsNumberList)
+             
+                        return { 
+                            dictLabel:item.templateName, 
+                            dictValue: item.templateId,
+                            templateForm:item,
+                            // templateForm:{
+                            //     templateId:item.id,
+                            //     templateName:item.templateName,
+                            //     declarationTypeId:item.declarationTypeId,
+                            //     tEntityStatisticsNumberList:item.tEntityStatisticsNumberList
+                            // }
+                        };
+                    });
+                    this.loading =false;
+
+                }
+            })
+        }
+    },
+    submitFrom(){
+        this.from.tEntityStatisticsNumberList = this.tEntityStatisticsNumberList;
+        this.from.tentityStatisticsNumberList = this.tEntityStatisticsNumberList;
+        if(this.from.templateName == null){
+            this.$notify({
+                message:'请选择模板!',
+                type: 'danger'
+            });
+    
+            return false;
+        }else if(this.from.declarationTypeId == null){
+            this.$notify({
+                message:'请选择申报类型!',
+                type: 'danger'
+            });
+            return false;
+        }else if(this.from.principalName == null){
+            this.$notify({
+                message:'请填写负责人!',
+                type: 'danger'
+            });
+            return false;
+        }
+        entityStatisticsSave(this.from).then((res)=>{
+            if(res.code == 200){
+                this.$notify({
+                    message:'保存成功!',
+                    type: 'success'
+                });
+                setTimeout(()=>{
+                    this.$router.push('/sunVillage_info/statistical_report')
+                },1500)
+            }
+            
+        })
+    },
+    typeDeclarationClick(){
+        this.popObj.typeDeclarationVisibile = true;
+    },
+    declarationTypeIdConfirm(value,index){
+        this.from.declarationTypeId = value.dictValue;
+        this.declarationTypeValue = value.dictLabel
+        this.popObj.typeDeclarationVisibile = false;
+    },
+    declarationTypeIdCancel(){
+        this.popObj.typeDeclarationVisibile = false;
+    },
+    templateClick(){
+        this.popObj.templateVisbile = true;
+    }
+  
+  },
+}
+</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;
+       }
+
+    
+   }
+   .template_main{
+        padding:30px 24px 0;
+        display: flex;
+        margin-bottom: 20px;
+        align-items: center;
+        .title_wrap{
+            display: flex;
+            align-items: center;
+            padding-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_11.png') center center no-repeat;
+                background-size: 27px 27px;
+                margin-right: 12px;
+            }
+            .title{
+                font-size: 30px;
+                color: #2facfe;
+            }
+        }
+        .search_wrap{
+            flex: 1;
+            height: 64px;
+            border-radius: 8px;
+            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
+            background: #fff;
+            display: flex;
+            padding:0 26px 0 22px;
+            align-items: center;
+            justify-content: space-between;
+
+         
+            .title{
+                width: 465px;
+                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%;
+            }
+
+            
+        }
+   }
+   .choose_main{
+        padding:0 24px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 26px;
+        .search_wrap{
+            height: 64px;
+            width: 48.5%;
+            border-radius: 8px;
+            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
+            background: #fff;
+            display: flex;
+            .title{
+                width: 145px;
+                font-size: 30px;
+                color: #fff;
+                background: #2facfe;
+                border-top-left-radius: 8px;
+                border-bottom-left-radius: 8px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            .content{
+                flex: 1;
+                padding:0 20px 0 10px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .text{
+                    width: 150px;
+                    // line-height: 64px;
+                    font-size: 30px;
+                    white-space: nowrap;
+                    text-align: center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    .fzr{
+                        width: 150px;
+                    }
+                }
+                .xs_icon{
+                    width: 11px;
+                    height: 23px;
+                    background: url('../../assets/images/sunVillage_info/list_icon_12.png') center center no-repeat;
+                    background-size: 100% 100%;
+                }
+            }
+        }
+        
+   }
+   .table_main{
+        padding:0px  24px 0 24px;
+        div{
+            box-sizing: border-box;
+        }
+        .head_wrap{
+            height: 69px;
+            display: flex;
+            font-size: 30px;
+            background: #fff;
+            color: #2facfe;
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+            .project_name,
+            .unit_count,
+            .numerical_value{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .project_name{
+                width: 359px;
+                background: #2facfe;
+                color: #fff;
+                border-radius: 8px;
+            }
+            .unit_count{
+                width: 140px;
+                border-right: 1px solid #0469ab;
+            }
+            .numerical_value{
+                width: 204px;
+                border-right: 1px solid #0469ab;
+            }
+        }
+
+        .thead_wrap{
+            .basic_info{
+                display: flex;
+                .basic_title{
+                   width: 63px;
+                   display: flex;
+                   align-items: center;
+                   justify-content: center;
+                   background: #6ac1fa;
+                   border-right: 1px solid #0469ab;
+                   border-bottom: 1px solid #0469ab;
+                   .s_title{
+                        width: 28px;
+                        font-size: 28px;
+                        padding:14px 0;
+                   }
+                }
+
+                .type_wrap{
+                    flex: 1;
+                    display: flex;
+                    flex-wrap: wrap;
+                    .industry_list{
+                        width: 100%;
+                        display: flex;
+                        border-bottom: 1px solid #0469ab;
+                        min-height: 75px;
+                        .industry_block{
+                            flex: 1;
+                            display: flex;
+                        }
+                        .type_project,
+                        .unit_munt,
+                        .number_value{
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
+
+                        .type_project{
+                            width: 296px;
+                            font-size: 28px;
+                            background: #aad8f6;
+                            padding:0 14px;
+                            font-size: 28px;
+                            border-right: 1px solid #0469ab;
+                        }
+                        .unit_munt{
+                            width: 140px;
+                            font-size: 28px;
+                            border-right: 1px solid #0469ab;
+                        }
+                        .number_value{
+                            width: 204px;
+                            border-right: 1px solid #0469ab;
+                           .van-cell {
+                                padding:20px 16px;
+                                background: none;
+                            
+                           }
+                           
+                            
+                        
+                        }
+
+
+                        .subdivision_list{
+                            flex: 1;
+                            display: flex;
+                            .subdivision_title{
+                                width: 76px;
+                                background: #aad8f6;
+                                font-size: 28px;
+                                display: flex;
+                                align-items: center;
+                                padding:0 8px;
+                                justify-content: center;
+                                border-right: 1px solid #0469ab;
+                            }
+                            .subdivision_main{
+                                flex: 1;
+                                display: flex;
+                                flex-wrap: wrap;
+                                .planting_flex{
+                                    width: 100%;
+                                    display: flex;
+                                    min-height: 75px;
+                                    border-bottom: 1px solid #0469ab;
+                                    &:last-child{
+                                        border-bottom: 0;
+                                    }
+                                    .subclass{
+                                        width: 220px;
+                                        display: flex;
+                                        align-items: center;
+                                        justify-content: center;
+                                        font-size: 27px;
+                                        padding:0 10px;
+                                        background: #d7e8f3;
+                                        border-right: 1px solid #0469ab;
+                                    }
+                                }
+                            }
+                        }
+
+
+
+
+
+
+
+
+
+                        // <div class="subdivision_list">
+                        //         <div class="subdivision_title">行业分布</div>
+                        //         <div class="subdivision_main">
+                        //             <!---3--->
+                        //             <div class="planting_flex">
+                        //                 大豆种植
+                        //             </div>
+                        //             <!---3--->
+                        //             <div class="planting_flex">
+                        //                 大豆种植
+                        //             </div>
+
+                        //         </div>
+
+
+                        //     </div>
+
+
+
+
+
+
+
+
+
+                    }
+                  
+                }
+            }
+        }
+
+   }
+   .submit_btn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+   }
+
+   /deep/ {
+        .van-stepper__minus,
+        .van-stepper__plus{
+            background: #2facfe;
+            color: #fff;
+        }
+        .van-stepper__minus--disabled{
+            color: #e9e9e9;
+        }
+        .van-stepper__input{
+            margin:0;
+            background: #e0f1fc;
+            font-size: 30px;
+            color: #2facfe;
+        }
+        .van-field__control{
+            text-align: center;
+        }
+    }
+
+}
+
+
+</style>

src/views/sunVillage_info/voucher.vue

@@ -0,0 +1,388 @@
+<template>
+    <div class="home_wrapper">
+        <div class="head_main">
+            <div class="header_main">
+                记账凭证
+                <div class="return_btn" @click="onClickLeft"></div>
+            </div>
+            <div class="Account_sleeve">
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">账套：</div>
+                    <div class="desc">{{$store.state.user.bookName}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">日期：</div>
+                    <div class="desc">{{vaocherObj.bookDate}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">凭证号：</div>
+                    <div class="desc">{{voucherNum}}号</div>
+                </div>
+            </div>
+        </div>
+        <div class="vocher_mian">
+            <div class="minimum_hd">{{vaocherObj.detailList.length}}条</div>
+            <!--1-->
+            <div class="vocher_block" v-for="(item,index) in vaocherObj.detailList" :key="index">
+                <div class="flex_block">
+                    <div class="m_title">
+                        <div class="icon">1</div>
+                        摘要
+                    </div>
+                    <div class="m_cont">{{item.voucherSummary}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">会计科目</div>
+                    <div class="m_cont">{{ item.subjectNameAll }}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">借方金额</div>
+                    <div class="m_cont money" v-if="item.jieAmount">¥ {{item.jieAmount}} 元</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">贷方金额</div>
+                    <div class="m_cont money" v-if="item.daiAmount">¥ {{item.daiAmount}} 元</div>
+                </div>
+            </div>
+            <!--1-->
+            <!-- <div class="vocher_block">
+                <div class="flex_block">
+                    <div class="m_title">
+                        <div class="icon">1</div>
+                        摘要
+                    </div>
+                    <div class="m_cont">购买设备</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">会计科目</div>
+                    <div class="m_cont">财政资金-人居环境整治</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">借方金额</div>
+                    <div class="m_cont money">¥ 10,000.00 元</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">贷方金额</div>
+                    <div class="m_cont money">¥ 10,000.00 元</div>
+                </div>
+            </div> -->
+        </div>
+
+        <div class="vocher_footer">
+            <div class="total_wrap">合计：<span class="money">{{capitalAmount}}</span></div>
+            <div class="personnel_wrap">
+                <div class="f_block">制单员：{{ vaocherObj.preparedBy }}</div>
+                <div class="f_block">审核员：{{ vaocherObj.checkedBy }}</div>
+            </div>
+        </div>
+       
+    </div>
+</template>
+<script>
+import { voucherDetail } from "@/api/sunVillage_info/fixedAssets";
+export default {
+  name: "sunVillageInfoVoucher",
+  data() {
+    return {
+        //凭证号
+        voucherId:'',
+        voucherNum:'',
+        //凭证数据
+        vaocherObj:{
+            detailList:[]
+        },
+        //大写总金额
+        capitalAmount:''
+    }
+  },
+  mounted(){
+    this.voucherId =  this.$route.query.vocherId;
+    this.voucherNum = decodeURI(this.$route.query.num);
+    this.initAxiox()
+  },
+  methods:{
+    initAxiox(){
+        voucherDetail({id:this.voucherId}).then((res)=>{
+            if(res.code == 200){
+                let content = res.data;
+                this.vaocherObj = content;
+                let totalAmount = 0;
+                if(content.detailList.length && content.detailList.length>0){
+                    content.detailList.forEach((v,i)=>{
+                        totalAmount +=v.jieAmount
+                    })
+                }
+                this.capitalAmount = this.convertCurrency(totalAmount);
+            }
+        })
+    },
+    convertCurrency(money) {
+      //汉字的数字
+      var cnNums = new Array(
+        "零",
+        "壹",
+        "贰",
+        "叁",
+        "肆",
+        "伍",
+        "陆",
+        "柒",
+        "捌",
+        "玖"
+      );
+      //基本单位
+      var cnIntRadice = new Array("", "拾", "佰", "仟");
+      //对应整数部分扩展单位
+      var cnIntUnits = new Array("", "万", "亿", "兆");
+      //对应小数部分单位
+      var cnDecUnits = new Array("角", "分", "毫", "厘");
+      //整数金额时后面跟的字符
+      var cnInteger = "整";
+      //整型完以后的单位
+      var cnIntLast = "元";
+      //最大处理的数字
+      var maxNum = 999999999999999.9999;
+      //金额整数部分
+      var integerNum;
+      //金额小数部分
+      var decimalNum;
+      //输出的中文金额字符串
+      var chineseStr = "";
+      //分离金额后用的数组，预定义
+      var parts;
+      if (money == "") {
+        return "";
+      }
+      money = parseFloat(money);
+      if (money >= maxNum) {
+        //超出最大处理数字
+        return "";
+      }
+      if (money == 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr;
+      }
+      //转换为字符串
+      money = money.toString();
+      if (money.indexOf(".") == -1) {
+        integerNum = money;
+        decimalNum = "";
+      } else {
+        parts = money.split(".");
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0, 4);
+      }
+      //获取整型部分转换
+      if (parseInt(integerNum, 10) > 0) {
+        var zeroCount = 0;
+        var IntLen = integerNum.length;
+        for (var i = 0; i < IntLen; i++) {
+          var n = integerNum.substr(i, 1);
+          var p = IntLen - i - 1;
+          var q = p / 4;
+          var m = p % 4;
+          if (n == "0") {
+            zeroCount++;
+          } else {
+            if (zeroCount > 0) {
+              chineseStr += cnNums[0];
+            }
+            //归零
+            zeroCount = 0;
+            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+          }
+          if (m == 0 && zeroCount < 4) {
+            chineseStr += cnIntUnits[q];
+          }
+        }
+        chineseStr += cnIntLast;
+      }
+      //小数部分
+      if (decimalNum != "") {
+        var decLen = decimalNum.length;
+        for (var i = 0; i < decLen; i++) {
+          var n = decimalNum.substr(i, 1);
+          if (n != "0") {
+            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
+          }
+        }
+      }
+      if (chineseStr == "") {
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+      } else if (decimalNum == "") {
+        chineseStr += cnInteger;
+      }
+      return chineseStr;
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+   background: #e9e9e9;
+   min-height: 100vh;
+   width: 100vw;
+   .head_main{
+        height: 440px;
+        background: url('../../assets/images/sunVillage_info/vocher_bg.png') no-repeat;
+        background-size: 100% 100%;
+        .header_main {
+                height: 116px;
+                // 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;
+                }
+
+        }
+        .Account_sleeve{
+            padding-left: 75px;
+            margin-top: 20px;
+            .flex_block{
+                padding-left: 30px;
+                display: flex;
+                font-size: 30px;
+                line-height: 30px;
+                color: #fff;
+                margin-bottom: 28px;
+                position: relative;
+                .x_m{
+                    position: absolute;
+                    width: 8px;
+                    height: 30px;
+                    left: 0;
+                    top: 0;
+                    background: #fff;
+                    border-radius: 8px;
+                }
+                .title{
+                    width: 125px;
+                }
+            }
+        }
+
+
+
+
+
+
+
+        // <div class="Account_sleeve">
+        //         <div class="flex_block">
+        //             <div class="title">账套：</div>
+        //             <div class="desc">长山镇李四村经济合作社</div>
+        //         </div>
+        //         <div class="flex_block">
+        //             <div class="title">日期：</div>
+        //             <div class="desc">2022-02-03</div>
+        //         </div>
+        //         <div class="flex_block">
+        //             <div class="title">凭证号：</div>
+        //             <div class="desc">记-55号</div>
+        //         </div>
+        //     </div>
+   }
+   .vocher_mian{
+        margin:-120px 28px 0;
+        background: #fff;
+        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+        border-radius: 20px;
+        padding:  40px 40px 60px;
+        .minimum_hd{
+            background: #2FACFE;
+            padding:0 22px;
+            height: 50px;
+            color: #fff;
+            line-height: 50px;
+            border-radius: 50px;
+            font-size: 30px;
+            display: inline-block;
+
+        }
+        .vocher_block{
+            padding-top: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px dashed #DCDCDC;
+            .flex_block{
+                display: flex;
+                justify-content: space-between;
+                height: 60px;
+                font-size: 30px;
+                .m_title{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: #878787;
+                
+                    .icon{
+                        height: 38px;
+                        width: 38px;
+                        background: #2FACFE;
+                        border-radius: 50%;
+                        color: #fff;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-right: 12px;
+
+                    }
+                }
+                .money{
+                    color: #E90000;
+                }
+            }
+        }
+   }
+   .vocher_footer{
+        margin:0 28px;
+        padding: 38px 0;
+        font-size: 30px;
+        border-bottom: 1px dashed #dedede;
+        .total_wrap{
+            margin:0 45px;
+            // height: 60px;
+            padding:18px 0;
+            // line-height: 60px;
+            display: flex;
+            align-items: center;
+          
+            .money{
+                color: #f00;
+            }
+        }
+        .personnel_wrap{
+            margin:0 45px;
+            height: 50px;
+            line-height: 50px;
+            color: #2FACFE;
+            justify-content: space-between;
+            display: flex;
+        }
+
+        // <div class="vocher_footer">
+        //     <div class="total_wrap">合计：<span class="money">贰万元整</span></div>
+        //     <div class="personnel_wrap">
+        //         <div class="f_block">制单员：张三</div>
+        //         <div class="f_block">审核员：王五</div>
+        //     </div>
+        // </div>
+   }
+}
+</style>

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: "/yinnong/detailedVoucher",
+            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/voucher.vue

@@ -0,0 +1,388 @@
+<template>
+    <div class="home_wrapper">
+        <div class="head_main">
+            <div class="header_main">
+                记账凭证
+                <div class="return_btn" @click="onClickLeft"></div>
+            </div>
+            <div class="Account_sleeve">
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">账套：</div>
+                    <div class="desc">{{$store.state.user.bookName}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">日期：</div>
+                    <div class="desc">{{vaocherObj.bookDate}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="x_m"></div>
+                    <div class="title">凭证号：</div>
+                    <div class="desc">{{voucherNum}}号</div>
+                </div>
+            </div>
+        </div>
+        <div class="vocher_mian">
+            <div class="minimum_hd">{{vaocherObj.detailList.length}}条</div>
+            <!--1-->
+            <div class="vocher_block" v-for="(item,index) in vaocherObj.detailList" :key="index">
+                <div class="flex_block">
+                    <div class="m_title">
+                        <div class="icon">1</div>
+                        摘要
+                    </div>
+                    <div class="m_cont">{{item.voucherSummary}}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">会计科目</div>
+                    <div class="m_cont">{{ item.subjectNameAll }}</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">借方金额</div>
+                    <div class="m_cont money" v-if="item.jieAmount">¥ {{item.jieAmount}} 元</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">贷方金额</div>
+                    <div class="m_cont money" v-if="item.daiAmount">¥ {{item.daiAmount}} 元</div>
+                </div>
+            </div>
+            <!--1-->
+            <!-- <div class="vocher_block">
+                <div class="flex_block">
+                    <div class="m_title">
+                        <div class="icon">1</div>
+                        摘要
+                    </div>
+                    <div class="m_cont">购买设备</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">会计科目</div>
+                    <div class="m_cont">财政资金-人居环境整治</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">借方金额</div>
+                    <div class="m_cont money">¥ 10,000.00 元</div>
+                </div>
+                <div class="flex_block">
+                    <div class="m_title">贷方金额</div>
+                    <div class="m_cont money">¥ 10,000.00 元</div>
+                </div>
+            </div> -->
+        </div>
+
+        <div class="vocher_footer">
+            <div class="total_wrap">合计：<span class="money">{{capitalAmount}}</span></div>
+            <div class="personnel_wrap">
+                <div class="f_block">制单员：{{ vaocherObj.preparedBy }}</div>
+                <div class="f_block">审核员：{{ vaocherObj.checkedBy }}</div>
+            </div>
+        </div>
+       
+    </div>
+</template>
+<script>
+import { voucherDetail } from "@/api/sunVillage_info/fixedAssets";
+export default {
+  name: "sunVillageInfoVoucher",
+  data() {
+    return {
+        //凭证号
+        voucherId:'',
+        voucherNum:'',
+        //凭证数据
+        vaocherObj:{
+            detailList:[]
+        },
+        //大写总金额
+        capitalAmount:''
+    }
+  },
+  mounted(){
+    this.voucherId =  this.$route.query.vocherId;
+    this.voucherNum = decodeURI(this.$route.query.num);
+    this.initAxiox()
+  },
+  methods:{
+    initAxiox(){
+        voucherDetail({id:this.voucherId}).then((res)=>{
+            if(res.code == 200){
+                let content = res.data;
+                this.vaocherObj = content;
+                let totalAmount = 0;
+                if(content.detailList.length && content.detailList.length>0){
+                    content.detailList.forEach((v,i)=>{
+                        totalAmount +=v.jieAmount
+                    })
+                }
+                this.capitalAmount = this.convertCurrency(totalAmount);
+            }
+        })
+    },
+    convertCurrency(money) {
+      //汉字的数字
+      var cnNums = new Array(
+        "零",
+        "壹",
+        "贰",
+        "叁",
+        "肆",
+        "伍",
+        "陆",
+        "柒",
+        "捌",
+        "玖"
+      );
+      //基本单位
+      var cnIntRadice = new Array("", "拾", "佰", "仟");
+      //对应整数部分扩展单位
+      var cnIntUnits = new Array("", "万", "亿", "兆");
+      //对应小数部分单位
+      var cnDecUnits = new Array("角", "分", "毫", "厘");
+      //整数金额时后面跟的字符
+      var cnInteger = "整";
+      //整型完以后的单位
+      var cnIntLast = "元";
+      //最大处理的数字
+      var maxNum = 999999999999999.9999;
+      //金额整数部分
+      var integerNum;
+      //金额小数部分
+      var decimalNum;
+      //输出的中文金额字符串
+      var chineseStr = "";
+      //分离金额后用的数组，预定义
+      var parts;
+      if (money == "") {
+        return "";
+      }
+      money = parseFloat(money);
+      if (money >= maxNum) {
+        //超出最大处理数字
+        return "";
+      }
+      if (money == 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr;
+      }
+      //转换为字符串
+      money = money.toString();
+      if (money.indexOf(".") == -1) {
+        integerNum = money;
+        decimalNum = "";
+      } else {
+        parts = money.split(".");
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0, 4);
+      }
+      //获取整型部分转换
+      if (parseInt(integerNum, 10) > 0) {
+        var zeroCount = 0;
+        var IntLen = integerNum.length;
+        for (var i = 0; i < IntLen; i++) {
+          var n = integerNum.substr(i, 1);
+          var p = IntLen - i - 1;
+          var q = p / 4;
+          var m = p % 4;
+          if (n == "0") {
+            zeroCount++;
+          } else {
+            if (zeroCount > 0) {
+              chineseStr += cnNums[0];
+            }
+            //归零
+            zeroCount = 0;
+            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+          }
+          if (m == 0 && zeroCount < 4) {
+            chineseStr += cnIntUnits[q];
+          }
+        }
+        chineseStr += cnIntLast;
+      }
+      //小数部分
+      if (decimalNum != "") {
+        var decLen = decimalNum.length;
+        for (var i = 0; i < decLen; i++) {
+          var n = decimalNum.substr(i, 1);
+          if (n != "0") {
+            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
+          }
+        }
+      }
+      if (chineseStr == "") {
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+      } else if (decimalNum == "") {
+        chineseStr += cnInteger;
+      }
+      return chineseStr;
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.home_wrapper{
+   background: #e9e9e9;
+   min-height: 100vh;
+   width: 100vw;
+   .head_main{
+        height: 440px;
+        background: url('../../assets/images/sunVillage_info/vocher_bg.png') no-repeat;
+        background-size: 100% 100%;
+        .header_main {
+                height: 116px;
+                // 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;
+                }
+
+        }
+        .Account_sleeve{
+            padding-left: 75px;
+            margin-top: 20px;
+            .flex_block{
+                padding-left: 30px;
+                display: flex;
+                font-size: 30px;
+                line-height: 30px;
+                color: #fff;
+                margin-bottom: 28px;
+                position: relative;
+                .x_m{
+                    position: absolute;
+                    width: 8px;
+                    height: 30px;
+                    left: 0;
+                    top: 0;
+                    background: #fff;
+                    border-radius: 8px;
+                }
+                .title{
+                    width: 125px;
+                }
+            }
+        }
+
+
+
+
+
+
+
+        // <div class="Account_sleeve">
+        //         <div class="flex_block">
+        //             <div class="title">账套：</div>
+        //             <div class="desc">长山镇李四村经济合作社</div>
+        //         </div>
+        //         <div class="flex_block">
+        //             <div class="title">日期：</div>
+        //             <div class="desc">2022-02-03</div>
+        //         </div>
+        //         <div class="flex_block">
+        //             <div class="title">凭证号：</div>
+        //             <div class="desc">记-55号</div>
+        //         </div>
+        //     </div>
+   }
+   .vocher_mian{
+        margin:-120px 28px 0;
+        background: #fff;
+        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+        border-radius: 20px;
+        padding:  40px 40px 60px;
+        .minimum_hd{
+            background: #2FACFE;
+            padding:0 22px;
+            height: 50px;
+            color: #fff;
+            line-height: 50px;
+            border-radius: 50px;
+            font-size: 30px;
+            display: inline-block;
+
+        }
+        .vocher_block{
+            padding-top: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px dashed #DCDCDC;
+            .flex_block{
+                display: flex;
+                justify-content: space-between;
+                height: 60px;
+                font-size: 30px;
+                .m_title{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: #878787;
+                
+                    .icon{
+                        height: 38px;
+                        width: 38px;
+                        background: #2FACFE;
+                        border-radius: 50%;
+                        color: #fff;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-right: 12px;
+
+                    }
+                }
+                .money{
+                    color: #E90000;
+                }
+            }
+        }
+   }
+   .vocher_footer{
+        margin:0 28px;
+        padding: 38px 0;
+        font-size: 30px;
+        border-bottom: 1px dashed #dedede;
+        .total_wrap{
+            margin:0 45px;
+            // height: 60px;
+            padding:18px 0;
+            // line-height: 60px;
+            display: flex;
+            align-items: center;
+          
+            .money{
+                color: #f00;
+            }
+        }
+        .personnel_wrap{
+            margin:0 45px;
+            height: 50px;
+            line-height: 50px;
+            color: #2FACFE;
+            justify-content: space-between;
+            display: flex;
+        }
+
+        // <div class="vocher_footer">
+        //     <div class="total_wrap">合计：<span class="money">贰万元整</span></div>
+        //     <div class="personnel_wrap">
+        //         <div class="f_block">制单员：张三</div>
+        //         <div class="f_block">审核员：王五</div>
+        //     </div>
+        // </div>
+   }
+}
+</style>

src/views/yinnong/workbench.vue

@@ -56,7 +56,30 @@
       <van-row  class="indexCard">
         <van-cell style="border-radius: 6px;">
           <template #title>
-            <p style="font-weight: bold;font-size: 18px;display: inline-block">银农支付</p>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">财务监管</p>
+          </template>
+        </van-cell>
+        <van-grid :border="false">
+          <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:'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>
+
+        </van-grid>
+      </van-row>
+
+      <van-row  class="indexCard">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">支出申请</p>
           </template>
         </van-cell>
         <van-grid :border="false">
@@ -66,24 +89,24 @@
             </div>
             <p style="margin-top: 5px;color: #666666;">银行卡转账</p>
           </van-grid-item>
-<!--          <van-grid-item text="代管转账" :to="{name:'approvalList4'}" >-->
-<!--            <div class="icon" slot="default" style="background:#c568f5;" >-->
-<!--              <img src="../../../static/images/onlineHome/icon_Y4.png" alt />-->
-<!--            </div>-->
-<!--            <p style="margin-top: 5px;color: #666666;">代管转账</p>-->
-<!--          </van-grid-item>-->
+          <!--          <van-grid-item text="代管转账" :to="{name:'approvalList4'}" >-->
+          <!--            <div class="icon" slot="default" style="background:#c568f5;" >-->
+          <!--              <img src="../../../static/images/onlineHome/icon_Y4.png" alt />-->
+          <!--            </div>-->
+          <!--            <p style="margin-top: 5px;color: #666666;">代管转账</p>-->
+          <!--          </van-grid-item>-->
           <van-grid-item text="信用卡还款" :to="{name:'approvalList2'}" >
             <div class="icon" slot="default" style="background:#3ac2db;" >
               <img src="../../../static/images/onlineHome/icon_Y2.png" alt />
             </div>
             <p style="margin-top: 5px;color: #666666;">信用卡还款</p>
           </van-grid-item>
-<!--          <van-grid-item text="现金提现" :to="{name:'approvalList10'}" >-->
-<!--            <div class="icon" slot="default" style="background:#FF6464;" >-->
-<!--              <img src="../../../static/images/onlineHome/icon_Y6.png" alt />-->
-<!--            </div>-->
-<!--            <p style="margin-top: 5px;color: #666666;">现金提现</p>-->
-<!--          </van-grid-item>-->
+          <!--          <van-grid-item text="现金提现" :to="{name:'approvalList10'}" >-->
+          <!--            <div class="icon" slot="default" style="background:#FF6464;" >-->
+          <!--              <img src="../../../static/images/onlineHome/icon_Y6.png" alt />-->
+          <!--            </div>-->
+          <!--            <p style="margin-top: 5px;color: #666666;">现金提现</p>-->
+          <!--          </van-grid-item>-->
           <van-grid-item text="备付金支出" :to="{name:'approvalList11'}" >
             <div class="icon" slot="default" style="background:#7790FE;" >
               <img src="../../../static/images/onlineHome/icon_Y7.png" alt />
@@ -122,6 +145,7 @@
           </van-grid-item>
         </van-grid>
       </van-row>
+
       <yinnongIndex></yinnongIndex>
     </div>
 </template>
@@ -261,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
   }