jonhon-mes-PDA/pages/sanitation/gasInspection.vue

<template>
  <ifrm ref="ifrm">
    <!-- 安全巡检-->
    <uni-forms ref="form" err-show-type="toast">
      <uni-forms-item>
        <input type="text" v-model="code" @confirm="deviceRepairConfirm" class="uni-input-border" placeholder="巡检点编码" />
      </uni-forms-item>
    </uni-forms>
    <t-table>
      <t-tr>
        <t-td>巡检点编码</t-td>
        <t-td>{{ deviceRepairObj.epInspectionPoint.insNum }}</t-td>
      </t-tr>
      <t-tr>
        <t-td>巡检点位置</t-td>
        <t-td>{{ deviceRepairObj.epInspectionPoint.insSite }}</t-td>
      </t-tr>
      <t-tr>
        <t-td>状态</t-td>
        <t-td>
          {{
            deviceRepairObj.epInspectionPoint.taskStatus == 1
              ? "待检"
              : deviceRepairObj.epInspectionPoint.taskStatus == 2
                ? "未检"
                : deviceRepairObj.epInspectionPoint.taskStatus == 3
                  ? "已检"
                  : ""
          }}
        </t-td>
      </t-tr>
    </t-table>
    <view style="font-size: 36rpx">巡检备注：</view>
    <uni-forms ref="form" err-show-type="toast">
      <uni-forms-item>
        <uni-easyinput type="textarea" autoHeight v-model="deviceRepairObj.epInspectionPoint.parMemo"
          placeholder="请输入内容">
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <view class="photoTitleSize">{{ uploader.length }}/9</view>
    <view class="showImage">
      <view v-for="(item, i) in uploader" :key="i" class="showImage-for">
        <view class="view-image">
          <image :src="item.imageUrl" @tap="previewImage(i)" />
        </view>
        <view class="view-icon">
          <uni-icons type="trash" size="14" color="gray" @click="removeScene(item, i)" />
        </view>
      </view>
      <view class="view-center" v-if="uploader.length < 9">
        <image src="../../static/images/photo.png" @click="chooseImage()" />
      </view>
    </view>
    <view class="buttonBox">
      <button class="button" type="primary" :disabled="!(Object.keys(deviceRepairObj.epInspectionPoint).length > 2)"
        @click="submitClick">
        提交
      </button>
    </view>
  </ifrm>
</template>
<script>
import ifrm from "@/pages/index/ifrm";
import tTable from "@/components/t-table/t-table.vue";
import tTh from "@/components/t-table/t-th.vue";
import tTr from "@/components/t-table/t-tr.vue";
import tTd from "@/components/t-table/t-td.vue";
import scan from "../../mixin/scan.js";
import {
  options
} from '@/http/config.js';
export default {
  mixins: [scan],
  components: {
    ifrm,
    tTable,
    tTh,
    tTr,
    tTd,
  },
  data() {
    return {
      code: "",
      deviceRepairObj: {
        epInspectionPoint: {
          parMemo: "",
        },
      },
      uploader: [],
    };
  },
  methods: {
    chooseImage: async function () {
      if (!this.deviceRepairObj.epInspectionPoint.epcId) {
        return uni.showToast({
          title: '请先查询巡检点',
          icon: 'none'
        });
      }
      const server_config = uni.getStorageSync("server-config")
console.log(999999,server_config)
      uni.chooseImage({
        count: 9,
        // sizeType: ['compressed'],
        // sourceType: ['album', 'camera'],
        success: (res) => {
          uni.showLoading({
            title: '上传中，请稍候'
          });
          res.tempFilePaths.forEach(filePath => {
            uni.uploadFile({
              url: server_config.rootUrl + '/blade-resource/oss/endpoint/put-file-attach',
              filePath: filePath,
              name: 'file',
              header: {
                'token': 'bearer ' + uni.getStorageSync('accessToken'),
                'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken'),
                'Blade-Requested-With': 'BladeHttpRequest'
              },
              success: (uploadRes) => {
                uni.hideLoading();
                uni.showToast({ title: '上传成功' });
                this.uploader.push({
                  upId: JSON.parse(uploadRes.data).data.attachId,
                  imageUrl: JSON.parse(uploadRes.data).data.link
                });
              },
              fail: (err) => {
                console.error('❌ 上传失败', err);
                uni.showToast({ title: '上传失败', icon: 'none' });
              }
            });
          });
        },
      });
    },
    previewImage: function (index) {
      var imags = [];
      this.uploader.forEach((item) => {
        imags.push(item.imageUrl);
      });
      uni.previewImage({
        current: index,
        urls: imags,
      });
    },

    removeScene(item, i) {
      //删除现场图片
      this.uploader.splice(i, 1);
      // //删除附件记录
      this.$uploadUtil.asyncDelete(item.upId).then((data) => {
        uni.showToast({
          title: "删除成功",
          icon: "none",
        });
      });
      // this.upIdList.splice(this.upIdList.findIndex((upId) => (upId === item.upId)), 1);
    },

    getBarCode(code) {
      this.getData(code);
    },
    deviceRepairConfirm(e) {
      this.getBarCode(e.target.value);
    },
    getData(code) {
      this.code = code;
      this.$u.api
        .getInspectionBySan({
          code: code,
          eipType: 2,
        })
        .then((res) => {
          if (res.data == null) {
            return uni.showToast({
              icon: "none",
              title: "此巡检位置暂无任务",
            });
          }
          this.code = "";
          this.deviceRepairObj.epInspectionPoint = res.data;
          uni.showToast({
            title: "数据获取成功",
          });
        });
    },
    submitClick() {
      this.$u.api
        .savePatrolIns({
          ...this.deviceRepairObj.epInspectionPoint,
          path: this.uploader.map((item) => item.imageUrl).join(','),
        })
        .then((data) => {
          uni.showToast({
            title: "保存成功",
          });
          this.code = "";
          this.deviceRepairObj = {
            epInspectionPoint: {},
          };
          this.uploader = [];
        });
    },
  },
  onNavigationBarButtonTap(btn) {
    this.$refs.ifrm.topMenuClick(btn);
  },
  onShow() { },
};
</script>

<style scoped lang="less">
.uni-forms-item {
  margin-bottom: 6px !important;
}

.photoTitleSize {
  color: #a1a1a1;
  text-align: right;
  margin-right: 30rpx;
  margin-top: -30rpx;
}

.showImage {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: -20rpx;

  .showImage-for {
    display: flex;
    flex-direction: column;
    width: 200rpx;
    margin-left: 30rpx;
    height: 260rpx;

    .view-icon {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-top: -10rpx;
    }

    image {
      border-width: 2rpx;
      border-color: rgb(229, 229, 229);
      border-style: solid;
      border-radius: 20rpx;
      width: 190rpx;
      height: 190rpx;
    }
  }
}

.view-center {
  margin: 0rpx 25rpx;

  image {
    border-width: 2rpx;
    border-color: rgb(229, 229, 229);
    border-style: solid;
    border-radius: 20rpx;
    width: 190rpx;
    height: 190rpx;
  }
}
</style>