smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【mall 商城】门店管理的迁移（ele 100%）

Browse Source
This commit is contained in:
YunaiV
2025-10-13 13:10:46 +08:00
parent 7b7ca39d83
commit a3a292db80
9 changed files with 176 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web-ele/src/api/mall/trade/delivery/pickUpStore/index.ts
View File

@@ -29,19 +29,18 @@ export namespace MallDeliveryPickUpStoreApi {
longitude: number;
/** 状态 */
status: number;
/** 营业时间 用于fieldMappingTime */
rangeTime: any[];
/** 绑定用户编号组数 */
verifyUserIds: number[];
verifyUserIds?: number[];
verifyUsers?: any[];
}
/** 绑定自提店员请求 */
export interface BindStaffRequest {
export interface DeliveryPickUpBindReqVO {
id?: number;
/** 门店名称 */
name: string;
/** 门店编号 */
storeId: number;
/** 用户编号列表 */
userIds: number[];
verifyUserIds: number[];
}
}
@@ -87,8 +86,8 @@ export function deleteDeliveryPickUpStore(id: number) {
}
/** 绑定自提店员 */
export function bindStoreStaffId(
data: MallDeliveryPickUpStoreApi.BindStaffRequest,
export function bindDeliveryPickUpStore(
data: MallDeliveryPickUpStoreApi.DeliveryPickUpBindReqVO,
) {
return requestClient.post('/trade/delivery/pick-up-store/bind', data);
}

127
apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
View File

@@ -20,76 +20,76 @@ export function useFormSchema(): VbenFormSchema[] {
show: () => false,
},
},
{
component: 'ImageUpload',
fieldName: 'logo',
label: '门店 logo',
rules: 'required',
},
{
component: 'Input',
fieldName: 'name',
label: '门店名称',
rules: 'required',
componentProps: {
placeholder: '请输入门店名称',
},
},
{
component: 'Input',
fieldName: 'phone',
label: '门店手机',
rules: 'mobileRequired',
componentProps: {
placeholder: '请输入门店手机',
},
},
{
component: 'ImageUpload',
fieldName: 'logo',
label: '门店 logo',
rules: 'required',
formItemClass: 'col-span-2',
componentProps: {
placeholder: '请上传门店 logo',
},
help: '推荐 180x180 图片分辨率',
},
{
component: 'Textarea',
fieldName: 'introduction',
label: '门店简介',
formItemClass: 'col-span-2',
componentProps: {
placeholder: '请输入门店简介',
rows: 4,
},
},
{
fieldName: 'areaId',
label: '地址',
label: '门店所在地区',
component: 'ApiTreeSelect',
rules: 'required',
componentProps: {
api: () => getAreaTree(),
labelField: 'name',
valueField: 'id',
childrenField: 'children',
placeholder: '请选择省市区',
},
},
{
component: 'Input',
fieldName: 'detailAddress',
label: '详细地址',
rules: 'required',
},
// TODO @霖：时间类型不对
{
component: 'TimePicker',
fieldName: 'openingTime',
label: '营业开始时间',
label: '门店详细地址',
rules: 'required',
componentProps: {
placeholder: '请输入门店详细地址',
},
},
{
component: 'TimePicker',
fieldName: 'closingTime',
label: '营业结束时间',
fieldName: 'rangeTime',
label: '营业时间',
rules: 'required',
},
{
component: 'Input',
fieldName: 'longitude',
label: '经度',
rules: 'required',
},
{
component: 'Input',
fieldName: 'latitude',
label: '纬度',
rules: 'required',
},
// TODO @霖：缺少地图
{
component: 'Input',
fieldName: 'getGeo',
label: '获取经纬度',
componentProps: {
isRange: true,
format: 'HH:mm',
},
},
{
fieldName: 'status',
@@ -102,6 +102,24 @@ export function useFormSchema(): VbenFormSchema[] {
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
component: 'Input',
fieldName: 'longitude',
label: '经度',
rules: 'required',
componentProps: {
placeholder: '请输入门店经度',
},
},
{
component: 'Input',
fieldName: 'latitude',
label: '纬度',
rules: 'required',
componentProps: {
placeholder: '请输入门店纬度',
},
},
];
}
@@ -134,25 +152,9 @@ export function useBindFormSchema(): VbenFormSchema[] {
api: () => getSimpleUserList(),
labelField: 'nickname',
valueField: 'id',
mode: 'tags',
multiple: true,
clearable: true,
},
},
{
component: 'Select',
fieldName: 'verifyUsers',
label: '店员列表',
rules: 'required',
componentProps: {
options: [],
mode: 'tags',
},
dependencies: {
triggerFields: ['verifyUserIds'],
trigger(values, form) {
form.setFieldValue('verifyUsers', values.verifyUserIds);
},
disabled: true,
placeholder: '请选择门店店员',
},
},
];
@@ -165,11 +167,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'phone',
label: '门店手机',
component: 'Input',
componentProps: {
placeholder: '请输入门店手机',
clearable: true,
},
},
{
fieldName: 'name',
label: '门店名称',
component: 'Input',
componentProps: {
placeholder: '请输入门店名称',
clearable: true,
},
},
{
fieldName: 'status',
@@ -178,6 +188,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
clearable: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择门店状态',
},
},
{
@@ -198,10 +209,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '编号',
minWidth: 80,
},
{
field: 'logo',
title: '门店 logo',
minWidth: 100,
cellRender: {
name: 'CellImage',
},
@@ -209,18 +222,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'name',
title: '门店名称',
minWidth: 150,
},
{
field: 'phone',
title: '门店手机',
minWidth: 120,
},
{
field: 'detailAddress',
title: '地址',
minWidth: 200,
},
{
field: 'openingTime',
title: '营业时间',
minWidth: 160,
formatter: ({ row }) => {
return `${row.openingTime} ~ ${row.closingTime}`;
},
@@ -228,6 +245,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'status',
title: '开启状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
@@ -236,11 +254,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'createTime',
title: '创建时间',
minWidth: 160,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 200,
width: 220,
fixed: 'right',
slots: { default: 'actions' },
},

