添加列表

build/dev-server.js

 require('./check-versions')()
-let proxyMock = require('express-proxy-mock')
+// let proxyMock = require('express-proxy-mock')
 
 var config = require('../config')
 if (!process.env.NODE_ENV) {
@@ -24,7 +24,7 @@ var autoOpenBrowser = !!config.dev.autoOpenBrowser
 var proxyTable = config.dev.proxyTable
 
 var app = express()
-proxyMock(app)
+// proxyMock(app)
 var compiler = webpack(webpackConfig)
 
 var devMiddleware = require('webpack-dev-middleware')(compiler, {

itemProxy.json

-[{"url":"http://vue.jinchangxiao.com","target":"http://localhost:8885","hasProxy":true,"ignorePath":false}]
+[]
\ No newline at end of file

src/components/common/singleRadioTool.vue

 <template>
   <section>
     <el-radio-group size="mini" v-model="item">
-      <el-radio-button v-for="(radio, key) in optionsList" :key="key" :label="radio.name" :value="radio.value">{{ radio.value }}</el-radio-button>
+      <el-radio-button v-for="(radio, key) in optionsList" :key="key" :label="radio.key" :value="radio.name">{{ radio.name }}</el-radio-button>
     </el-radio-group>
   </section>
 </template>
@@ -15,5 +15,5 @@
 </script>
 
 <style scoped>
-  
+
 </style>

src/components/reimbursement_list/countArr.vue

+<template>
+  <section class="obear-countArr-section">
+    <div class="obear-countArr-row">
+      <div class="obear-countArr-row__col" v-for="item in list" :key="item.key">
+        <div class="obear-countArr-option">
+          <span class="obear-countArr-option__label">{{ item.name }}</span>
+          <span class="obear-countArr-option__number">{{ item.count }}</span>
+          <span class="obear-countArr-option__unit">笔</span>
+          <br>
+          <span class="obear-countArr-option__number">{{ item.value }}</span>
+          <span class="obear-countArr-option__unit">元</span>
+          <a class="obear-report-link btn-status" href="javascript:void(0);" data-id=""><i class="fa fa-fw fa-external-link"></i></a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: 'countArr',
+
+  props: {
+    list: Array
+  }
+}
+</script>
+<style lang="scss" scoped>
+@include c('countArr-section'){
+  background-color:white;
+}
+@include c('countArr-row'){
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  justify-content:center;
+  align-items:center;
+  @include e('col'){
+    position: relative;
+    width: 100%;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+}
+@include c('countArr-option'){
+  position: relative;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  color: #FFF;
+  padding: 0 0 6px;
+  text-align: center;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color:#98c450;
+  @include e('label'){
+    display: block;
+    color: #fff;
+    font-size: 14px;
+    padding: 3px 0;
+    margin-bottom: 3px;
+    border-bottom: 1px solid #FFF;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  @include e('number'){
+    font-size: 22px;
+  }
+}
+@include c('report-link'){
+  color: #FFF;
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+}
+</style>

src/components/reimbursement_list/reimbursementHome.vue

@@ -14,14 +14,19 @@
         :filter="filter"
         @update:clientList="form =>{ updateForm(form) }">
       </search-form>
-      <div class="page-body-content leaveMessage">
+      <div class="page-body-content">
         <div class="mb10">
           <singleRadioTool
             :form-item="reimType"
-            :options-list="reimTypeArray"
+            :options-list="result.navCount"
             @update:item="val => {reimType = val}">
           </singleRadioTool>
         </div>
+        <div class="mb10">
+          <countArr
+            :list="result.countArr">
+          </countArr>
+        </div>
         <ReimItem
           v-for="item in result.list"
           :item="item"
@@ -40,7 +45,7 @@
           v-click-outside="lmClose"
           ref="leaveMessage"
           :lmTemplate="lmTemplate"
-          :type="9">
+          :type="20">
         </leave-message>
       </div>
     </div>
@@ -56,6 +61,7 @@ import SearchHeader from '../common/searchHeader'
 import SearchForm from '../common/SearchForm'
 import ReimItem from './reimbursementItem'
 import ScheduleModal from '../schedule/scheduleModal'
+import CountArr from './countArr'
 // import LeaveMessage from '../common/leaveMessage'
 import Pagenation from './reimbursementPagenation'
 import clickOutside from '@/lib/bind'
@@ -72,6 +78,7 @@ export default {
     SearchForm,
     ReimItem,
     ScheduleModal,
+    CountArr,
     // LeaveMessage,
     Pagenation,
     singleRadioTool
@@ -85,41 +92,33 @@ export default {
     return {
       lmTemplate: [
         {
-          name: '客户名称',
-          value: 'client.name',
-          default: '未设置'
-        },
-        {
-          name: '内容',
-          value: 'description'
-        },
-        {
-          name: '待办时间',
-          value: 'schedule_week_display'
+          name: '报销类型',
+          value: 'type.name',
+          default: ''
         },
         {
-          name: '状态',
-          value: 'schedule_status_display'
+          name: '费用金额',
+          value: 'amount'
         },
         {
-          name: '开始时间',
-          value: 'start_at'
+          name: '报销状态',
+          value: 'status_display'
         },
         {
-          name: '结束时间',
-          value: 'end_at'
+          name: '发生时间',
+          value: 'occurrence_at'
         },
         {
-          name: '重复',
-          value: 'repeatSchedule'
+          name: '费用说明',
+          value: 'description'
         },
         {
-          name: '负责人',
-          value: 'repeatSchedule'
+          name: '费用类型',
+          value: 'costType.name'
         },
         {
-          name: '创建时间',
-          value: 'created_at'
+          name: '录入人',
+          value: 'createdBy.name'
         }
       ],
       filter: [],
@@ -127,30 +126,15 @@ export default {
         'ClientSearch[keyword]': ''
       },
       reimType: '',
-      reimTypeArray: [
-        {
-          'name': 0,
-          'value': '报销单'
-        },
-        {
-          'name': 1,
-          'value': '我审核的'
-        },
-        {
-          'name': 2,
-          'value': '抄送我的'
-        },
-        {
-          'name': 3,
-          'value': '我结算的'
-        }
-      ],
+      // reimTypeArray: [],
       pagenation: {
         thispage: 1,
         pagesize: 10
       },
       result: {
         list: [],
+        countArr: [],
+        navCount: [],
         pagenation: {
           totalcount: 1,
           thispage: 1,
@@ -181,12 +165,12 @@ export default {
 
     updateForm (search) {
       Object.assign(this.form, search)
-      this.getScheduleList()
+      this.getList()
     },
 
     updatePage (pager) {
       Object.assign(this.pagenation, pager)
-      this.getScheduleList()
+      this.getList()
     },
 
     getFilter () {
@@ -196,12 +180,12 @@ export default {
     },
 
     leaveMessageSch (item) {
-      this.$refs.leaveMessage.isShow(item)
+      this.$refs.leaveMessage.btnShow(item)
     },
 
     lmClose () {
       this.$refs.leaveMessage &&
-      this.$refs.leaveMessage.isClose()
+      this.$refs.leaveMessage.btnClose()
     },
 
     scheduleClose () {
@@ -239,11 +223,16 @@ export default {
       }).then((res) => {
         const {
           list = [],
+          countArr = [],
+          navCount = [],
           pagenation = {},
           thisUser = {}
         } = res
 
         this.result.list = list
+        this.result.countArr = countArr
+        this.result.navCount = navCount
+        this.reimType = navCount[0].key
         this.result.pagenation = pagenation
         this.result.thisUser = thisUser
       })

src/components/reimbursement_list/reimbursementItem.vue

@@ -7,7 +7,7 @@
             <span>{{ item.type.name }}</span>
           </el-col>
           <el-col :span="24">
-            <span>¥{{ item.amount }}</span>
+            <span>{{ '¥ ' + item.amount }}</span>
           </el-col>
           <el-col :span="24" style="padding-left: 3px;">
             <span>
@@ -33,10 +33,10 @@
         </el-row>
         <el-row :gutter="10">
           <el-col :span="6" :xs="24">
-            <span>客户名称：</span><span>{{ item.client.name }}</span>
+            <span>客户名称：</span><span class="colBlue">{{ item.client.name }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
-            <span>项目名称：</span><span>{{ item.project.name }}</span>
+            <span>项目名称：</span><span class="collightBlue">{{ item.project.name }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
             <span>审核人：</span>
@@ -47,7 +47,7 @@
         </el-row>
         <el-row :gutter="10">
           <el-col :span="6" :xs="24">
-            <span>提交时间：</span><span>{{ item.created_at }}</span>
+            <span>提交时间：</span><span class="collightBlue">{{ item.created_at }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
             <span>结算人：</span><span>{{ item.settleAccountsBy.name }}</span>
@@ -111,6 +111,12 @@ export default {
   .colWhite {
     color: white;
   }
+  .collightBlue {
+    color: #649FD7;
+  }
+  .colBlue {
+    color: #0056b3;
+  }
   .rounded-circle {
     border-radius: 50% !important;
   }
@@ -138,6 +144,7 @@ export default {
   }
   @include c('schedule-left') {
     background-color: #EB7567;
+    color: white;
     min-height: 100%;
     padding: 10px 15px 6px;
     > .el-row {