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>
|