11
apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue
View File

@@ -28,7 +28,7 @@ const [BindFormModal, bindFormModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@@ -55,7 +55,7 @@ async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
try {
await deleteDeliveryPickUpStore(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@@ -82,6 +82,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -93,7 +94,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<BindFormModal />
<Grid table-title="门店列表">
<template #toolbar-tools>
@@ -114,6 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['trade:delivery:pick-up-store:update'],
@@ -121,6 +123,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
{
label: '绑定店员',
type: 'primary',
link: true,
icon: ACTION_ICON.ADD,
auth: ['trade:delivery:pick-up-store:update'],
@@ -128,8 +131,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
{
label: $t('common.delete'),
link: true,
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['trade:delivery:pick-up-store:delete'],
popConfirm: {

21
apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/bind-form.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
import { computed, ref } from 'vue';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
@@ -9,7 +9,7 @@ import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
bindStoreStaffId,
bindDeliveryPickUpStore,
getDeliveryPickUpStore,
} from '#/api/mall/trade/delivery/pickUpStore';
import { $t } from '#/locales';
@@ -18,12 +18,6 @@ import { useBindFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MallDeliveryPickUpStoreApi.PickUpStore>();
// TODO @霖：店员是多选；
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['绑定店员'])
: $t('ui.actionTitle.create', ['绑定店员']);
});
const [Form, formApi] = useVbenForm({
commonConfig: {
@@ -47,9 +41,9 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MallDeliveryPickUpStoreApi.BindStaffRequest;
(await formApi.getValues()) as MallDeliveryPickUpStoreApi.DeliveryPickUpBindReqVO;
try {
await bindStoreStaffId(data);
await bindDeliveryPickUpStore(data);
// 关闭并提示
await modalApi.close();
emit('success');
@@ -65,7 +59,7 @@ const [Modal, modalApi] = useVbenModal({
}
// 加载数据
const data =
modalApi.getData<MallDeliveryPickUpStoreApi.BindStaffRequest>();
modalApi.getData<MallDeliveryPickUpStoreApi.DeliveryPickUpBindReqVO>();
if (!data || !data.id) {
return;
}
@@ -73,6 +67,9 @@ const [Modal, modalApi] = useVbenModal({
try {
formData.value = await getDeliveryPickUpStore(data.id);
// 设置到 values
formData.value.verifyUserIds = formData.value.verifyUsers?.map(
(item: any) => item.id,
);
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
@@ -82,7 +79,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal title="绑定店员" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

82
apps/web-ele/src/views/mall/trade/delivery/pickUpStore/modules/form.vue
View File

@@ -5,9 +5,11 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { ElButton, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getTradeConfig } from '#/api/mall/trade/config';
import {
createDeliveryPickUpStore,
getDeliveryPickUpStore,
@@ -21,18 +23,63 @@ const emit = defineEmits(['success']);
const formData = ref<MallDeliveryPickUpStoreApi.PickUpStore>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['自提订单'])
: $t('ui.actionTitle.create', ['自提订单']);
? $t('ui.actionTitle.edit', ['门店'])
: $t('ui.actionTitle.create', ['门店']);
});
const mapVisible = ref(false); // 是否显示地图弹窗
const tencentLbsUrl = ref(''); // 腾讯位置服务 url
/** 获取经纬度相关方法 */
function selectAddress(loc: any) {
if (loc.latlng?.lat) {
formApi.setFieldValue('latitude', loc.latlng.lat);
}
if (loc.latlng?.lng) {
formApi.setFieldValue('longitude', loc.latlng.lng);
}
mapVisible.value = false;
}
/** 初始化腾讯地图 */
async function initTencentLbsMap() {
// 从配置中获取腾讯地图的 key
const data = await getTradeConfig();
const key = data.tencentLbsKey;
if (!key) {
ElMessage.warning('请先配置腾讯位置服务的 key');
return;
}
// 设置 url
if (!window) {
return;
}
(window as any).selectAddress = selectAddress;
window.addEventListener(
'message',
(event) => {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
const loc = event.data;
if (loc && loc.module === 'locationPicker') {
// 防止其他应用也会向该页面 post 信息，需判断 module 是否为 'locationPicker'
(window.parent as any).selectAddress(loc);
}
},
false,
);
tencentLbsUrl.value = `https://apis.map.qq.com/tools/locpicker?type=1&key=${key}&referer=myapp`;
}
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
fieldMappingTime: [['rangeTime', ['openingTime', 'closingTime'], 'HH:mm']],
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
@@ -68,22 +115,47 @@ const [Modal, modalApi] = useVbenModal({
// 加载数据
const data = modalApi.getData<MallDeliveryPickUpStoreApi.PickUpStore>();
if (!data || !data.id) {
// 初始化地图
await initTencentLbsMap();
return;
}
modalApi.lock();
try {
formData.value = await getDeliveryPickUpStore(data.id);
formData.value.rangeTime = [
dayjs(formData.value.openingTime, 'HH:mm'),
dayjs(formData.value.closingTime, 'HH:mm'),
];
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
// 初始化地图
await initTencentLbsMap();
}
},
});
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
<template #prepend-footer>
<ElButton @click="mapVisible = true"> 获取经纬度 </ElButton>
</template>
</Modal>
<!-- 地图弹窗 -->
<el-dialog
v-model="mapVisible"
title="获取经纬度"
:width="800"
:footer="null"
>
<iframe
v-if="mapVisible && tencentLbsUrl"
:src="tencentLbsUrl"
class="h-[600px] w-full border-0"
></iframe>
</el-dialog>
</template>

1
apps/web-ele/src/views/system/tenant/data.ts
View File

@@ -9,6 +9,7 @@ import { z } from '#/adapter/form';
import { getTenantPackageList } from '#/api/system/tenant-package';
import { getRangePickerDefaultProps } from '#/utils';
// TODO @xingyu：这个不用 ref 么？
let tenantPackageList: SystemTenantPackageApi.TenantPackage[] = [];
async function getTenantPackageData() {