mom-web/src/views/erp/purchase/order/PurchaseOrderForm.vue

<template>
  <!-- 移动端布局 -->
  <el-drawer v-if="isMobile" v-model="dialogVisible" :title="dialogTitle" direction="rtl" size="100%" :close-on-press-escape="true" :destroy-on-close="true" :append-to-body="true" class="mobile-form-drawer">
    <div class="mobile-form" v-loading="formLoading">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-position="top" :disabled="disabled">
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">基本信息</div>
          <el-form-item label="订单单号" prop="no"><el-input disabled v-model="formData.no" placeholder="保存时自动生成" /></el-form-item>
          <el-form-item label="订单时间" prop="orderTime"><el-date-picker v-model="formData.orderTime" type="date" value-format="x" placeholder="选择订单时间" style="width:100%" /></el-form-item>
          <el-form-item label="关联请购单" prop="purchaseRequisitionNo"><el-input readonly><template #prefix><el-link v-if="formData.purchaseRequisitionId" type="primary" :underline="false" @click.stop="openRequisitionDetail">{{ formData.purchaseRequisitionNo }}</el-link></template><template #append><el-button @click="openRequisitionSelect"><Icon icon="ep:search" /></el-button></template></el-input></el-form-item>
          <el-form-item label="供应商" prop="supplierId"><el-select v-model="formData.supplierId" clearable filterable placeholder="请选择供应商" style="width:100%"><el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" /></el-select><div class="mobile-form__tip">*如果没有供应商请忽略此项填写</div></el-form-item>
          <el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" :rows="3" placeholder="请输入备注" /></el-form-item>
          <el-form-item label="附件" prop="fileUrl"><UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" /></el-form-item>
        </div>
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">订单产品清单</div>
          <PurchaseOrderItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
        </div>
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">费用信息</div>
          <el-form-item label="优惠率（%）" prop="discountPercent"><el-input-number v-model="formData.discountPercent" controls-position="right" :min="0" :precision="2" placeholder="请输入优惠率" style="width:100%" /></el-form-item>
          <el-form-item label="付款优惠" prop="discountPrice"><el-input disabled v-model="formData.discountPrice" :formatter="erpPriceInputFormatter" /></el-form-item>
          <el-form-item label="优惠后金额"><el-input disabled v-model="formData.totalPrice" :formatter="erpPriceInputFormatter" /></el-form-item>
          <el-form-item label="结算账户" prop="accountId"><el-select v-model="formData.accountId" clearable filterable placeholder="请选择结算账户" style="width:100%"><el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
          <el-form-item label="支付订金" prop="depositPrice"><el-input-number v-model="formData.depositPrice" controls-position="right" :min="0" :precision="2" placeholder="请输入支付订金" style="width:100%" /></el-form-item>
        </div>
      </el-form>
      <div class="mobile-form__footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
      </div>
    </div>
  </el-drawer>

  <!-- PC端布局 -->
  <Dialog v-else :title="dialogTitle" v-model="dialogVisible" width="1440">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading" :disabled="disabled">
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="订单单号" prop="no"><el-input disabled v-model="formData.no" placeholder="保存时自动生成" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="订单时间" prop="orderTime"><el-date-picker v-model="formData.orderTime" type="date" value-format="x" placeholder="选择订单时间" class="!w-1/1" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="关联请购单" prop="purchaseRequisitionNo"><el-input readonly><template #prefix><el-link v-if="formData.purchaseRequisitionNo && formData.purchaseRequisitionId" type="primary" :underline="false" @click.stop="openRequisitionDetail" class="requisition-link">{{ formData.purchaseRequisitionNo }}</el-link></template><template #append><el-button @click="openRequisitionSelect" :disabled="disabled"><Icon icon="ep:search" /> 选择</el-button></template></el-input></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="供应商" prop="supplierId"><el-select v-model="formData.supplierId" clearable filterable placeholder="请选择供应商" class="!w-1/1"><el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" /></el-select><div style="margin-top:4px;font-size:12px;color:var(--el-color-danger);">*如果没有供应商请忽略此项填写</div></el-form-item></el-col>
        <el-col :span="16"><el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" :rows="3" placeholder="请输入备注(如果有额外的内容填写，请在此文本框里面填写)" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="附件" prop="fileUrl"><UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" /></el-form-item></el-col>
      </el-row>
      <ContentWrap>
        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
          <el-tab-pane label="订单产品清单" name="item"><PurchaseOrderItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" /></el-tab-pane>
        </el-tabs>
      </ContentWrap>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="优惠率（%）" prop="discountPercent"><el-input-number v-model="formData.discountPercent" controls-position="right" :min="0" :precision="2" placeholder="请输入优惠率" class="!w-1/1" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="付款优惠" prop="discountPrice"><el-input disabled v-model="formData.discountPrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="优惠后金额"><el-input disabled v-model="formData.totalPrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="结算账户" prop="accountId"><el-select v-model="formData.accountId" clearable filterable placeholder="请选择结算账户" class="!w-1/1"><el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="支付订金" prop="depositPrice"><el-input-number v-model="formData.depositPrice" controls-position="right" :min="0" :precision="2" placeholder="请输入支付订金" class="!w-1/1" /></el-form-item></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

  <!-- 请购单选择弹窗 -->
  <PurchaseRequisitionTableSelect ref="requisitionSelectRef" @change="onRequisitionSelected" />
  <!-- 请购单详情弹窗 -->
  <PurchaseRequisitionForm ref="requisitionFormRef" />
