Skip to content

B
bms-vue-obear
Commit 3c6af816 authored by daywrite's avatar daywrite
Browse files
Options

费用报销列表

parent 62bbb809
Show whitespace changes
Inline Side-by-side
Showing with 250 additions and 21 deletions
src/apis/reimbursement.js
View file @ 3c6af816
export default {
getReimburrsementFilter: {
url: '/vue/reimbursement/get-filter'
},
getReimList: {
url: '/vue/reimbursement/list'
}
}
src/assets/css/app.scss
View file @ 3c6af816
......@@ -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
View file @ 3c6af816
<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
View file @ 3c6af816
......@@ -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 0 → 100644
View file @ 3c6af816
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment