jonhon-mes-PDA/pages/safe/inspection.vue

<template>
  <ifrm ref="ifrm">
    <!-- 安全巡检-->
    <uni-forms ref="form" err-show-type="toast">
      <uni-forms-item>
        <input
          type="text"
          v-model="insNum"
          @confirm="insConfirm"
          class="uni-input-border"
          placeholder="巡检点编码"
        />
      </uni-forms-item>
    </uni-forms>
    <uni-table border stripe emptyText="暂无更多数据" class="table">
      <uni-tr>
        <uni-th align="center">巡检点编码</uni-th>
        <uni-th align="center">巡检点位置</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in insList" :key="index">
        <uni-td align="center">{{ item.insNum }}</uni-td>
        <uni-td align="center">{{ item.insSite }}</uni-td>
      </uni-tr>
    </uni-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="memo"
          placeholder="请输入内容"
        />
      </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)"
          ></uni-icons>
        </view>
      </view>
      <view class="view-center" v-if="uploader.length < 9">
        <image
          src="../../static/images/photo.png"
          @click="chooseImage()"
        ></image>
      </view>
    </view>
    <view class="buttonBox">
      <button
        class="button"
        type="primary"
        :disabled="!(insList.length > 0)"
        @click="submitClick"
      >
        提交
      </button>
    </view>
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";
import scan from "../../mixin/scan.js";
import { options } from "@/http/config.js";
export default {
  mixins: [scan],
  components: {
    ifrm,
  },
  data() {
    return {
      insNum: "",
      insList: [],
      uploader: [],
      memo: "",
    };
  },
  methods: {
    getBarCode(code) {
      this.getData(code);
    },
    insConfirm(e) {
      this.insList = [];
      this.getBarCode(e.target.value);
    },
    getData(code) {
      if (!code) return;
      this.insNum = code;
      this.$u.api.getInspectionByCode(code).then((res) => {
        this.insNum = "";
        this.insList = res.data;
        uni.showToast({ title: "数据获取成功" });
      });
    },
    submitClick() {
      this.$u.api
        .saveInspection({
          code: this.insList.map((item) => item.insNum).join(","),
          memo: this.memo,
          // 取出所有上传成功的文件
          path: this.uploader.map((item) => item.imageUrl),
        })
        .then((data) => {
          uni.showToast({ title: "巡检成功" });
          // 清空表单
          this.insList = [];
          this.memo = "";
          this.uploader = [];
        });
    },
    chooseImage: async function () {
      if (this.insList.length == 0) {
        return uni.showToast({
          title: "请先查询巡检点",
          icon: "none",
        });
      }
      uni.chooseImage({
        count: 9,
        // sizeType: ['compressed'],
        // sourceType: ['album', 'camera'],
        success: (res) => {
          uni.showLoading({
            title: "上传中，请稍候",
          });
          res.tempFilePaths.forEach((filePath) => {
            console.log("file-----------", filePath);
            console.log("options.baseURL------", options.baseURL);
            uni.uploadFile({
              url:
                options.baseURL +
                "/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(index) {
      const urls = this.uploader.map((item) => item.imageUrl);
      uni.previewImage({ current: index, urls });
    },

    // 删除图片
    removeScene(item, index) {
      // 先删本地列表
      this.uploader.splice(index, 1);
      uni.showToast({ title: "删除成功", icon: "none" });
    },
  },

  onNavigationBarButtonTap(btn) {
    this.$refs.ifrm.topMenuClick(btn);
  },
  onShow() {},
};
</script>

<style scoped lang="less">
.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>