采购管理适配手机端问题修改

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

@@ -32,20 +32,48 @@
               style="width: 100%"
             />
           </el-form-item>
+
           <el-form-item label="关联请购单" prop="purchaseRequisitionNo">
-            <div class="mobile-form__requisition">
+            <el-input readonly>
+              <template #prefix>
                 <el-link
-                v-if="formData.purchaseRequisitionNo && formData.purchaseRequisitionId"
+                  v-if="formData.purchaseRequisitionId"
                   type="primary"
                   :underline="false"
                   @click.stop="openRequisitionDetail"
                 >
                   {{ formData.purchaseRequisitionNo }}
                 </el-link>
-              <span v-else class="mobile-form__requisition-empty">未选择</span>
+              </template>
-              <el-button size="small" @click="openRequisitionSelect" :disabled="disabled">选择</el-button>
+              <template #append>
-            </div>
+                <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"

src/views/erp/purchase/return/PurchaseReturnForm.vue

@@ -1,39 +1,46 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1440">
+  <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-width="100px"
+        label-position="top"
-      v-loading="formLoading"
         :disabled="disabled"
       >
-      <el-row :gutter="20">
+        <!-- 基本信息 -->
-        <el-col :span="8">
+        <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-col>
-        <el-col :span="8">
           <el-form-item label="退货时间" prop="returnTime">
             <el-date-picker
               v-model="formData.returnTime"
               type="date"
               value-format="x"
               placeholder="选择退货时间"
-              class="!w-1/1"
+              style="width: 100%"
             />
           </el-form-item>
-        </el-col>
+
-        <el-col :span="8">
           <el-form-item label="关联订单" prop="orderNo">
             <el-input readonly>
               <template #prefix>
                 <el-link
                   v-if="formData.orderId"
                   type="primary"
-                  @click.stop="openPurchaseOrderDetail"
                   :underline="false"
+                  @click.stop="openPurchaseOrderDetail"
                 >
                   {{ formData.orderNo }}
                 </el-link>
@@ -45,8 +52,6 @@
               </template>
             </el-input>
           </el-form-item>
-        </el-col>
-        <el-col :span="8">
           <el-form-item label="供应商" prop="supplierId">
             <el-select
               v-model="formData.supplierId"
@@ -54,7 +59,7 @@
               filterable
               disabled
               placeholder="请选择供应商"
-              class="!w-1/1"
+              style="width: 100%"
             >
               <el-option
                 v-for="item in supplierList"
@@ -64,37 +69,28 @@
               />
             </el-select>
           </el-form-item>
-        </el-col>
-        <el-col :span="16">
           <el-form-item label="备注" prop="remark">
             <el-input
               type="textarea"
               v-model="formData.remark"
-              :rows="1"
+              :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>
+        </div>
-      </el-row>
+
-      <!-- 子表的表单 -->
+        <!-- 产品清单 -->
-      <ContentWrap>
+        <div class="mobile-form__section">
-        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <div class="mobile-form__section-title">退货产品清单</div>
-          <el-tab-pane label="退货产品清单" name="item">
+          <PurchaseReturnItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
-            <PurchaseReturnItemForm
+        </div>
-              ref="itemFormRef"
+
-              :items="formData.items"
+        <!-- 费用信息 -->
-              :disabled="disabled"
+        <div class="mobile-form__section">
-            />
+          <div class="mobile-form__section-title">费用信息</div>
-          </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"
@@ -102,29 +98,12 @@
               :min="0"
               :precision="4"
               placeholder="请输入优惠率"
-              class="!w-1/1"
+              style="width: 100%"
             />
           </el-form-item>
-        </el-col>
-        <el-col :span="8">
           <el-form-item label="退款优惠" prop="discountPrice">
-            <el-input
+            <el-input disabled v-model="formData.discountPrice" :formatter="erpPriceInputFormatter" />
-              disabled
-              v-model="formData.discountPrice"
-              :formatter="erpPriceInputFormatter"
-            />
           </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="优惠后金额">
