CRM里面的客户、线索管理适配手机端

src/views/crm/customer/CustomerImportForm.vue

@@ -1,53 +1,73 @@
 <!-- 客户导入窗口 -->
 <template>
-  <Dialog v-model="dialogVisible" title="客户导入" width="400">
-    <div class="flex items-center my-10px">
-      <span class="mr-10px">负责人</span>
-      <el-select v-model="ownerUserId" class="!w-240px" clearable>
-        <el-option
-          v-for="item in userOptions"
-          :key="item.id"
-          :label="item.nickname"
-          :value="item.id"
-        />
-      </el-select>
+  <el-drawer
+    v-model="dialogVisible"
+    title="客户导入"
+    direction="rtl"
+    size="100%"
+    :close-on-press-escape="true"
+    :destroy-on-close="true"
+    class="mobile-form-drawer"
+  >
+    <div class="mobile-form" v-loading="formLoading">
+      <div class="mobile-form__section">
+        <div class="mobile-form__section-title">导入设置</div>
+        <el-form label-position="top">
+          <el-form-item label="负责人">
+            <el-select v-model="ownerUserId" style="width: 100%" clearable>
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="mobile-form__section">
+        <div class="mobile-form__section-title">上传文件</div>
+        <el-upload
+          ref="uploadRef"
+          v-model:file-list="fileList"
+          :auto-upload="false"
+          :disabled="formLoading"
+          :limit="1"
+          :on-exceed="handleExceed"
+          accept=".xlsx, .xls"
+          action="none"
+          drag
+        >
+          <Icon icon="ep:upload" />
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <template #tip>
+            <div class="el-upload__tip text-center">
+              <div class="el-upload__tip">
+                <el-checkbox v-model="updateSupport" />
+                是否更新已经存在的客户数据（“客户名称”重复）
+              </div>
+              <span>仅允许导入 xls、xlsx 格式文件。</span>
+              <el-link
+                :underline="false"
+                style="font-size: 12px; vertical-align: baseline"
+                type="primary"
+                @click="importTemplate"
+              >
+                下载模板
+              </el-link>
+            </div>
+          </template>
+        </el-upload>
+      </div>
+
+      <!-- 底部操作按钮 -->
+      <div class="mobile-form__footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      </div>
     </div>
-    <el-upload
-      ref="uploadRef"
-      v-model:file-list="fileList"
-      :auto-upload="false"
-      :disabled="formLoading"
-      :limit="1"
-      :on-exceed="handleExceed"
-      accept=".xlsx, .xls"
-      action="none"
-      drag
-    >
-      <Icon icon="ep:upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      <template #tip>
-        <div class="el-upload__tip text-center">
-          <div class="el-upload__tip">
-            <el-checkbox v-model="updateSupport" />
-            是否更新已经存在的客户数据（“客户名称”重复）
-          </div>
-          <span>仅允许导入 xls、xlsx 格式文件。</span>
-          <el-link
-            :underline="false"
-            style="font-size: 12px; vertical-align: baseline"
-            type="primary"
-            @click="importTemplate"
-          >
-            下载模板
-          </el-link>
-        </div>
-      </template>
-    </el-upload>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
+  </el-drawer>
 </template>
 <script lang="ts" setup>
 import * as CustomerApi from '@/api/crm/customer'
@@ -156,3 +176,44 @@ const importTemplate = async () => {
   download.excel(res, '客户导入模版.xls')
 }
 </script>
+
+<style lang="scss" scoped>
+.mobile-form {
+  padding: 0 4px;
+}
+.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__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 -4px;
+
+  .el-button {
+    flex: 1;
+    height: 40px;
+    font-size: 15px;
+  }
+}
+</style>