提交费用报销审核模式的问题以及报销支持上传多张图片

fhKeeper/formulahousekeeper/timesheet/src/views/expense/expense.vue

@@ -101,9 +101,38 @@
                     :value="item.id"></el-option>
                 </el-select>
               </el-form-item>
+              <!-- 第一审核人 -->
+              <el-form-item label="第一审核人" v-if="auditTypeItem.auditType == 2">
+                <!--普通员工只能自己填报自己的 -->
+                <el-select v-if="user.userNameNeedTranslate != '1'" v-model="addForm.firstCheckerId"
+                  :placeholder="$t('pleaseselecttheapplicant')" style="width: 150px"
+                  filterable="true">
+                  <span v-for="(item, index) in users" :key="index">
+                    <el-option :label="item.name" :value="item.id"></el-option>
+                  </span>
+                </el-select>
+
+                <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'150'" :distinction="'4'"
+                  :subject="users" :subjectId="addForm.firstCheckerId" ref="selectCat" 
+                  @selectCal="selectCal"></selectCat>
+              </el-form-item>
+              <!-- 第一审核人 -->
+              <el-form-item label="第二审核人" v-if="auditTypeItem.auditType == 2">
+                <!--普通员工只能自己填报自己的 -->
+                <el-select v-if="user.userNameNeedTranslate != '1'" v-model="addForm.secondCheckerId"
+                  :placeholder="$t('pleaseselecttheapplicant')" style="width: 150px"
+                  filterable="true">
+                  <span v-for="(item, index) in users" :key="index">
+                    <el-option :label="item.name" :value="item.id"></el-option>
+                  </span>
+                </el-select>
 
+                <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'150'" :distinction="'5'"
+                  :subject="users" :subjectId="addForm.secondCheckerId" ref="selectCat" 
+                  @selectCal="selectCal"></selectCat>
+              </el-form-item>
               <!-- 备注 -->
-              <el-form-item :label="$t('bei-zhu')" style="display: block; width: 70%; float: left;">
+              <el-form-item :label="$t('bei-zhu')" style="display: block; width: 70%">
                 <el-input type="textarea" v-model="addForm.remark" :autosize="{ minRows: 2, maxRows: 2 }"
                   maxlength="100"></el-input>
               </el-form-item>
@@ -192,12 +221,22 @@
               </el-table-column>
               <el-table-column :label="$t('expensereimbursementvoucher')" width="135px">
                 <template slot-scope="scope">
+                <!--
                   <div @click="abl(scope.$index)">
                     <el-upload :class="!scope.row.pic ? 'upload-demo' : 'upload-demo icl'" :before-remove="beforeRemove"
                       :http-request="fileonLoad" limit="1" name="multipartFile">
                       <el-button size="small" type="primary" v-if="!scope.row.pic">{{ $t('clickupload') }}</el-button>
                     </el-upload>
                   </div>
+                -->
+                  <div>
+                    <div v-if="scope.row.pic && scope.row.pic.length > 0">
+                      <el-button size="small" @click="viewDetailsImage(scope.$index)">查看详情</el-button>
+                    </div>
+                    <div v-else>
+                      <el-button type="primary" size="small" @click="performCustomization(scope.$index)" :loading="listLoading">点击上传</el-button>
+                    </div>
+                  </div>
                 </template>
               </el-table-column>
               <el-table-column fixed="right" :label="$t('operation')">
@@ -213,6 +252,23 @@
         </div>
       </div>
     </div>
