525 lines
23 KiB
Vue
525 lines
23 KiB
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="handlePrint" type="warning">
|
||
<Icon icon="ep:printer" class="mr-5px" /> 打 印
|
||
</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()
|
||
}
|
||
|
||
|
||
/** 打印当前页面数据 */
|
||
const handlePrint = () => {
|
||
// 获取供应商名称
|
||
const supplier = supplierList.value.find((item) => item.id === formData.value.supplierId)
|
||
const supplierName = supplier ? supplier.name : ''
|
||
// 获取结算账户名称
|
||
const account = accountList.value.find((item) => item.id === formData.value.accountId)
|
||
const accountName = account ? account.name : ''
|
||
// 格式化订单时间
|
||
const orderTime = formData.value.orderTime
|
||
? new Date(formData.value.orderTime).toLocaleDateString('zh-CN')
|
||
: ''
|
||
|
||
// 构建产品清单表格
|
||
let itemsTableHtml = ''
|
||
if (formData.value.items && formData.value.items.length > 0) {
|
||
// 计算合计
|
||
const totalCount = formData.value.items.reduce((sum, item) => sum + (item.count || 0), 0)
|
||
const totalProductPrice = formData.value.items.reduce((sum, item) => sum + (item.totalProductPrice || 0), 0)
|
||
const totalTaxPrice = formData.value.items.reduce((sum, item) => sum + (item.taxPrice || 0), 0)
|
||
const totalPriceSum = formData.value.items.reduce((sum, item) => sum + (item.totalPrice || 0), 0)
|
||
|
||
itemsTableHtml = `
|
||
<table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse; margin-top: 10px; font-size: 12px;">
|
||
<thead>
|
||
<tr style="background-color: #f5f5f5;">
|
||
<th>序号</th>
|
||
<th>产品名称</th>
|
||
<th>库存</th>
|
||
<th>条码</th>
|
||
<th>单位</th>
|
||
<th>数量</th>
|
||
<th>产品单价</th>
|
||
<th>金额</th>
|
||
<th>税率(%)</th>
|
||
<th>税额</th>
|
||
<th>税额合计</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
${formData.value.items
|
||
.map(
|
||
(item, index) => `
|
||
<tr>
|
||
<td style="text-align: center;">${index + 1}</td>
|
||
<td>${item.productName || ''}</td>
|
||
<td style="text-align: right;">${item.stockCount || 0}</td>
|
||
<td>${item.productBarCode || ''}</td>
|
||
<td style="text-align: center;">${item.productUnitName || ''}</td>
|
||
<td style="text-align: right;">${item.count || 0}</td>
|
||
<td style="text-align: right;">${item.productPrice || 0}</td>
|
||
<td style="text-align: right;">${item.totalProductPrice || 0}</td>
|
||
<td style="text-align: right;">${item.taxPercent || 0}</td>
|
||
<td style="text-align: right;">${item.taxPrice || 0}</td>
|
||
<td style="text-align: right;">${item.totalPrice || 0}</td>
|
||
<td>${item.remark || ''}</td>
|
||
</tr>
|
||
`
|
||
)
|
||
.join('')}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr style="background-color: #f9f9f9; font-weight: bold;">
|
||
<td style="text-align: center;">合计</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td style="text-align: right;">${totalCount}</td>
|
||
<td></td>
|
||
<td style="text-align: right;">${totalProductPrice}</td>
|
||
<td></td>
|
||
<td style="text-align: right;">${totalTaxPrice}</td>
|
||
<td style="text-align: right;">${totalPriceSum}</td>
|
||
<td></td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
`
|
||
}
|
||
|
||
// 构建打印内容
|
||
const printContent = `
|
||
<html>
|
||
<head>
|
||
<title>采购订单打印</title>
|
||
<style>
|
||
body { font-family: 'Microsoft YaHei', Arial, sans-serif; padding: 20px; }
|
||
h1 { text-align: center; margin-bottom: 20px; }
|
||
.info-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
|
||
.info-item { width: 33%; margin-bottom: 10px; }
|
||
.info-label { font-weight: bold; color: #666; }
|
||
.info-value { margin-left: 10px; }
|
||
.section-title { font-size: 16px; font-weight: bold; margin: 20px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
|
||
table { font-size: 14px; }
|
||
th, td { padding: 8px; text-align: left; }
|
||
@media print {
|
||
body { padding: 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>采购订单</h1>
|
||
<div class="info-row">
|
||
<div class="info-item"><span class="info-label">订单单号:</span><span class="info-value">${formData.value.no || '(保存后生成)'}</span></div>
|
||
<div class="info-item"><span class="info-label">订单时间:</span><span class="info-value">${orderTime}</span></div>
|
||
<div class="info-item"><span class="info-label">关联请购单:</span><span class="info-value">${formData.value.purchaseRequisitionNo || ''}</span></div>
|
||
<div class="info-item"><span class="info-label">供应商:</span><span class="info-value">${supplierName}</span></div>
|
||
<div class="info-item"><span class="info-label">结算账户:</span><span class="info-value">${accountName}</span></div>
|
||
<div class="info-item"><span class="info-label">支付订金:</span><span class="info-value">${formData.value.depositPrice || 0}</span></div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-item" style="width: 100%;"><span class="info-label">备注:</span><span class="info-value">${formData.value.remark || ''}</span></div>
|
||
</div>
|
||
<div class="section-title">订单产品清单</div>
|
||
${itemsTableHtml}
|
||
<div class="info-row" style="margin-top: 20px;">
|
||
<div class="info-item"><span class="info-label">优惠率(%):</span><span class="info-value">${formData.value.discountPercent || 0}</span></div>
|
||
<div class="info-item"><span class="info-label">付款优惠:</span><span class="info-value">${formData.value.discountPrice || 0}</span></div>
|
||
<div class="info-item"><span class="info-label">优惠后金额:</span><span class="info-value">${formData.value.totalPrice || 0}</span></div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
`
|
||
|
||
// 使用iframe打印，避免被浏览器拦截
|
||
const iframe = document.createElement('iframe')
|
||
iframe.style.position = 'absolute'
|
||
iframe.style.width = '0'
|
||
iframe.style.height = '0'
|
||
iframe.style.border = 'none'
|
||
iframe.style.left = '-9999px'
|
||
document.body.appendChild(iframe)
|
||
|
||
const iframeDoc = iframe.contentWindow?.document
|
||
if (iframeDoc) {
|
||
iframeDoc.open()
|
||
iframeDoc.write(printContent)
|
||
iframeDoc.close()
|
||
|
||
// 等待内容加载完成后打印
|
||
iframe.contentWindow?.focus()
|
||
setTimeout(() => {
|
||
iframe.contentWindow?.print()
|
||
// 打印完成后移除iframe
|
||
setTimeout(() => {
|
||
document.body.removeChild(iframe)
|
||
}, 1000)
|
||
}, 250)
|
||
}
|
||
}
|
||
|
||
|
||
</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>
|