shanxia2.0/miniprogram/pages/db/inventory/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.date || '--' }}</view>
        <picker v-else mode="date" :value="form.date" @change="(e) => (form.date = e.detail.value)">
          <view class="db-form-value">
            <text :class="{ ph: !form.date }">{{ form.date || '选择日期' }}</text>
            <text>›</text>
          </view>
        </picker>
      </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.partnerCompany || '--' }}</view>
        <view v-else class="db-form-value" @click="showCustomer = true">
          <text :class="{ ph: !form.partnerCompany }">{{ form.partnerCompany || '请选择往来单位' }}</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">{{ productDisplay || '--' }}</view>
        <view v-else class="db-form-value" @click="showProduct = true">
          <text :class="{ ph: !productDisplay }">{{ productDisplay || '请选择产品' }}</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.quantity ?? '--' }}</view>
        <db-field
          v-else
          v-model="form.quantity"
          type="digit"
          placeholder="请输入数量（默认32）"
          
        />
      </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.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">计划号</view>
        <view v-if="isView || planNoReadonly" 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" @click="save">保存</db-btn>
      <db-btn block plain style="margin-top:12px" @click="goBack">取消</db-btn>
    </view>

    <db-customer-picker :show="showCustomer" @update:show="(v) => (showCustomer = v)" @select="onCustomer" />
    <db-product-picker :show="showProduct" @update:show="(v) => (showProduct = v)" @select="onProduct" />
    <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 { inventoryApi } from '@/pages/db/api/db'
import { formatYmd } 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 showCustomer = ref(false)
const showProduct = ref(false)
const showVehicle = ref(false)
const productDisplay = ref('')
const planNoReadonly = ref(false)

const form = reactive({
  date: formatYmd(),
  partnerCompany: '',
  businessType: '入库',
  productId: '',
  quantity: 32,
  vehicleNo: '',
  planNo: '',
  remarks: '',
  purchasePlanId: undefined
})

const isView = computed(() => mode.value === 'view')
const isEdit = computed(() => mode.value === 'edit')
const title = computed(() => (isEdit.value ? '编辑出入库' : isView.value ? '查看出入库' : '新增出入库'))

function goBack() {
  uni.navigateBack({ fail: () => uni.redirectTo({ url: PAGE_PATHS.dbInventoryList }) })
}
function onCustomer(item) {
  form.partnerCompany = item.customerName
}
function onProduct(item) {
  form.productId = item.id
  productDisplay.value = item.productName
}
function onVehicle(plate) {
  form.vehicleNo = plate
}

async function loadDetail() {
  const data = await inventoryApi.get(id.value)
  Object.assign(form, {
    date: data.date || '',
    partnerCompany: data.partnerCompany || '',
    businessType: data.businessType || '入库',
    productId: data.productId || '',
    quantity: data.quantity ?? 0,
    vehicleNo: data.vehicleNo || '',
    planNo: data.planNo || '',
    remarks: data.remarks || '',
    purchasePlanId: data.purchasePlanId
  })
  productDisplay.value = data.product || ''
}

async function save() {
  if (!form.date || !form.partnerCompany || !form.productId || !form.vehicleNo) {
    uni.showToast({ title: '请完善必填项', icon: 'none' })
    return
  }
  saving.value = true
  try {
    const payload = {
      date: form.date,
      partnerCompany: form.partnerCompany,
      businessType: form.businessType,
      productId: form.productId,
      quantity: Number(form.quantity),
      vehicleNo: form.vehicleNo,
      planNo: form.planNo || undefined,
      remarks: form.remarks || undefined,
      purchasePlanId: form.purchasePlanId
    }
    if (id.value) await inventoryApi.update(id.value, payload)
    else await inventoryApi.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.planNo) {
    form.planNo = decodeURIComponent(q.planNo)
    planNoReadonly.value = true
    form.date = ''
  }
  if (q.product) productDisplay.value = decodeURIComponent(q.product)
  if (q.productId) form.productId = decodeURIComponent(q.productId)
  if (q.businessType) form.businessType = decodeURIComponent(q.businessType)
  if (q.customerName) form.partnerCompany = decodeURIComponent(q.customerName)
  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>