update
This commit is contained in:
aaron
parent
8628a6beab
commit
e94baa8630
@ -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,113 +74,121 @@
|
|||||||
ref="formRef"
|
ref="formRef"
|
||||||
:model="formState"
|
:model="formState"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
:label-col="{ span: 6 }"
|
layout="vertical"
|
||||||
:wrapper-col="{ span: 16 }"
|
|
||||||
>
|
>
|
||||||
<a-form-item label="品牌图片" name="brand_image_url" required>
|
<a-row :gutter="24">
|
||||||
<div class="upload-wrapper">
|
<a-col :span="12">
|
||||||
<a-upload
|
<div class="form-left-column">
|
||||||
v-model:fileList="brandImageList"
|
<a-form-item label="品牌图片" name="brand_image_url" required>
|
||||||
:customRequest="handleBrandImageUpload"
|
<div class="upload-wrapper">
|
||||||
list-type="picture-card"
|
<a-upload
|
||||||
:maxCount="1"
|
v-model:fileList="brandImageList"
|
||||||
@preview="handlePreview"
|
:customRequest="handleBrandImageUpload"
|
||||||
@remove="handleBrandImageRemove"
|
list-type="picture-card"
|
||||||
accept=".jpg,.jpeg,.png"
|
:maxCount="1"
|
||||||
>
|
@preview="handlePreview"
|
||||||
<div v-if="!formState.brand_image_url">
|
@remove="handleBrandImageRemove"
|
||||||
<plus-outlined />
|
accept=".jpg,.jpeg,.png"
|
||||||
<div style="margin-top: 8px">上传图片</div>
|
>
|
||||||
</div>
|
<div v-if="!formState.brand_image_url">
|
||||||
</a-upload>
|
<plus-outlined />
|
||||||
</div>
|
<div style="margin-top: 8px">上传图片</div>
|
||||||
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
</div>
|
||||||
</a-form-item>
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="选择用户" name="user_id" required>
|
<a-form-item label="选择用户" name="user_id" required>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="formState.user_id"
|
v-model:value="formState.user_id"
|
||||||
placeholder="请选择用户"
|
placeholder="请选择用户"
|
||||||
:loading="userLoading"
|
:loading="userLoading"
|
||||||
:filter-option="false"
|
:filter-option="false"
|
||||||
:show-search="true"
|
:show-search="true"
|
||||||
@search="handleUserSearch"
|
@search="handleUserSearch"
|
||||||
>
|
>
|
||||||
<a-select-option
|
<a-select-option
|
||||||
v-for="user in userOptions"
|
v-for="user in userOptions"
|
||||||
:key="user.userid"
|
:key="user.userid"
|
||||||
:value="user.userid"
|
:value="user.userid"
|
||||||
>
|
>
|
||||||
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="商家分类" name="category_id" required>
|
<a-form-item label="商家分类" name="category_id" required>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="formState.category_id"
|
v-model:value="formState.category_id"
|
||||||
placeholder="请选择商家分类"
|
placeholder="请选择商家分类"
|
||||||
:options="categories.map(item => ({
|
:options="categories.map(item => ({
|
||||||
value: item.id,
|
value: item.id,
|
||||||
label: item.name
|
label: item.name
|
||||||
}))"
|
}))"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="商家名称" name="name" required>
|
<a-form-item label="商家名称" name="name" required>
|
||||||
<a-input v-model:value="formState.name" placeholder="请输入商家名称" />
|
<a-input v-model:value="formState.name" placeholder="请输入商家名称" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="营业时间" name="business_hours" required>
|
<a-form-item label="营业时间" name="business_hours" required>
|
||||||
<a-input v-model:value="formState.business_hours" placeholder="例如：10:30~20:30" />
|
<a-input v-model:value="formState.business_hours" placeholder="例如：10:30~20:30" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<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-auto-complete
|
||||||
|
v-model:value="searchAddress"
|
||||||
|
:options="searchOptions"
|
||||||
|
placeholder="输入地址搜索"
|
||||||
|
@change="handleSearch"
|
||||||
|
@select="handleSelect"
|
||||||
|
:loading="searchLoading"
|
||||||
|
allow-clear
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="地址搜索">
|
<a-form-item label="地图选点" required>
|
||||||
<a-auto-complete
|
<div class="map-container">
|
||||||
v-model:value="searchAddress"
|
<div id="add-map-container" style="height: 300px;"></div>
|
||||||
:options="searchOptions"
|
</div>
|
||||||
placeholder="输入地址搜索"
|
</a-form-item>
|
||||||
@change="handleSearch"
|
|
||||||
@select="handleSelect"
|
|
||||||
:loading="searchLoading"
|
|
||||||
allow-clear
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="地图选点" required>
|
<a-form-item label="详细地址" name="address" required>
|
||||||
<div class="map-container">
|
<a-input v-model:value="formState.address" placeholder="请输入详细地址" />
|
||||||
<div id="add-map-container" style="height: 300px;"></div>
|
</a-form-item>
|
||||||
</div>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="详细地址" name="address" required>
|
<a-form-item label="经纬度" required>
|
||||||
<a-input v-model:value="formState.address" placeholder="请输入详细地址" />
|
<a-input-group compact>
|
||||||
</a-form-item>
|
<a-input-number
|
||||||
|
v-model:value="formState.longitude"
|
||||||
<a-form-item label="经纬度" required>
|
:min="-180"
|
||||||
<a-input-group compact>
|
:max="180"
|
||||||
<a-input-number
|
style="width: calc(100% - 8px); margin-right: 16px"
|
||||||
v-model:value="formState.longitude"
|
placeholder="经度"
|
||||||
:min="-180"
|
disabled
|
||||||
:max="180"
|
/>
|
||||||
style="width: calc(100% - 8px); margin-right: 16px"
|
<a-input-number
|
||||||
placeholder="经度"
|
v-model:value="formState.latitude"
|
||||||
disabled
|
:min="-90"
|
||||||
/>
|
:max="90"
|
||||||
<a-input-number
|
style="width: calc(100% - 8px)"
|
||||||
v-model:value="formState.latitude"
|
placeholder="纬度"
|
||||||
:min="-90"
|
disabled
|
||||||
:max="90"
|
/>
|
||||||
style="width: calc(100% - 8px)"
|
</a-input-group>
|
||||||
placeholder="纬度"
|
</a-form-item>
|
||||||
disabled
|
</div>
|
||||||
/>
|
</a-col>
|
||||||
</a-input-group>
|
</a-row>
|
||||||
</a-form-item>
|
|
||||||
</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,113 +226,121 @@
|
|||||||
ref="editFormRef"
|
ref="editFormRef"
|
||||||
:model="editFormState"
|
:model="editFormState"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
:label-col="{ span: 6 }"
|
layout="vertical"
|
||||||
:wrapper-col="{ span: 16 }"
|
|
||||||
>
|
>
|
||||||
<a-form-item label="品牌图片" name="brand_image_url" required>
|
<a-row :gutter="24">
|
||||||
<div class="upload-wrapper">
|
<a-col :span="12">
|
||||||
<a-upload
|
<div class="form-left-column">
|
||||||
v-model:fileList="editBrandImageList"
|
<a-form-item label="品牌图片" name="brand_image_url" required>
|
||||||
:customRequest="handleBrandImageUpload"
|
<div class="upload-wrapper">
|
||||||
list-type="picture-card"
|
<a-upload
|
||||||
:maxCount="1"
|
v-model:fileList="editBrandImageList"
|
||||||
@preview="handlePreview"
|
:customRequest="handleBrandImageUpload"
|
||||||
@remove="handleBrandImageRemove"
|
list-type="picture-card"
|
||||||
accept=".jpg,.jpeg,.png"
|
:maxCount="1"
|
||||||
>
|
@preview="handlePreview"
|
||||||
<div v-if="!editFormState.brand_image_url">
|
@remove="handleBrandImageRemove"
|
||||||
<plus-outlined />
|
accept=".jpg,.jpeg,.png"
|
||||||
<div style="margin-top: 8px">上传图片</div>
|
>
|
||||||
</div>
|
<div v-if="!editFormState.brand_image_url">
|
||||||
</a-upload>
|
<plus-outlined />
|
||||||
</div>
|
<div style="margin-top: 8px">上传图片</div>
|
||||||
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
</div>
|
||||||
</a-form-item>
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="选择用户" name="user_id" required>
|
<a-form-item label="选择用户" name="user_id" required>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="editFormState.user_id"
|
v-model:value="editFormState.user_id"
|
||||||
placeholder="请选择用户"
|
placeholder="请选择用户"
|
||||||
:loading="userLoading"
|
:loading="userLoading"
|
||||||
:filter-option="false"
|
:filter-option="false"
|
||||||
:show-search="true"
|
:show-search="true"
|
||||||
@search="handleUserSearch"
|
@search="handleUserSearch"
|
||||||
>
|
>
|
||||||
<a-select-option
|
<a-select-option
|
||||||
v-for="user in userOptions"
|
v-for="user in userOptions"
|
||||||
:key="user.userid"
|
:key="user.userid"
|
||||||
:value="user.userid"
|
:value="user.userid"
|
||||||
>
|
>
|
||||||
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="商家分类" name="category_id" required>
|
<a-form-item label="商家分类" name="category_id" required>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="editFormState.category_id"
|
v-model:value="editFormState.category_id"
|
||||||
placeholder="请选择商家分类"
|
placeholder="请选择商家分类"
|
||||||
:options="categories.map(item => ({
|
:options="categories.map(item => ({
|
||||||
value: item.id,
|
value: item.id,
|
||||||
label: item.name
|
label: item.name
|
||||||
}))"
|
}))"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="商家名称" name="name" required>
|
<a-form-item label="商家名称" name="name" required>
|
||||||
<a-input v-model:value="editFormState.name" placeholder="请输入商家名称" />
|
<a-input v-model:value="editFormState.name" placeholder="请输入商家名称" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="营业时间" name="business_hours" required>
|
<a-form-item label="营业时间" name="business_hours" required>
|
||||||
<a-input v-model:value="editFormState.business_hours" placeholder="例如：10:30~20:30" />
|
<a-input v-model:value="editFormState.business_hours" placeholder="例如：10:30~20:30" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<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-auto-complete
|
||||||
|
v-model:value="editSearchAddress"
|
||||||
|
:options="searchOptions"
|
||||||
|
placeholder="输入地址搜索"
|
||||||
|
@change="handleSearch"
|
||||||
|
@select="handleEditSelect"
|
||||||
|
:loading="searchLoading"
|
||||||
|
allow-clear
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="地址搜索">
|
<a-form-item label="地图选点" required>
|
||||||
<a-auto-complete
|
<div class="map-container">
|
||||||
v-model:value="editSearchAddress"
|
<div id="edit-map-container" style="height: 300px;"></div>
|
||||||
:options="searchOptions"
|
</div>
|
||||||
placeholder="输入地址搜索"
|
</a-form-item>
|
||||||
@change="handleSearch"
|
|
||||||
@select="handleEditSelect"
|
|
||||||
:loading="searchLoading"
|
|
||||||
allow-clear
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="地图选点" required>
|
<a-form-item label="详细地址" name="address" required>
|
||||||
<div class="map-container">
|
<a-input v-model:value="editFormState.address" placeholder="请输入详细地址" />
|
||||||
<div id="edit-map-container" style="height: 300px;"></div>
|
</a-form-item>
|
||||||
</div>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="详细地址" name="address" required>
|
<a-form-item label="经纬度" required>
|
||||||
<a-input v-model:value="editFormState.address" placeholder="请输入详细地址" />
|
<a-input-group compact>
|
||||||
</a-form-item>
|
<a-input-number
|
||||||
|
v-model:value="editFormState.longitude"
|
||||||
<a-form-item label="经纬度" required>
|
:min="-180"
|
||||||
<a-input-group compact>
|
:max="180"
|
||||||
<a-input-number
|
style="width: calc(100% - 8px); margin-right: 16px"
|
||||||
v-model:value="editFormState.longitude"
|
placeholder="经度"
|
||||||
:min="-180"
|
disabled
|
||||||
:max="180"
|
/>
|
||||||
style="width: calc(100% - 8px); margin-right: 16px"
|
<a-input-number
|
||||||
placeholder="经度"
|
v-model:value="editFormState.latitude"
|
||||||
disabled
|
:min="-90"
|
||||||
/>
|
:max="90"
|
||||||
<a-input-number
|
style="width: calc(100% - 8px)"
|
||||||
v-model:value="editFormState.latitude"
|
placeholder="纬度"
|
||||||
:min="-90"
|
disabled
|
||||||
:max="90"
|
/>
|
||||||
style="width: calc(100% - 8px)"
|
</a-input-group>
|
||||||
placeholder="纬度"
|
</a-form-item>
|
||||||
disabled
|
</div>
|
||||||
/>
|
</a-col>
|
||||||
</a-input-group>
|
</a-row>
|
||||||
</a-form-item>
|
|
||||||
</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>
|
||||||
Loading…
Reference in New Issue
Block a user