PC端和手机端端双端适配

src/views/erp/sale/outwarehouse/SaleOutwarehouseForm.vue

@@ -1,22 +1,8 @@
 <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>
@@ -105,10 +91,45 @@
     </template>
   </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="outTime"><el-date-picker v-model="formData.outTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择出库时间" class="!w-1/1" /></el-form-item></el-col>
+        <el-col :span="8"><el-form-item label="关联明细" prop="stockRecordIds"><el-input v-model="formData.stockRecordText" readonly><template #append><el-button @click="openStockRecordList"><Icon icon="ep:search" /> 选择</el-button></template></el-input></el-form-item></el-col>
+        <el-col :span="8"><el-form-item label="仓库" prop="warehouseId"><el-select v-model="formData.warehouseId" clearable filterable placeholder="请选择仓库" class="!w-1/1"><el-option v-for="item in warehouseList" :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="customerId"><el-select v-model="formData.customerId" clearable filterable placeholder="请选择客户" class="!w-1/1"><el-option v-for="item in customerList" :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="saleUserId"><el-select v-model="formData.saleUserId" clearable filterable placeholder="请选择销售人员" class="!w-1/1"><el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" /></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" 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"><SaleOutwarehouseItemForm 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 :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" 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="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="应收金额"><el-input disabled v-model="formData.totalPrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
+        <el-col :span="8"><el-form-item label="总金额"><el-input-number v-model="formData.reverseCalculationAmount" :min="0" :precision="4" class="!w-1/1" placeholder="输入总金额反算单价" @change="handleReverseCalculation" /></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>
+
   <!-- 库存批次选择弹窗 -->
   <StockBatchSelectionDialog ref="stockBatchSelectionRef" @success="handleBatchSelectionChange" />
 </template>
 <script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
 import { SaleOutwarehouseApi, SaleOutwarehouseVO } from '@/api/erp/sale/outwarehouse'
 import SaleOutwarehouseItemForm from './components/SaleOutwarehouseItemForm.vue'
 import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
@@ -120,10 +141,14 @@ import { StockApi } from '@/api/erp/stock/stock/index'
 import { ProductApi } from '@/api/erp/product/product'
 import StockBatchSelectionDialog from './components/StockBatchSelectionDialog.vue'
 import dayjs from 'dayjs'
+import { useWindowSize } from '@vueuse/core'
 
 /** ERP 销售出库表单 */
 defineOptions({ name: 'SaleOutwarehouseForm' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