PC端和手机端端双端适配
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user