sfms3.0-uniapp/src/mycomponents/qty/balanceQtyEdit.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">
                  <u-number-box v-model="stdCount" @change="calcQty"></u-number-box>
                  <!-- <uom :uom="dataContent.uom"></uom> -->
                </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">
                  <text>{{ Number(dataContent.packQty) }}</text>
                  <uom :uom="dataContent.uom"></uom>
                </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="true" type="number" @confirm="confirm()" @input="checkNum" :maxlength="maxlength" />
                  <uom :uom="dataContent.uom"></uom>
                </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">
                  <text class="text_recommend">{{ Number(dataContent.balanceQty) }}</text>
                  <uom :uom="dataContent.uom"></uom>
                </view>
              </view>
              <view class="split_line"></view>
              <view v-if="isShowStatus" class="uni-flex uni-row space-between title u-col-center" style="padding-left: 30rpx">
                <text>库存状态 : </text>
                <view class="uni-flex uni-row uni-center" style="align-items: center">
                  <balanceStatus ref="balanceStatus" :status="inventoryStatus" :allowEdit="allowEditStatus" @updateStatus="updateStatus"> </balanceStatus>
                </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, watch } from 'vue'
import uom from '@/mycomponents/qty/uom.vue'
import balanceStatus from '@/mycomponents/status/balanceStatus.vue'

const props = defineProps({
  title: {
    type: String,
    default: '编辑数量'
  },
  settingParam: {
    type: Object,
    default: {}
  },
  isShowStatus: {
    type: Boolean,
    default: true
  },
  allowEditStatus: {
    type: Boolean,
    default: false
  }
})
const allQty = ref(0)
const stdCount = ref(0)
const inventoryStatus = ref('')
const originalInventoryStatus = ref('')
const dataContent = ref({})
const maxlength = ref(10)
const show = ref(false)
const comMessageRef = ref()
const toInventoryStatus = ref()
watch(
  () => allQty.value,
  (newVal) => {
    if (newVal % Number(dataContent.value.packQty) > 0) {
      stdCount.value = Math.floor(Number(newVal) / Number(dataContent.value.packQty)) + 1
    } else {
      stdCount.value = Math.floor(Number(newVal) / Number(dataContent.value.packQty))
    }
  }
)
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 = (item, handleQty) => {
  dataContent.value = item
  inventoryStatus.value = dataContent.value.inventoryStatus
  originalInventoryStatus.value = dataContent.value.inventoryStatus
  toInventoryStatus.value = dataContent.value.toInventoryStatus
  allQty.value = handleQty
  setTimeout((res) => {
    show.value = true
  }, 500)
}
const closeEditPopup = () => {
  show.value = false
}
const confirm = () => {
  setValue()
}
const cancel = () => {
  dataContent.value.inventoryStatus = originalInventoryStatus.value
  closeEditPopup()
}
const calcQty = (e) => {
  if (e.value > 0) {
    allQty.value = e.value * Number(dataContent.value.packQty)
  }
}
const setValue = () => {
  const balanceQty = Number(dataContent.value.balanceQty)
  if (allQty.value == 0) {
    comMessageRef.value.showErrorMessage('数量必须大于0', (res) => {
      if (res) {
        allQty.value = balanceQty
      }
    })
  } else if (allQty.value > balanceQty) {
    comMessageRef.value.showErrorMessage(`数量[${allQty.value}]不允许大于库存数量[${balanceQty}]`, (res) => {
      if (res) {
        allQty.value = balanceQty
      }
    })
  } else {
    callback()
  }
}
const callback = () => {
  const qty = Number(allQty.value)
  dataContent.value.handleQty = qty
  if (props.allowEditStatus) {
    // 只有编辑了库存状态,才给库存状态赋值
    dataContent.value.toInventoryStatus = inventoryStatus.value
  }
  emit('confirm', qty)
  closeEditPopup()
}
const updateStatus = (value) => {
  inventoryStatus.value = value
}
// 传递给父类
const emit = defineEmits(['confirm', 'clearResult'])
defineExpose({ openEditPopup, closeEditPopup })
</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>