Skip to content

B
bms-vue-obear
Commit fa5cd42b authored by huai.li's avatar huai.li
Browse files
Options

Merge branch 'f_reim' of 140.143.226.1:daywrite/bms-vue-obear into f_reim

parents d0a10db2 50c4a173
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1117 additions and 73 deletions
build/dev-server.js
View file @ fa5cd42b
require('./check-versions')() require('./check-versions')()
let proxyMock = require('express-proxy-mock') // let proxyMock = require('express-proxy-mock')
var config = require('../config') var config = require('../config')
if (!process.env.NODE_ENV) { if (!process.env.NODE_ENV) {
...@@ -24,7 +24,7 @@ var autoOpenBrowser = !!config.dev.autoOpenBrowser ...@@ -24,7 +24,7 @@ var autoOpenBrowser = !!config.dev.autoOpenBrowser
var proxyTable = config.dev.proxyTable var proxyTable = config.dev.proxyTable
var app = express() var app = express()
proxyMock(app) // proxyMock(app)
var compiler = webpack(webpackConfig) var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, { var devMiddleware = require('webpack-dev-middleware')(compiler, {
......
index.ejs
View file @ fa5cd42b
...@@ -25,10 +25,16 @@ ...@@ -25,10 +25,16 @@
"title": "首页", "title": "首页",
"appName": portalName, "appName": portalName,
"url": "/scheduleHome" "url": "/scheduleHome"
}, {
"icon": "fa-home",
"isRouteShow": 1,
"title": "费用报销",
"appName": 'reimbursement',
"url": "/reimbursementHome"
}], }],
homePage: { homePage: {
appName: portalName, appName: 'reimbursement',
url: '/scheduleHome' url: '/reimbursementHome'
} }
} }
......
itemProxy.json
View file @ fa5cd42b
[{"url":"http://vue.jinchangxiao.com","target":"http://localhost:8885","hasProxy":true,"ignorePath":false}] []
\ No newline at end of file \ No newline at end of file
src/api.js
View file @ fa5cd42b
import ScheduleApi from './apis/schedule.js' import ScheduleApi from './apis/schedule.js'
import ReimburrsementApi from './apis/reimbursement.js'
const API_HOST = process.env.API_HOST const API_HOST = process.env.API_HOST
const API_PORT = process.env.API_PORT const API_PORT = process.env.API_PORT
...@@ -24,6 +25,7 @@ const option = { ...@@ -24,6 +25,7 @@ const option = {
let apis = {} let apis = {}
apis = Object.assign(apis, ScheduleApi) apis = Object.assign(apis, ScheduleApi)
apis = Object.assign(apis, ReimburrsementApi)
export default { export default {
option, option,
......
src/apis/reimbursement.js 0 → 100644
View file @ fa5cd42b
export default {
getReimburrsementFilter: {
url: '/vue/reimbursement/get-filter'
},
getReimList: {
url: '/vue/reimbursement/list'
},
getReimNew: {
url: '/vue/reimbursement/get-new'
}
}
src/assets/css/app.scss
View file @ fa5cd42b
.schedule-app { @import './schedule-app.scss';
.mb20 { @import './reim-app.scss';
margin-bottom:20px;
}
.el-button--cancel {
color:white;
background-color: #EB7567;
border-color: #e86150;
}
.el-button--confirm {
color:white;
background-color:#649FD7;
border-color:#5092d2;
}
.el-dialog__header {
background-color: #333744;
}
.el-dialog__title {
color:white;
}
.is-disabled {
color: #fff!important;
background-color: #999!important;
border-color: #888!important;
}
}
src/assets/css/reim-app.scss 0 → 100644
View file @ fa5cd42b
.reimbursement-app {
.el-button--cancel {
color:white;
background-color: #EB7567;
border-color: #e86150;
}
.el-button--confirm {
color:white;
background-color:#649FD7;
border-color:#5092d2;
}
.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: 3px;
}
& .el-radio-button__inner:hover{
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
& .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{
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
}
.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: 3px;
}
.el-radio-button__inner:hover{
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
color: #fff;
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;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
}
src/assets/css/schedule-app.scss 0 → 100644
View file @ fa5cd42b
.schedule-app {
.mb20 {
margin-bottom:20px;
}
.el-button--cancel {
color:white;
background-color: #EB7567;
border-color: #e86150;
}
.el-button--confirm {
color:white;
background-color:#649FD7;
border-color:#5092d2;
}
.el-dialog__header {
background-color: #333744;
}
.el-dialog__title {
color:white;
}
.is-disabled {
color: #fff!important;
background-color: #999!important;
border-color: #888!important;
}
}
src/components/common/settingMixin.js
View file @ fa5cd42b
...@@ -11,34 +11,54 @@ export default { ...@@ -11,34 +11,54 @@ export default {
computed: { computed: {
createdByArray () { createdByArray () {
let ret = this.getArrayByKey('created_by') let ret = this.getArrayByKey('Schedules', 'created_by')
return ret && [].concat(ret.value) return ret && [].concat(ret.value)
}, },
timeTypeArray () { timeTypeArray () {
let ret = this.getArrayByKey('time_type') let ret = this.getArrayByKey('Schedules', 'time_type')
return ret && [].concat(ret.value) return ret && [].concat(ret.value)
}, },
alarmBeforeArray () { alarmBeforeArray () {
let ret = this.getArrayByKey('alarm_before') let ret = this.getArrayByKey('Schedules', 'alarm_before')
return ret && [].concat(ret.value) return ret && [].concat(ret.value)
}, },
repeatTypeArray () { repeatTypeArray () {
let ret = this.getArrayByKey('repeat_type') let ret = this.getArrayByKey('Schedules', 'repeat_type')
return ret && [].concat(ret.value)
},
reimTypeArray () {
let ret = this.getArrayByKey('Reimbursements', 'form_type')
return ret && [].concat(ret.value)
},
reimCostTypeArray () {
let ret = this.getArrayByKey('Reimbursements', 'cost_type')
return ret && [].concat(ret.value)
},
reimbursementVerifyRels () {
let ret = this.getArrayByKey('Reimbursements', 'form_reimbursementVerifyRels')
return ret && [].concat(ret.value)
},
reimbursementCarbonCopyRels () {
let ret = this.getArrayByKey('Reimbursements', 'form_reimbursementCarbonCopyRels')
return ret && [].concat(ret.value) return ret && [].concat(ret.value)
} }
}, },
methods: { methods: {
selectKeyFormat (key) { selectKeyFormat (type, key) {
return `Schedules[${key}]` return `${type}[${key}]`
}, },
getArrayByKey (key) { getArrayByKey (type, key) {
if (this.retNewArray) { if (this.retNewArray) {
return this.retNewArray[this.selectKeyFormat(key)] return this.retNewArray[this.selectKeyFormat(type, key)]
} else { } else {
return [] return []
} }
...@@ -51,6 +71,13 @@ export default { ...@@ -51,6 +71,13 @@ export default {
}) })
}, },
getReimbursementNew () {
requestAPI(api.getReimNew)
.then((res) => {
this.retNewArray = res.options
})
},
getNewArray () { getNewArray () {
requestAPI(api.getSaveNew) requestAPI(api.getSaveNew)
.then((res) => { .then((res) => {
......
src/components/common/singleRadio.vue
View file @ fa5cd42b
<template> <template>
<section> <section class="single">
<el-radio-group size="small" v-model="item"> <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> </el-radio-group>
</section> </section>
</template> </template>
...@@ -14,26 +14,5 @@ ...@@ -14,26 +14,5 @@
} }
</script> </script>
<style> <style scoped lang="scss">
.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{
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.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{
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
</style> </style>
src/components/common/singleRadioTool.vue 0 → 100644
View file @ fa5cd42b
<template>
<section>
<el-radio-group size="mini" v-model="item">
<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>
<script>
import singleItemMixin from './singleItemMixin'
export default {
name: 'single-radio',
mixins: [singleItemMixin]
}
</script>
<style scoped>
</style>
src/components/reimbursement/reimbursementForm.vue 0 → 100644
View file @ fa5cd42b
<template>
<section class="ec-page-wrapper" style="overflow: hidden; padding-bottom: 0px;">
<el-form label-width="120px" ref="form" :rules="rules" :model="model" class="ec-create-form">
<el-form-item label="报销类型：" prop="form_type" class="ec-clear-left is-required">
<single-radio
:form-item="model.form_type"
:options-list="reimTypeArray"
@update:item="val => {model.form_type = val}">
</single-radio>
</el-form-item>
<el-form-item label="费用类型：" prop="cost_type" class="ec-clear-left is-required">
<single-radio
:form-item="model.cost_type"
:options-list="reimCostTypeArray"
@update:item="val => {model.cost_type = val}">
</single-radio>
</el-form-item>
<el-form-item label="待办时间：" prop="occurrence_at" class="ec-clear-left is-required">
<el-date-picker
size="small"
v-model="model.occurrence_at"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="费用金额：" prop="amount" class="ec-clear-left ec-form-item-lg is-required">
<el-input
class="ec-input-normal"
size="small"
v-model.stop.prevent="model.amount">
</el-input>
<span class="tips"></span>
</el-form-item>
<!-- <el-form-item label="客户：" prop="client_id" class="ec-clear-left ec-form-item-lg is-required">
<el-select v-model="model.client_id" placeholder="请选择">
<el-option v-for="(option, optKey) in item.value"
:key="optKey"
:label="option.name"
:value="option.key"></el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="项目名称：" prop="client_id" class="ec-clear-left ec-form-item-lg is-required">
<el-select v-model="model.client_id" placeholder="请选择">
<el-option v-for="(option, optKey) in item.value"
:key="optKey"
:label="option.name"
:value="option.key"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="审核人：" prop="form_reimbursementVerifyRels" class="ec-clear-left ec-form-item-lg is-required">
<el-select v-model="model.form_reimbursementVerifyRels" size="small" multiple placeholder="请选择">
<el-option v-for="(option, optKey) in reimbursementVerifyRels"
:key="optKey"
:label="option.name"
:value="option.key"></el-option>
</el-select>
</el-form-item>
<el-form-item label="结算人：" prop="actName" class="ec-clear-left is-required">
<settle-account-select
:query="model"
:inputWidth="340"
:startLoadInitial="false"/>
</el-form-item>
<el-form-item label="抄送：" prop="form_reimbursementCarbonCopyRels" class="ec-clear-left ec-form-item-lg">
<el-select v-model="model.form_reimbursementCarbonCopyRels" size="small" multiple placeholder="请选择">
<el-option v-for="(option, optKey) in reimbursementCarbonCopyRels"
:key="optKey"
:label="option.name"
:value="option.key"></el-option>
</el-select>
</el-form-item>
<el-form-item label="费用说明：" prop="description" class="ec-clear-left ec-form-item-lg">
<el-input
class="ec-input-normal"
type="textarea"
:rows="2"
v-model.trim="model.description">
</el-input>
</el-form-item>
</el-form>
</section>
</template>
<script>
import settleAccountSelect from './settleAccountSelect'
import singleRadio from '../common/singleRadio'
import settingMixin from '../common/settingMixin'
export default {
name: 'scheduleForm',
mixins: [settingMixin],
props: {
model: Object
},
components: {
settleAccountSelect,
singleRadio
},
data () {
return {
activateTimeStrRules: {
disabledDate (time) {
return time.getTime() < Date.now() - 8.64e7
}
},
rules: {},
query: {}
}
},
created () {
},
mounted () {
this.initSetting(['getReimbursementNew'])
},
computed: {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.ec-create-form .el-form-item {
width: 100%;
}
</style>
src/components/reimbursement/reimbursementModal.vue 0 → 100644
View file @ fa5cd42b
<template>
<section>
<sidePopup ref="sidePopup" title="新建报销" :width="60">
<ReimbursementForm
:model="model">
</ReimbursementForm>
<div class="mt20" style="margin-left: 150px;">
<el-button type="cancel" @click.stop.prevent="handleClose" size="mini">取 消</el-button>
<el-button type="confirm" @click.stop.prevent="save" size="mini">确 定</el-button>
</div>
</sidePopup>
</section>
</template>
<script>
import {
requestAPI,
api,
UTIL
} from '@/lib/commonMixin'
import ReimbursementForm from './reimbursementForm'
import { setModule } from '@/lib/viewHelper'
export default {
components: {
ReimbursementForm
},
data () {
return {
diaVis: false,
model: {
form_type: '',
cost_type: '',
occurrence_at: '',
amount: '',
client_id: '', // 客户
form_reimbursementVerifyRels: '',
form_reimbursementCarbonCopyRels: '',
description: ''
// id: '',
// client_id: '',
// client_name: '',
// schedule_title: '',
// start_at: '',
// end_at: '',
// alarm_before: '',
// description: '',
// time_type: '',
// repeat_type: '',
// is_public: '',
// created_by: '' // 负责人
}
}
},
methods: {
show (model) {
model && UTIL.flatten(this.model, model)
this.$refs.sidePopup.show()
},
handleClose () {
Object.keys(this.model).forEach(item => {
this.model[item] = ''
})
this.$refs.sidePopup.close()
},
save () {
let _params = Object.assign({}, setModule(this.model, 'Schedules'))
let _apiUrl = !this.model.id ? api.saveNewSchedule : api.saveEditSchedule
!this.model.id && delete _params['Schedules[id]']
requestAPI(Object.assign(_apiUrl, { method: 'POST' }), _params)
.then((res) => {
this.$refs.scheduleSidePopup.close()
this.$message.success('操作成功')
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/components/reimbursement/settleAccountSelect.vue 0 → 100644
View file @ fa5cd42b
<template>
<single-select
ref="select"
:style="{'width': inputWidth + 'px'}"
:text="query[labelKeyName]"
:value="query[keyName]"
@onSelect="select"
:start-load-initial="startLoadInitial"
:params-filter="paramsFilter"
:data-filter="listFilter"
:api-name="apiName" />
</template>
<script>
import SingleSelect from '../common/singleSelect.vue'
export default {
components: { SingleSelect },
props: {
query: Object,
startLoadInitial: {
type: Boolean,
default: true
},
updateQuery: {
type: Boolean,
default: false
},
keyName: {
type: String,
default: 'client_id'
},
labelKeyName: {
type: String,
default: 'client_name'
},
inputWidth: {
type: Number,
default: 250
}
},
data () {
return {
apiName: 'getClientByName',
labelText: '部门'
}
},
methods: {
loadData (resolve, reject) {
if (this.$refs.select) {
this.$refs.select.loadData(resolve, reject)
} else {
reject('DepSelect is not ready and this.$refs.select is null')
}
},
select (item) {
this.query[this.keyName] = item.value
if (this.query.hasOwnProperty(this.labelKeyName)) {
this.query[this.labelKeyName] = item.text
}
if (this.updateQuery === true) {
this.$emit('update:query', JSON.parse(JSON.stringify(this.query)))
}
},
paramsFilter (keyword = '') {
return {
name: keyword.trim()
}
},
listFilter (res) {
let list = res || []
return list.map(item => {
return {
text: item.name,
value: item.key
}
})
}
}
}
</script>
src/components/reimbursement_list/countArr.vue 0 → 100644
View file @ fa5cd42b
<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
View file @ fa5cd42b
<template> <template>
<el-button type="primary">弹出</el-button> <section>
<div class="content">
<search-header
ref="searchHeader"
:title="'费用报销'"
:search-key="'ClientSearch'"
:add-title="'新建报销'"
@update:headerSearch="search => searchKeyword(search)"
@update:headerAdd="() => addSch()">
</search-header>
<search-form
ref="clientForm"
:filter="filter"
@update:clientList="form =>{ updateForm(form) }">
</search-form>
<div class="page-body-content">
<div class="mb10">
<singleRadioTool
:form-item="reimType"
: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"
: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_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>
</ReimItem>
<Pagenation
@update:pager="pager => {updatePage(pager)}"
:total="result.pagenation.totalcount">
</Pagenation>
<leave-message
v-click-outside="lmClose"
ref="leaveMessage"
:lmTemplate="lmTemplate"
:type="20">
</leave-message>
</div>
</div>
<ReimModal
ref="reimModal"
v-click-outside="scheduleClose">
</ReimModal>
</section>
</template> </template>
<script> <script>
import SearchHeader from '../common/searchHeader'
import SearchForm from '../common/SearchForm'
import ReimItem from './reimbursementItem'
import ReimModal from '../reimbursement/reimbursementModal'
import CountArr from './countArr'
// import LeaveMessage from '../common/leaveMessage'
import Pagenation from './reimbursementPagenation'
import clickOutside from '@/lib/bind'
import singleRadioTool from '../common/singleRadioTool'
import {
requestAPI,
api
} from '@/lib/commonMixin'
export default { export default {
name: 'reimbursement' name: '',
components: {
SearchHeader,
SearchForm,
ReimItem,
ReimModal,
CountArr,
Pagenation,
singleRadioTool
},
directives: {
clickOutside
},
data () {
return {
lmTemplate: [
{
name: '报销类型',
value: 'type.name',
default: ''
},
{
name: '费用金额',
value: 'amount'
},
{
name: '报销状态',
value: 'status_display'
},
{
name: '发生时间',
value: 'occurrence_at'
},
{
name: '费用说明',
value: 'description'
},
{
name: '费用类型',
value: 'costType.name'
},
{
name: '录入人',
value: 'createdBy.name'
}
],
filter: [],
form: {
'ClientSearch[keyword]': ''
},
reimType: '',
// reimTypeArray: [],
pagenation: {
thispage: 1,
pagesize: 10
},
result: {
list: [],
countArr: [],
navCount: [],
pagenation: {
totalcount: 1,
thispage: 1,
pagesize: 10
},
thisUser: {
id: '',
name: '',
sex: ''
}
}
}
},
mounted () {
this.init()
},
methods: {
init () {
this.getFilter()
this.getList()
},
searchKeyword (search) {
this.updateForm(search)
},
updateForm (search) {
Object.assign(this.form, search)
this.getList()
},
updatePage (pager) {
Object.assign(this.pagenation, pager)
this.getList()
},
getFilter () {
requestAPI(api.getReimburrsementFilter).then(res => {
this.filter = res
})
},
leaveMessageSch (item) {
this.$refs.leaveMessage.btnShow(item)
},
lmClose () {
this.$refs.leaveMessage &&
this.$refs.leaveMessage.btnClose()
},
scheduleClose () {
this.$refs.reimModal &&
this.$refs.reimModal.handleClose()
},
addSch () {
this.$refs.reimModal.show()
},
editSch (item) {
this.$refs.reimModal.show(item)
},
deleteSch (id) {
this.$confirm('删除该待办事项?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
requestAPI(api.deleteSchedule, { id })
.then((res) => {
this.$message.success('删除成功')
})
}).catch(() => {
this.$message.info('取消删除')
})
},
getList () {
requestAPI(api.getReimList, {
...this.form,
page: this.pagenation.thispage
}).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
})
}
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@include c('opearate-button') {
> .el-button {
margin-right:0px;
}
& .btn-primary .badge {
color: #333744;
background-color: #fff;
}
& .badge {
position: relative;
top: 0px;
left: -5px;
display: inline-block;
padding: 0px 5px;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
}
i {
display: inline-block;
padding-right: 3px;
}
}
</style> </style>
src/components/reimbursement_list/reimbursementItem.vue 0 → 100644
View file @ fa5cd42b
<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 class="colBlue">{{ item.client.name }}</span>
</el-col>
<el-col :span="6" :xs="24">
<span>项目名称：</span><span class="collightBlue">{{ 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 class="collightBlue">{{ 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;
}
.collightBlue {
color: #649FD7;
}
.colBlue {
color: #0056b3;
}
.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;
color: white;
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>
src/components/reimbursement_list/reimbursementPagenation.vue 0 → 100644
View file @ fa5cd42b
<template>
<section class="pull-right">
<el-pagination v-if="total > 0" class="mb20 mt20"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.thispage"
:page-sizes="[10, 20, 40, 60, 80, 100]"
:page-size="pager.pagesize"
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
</section>
</template>
<script>
export default {
props: {
total: {
type: Number,
default: 0
}
},
data () {
return {
pager: {
thispage: 1,
pagesize: 20,
totalcount: 0
}
}
},
created () {
this.$emit('update:pager', this.pager)
},
methods: {
handleSizeChange (val) {
this.pager.thispage = 1
this.pager.pagesize = val
this.pager.totalcount = this.total
this.$emit('update:pager', this.pager)
},
handleCurrentChange (val) {
this.pager.thispage = val
this.pager.totalcount = this.total
this.$emit('update:pager', this.pager)
}
}
}
</script>
<style scoped>
</style>
src/route.js
View file @ fa5cd42b
import portal from 'vis-portal' import portal from 'vis-portal'
import ScheduleRoute from './routes/schedule' import ScheduleRoute from './routes/schedule'
import ReimbursementRoute from './routes/reimbursement'
let routes = [] let routes = []
let reimRoutes = []
const appName = 'schedule' const appName = 'schedule'
routes = [].concat(ScheduleRoute) routes = [].concat(ScheduleRoute)
reimRoutes = [].concat(ReimbursementRoute)
let RouterInit = () => { let RouterInit = () => {
portal.createApp(appName, {}, app => { portal.createApp(appName, {}, app => {
app.mapRoute(routes) app.mapRoute(routes)
}) })
portal.createApp('reimbursement', {}, app => {
app.mapRoute(reimRoutes)
})
// portal.createApp('client', {}, app => { // portal.createApp('client', {}, app => {
// app.mapRoute([ // app.mapRoute([
// { // {
......
src/routes/reimbursement.js 0 → 100644
View file @ fa5cd42b
import ReimbursementHome from '../components/reimbursement_list/reimbursementHome'
const routes = [{
path: '/reimbursementHome',
name: 'reimbursementHome',
component: ReimbursementHome
}]
export default routes
static/vupVueSdk.css.map
View file @ fa5cd42b
This diff is collapsed.
static/vupVueSdk.js
View file @ fa5cd42b
This diff is collapsed.
static/vupVueSdk.js.map
View file @ fa5cd42b
This diff is collapsed.
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