负债概况

src/libs/host.js

@@ -16,6 +16,7 @@ function urlFun(name){
         // default:`https://weixin.huansi.net/apiproxy/huansi/hszh_HSFabricTradeTest`,
         // default:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/${userID}`,
         default:`https://weixin.huansi.net/apiproxy/huansi/Tip`,
+        // default:`https://weixin.huansi.net/apiproxy/huansi/TIP_Test`,
         /**
          * 基本地址
          */

src/router/index.js

@@ -115,6 +115,12 @@ let tipRoutes = [
           title:"经营分析"
         }
       },
+      {
+        path:"/financeDetail",
+        name:"financeDetail",
+        component:()=>import("@/view/tiip/kanban/FinanceDetail.vue"),
+        meta:{ title:"" }
+      },
       {
         path:"/kanbanOperateDetail",
         name:"tiipOperateDetail",

src/view/tiip/kanban/Finance.vue

@@ -6,14 +6,22 @@
             box-shadow: 1px 1px 3px #aaa;
             padding: 10px;
             margin: 10px;
+            
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
             >.title{
                 font-size: 12px !important;
                 font-weight: 600;
             }
+            >.more{
+                color:#35BAF6;
+            }
             >.should{
                 display: flex;
                 text-align: center;
                 min-height:60px;
+                width:100%;
                 >div{
                     display: flex;
                     flex-direction: column;
@@ -32,6 +40,7 @@
                 display: flex;
                 text-align: center;
                 min-height:40px;
+                width:100%;
                 >div{
                     display: flex;
                     flex-direction: column;
@@ -50,47 +59,13 @@
                 }
             }
         }
-        >div{
-            >.title_{
-                display: inline-block;
-                background: #5E9AFE;
-                color: #fff;
-                border-bottom-right-radius: 50px;
-                border-top-right-radius: 50px;
-                padding: 6px 15px;
-                font-size: 16px;
-            }
-            >.card{
-                background: #fff;
-                border-radius: 7px;
-                box-shadow: 1px 1px 3px #aaa;
-                padding: 10px;
-                margin: 10px;
-                >div{
-                    border-left: 3px solid #5E9AFE;
-                    padding-left: 8px;
-                    display: flex;
-                    >div.num{
-                        flex-grow:1;
-                        >div{
-                            font-size:15px;
-                            &:not(:last-child){padding-bottom:4px;}
-                            >span:first-child{
-                                color:#777;
-                                padding-right:10px;
-                            }
-                        }
-                    }
-
-                }
-            }
-        }
     }
 </style>
 <template>
     <div class="Finance" :style="list.length==0&&'background:#fff;height:100%;'">
-        <div class="card">
+        <div class="card" v-if="list.length>0">
             <span class="title">应收应付</span>
+            <span class="more" @click="more(1)">更多</span>
             <div class="should">
                 <div>
                     <span>应收账款</span>
@@ -104,8 +79,9 @@
                 </div>
             </div>
         </div>
-        <div class="card">
+        <div class="card" v-if="list.length>0">
             <span class="title">实收实付</span>
+            <span class="more" @click="more(2)">更多</span>
             <div class="actual">
                 <div>
                     <span>{{(list.filter(v=>v.sName=="实付")[0]&&list.filter(v=>v.sName=="实付")[0].nAmount||0).toLocaleString()}}</span>
@@ -117,29 +93,6 @@
                 </div>
             </div>
         </div>
-
-        <!-- <div v-for="(v,k) in list" :key='k' v-if="list.length>0">
-            <div class="card">
-                <span style="font-size:15px;">{{v.sName}}</span>
-                <div>
-                    <div class="num">
-                        <div><span>数量</span><span>{{Number(v.nQty||0)}}</span></div>
-                        <div><span>金额</span><span style="color:#5E9AFE;">{{Number(v.nAmount||0).toLocaleString()}}</span></div>
-                        <div><span>余额</span><span style="color:#901AF7;">{{Number(v.nCloseAmount||0).toLocaleString()}}</span></div>
-                    </div>
-                    <XCircle 
-                        style="width: 70px;height: 70px;margin-right:15px;"
-                        :percent="Number(v.nPercent)||0"
-                        :stroke-width="10"
-                        :id="`perent${k}`"
-                        :stroke-color="color[k%4]"
-                        :trail-width="5"
-                        trail-color="#ececec">
-                        <span style="color:#36D1DC;">{{Number(v.nPercent)||0}}%</span>
-                    </XCircle>
-                </div>
-            </div>
-        </div> -->
         <img src="@/assets/noData.jpg" style="width:100%;" v-if="list.length==0"/>
     </div>
 </template>
@@ -199,7 +152,10 @@ export default {
                     showConfirmButton:false,
                 })
             }