-            <el-input
-              disabled
-              :model-value="formData.totalPrice - formData.otherPrice"
-              :formatter="erpPriceInputFormatter"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
           <el-form-item label="其它费用" prop="otherPrice">
             <el-input-number
               v-model="formData.otherPrice"
@@ -132,18 +111,19 @@
               :min="0"
               :precision="4"
               placeholder="请输入其它费用"
-              class="!w-1/1"
+              style="width: 100%"
             />
           </el-form-item>
-        </el-col>
+          <el-form-item label="优惠后金额">
-        <el-col :span="8">
+            <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="请选择结算账户"
-              class="!w-1/1"
+              style="width: 100%"
             >
               <el-option
                 v-for="item in accountList"
@@ -153,21 +133,18 @@
               />
             </el-select>
           </el-form-item>
-        </el-col>
+        </div>
-        <el-col :span="8">
-          <el-form-item label="应退金额" prop="totalPrice">
-            <el-input disabled v-model="formData.totalPrice" :formatter="erpPriceInputFormatter" />
-          </el-form-item>
-        </el-col>
-      </el-row>
       </el-form>
-    <template #footer>
+
+      <!-- 底部操作按钮 -->
+      <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>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
-    </template>
+    </div>
-  </Dialog>
+  </el-drawer>
 
   <!-- 可退货的订单列表 -->
   <PurchaseOrderReturnEnableList
@@ -178,7 +155,9 @@
   <!-- 采购订单详情弹窗 -->
   <PurchaseOrderForm ref="purchaseOrderFormRef" />
 </template>
+
 <script setup lang="ts">
+import { ref, reactive, computed, watch, nextTick } from 'vue'
 import { PurchaseReturnApi, PurchaseReturnVO } from '@/api/erp/purchase/return'
 import PurchaseReturnItemForm from './components/PurchaseReturnItemForm.vue'
 import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
@@ -189,18 +168,20 @@ import PurchaseOrderForm from '@/views/erp/purchase/order/PurchaseOrderForm.vue'
 import { PurchaseOrderVO } from '@/api/erp/purchase/order'
 import * as UserApi from '@/api/system/user'
 
-/** ERP 采购退货表单 */
 defineOptions({ name: 'PurchaseReturnForm' })
+const { t } = useI18n()
+const message = useMessage()
 
-const { t } = useI18n() // 国际化
+/** 弹窗显示 */
-const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
 
