yxk_h5_master/pages/leaveApply/addLeaveApply.vue

696 lines
20 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength"
@onConfirm="pickerConfirm" :pickerValueArray="apply_type"></mpvue-picker>
<view class="item item_line" style="margin-top: 22upx;">
<view class="itemname redMi">请假类型</view>
<view class="itemtext">
<input class="iteminput InputRightMargin" disabled placeholder="请选择请假类型" @click="showSinglePicker" :value="leaveInfo.typeName"/>
<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
</view>
</view>
<view class="item " @click="onShowDatePicker(1)">
<view class="itemname redMi">开始时间</view>
<view class="itemtext">
<view >
<input class="iteminput InputRightMargin" disabled placeholder="请选择开始时间" :value='leaveInfo.beginTime'/>
<img src="../../static/img/dateIcon.png" class="dateIcon" />
</view>
</view>
</view>
<view class="item item_line" @click="onShowDatePicker(2)">
<view class="itemname redMi">结束时间</view>
<view class="itemtext">
<view >
<input class="iteminput InputRightMargin" disabled placeholder="请选择结束时间" :value='leaveInfo.endTime'/>
<img src="../../static/img/dateIcon.png" class="dateIcon" />
</view>
</view>
</view>
<view class="item item_line">
<view class="itemname redMi">请假时长</view>
<view class="itemtext">
<input class="iteminput timeRightMargin" type="number" placeholder="请输入时长" v-model="leaveInfo.timeArea" @change='dataChange'/>
<view class="itemunit">小时</view>
</view>
</view>
<view class="item item_line item_textarea">
<view class="itemname redMi">请假事由</view>
<textarea class="textarea" placeholder="请详细描述请假事由" v-model="leaveInfo.reason" @change='dataChange'></textarea>
</view>
<view class="photo_container item_line">
<view class="pzqd">图片</view>
<view class="photo_out">
<view class="imgwrap" v-for="(items,index) in imgsrc_list_local" :key="index">
<view class="myimgBox" @click="reUpload(index)">
<view class="img">
<img class="uploadimg" :src="items" />
<view class="cxsc">重新上传</view>
</view>
</view>
<img src="../../static/img/delete.png" class="deleteimg" @click="deleteImg(index)" />
</view>
<view class="imgwrap" @click="chooseImg()" >
<view class="myimgBox">
<view class="img upload_btn">
<img src="../../static/img/uploadimg.png" />
<view class="sctp">上传图片</view>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="item item_line">
<view class="itemname redMi">发给谁</view>
<view class="itemtext" @click="selectPeople()" >
<input class="iteminput InputRightMargin" disabled placeholder="选择人员" :value="formatCsrName(targetList)"/>
<img src="../../static/img/personlistIcon.png" class="dateIcon" />
</view>
</view> -->
<view class="fixMargin"></view>
<view class="goHome" @click='goMain("leaveInfo")'>
<img src="../../static/img/gohome.png">
</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="goAddRepair('zc')" v-if="leaveInfo.approveState==-1||leaveInfo.approveState==0||leaveInfo.approveState==2">暂存</button>
</view>
<view style="-webkit-flex:1;flex: 1;">
<button type="primary" style="width: 90%;" @click="goAddRepair('tj')" :disabled="leaveInfo.approveState!=0">确认提交</button>
</view>
</view>
</view>
<mx-datepicker type="datetime" :value="value_time" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
<view class="mysearchlist" style="z-index: 10000;">
<chooseUserMulti ref="mysearchlist"
:showsearch.sync="show_search_user"
:itemInfo_.sync="search_value_user">
</chooseUserMulti>
</view>
</view>
</template>
<script>
import { dataToTime } from '@/common/tools.js'
import { getCurrentTime } from '@/common/tools.js'
import { getCurrentDateTime } from '@/common/tools.js'
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 chooseUserMulti from '@/components/xinsoft-search-list/chooseUserMulti.vue'
import uniIcons from "@/components/uni-icons/uni-icons.vue"
export default {
components: {
mxDatepicker, mpvuePicker,
uniIcons,chooseUserMulti
},
data() {
return {
config:config,
imgsrc_list: [],
imgsrc_list_local: [],
showPicker: false,
deepLength:1,
csr:[],
leaveInfo:{
beginTime:'', //开始时间
endTime:'', //结束时间
timeArea:'', //请假时间长
reason:'',
type:'',
typeName:'' ,//请假类型
approveState:-1
},
value_time:'',
index:1,
id:'',
apply_type:[],
targetList: [],
show_search_user:false,
search_value_user:[],
}
},
onLoad(option) {
var _this = this;
this.id = option.id||'';
//如果是编辑,就根据接口获取数据,
if(option.id){
this.$http.request({
url: '/apis/leaveApply/detail',
method:'GET',
params: {
id:option.id,
},
}).then(res => {
if (res.data.code == 0) {
var leaveInfos = res.data.leaveApply;
res.data.approveList.forEach((vals,index)=>{
var json = {
user_id:vals.user_id,
name:vals.name
}
this.targetList.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);
}
this.leaveInfo = {
typeName:leaveInfos.typeName,
type:leaveInfos.type,
beginTime:leaveInfos.begin_time, //开始时间
endTime:leaveInfos.end_time, //结束时间
timeArea:leaveInfos.time_area, //加班时间长
reason:leaveInfos.reason,
approveState:leaveInfos.approveState,
id:this.id,
process_instance_id:leaveInfos.process_instance_id
}
uni.setStorage({
key: 'leaveInfo',
data: {
info:this.leaveInfo,
imgsrc_list:this.imgsrc_list,
imgsrc_list_local:this.imgsrc_list_local,
targetList:this.targetList,
},
success: function () {
}
});
}
}).catch(err => {
uni.showToast({
title: '获取信息失败',
icon: 'none',
duration: 2000
});
});
}else{
//如果不是是新增获取session中的数据。
uni.getStorage({
key: 'leaveInfo',
success: function (res) {
_this.leaveInfo = res.data.info||{},
_this.targetList = 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: 'leave_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.apply_type.push(myVal);
}
}
}).catch(err=>{
console.log(err);
});
},
watch:{
search_value_user(newv){
var detail = [];
newv.forEach(item=>{
let obj = {user_id: item.userId, name: item.NAME};
detail.push(obj);
})
if(newv.length>0){
var leaveInfo = uni.getStorageSync('leaveInfo');
if(!leaveInfo){
leaveInfo = {}
}
this.targetList=detail
leaveInfo.targetList = this.targetList
uni.setStorage({
key: 'leaveInfo',
data: leaveInfo,
success: function () {
}
});
}
}
},
methods: {
getDetail(){
this.$http.request({
url: '/apis/leaveApply/detail',
method:'GET',
params: {
id:this.id,
},
}).then(res => {
if (res.data.code == 0) {
var leaveInfos = res.data.leaveApply;
res.data.approveList.forEach((vals,index)=>{
var json = {
user_id:vals.user_id,
name:vals.name
}
this.targetList.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);
}
this.leaveInfo = {
typeName:leaveInfos.typeName,
type:leaveInfos.type,
beginTime:leaveInfos.begin_time, //开始时间
endTime:leaveInfos.end_time, //结束时间
timeArea:leaveInfos.time_area, //加班时间长
reason:leaveInfos.reason,
approveState:leaveInfos.approveState,
id:this.id,
process_instance_id:leaveInfos.process_instance_id
}
uni.setStorage({
key: 'leaveInfo',
data: {
info:this.leaveInfo,
imgsrc_list:this.imgsrc_list,
imgsrc_list_local:this.imgsrc_list_local,
targetList:this.targetList,
},
success: function () {
}
});
}
}).catch(err => {
uni.showToast({
title: '获取信息失败',
icon: 'none',
duration: 2000
});
});
},
selectPeople(){
this.show_search_user=true;
// uni.navigateTo({
// url: "selectPeople"
// });
},
formatCsrName(data){
var returnName = '';
for(var i=0;i<data.length;i++){
if(i == 3){
returnName += data[i].name+'等等';
break;
}else{
returnName += data[i].name+','
}
}
returnName = returnName.substring(0,returnName.length-1);
return returnName;
},
showSinglePicker() {
this.pickerValueDefault = [0]
this.$refs.mpvuePicker.show()
},
pickerConfirm(e){
this.leaveInfo.typeName = e.label;
this.leaveInfo.type = e.value[0]; //我也不知道为什么这边是数组可能改picker框架支持多选
var leaveInfo = uni.getStorageSync('leaveInfo');
if(!leaveInfo){
leaveInfo = {}
}
leaveInfo.info = this.leaveInfo;
uni.setStorage({
key: 'leaveInfo',
data: leaveInfo,
success: function () {
}
});
},
onShowDatePicker(n) { //显示
this.showPicker = true;
if(n==1){
this.value_time=this.leaveInfo.beginTime;
}else if(n==2){
this.value_time=this.leaveInfo.endTime;
}
this.index = n;
},
onSelected(e) { //选择
this.showPicker = false;
var _this = this;
if (e) {
if(this.index==1){
this.leaveInfo.beginTime= e.value+":00";
}else if(this.index==2){
this.leaveInfo.endTime= e.value+":00";
}
//保存当前修改信息
var leaveInfo = uni.getStorageSync('leaveInfo');
if(!leaveInfo){
leaveInfo = {}
}
leaveInfo.info = this.leaveInfo;
uni.setStorage({
key: 'leaveInfo',
data: leaveInfo,
success: function () {
}
});
}
},
dataChange(){
//保存当前修改信息
var leaveInfo = uni.getStorageSync('leaveInfo');
if(!leaveInfo){
leaveInfo = {}
}
leaveInfo.info = this.leaveInfo;
uni.setStorage({
key: 'leaveInfo',
data: leaveInfo,
success: function () {
}
});
},
//上传
chooseImg() {
this.uploadImg();
},
//重新上传
reUpload(index) {
this.uploadImg(index);
},
uploadImg(indexnum) {
var _this = this;
//#ifdef APP-PLUS
var count_ = 9;
//#endif
//#ifndef APP-PLUS
var count_ = 1;
//#endif
if (indexnum != undefined) {
count_ = 1;
}
uni.chooseImage({
count: count_,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
//#ifdef APP-PLUS
let imgs = chooseImageRes.tempFilePaths.map((value, index) => {
return {
name: "file" + (index + 1), //注意这一行uni的hello的示例中这里为key名+index这样是无法和使用一个固定key名接多个文件的php接口对接上的改为数组下标形式的字符串就解决这个问题了。其效果等同于在html页面上多个同name文件域同时提交表单。
uri: value
}
});
uni.uploadFile({
url: config.baseURL + '/apis/file/uploadMulti', //接口地址
files: imgs,
fileType: "image",
name: 'files',
success: (uploadFileRes) => {
var arr = [];
for (var i = 0; i < JSON.parse(uploadFileRes.data).result.length; i++) {
arr.push(JSON.parse(uploadFileRes.data).result[i].filePath);
}
if (indexnum != undefined) { //是重新上传
_this.imgsrc_list[indexnum] = arr[0]
_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0]
} else {
_this.imgsrc_list = _this.imgsrc_list.concat(arr);
_this.imgsrc_list_local = _this.imgsrc_list_local.concat(chooseImageRes.tempFilePaths);
}
_this.$forceUpdate();
var leaveInfo = uni.getStorageSync('leaveInfo');
if(!leaveInfo){
leaveInfo = {}
}
leaveInfo.imgsrc_list = _this.imgsrc_list;;
leaveInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: 'leaveInfo',
data: leaveInfo,
success: function () {
}
});
},
fail:function(){
uni.showToast({
title:'上传图片失败',
duration: 2000,
icon:"none"
});
}
});
//#endif
//#ifndef APP-PLUS
uni.uploadFile({
url: config.baseURL + '/apis/file/upload', //接口地址
filePath: tempFilePaths[0],
fileType: "image",
name: 'file',
success: (uploadFileRes) => {
var arr = [];
if (indexnum != undefined) { //是重新上传
_this.imgsrc_list[indexnum] =JSON.parse(uploadFileRes.data).filePath;
_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0];
} else {
_this.imgsrc_list.push(JSON.parse(uploadFileRes.data).filePath)
_this.imgsrc_list_local.push(chooseImageRes.tempFilePaths)
}
_this.$forceUpdate();
var leaveInfo = uni.getStorageSync('leaveInfo');
if(!leaveInfo){
leaveInfo = {}
}
leaveInfo.imgsrc_list = _this.imgsrc_list;;
leaveInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: 'leaveInfo',
data: leaveInfo,
success: function () {
}
});
},
fail:function(){
uni.showToast({
title:'上传图片失败',
duration: 2000,
icon:"none"
});
}
});
//#endif
}
});
},
//删除图片
deleteImg(index) {
this.imgsrc_list.splice(index, 1);
this.imgsrc_list_local.splice(index, 1);
this.$forceUpdate();
var leaveInfo = uni.getStorageSync('leaveInfo');
if(!leaveInfo){
leaveInfo = {}
}
leaveInfo.imgsrc_list = this.imgsrc_list;
leaveInfo.imgsrc_list_local = this.imgsrc_list_local;
uni.setStorage({
key: 'leaveInfo',
data: leaveInfo,
success: function () {
}
});
},
//点击暂存和确认提交 需要进行的操作。
goAddRepair(flag){
var _this = this;
//在这里是抄送人数据。
var carbonCopyRecipients = []
if(this.targetList.length>0){
this.targetList.forEach((vals,index)=>{
carbonCopyRecipients.push(vals.user_id);
});
}
if(!(this.leaveInfo && this.leaveInfo.typeName)){
uni.showToast({
title: '请选择请假类型',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.leaveInfo && this.leaveInfo.beginTime)){
uni.showToast({
title: '请填写开始时间',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.leaveInfo && this.leaveInfo.endTime)){
uni.showToast({
title: '请选择结束时间',
duration: 2000,
icon:"none"
});
return false;
}
console.log(dataToTime(this.leaveInfo.endTime))
console.log(dataToTime(this.leaveInfo.beginTime))
if(dataToTime(this.leaveInfo.endTime)<=dataToTime(this.leaveInfo.beginTime)) {
uni.showToast({
title: '开始时间不能大于结束时间',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.leaveInfo && this.leaveInfo.timeArea)){
uni.showToast({
title: '请填写请假时长',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.leaveInfo && this.leaveInfo.reason)){
uni.showToast({
title: '请填写请假事由',
duration: 2000,
icon:"none"
});
return false;
}
// if(!(this.targetList && this.targetList.length>0)){
// uni.showToast({
// title: '请选择发给谁',
// duration: 2000,
// icon:"none"
// });
// return false;
// }
var leaveInfom = uni.getStorageSync('leaveInfo');
if(flag == 'tj'){
//提交进行的操作
var url = '/apis/approveFlow/submitApprove'
this.$http.request({
url:url,
data:{
dataType: 8,
mainId: leaveInfom.info.id
}
})
.then(res=>{
if(res.data.code == 0){
uni.removeStorageSync('leaveInfo');
uni.showToast({
title: '操作成功',
duration: 1000,
icon:"none"
});
setTimeout( function(){
uni.redirectTo({
url: 'leaveApply'
});
},1000)
}else{
uni.showToast({
title: res.data.msg,
duration: 2000,
icon:"none"
});
}
}).catch(err=>{
uni.showToast({
title: '操作失败',
duration: 2000,
icon:"none"
});
});
}else if(flag == 'zc'){
//暂存进行的操作。
var url = '/apis/leaveApply/saveAddAndChange'
//调取接口进行保存。
this.$http.request({
url: url,
params:{
type:this.leaveInfo.type,
beginTime:this.leaveInfo.beginTime,
endTime:this.leaveInfo.endTime,
reason:this.leaveInfo.reason,
timeArea:this.leaveInfo.timeArea,
processInstanceId:leaveInfom.info.process_instance_id||'',
approveList:carbonCopyRecipients,
taglocationappearanceImage:this.imgsrc_list,
id:this.id||''
}
}).then(res=>{
if(res.data.code == 0){
if(this.leaveInfo.approveState==-1){
this.id=res.data.dataId
}
this.getDetail()
}else{
uni.showToast({
title: res.data.msg,
duration: 2000,
icon:"none"
});
}
}).catch(err=>{
uni.showToast({
title: '操作失败',
duration: 2000,
icon:"none"
});
});
}
}
},
onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面,删除本地缓存的巡检操作
uni.removeStorageSync('leaveInfo');
uni.navigateTo({
url: 'leaveApply'
});
return true;
},
}
</script>
<style scoped>
.itemunit{
position: absolute;
right: 0;
top: 0;
height: 92upx;
line-height: 92upx;
color: #999;
font-size: 26upx;
}
</style>