-        }
+        },
+        more(val){
+            this.$router.push({name:"financeDetail",params:{mode:val}})
+        },
     },
 }
 </script>

src/view/tiip/kanban/FinanceDetail.vue

+<style lang="less">
+    #FinanceDetail{
+        display: flex;
+        flex-direction: column;
+        height:100%;
+        >.search{
+            padding:5px;
+            text-align: center;
+            >input{
+                background: #fff;
+                width: 90%;
+                border-radius: 5px;
+                height: 30px;
+                border: 1px solid #e9ecf3;
+                padding: 2px;
+            }
+        }
+        >.balance{
+            padding: 10px;
+            justify-content: space-between;
+            display: flex;
+            background: #fff;
+            border-bottom:1px solid #ddd;
+        }
+        >.content{
+            flex-grow:1;
+            overflow: auto;
+            height:1px;
+            >.list{
+                background:#fff;
+                display:flex;
+                >span{
+                    &:first-child{
+                        padding: 10px 5px 10px 20px;
+                        font-weight: 600;
+                    }
+                    &:nth-child(2n){
+                        flex-grow:1;
+                    }
+                    &:nth-child(2n-1){
+                        flex-shrink: 0;
+                    }
+                    &:not(:first-child){
+                        border-bottom: 1px solid #ddd;
+                        display: flex;
+                        align-items: center;
+                        color:#777;
+                    }
+                    &:last-child{
+                        padding:0 10px;
+                    }
+                }
+            }
+        }
+    }
+</style>
+<template>
+    <div id="FinanceDetail">
+        <tab v-model="tabIndex" prevent-default default-color="#000" active-color="#5E9AFE" @on-before-index-change="switchTabItem">
+            <template v-if="$route.params.mode==1">
+                <tab-item selected>应收账款</tab-item>
+                <tab-item>应付账款</tab-item>
+            </template>
+            <template v-else>
+                <tab-item selected>实收账款</tab-item>
+                <tab-item>实付账款</tab-item>
+            </template>
+        </tab>
+        <div>
+            <searchComponent :search="search"/>
+        </div>
+        <div class="search">
+            <input placeholder="请输入客户简称/名称进行搜索" v-model="searchValue"/>
+        </div>
+        <div class="balance" v-if="$route.params.mode==1">
+            <span>余额</span>
+            <span>{{balance.toLocaleString()}}</span>
+        </div>
+        <div class="content">
+            <div class="list" v-for="(v,k) in list" :key="k">
+                <span>{{k}}</span>
+                <span>{{v["客户名称"]}}</span>
+                <span>{{v["总金额"]}}</span>
+            </div>
+            <img src="@/assets/noData.jpg" style="width:100%;" v-if="list.length==0"/>
+        </div>
+    </div>
+</template>
+<script>
+import Util from '@/libs/util.js'
+import { Tab, TabItem } from 'vux'
+import searchComponent from "@/components/search"
+
+var inputIng=false
+var searchIng=false
+
+export default {
+    name:"FinanceDetail",
+    components:{Tab, TabItem,searchComponent},
+    data(){
+        return{
+            tabIndex:0,
+            search:{
+                dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
+                dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
+            },
+            searchValue:"",
+            balance:0,
+            list:[],
+        }
+    },
+    activated(){
+        
+        this.global.$off('searchData');
+        //查询条件触发加载
+        this.global.$on('searchData',async ()=>{
+            await this.searchList();
+        });
+
+        this.$nextTick(()=>{
+            this.searchList();
+        })
+    },
+    watch:{
+        searchValue(n,o){
+            this.delayedSearch()
+        },
+    },
+    methods:{
+        switchTabItem(index){
+            if(this.tabIndex!=index){
+                this.tabIndex=index
+                this.searchList()
+            }
+            
+        },
+        async searchList(){
+            var data=[
+                    {key:"begin_date",value:this.search.dBeginDate},
+                    {key:"end_date",value:this.search.dEndDate},
+                    {key:"url",value:"Financial Summary Dtl"},
+                    {key:"sType",value:(this.$route.params.mode==1?'应':'实')+(this.tabIndex==0?'收':'付')}
+                ]
+            this.searchValue&&data.push({key:"sQueryValue",value:this.searchValue})
+            var value=await this.request("getBoss",{
+                data:data
+            },"加载中",{})
+            this.list=value
+            this.total()
+        },
+        total(){
+            this.balance=0
+            this.list.forEach(v=>{
+                this.balance+=v["总金额"]
+            })
+        },
+        delayedSearch(){
+            inputIng=true
+            if(!searchIng){
+                searchIng=true
+                inputIng=false
+                this.searchList()
+                setTimeout(()=>{
+                    searchIng=false
+                    if(inputIng){
+                        inputIng=false
+                        this.delayedSearch()
+                    }
+                },500)
+            }
+        }
+    }
+}
+</script>