-const dialogVisible = ref(false) // 弹窗的是否展示
+/** 表单数据 */
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
 const formData = ref({
   id: undefined,
+  orderId: undefined,
   supplierId: undefined,
   accountId: undefined,
   returnTime: undefined,
@@ -212,35 +193,34 @@ const formData = ref({
   otherPrice: 0,
   orderNo: undefined,
   items: [],
-  no: undefined // 退货单号，后端返回
+  no: undefined
 })
+
+/** 表单验证 */
 const formRules = reactive({
   supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
   returnTime: [{ 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[]>([]) // 用户列表
 
-/** 子表的表单 */
+/** ref */
-const subTabsName = ref('item')
+const formRef = ref() // el-form
 const itemFormRef = ref()
+const supplierList = ref<SupplierVO[]>([])
+const accountList = ref<AccountVO[]>([])
+const userList = ref<UserApi.UserVO[]>([])
 
-/** 计算 discountPrice、totalPrice 价格 */
+/** 计算价格 */
 watch(
   () => formData.value,
   (val) => {
-    if (!val) {
+    if (!val) return
-      return
+    const totalItemPrice = (val.items || []).reduce((sum, item) => sum + (item.totalPrice || 0), 0)
-    }
+    const discountPrice = erpPriceMultiply(totalItemPrice, (val.discountPercent || 0) / 100) || 0
-    // 计算
-    const totalPrice = val.items.reduce((prev, curr) => prev + curr.totalPrice, 0)
-    const discountPrice =
-      val.discountPercent != null ? erpPriceMultiply(totalPrice, val.discountPercent / 100.0) : 0
     formData.value.discountPrice = discountPrice
-    formData.value.totalPrice = totalPrice - discountPrice + val.otherPrice
+    formData.value.totalPrice = totalItemPrice - discountPrice + (val.otherPrice || 0)
   },
   { deep: true }
 )
@@ -251,7 +231,6 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -260,35 +239,28 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
-  // 加载供应商列表
   supplierList.value = await SupplierApi.getSupplierSimpleList()
-  // 加载用户列表
-  userList.value = await UserApi.getSimpleUserList()
-  // 加载账户列表
   accountList.value = await AccountApi.getAccountSimpleList()
+  userList.value = await UserApi.getSimpleUserList()
   const defaultAccount = accountList.value.find((item) => item.defaultStatus)
-  if (defaultAccount) {
+  if (defaultAccount) formData.value.accountId = defaultAccount.id
-    formData.value.accountId = defaultAccount.id
 }
-}
+defineExpose({ open })
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-/** 打开【可退货的订单列表】弹窗 */
+/** 打开可退货订单列表 */
-const purchaseOrderReturnEnableListRef = ref() // 可退货的订单列表 Ref
+const purchaseOrderReturnEnableListRef = ref()
 const openPurchaseOrderReturnEnableList = () => {
-  purchaseOrderReturnEnableListRef.value.open()
+  purchaseOrderReturnEnableListRef.value?.open()
 }
 
-/** 打开【采购订单详情】弹窗 */
+/** 打开采购订单详情 */
 const purchaseOrderFormRef = ref()
 const openPurchaseOrderDetail = () => {
-  if (formData.value.orderId) {
+  if (formData.value.orderId) purchaseOrderFormRef.value?.open('detail', formData.value.orderId)
-    purchaseOrderFormRef.value.open('detail', formData.value.orderId)
-  }
 }
 
+/** 订单选择回调 */
 const handlePurchaseOrderChange = (order: PurchaseOrderVO) => {
-  // 将订单设置到退货单
   formData.value.orderId = order.id
   formData.value.orderNo = order.no
   formData.value.supplierId = order.supplierId
@@ -296,22 +268,21 @@ const handlePurchaseOrderChange = (order: PurchaseOrderVO) => {
   formData.value.discountPercent = order.discountPercent
   formData.value.remark = order.remark
   formData.value.fileUrl = order.fileUrl
-  // 将订单项设置到退货单项
+
-  order.items.forEach((item) => {
+  // 处理订单明细
+  order.items.forEach(item => {
     item.count = item.inCount - item.returnCount
     item.orderItemId = item.id
     item.id = undefined
   })
-  formData.value.items = order.items.filter((item) => item.count > 0)
+  formData.value.items = order.items.filter(item => item.count > 0)
 }
 
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success'])
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
   await itemFormRef.value.validate()
-  // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as PurchaseReturnVO
@@ -323,7 +294,6 @@ const submitForm = async () => {
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
-    // 发送操作成功的事件
     emit('success')
   } finally {
     formLoading.value = false
@@ -334,17 +304,66 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
+    orderId: undefined,
     supplierId: undefined,
     accountId: undefined,
     returnTime: undefined,
     remark: undefined,
-    fileUrl: undefined,
+    fileUrl: '',
     discountPercent: 0,
     discountPrice: 0,
     totalPrice: 0,
     otherPrice: 0,
-    items: []
+    orderNo: undefined,
+    items: [],
+    no: undefined
   }
   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__requisition {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.mobile-form__footer {
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  padding: 12px 16px;
+  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>

src/views/erp/purchase/return/components/PurchaseReturnItemForm.vue

@@ -4,24 +4,41 @@
     :model="formData"
     :rules="formRules"
     v-loading="formLoading"
-    label-width="0px"
+    label-position="top"
     :inline-message="true"
     :disabled="disabled"
   >
-    <el-table :data="formData" show-summary :summary-method="getSummaries" class="-mt-10px">
+    <div class="mobile-item-list">
-      <el-table-column label="序号" type="index" align="center" width="60" />
+      <div
-      <el-table-column label="仓库名称" min-width="125">
+        v-for="(row, $index) in formData"
-        <template #default="{ row, $index }">
+        :key="$index"
-          <el-form-item
+        class="mobile-item-card"
-            :prop="`${$index}.warehouseId`"
-            :rules="formRules.warehouseId"
-            class="mb-0px!"
       >
+        <!-- 卡片头部 -->
+        <div class="mobile-item-card__header">
+          <span class="mobile-item-card__index">#{{ $index + 1 }}</span>
+          <span class="mobile-item-card__name">{{ row.productName || '未选择产品' }}</span>
+          <el-button
+            :disabled="formData.length === 1 || disabled"
+            type="danger"
+            link
+            size="small"
+            @click="handleDelete($index)"
+          >
+            删除
+          </el-button>
+        </div>
+
+        <!-- 卡片内容 -->
+        <div class="mobile-item-card__body">
+          <!-- 仓库 -->
+          <el-form-item :prop="`${$index}.warehouseId`" :rules="formRules.warehouseId" label="仓库">
             <el-select
               v-model="row.warehouseId"
               clearable
               filterable
               placeholder="请选择仓库"
+              style="width: 100%"
               @change="onChangeWarehouse($event, row)"
             >
               <el-option
@@ -32,234 +49,194 @@
               />
             </el-select>
           </el-form-item>
-        </template>
+
-      </el-table-column>
+          <!-- 产品名称 -->
-      <el-table-column label="产品名称" min-width="180">
+          <div class="mobile-item-card__info-row">
-        <template #default="{ row }">
+            <span class="mobile-item-card__info-label">产品名称</span>
-          <el-form-item class="mb-0px!">
+            <span class="mobile-item-card__info-value">{{ row.productName || '-' }}</span>
-            <el-input disabled v-model="row.productName" />
+          </div>
-          </el-form-item>
+
-        </template>
+          <!-- 库存 -->
-      </el-table-column>
+          <div class="mobile-item-card__info-row">
-      <el-table-column label="库存" min-width="100">
+            <span class="mobile-item-card__info-label">库存</span>
-        <template #default="{ row }">
+            <span class="mobile-item-card__info-value">{{ erpCountInputFormatter(row.stockCount) }}</span>
-          <el-form-item class="mb-0px!">
+          </div>
-            <el-input disabled v-model="row.stockCount" :formatter="erpCountInputFormatter" />
+
-          </el-form-item>
+          <!-- 条码 -->
-        </template>
+          <div class="mobile-item-card__info-row">
-      </el-table-column>
+            <span class="mobile-item-card__info-label">条码</span>
-      <el-table-column label="条码" min-width="150">
+            <span class="mobile-item-card__info-value">{{ row.productBarCode || '-' }}</span>
-        <template #default="{ row }">
+          </div>
-          <el-form-item class="mb-0px!">
+
-            <el-input disabled v-model="row.productBarCode" />
+          <!-- 单位 -->
-          </el-form-item>
+          <div class="mobile-item-card__info-row">
-        </template>
+            <span class="mobile-item-card__info-label">单位</span>
-      </el-table-column>
+            <span class="mobile-item-card__info-value">{{ row.productUnitName || '-' }}</span>
-      <el-table-column label="单位" min-width="80">
+          </div>
-        <template #default="{ row }">
+
-          <el-form-item class="mb-0px!">
+          <!-- 已出库 -->
-            <el-input disabled v-model="row.productUnitName" />
+          <div class="mobile-item-card__info-row" v-if="row.inCount != null">
-          </el-form-item>
+            <span class="mobile-item-card__info-label">已出库</span>
-        </template>
+            <span class="mobile-item-card__info-value">{{ erpCountInputFormatter(row.inCount) }}</span>
-      </el-table-column>
+          </div>
-      <el-table-column
+
-        label="已出库"
+          <!-- 已退货 -->
-        fixed="right"
+          <div class="mobile-item-card__info-row" v-if="row.returnCount != null">
-        min-width="80"
+            <span class="mobile-item-card__info-label">已退货</span>
-        v-if="formData[0]?.inCount != null"
+            <span class="mobile-item-card__info-value">{{ erpCountInputFormatter(row.returnCount) }}</span>
-      >
+          </div>
-        <template #default="{ row }">
+
-          <el-form-item class="mb-0px!">
+          <!-- 数量 & 单价 -->
-            <el-input disabled v-model="row.inCount" :formatter="erpCountInputFormatter" />
+          <div class="mobile-item-card__input-group">
-          </el-form-item>
+            <el-form-item label="数量" :prop="`${$index}.count`" :rules="formRules.count">
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="已退货"
-        fixed="right"
-        min-width="80"
-        v-if="formData[0]?.returnCount != null"
-      >
-        <template #default="{ row }">
-          <el-form-item class="mb-0px!">
-            <el-input disabled v-model="row.returnCount" :formatter="erpCountInputFormatter" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="数量" prop="count" fixed="right" min-width="140">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.count`" :rules="formRules.count" class="mb-0px!">
               <el-input-number
                 v-model="row.count"
                 controls-position="right"
                 :min="0.0001"
                 :precision="4"
-              class="!w-100%"
+                style="width: 100%"
               />
             </el-form-item>
-        </template>
+            <el-form-item label="单价" :prop="`${$index}.productPrice`">
-      </el-table-column>
-      <el-table-column label="产品单价" fixed="right" min-width="120">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.productPrice`" class="mb-0px!">
               <el-input-number
                 v-model="row.productPrice"
                 controls-position="right"
-              :min="0.0001"
+                :min="0"
                 :precision="4"
-              class="!w-100%"
+                style="width: 100%"
               />
             </el-form-item>
-        </template>
+          </div>
-      </el-table-column>
+
-      <el-table-column label="金额" prop="totalProductPrice" fixed="right" min-width="100">
+          <!-- 金额 -->
-        <template #default="{ row, $index }">
+          <div class="mobile-item-card__info-row">
-          <el-form-item :prop="`${$index}.totalProductPrice`" class="mb-0px!">
+            <span class="mobile-item-card__info-label">金额</span>
-            <el-input
+            <span class="mobile-item-card__info-value">{{ erpPriceInputFormatter(row.totalProductPrice) }}</span>
-              disabled
+          </div>
-              v-model="row.totalProductPrice"
+
-              :formatter="erpPriceInputFormatter"
+          <!-- 税率 -->
-            />
+          <div class="mobile-item-card__input-group">
-          </el-form-item>
+            <el-form-item label="税率（%）" :prop="`${$index}.taxPercent`">
-        </template>
-      </el-table-column>
-      <el-table-column label="税率（%）" fixed="right" min-width="115">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.taxPercent`" class="mb-0px!">
               <el-input-number
                 v-model="row.taxPercent"
                 controls-position="right"
                 :min="0"
                 :precision="4"
-              class="!w-100%"
+                style="width: 100%"
               />
             </el-form-item>
-        </template>
+          </div>
-      </el-table-column>
+
-      <el-table-column label="税额" prop="taxPrice" fixed="right" min-width="120">
+          <!-- 税额 -->
-        <template #default="{ row, $index }">
+          <div class="mobile-item-card__info-row">
-          <el-form-item :prop="`${$index}.taxPrice`" class="mb-0px!">
+            <span class="mobile-item-card__info-label">税额</span>
-            <el-form-item :prop="`${$index}.taxPrice`" class="mb-0px!">
+            <span class="mobile-item-card__info-value">{{ erpPriceInputFormatter(row.taxPrice) }}</span>
-              <el-input disabled v-model="row.taxPrice" :formatter="erpPriceInputFormatter" />
+          </div>
-            </el-form-item>
+
-          </el-form-item>
+          <!-- 税额合计 -->
-        </template>
+          <div class="mobile-item-card__info-row mobile-item-card__info-row--highlight">
-      </el-table-column>
+            <span class="mobile-item-card__info-label">税额合计</span>
-      <el-table-column label="税额合计" prop="totalPrice" fixed="right" min-width="100">
+            <span class="mobile-item-card__info-value mobile-item-card__info-value--bold">{{ erpPriceInputFormatter(row.totalPrice) }}</span>
-        <template #default="{ row, $index }">
+          </div>
-          <el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!">
+
-            <el-input disabled v-model="row.totalPrice" :formatter="erpPriceInputFormatter" />
+          <!-- 备注 -->
-          </el-form-item>
+          <el-form-item label="备注" :prop="`${$index}.remark`">
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" min-width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.remark`" class="mb-0px!">
             <el-input v-model="row.remark" placeholder="请输入备注" />
           </el-form-item>
-        </template>
+        </div>
-      </el-table-column>
+      </div>
-      <el-table-column align="center" fixed="right" label="操作" width="60">
+
-        <template #default="{ $index }">
+      <!-- 合计 -->
-          <el-button :disabled="formData.length === 1" @click="handleDelete($index)" link>
+      <div class="mobile-item-summary" v-if="formData.length > 0">
-            —
+        <div class="mobile-item-summary__row">
-          </el-button>
+          <span>合计数量</span>
-        </template>
+          <span>{{ erpCountInputFormatter(summaryData.count) }}</span>
-      </el-table-column>
+        </div>
-    </el-table>
+        <div class="mobile-item-summary__row">
+          <span>合计金额</span>
+          <span>{{ erpPriceInputFormatter(summaryData.totalProductPrice) }}</span>
+        </div>
+        <div class="mobile-item-summary__row">
+          <span>合计税额</span>
+          <span>{{ erpPriceInputFormatter(summaryData.taxPrice) }}</span>
+        </div>
+        <div class="mobile-item-summary__row mobile-item-summary__row--total">
+          <span>税额合计</span>
+          <span>{{ erpPriceInputFormatter(summaryData.totalPrice) }}</span>
+        </div>
+      </div>
+    </div>
   </el-form>
 </template>
-<script setup lang="ts">
-import { StockApi } from '@/api/erp/stock/stock'
-import {
-  erpCountInputFormatter,
-  erpPriceInputFormatter,
-  erpPriceMultiply,
-  getSumValue
-} from '@/utils'
-import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
 
-const props = defineProps<{
+<script setup lang="ts">
-  items: undefined
+import { ref, reactive, watch, onMounted, computed } from 'vue'
-  disabled: false
+import { StockApi } from '@/api/erp/stock/stock'
-}>()
+import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
-const formLoading = ref(false) // 表单的加载中
+import { erpCountInputFormatter, erpPriceInputFormatter, erpPriceMultiply, getSumValue } from '@/utils'
+
+const props = defineProps<{ items: any; disabled: boolean }>()
 const formData = ref([])
+const formLoading = ref(false)
+const warehouseList = ref<WarehouseVO[]>([])
+const defaultWarehouse = ref<WarehouseVO>(undefined)
+const formRef = ref<any>(null)
+
 const formRules = reactive({
   warehouseId: [{ required: true, message: '仓库不能为空', trigger: 'blur' }],
   productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
   count: [{ required: true, message: '产品数量不能为空', trigger: 'blur' }]
 })
-const formRef = ref([]) // 表单 Ref
-const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
-const defaultWarehouse = ref<WarehouseVO>(undefined) // 默认仓库
 
-/** 初始化设置出库项 */
+// 初始化
 watch(
   () => props.items,
   async (val) => {
+    if (!val) return
     val.forEach((item) => {
-      if (item.warehouseId == null) {
+      if (!item.warehouseId) item.warehouseId = defaultWarehouse.value?.id
-        item.warehouseId = defaultWarehouse.value?.id
+      if (item.stockCount === null && item.warehouseId != null) setStockCount(item)
-      }
-      if (item.stockCount === null && item.warehouseId != null) {
-        setStockCount(item)
-      }
     })
     formData.value = val
   },
   { immediate: true }
 )
 
-/** 监听合同产品变化，计算合同产品总价 */
+// 自动计算金额
 watch(
   () => formData.value,
   (val) => {
-    if (!val || val.length === 0) {
+    if (!val) return
-      return
-    }
-    // 循环处理
     val.forEach((item) => {
       item.totalProductPrice = erpPriceMultiply(item.productPrice, item.count)
-      item.taxPrice = erpPriceMultiply(item.totalProductPrice, item.taxPercent / 100.0)
+      item.taxPrice = erpPriceMultiply(item.totalProductPrice, item.taxPercent / 100)
-      if (item.totalProductPrice != null) {
       item.totalPrice = item.totalProductPrice + (item.taxPrice || 0)
-      } else {
-        item.totalPrice = undefined
-      }
     })
   },
   { deep: true }
 )
 
-/** 合计 */
+// 合计
-const getSummaries = (param: SummaryMethodProps) => {
+const summaryData = computed(() =>
-  const { columns, data } = param
+  formData.value.reduce(
-  const sums: string[] = []
+    (acc, item) => {
-  columns.forEach((column, index: number) => {
+      acc.count += Number(item.count || 0)
-    if (index === 0) {
+      acc.totalProductPrice += Number(item.totalProductPrice || 0)
-      sums[index] = '合计'
+      acc.taxPrice += Number(item.taxPrice || 0)
-      return
+      acc.totalPrice += Number(item.totalPrice || 0)
-    }
+      return acc
-    if (['count', 'totalProductPrice', 'taxPrice', 'totalPrice'].includes(column.property)) {
+    },
-      const sum = getSumValue(data.map((item) => Number(item[column.property])))
+    { count: 0, totalProductPrice: 0, taxPrice: 0, totalPrice: 0 }
-      sums[index] =
+  )
-        column.property === 'count' ? erpCountInputFormatter(sum) : erpPriceInputFormatter(sum)
+)
-    } else {
-      sums[index] = ''
-    }
-  })
 
-  return sums
+// 新增/删除/仓库切换
-}
-
-/** 新增按钮操作 */
 const handleAdd = () => {
-  const row = {
+  formData.value.push({
     id: undefined,
     productId: undefined,
-    productUnitName: undefined, // 产品单位
+    productUnitName: undefined,
-    productBarCode: undefined, // 产品条码
+    productBarCode: undefined,
     productPrice: undefined,
     stockCount: undefined,
     count: 1,
@@ -268,33 +245,45 @@ const handleAdd = () => {
     taxPrice: undefined,
     totalPrice: undefined,
     remark: undefined
+  })
 }
-  formData.value.push(row)
+const handleDelete = (index: number) => formData.value.splice(index, 1)
-}
+const onChangeWarehouse = (warehouseId, row) => setStockCount(row)
-
-/** 删除按钮操作 */
-const handleDelete = (index: number) => {
-  formData.value.splice(index, 1)
-}
-
-/** 加载库存 */
 const setStockCount = async (row: any) => {
-  if (!row.productId) {
+  if (!row.productId) return
-    return
-  }
   const count = await StockApi.getStockCount(row.productId)
   row.stockCount = count || 0
 }
-
+const validate = () => formRef.value?.validate()
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
 defineExpose({ validate })
 
-/** 初始化 */
 onMounted(async () => {
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
   defaultWarehouse.value = warehouseList.value.find((item) => item.defaultStatus)
 })
 </script>
+
+<style scoped lang="scss">
+.mobile-item-list { display: flex; flex-direction: column; gap: 10px; }
+.mobile-item-card { background: #f9f9fb; border-radius: 8px; padding: 12px; border: 1px solid #ebeef5;
+  &__header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
+  &__index { font-size: 12px; color: #909399; font-weight: 600; }
+  &__name { flex: 1; font-size: 14px; font-weight: 600; color: #303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  &__body { font-size: 13px; }
+  &__info-row { display: flex; justify-content: space-between; padding: 4px 0;
+    &--highlight { margin-top: 4px; padding-top: 8px; border-top: 1px dashed #e4e7ed; }
+  }
+  &__info-label { color: #909399; flex-shrink: 0; }
+  &__info-value { color: #606266; text-align: right;
+    &--bold { font-weight: 600; color: #303133; }
+  }
+  &__input-group { display: flex; gap: 10px; margin-top: 6px;
+    :deep(.el-form-item) { flex: 1; margin-bottom: 10px; }
+  }
+}
+.mobile-item-summary { background: #fff; border-radius: 8px; padding: 12px; border: 1px solid #e6a23c;
+  &__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: #606266;
+    &--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid #f0f0f0; font-weight: 600; font-size: 14px; color: #303133; }
+  }
+}
+</style>