shanxia2.0/miniprogram/pages/db/weighing/detail.vue

<template>
  <view class="db-page">
    <view class="db-header" :style="safeAreaStyle">
      <view class="db-header__nav">
        <view class="db-header__left">
          <text class="db-header__back" @click="goBack">←</text>
          <text class="db-header__title">{{ title }}</text>
        </view>
        <view /><!-- 胶囊占位 -->
      </view>
    </view>

    <view class="db-form-section">
      <view class="db-form-item">
        <view class="db-form-label">车牌号 <text class="req">*</text></view>
        <view v-if="isView" class="db-form-value">{{ form.vehicleNo || '--' }}</view>
        <view v-else class="db-form-value" @click="showVehicle = true">
          <text :class="{ ph: !form.vehicleNo }">{{ form.vehicleNo || '请选择车牌号' }}</text>
          <text>›</text>
        </view>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">货物名称 <text class="req">*</text></view>
        <view v-if="isView" class="db-form-value">{{ cargoDisplay || '--' }}</view>
        <view v-else class="db-form-value" @click="showCargo = true">
          <text :class="{ ph: !cargoDisplay }">{{ cargoDisplay || '请选择货物名称' }}</text>
          <text>›</text>
        </view>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">业务类型 <text class="req">*</text></view>
        <db-radio-group v-model="form.businessType" :disabled="isView" />
      </view>

      <view class="db-form-item">
        <view class="db-form-label">供货单位 <text class="req">*</text></view>
        <view v-if="isView" class="db-form-value">{{ form.supplier || '--' }}</view>
        <view v-else class="db-form-value" @click="pickSupplier = true">
          <text :class="{ ph: !form.supplier }">{{ form.supplier || '请选择供货单位' }}</text>
          <text>›</text>
        </view>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">收货单位 <text class="req">*</text></view>
        <view v-if="isView" class="db-form-value">{{ form.consignee || '--' }}</view>
        <view v-else class="db-form-value" @click="pickConsignee = true">
          <text :class="{ ph: !form.consignee }">{{ form.consignee || '请选择收货单位' }}</text>
          <text>›</text>
        </view>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">毛重(kg)</view>
        <view v-if="isView" class="db-form-value">{{ displayWeight(form.grossWeight) }}</view>
        <db-field
          v-else
          v-model="form.grossWeight"
          type="digit"
          placeholder="请输入毛重"
          @change="onGross"
        />
      </view>

      <view class="db-form-item">
        <view class="db-form-label">毛重时间</view>
        <view v-if="isView" class="db-form-value">{{ form.grossWeightTime || '--' }}</view>
        <view v-else class="db-form-value" @click="fillGrossTime">
          <text :class="{ ph: !form.grossWeightTime }">{{ form.grossWeightTime || '点此填当前时间' }}</text>
        </view>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">皮重(kg)</view>
        <view v-if="isView" class="db-form-value">{{ displayWeight(form.tareWeight) }}</view>
        <db-field
          v-else
          v-model="form.tareWeight"
          type="digit"
          placeholder="请输入皮重"
          @change="onTare"
        />
      </view>

      <view class="db-form-item">
        <view class="db-form-label">皮重时间</view>
        <view v-if="isView" class="db-form-value">{{ form.tareWeightTime || '--' }}</view>
        <view v-else class="db-form-value" @click="fillTareTime">
          <text :class="{ ph: !form.tareWeightTime }">{{ form.tareWeightTime || '点此填当前时间' }}</text>
        </view>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">扣杂(kg)</view>
        <view v-if="isView" class="db-form-value">{{ form.deduction || 0 }}</view>
        <db-field
          v-else
          v-model="form.deduction"
          type="digit"
          placeholder="请输入扣杂"
          @change="onDeduction"
        />
      </view>

      <view class="db-form-item">
        <view class="db-form-label">净重(kg)</view>
        <view class="db-form-value">
          <text :style="{ color: netInvalid ? '#ee0a24' : '#111827' }">
            {{ canShowNet ? netWeight : '--' }}
          </text>
        </view>
        <view v-if="netInvalid" style="color: #ee0a24; font-size: 12px; margin-top: 4px">净重必须大于0</view>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">计划号</view>
        <view v-if="isView" class="db-form-value">{{ form.planNo || '--' }}</view>
        <db-field
          v-else
          v-model="form.planNo"
          placeholder="请输入计划号"
          
        />
      </view>

      <view class="db-form-item">
        <view class="db-form-label">备注</view>
        <view v-if="isView" class="db-form-value">{{ form.remarks || '--' }}</view>
        <db-field
          v-else
          v-model="form.remarks"
          type="textarea"
          autosize
          placeholder="请输入备注"
          
        />
      </view>
    </view>

    <view v-if="!isView" class="db-form-actions">
      <db-btn block type="primary" :loading="saving" :disabled="netInvalid" @click="save">保存</db-btn>
      <db-btn block plain style="margin-top:12px" @click="goBack">取消</db-btn>
    </view>

    <db-product-picker :show="showCargo" @update:show="(v) => (showCargo = v)" @select="onProduct" />
    <db-customer-picker :show="pickSupplier" @update:show="(v) => (pickSupplier = v)" @select="onSupplier" />
    <db-customer-picker :show="pickConsignee" @update:show="(v) => (pickConsignee = v)" @select="onConsignee" />
    <db-vehicle-picker :show="showVehicle" @update:show="(v) => (showVehicle = v)" @select="onVehicle" />
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { PAGE_PATHS } from '@/config/api'
import { getSafeAreaStyle } from '@/utils/safeArea'
import { weighingApi } from '@/pages/db/api/db'
import { nowYmdHms } from '@/pages/db/utils/dbDate'
import DbField from '@/components/db-ui/db-field.vue'
import DbBtn from '@/components/db-ui/db-btn.vue'
import DbRadioGroup from '@/components/db-ui/db-radio-group.vue'
import DbCustomerPicker from '@/components/db-customer-picker/db-customer-picker.vue'
import DbProductPicker from '@/components/db-product-picker/db-product-picker.vue'
import DbVehiclePicker from '@/components/db-vehicle-picker/db-vehicle-picker.vue'

