shanxia2.0/miniprogram/pages/db/plans/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>

    <view class="db-form-section">
      <view class="db-form-item">
        <view class="db-form-label">计划号</view>
        <view class="db-form-value">{{ form.planNo || '系统自动生成' }}</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">往来单位</view>
        <view v-if="isView" class="db-form-value">{{ form.customerName || '--' }}</view>
        <view v-else class="db-form-value" @click="showCustomer = true">
          <text :class="{ ph: !form.customerName }">{{ form.customerName || '请选择往来单位' }}</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">{{ 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">计划开始时间</view>
        <view v-if="isView" class="db-form-value">{{ form.startDate || '--' }}</view>
        <picker v-else mode="date" :value="form.startDate" @change="(e) => (form.startDate = e.detail.value)">
          <view class="db-form-value">
            <text :class="{ ph: !form.startDate }">{{ form.startDate || '选择日期' }}</text>
            <text>›</text>
          </view>
        </picker>
      </view>

      <view class="db-form-item">
        <view class="db-form-label">计划结束时间</view>
        <view v-if="isView" class="db-form-value">{{ form.endDate || '--' }}</view>
        <picker v-else mode="date" :value="form.endDate" @change="(e) => (form.endDate = e.detail.value)">
          <view class="db-form-value">
            <text :class="{ ph: !form.endDate }">{{ form.endDate || '选择日期' }}</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.plannedQuantity ?? '--' }}</view>
        <db-field
          v-else
          v-model="form.plannedQuantity"
          type="digit"
          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" />
  </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 { planApi } 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'

const safeAreaStyle = getSafeAreaStyle()
const mode = ref('create')
const id = ref('')
const saving = ref(false)
const showCustomer = ref(false)
const showProduct = ref(false)
const productDisplay = ref('')

const form = reactive({
  planNo: '',
  planDate: formatYmd(),
  startDate: formatYmd(),
  endDate: '',
  businessType: '入库',
  productId: '',
  plannedQuantity: 0,
  customerName: '',
  remarks: ''
})

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.dbPlansList }) })
}

function onCustomer(item) {
  form.customerName = item.customerName
}

function onProduct(item) {
  form.productId = item.id
  productDisplay.value = item.productName
}

async function loadDetail() {
  if (!id.value) return
  const data = await planApi.get(id.value)
  Object.assign(form, {
    planNo: data.planNo || '',
    planDate: data.planDate || formatYmd(),
    startDate: data.startDate || '',
    endDate: data.endDate || '',
    businessType: data.businessType || '入库',
    productId: data.productId || '',
    plannedQuantity: data.plannedQuantity ?? 0,
    customerName: data.customerName || '',
    remarks: data.remarks || ''
  })
  productDisplay.value = data.product || ''
}

async function save() {
  if (!form.productId) {
    uni.showToast({ title: '请选择产品', icon: 'none' })
    return
  }
  if (!form.plannedQuantity) {
    uni.showToast({ title: '请输入计划量', icon: 'none' })
    return
  }
  saving.value = true
  try {
    const payload = {
      planNo: form.planNo || undefined,
      planDate: form.planDate || form.startDate || formatYmd(),
      startDate: form.startDate || undefined,
      endDate: form.endDate || undefined,
      businessType: form.businessType,
      productId: form.productId,
      plannedQuantity: Number(form.plannedQuantity),
      customerName: form.customerName || undefined,
      remarks: form.remarks || undefined
    }
    if (id.value) await planApi.update(id.value, payload)
    else await planApi.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 (id.value) {
    try {
      await loadDetail()
    } catch (e) {
      // handled
    }
  }
})
</script>

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