<template>
|
<view>
|
<view class="status_bar">
|
<!-- 这里是状态栏 -->
|
</view>
|
<uni-nav-bar left-icon="left" :title="title" @clickLeft="back" @clickRight="scan" :fixed="true"
|
:border="false" rightWidth="160rpx" leftWidth="160rpx"
|
>
|
<!-- <block slot="right">
|
<view class="city">
|
<view>
|
<text class="uni-nav-bar-text">{{user.username}}</text>
|
</view>
|
<uni-icons type="arrowdown" color="#333333" size="20" />
|
</view>
|
</block> -->
|
</uni-nav-bar>
|
<view class="container">
|
<view style="height: 16rpx;"></view>
|
<view class="card" v-for="(item,index) in form">
|
<view class="card-select" v-show="item.inputType != 'table'" style="width: 100%;">
|
<view class="flex">
|
<view class="card-required" v-show="item.required">*</view>
|
<view >{{item.name}}</view>
|
</view>
|
<uni-combox :candidates="orderIds" placeholder="请选择项目" v-model="orderId"
|
@input="getOrderId()" v-if="item.inputType == 'chose'">
|
</uni-combox>
|
<view class="flex">
|
<!-- 输入框 -->
|
<view v-if="item.inputType != 'table'" style="flex:1">
|
<input type="text" :placeholder="item.placeholder" v-model="item.value" v-if="item.inputType != 'chose'">
|
</view>
|
<!-- 选择按钮 -->
|
<view class="flex" style="width: 50rpx;" v-if="item.inputType == 'select'" @click="showPicker(item.type)">
|
<uni-icons type="right" color="#000" ></uni-icons>
|
</view>
|
</view>
|
</view>
|
<!-- 表格 -->
|
<view style="display: flex;flex-direction: column;width: 100%;font-size: 24rpx;" v-show="item.inputType == 'table'">
|
<view >{{item.name}}:</view>
|
<view style="width: 100%; overflow-x: scroll;border: 1px solid #bebebe;" v-if="item.inputType == 'table'">
|
<table cellpadding="0" cellspacing="0" style="">
|
<thead>
|
<tr style="background-color: #949494;color: #FFF;">
|
<td class="scroll-item" v-for="(item,index) in table">
|
<view class="item-content">{{item.name}}</view>
|
</td>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item,index) in tableData">
|
<td class="scroll-item" v-for="(subitem,i) in table">
|
<view class="item-content" v-if="subitem.type != 'options'">
|
<input type="text" v-model="item[subitem.type]">
|
</view>
|
|
<!-- <view class="item-content" v-if="subitem.type != 'options' && !subitem.isInput">
|
<text>{{item[subitem.type]}}</text> <text v-if="subitem.type == 'taxRate' || subitem.type == 'reimbursementRatio' ">%</text>
|
</view> -->
|
|
<view v-if="subitem.type == 'options'" style="color: red;" @click="delItem(index)">删除</view>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<view style="height: 16rpx;"></view>
|
<view style="position: sticky;width: 100%;left: 0;text-align: center;height: 70rpx;line-height: 70rpx;" v-show="tableData.length == 0">无数据...</view>
|
</view>
|
</view>
|
</view>
|
<view style="height: 16rpx;"></view>
|
<view style="text-align: center;display: flex;align-items: center;justify-content: center;">
|
|
<view style="background-color: #2d8cf0;width: 200rpx;height:50rpx;color: #fff;line-height: 50rpx;border-radius: 15rpx;" @click="addDetl('bottom')">
|
<uni-icons type="plusempty" color="#fff"></uni-icons>
|
<text>添加明细</text>
|
</view>
|
</view>
|
|
|
<view style="height: 16rpx;"></view>
|
</view>
|
|
<view>
|
|
</view>
|
|
<u-picker :show="reimburseId" :columns="reimburseIds" @confirm="reimburseIdConfirm" @cancel="cancel"></u-picker>
|
<u-picker :show="checkData" :columns="checkDatas" @confirm="checkDataConfirm" @cancel="cancel"></u-picker>
|
|
<view>
|
<!-- 普通弹窗 -->
|
<uni-popup ref="popup">
|
<view class="popup">
|
<view class="pop-title"> 添加明细 </view>
|
<view class="pop-subtitle">
|
费用类型
|
</view>
|
<view class="pop-body">
|
<u-radio-group v-model="radiovalue2" placement="column" shape="square" @change="popChange">
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist2"
|
@change="radioChange" :key="index" :label="item.name" :name="item.name" >
|
</u-radio>
|
</u-radio-group>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
|
<view class="floor">
|
<view class="default">重置</view>
|
<view class="primary" @click="submit()">保存</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import colorGradient from '../../../uni_modules/uview-ui/libs/function/colorGradient';
|
export default {
|
data() {
|
return {
|
title: '修改报销审批',
|
radiolist2: [{
|
name: '餐费',
|
id: 1,
|
disabled: false
|
},
|
{
|
name: '住宿费',
|
id: 2,
|
disabled: false
|
},
|
{
|
name: '车费',
|
id: 3,
|
disabled: false
|
}, {
|
name: '油费',
|
id: 4,
|
disabled: false
|
}, {
|
name: '其他',
|
id: 5,
|
disabled: false
|
}
|
],
|
radiovalue2: '',
|
form: [
|
{name: '项目名',placeholder: '请选择',inputType: 'chose',type: 'orderId',value: '',submitVal: ''},
|
{name: '报销类型',placeholder: '请选择',required:true,inputType: 'select',type: 'reimburseId',value: '',submitVal: ''},
|
{name: '是否冲账',placeholder: '请选择',required:true,inputType: 'select',type: 'checkData',value: '',submitVal: ''},
|
{name: '报销明细',placeholder: '请选择',inputType: 'table'}
|
],
|
table: [
|
{name:'事由',type: 'occupation',isInput:true},
|
{name:'费用类型',type: 'expenseType$'},
|
{name:'税率',type: 'taxRate'},
|
{name:'未税本币金额',type: 'untaxedAmountInLocalCurrency'},
|
{name:'未税金额',type: 'untaxedAmount'},
|
{name:'税额',type: 'taxAmount'},
|
{name:'发票金额',type: 'invoiceValue'},
|
{name:'发票本币金额',type: 'invoiceAmountInLocalCurrency'},
|
{name:'报销比例',type: 'reimbursementRatio'},
|
{name:'报销金额',type: 'reimbursementAmount'},
|
{name:'报销本币金额',type: 'reimbursementAmountInLocalCurrency'},
|
{name:'出纳确认金额',type: 'cashierConfirmationAmount'},
|
{name:'列支人员',type: 'userId$'},
|
{name:'列支部门',type: 'deptId$'},
|
{name:'更新日期',type: 'updateTime'},
|
{name:'更新人员名字',type: 'updateUserName'},
|
{name:'操作',type: 'options'}
|
],
|
tableData: [
|
],
|
dataRule: [
|
{occupation: ''}
|
],
|
reimburseId: false,
|
reimburseIds: [['项目未完成','项目已完成在质保期内','非项目型报销','其他']],
|
checkData: false,
|
checkDatas: [['是','否']],
|
orderId: '',
|
orderIds: [],
|
orderIds2: [],
|
orderIdList: [],
|
newDetl: {
|
occupation: '',
|
expenseType$: '',
|
expenseType: null,
|
taxRate: 0,
|
untaxedAmountInLocalCurrency: 0,
|
untaxedAmount: 0,
|
taxAmount: 0,
|
invoiceValue: 0,
|
invoiceAmountInLocalCurrency: 0,
|
reimbursementRatio: 0,
|
reimbursementAmount: 0,
|
reimbursementAmountInLocalCurrency:0,
|
cashierConfirmationAmount: 0,
|
userId$: '',
|
deptId$: '',
|
updateTime: '',
|
updateUserName: ''
|
},
|
type: 'modi'
|
}
|
},
|
onLoad(option) {
|
let _this = this
|
this.getOrderId('')
|
_this.list = []
|
const eventChannel = this.getOpenerEventChannel();
|
eventChannel.on('reimburseOnlineDetl', function(data) {
|
if (data.data == 'add') {
|
_this.title = '添加报销审批'
|
_this.type = 'add'
|
}
|
if (data.data == 'modi') {
|
// _this.title = '添加报销审批'
|
_this.form[1].value = data.detl.list.templateName
|
for (let k in _this.reimburseIds[0]) {
|
if (_this.reimburseIds[0][k] == data.detl.list.templateName) {
|
_this.form[1].submitVal = k
|
}
|
}
|
_this.form[2].value = data.detl.list.checkData
|
_this.form[0].value = data.detl.list.name$
|
_this.getOrderId(data.detl.list.name$)
|
_this.tableData = data.detl.list.detl
|
}
|
})
|
|
},
|
methods: {
|
addDetl(type) {
|
this.type = type
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
this.$refs.popup.open(type)
|
},
|
popChange(n) {
|
// var detl=JSON.parse(JSON.stringify(this.newDetl)); // 牛逼
|
let detl = {...this.newDetl} // 牛逼
|
detl.expenseType$ = this.radiovalue2
|
for (let k in this.radiolist2) {
|
if (this.radiolist2[k].name == this.radiovalue2) {
|
detl.expenseType = this.radiolist2[k].id
|
}
|
}
|
this.tableData.push(detl)
|
this.$refs.popup.close()
|
},
|
radioChange(n) {
|
},
|
showPicker(e) {
|
switch(e) {
|
case 'reimburseId':
|
this.reimburseId = true
|
break;
|
case 'orderId':
|
this.orderId = true
|
this.getOrderId();
|
break
|
case 'checkData':
|
this.checkData = true
|
break
|
}
|
},
|
getOrderId(condition) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/orderQueryName/auth`,
|
header: { 'token': uni.getStorageSync('token') },
|
method: 'POST',
|
data: {condition: condition},
|
success(res) {
|
res = res.data
|
_this.orderIds = []
|
_this.orderIdList = []
|
if (res.code === 200 && res.data) {
|
_this.orderIds2 = res.data
|
for (let k of res.data) {
|
_this.orderIds.push(k.value)
|
_this.orderIdList.push(k)
|
}
|
|
}
|
}
|
|
})
|
},
|
delItem(index) {
|
this.tableData.splice(index,1)
|
},
|
reimburseIdConfirm(e) {
|
this.form[1].value = e.value[0]
|
this.form[1].submitVal = e.indexs[0]
|
this.reimburseId = false
|
},
|
checkDataConfirm(e) {
|
this.form[2].value = e.value[0]
|
this.form[2].submitVal = e.indexs[0]
|
this.checkData = false
|
},
|
// 表单提交
|
submit() {
|
let param = {
|
orderId: '',
|
checkData: '否',
|
docType: null,
|
reimburseId: null,
|
templateName: '项目未完成',
|
reimburseOnlineDetls: [
|
|
]
|
}
|
for (let element of this.orderIdList) {
|
if(element.value == this.orderId) {
|
param.orderId = element.id + ''
|
}
|
}
|
for (let k of this.form) {
|
if (k.type == 'reimburseId') {
|
param.reimburseId = k.submitVal
|
}
|
if (k.type == 'checkData') {
|
param.checkData = k.value
|
}
|
}
|
param.reimburseOnlineDetls = this.tableData
|
if (param.reimburseId == null || param.reimburseId === '') {
|
uni.showToast({title: '报销类型不能为空', icon: "none", position: 'top'})
|
return
|
}
|
if (param.checkData == '') {
|
uni.showToast({title: '是否冲账不能为空', icon: "none", position: 'top'})
|
return
|
}
|
if (param.reimburseOnlineDetls.length == 0) {
|
uni.showToast({title: '请添加报销明细', icon: "none", position: 'top'})
|
return
|
}
|
if (this.type == 'add') {
|
this.formAdd(param)
|
} else {
|
this.formModi(param)
|
}
|
|
},
|
formAdd(param) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/reimburseOnline/from/add/auth`,
|
header: { 'token': uni.getStorageSync('token') },
|
data: JSON.stringify(param),
|
method: 'POST',
|
success(res) {
|
res = res.data
|
if (res.code === 200) {
|
uni.navigateBack({})
|
} else if(res.code === 500) {
|
uni.showToast({title: res.msg, icon: "none", position: 'top'})
|
}
|
}
|
})
|
},
|
formModi(param) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/reimburseOnline/from/modify/auth`,
|
header: { 'token': uni.getStorageSync('token') },
|
data: JSON.stringify(param),
|
method: 'POST',
|
success(res) {
|
res = res.data
|
if (res.code === 200) {
|
uni.navigateBack({})
|
} else if(res.code === 500) {
|
uni.showToast({title: res.msg, icon: "none", position: 'top'})
|
}
|
|
}
|
})
|
},
|
cancel() {
|
this.reimburseId = false
|
this.checkData = false
|
},
|
back() {
|
uni.navigateBack({})
|
},
|
scan() {
|
uni.navigateTo({
|
url: '/pages/authority/authority'
|
})
|
},
|
}
|
}
|
</script>
|
|
<style>
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
.flex-column {
|
display: flex;
|
flex-direction: column;
|
}
|
.container {
|
margin: 16rpx;
|
background-color: #fff;
|
}
|
.card {
|
display: flex;
|
margin: 8rpx 16rpx;
|
}
|
.card-select {
|
display: flex;
|
flex-direction: column;
|
}
|
.card-required {
|
color: red;
|
padding-right: 4rpx;
|
}
|
.scroll-item {
|
min-width: 150rpx;
|
padding: 10rpx;
|
text-align: center;
|
}
|
.scroll-item:last-child > .item-content {
|
min-width: 150rpx;
|
border-right: none;
|
}
|
.item-content {
|
min-width: 150rpx;
|
height: 30rpx;
|
line-height: 30rpx;
|
padding-right: 10rpx;
|
border-right: 1px solid #d3d3d3;
|
}
|
|
.popup {
|
background-color: #fff;
|
border-radius: 50rpx 50rpx 0rpx 0rpx;
|
height: 70vh;
|
}
|
.pop-title {
|
width: 100%;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
font-size: 40rpx;
|
}
|
.pop-subtitle {
|
margin: 32rpx;
|
font-size: 32rpx;
|
}
|
.pop-body {
|
margin: 32rpx;
|
}
|
|
.floor {
|
height: 100rpx;
|
line-height: 100rpx;
|
width: 100%;
|
background-color: #fff;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
text-align: center;
|
letter-spacing: 10rpx;
|
}
|
.default {
|
flex: 2;
|
}
|
.default:active {
|
background-color: #eff0f1;
|
}
|
.primary {
|
flex: 3;
|
background-color: #2d8cf0;
|
color: #fff;
|
}
|
.primary:active {
|
background-color: #007dea;
|
}
|
</style>
|