</template>
<script setup lang="ts">
import { nextTick, computed } from 'vue'
import { PurchaseOrderApi, PurchaseOrderVO } from '@/api/erp/purchase/order'
import PurchaseOrderItemForm from './components/PurchaseOrderItemForm.vue'
import PurchaseRequisitionTableSelect from './components/PurchaseRequisitionTableSelect.vue'
import PurchaseRequisitionForm from '@/views/erp/purchaserequisition/PurchaseRequisitionForm.vue'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
import * as UserApi from '@/api/system/user'
import { AccountApi, AccountVO } from '@/api/erp/finance/account'
import { PurchaseRequisitionApi, PurchaseRequisition } from '@/api/erp/purchaserequisition'
import { useWindowSize } from '@vueuse/core'

/** ERP 采购订单表单 */
defineOptions({ name: 'PurchaseOrderForm' })

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

// 类型声明，确保表单有稳定的类型
interface PurchaseOrderItem {
  totalPrice?: number
  // 其余字段不强制约束
  [key: string]: any
}
interface PurchaseOrderFormModel {
  id?: number
  purchaseRequisitionId?: number
  purchaseRequisitionNo?: string
  supplierId?: number
  accountId?: number
  orderTime?: number
  remark?: string
  fileUrl: string
  discountPercent: number
  discountPrice: number
  totalPrice: number
  depositPrice: number
  items: PurchaseOrderItem[]
  no?: string
}

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
const formData = ref<PurchaseOrderFormModel>({
  id: undefined,
  purchaseRequisitionId: undefined,
  purchaseRequisitionNo: undefined,
  supplierId: undefined,
  accountId: undefined,
  orderTime: Date.now(),
  remark: undefined,
  fileUrl: '',
  discountPercent: 0,
  discountPrice: 0,
  totalPrice: 0,
  depositPrice: 0,
  items: [],
  no: undefined // 订单单号，后端返回
})
const formRules = reactive({
  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
  orderTime: [{ required: true, message: '订单时间不能为空', trigger: 'blur' }]
})
const disabled = computed(() => formType.value === 'detail')
const formRef = ref() // 表单 Ref
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const accountList = ref<AccountVO[]>([]) // 账户列表
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const requisitionSelectRef = ref() // 请购单选择弹窗Ref
const requisitionFormRef = ref() // 请购单详情弹窗Ref
const subTabsName = ref('item')
const itemFormRef = ref()