const safeAreaStyle = getSafeAreaStyle()
const mode = ref('create')
const id = ref('')
const saving = ref(false)
const showVehicle = ref(false)
const showCargo = ref(false)
const pickSupplier = ref(false)
const pickConsignee = ref(false)
const cargoDisplay = ref('')

const form = reactive({
  vehicleNo: '',
  planNo: '',
  productId: '',
  businessType: '入库',
  supplier: '',
  consignee: '',
  grossWeight: '',
  grossWeightTime: '',
  tareWeight: '',
  tareWeightTime: '',
  deduction: 0,
  netWeight: 0,
  purchasePlanId: undefined,
  inboundOutboundId: undefined,
  remarks: ''
})

const isView = computed(() => mode.value === 'view')
const isEdit = computed(() => mode.value === 'edit')
const title = computed(() => (isEdit.value ? '编辑地磅单' : isView.value ? '查看地磅单' : '新增地磅单'))

const netWeight = computed(() => {
  const g = Number(form.grossWeight) || 0
  const t = Number(form.tareWeight) || 0
  const d = Number(form.deduction) || 0
  return Math.max(0, g - t - d)
})
const canShowNet = computed(() => Number(form.grossWeight) > 0 && Number(form.tareWeight) > 0)
const netInvalid = computed(() => canShowNet.value && netWeight.value <= 0)

function calcNet() {
  form.netWeight = netWeight.value
}
function displayWeight(v) {
  return Number(v) > 0 ? v : '--'
}
function onGross(v) {
  form.grossWeight = v
  if (Number(v) > 0 && !form.grossWeightTime) form.grossWeightTime = nowYmdHms()
  if (!(Number(v) > 0)) form.grossWeightTime = ''
  calcNet()
}
function onTare(v) {
  form.tareWeight = v
  if (Number(v) > 0 && !form.tareWeightTime) form.tareWeightTime = nowYmdHms()
  if (!(Number(v) > 0)) form.tareWeightTime = ''
  calcNet()
}
function onDeduction(v) {
  form.deduction = Number(v) || 0
  calcNet()
}
function fillGrossTime() {
  form.grossWeightTime = nowYmdHms()
}
function fillTareTime() {
  form.tareWeightTime = nowYmdHms()
}

