This commit is contained in:
aaron 2025-03-23 16:47:09 +08:00
parent 8628a6beab
commit e94baa8630

View File

@ -58,7 +58,7 @@
v-model:visible="addModalVisible" v-model:visible="addModalVisible"
title="添加商家" title="添加商家"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
width="800px" width="1000px"
@cancel="handleCancel" @cancel="handleCancel"
> >
<template #footer> <template #footer>
@ -74,9 +74,11 @@
ref="formRef" ref="formRef"
:model="formState" :model="formState"
:rules="rules" :rules="rules"
:label-col="{ span: 6 }" layout="vertical"
:wrapper-col="{ span: 16 }"
> >
<a-row :gutter="24">
<a-col :span="12">
<div class="form-left-column">
<a-form-item label="品牌图片" name="brand_image_url" required> <a-form-item label="品牌图片" name="brand_image_url" required>
<div class="upload-wrapper"> <div class="upload-wrapper">
<a-upload <a-upload
@ -138,7 +140,10 @@
<a-form-item label="联系电话" name="phone" required> <a-form-item label="联系电话" name="phone" required>
<a-input v-model:value="formState.phone" placeholder="请输入联系电话" /> <a-input v-model:value="formState.phone" placeholder="请输入联系电话" />
</a-form-item> </a-form-item>
</div>
</a-col>
<a-col :span="12">
<div class="form-right-column">
<a-form-item label="地址搜索"> <a-form-item label="地址搜索">
<a-auto-complete <a-auto-complete
v-model:value="searchAddress" v-model:value="searchAddress"
@ -181,6 +186,9 @@
/> />
</a-input-group> </a-input-group>
</a-form-item> </a-form-item>
</div>
</a-col>
</a-row>
</a-form> </a-form>
</a-modal> </a-modal>
@ -202,7 +210,7 @@
v-model:visible="editModalVisible" v-model:visible="editModalVisible"
title="修改商家" title="修改商家"
:confirmLoading="editLoading" :confirmLoading="editLoading"
width="800px" width="1000px"
@cancel="handleEditCancel" @cancel="handleEditCancel"
> >
<template #footer> <template #footer>
@ -218,9 +226,11 @@
ref="editFormRef" ref="editFormRef"
:model="editFormState" :model="editFormState"
:rules="rules" :rules="rules"
:label-col="{ span: 6 }" layout="vertical"
:wrapper-col="{ span: 16 }"
> >
<a-row :gutter="24">
<a-col :span="12">
<div class="form-left-column">
<a-form-item label="品牌图片" name="brand_image_url" required> <a-form-item label="品牌图片" name="brand_image_url" required>
<div class="upload-wrapper"> <div class="upload-wrapper">
<a-upload <a-upload
@ -282,7 +292,10 @@
<a-form-item label="联系电话" name="phone" required> <a-form-item label="联系电话" name="phone" required>
<a-input v-model:value="editFormState.phone" placeholder="请输入联系电话" /> <a-input v-model:value="editFormState.phone" placeholder="请输入联系电话" />
</a-form-item> </a-form-item>
</div>
</a-col>
<a-col :span="12">
<div class="form-right-column">
<a-form-item label="地址搜索"> <a-form-item label="地址搜索">
<a-auto-complete <a-auto-complete
v-model:value="editSearchAddress" v-model:value="editSearchAddress"
@ -325,6 +338,9 @@
/> />
</a-input-group> </a-input-group>
</a-form-item> </a-form-item>
</div>
</a-col>
</a-row>
</a-form> </a-form>
</a-modal> </a-modal>
@ -1481,4 +1497,34 @@ export default defineComponent({
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
} }
.form-left-column,
.form-right-column {
padding: 0 12px;
}
.form-left-column {
border-right: 1px dashed #f0f0f0;
}
.form-right-column {
height: 100%;
}
:deep(.ant-form-item) {
margin-bottom: 20px;
}
:deep(.ant-row-form) {
display: flex;
flex-wrap: wrap;
}
:deep(.ant-input),
:deep(.ant-select),
:deep(.ant-input-number),
:deep(.ant-picker),
:deep(.ant-auto-complete) {
width: 100%;
}
</style> </style>