yxk_h5_master/pages/month/addMonth.vue

426 lines
13 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">
<view class="item item_line item_textarea">
<view class="itemname redMi">本月完成工作</view>
<textarea class="textarea" placeholder="请详细描述本月完成工作的内容" v-model="info.com_content" @input='infoChange'></textarea>
</view>
<view class="item item_line item_textarea">
<view class="itemname">本月未完成工作</view>
<textarea class="textarea" placeholder="请详细描述本月未完成工作的内容" v-model="info.uncom_content" @input='infoChange'></textarea>
</view>
<view class="item item_line item_textarea">
<view class="itemname">本月需协调工作</view>
<textarea class="textarea" placeholder="请详细描述本月需协调工作的内容" v-model="info.need_concert_content" @input='infoChange'></textarea>
</view>
<view class="item item_line item_textarea">
<view class="itemname">本月必做事项</view>
<textarea class="textarea" placeholder="请详细描述本月必做事项" v-model="info.must_contet" @input='infoChange'></textarea>
</view>
<view class="item item_line item_textarea">
<view class="itemname">本月待定事项</view>
<textarea class="textarea" placeholder="请详细描述本月待定事项" v-model="info.wait_contet" @input='infoChange'></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">发给谁</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("monthInfo")'>
<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')">暂存</button>
</view>
<view style="-webkit-flex:1;flex: 1;">
<button type="primary" style="width: 90%;" @click="goAddRepair('tj')">确认提交</button>
</view>
</view>
</view>
<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 {
config
} from '../../request/js/config.js'
import uniIcons from "@/components/uni-icons/uni-icons.vue"
import chooseUserMulti from '@/components/xinsoft-search-list/chooseUserMulti.vue'
export default {
components: {
uniIcons,chooseUserMulti
},
data() {
return {
config:config,
imgsrc_list: [],
imgsrc_list_local: [],
id:'',
info:{},
targetList:[],
show_search_user:false,
search_value_user:[],
// allInfo:{}
}
},
onLoad(option) {
var _this = this;
this.id = option.id||'';
//如果是编辑,就根据接口获取数据,
if(option.id){
this.$http.request({
url: '/apis/monthReport/detail',
params: {
id:option.id
},
}).then(res => {
if (res.data.code == 0) {
this.info = res.data.monthReport;
this.targetList = res.data.targetList|| [];
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 allInfo =
{
id:option.id,
info:this.info,
targetList:this.targetList,
imgsrc_list:this.imgsrc_list,
imgsrc_list_local:this.imgsrc_list_local
};
uni.setStorage({
key: 'monthInfo',
data:allInfo,
success: function () {
}
});
}
}).catch(err => {
uni.showToast({
title: '获取信息失败',
icon: 'none',
duration: 2000
});
});
}else{
//如果不是是新增获取session中的数据。
uni.getStorage({
key: 'monthInfo',
success: function (res) {
var session = res.data;
_this.info = session.info||{};
_this.targetList = session.targetList||[];
_this.imgsrc_list = session.imgsrc_list||[];
_this.imgsrc_list_local = session.imgsrc_list_local||[];
}
});
}
},
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 monthInfo = uni.getStorageSync('monthInfo');
if(!monthInfo){
monthInfo= {}
}
this.targetList=detail
monthInfo.targetList = this.targetList
uni.setStorage({
key: 'monthInfo',
data: monthInfo,
success: function () {
}
});
}
}
},
methods: {
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;
},
infoChange:function(){
//保存当前修改信息
var monthInfo = uni.getStorageSync('monthInfo');
if(!monthInfo){
monthInfo = {}
}
monthInfo.info = this.info;
uni.setStorage({
key: 'monthInfo',
data: monthInfo,
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 monthInfo = uni.getStorageSync('monthInfo');
if(!monthInfo){
monthInfo = {}
}
monthInfo.imgsrc_list = _this.imgsrc_list;;
monthInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: 'monthInfo',
data: monthInfo,
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 monthInfo = uni.getStorageSync('monthInfo');
if(!monthInfo){
monthInfo = {}
}
monthInfo.imgsrc_list = _this.imgsrc_list;;
monthInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: 'monthInfo',
data: monthInfo,
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 monthInfo = uni.getStorageSync('monthInfo');
monthInfo.imgsrc_list = this.imgsrc_list;
monthInfo.imgsrc_list_local = this.imgsrc_list_local;
uni.setStorage({
key: 'monthInfo',
data: monthInfo,
success: function () {
}
});
},
//点击暂存和确认提交 需要进行的操作。
goAddRepair(flag){
if(flag == 'tj'){
//提交进行的操作
var url = '/apis/monthReport/submintApproveMonth'
}else if(flag == 'zc'){
//暂存进行的操作。
var url = '/apis/monthReport/saveAndChange'
}
var monthInfo = uni.getStorageSync('monthInfo');
if(!(monthInfo.info && monthInfo.info.com_content)){
uni.showToast({
title: '请填写本月完成工作',
duration: 2000,
icon:"none"
});
return false;
}
//在这里是抄送人数据。
var carbonCopyRecipients = []
if(monthInfo.targetList && monthInfo.targetList.length>0){
monthInfo.targetList.forEach((vals,index)=>{
carbonCopyRecipients.push(vals.user_id);
});
}
//调取接口进行保存。
this.$http.request({
url: url,
params:{
comContent:this.info.com_content,
uncomContent:this.info.uncom_content||'',
needConcertContent:this.info.need_concert_content||'',
waitContet:this.info.wait_contet||'',
mustContet:this.info.must_contet||'',
newTargetList:carbonCopyRecipients, // 逗号隔开。
taglocationappearanceImage:this.imgsrc_list,
id:monthInfo.id||''
}
}).then(res=>{
if(res.data.code == 0){
uni.removeStorageSync('monthInfo');
uni.showToast({
title: '操作成功',
duration: 1000,
icon:"none"
});
setTimeout( function(){
uni.redirectTo({
url: 'month'
});
},1000)
}
else{
uni.showToast({
title: res.data.msg,
duration: 2000,
icon:"none"
});
}
}).catch(err=>{
uni.showToast({
title: '操作失败',
duration: 2000,
icon:"none"
});
});
}
},
onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面,删除本地缓存的巡检操作
uni.removeStorageSync('monthInfo');
uni.navigateTo({
url: 'month'
});
return true;
},
}
</script>