function goBack() {
  uni.navigateBack({ fail: () => uni.redirectTo({ url: PAGE_PATHS.dbWeighingList }) })
}
function onVehicle(plate) {
  form.vehicleNo = plate
}
function onProduct(item) {
  form.productId = item.id
  cargoDisplay.value = item.productName
}
function onSupplier(item) {
  form.supplier = item.customerName
}
function onConsignee(item) {
  form.consignee = item.customerName
}

async function loadDetail() {
  const data = await weighingApi.get(id.value)
  Object.assign(form, {
    vehicleNo: data.vehicleNo || '',
    planNo: data.planNo || '',
    productId: data.productId || '',
    businessType: data.businessType || '入库',
    supplier: data.supplier || '',
    consignee: data.consignee || '',
    grossWeight: Number(data.grossWeight) > 0 ? data.grossWeight : '',
    grossWeightTime: Number(data.grossWeight) > 0 ? data.grossWeightTime || '' : '',
    tareWeight: Number(data.tareWeight) > 0 ? data.tareWeight : '',
    tareWeightTime: Number(data.tareWeight) > 0 ? data.tareWeightTime || '' : '',
    deduction: data.deduction ?? 0,
    netWeight: data.netWeight ?? 0,
    purchasePlanId: data.purchasePlanId,
    inboundOutboundId: data.inboundOutboundId,
    remarks: data.remarks || ''
  })
  cargoDisplay.value = data.cargoName || ''
}

async function save() {
  if (!form.vehicleNo || !form.productId || !form.supplier || !form.consignee) {
    uni.showToast({ title: '请完善必填项', icon: 'none' })
    return
  }
  if (netInvalid.value) {
    uni.showToast({ title: '净重必须大于0', icon: 'none' })
    return
  }
  calcNet()
  saving.value = true
  try {
    const gross = Number(form.grossWeight) || 0
    const tare = Number(form.tareWeight) || 0
    const payload = {
      vehicleNo: form.vehicleNo,
      planNo: form.planNo || undefined,
      productId: form.productId,
      businessType: form.businessType,
      supplier: form.supplier,
      consignee: form.consignee,
      grossWeight: gross,
      grossWeightTime: gross > 0 ? form.grossWeightTime || nowYmdHms() : '',
      tareWeight: tare,
      tareWeightTime: tare > 0 ? form.tareWeightTime || nowYmdHms() : '',
      deduction: Number(form.deduction) || 0,
      netWeight: gross > 0 && tare > 0 ? form.netWeight : 0,
      purchasePlanId: form.purchasePlanId,
      inboundOutboundId: form.inboundOutboundId,
      remarks: form.remarks || undefined
    }
    if (id.value) await weighingApi.update(id.value, payload)
    else await weighingApi.create(payload)
    uni.showToast({ title: '保存成功', icon: 'success' })
    setTimeout(goBack, 500)
  } finally {
    saving.value = false
  }
}

onLoad(async (q) => {
  mode.value = q.mode || (q.id ? 'edit' : 'create')
  id.value = q.id || ''
  if (q.vehicleNo) form.vehicleNo = decodeURIComponent(q.vehicleNo)
  if (q.productId) form.productId = decodeURIComponent(q.productId)
  if (q.cargoName) cargoDisplay.value = decodeURIComponent(q.cargoName)
  if (q.businessType) form.businessType = decodeURIComponent(q.businessType)
  if (q.supplier) form.supplier = decodeURIComponent(q.supplier)
  if (q.consignee) form.consignee = decodeURIComponent(q.consignee)
  if (q.planNo) form.planNo = decodeURIComponent(q.planNo)
  if (q.inboundOutboundId) form.inboundOutboundId = decodeURIComponent(q.inboundOutboundId)
  if (q.purchasePlanId) form.purchasePlanId = decodeURIComponent(q.purchasePlanId)
  if (id.value) {
    try {
      await loadDetail()
    } catch (e) {
      // handled
    }
  }
})
</script>

<style lang="scss">
@import '@/styles/db-theme.scss';
</style>