yavii/mom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PC端和手机端端双端适配

Browse Source
This commit is contained in:
如初
2026-03-14 10:22:48 +08:00
parent cb13784141
commit 5a1923d9ca
92 changed files with 9011 additions and 3149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/views/erp/purchase/order/PurchaseOrderForm.vue
View File

@@ -1,164 +1,30 @@
<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"
>
<!-- 移动端布局 -->
<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"
>
<!-- 基本信息 -->
<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="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>
<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>
<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>
@@ -166,13 +32,43 @@
</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 } from 'vue'
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'
@@ -182,10 +78,14 @@ 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 销售订单表单 */
/** ERP 采购订单表单 */
defineOptions({ name: 'PurchaseOrderForm' })
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@@ -243,7 +143,7 @@ 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 价格 */