+
+    <!-- 多张图片查看详情 -->
+    <el-dialog title="查看详情" :visible.sync="dialogVisibleImage" width="745px" :before-close="handleClose">
+      <div class="dayImge">
+        <div class="dayImgeItem" v-if="dialogVisibleImageList">
+          <viewer :images="dialogVisibleImageList" v-viewer="viewerOptions" class="dayImgeItem">
+            <div class="xiaoImg" v-for="src,i in dialogVisibleImageList" :key="i">
+              <img ref="imgsa" :src="src.url">
+              <div class="imgIcon" @click.stop="deteleIpc(apl)" v-if="imgLoadType==1"><i class="el-icon-circle-close"></i></div>
+              <div class="imgIcon" @click.stop="deteleIpc(apl, 'ParticularsList', 'invoiceList')" v-if="imgLoadType==2"><i class="el-icon-circle-close"></i></div>
+            </div>
+            <img @click.stop="performCustomization(apl, imgLoadType)" v-if="dialogVisibleImageList.length < 10" :src="require('../../assets/image/aacbc.png')" class="xiaoImg" style="margin-right: 0" />
+          </viewer>
+        </div>
+      </div>
+    </el-dialog>
+
     <!-- 下面部分 -->
     <div class="xiamian" ref="xiaomian"
       :style="'width: ' + (xiamianWidth - 400) + 'px;float:right;background: #fff;position: relative;'">
@@ -359,6 +415,9 @@
                   <div v-if="auditTypeItem.auditType == 1">
                     <el-button size="mini" @click.stop.native="approve(scope.row)">审核</el-button>
                   </div>
+                  <div v-if="auditTypeItem.auditType == 2">
+                    <el-button size="mini" @click.stop.native="approve(scope.row)">审核</el-button>
+                  </div>
                 </div>
               </template>
             </el-table-column>
@@ -377,7 +436,7 @@
     <el-dialog title="报销凭证详情" :visible.sync="dialog" width="1000px">
       <!-- 内容主体 -->
       <div class="informant"><!--  报销人 -->
-        <el-form :model="ParticularsList" label-width="80px">
+        <el-form :model="ParticularsList" label-width="100px">
           <el-form-item :label="$t('peopleconcerned')" style="width: 270px"
             :rules="{ required: true, message: $t('pleaseselecttheapplicant'), trigger: 'blur' }">
 
@@ -395,6 +454,35 @@
               :subjectId="ParticularsList.ownerId" ref="selectCat" @selectCal="selectCal"></selectCat>
 
           </el-form-item>
+          <!-- 第一审核人 -->
+          <el-form-item label="第一审核人" v-if="auditTypeItem.auditType == 2">
+            <el-select v-if="user.userNameNeedTranslate != '1'" v-model="ParticularsList.firstCheckerId"
+              :placeholder="'请选择审核人'" style="width: 150px" :disabled="ParticularsList.reviewProcess > 0"
+              filterable="true">
+              <span v-for="(item, index) in users" :key="index">
+                <el-option :label="item.name" :value="item.id"></el-option>
+              </span>
+            </el-select>
+
+            <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'150'" :distinction="'6'"
+              :subject="users" :subjectId="ParticularsList.firstCheckerId" ref="selectCat" :disabled="ParticularsList.reviewProcess > 0"
+              @selectCal="selectCal"></selectCat>
+          </el-form-item>
+          <!-- 第二审核人 -->
+          <el-form-item label="第二审核人" v-if="auditTypeItem.auditType == 2">
+            <el-select v-if="user.userNameNeedTranslate != '1'" v-model="ParticularsList.secondCheckerId"
+              :placeholder="'请选择审核人'" style="width: 150px" :disabled="ParticularsList.reviewProcess > 1"
+              filterable="true">
+              <span v-for="(item, index) in users" :key="index">
+                <el-option :label="item.name" :value="item.id"></el-option>
+              </span>
+            </el-select>
+
+            <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'150'" :distinction="'7'"
+              :subject="users" :subjectId="ParticularsList.secondCheckerId" ref="selectCat" :disabled="ParticularsList.reviewProcess > 1"
+              @selectCal="selectCal"></selectCat>
+          </el-form-item>
+
           <el-form-item :label="$t('fillinthedate')">
             <!-- <el-input v-model="ParticularsList.createDate" :disabled="flg"></el-input> -->
             <el-date-picker type="date" :disabled="flg" :placeholder="$t('optiondate')"
@@ -518,7 +606,7 @@
           </el-table-column>
           <el-table-column prop="pic" :label="$t('expensereimbursementvoucher')" width="300">
             <template slot-scope="scope">
