yxk_gk_master/pages/task/index.vue

739 lines
18 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="container">
<view class='info_container'>
<view class="item item_line">
<view class="itemname redMi">任务主题</view>
<view class="itemtext">
<input class="iteminput" placeholder="请输入任务主题" v-model="taskInfo.title" @change='dataChange'/>
</view>
</view>
<view class="item">
<view class="itemname redMi">任务类型</view>
<view class="itemtext">
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="taskInfo.taskTypeName"/>
<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
<picker class="picker_" @change="bindPickerTaskType($event)" :range="arrayTaskType"> </picker>
</view>
</view>
<view class="item">
<view class="itemname redMi">任务等级</view>
<view class="itemtext">
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="taskInfo.taskLevelName"/>
<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
<picker class="picker_" @change="bindPickerTaskLevel($event)" :range="arrayTaskLevel"> </picker>
</view>
</view>
<view class="item item_line" @click="onShowDatePicker">
<view class="itemname redMi">要求完成时间</view>
<view class="itemtext">
<view >
<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value='taskInfo.expireDate'/>
<img src="../../static/img/dateIcon.png" class="dateIcon" />
</view>
</view>
</view>
<view class="item item_line item_textarea">
<view class="itemname">详细描述</view>
<textarea class="textarea" placeholder="请详细描述" v-model="taskInfo.detail" @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">
<view class="itemname redMi">责任人</view>
<view class="itemtext" @click="selectPeople1()" >
<input class="iteminput InputRightMargin" disabled placeholder="请选择责任人" :value='taskInfo.heldPersonName'/>
<img src="../../static/img/personlistIcon.png" class="dateIcon" />
</view>
</view>
<view class="item item_line">
<view class="itemname">抄送人</view>
<view class="itemtext" @click="selectPeople2()" >
<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="bottom_btn_container">
<view class="bottom_btn_out">
<view class="bottom_btn" @click="toBack">取消</view>
<!-- <view class="bottom_btn" @click="goAddRepair">提交</view> -->
<button class="bottom_btn" @click="goAddRepair" :disabled="isDisabled">提交</button>
</view>
</view>
<mx-datepicker type="datetime" :value="taskInfo.expireDate" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
<chooseUserSingle v-if="show_search_user1" @change="getUser"></chooseUserSingle>
<chooseUserMulti v-if="show_search_user2" @change="getUser2"></chooseUserMulti>
</view>
</view>
</template>
<script>
import {
config
} from '../../request/js/config.js'
import chooseUserSingle from '@/components/system/chooseUserSingle.vue'
import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
import uniIcons from "@/components/uni-icons/uni-icons.vue"
import chooseUserMulti from '@/components/system/chooseUserMulti.vue'
export default {
components: {
mxDatepicker,
uniIcons,
chooseUserSingle,chooseUserMulti
},
data() {
return {
taskType_list:[],
arrayTaskType:[],
taskLevel_list:[],
arrayTaskLevel:[],
chooseUserVisible: false,
config:config,
task_level:[],
task_type:[],
imgsrc_list: [],
imgsrc_list_local: [],
showPicker: false,
isDisabled: false,
deepLength:1,
taskInfo:{
title:"",
expireDate:'',
detail:'',
taskTypeName:'',
taskType:'',
taskLevelName:'',
taskLevel:''
},
zrr:{},
csr:[],
id:'',
targetList: [],
show_search_user1:false,
show_search_user2:false,
}
},
onLoad(option) {
var _this = this;
//初始化获取 任务等级数据字典。
this.$http.request({
url: '/apis/dict/getDictsByType',
method: 'post',
params: {
type: "task_type"
},
}).then(res => {
if (res) {
if (res.data.code == 0) {
this.taskType_list=res.data.datas;
this.taskType_list.forEach(item=>{
this.arrayTaskType.push(item.name);
})
}
}
});
//初始化获取 任务等级数据字典。
this.$http.request({
url: '/apis/dict/getDictsByType',
params: {
type: 'task_level'
},
}).then(res=>{
if (res) {
if (res.data.code == 0) {
this.taskLevel_list=res.data.datas;
this.taskLevel_list.forEach(item=>{
this.arrayTaskLevel.push(item.name);
})
}
}
}).catch(err=>{
console.log(err);
});
},
watch:{
},
methods: {
bindPickerTaskType: function(e) {
this.taskInfo.taskTypeName=this.arrayTaskType[e.target.value]
this.taskInfo.taskType=this.taskType_list[e.target.value].id
},
bindPickerTaskLevel: function(e) {
this.taskInfo.taskLevelName=this.arrayTaskLevel[e.target.value]
this.taskInfo.taskLevel=this.taskLevel_list[e.target.value].id
},
getUser(val) {
this.show_search_user1 = false
if (val) {
this.$set(this.taskInfo, "heldPerson", val.userId)
this.$set(this.taskInfo, "heldPersonName", val.NAME)
}
},
getUser2(newv){
this.show_search_user2 = false
var detail = [];
newv.forEach(item=>{
let obj = {userId: item.userId, name: item.NAME};
detail.push(obj);
})
if(newv.length>0){
this.targetList=detail
}
},
selectPeople1(){
this.show_search_user1=true;
},
selectPeople2(data){
this.show_search_user2=true;
},
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() { //显示
this.showPicker = true;
},
onSelected(e) { //选择
this.showPicker = false;
var _this = this;
if (e) {
this.taskInfo.expireDate = e.value+':00';
}
},
dataChange: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();
taskInfo.imgsrc_list = _this.imgsrc_list;;
taskInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: 'taskInfo',
data: taskInfo,
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 taskInfo = uni.getStorageSync('taskInfo');
if(!taskInfo){
taskInfo = {}
}
taskInfo.imgsrc_list = _this.imgsrc_list;;
taskInfo.imgsrc_list_local = _this.imgsrc_list_local;
uni.setStorage({
key: 'taskInfo',
data: taskInfo,
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 taskInfo = uni.getStorageSync('taskInfo');
if(!taskInfo){
taskInfo = {}
}
taskInfo.imgsrc_list = this.imgsrc_list;;
taskInfo.imgsrc_list_local = this.imgsrc_list_local;
uni.setStorage({
key: 'taskInfo',
data: taskInfo,
success: function () {
}
});
},
//点击暂存和确认提交 需要进行的操作。
goAddRepair(){
var url = '/apis/taskMain/save'
var _this = this;
//在这里是抄送人数据。
var carbonCopyRecipients = []
if(this.targetList.length>0){
this.targetList.forEach((vals,index)=>{
carbonCopyRecipients.push(vals.userId);
});
}
if(!(this.taskInfo && this.taskInfo.title)){
uni.showToast({
title: '请填写任务主题',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.taskInfo && this.taskInfo.taskType)){
uni.showToast({
title: '请选择任务类型',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.taskInfo && this.taskInfo.taskLevel)){
uni.showToast({
title: '请选择任务等级',
duration: 2000,
icon:"none"
});
return false;
}
if(!(this.taskInfo && this.taskInfo.expireDate)){
uni.showToast({
title: '请选择要求完成时间',
duration: 2000,
icon:"none"
});
return false;
}
if(!this.taskInfo.heldPerson){
uni.showToast({
title: '请选择责任人',
duration: 2000,
icon:"none"
});
return false;
}
if(this.isDisabled) {
return
}
this.isDisabled = true
//调取接口进行保存。
this.$http.request({
url: url,
params:{
title:this.taskInfo.title,
taskType:this.taskInfo.taskType,
taskLevel:this.taskInfo.taskLevel,
expireDate:this.taskInfo.expireDate,
detail:this.taskInfo.detail,
ccList:carbonCopyRecipients, // 逗号隔开。
heldPerson:this.taskInfo.heldPerson,
taglocationappearanceImage:this.imgsrc_list,
id:this.taskInfo.id||''
}
}).then(res=>{
this.isDisabled = false
if(res.data.code == 0){
uni.showToast({
title: '操作成功',
duration: 1000,
icon:"none"
});
setTimeout(function(){
uni.navigateTo({
url: "../index/index"
});
},500)
}
}).catch(err=>{
uni.showToast({
title: '操作失败',
duration: 2000,
icon:"none"
});
});
},
toBack(){
uni.navigateTo({
url: "../index/index"
});
}
},
onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面,删除本地缓存的巡检操作
uni.navigateTo({
url: "../index/index"
});
return true;
},
}
</script>
<style scoped>
.container{
position: relative;
padding-bottom: 80px;
overflow: auto;
background-color: #f3f3f3;
box-sizing: border-box;
}
.info_container{
position: relative;
justify-content: center;
flex-wrap: wrap;
width: calc(100% - 40px);
margin: auto;
font-size: 15px;
}
.redMi:before {
position: absolute;
content: '*';
color: #FF0000;
left: 0px;
}
.redMi{
padding-left: 15px;
}
.bottom_btn_container{
position: fixed;
bottom:0;
width:100%;
left: 0;
height: 70px;
background-color: #dadada;
}
.bottom_btn_out{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.bottom_btn{
position: relative;
margin: 0 10px;
/* width: 30%; */
width: 30%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 25px;
color: #333;
top:5px;
letter-spacing: 4px;
border-radius: 4px;
}
.bottom_btn:nth-child(1){
background-color: #fff;
border: 2px solid #007AFF;
color: #007AFF;
box-sizing: border-box;
/* box-shadow: 3px 3px 10px rgba(160, 160, 159,0.2) inset,-3px -3px 10px rgba(160, 160, 159,0.2) inset; */
}
.bottom_btn:nth-child(2){
color: #fff;
background-color: #007AFF;
/* box-shadow: 3px 3px 10px rgba(16, 36, 177,0.2) inset,-3px -3px 10px rgba(16, 36, 177,0.2) inset; */
}
.InputRightMargin {
padding-right: 25px;
}
.myarrowright {
font-size: 16px !important;
position: absolute;
right: 10px;
line-height: 50px !important;
top: 0;
}
.picker_{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/*设备维修填写信息模块 公共样式 开始*/
.item {
position: relative;
overflow: auto;
width: 100%;
min-height: 50px;
background-color: #fff;
border-bottom: 1px solid #EDEDED;
}
.item_line {
margin-bottom: 10px;
border-bottom: none;
}
.item_textarea {
height: 143px;
}
.itemname {
position: absolute;
font-size: 15px;
left: 15px;
top: 0;
height: 50px;
line-height: 50px;
color: #333333;
}
.itemtext {
position: relative;
float: right;
right: 15px;
width: 50%;
min-height: 50px;
line-height: 20px;
color: #333;
padding-top: 15px;
padding-bottom: 15px;
box-sizing: border-box;
text-align: right;
}
.iteminput{
width: 100%;
text-align: right;
font-size: 13px;
box-sizing: border-box;
}
.InputRightMargin{
padding-right:25px;
}
.timeRightMargin{
padding-right: 30px;
}
.dateIcon {
position: absolute;
right: 0px;
top: 14px;
width: 20px;
height: 20px;
}
.textarea {
position: absolute;
left: 15px;
right:15px;
bottom: 15px;
top: 46px;
height: auto;
width: auto;
font-size: 13px;
}
.picke_item{
right:30px;
position: absolute;
line-height: 44px;
top: 0;
color: #333;
font-size: 13px;
}
/*上传图片*/
.photo_container {
position: relative;
margin-top: 10px;
background-color: #fff;
overflow: auto;
}
.pzqd {
font-size: 16px;
color: #333;
padding-left: 15px;
padding-top: 10px;
box-sizing: border-box;
}
.photo_out {
position: relative;
}
.imgwrap {
position: relative;
background-color: #fff;
float: left;
/* width: 27%; */
width: 148px;
margin: 3%;
}
.myimgBox {
width: 100%;
padding-bottom: 100%;
overflow: hidden;
margin: 0;
position: relative;
}
.myimgBox .img {
position: absolute;
width: 100%;
height: 100%;
/* background-color: red; */
}
.upload_btn {
border: 1px solid #dadada;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.upload_btn img {
display: block;
width: 32%;
height: 30%;
margin: 0 auto 5px auto;
}
.sctp {
text-align: center;
font-size: 15px;
color: #ababab;
}
.uploadimg {
width: 100%;
height: 100%;
}
.cxsc {
position: absolute;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
text-align: center;
line-height: 30;
font-size: 14px;
color: #fff;
}
.deleteimg {
position: absolute;
width: 18px;
height: 18px;
right: -9px;
top: -9px;
background-color: #fff;
border-radius: 18px;
}
/*设备维修填写信息模块 公共样式 结束*/
</style>