sfms3.0-uniapp/src/mycomponents/qty/recommendQtyEdit.vue

<template>
  <view class="">
    <u-popup v-model="show" mode="bottom">
      <view class="uni-flex uni-column pop_customer">
        <view class="" style="padding: 10rpx">
          <view class="uni-flex u-col-center uni-row space-between" style="padding: 10rpx 10rpx 20rpx 10rpx">
            <view class="" style="font-size: 35rpx">
              {{ title }}
            </view>
            <image style="width: 35rpx; height: 35rpx" src="/static/icons/icons_close.svg" @click="closeEditPopup"></image>
          </view>
          <view class="split_line"></view>
          <view class="uni-flex uni-column" style="background-color: white; height: 60%">
            <view class="uni-flex uni-column">
              <view class="uni-flex uni-row space-between padding title">
                <text>包装个数 : </text>
                <view class="uni-flex uni-row u-col-center">
                  <!-- <uni-number-box :min="0" @change="calcQty($event,stdCount)" :value="stdCount">
									</uni-number-box> -->
                  <u-number-box v-model="stdCount" @change="calcQty"></u-number-box>
                  {{ handleGetPackUnitName(dataContent.packUnit) }}
                </view>
              </view>
              <view class="split_line"></view>
              <view class="uni-flex uni-row space-between padding title u-col-center">
                <text>包装规格 : </text>
                <view class="uni-flex u-col-center uni-row">
                  <packUnit :dataContent="dataContent"></packUnit>
                </view>
              </view>

              <view class="split_line"></view>
              <view class="uni-flex uni-row space-between padding title u-col-center">
                <text>总数量 : </text>
                <view class="uni-flex uni-row uni-center" style="align-items: center">
                  <input class="qty_input" v-model="allQty" :focus="false" type="number" @input="checkNum" @confirm="confirm()" :maxlength="maxlength" />
                  <uom :uom="dataContent.uom"></uom>
                </view>
              </view>
              <view class="split_line"></view>
            </view>
          </view>
        </view>
        <view class="uni-flex uni-row hide_border">
          <button class="btn_edit_big_cancle" hover-class="btn_edit_big_after" @click="cancel()">取消</button>
          <button class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="confirm()">确认</button>
        </view>
      </view>
    </u-popup>
    <com-message ref="comMessageRef" />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { getUomInfo, getPackUnitName } from '@/common/directory.js'
import uom from '@/mycomponents/qty/uom.vue'
import stdUom from '@/mycomponents/qty/stdUom.vue'
import packUnit from '@/mycomponents/qty/packUnit.vue'

const props = defineProps({
  title: {
    type: String,
    default: '编辑数量'
  },
  dataContent: {
    type: Object,
    default: null
  },
  handleQty: {
    type: Number,
    default: 0
  },
  settingParam: {
    type: Object,
    default: null
  }
})
const allQty = ref(0)
const stdCount = ref(0)
const labelQty = ref(0)
const recommendQty = ref(0)
const maxlength = ref(0)
const show = ref(false)
const comMessageRef = ref()
const dataContent = ref(props.dataContent)
const handleGetPackUnitName = (packUnit) => {
  const unit = getPackUnitName(packUnit)
  return unit
}
const checkNum = (e) => {
  const { value } = e.detail
  const dot = value.indexOf('.') // 包含小数点
  const reg = /^[0-9]+$/ // 正整数
  if (dot > -1) {
    maxlength.value = dot + 7 // 长度是小数点后两位
    if (value.length > dot + 7) {
    }
  }
  if (reg.test(value)) {
    // 如果是正整数不包含小数点
    maxlength.value = 10
  }
}
const openEditPopup = () => {
  setTimeout((res) => {
    show.value = true
  }, 500)
}

const openTaskEditPopup = (recommendQtyParams, handleQty, labelQtyParams) => {
  // dataContent.value =
  recommendQty.value = Number(recommendQtyParams)
  labelQty.value = Number(labelQtyParams)
  allQty.value = Number(handleQty)
  setTimeout((res) => {
    show.value = true
  }, 500)
}
const openRecordEditPopup = (labelQtyParams, item) => {
  dataContent.value = item
  recommendQty.value = 0
  labelQty.value = Number(labelQtyParams)
  allQty.value = Number(labelQtyParams)
  setTimeout((res) => {
    show.value = true
  }, 500)
}
const closeEditPopup = () => {
  show.value = false
}
const confirm = () => {
  setValue()
}
const cancel = () => {
  closeEditPopup()
}
const calcQty = (e) => {
  if (e.value > 0) {
    allQty.value = e.value * dataContent.value.packQty
  }
}
const setValue = () => {
  // var recommendQty = Number(this.dataContent.qty);
  // var labelQty = Number(this.dataContent.record.label.qty);
  if (allQty.value > labelQty.value) {
    comMessageRef.value.showErrorMessage(`数量[${allQty.value}]不允许大于标签数量[${labelQty.value}]`, (res) => {
      allQty.value = labelQty.value
    })
  } else if (recommendQty.value != 0) {
    if (allQty.value > recommendQty.value) {
      if (props.settingParam.allowBiggerQty != null && props.settingParam.allowBiggerQty == 'TRUE') {
        callback()
      } else {
        comMessageRef.value.showErrorMessage(`数量[${allQty.value}]不允许大于推荐数量[${recommendQty.value}]`, (res) => {
          allQty.value = labelQty.value
        })
      }
    } else if (allQty.value < recommendQty.value) {
      if (props.settingParam.allowSmallerQty != null && props.settingParam.allowSmallerQty == 'TRUE') {
        callback()
      } else {
        comMessageRef.value.showErrorMessage(`数量[${allQty.value}]不允许小于推荐数量[${recommendQty.value}]`, (res) => {
          allQty.value = labelQty.value
        })
      }
    } else {
      callback()
    }
  } else {
    callback()
  }
}
const callback = () => {
  emit('confirm', Number(allQty.value))
  closeEditPopup()
}
// 传递给父类
const emit = defineEmits(['confirm'])
defineExpose({ openTaskEditPopup, openRecordEditPopup })
</script>

<style lang="scss">
.uni-popup .uni-popup__wrapper {
  width: 100% !important;
  padding: 30rpx;
}

.hide_border {
  button {
    border: none;
  }

  button::after {
    border: none;
  }
}

.title {
  font-size: 30rpx;
}
</style>