日报新增图片上传

fhKeeper/formulahousekeeper/timesheet/src/views/workReport/daily.vue

@@ -590,15 +590,17 @@
                             :disabled="workForm.domains.length==0?true:(workForm.domains[index].state>=2?false:true)"></el-input>
                         </el-form-item>
                         <!-- 拍照上传 -->
-                        <el-form-item label="图片上传" v-if="user.companyId == '7' || user.companyId == '10'">
+                        <el-form-item label="图片上传" v-if="user.timeType.choseFromAlbum == 1">
                             <div class="photos">
-                                <div class="photos_img" v-for="(p, ip) in domain.pics" :key="ip">
-                                    <img
-                                        style="width: 120px; height: 120px; margin-right:10px;"
-                                        :src="p" />
-                                </div>
-                                <div @click="addImg(index)" class="photos_img">
-                                    <img src="../../assets/image/aacbc.png" />
+                                <div>
+                                    <el-upload
+                                        list-type="picture-card"
+                                        :http-request="(file) => {return addImg(file, index)}"
+                                        :on-preview="(file) => {return handlePictureCardPreview(file, index)}"
+                                        :before-remove="(file, fileList) => {return delImg(file, fileList, index)}"
+                                        :file-list="domain.imgListUrl" :limit="3">
+                                        <i class="el-icon-plus"></i>
+                                    </el-upload>
                                 </div>
                             </div>
                         </el-form-item>
@@ -2118,58 +2120,58 @@
                     })
                 })
             },
+            handlePictureCardPreview(file, index) {
+                console.log(file, index)
+                let arr = []
+                let imgArr = this.workForm.domains[index].imgListUrl
+                for(var i in imgArr) {
+                    arr.push(imgArr[i].url)
+                }
+                console.log(arr, '图片数据')
+                const $viewer = this.$viewerApi({
+                    images: arr
+                });
+
+            },
             // 图片上传
-            addImg(index) {
-                var that = this;
-                // if (that.workForm.domains[index].pics == null) {
-                //     that.workForm.domains[index].pics = [];
-                //     that.workForm.domains[index].iospics = [];
-                // }
-                // that.workForm.domains[index].pics.push('wxLocalResource://imageidQzpcVXNlcnNcTEpZXERlc2t0b3Bc5oG25pCe5Zu+54mHXGhwLmpwZw==')
-                // console.log(that.workForm.domains)
-                wx.chooseImage({
-                    count: 3, // 默认9
-                    sizeType: ['compressed'],
-                    sourceType: ['album'],
-                    defaultCameraMode: "batch",
-                    success: function (res) {
-                        console.log(res, '数据')
-                        var localIds = res.localIds;
-                        wx.getLocalImgData({
-                            localId: localIds[0], // 图片的localID
-                            success: function (res) {
-                                var localData = res.localData;
-                                console.log('转之后的', localData, res)
-                                if (that.workForm.domains[index].pics == null) {
-                                    that.workForm.domains[index].pics = [];
-                                    that.workForm.domains[index].iospics = [];
-                                }
-                                if (that.user.companyId == 7) {
-                                    that.workForm.domains[index].pics = that.workForm.domains[index].pics.concat(localData); 
-                                } else {
-                                    that.workForm.domains[index].pics = localData;
-                                }
-                                that.$forceUpdate(); 
-                                if (that.workForm.domains[index].serverPics == null) {
-                                    that.workForm.domains[index].serverPics = [];
-                                }
-                                for (var i=0;i<localIds.length; i++) {
-                                    wx.uploadImage({
-                                        localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
-                                        isShowProgressTips: 1, // 默认为1，显示进度提示
-                                        success: function (res) {
-                                            var serverId = res.serverId; // 返回图片的服务器端ID
-                                            that.workForm.domains[index].serverPics.push(serverId);
-
-                                            console.log(that.workForm.domains, '数据')
-                                        }
-                                    });
-                                }
-                            }
+            addImg(e, index) {
+                console.log(e, '数据')
+                let formData = new FormData()
+                formData.append('multipartFile', e.file)
+                this.http.uploadFile('/common/uploadFile', formData,
+                res => {
+                    if (res.code == "ok") {
+                        this.$message({
+                            message: this.$t('uploadedsuccessfully'),
+                            type: "success"
                         });
-                        
+                        if(!this.workForm.domains[index].imgList) {
+                            this.workForm.domains[index].imgList = []
+                            this.workForm.domains[index].imgListUrl = []
+                        }
+                        this.workForm.domains[index].imgList.push(res.data)
+                        this.workForm.domains[index].imgListUrl.push({ name: '990' ,url: '/upload/' + res.data})
+                    } else {
+                        this.$message({message: res.msg,type: "error"});
                     }
-                })
+                    console.log(this.workForm.domains[index])
+                },
+                error => {this.$message({message: error,type: "error"});
+                });
+            },
+
+            // 删除图片
+            delImg(file,fileList, index) {
+                console.log(file, fileList)
+                let idx = 0
+                for(let i in fileList) {
+                    if(fileList[i].uid == file.uid) {
+                        idx = i
+                    }
+                }
+                this.workForm.domains[index].imgList.splice(idx, 1)
+                this.workForm.domains[index].imgListUrl.splice(idx, 1)
+                console.log(this.workForm.domains[index])
             },
             test(){
                 console.log('test',this.workForm.domains);
@@ -4702,6 +4704,19 @@
                                 if (list.report[i].state == 0){
                                     this.canCancelInDialog = true
                                 }
+                                // 加判断
+                                if(this.user.companyId == '10') {
+                                    let arrList = []
+                                    for(var k in list.report[i].pics) {
+                                        let obj = {
+                                            name: k,
+                                            url: list.report[i].pics[k]
+                                        }
+                                        arrList.push(obj)
+                                    }
+                                    arr[i].imgListUrl = arrList
+                                    arr[i].imgList = list.report[i].pics
+                                }
                             }
                             this.reportCanDelete = candelete
                             this.workForm = {
@@ -4711,6 +4726,7 @@
                                 userId:null,
                                 time: list.time
                             }
+                            console.log('workForm', this.workForm)
                         } else {
                             this.workForm = {
                                 createDate: this.workForm.createDate,
@@ -6306,6 +6322,18 @@
                                 formData.append("progress", this.workForm.domains[i].progress);
                                 formData.append("workingTime", this.workForm.domains[i].workingTime);
                             }
+
+                            if(this.user.timeType.choseFromAlbum == 1 ) {
+                                console.log(this.workForm.domains[i].imgList)
+                                let imgListFor = this.workForm.domains[i].imgList
+                                for(var b in imgListFor) {
+                                    imgListFor[b] = imgListFor[b].replace('/upload/', '')
+                                }
+                                console.log(imgListFor)
+                                let m = JSON.stringify(imgListFor);
+                                m = m.replace(/,/g,"@");//replaceAll(',','@');企业微信不兼容replaceAll
+                                formData.append("picStr", m);
+                            }
                             
                             
                             //处理多个时间事项
@@ -6867,6 +6895,10 @@
 </style>
 
 <style lang="scss">
+/*去除upload组件过渡效果*/
+.photos .el-upload-list__item {
+  transition: none !important;
+}
     .daily {
         .el-card__body {
             height: 80%;
@@ -6898,6 +6930,7 @@
 </style>
 
 <style scoped>
+
 /* 项目标签的样式 */
     .el-tag + .el-tag {
         margin-left: 10px;