费用报销列表

src/apis/reimbursement.js

 export default {
   getReimburrsementFilter: {
     url: '/vue/reimbursement/get-filter'
+  },
+  getReimList: {
+    url: '/vue/reimbursement/list'
   }
 }

src/assets/css/app.scss

@@ -26,10 +26,13 @@
   }
 }
 .reimbursement-app {
+  .mb10 {
+    margin-bottom:10px;
+  }
   .el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner{
     border-left: 1px solid #DCDFE6;
     margin: 0 2px 0 0;
-    border-radius: 1px;
+    border-radius: 3px;
   }
   .el-radio-button__inner:hover{
     color: #333;
@@ -38,9 +41,9 @@
   }
   .el-radio-button__orig-radio:checked+.el-radio-button__inner{
     color: #fff;
-    background-color: #3c3c3c;
-    border-color: #373737;
-    box-shadow: 0 0 0 0 #373737;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+    box-shadow: 0 0 0 0 #17a2b8;
   }
   .el-radio-button__orig-radio:checked+.el-radio-button__inner:hover{
     color: #333;

src/components/common/singleRadio.vue

 <template>
-  <section>
+  <section class="single">
     <el-radio-group size="small" 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-group>
@@ -14,26 +14,28 @@
   }
 </script>
 
-<style>
-  .el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner{
+<style scoped lang="scss">
+.single {
+  & .el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner{
     border-left: 1px solid #DCDFE6;
     margin: 0 10px 5px 0;
     border-radius: 6px!important;
   }
-  .el-radio-button__inner:hover{
+  & .el-radio-button__inner:hover{
     color: #333;
     background-color: #e6e6e6;
     border-color: #adadad;
   }
-  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
+  & .el-radio-button__orig-radio:checked+.el-radio-button__inner{
     color: #fff;
     background-color: #3c3c3c;
     border-color: #373737;
     box-shadow: 0 0 0 0 #373737;
   }
-  .el-radio-button__orig-radio:checked+.el-radio-button__inner:hover{
+  & .el-radio-button__orig-radio:checked+.el-radio-button__inner:hover{
     color: #333;
     background-color: #d4d4d4;
     border-color: #8c8c8c;
   }
+}
 </style>

src/components/reimbursement_list/reimbursementHome.vue

@@ -15,24 +15,23 @@
         @update:clientList="form =>{ updateForm(form) }">
       </search-form>
       <div class="page-body-content leaveMessage">
-        <div class="mb20">
+        <div class="mb10">
           <singleRadioTool
             :form-item="reimType"
             :options-list="reimTypeArray"
             @update:item="val => {reimType = val}">
           </singleRadioTool>
         </div>
-        <ScheduleItem
+        <ReimItem
           v-for="item in result.list"
           :item="item"
           :key="item.id">
           <span slot="opearate" class="obear-opearate-button">
             <el-button type="primary" size="mini" @click.prevent.stop="leaveMessageSch(item)"><span class="badge" v-if="item.unread">{{ item.unread ? item.unread : '' }}</span><i class="fa fa-commenting"></i>留言</el-button>
-            <el-button type="primary" size="mini" @click.prevent.stop="editSch(item)" :disabled="!item.can_report"><i class="fa fa-calendar-check-o"></i>汇报</el-button>
             <el-button type="primary" size="mini" @click.prevent.stop="editSch(item)" :disabled="!item.can_update"><i class="fa fa-edit animated"></i>编辑</el-button>
             <el-button type="primary" size="mini" @click.prevent.stop="deleteSch(item.id)" :disabled="!item.can_delete"><i class="fa fa-trash-o animated-hove"></i>删除</el-button>
           </span>
-        </ScheduleItem>
+        </ReimItem>
         <Pagenation
           @update:pager="pager => {updatePage(pager)}"
           :total="result.pagenation.totalcount">
@@ -55,9 +54,9 @@
 <script>
 import SearchHeader from '../common/searchHeader'
 import SearchForm from '../common/SearchForm'
-import ScheduleItem from '../common/scheduleItem'
+import ReimItem from './reimbursementItem'
 import ScheduleModal from '../schedule/scheduleModal'
-import LeaveMessage from '../common/leaveMessage'
+// import LeaveMessage from '../common/leaveMessage'
 import Pagenation from './reimbursementPagenation'
 import clickOutside from '@/lib/bind'
 import singleRadioTool from '../common/singleRadioTool'
@@ -71,9 +70,9 @@ export default {
   components: {
     SearchHeader,
     SearchForm,
-    ScheduleItem,
+    ReimItem,
     ScheduleModal,
-    LeaveMessage,
+    // LeaveMessage,
     Pagenation,
     singleRadioTool
   },
@@ -173,7 +172,7 @@ export default {
   methods: {
     init () {
       this.getFilter()
-      this.getScheduleList()
+      this.getList()
     },
 
     searchKeyword (search) {
@@ -233,8 +232,8 @@ export default {
       })
     },
 
-    getScheduleList () {
-      requestAPI(api.getScheduleList, {
+    getList () {
+      requestAPI(api.getReimList, {
         ...this.form,
         page: this.pagenation.thispage
       }).then((res) => {

src/components/reimbursement_list/reimbursementItem.vue

+<template>
+  <section class="obear-schedule-item">
+    <el-row class="obear-schedule-row">
+      <el-col :span="4" :xs="24" class="obear-schedule-left">
+        <el-row :gutter="10">
+          <el-col :span="24">
+            <span>{{ item.type.name }}</span>
+          </el-col>
+          <el-col :span="24">
+            <span>¥{{ item.amount }}</span>
+          </el-col>
+          <el-col :span="24" style="padding-left: 3px;">
+            <span>
+              <img class="user-avatar rounded-circle" :src="item.createdBy.avatar.name">{{ item.createdBy.name }}
+            </span>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="20" :xs="24" class="obear-schedule-right">
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            <span>费用类型：</span><span class="obear-schedule-right__content">{{ item.costType.name }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>报销状态：</span><span class="obear-schedule-right__content">{{ item.status_display }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>附件：</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>发生时间：{{ item.occurrence_at }}</span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            <span>客户名称：</span><span>{{ item.client.name }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>项目名称：</span><span>{{ item.project.name }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>审核人：</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>抄送：</span><span></span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            <span>提交时间：</span><span>{{ item.created_at }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>结算人：</span><span>{{ item.settleAccountsBy.name }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+          </el-col>
+          <el-col :span="6" :xs="24">
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            <span class="obear-schedule-right__content">费用说明</span><span>：{{ item.description }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+          </el-col>
+          <el-col :span="6" :xs="24">
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <slot name="opearate">
+            </slot>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'reimbursementItem',
+
+  props: {
+    item: Object
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  computed: {
+  },
+
+  mounted () {
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .colRed {
+    color: red;
+    border: 1px solid red;
+  }
+  .colGreen {
+    color: green;
+    border: 1px solid green;
+  }
+  .colWhite {
+    color: white;
+  }
+  .rounded-circle {
+    border-radius: 50% !important;
+  }
+
+  .user-avatar {
+    width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+  }
+  @include c('schedule-item') {
+    margin-bottom: 10px;
+    font-size: 12px;
+  }
+  @include c('schedule-item:first-child') {
+    .obear-schedule-left {
+      border-radius: 5px 0 0 0;
+    }
+  }
+  @include c('schedule-row') {
+    min-height:100px;
+    background-color:white;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  @include c('schedule-left') {
+    background-color: #EB7567;
+    min-height: 100%;
+    padding: 10px 15px 6px;
+    > .el-row {
+      > .el-col {
+        margin-bottom: 4px;
+      }
+    }
+    .el-row div:first-child, .el-row div:first-child a{
+      color: white;
+    }
+    span {
+      display: inline-block;
+      // padding-left: 5px;
+    }
+    i {
+      display:inline-block;
+      padding-right:5px;
+    }
+    img {
+      display:inline-block;
+      margin-right:3px;
+    }
+    @include e('private') {
+      display: inline-block;
+      padding-left: 5px;
+      border-radius:5px;
+      border: 1px solid white;
+      width:35px;
+      height:17px;
+    }
+  }
+  @include c('schedule-right') {
+    height:100%;
+    padding: 10px 15px 6px;
+    > .el-row {
+      > .el-col {
+        margin-bottom: 4px;
+        .el-button {
+          margin: 0 2px;
+          padding: 7px;
+        }
+        .date-time {
+          color: #649FD7;
+        }
+      }
+    }
+    .badge {
+      border-radius: 2px;
+      color: #333744;
+      background: #ffffff;
+      vertical-align: baseline;
+      display: inline;
+      padding: 2px 6px;
+    }
+    span.badge-unread {
+      &:hover {
+        border-color: #de321d
+      }
+      color: #fff;
+      background-color: #e54c3a;
+      border-color: #a32516
+    }y: flex;
+    @include e('item') {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      padding: 5px 0 5px 5px;
+      flex:1;
+    }
+    @include e('status') {
+      color: red;
+    }
+    @include e('content') {
+      display: inline-block;
+      border: 1px solid red;
+      border-radius:5px;
+      height:20px;
+      padding: 0 5px 0 5px;
+      color: red;
+    }
+  }
+</style>