first commit

src/views/erp/purchase/order/PurchaseOrderForm.vue

@@ -0,0 +1,438 @@
+<template>
+  <el-drawer
+    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">
+            <div class="mobile-form__requisition">
+              <el-link
+                v-if="formData.purchaseRequisitionNo && formData.purchaseRequisitionId"
+                type="primary"
+                :underline="false"
+                @click.stop="openRequisitionDetail"
+              >
+                {{ formData.purchaseRequisitionNo }}
+              </el-link>
+              <span v-else class="mobile-form__requisition-empty">未选择</span>
+              <el-button size="small" @click="openRequisitionSelect" :disabled="disabled">选择</el-button>
+            </div>
+          </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>
+
+  <!-- 请购单选择弹窗 -->
+  <PurchaseRequisitionTableSelect ref="requisitionSelectRef" @change="onRequisitionSelected" />
+  <!-- 请购单详情弹窗 -->
+  <PurchaseRequisitionForm ref="requisitionFormRef" />
+</template>
+<script setup lang="ts">
+import { nextTick } 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'
+
+/** ERP 销售订单表单 */
+defineOptions({ name: 'PurchaseOrderForm' })
+
+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 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>