PC端和手机端端双端适配
This commit is contained in:
@@ -1,96 +1,60 @@
|
||||
<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"
|
||||
>
|
||||
<!-- 基础信息 -->
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
|
||||
<div class="mobile-form-section">
|
||||
<div class="mobile-form-section__title">基础信息</div>
|
||||
<el-form-item label="仓库名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入仓库名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库地址" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入仓库地址" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="principal">
|
||||
<el-input v-model="formData.principal" placeholder="请输入负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓储费" prop="warehousePrice">
|
||||
<el-input-number
|
||||
v-model="formData.warehousePrice"
|
||||
placeholder="请输入仓储费，单位：元/天/KG"
|
||||
:min="0"
|
||||
:precision="4"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="搬运费" prop="truckagePrice">
|
||||
<el-input-number
|
||||
v-model="formData.truckagePrice"
|
||||
placeholder="请输入搬运费，单位：元"
|
||||
:min="0"
|
||||
:precision="4"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库名称" prop="name"><el-input v-model="formData.name" placeholder="请输入仓库名称" clearable /></el-form-item>
|
||||
<el-form-item label="仓库地址" prop="address"><el-input v-model="formData.address" placeholder="请输入仓库地址" clearable /></el-form-item>
|
||||
<el-form-item label="负责人" prop="principal"><el-input v-model="formData.principal" placeholder="请输入负责人" clearable /></el-form-item>
|
||||
<el-form-item label="仓储费" prop="warehousePrice"><el-input-number v-model="formData.warehousePrice" placeholder="请输入仓储费" :min="0" :precision="4" controls-position="right" /></el-form-item>
|
||||
<el-form-item label="搬运费" prop="truckagePrice"><el-input-number v-model="formData.truckagePrice" placeholder="请输入搬运费" :min="0" :precision="4" controls-position="right" /></el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 状态信息 -->
|
||||
<div class="mobile-form-section">
|
||||
<div class="mobile-form-section__title">状态信息</div>
|
||||
<el-form-item label="仓库状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
placeholder="请输入排序"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库状态" prop="status"><el-radio-group v-model="formData.status"><el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio></el-radio-group></el-form-item>
|
||||
<el-form-item label="排序" prop="sort"><el-input-number v-model="formData.sort" placeholder="请输入排序" :precision="0" controls-position="right" /></el-form-item>
|
||||
<el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="3" /></el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="mobile-form__footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- PC端布局 -->
|
||||
<Dialog v-else :title="dialogTitle" v-model="dialogVisible">
|
||||
<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="address"><el-input v-model="formData.address" placeholder="请输入仓库地址" /></el-form-item>
|
||||
<el-form-item label="仓库状态" prop="status"><el-radio-group v-model="formData.status"><el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio></el-radio-group></el-form-item>
|
||||
<el-form-item label="仓储费" prop="warehousePrice"><el-input-number v-model="formData.warehousePrice" placeholder="请输入仓储费" :min="0" :precision="4" class="!w-1/1" /></el-form-item>
|
||||
<el-form-item label="搬运费" prop="truckagePrice"><el-input-number v-model="formData.truckagePrice" placeholder="请输入搬运费" :min="0" :precision="4" class="!w-1/1" /></el-form-item>
|
||||
<el-form-item label="负责人" prop="principal"><el-input v-model="formData.principal" placeholder="请输入负责人" /></el-form-item>
|
||||
<el-form-item label="排序" prop="sort"><el-input-number v-model="formData.sort" placeholder="请输入排序" :precision="0" class="!w-1/1" /></el-form-item>
|
||||
<el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'WarehouseFormMobile' })
|
||||
defineOptions({ name: 'WarehouseForm' })
|
||||
|
||||
const { width } = useWindowSize()
|
||||
const isMobile = computed(() => width.value < 768)
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
Reference in New Issue
Block a user