PC端和手机端端双端适配

src/views/erp/stock/out/components/StockOutItemForm.vue

@@ -1,13 +1,6 @@
 <template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    v-loading="formLoading"
-    label-position="top"
-    :inline-message="true"
-    :disabled="disabled"
-  >
+  <!-- 移动端布局 -->
+  <el-form v-if="isMobile" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-position="top" :inline-message="true" :disabled="disabled">
     <div class="mobile-item-list">
       <div
         v-for="(row, $index) in formData"
@@ -124,21 +117,38 @@
       </div>
     </div>
   </el-form>
-  <div class="mobile-item-add" v-if="!disabled">
+  <div class="mobile-item-add" v-if="isMobile && !disabled">
     <el-button @click="handleAdd" round style="width: 100%">+ 添加出库产品</el-button>
   </div>
+
+  <!-- PC端布局 -->
+  <el-form v-if="!isMobile" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="0px" :inline-message="true" :disabled="disabled">
+    <el-table :data="formData" show-summary :summary-method="getSummaries" class="-mt-10px">
+      <el-table-column label="序号" type="index" align="center" width="60" />
+      <el-table-column label="仓库名称" min-width="125"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.warehouseId`" :rules="formRules.warehouseId" class="mb-0px!"><el-select v-model="row.warehouseId" clearable filterable placeholder="请选择仓库" @change="onChangeWarehouse($event, row)"><el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></template></el-table-column>
+      <el-table-column label="产品名称" min-width="180"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!"><el-select v-model="row.productId" clearable filterable @change="onChangeProduct($event, row)" placeholder="请选择产品"><el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></template></el-table-column>
+      <el-table-column label="库存" min-width="100"><template #default="{ row }"><el-form-item class="mb-0px!"><el-input disabled v-model="row.stockCount" :formatter="erpCountInputFormatter" /></el-form-item></template></el-table-column>
+      <el-table-column label="条码" min-width="150"><template #default="{ row }"><el-form-item class="mb-0px!"><el-input disabled v-model="row.productBarCode" /></el-form-item></template></el-table-column>
+      <el-table-column label="单位" min-width="80"><template #default="{ row }"><el-form-item class="mb-0px!"><el-input disabled v-model="row.productUnitName" /></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%" /></el-form-item></template></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" :precision="4" class="!w-100%" /></el-form-item></template></el-table-column>
+      <el-table-column label="合计金额" prop="totalPrice" fixed="right" min-width="100"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!"><el-input disabled v-model="row.totalPrice" :formatter="erpPriceInputFormatter" /></el-form-item></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></el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="60"><template #default="{ $index }"><el-button @click="handleDelete($index)" link>—</el-button></template></el-table-column>
+    </el-table>
+  </el-form>
+  <el-row v-if="!isMobile && !disabled" justify="center" class="mt-3"><el-button @click="handleAdd" round>+ 添加出库产品</el-button></el-row>
 </template>
 <script setup lang="ts">
 import { ref, reactive, computed, watch, onMounted } from 'vue'
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
 import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
 import { StockApi } from '@/api/erp/stock/stock'
-import {
-  erpCountInputFormatter,
-  erpPriceInputFormatter,
-  erpPriceMultiply,
-  getSumValue
-} from '@/utils'
+import { erpCountInputFormatter, erpPriceInputFormatter, erpPriceMultiply, getSumValue } from '@/utils'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const props = defineProps<{
   items: undefined
@@ -189,7 +199,7 @@ watch(
   { deep: true }
 )
 
-/** 合计 */
+/** 合计 - 移动端 */
 const summaryData = computed(() => {
   const data = formData.value
   return {
@@ -198,6 +208,20 @@ const summaryData = computed(() => {
   }
 })
 
+/** 合计 - PC端 */
+const getSummaries = (param: SummaryMethodProps) => {
+  const { columns, data } = param
+  const sums: string[] = []
+  columns.forEach((column, index) => {
+    if (index === 0) { sums[index] = '合计'; return }
+    if (['count', 'totalPrice'].includes(column.property)) {
+      const sum = getSumValue(data.map((item) => Number(item[column.property])))
+      sums[index] = column.property === 'count' ? erpCountInputFormatter(sum) : erpPriceInputFormatter(sum)
+    } else { sums[index] = '' }
+  })
+  return sums
+}
+
 /** 新增按钮操作 */
 const handleAdd = () => {
   const row = {