-              <div v-if="!flg">
+              <!-- <div v-if="!flg">
                 <div @click="abl(scope.$index)" style="height: 35px;overflow: hidden;">
                   <el-upload :class="!scope.row.pic ? 'upload-demo' : 'upload-demo icl'" :file-list="scope.row.pic"
                     :before-remove="beforeRemoves" :http-request="fileonLoads" limit="1" name="multipartFile">
@@ -535,6 +623,14 @@
                   </div>
                 </span>
                 <span v-else>{{ $t('nodocuments') }}</span>
+              </div> -->
+              <div>
+                <div v-if="scope.row.pic && scope.row.pic.length > 0">
+                  <el-button size="small" @click="viewDetailsImage(scope.$index, 'ParticularsList', 'invoiceList')">查看详情</el-button>
+                </div>
+                <div v-else>
+                  <el-button type="primary" size="small" @click="performCustomization(scope.$index, 2)" :loading="listLoading">点击上传</el-button>
+                </div>
               </div>
             </template>
           </el-table-column>
@@ -701,7 +797,7 @@
     </el-dialog>
 
     <!-- 详情查看弹出框 -->
-    <el-dialog title="报销凭证详情" :visible.sync="detailDialog" width="1000px" :before-close="handleClose">
+    <el-dialog title="报销凭证详情" :visible.sync="detailDialog" width="1100px" :before-close="handleClose">
       <div ref="printContent" class="printContent">
         <div class="printContent-detail">
           <div class="detail-item">
@@ -917,17 +1013,20 @@
               <span class="detail-item-title"> <span class="printBox">备注</span> </span>
               <span class="detail-item-content">{{ item.remark }}</span>
             </div>
-            <div class="detail-item">
+            <div class="detail-item" style="display: flex">
               <span class="detail-item-title"> <span class="printBox">报销凭证</span> </span>
-              <span class="detail-item-content">
-                <span v-if="item.pic" style="width: 100px;display: inline-block;">
+              <div class="detail-item-content">
+                <div v-if="item.pic" style="display: inline-block;">
                   <div class="tups">
+                    <!-- <viewer :images="item.pic">
+                      <img ref="imgsa" v-for="src in item.pic" :src="src.url" :key="src.title">
+                    </viewer> -->
                     <viewer :images="item.pic">
                       <img ref="imgsa" v-for="src in item.pic" :src="src.url" :key="src.title">
                     </viewer>
                   </div>
-                </span>
-              </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -937,6 +1036,11 @@
         <el-button @click="detailDialog = false">关 闭</el-button>
       </span>
     </el-dialog>
+
+    <!-- 自定义图片上传 -->
+    <div class="customIamgeLoad">
+      <input id="uploadInput" ref="uploadInput" type="file" class="file" @change="fileMultLoad" multiple accept="image/jpg,image/png" />
+    </div>
   </section>
 </template>
 
@@ -1044,6 +1148,10 @@ export default {
       detaExpenseMainTypeName: '',
       multipleSelection: [],
       sendState: '',
+
+      dialogVisibleImage: false,
+      dialogVisibleImageList: [],
+      imgLoadType: 1, // 1 为 费用填报的图片上传 2 单据修改的图片上传
     };
   },
   computed: {
@@ -1373,7 +1481,7 @@ export default {
         });
     },
     approve(item) {
-      if (this.auditTypeItem.auditType == 0) {
+      if (this.auditTypeItem.auditType == 0 || this.auditTypeItem.auditType == 2) {
         //默认模式，按有审核权限的人直接审核
         this.showSingleAudit = false;
         //审核通过
@@ -1396,12 +1504,12 @@ export default {
               type: "error"
             });
           });
-      } else {
+      } else if (this.auditTypeItem.auditType == 1){
         //项目经理按项目逐条审核
         this.showSingleAudit = true;
         this.downloadByA(item);
       }
