Houjie
2025-05-15 1833dd6d7cac01c35840af52fadc1199821e5805
pages/maintenanceReport/maintenanceReportDetils/maintenanceReportDetils.vue
@@ -9,18 +9,21 @@
         <uni-forms ref="form" :modelValue="formData" validate-trigger="bind" err-show-type="undertext">
            <uni-group top="1">
               <uni-forms-item name="num" :label-width="100" label="工单号:">
               <!-- <uni-forms-item name="num" :label-width="100" label="工单号:">
                  <uni-easyinput v-model="formData.repairCode" :disabled="true" />
               </uni-forms-item>
               </uni-forms-item> -->
               <uni-forms-item required name="num" :label-width="100" label="设备编号:">
                  <uni-data-select v-model="formData.num" :localdata="equipmentList" @change="changeEquipmentList"
                     placeholder="请选择" :disabled="true" />
               </uni-forms-item>
               <uni-forms-item name="actualStartTime" :label-width="100" label="维修开始时间:">
                  <uni-easyinput v-model="formData.actualStartTime" :disabled="true" />
               <uni-forms-item name="faultStartTime" :label-width="100" label="故障开始时间:">
                  <uni-easyinput v-model="formData.faultStartTime" :disabled="true" />
               </uni-forms-item>
               <uni-forms-item name="outNum" :label-width="100" label="维修负责人:">
                  <uni-easyinput v-model="formData.repairer" :disabled="true" />
               <uni-forms-item name="reportStatus" :label-width="100" label="报修状态:">
                  <uni-easyinput v-model="formData.reportStatus" :disabled="true" />
               </uni-forms-item>
               <uni-forms-item name="faultName" :label-width="100" label="故障简称">
                  <uni-easyinput v-model="formData.faultName" :disabled="true" />
               </uni-forms-item>
               <uni-forms-item name="outNum" :label-width="100" label="故障描述:">
                  <uni-easyinput v-model="formData.faultDescription" :disabled="true" />
@@ -29,18 +32,10 @@
                  <uni-easyinput v-model="formData.remark" :disabled="true" />
               </uni-forms-item>
               <uni-forms-item name="outNum" :label-width="100" label="维修图片:">
                  <view class="grid col-4 grid-square flex-sub">
                     <view class="bg-img" v-for="(item,index) in  imgList" :key="index" @tap="ViewImage"
                        :data-url="imgList[index]">
                        <image :src="imgList[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
                           <text class='cuIcon-close'></text>
                        </view>
                     </view>
                     <view class="solids" v-if="imgList.length<1">
                        <text class='cuIcon-cameraadd'></text>
                     </view>
                  </view>
                  <uni-file-picker limit="9" :value="fileLists" :image-styles="imageStyles"
                     :sourceType="sourceType" @select="select" @progress="progress" @success="success"
                     @fail="fail" @delete="deletea"  :readonly="true" />
               </uni-forms-item>
            </uni-group>
         </uni-forms>