/** 计算 discountPrice、totalPrice 价格 */
watch(
  () => formData.value,
  (val) => {
    if (!val) {
      return
    }
    const totalPrice = (val.items || []).reduce(
      (prev: number, curr: PurchaseOrderItem) => prev + (curr.totalPrice || 0),
      0
    )
    const discountPrice =
      val.discountPercent != null
        ? erpPriceMultiply(totalPrice, val.discountPercent / 100.0) ?? 0
        : 0
    formData.value.discountPrice = discountPrice
    formData.value.totalPrice = totalPrice - discountPrice
  },
  { deep: true }
)

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  await nextTick()
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = (await PurchaseOrderApi.getPurchaseOrder(id)) as unknown as PurchaseOrderFormModel
    } finally {
      formLoading.value = false
    }
  }
  // 加载供应商列表
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  // 如果是新增，默认选择第一个供应商
  if (formType.value === 'create' && supplierList.value.length > 0 && !formData.value.supplierId) {
    formData.value.supplierId = supplierList.value[0].id
  }
  // 加载用户列表
  userList.value = await UserApi.getSimpleUserList()
  // 加载账户列表
  accountList.value = await AccountApi.getAccountSimpleList()
  const defaultAccount = accountList.value.find((item) => item.defaultStatus)
  if (formType.value === 'create' && defaultAccount) {
    formData.value.accountId = defaultAccount.id
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  await itemFormRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as PurchaseOrderVO
    if (formType.value === 'create') {
      await PurchaseOrderApi.createPurchaseOrder(data)
      message.success(t('common.createSuccess'))
    } else {
      await PurchaseOrderApi.updatePurchaseOrder(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 打开请购单选择弹窗 */
const openRequisitionSelect = () => {
  requisitionSelectRef.value?.open(formData.value.purchaseRequisitionNo)
}

/** 打开请购单详情弹窗 */
const openRequisitionDetail = () => {
  if (formData.value.purchaseRequisitionId) {
    requisitionFormRef.value?.open('detail', formData.value.purchaseRequisitionId)
  }
}

/** 请购单选择回调 */
const onRequisitionSelected = async (requisition: PurchaseRequisition) => {
  debugger;
  if (!requisition) {
    return
  }
  formData.value.purchaseRequisitionId = requisition.id
  formData.value.purchaseRequisitionNo = requisition.no

  // 自动填充供应商信息（直接从主表数据获取）
  if (requisition.supplierId) {
    formData.value.supplierId = requisition.supplierId
  }

  try {
    // 获取请购单详情（仅用于获取明细项）
    const requisitionDetail = await PurchaseRequisitionApi.getPurchaseRequisition(requisition.id)

    // 转换请购单明细为采购订单明细
    const orderItems = (requisitionDetail.items || []).map(requisitionItem => ({
      id: undefined,
      productId: requisitionItem.productId,
      productName: requisitionItem.productName,
      productUnitName: requisitionItem.productUnitName,
      productBarCode: undefined,
      productPrice: requisitionItem.productPrice,
      stockCount: undefined,
      count: requisitionItem.count,
      totalProductPrice: requisitionItem.totalPrice,
      taxPercent: 0,
      taxPrice: 0,
      totalPrice: requisitionItem.totalPrice,
      remark: requisitionItem.remark
    }))

    formData.value.items = orderItems

    // 如果请购单有备注，也带过来（优先使用主表数据）
    if (requisition.remark) {
      formData.value.remark = `基于请购单 ${requisition.no} 生成\n${requisition.remark}`
    } else if (requisitionDetail.remark) {
      formData.value.remark = `基于请购单 ${requisitionDetail.no} 生成\n${requisitionDetail.remark}`
    }
  } catch (error) {
    console.error('获取请购单详情失败', error)
    message.error('获取请购单详情失败')
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    purchaseRequisitionId: undefined,
    purchaseRequisitionNo: undefined,
    supplierId: undefined,
    accountId: undefined,
    orderTime: Date.now(),
    remark: undefined,
    fileUrl: '',
    discountPercent: 0,
    discountPrice: 0,
    totalPrice: 0,
    depositPrice: 0,
    items: []
  }
  formRef.value?.resetFields()
}

</script>

<style lang="scss" scoped>
.mobile-form {
  padding: 12px;
}
.mobile-form__section {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.mobile-form__section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-form__tip {
  margin-top: 4px;
  font-size: 12px;
  color: var(--el-color-danger);
}
.mobile-form__requisition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.mobile-form__requisition-empty {
  color: #909399;
  font-size: 13px;
}
.mobile-form__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 12px 16px;
  padding-bottom: calc(12px + constant(safe-area-inset-bottom));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  z-index: 10;
  margin: 0 -12px -12px;

  .el-button {
    flex: 1;
    height: 40px;
    font-size: 15px;
  }
}
</style>