-
+ 
     },
 
     denySingle(item) {
@@ -1571,13 +1679,12 @@ export default {
       var spl = paramData.invoiceList
       for (var i in spl) {
         if (spl[i].pic) {
-          if (spl[i].pic[0].name) {
-            spl[i].pic = spl[i].pic[0].name
-          }
+          spl[i].pic = spl[i].pic.map(a => a.name).join(',')
         }
       }
       paramData.items = JSON.stringify(paramData.invoiceList)//这里要传发票列表的json转string
-
+      // console.log(paramData, '<== paramData')
+      // return
       delete paramData.invoiceList
 
       this.http.post('/expense-sheet/add', paramData,
@@ -1640,6 +1747,13 @@ export default {
     submits() {
       this.$refs.mainAddForm.validate(valid => {
         if (valid) {
+          if(this.auditTypeItem.auditType == 2 && (!this.addForm.firstCheckerId || !this.addForm.secondCheckerId)) {
+            this.$message({
+              message: !this.addForm.firstCheckerId ? '请选择第一审核人' : '请选择第二审核人',
+              type: "error"
+            });
+            return;
+          }
           if (this.invoiceList.length == 0) {
             this.$message({
               message: this.$t('pleaseaddtheinvoice'),
@@ -1812,8 +1926,14 @@ export default {
     },
     //创建单据
     add() {
-      // happenDate
-      this.addForm.items = JSON.stringify(this.invoiceList)//这里要传发票列表的json转string
+      let newInvoiceList = JSON.parse(JSON.stringify(this.invoiceList))
+      for(var i in newInvoiceList) {
+        if(newInvoiceList[i].pic) {
+          newInvoiceList[i].pic = newInvoiceList[i].pic.map(item => item.name).join(',')
+        }
+      }
+      console.log(newInvoiceList)
+      this.addForm.items = JSON.stringify(newInvoiceList)//这里要传发票列表的json转string
       this.addForm.totalAmount = this.totalCost
       this.http.post('/expense-sheet/add', this.addForm,
         res => {
@@ -1879,15 +1999,15 @@ export default {
             // var b = []
             for (var i in res.data.invoiceList) {
               if (res.data.invoiceList[i].pic) {
-                var b = []
-                var j = {}
-                var img = this.diz + '/upload/' + res.data.invoiceList[i].pic
-                j.url = img
-                j.title = this.$t('expensereimbursementvoucher'),
-                  j.name = res.data.invoiceList[i].pic
-                b.push(j)
-                res.data.invoiceList[i].pic = b
-                // console.log(res.data.invoiceList[i].pic)
+                let newPic = res.data.invoiceList[i].pic.split(',')
+                res.data.invoiceList[i].pic = newPic.map(item => {
+                  return {
+                    name: item,
+                    url: `/upload/${item}`,
+                    // url: `https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg`,
+                    title: '报销凭证'
+                  }
+                })
               }
             }
             this.ParticularsList = res.data
@@ -2185,6 +2305,14 @@ export default {
         this.ownerId = obj.id
       } else if (obj.distinction == '3') {
         this.ParticularsList.ownerId = obj.id
+      } else if (obj.distinction == '4') {
+        this.addForm.firstCheckerId = obj.id
+      } else if (obj.distinction == '5') {
+        this.addForm.secondCheckerId = obj.id
+      } else if (obj.distinction == '6') {
+        this.ParticularsList.firstCheckerId = obj.id
+      } else if (obj.distinction == '7') {
+        this.ParticularsList.secondCheckerId = obj.id
       }
     },
     // 单据导出
@@ -2285,15 +2413,92 @@ export default {
     },
     // 打印
     print() {
-      // let printContent = this.$refs.printContent;
-      // let newWindow = window.open('', '_blank');
-      // newWindow.document.write(printContent.innerHTML);
-      // newWindow.document.close();
-      // newWindow.focus();
-      // newWindow.print();
-      // newWindow.close();
       this.$print(this.$refs.printContent)
-    }
+    },
+
+    // 触发自定义函数
+    performCustomization(index, type = 1) {
+      this.apl = index
+      this.imgLoadType = type
+      this.$refs.uploadInput.click()
+    },
+    // 查看详情
+    viewDetailsImage(index, fields = 'invoiceList', fieldsCope) {
+      if(fieldsCope) {
+        this.imgLoadType = 2
+        this.dialogVisibleImageList = this[fields][fieldsCope][index].pic
+      } else{
+        this.imgLoadType = 1
+        this.dialogVisibleImageList = this[fields][index].pic
+      }
+      console.log(this.dialogVisibleImageList, '查看详情')
+      this.apl = index
+      this.dialogVisibleImage = true
+    },
+    // 删除图片
+    deteleIpc(index, fields = 'invoiceList', fieldsCope) {
+      if(fieldsCope) {
+        this[fields][fieldsCope][index].pic.splice(index, 1)
+        this.dialogVisibleImageList = this[fields][fieldsCope][index].pic
+      } else{
+        this[fields][index].pic.splice(index, 1)
+        this.dialogVisibleImageList = this[fields][index].pic
+      }
+    },
+    // 费用报销图片上传（多选）
+    fileMultLoad() {
+      let fileArr = this.$refs.uploadInput.files
+      this.listLoading = true;
+      let formData = new FormData();
+      for (let i = 0; i < fileArr.length; i++) {
+        formData.append("multipartFiles", fileArr[i]);
+      }
+      this.http.uploadFile('/common/uploadFileArray', formData,
+      res => {
+        this.listLoading = false;
+        if (res.code == "ok") {
+          this.$message({
+            message: this.$t('uploadedsuccessfully'),
+            type: "success"
+          });
+          if(res.data) {
+            let newList = res.data.split(';')
+            let newArr = newList.map(item => {
+              return {
+                name: item,
+                url: '/upload/' + item,
+                // url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+                title: '报销凭证'
+              }
+            })
+            if(this.imgLoadType == 1) {
+              let oldList = this.invoiceList[this.apl].pic || []
+              this.$set(this.invoiceList[this.apl], 'pic', [...oldList, ...newArr])
+              this.dialogVisibleImageList = [...oldList, ...newArr]
+            }
+            if(this.imgLoadType == 2) {
+              let oldList = this.ParticularsList.invoiceList[this.apl].pic || []
+              this.$set(this.ParticularsList.invoiceList[this.apl], 'pic', [...oldList, ...newArr])
+              this.dialogVisibleImageList = [...oldList, ...newArr]
+            }
+          }
+          console.log(this.apl, '<< === 赋值的索引')
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error"
+          });
+        }
+      },
+      error => {
+        this.listLoading = false;
+        this.$message({
+          message: error,
+          type: "error"
+        });
+      });
+    },
+
   },
   beforeDestroy() {
 
@@ -2310,9 +2515,12 @@ export default {
 }
 
 .tups img {
-  height: 25px !important;
-  position: relative;
-  z-index: 99;
+  // height: 25px !important;
+  // position: relative;
+  // z-index: 99;
+  width: 30px;
+  height: 30px;
+  margin-right: 4px;
 }
 
 .viewer-canvas {
@@ -2368,7 +2576,7 @@ export default {
 }
 
 .public {
-  height: 180px;
+  // height: 180px;
   border-bottom: 1px solid #ddd;
 }
 
@@ -2582,4 +2790,40 @@ export default {
     }
   }
 }
+.customIamgeLoad {
+  opacity: 0;
+  position: absolute;
+  top: -300vh;
+  left: -300vw;
+}
+.dayImge {
+  .xiaoImg {
+    width: 120px;
+    height: 120px;
+    margin-right: 25px;
+    margin-bottom: 20px;
+    position: relative;
+    display: inline-block;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .imgIcon {
+      position: absolute;
+      right: 4px;
+      font-size: 25px;
+      top: 2px;
+      cursor: pointer;
+    }
+  }
+  .xiaoImg:nth-child(5n) {
+    margin-right: 0;
+  }
+
+  .dayImgeItem {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
 </style>