refactor(@vben/web-antd): remove create store status selection
This commit is contained in:
@@ -6,36 +6,18 @@
|
||||
*/
|
||||
import type { SelectOptionItem } from '../types';
|
||||
|
||||
import type { ServiceType, StoreBusinessStatus } from '#/api/store';
|
||||
import type { ServiceType } from '#/api/store';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Drawer,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
message,
|
||||
Select,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
import { Button, Drawer, Form, FormItem, Input } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
address: string;
|
||||
businessStatus: StoreBusinessStatus;
|
||||
businessStatusOptions: SelectOptionItem<StoreBusinessStatus>[];
|
||||
contactPhone: string;
|
||||
coverImage?: string;
|
||||
isSubmitting: boolean;
|
||||
managerName: string;
|
||||
name: string;
|
||||
onSetAddress: (value: string) => void;
|
||||
onSetBusinessStatus: (value: StoreBusinessStatus) => void;
|
||||
onSetContactPhone: (value: string) => void;
|
||||
onSetCoverImage?: (value: string) => void;
|
||||
onSetManagerName: (value: string) => void;
|
||||
onSetName: (value: string) => void;
|
||||
onSetServiceTypes: (value: ServiceType[]) => void;
|
||||
@@ -57,20 +39,6 @@ function readTextValue(value: string | undefined) {
|
||||
return value ?? '';
|
||||
}
|
||||
|
||||
/** 解析下拉枚举值。 */
|
||||
function readEnumValue<T extends number>(value: unknown): T | undefined {
|
||||
if (value === undefined || value === null || value === '') return undefined;
|
||||
const numericValue = Number(value);
|
||||
return Number.isFinite(numericValue) ? (numericValue as T) : undefined;
|
||||
}
|
||||
|
||||
/** 同步营业状态。 */
|
||||
function handleBusinessStatusChange(value: unknown) {
|
||||
const nextStatus = readEnumValue<StoreBusinessStatus>(value);
|
||||
if (nextStatus === undefined) return;
|
||||
props.onSetBusinessStatus(nextStatus);
|
||||
}
|
||||
|
||||
/** 切换服务方式。 */
|
||||
function toggleServiceType(value: ServiceType) {
|
||||
const current = [...props.serviceTypes];
|
||||
@@ -82,31 +50,6 @@ function toggleServiceType(value: ServiceType) {
|
||||
}
|
||||
props.onSetServiceTypes(current);
|
||||
}
|
||||
|
||||
/** 处理图片上传。 */
|
||||
async function handleUpload(options: any) {
|
||||
const { file, onSuccess, onError } = options;
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
// 假设后端上传接口为 /upload,返回 { url: string }
|
||||
const res = await requestClient.post<{ url: string }>('/upload', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
|
||||
const url = res?.url || (typeof res === 'string' ? res : '');
|
||||
if (url) {
|
||||
props.onSetCoverImage?.(url);
|
||||
onSuccess(res, file);
|
||||
message.success('上传成功');
|
||||
} else {
|
||||
throw new Error('Upload response missing url');
|
||||
}
|
||||
} catch (error) {
|
||||
onError(error);
|
||||
message.error('上传失败');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -153,41 +96,7 @@ async function handleUpload(options: any) {
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="门店图片">
|
||||
<Upload
|
||||
name="file"
|
||||
list-type="picture-card"
|
||||
class="avatar-uploader"
|
||||
:show-upload-list="false"
|
||||
:custom-request="handleUpload"
|
||||
>
|
||||
<img
|
||||
v-if="props.coverImage"
|
||||
:src="props.coverImage"
|
||||
alt="avatar"
|
||||
class="h-full w-full rounded-lg object-cover"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col items-center justify-center text-gray-400"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="ant-design:plus-outlined"
|
||||
class="mb-2 text-2xl"
|
||||
/>
|
||||
<div class="text-xs">点击上传门店图片</div>
|
||||
</div>
|
||||
</Upload>
|
||||
</FormItem>
|
||||
|
||||
<div class="store-drawer-section-title">营业设置</div>
|
||||
<FormItem label="营业状态">
|
||||
<Select
|
||||
:value="props.businessStatus"
|
||||
:options="props.businessStatusOptions"
|
||||
@update:value="handleBusinessStatusChange"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="配送方式">
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
|
||||
@@ -68,7 +68,6 @@ export const DEFAULT_FILTERS: StoreFilterState = {
|
||||
|
||||
export const DEFAULT_FORM_STATE: StoreFormState = {
|
||||
address: '',
|
||||
businessStatus: StoreBusinessStatusEnum.Operating,
|
||||
contactPhone: '',
|
||||
coverImage: '',
|
||||
id: '',
|
||||
|
||||
@@ -39,7 +39,6 @@ export function applyRecordToForm(
|
||||
) {
|
||||
Object.assign(formState, {
|
||||
address: store.address,
|
||||
businessStatus: store.businessStatus,
|
||||
contactPhone: store.contactPhone,
|
||||
coverImage: store.coverImage || '',
|
||||
id: store.id,
|
||||
@@ -53,7 +52,6 @@ export function applyRecordToForm(
|
||||
export function toSavePayload(formState: StoreFormState): SaveStoreDto {
|
||||
return {
|
||||
address: formState.address.trim(),
|
||||
businessStatus: formState.businessStatus,
|
||||
contactPhone: formState.contactPhone.trim(),
|
||||
coverImage: formState.coverImage.trim(),
|
||||
id: formState.id || undefined,
|
||||
|
||||
@@ -155,14 +155,6 @@ export function useStoreListPage() {
|
||||
formState.address = value;
|
||||
}
|
||||
|
||||
function setFormCoverImage(value: string) {
|
||||
formState.coverImage = value;
|
||||
}
|
||||
|
||||
function setFormBusinessStatus(value: StoreBusinessStatus) {
|
||||
formState.businessStatus = value;
|
||||
}
|
||||
|
||||
function setFormServiceTypes(value: ServiceType[]) {
|
||||
formState.serviceTypes = value;
|
||||
}
|
||||
@@ -209,9 +201,7 @@ export function useStoreListPage() {
|
||||
setBusinessStatus,
|
||||
setDrawerVisible,
|
||||
setFormAddress,
|
||||
setFormBusinessStatus,
|
||||
setFormContactPhone,
|
||||
setFormCoverImage,
|
||||
setFormManagerName,
|
||||
setFormName,
|
||||
setFormServiceTypes,
|
||||
|
||||
@@ -40,9 +40,7 @@ const {
|
||||
setBusinessStatus,
|
||||
setDrawerVisible,
|
||||
setFormAddress,
|
||||
setFormBusinessStatus,
|
||||
setFormContactPhone,
|
||||
setFormCoverImage,
|
||||
setFormManagerName,
|
||||
setFormName,
|
||||
setFormServiceTypes,
|
||||
@@ -105,20 +103,15 @@ function handleExport() {
|
||||
:title="drawerTitle"
|
||||
:is-submitting="isSubmitting"
|
||||
:name="formState.name"
|
||||
:cover-image="formState.coverImage"
|
||||
:contact-phone="formState.contactPhone"
|
||||
:manager-name="formState.managerName"
|
||||
:address="formState.address"
|
||||
:business-status="formState.businessStatus"
|
||||
:service-types="formState.serviceTypes"
|
||||
:business-status-options="businessStatusOptions"
|
||||
:service-type-options="serviceTypeOptions"
|
||||
:on-set-name="setFormName"
|
||||
:on-set-cover-image="setFormCoverImage"
|
||||
:on-set-contact-phone="setFormContactPhone"
|
||||
:on-set-manager-name="setFormManagerName"
|
||||
:on-set-address="setFormAddress"
|
||||
:on-set-business-status="setFormBusinessStatus"
|
||||
:on-set-service-types="setFormServiceTypes"
|
||||
@update:open="setDrawerVisible"
|
||||
@submit="handleSubmitStore"
|
||||
|
||||
@@ -27,6 +27,29 @@
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.store-drawer-form .store-drawer-section-title {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin: 0 0 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.store-drawer-form .store-drawer-section-title::before {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
content: '';
|
||||
background-color: #1677ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.store-drawer-form .store-drawer-section-title + .ant-form-item {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.store-drawer-footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
@@ -41,18 +64,3 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-store-list {
|
||||
.store-drawer-form .store-drawer-section-title {
|
||||
padding-left: 10px;
|
||||
margin: 0 0 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f1f1f;
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.store-drawer-form .store-drawer-section-title + .ant-form-item {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,6 @@ export interface StoreFilterState {
|
||||
/** 抽屉表单状态。 */
|
||||
export interface StoreFormState {
|
||||
address: string;
|
||||
businessStatus: StoreBusinessStatus;
|
||||
contactPhone: string;
|
||||
coverImage: string;
|
||||
id: string;
|
||||
|
||||
Reference in New Issue
Block a user