property-manager-side/wuye-manager-uniapp/pageSubPack/instrument/addreplacement.vue

<template>
  <view class="page_container addreplacement_box">
    <uni-forms border :modelValue="formData" label-position="left">
      <uni-forms-item label="仪表类型">
        <uni-data-checkbox v-model="formData.deviceType" :localdata="items"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item label="设备编号">
        <view class="flex items-center justify-between">
          <uni-easyinput
            class="flex-1"
            :input-border="false"
            v-model="formData.deviceCode"
            placeholder="请输入设备号"
            :clearable="true"
          >
          </uni-easyinput>
          <uni-icons
            class="scanicons"
            @tap="handleScan"
            size="48rpx"
            type="scan"
            color="#737373"
          ></uni-icons>
        </view>
      </uni-forms-item>
      <uni-forms-item label="房屋号">
        <view @tap="handleClick" style="width: 100%">
          <uni-easyinput
            class="easy-ellipsis-1"
            :inputBorder="false"
            disabled
            v-model="houseName"
            placeholderStyle="color: #999999"
            placeholder="请选择安装房屋"
          >
            <template #right>
              <uni-icons type="forward" color="#737373"></uni-icons>
            </template>
          </uni-easyinput>
        </view>
      </uni-forms-item>
    </uni-forms>

    <view class="action_btn" @tap="handleSubmit">
      <text>提 交</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { AddReplaceMainList } from '@/api/instrument.js'

const formData = ref({
  deviceType: 2,
  deviceCode: '',
  houseId: ''
})
// 水表，电表列表
const items = [
  {
    text: '水表',
    value: 2
  },
  {
    text: '电表',
    value: 1
  }
]

const houseName = ref('')
/** 处理 安装房屋 */
function handleClick() {
  uni.navigateTo({
    url: '/pageSubPack/instrument/checkouthouse',
    events: {
      backData: data => {
        houseName.value = data.HouseName
        formData.value.houseId = data.Houseid
      }
    }
  })
}
/** 处理 扫码 */
function handleScan() {
  uni.scanCode({
    scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
    autoZoom: true, // iOS 自动对焦优化
    onlyFromCamera: false, // 允许从相册选取图片识别码
    success: res => {
      formData.value.deviceCode = res.result
    },
    fail: err => {
      // 判断相机权限被拒场景
      if (err.errMsg.includes('permission') || err.errMsg.includes('camera')) {
        uni.showModal({
          title: '权限不足',
          content: '需要相机权限才能扫码，请前往系统设置开启',
          confirmText: '去设置',
          success: modalRes => {
            if (modalRes.confirm) {
              // APP端跳转系统设置（iOS/安卓通用）
              plus.runtime.openURL('app-settings://')
            }
          }
        })
        return
      }
      uni.showToast({
        icon: 'none',
        title: '扫描异常'
      })
    }
  })
}

function handleSubmit() {
  formData.value.deviceCode = formData.value.deviceCode.trim()
  formData.value.houseId = formData.value.houseId.trim()
  if (!formData.value.deviceCode.trim()) {
    uni.showToast({
      icon: 'exception',
      title: '检查设备编号'
    })
  }
  if (!formData.value.houseId.trim()) {
    uni.showToast({
      icon: 'exception',
      title: '选择房屋'
    })
  }
  const { villageId } = JSON.parse(uni.getStorageSync('currentVillage'))
  AddReplaceMainList({
    villageId,
    ...formData.value
  })
    .then(() => {
      uni.showToast({
        icon: 'success',
        title: '操作成功',
        success() {
          uni.navigateBack()
        }
      })
    })
    .catch(err => {
      uni.showToast({
        icon: 'error',
        title: '检查编号'
      })
    })
}
</script>

<style lang="scss" scoped>
.addreplacement_box {
  background: #ffffff;
  padding-top: 0;
  &:deep(.uni-forms-item) {
    display: flex;
    align-items: center;
    height: 90rpx;
    line-height: 90rpx;
    padding: 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  }
  &:deep(.uni-easyinput__content) {
    background: none !important;
  }

  .action_btn {
    width: 670rpx;
    height: 80rpx;
    background: #4d5dfa;
    border-radius: 8rpx;

    text-align: center;

    margin-top: 300rpx;

    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
  }

  .scanicons {
    margin-left: 20rpx;
  }
}
.easy-ellipsis-1:deep(.uni-easyinput__content-input) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>