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

<template>
  <view>
    <!-- 安全巡检-->
    <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; margin: 20rpx 0">巡检备注：</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)" mode="widthFix" />
        </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>
  </view>
</template>

<script>
import scan from "../../mixin/scan.js";
import {
  options
} from '@/http/config.js';
export default {
  mixins: [scan],
  data() {
    return {
      insNum: "",
      insList: [],
      uploader: [], // 存放 { imageUrl, upId }
      memo: "",
      uploadCount: 0, // 上传计数
    };
  },
  methods: {
    getBarCode(code) {
      this.getData(code);
    },
    insConfirm(e) {
      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 => {
            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: 20rpx;
}

.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;
  }
}

.buttonBox {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
}
</style>