销售管理适配手机端

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

@@ -1,209 +1,109 @@
 <template>
-  <Dialog :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-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-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-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-date-picker v-model="formData.outTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择出库时间" style="width: 100%" />
           </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>
-<!--                <el-button type="primary" @click="addProductDirectly">-->
-<!--                  <Icon icon="ep:plus" /> 直接添加产品-->
-<!--                </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 v-model="formData.warehouseId" clearable filterable placeholder="请选择仓库" style="width: 100%">
+              <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 v-model="formData.customerId" clearable filterable placeholder="请选择客户" style="width: 100%">
+              <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 v-model="formData.saleUserId" clearable filterable placeholder="请选择销售人员" style="width: 100%">
+              <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-input type="textarea" v-model="formData.remark" :rows="2" 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">
+        </div>
+
+        <!-- 出库产品清单 -->
+        <div class="mobile-form__section">
+          <div class="mobile-form__section-title">出库产品清单</div>
+          <SaleOutwarehouseItemForm 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="请输入优惠率"
-              class="!w-1/1"
-            />
+            <el-input-number v-model="formData.discountPercent" controls-position="right" :min="0" :precision="2" placeholder="请输入优惠率" style="width: 100%" />
           </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-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-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-input-number v-model="formData.otherPrice" controls-position="right" :min="0" :precision="2" placeholder="请输入其它费用" style="width: 100%" />
           </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 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-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 label="总金额（反算单价）">
+            <el-input-number v-model="formData.reverseCalculationAmount" :min="0" :precision="4" style="width: 100%" placeholder="输入总金额反算单价" @change="handleReverseCalculation" />
           </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+        </div>
+      </el-form>
+    </div>
+
+    <!-- 底部按钮 -->
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
-        确 定
-      </el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+      <div class="mobile-form__footer">
+        <el-button @click="dialogVisible = false" style="flex:1">取 消</el-button>
+        <el-button type="primary" @click="submitForm" :disabled="formLoading" v-if="!disabled" style="flex:2">
+          确 定
+        </el-button>
+      </div>
     </template>
-  </Dialog>
+  </el-drawer>
 
   <!-- 库存批次选择弹窗 -->
   <StockBatchSelectionDialog ref="stockBatchSelectionRef" @success="handleBatchSelectionChange" />
@@ -578,3 +478,31 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.mobile-form {
+  padding: 12px;
+}
+
+.mobile-form__section {
+  background: #fff;
+  border-radius: 8px;
+  padding: 14px;
+  margin-bottom: 12px;
+}
+
+.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__footer {
+  display: flex;
+  gap: 12px;
+  padding: 0 12px;
+}
+</style>