PC端和手机端端双端适配

This commit is contained in:
2026-03-14 10:22:48 +08:00
parent cb13784141
commit 5a1923d9ca
92 changed files with 9011 additions and 3149 deletions

View File

@@ -1,34 +1,13 @@
<template>
<el-drawer
v-model="dialogVisible"
title="快速新增供应商"
direction="rtl"
size="100%"
:close-on-press-escape="true"
:destroy-on-close="true"
>
<!-- 移动端布局 -->
<el-drawer v-if="isMobile" v-model="dialogVisible" title="快速新增供应商" direction="rtl" size="100%" :close-on-press-escape="true" :destroy-on-close="true">
<div class="mobile-quick-supplier" v-loading="formLoading">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-position="top"
>
<el-form-item label="供应商名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入供应商名称" />
</el-form-item>
<el-form-item label="联系人" prop="contact">
<el-input v-model="formData.contact" placeholder="请输入联系人" />
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机号码" />
</el-form-item>
<el-form-item label="联系电话" prop="telephone">
<el-input v-model="formData.telephone" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" />
</el-form-item>
<el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
<el-form-item label="供应商名称" prop="name"><el-input v-model="formData.name" placeholder="请输入供应商名称" /></el-form-item>
<el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item>
<el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item>
<el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item>
<el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" /></el-form-item>
</el-form>
</div>
<template #footer>
@@ -36,14 +15,34 @@
<el-button @click="submitForm" type="primary" :loading="formLoading"> </el-button>
</template>
</el-drawer>
<!-- PC端布局 -->
<Dialog v-else title="快速新增供应商" v-model="dialogVisible" width="500px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<el-form-item label="供应商名称" prop="name"><el-input v-model="formData.name" placeholder="请输入供应商名称" /></el-form-item>
<el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item>
<el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item>
<el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item>
<el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" /></el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false"> </el-button>
<el-button @click="submitForm" type="primary" :loading="formLoading"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { CommonStatusEnum } from '@/utils/constants'
import { useWindowSize } from '@vueuse/core'
defineOptions({ name: 'QuickSupplierForm' })
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const message = useMessage()
const dialogVisible = ref(false)