Skip to content

B
bms-vue-obear
Commit 50c4a173 authored by daywrite's avatar daywrite
Browse files
Options

新建表单

parent dfbb3e76
Show whitespace changes
Inline Side-by-side
Showing with 437 additions and 96 deletions
src/apis/reimbursement.js
View file @ 50c4a173
......@@ -4,5 +4,8 @@ export default {
},
getReimList: {
url: '/vue/reimbursement/list'
},
getReimNew: {
url: '/vue/reimbursement/get-new'
}
}
src/assets/css/app.scss
View file @ 50c4a173
.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;
}
}
.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: 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;
}
}
@import './schedule-app.scss';
@import './reim-app.scss';
src/assets/css/reim-app.scss 0 → 100644
View file @ 50c4a173
.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 @ 50c4a173
.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 @ 50c4a173
......@@ -11,34 +11,54 @@ export default {
computed: {
createdByArray () {
let ret = this.getArrayByKey('created_by')
let ret = this.getArrayByKey('Schedules', 'created_by')
return ret && [].concat(ret.value)
},
timeTypeArray () {
let ret = this.getArrayByKey('time_type')
let ret = this.getArrayByKey('Schedules', 'time_type')
return ret && [].concat(ret.value)
},
alarmBeforeArray () {
let ret = this.getArrayByKey('alarm_before')
let ret = this.getArrayByKey('Schedules', 'alarm_before')
return ret && [].concat(ret.value)
},
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)
}
},
methods: {
selectKeyFormat (key) {
return `Schedules[${key}]`
selectKeyFormat (type, key) {
return `${type}[${key}]`
},
getArrayByKey (key) {
getArrayByKey (type, key) {
if (this.retNewArray) {
return this.retNewArray[this.selectKeyFormat(key)]
return this.retNewArray[this.selectKeyFormat(type, key)]
} else {
return []
}
......@@ -51,6 +71,13 @@ export default {
})
},
getReimbursementNew () {
requestAPI(api.getReimNew)
.then((res) => {
this.retNewArray = res.options
})
},
getNewArray () {
requestAPI(api.getSaveNew)
.then((res) => {
......
src/components/common/singleRadio.vue
View file @ 50c4a173
<template>
<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 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>
......@@ -15,27 +15,4 @@
</script>
<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{
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>
src/components/reimbursement/reimbursementForm.vue 0 → 100644
View file @ 50c4a173
<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 @ 50c4a173
<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 @ 50c4a173
<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/reimbursementHome.vue
View file @ 50c4a173
......@@ -49,10 +49,10 @@
</leave-message>
</div>
</div>
<ScheduleModal
ref="scheduleModal"
<ReimModal
ref="reimModal"
v-click-outside="scheduleClose">
</ScheduleModal>
</ReimModal>
</section>
</template>
......@@ -60,7 +60,7 @@
import SearchHeader from '../common/searchHeader'
import SearchForm from '../common/SearchForm'
import ReimItem from './reimbursementItem'
import ScheduleModal from '../schedule/scheduleModal'
import ReimModal from '../reimbursement/reimbursementModal'
import CountArr from './countArr'
// import LeaveMessage from '../common/leaveMessage'
import Pagenation from './reimbursementPagenation'
......@@ -77,9 +77,8 @@ export default {
SearchHeader,
SearchForm,
ReimItem,
ScheduleModal,
ReimModal,
CountArr,
// LeaveMessage,
Pagenation,
singleRadioTool
},
......@@ -189,16 +188,16 @@ export default {
},
scheduleClose () {
this.$refs.scheduleModal &&
this.$refs.scheduleModal.handleClose()
this.$refs.reimModal &&
this.$refs.reimModal.handleClose()
},
addSch () {
this.$refs.scheduleModal.show()
this.$refs.reimModal.show()
},
editSch (item) {
this.$refs.scheduleModal.show(item)
this.$refs.reimModal.show(item)
},
deleteSch (id) {
......
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