408 lines
11 KiB
Vue
408 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="step_num" style="margin-bottom: 22upx;">
|
||
<view class="step step1">完善报销明细</view>
|
||
<view class="step step2">上传报销凭证</view>
|
||
</view>
|
||
<view v-for="(item,index) in itemList" :key="index" class="example-box">
|
||
<view class="item">
|
||
<view class="itemname">报销明细{{index+1}}</view>
|
||
<view class="itemtext" style="color:#007aff;" @click="deleteItem(index)">
|
||
<uni-icons type="trash" class="myarrowright" style="right:56upx; font-size: 36upx;color:#007aff;"></uni-icons>删除
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="itemname redMi">报销金额</view>
|
||
<view class="itemtext">
|
||
<input class="iteminput InputRightMargin" type="number" placeholder="请输入金额" v-model="item.reiCount" @change='dataChange'/>
|
||
<view class="itemunit">元</view>
|
||
</view>
|
||
</view>
|
||
<view class="item " @click="onShowDatePicker(index)">
|
||
<view class="itemname redMi">日期</view>
|
||
<view class="itemtext">
|
||
<view >
|
||
<input class="iteminput InputRightMargin" disabled placeholder="请选择日期" :value='item.reiDate'/>
|
||
<img src="../../static/img/dateIcon.png" class="dateIcon" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="itemname redMi">报销类别</view>
|
||
<view class="itemtext">
|
||
<input class="iteminput InputRightMargin" disabled placeholder="请选择报销类别" @click="showSinglePicker(index)" :value="item.typeName"/>
|
||
<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="item item_line">
|
||
<view class="itemname">报销摘要</view>
|
||
<view class="itemtext">
|
||
<input class="iteminput" placeholder="请输入报销摘要" v-model="item.reiItemDescription" @input='dataChange'/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fixMargin"></view>
|
||
<view class="fixBottom">
|
||
<view class="uni-flex uni-row">
|
||
<view style="-webkit-flex:1;flex: 1;">
|
||
<button type="primary" plain="true" style="width: 90%; background: #fff;" @click="addReim">新增报销明细</button>
|
||
</view>
|
||
<view style="-webkit-flex:1;flex: 1;">
|
||
<button type="primary" style="width: 90%;" @click="next">下一步</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<mx-datepicker type="date" :value="value_time" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
|
||
<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength"
|
||
@onConfirm="pickerConfirm" :pickerValueArray="reim_type"></mpvue-picker>
|
||
<view class="goHome" @click='goMain("reimInfo")'>
|
||
<img src="../../static/img/gohome.png">
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
config
|
||
} from '../../request/js/config.js'
|
||
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
|
||
import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
|
||
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
||
export default {
|
||
components: {
|
||
mxDatepicker, mpvuePicker,
|
||
uniIcons
|
||
},
|
||
data() {
|
||
return {
|
||
config:config,
|
||
showPicker: false,
|
||
csr:[],
|
||
imgsrc_list_local:[],
|
||
imgsrc_list:[],
|
||
deepLength:1,
|
||
itemList:[{
|
||
"reiCount":"",
|
||
"reiDate":"",
|
||
"type":"",
|
||
"typeName":'',
|
||
"reiItemDescription":""}
|
||
],
|
||
value_time:'',
|
||
id:'',
|
||
reim_type:[],
|
||
dateIndex:0,
|
||
pickerIndex:0,
|
||
deletDetailIds:[]
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
var _this = this;
|
||
this.id = option.id||'';
|
||
|
||
//如果是编辑，就根据接口获取数据，
|
||
if(option.id){
|
||
this.$http.request({
|
||
url: '/apis/reimApply/detail',
|
||
method:'GET',
|
||
params: {
|
||
id:option.id,
|
||
},
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
var reimInfos = res.data.reimApplyDO;
|
||
res.data.approveList.forEach((vals,index)=>{
|
||
var json = {
|
||
user_id:vals.user_id,
|
||
name:vals.name
|
||
}
|
||
this.csr.push(json);
|
||
});
|
||
for(var i=0;i<res.data.initFileList.length;i++){
|
||
this.imgsrc_list.push(res.data.initFileList[i].filePath);
|
||
this.imgsrc_list_local.push(config.imgURL+res.data.initFileList[i].filePath);
|
||
}
|
||
var items = res.data.itemList;
|
||
_this.itemList = [];
|
||
for(var i=0;i<items.length;i++){
|
||
var json = {
|
||
"reiCount":items[i].rei_count,
|
||
"reiDate":items[i].rei_date,
|
||
"type":items[i].type,
|
||
"typeName":items[i].typeName,
|
||
"reiItemDescription":items[i].rei_item_description,
|
||
"id":items[i].id
|
||
}
|
||
_this.itemList.push(json);
|
||
}
|
||
uni.setStorage({
|
||
key: 'reimInfo',
|
||
data: {
|
||
info:this.itemList,
|
||
imgsrc_list:this.imgsrc_list,
|
||
imgsrc_list_local:this.imgsrc_list_local,
|
||
targetList:this.csr,
|
||
id:_this.id,
|
||
process_instance_id:reimInfos.process_instance_id,
|
||
approveState:reimInfos.approveState,
|
||
deletDetailIds:_this.deletDetailIds
|
||
},
|
||
success: function () {
|
||
}
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: '获取信息失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
}else{
|
||
//如果不是，是新增，获取session中的数据。
|
||
uni.getStorage({
|
||
key: 'reimInfo',
|
||
success: function (res) {
|
||
_this.itemList = res.data.info||[],
|
||
_this.csr = res.data.targetList||[];
|
||
_this.imgsrc_list = res.data.imgsrc_list||[];
|
||
_this.imgsrc_list_local = res.data.imgsrc_list_local||[];
|
||
}
|
||
});
|
||
}
|
||
|
||
//初始化获取 报销类别
|
||
this.$http.request({
|
||
url: '/apis/dict/getDictsByType',
|
||
params: {
|
||
type: 'reim_apply_type'
|
||
},
|
||
}).then(res=>{
|
||
if(res.statusCode == '200'){
|
||
var useType = res.data.datas;
|
||
for (let i = 0; i < useType.length; i++) {
|
||
var myVal=
|
||
{
|
||
'label': useType[i].name,
|
||
'value': useType[i].id
|
||
}
|
||
_this.reim_type.push(myVal);
|
||
}
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err);
|
||
});
|
||
},
|
||
methods: {
|
||
addReim(){
|
||
var myjson = {
|
||
"reiCount":"",
|
||
"reiDate":"",
|
||
"type":"",
|
||
'typeName':'',
|
||
"reiItemDescription":""
|
||
};
|
||
this.itemList.push(myjson);
|
||
},
|
||
next(){
|
||
//在跳转到下一个界面之前，需要判断当前报销内容是否都填写完整。
|
||
if(this.itemList.length >0){
|
||
var items = this.itemList;
|
||
for(var i=0; i<items.length; i++){
|
||
if(!items[i].reiCount || !items[i].reiDate || !items[i].type){
|
||
uni.showToast({
|
||
title: '请填写完整该条报销明细',
|
||
duration: 2000,
|
||
icon:"none",
|
||
});
|
||
return false;
|
||
}
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: '请至少新增一条报销明细',
|
||
duration: 2000,
|
||
icon:"none"
|
||
});
|
||
return false;
|
||
}
|
||
uni.navigateTo({
|
||
url: "addReimApplyStep"
|
||
});
|
||
},
|
||
deleteItem(index){
|
||
//删除报销的同时，需要保存当前删除的id。
|
||
var thisItem = this.itemList[index];
|
||
if(thisItem && thisItem.id){
|
||
//如果当前存在id就删除，如果不存在，代表是新增的，就不需要保存
|
||
this.deletDetailIds.push(thisItem.id);
|
||
}
|
||
//删除 报销
|
||
this.itemList.splice(index,1);
|
||
|
||
//保存当前修改信息 保存删除信息
|
||
var reimInfo = uni.getStorageSync('reimInfo');
|
||
if(!reimInfo){
|
||
reimInfo = {}
|
||
}
|
||
reimInfo.info = this.itemList;
|
||
reimInfo.deletDetailIds = this.deletDetailIds;
|
||
uni.setStorage({
|
||
key: 'reimInfo',
|
||
data: reimInfo,
|
||
success: function () {
|
||
}
|
||
});
|
||
},
|
||
pickerConfirm(e){
|
||
var n = this.pickerIndex;
|
||
this.itemList[n].typeName = e.label;
|
||
this.itemList[n].type = e.value[0]; //我也不知道为什么这边是数组，可能改picker框架支持多选。
|
||
var reimInfo = uni.getStorageSync('reimInfo');
|
||
if(!reimInfo){
|
||
reimInfo = {}
|
||
}
|
||
reimInfo.info = this.itemList;
|
||
uni.setStorage({
|
||
key: 'reimInfo',
|
||
data: reimInfo,
|
||
success: function () {
|
||
}
|
||
});
|
||
},
|
||
showSinglePicker(index) {
|
||
this.pickerIndex = index;
|
||
this.pickerValueDefault = [0]
|
||
this.$refs.mpvuePicker.show()
|
||
},
|
||
onShowDatePicker(n) { //显示
|
||
this.dateIndex = n;
|
||
this.value_time=this.itemList[n].reiDate;
|
||
this.showPicker = true;
|
||
},
|
||
onSelected(e) { //选择
|
||
this.showPicker = false;
|
||
var _this = this;
|
||
if (e) {
|
||
this.itemList[_this.dateIndex].reiDate= e.value
|
||
//保存当前修改信息
|
||
var reimInfo = uni.getStorageSync('reimInfo');
|
||
if(!reimInfo){
|
||
reimInfo = {}
|
||
}
|
||
reimInfo.info = this.itemList;
|
||
uni.setStorage({
|
||
key: 'reimInfo',
|
||
data: reimInfo,
|
||
success: function () {
|
||
|
||
}
|
||
});
|
||
}
|
||
},
|
||
dataChange(){
|
||
//保存当前修改信息
|
||
var reimInfo = uni.getStorageSync('reimInfo');
|
||
if(!reimInfo){
|
||
reimInfo = {}
|
||
}
|
||
reimInfo.info = this.itemList;
|
||
uni.setStorage({
|
||
key: 'reimInfo',
|
||
data: reimInfo,
|
||
success: function () {
|
||
|
||
}
|
||
});
|
||
},
|
||
//点击暂存和确认提交 需要进行的操作。
|
||
goAddRepair(flag){
|
||
if(flag == 'tj'){
|
||
//提交进行的操作
|
||
var url = '/apis/payApply/saveSbmitChange'
|
||
}else if(flag == 'zc'){
|
||
//暂存进行的操作。
|
||
var url = '/apis/payApply/addAndSaveChange'
|
||
}
|
||
var _this = this;
|
||
}
|
||
},
|
||
onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面，删除本地缓存的巡检操作
|
||
uni.removeStorageSync('reimInfo');
|
||
uni.navigateTo({
|
||
url: 'reimApply'
|
||
});
|
||
return true;
|
||
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.step_num {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 80upx;
|
||
background-color: #fff;
|
||
padding-right: 48upx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.step {
|
||
position: relative;
|
||
font-size: 28upx;
|
||
line-height: 80upx;
|
||
padding-left: 30upx;
|
||
float: left;
|
||
}
|
||
|
||
.step:before {
|
||
position: absolute;
|
||
left: 0px;
|
||
content: '1';
|
||
border: 1px solid #000;
|
||
width: 28upx;
|
||
height: 28upx;
|
||
box-sizing: border-box;
|
||
line-height: 28upx;
|
||
border-radius: 200upx;
|
||
font-size: 20upx;
|
||
text-align: center;
|
||
top: 26upx;
|
||
}
|
||
|
||
.step:after {
|
||
position: absolute;
|
||
content: '';
|
||
width: 60upx;
|
||
height: 2upx;
|
||
background-color: #000;
|
||
top: 40upx;
|
||
left: 200upx;
|
||
}
|
||
|
||
.step2 {
|
||
margin-left: 64upx;
|
||
color: #828282;
|
||
}
|
||
|
||
.step2:before {
|
||
content: '2';
|
||
border: 2upx solid #828282;
|
||
}
|
||
|
||
.step2:after{
|
||
background-color: transparent;
|
||
}
|
||
.itemunit{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 92upx;
|
||
line-height: 92upx;
|
||
color: #999;
|
||
font-size: 26upx;
|
||
}
|
||
</style>
|