@@ -57,6 +52,15 @@
      mixins: [MescrollMixin], // 使用mixin
      data() {
         return {
            // 图片回显
            fileLists: [],
            // 上传图片的样式
            imageStyles: {
               width: 90,
               height: 90,
            },
            // uni.chooseImage值,从相册选择,拍摄
            sourceType: ['album', 'camera'],
            ipAndPort: configService.staticURL,
            scrollLeft: 0,
            searchValue: '',
@@ -70,9 +74,8 @@
            NavBarColor: this.NavBarColor,
            url: {
               upload: "/eam/sysFiles/batch_upload",
               stallList: "/eam/eamRepairOrder/queryById",
               getEquipmentList:'eam/equipment/list'
               // getEquipmentList: "eam/equipment/asyncLoadEquipment"
               stallList: "/eam/eamReportRepair/queryById",
               getEquipmentList: 'eam/equipment/list'
            },
            id: '',
            serverBaseUrl: '',
@@ -123,72 +126,6 @@
         changeEquipmentList(e) {
            this.formData.num = e;
         },
         ChooseImage() {
            var that = this;
            uni.chooseImage({
               count: 4,
               sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
               sourceType: ['album'], // 从相册选择
               success: (res) => {
                  // 存储选择的图片路径
                  that.imgList = res.tempFilePaths;
                  // 初始化 formData.avatar 为空字符串
                  that.formData.avatar = '';
                  // 创建上传任务的 Promise 数组
                  const uploadPromises = res.tempFilePaths.map((filePath, index) => {
                     return new Promise((resolve, reject) => {
                        that.$http.upload(that.url.upload, {
                              filePath: filePath,
                              name: 'file'
                           })
                           .then(uploadRes => {
                              // 假设服务器返回的结果中包含文件路径
                              const filePath = uploadRes.data.result[0];
                              // 追加到 formData.avatar 中,并用逗号分隔
                              this.formData.avatar.push(filePath);
                              resolve(filePath);
                           })
                           .catch(err => {
                              console.error('图片' + index + '上传失败:', err);
                              reject(err);
                           });
                     });
                  });
                  // 并发执行所有上传任务
                  Promise.all(uploadPromises)
                     .then((uploadedFilePaths) => {
                        console.log('所有图片上传成功:', that.formData.avatar);
                     })
                     .catch((err) => {
                        console.error('图片上传失败:', err);
                        that.$tip.error('图片上传失败');
                     });
               }
            });
         },
         ViewImage(e) {
            uni.previewImage({
               urls: this.imgList,
               current: e.currentTarget.dataset.url
            });
         },
         DelImg(e) {
            uni.showModal({
               title: '提示',
               content: '确定要删除这段回忆吗?',
               cancelText: '再看看',
               confirmText: '再见',
               success: res => {
                  if (res.confirm) {
                     this.imgList.splice(e.currentTarget.dataset.index, 1)
                  }
               }
            })
         },
         upCallback() {
            this.$http.get(this.url.stallList, {
               params: {
@@ -201,42 +138,34 @@
               //设置列表数据
               if (res.data.success) {
                  console.log("res", res.data.result)
                  this.formData.repairCode=this.announcement1.repairCode
                  this.formData.repairCode = this.announcement1.repairCode
                  this.formData.num = this.announcement1.equipmentId
                  this.formData.actualStartTime = this.announcement1.actualStartTime
                  this.formData.repairer = this.announcement1.repairer
                  this.formData.faultStartTime = this.announcement1.faultStartTime
                  this.formData.reportStatus = this.announcement1.reportStatus_dictText
                  this.formData.faultName = this.announcement1.faultName
                  this.formData.faultDescription = this.announcement1.faultDescription
                  this.formData.remark = this.announcement1.remark
                  this.formData.avatar = this.announcement1.reportImageFiles
                  this.formData.avatar = this.announcement1.imageFiles
                  this.imgList = JSON.parse(this.formData.avatar)
                  const imageObjects = JSON.parse(this.formData.avatar);
                  // 提取 filePath 并拼接 IP 和端口
                  // 假设 imgList 是已有的图片地址数组
                  this.imgList = imageObjects.map(imageObj => {
                     return `${this.ipAndPort}${imageObj.filePath}`;
                  });
                  // 根据 imgList 构造 fileLists
                  this.fileLists = this.imgList.map(url => ({
                     url: url,
                     extname: 'png',
                     name: 'eam'
                  }));
               }
            }).catch(() => {
               //联网失败, 结束加载
            })
         },
         // getEquipment() {
         //    this.$http.get(this.url.getEquipmentList).then(res => {
         //       //设置列表数据
         //       if (res.data.success) {
         //          this.equipmentList = res.data.result
         //       } else {
         //          uni.showToast({
         //             icon: "error",
         //             title: res.data.message,
         //             duration: 2000
         //          });
         //       }
         //    }).catch(() => {
         //       this.$tip.error("联网失败")
         //    })
         // },
   getEquipment() {
         getEquipment() {
            this.$http.get(this.url.getEquipmentList, {
               params: {
                  pageNo: 1,
@@ -244,7 +173,7 @@
                  order: 'desc',
                  column: 'createTime'
               },
            }).then(res => {
               //设置列表数据
               if (res.data.success) {
@@ -311,6 +240,31 @@
</script>
<style>
   .divider {
      display: flex;
      align-items: center;
      text-align: center;
      color: gray;
      /* 文字颜色 */
      margin: 20px 0;
      /* 上下间距 */
   }
   .divider::before,
   .divider::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid gray;
      /* 横线颜色 */
      margin: 0 16px;
      /* 横线与文字之间的间距 */
   }
   .divider text {
      white-space: nowrap;
      /* 防止文字换行 */
   }
   .is-hover {
      color: rgba(255, 255, 255, 0.6);
      background-color: #55aaff;