634 lines
18 KiB
Vue
634 lines
18 KiB
Vue
<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="workInfo.chapterTypeName" />
|
||
<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="item ">
|
||
<view class="itemname">车号</view>
|
||
<view class="itemtext">
|
||
<input class="iteminput InputRightMargin" placeholder="请填写车牌号" v-model="workInfo.carNo"/>
|
||
</view>
|
||
</view>
|
||
<view class="item ">
|
||
<view class="itemname">公里数</view>
|
||
<view class="itemtext">
|
||
<input class="iteminput InputRightMargin" placeholder="请填写公里数" v-model="workInfo.distance"/>
|
||
</view>
|
||
</view> -->
|
||
<view class="item " @click="onShowDatePicker(1)">
|
||
<view class="itemname redMi">开始使用时间</view>
|
||
<view class="itemtext">
|
||
<view>
|
||
<input class="iteminput InputRightMargin" placeholder="请选择开始使用时间" :value='workInfo.startTime' />
|
||
<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" placeholder="请选择结束使用时间" :value='workInfo.endTime' />
|
||
<img src="../../static/img/dateIcon.png" class="dateIcon" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item item_line item_textarea">
|
||
<view class="itemname redMi">用章事由</view>
|
||
<textarea class="textarea" placeholder="请详细描述用章事由" v-model="workInfo.chapterReason" @change='dataChange'></textarea>
|
||
</view>
|
||
<!-- <view class="item item_line item_textarea">
|
||
<view class="itemname">目的地</view>
|
||
<textarea class="textarea" placeholder="请填写目的地" v-model="workInfo.destination" @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("workInfo")'>
|
||
<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="workInfo.approveState==-1||workInfo.approveState==0||workInfo.approveState==2">暂存</button>
|
||
</view>
|
||
<view style="-webkit-flex:1;flex: 1;">
|
||
<button type="primary" style="width: 90%;" @click="goAddRepair('tj')" :disabled="workInfo.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 uniIcons from "@/components/uni-icons/uni-icons.vue"
|
||
import chooseUserMulti from '@/components/xinsoft-search-list/chooseUserMulti.vue'
|
||
export default {
|
||
components: {
|
||
mxDatepicker,
|
||
mpvuePicker,
|
||
uniIcons,
|
||
chooseUserMulti
|
||
},
|
||
data() {
|
||
return {
|
||
config: config,
|
||
imgsrc_list: [],
|
||
imgsrc_list_local: [],
|
||
showPicker: false,
|
||
apply_type: [],
|
||
csr: [],
|
||
workInfo: {
|
||
startTime: '', //开始时间
|
||
endTime: '', //结束时间
|
||
chapterReason: '',
|
||
chapterType: '',
|
||
chapterTypeName: '',
|
||
approveState: -1
|
||
},
|
||
overTimeUser: {},
|
||
value_time: '',
|
||
index: 1,
|
||
id: '',
|
||
targetList: [],
|
||
show_search_user: false,
|
||
search_value_user: [],
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
var _this = this;
|
||
this.id = option.id || '';
|
||
this.getSealType()
|
||
//初始化当前 加班人为默认当前登陆人。
|
||
var userInfo = uni.getStorageSync('userInfo');
|
||
this.overTimeUser = {
|
||
userId: userInfo.userId,
|
||
name: userInfo.name
|
||
}
|
||
|
||
//如果是编辑，就根据接口获取数据，
|
||
if (option.id) {
|
||
this.$http.request({
|
||
url: '/apis/sealUse/detail',
|
||
method: 'GET',
|
||
params: {
|
||
id: option.id,
|
||
},
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
this.workInfo = res.data.sealUseApply;
|
||
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.overTimeUser = {
|
||
// userId:workInfos.over_time_user,
|
||
// name:workInfos.overTimeUserName
|
||
// }
|
||
// 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.workInfo = {
|
||
// startTime:workInfos.begin_time, //开始时间
|
||
// endTime:workInfos.end_time, //结束时间
|
||
// timeArea:workInfos.time_area, //加班时间长
|
||
// reason:workInfos.reason,
|
||
// id:this.id,
|
||
// process_instance_id:workInfos.process_instance_id
|
||
// }
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: this.workInfo,
|
||
success: function() {
|
||
|
||
}
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: '获取信息失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
} else {
|
||
//如果不是，是新增，获取session中的数据。
|
||
uni.getStorage({
|
||
key: 'workInfo',
|
||
success: function(res) {
|
||
_this.workInfo = res.data.info || {};
|
||
// _this.overTimeUser = res.data.overTimeUser||{};
|
||
}
|
||
});
|
||
}
|
||
},
|
||
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 workInfo = uni.getStorageSync('workInfo');
|
||
if (!workInfo) {
|
||
workInfo = {}
|
||
}
|
||
this.targetList = detail
|
||
workInfo.targetList = this.targetList
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: workInfo,
|
||
success: function() {}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.request({
|
||
url: '/apis/sealUse/detail',
|
||
method: 'GET',
|
||
params: {
|
||
id: this.id,
|
||
},
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
this.workInfo = res.data.sealUseApply;
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: this.workInfo,
|
||
success: function() {
|
||
|
||
}
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: '获取信息失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
},
|
||
showSinglePicker() {
|
||
this.pickerValueDefault = [0]
|
||
this.$refs.mpvuePicker.show()
|
||
},
|
||
pickerConfirm(e) {
|
||
this.workInfo.chapterTypeName = e.label;
|
||
this.workInfo.chapterType = e.value[0]; //我也不知道为什么这边是数组，可能改picker框架支持多选。
|
||
},
|
||
selectPeople() {
|
||
this.show_search_user = true;
|
||
// uni.navigateTo({
|
||
// url: "selectPeople?flag="+flag
|
||
// });
|
||
},
|
||
getSealType() {
|
||
this.$http.request({
|
||
url: "apis/dict/getDictsByType",
|
||
params: {
|
||
type: "chapter_type"
|
||
}
|
||
}).then(res => {
|
||
this.apply_type = res.data.datas
|
||
this.apply_type.forEach(item => {
|
||
item.label = item.name
|
||
item.value = item.id
|
||
})
|
||
})
|
||
},
|
||
// 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;
|
||
// },
|
||
//时间选择
|
||
onShowDatePicker(n) { //显示
|
||
this.showPicker = true;
|
||
if (n == 1) {
|
||
this.value_time = this.workInfo.startTime;
|
||
} else if (n == 2) {
|
||
this.value_time = this.workInfo.endTime;
|
||
}
|
||
this.index = n;
|
||
},
|
||
onSelected(e) { //选择
|
||
this.showPicker = false;
|
||
var _this = this;
|
||
if (e) {
|
||
if (this.index == 1) {
|
||
this.workInfo.startTime = e.value + ":00";
|
||
} else if (this.index == 2) {
|
||
this.workInfo.endTime = e.value + ":00";
|
||
}
|
||
//保存当前修改信息
|
||
var workInfo = uni.getStorageSync('workInfo');
|
||
if (!workInfo) {
|
||
workInfo = {}
|
||
}
|
||
workInfo.info = this.workInfo;
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: workInfo,
|
||
success: function() {}
|
||
});
|
||
}
|
||
},
|
||
dataChange() {
|
||
//保存当前修改信息
|
||
var workInfo = uni.getStorageSync('workInfo');
|
||
if (!workInfo) {
|
||
workInfo = {}
|
||
}
|
||
workInfo.info = this.workInfo;
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: workInfo,
|
||
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 workInfo = uni.getStorageSync('workInfo');
|
||
if (!workInfo) {
|
||
workInfo = {}
|
||
}
|
||
workInfo.imgsrc_list = _this.imgsrc_list;;
|
||
workInfo.imgsrc_list_local = _this.imgsrc_list_local;
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: workInfo,
|
||
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 workInfo = uni.getStorageSync('workInfo');
|
||
if (!workInfo) {
|
||
workInfo = {}
|
||
}
|
||
workInfo.imgsrc_list = _this.imgsrc_list;;
|
||
workInfo.imgsrc_list_local = _this.imgsrc_list_local;
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: workInfo,
|
||
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 workInfo = uni.getStorageSync('workInfo');
|
||
if (!workInfo) {
|
||
workInfo = {}
|
||
}
|
||
workInfo.imgsrc_list = this.imgsrc_list;
|
||
workInfo.imgsrc_list_local = this.imgsrc_list_local;
|
||
uni.setStorage({
|
||
key: 'workInfo',
|
||
data: workInfo,
|
||
success: function() {
|
||
|
||
}
|
||
});
|
||
},
|
||
//点击暂存和确认提交 需要进行的操作。
|
||
goAddRepair(flag) {
|
||
console.log(this.workInfo)
|
||
var _this = this;
|
||
if (!(this.workInfo && this.workInfo.startTime)) {
|
||
uni.showToast({
|
||
title: '请选择开始时间',
|
||
duration: 2000,
|
||
icon: "none"
|
||
});
|
||
return false;
|
||
}
|
||
if (!(this.workInfo && this.workInfo.endTime)) {
|
||
uni.showToast({
|
||
title: '请选择结束时间',
|
||
duration: 2000,
|
||
icon: "none"
|
||
});
|
||
return false;
|
||
}
|
||
if (dataToTime(this.workInfo.endTime) <= dataToTime(this.workInfo.startTime)) {
|
||
uni.showToast({
|
||
title: '开始时间不能大于结束时间',
|
||
duration: 2000,
|
||
icon: "none"
|
||
});
|
||
return false;
|
||
}
|
||
if (!(this.workInfo && this.workInfo.chapterReason)) {
|
||
uni.showToast({
|
||
title: '请填写用章事由',
|
||
duration: 2000,
|
||
icon: "none"
|
||
});
|
||
return false;
|
||
}
|
||
if (flag == 'tj') {
|
||
//提交进行的操作
|
||
var url = '/apis/approveFlow/submitApprove'
|
||
this.$http.request({
|
||
url: url,
|
||
data: {
|
||
dataType: 6,
|
||
mainId: this.id,
|
||
}
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
uni.removeStorageSync('workInfo');
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
duration: 1000,
|
||
icon: "none"
|
||
});
|
||
setTimeout(function() {
|
||
uni.redirectTo({
|
||
url: 'sealUse'
|
||
});
|
||
}, 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/sealUse/saveAddAndChange'
|
||
|
||
this.$http.request({
|
||
url: url,
|
||
params: {
|
||
startTime: this.workInfo.startTime,
|
||
endTime: this.workInfo.endTime,
|
||
chapterReason: this.workInfo.chapterReason,
|
||
chapterType: this.workInfo.chapterType,
|
||
taglocationappearanceImage: this.imgsrc_list,
|
||
id: this.id
|
||
// destination:this.workInfo.destination,
|
||
// driver:this.workInfo.driver,
|
||
// carNo:this.workInfo.carNo,
|
||
// distance:this.workInfo.distance,
|
||
}
|
||
}).then(res => {
|
||
if (res.data.code == 0) {
|
||
if (this.workInfo.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('workInfo');
|
||
uni.navigateTo({
|
||
url: 'sealUse'
|
||
});
|
||
return true;
|
||
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.itemunit {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 92upx;
|
||
line-height: 92upx;
|
||
color: #999;
|
||
font-size: 26upx;
|
||
}
|
||
</style>
|