1

pages-order/orderDetail/orderDetail.vue

@@ -239,6 +239,27 @@
         <view class="submit">保存工单</view>
       </view>
     </view>
+    <!--    悬浮操作-->
+    <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
+             :direction="direction" @trigger="trigger" @fabClick="fabClick" />
+    <!-- 普通弹窗---拍照上传 -->
+    <uni-popup ref="popup" background-color="#fff">
+      <view class="popup-content">
+        <view class="dl-avatar-box">
+          <uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile" limit="9" title="最多选择9张图片"></uni-file-picker>
+<!--          <u-upload-->
+<!--              :action="uploadUrl"-->
+<!--              :headers="headers"-->
+<!--              :file-list="fileList"-->
+<!--              :max-count="10"-->
+<!--              :show-upload-btn="true"-->
+<!--              @after-read="afterRead"-->
+<!--              @delete="deleteFile"-->
+<!--          ></u-upload>-->
+        </view>
+        <button type="primary" @click="saveWorkingItem">保存</button>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
@@ -246,7 +267,8 @@
 import VNavigationBar from '@/components/VNavigationBar.vue'
 import {bus} from "@/utils/eventBus";
 import request from '@/utils/request';
-import {getOrderStatusText,formatDate,formatTimestamp,getDictTextByCodeAndValue} from "@/utils/utils";
+import upload from '@/utils/upload'
+import {getOrderStatusText,formatDate,formatTimestamp,getDictTextByCodeAndValue,saveTicketsRecords} from "@/utils/utils";
 import {getUserInfo} from '@/utils/auth'
 import config from '@/config'
 export default {
@@ -255,6 +277,20 @@ export default {
   },
   data() {
     return {
+      //以下是悬浮操作需要的参数
+      direction: 'vertical',
+      horizontal: 'right',
+      vertical: 'bottom',
+      pattern: {
+        color: '#7A7E83',
+        backgroundColor: '#fff',
+        selectedColor: '#007AFF',
+        buttonColor: '#007AFF',
+        iconColor: '#fff'
+      },
+      content: [],
+      sizeType:['compressed'],
+      fileList: [],
       imgUrlPrex:config.baseImageUrl,
       //是否详情页(0否1是)
       isDetail:'1',
@@ -327,7 +363,92 @@ export default {
     this.getOrderDetail()
   },
   methods: {
+    afterRead(file) {
+      for (let i = 0; i < file.tempFilePaths.length; i++) {
+        upload({
+          url:'/admin-api/infra/file/upload',
+          filePath: file.tempFilePaths[i]
+        }).then((res)=>{
+          this.fileList.push({
+            url: config.baseImageUrl+res.data
+          })
+          console.log(this.fileList)
+        })
+      }
+    },
+    deleteFile(file, index) {
+      console.log('删除文件');
+      this.fileList.splice(index, 1);
+    },
+    /**
+     * 保存工作记录信息
+     */
+    async saveWorkingItem(){
+      try {
+        let fileStr = this.fileList.map(item=>item.url.replace(config.baseImageUrl,"")).join(",")
+        const result = await saveTicketsRecords(this.ticketInfo.id,null,null,null,"sgz","施工中拍照记录",fileStr);
+        this.$refs.popup.close()
+        uni.showToast({
+          title: '操作成功',
+          icon: 'none'
+        })
+        console.error("result",result);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    /**
+     * 判断工单状态和角色控制显示什么操作按钮
+     */
+    checkRoleOperate(){
+      if(this.loginUser.roleCodes.includes("service_advisor")){
+        //服务顾问
+      }
+      if(this.loginUser.roleCodes.includes("repair_staff")){
+        //维修工角色
+        if(this.ticketInfo.nowRepairId==this.loginUser.id){
+          //当前用户就是施工人，可以提交配件申请
+          this.content.push({
+            text: '配件申请', active: false,code:"apply"
+          })
+          if("02"==this.ticketInfo.ticketsWorkStatus){
+            //当前正在施工，可以随时上传图片
+            this.content.push({
+              text: '拍照上传', active: false,code:"working"
+            })
+          }
+        }
+      }
+    },
+    /**
+     * 操作按钮点击事件
+     */
+    trigger(e) {
+      console.log(e)
+      this.content[e.index].active = !e.item.active
+      if("working"==e.item.code){
+        //维修过程中拍照上传
+        this.fileList=[]
+        this.$refs.popup.open("bottom")
+      }
+      // uni.showModal({
+      //   title: '提示',
+      //   content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}${e.item.code}`,
+      //   success: function(res) {
+      //     if (res.confirm) {
+      //       console.log('用户点击确定')
+      //     } else if (res.cancel) {
+      //       console.log('用户点击取消')
+      //     }
+      //   }
+      // })
+    },
+    /**
+     * 点击悬浮操作按钮
+     */
+    fabClick() {
 
+    },
     /**
      * 查看订单详情
      */
@@ -369,6 +490,8 @@ export default {
           })
         }
         this.ticketInfo = resultObj
+        //判断当前角色及工单状态显示操作按钮
+        this.checkRoleOperate()
       })
     },
 
@@ -398,6 +521,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
+.popup-content {
+@include flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+  height: auto;
+  background-color: #fff;
+}
 .container {
   height: 100%;
   background-color: #F3F5F7;