feat(shop): 添加暂存模式支持及相关功能

- 在商店运行模式中新增暂存模式(模式5)
- 更新模式与支付方式映射关系,暂存模式无支付方式
- 添加格口密码字段支持暂存模式使用
- 更新相关组件和文档说明
This commit is contained in:
dzq 2025-12-17 15:19:21 +08:00
parent 30aae12143
commit b6d905157f
8 changed files with 296 additions and 9 deletions

View File

@ -0,0 +1,268 @@
# Shop 运行模式文档
## 概述
在智柜宝商店管理系统中每个商店Shop都有一个运行模式Mode属性用于定义商店的业务流程和支付方式。运行模式决定了用户在该商店下单、支付、审批等操作的行为逻辑。
本文档详细介绍了 Shop 运行模式的定义、使用场景、相关 API 接口、前端组件实现以及模式与支付方式的映射关系。
## 模式枚举定义
运行模式使用数字枚举值表示,具体定义如下:
| 数值 | 模式名称 | 描述 |
|------|----------|------|
| 0 | 支付模式 | 用户直接支付完成订单 |
| 1 | 审批模式 | 订单需要管理员审批后才能支付 |
| 2 | 借还模式 | 适用于借用和归还物品的场景 |
| 3 | 会员模式 | 仅限会员使用,可能涉及会员积分或余额 |
| 4 | 耗材模式 | 针对耗材管理场景,支持特定支付方式 |
| 5 | 暂存模式 | 临时存储物品,使用密码打开,无支付环节 |
## API 接口定义
### 数据结构
`src/api/shop/shop.ts` 中定义了与模式相关的数据结构:
```typescript
/** 商店分页查询参数 */
export interface ShopQuery extends BasePageQuery {
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式) */
mode?: number;
}
/** 商店DTO */
export interface ShopDTO {
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式) */
mode?: number;
}
/** 新增商店命令 */
export interface AddShopCommand {
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式) */
mode?: number;
}
/** 更新商店命令 */
export interface UpdateShopCommand {
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式) */
mode?: number;
}
```
### 工具函数
#### `getModeText(mode?: number): string`
将运行模式数值转换为文字描述:
```typescript
// 运行模式文字映射
const modeTextMap = {
0: '支付模式',
1: '审批模式',
2: '借还模式',
3: '会员模式',
4: '耗材模式',
5: '暂存模式'
};
export const getModeText = (mode?: number): string => {
return mode !== undefined ? modeTextMap[mode] || '' : '';
};
```
#### `getBalanceEnableText(balanceEnable?: number): string`
将借呗支付状态转换为文字描述(与模式相关的支付状态):
```typescript
// 借呗支付状态文字映射
const balanceEnableTextMap = {
0: '禁止使用',
1: '正常使用'
};
export const getBalanceEnableText = (balanceEnable?: number): string => {
return balanceEnable !== undefined ? balanceEnableTextMap[balanceEnable] || '' : '';
};
```
## 前端组件实现
### 1. 商店管理表单
文件:`src/views/cabinet/shop/shop-form-modal.vue`
商店新增和编辑表单中包含运行模式选择字段:
```vue
<el-form-item label="运行模式" prop="mode">
<el-select v-model="formData.mode" placeholder="请选择运行模式">
<el-option label="支付模式" :value="0" />
<el-option label="审批模式" :value="1" />
<el-option label="借还模式" :value="2" />
<el-option label="会员模式" :value="3" />
<el-option label="耗材模式" :value="4" />
</el-select>
</el-form-item>
```
表单验证规则:
```typescript
const rules = {
mode: [{ required: true, message: "请选择运行模式", trigger: "change" }],
};
```
### 2. 智能柜体卡片显示
文件:`src/views/cabinet/smart-cabinet-card/index.vue`
在智能柜体卡片中显示柜体所属商店的运行模式:
```vue
<el-descriptions-item class="name">模式:{{ getModeText(item.mode) }}</el-descriptions-item>
```
### 3. 其他使用场景
- `src/views/cabinet/smart-cabinet-card/detail.vue`:柜体详情页显示模式
- `src/views/cabinet/shop/card.vue`:商店卡片显示模式
- `src/views/welcome/index.vue`:欢迎页面可能显示相关信息
## 模式与支付方式映射
### 映射定义
文件:`src/utils/maps/payment.ts`
```typescript
export const modeToPaymentMethodMap = {
0: [0, 3], // 支付模式:微信支付(0)、借呗支付(3)
1: [0, 1], // 审批模式:微信支付(0)、借呗支付(1)
2: [0, 1], // 借还模式:微信支付(0)、借呗支付(1)
3: [0, 3], // 会员模式:微信支付(0)、借呗支付(3)
4: [2], // 耗材模式:要呗支付(2)
5: [], // 暂存模式:无支付方式
};
```
### 支付方式选项
```typescript
export const paymentMethodOptions = [
{ label: '微信支付', value: 0, type: 'primary' },
{ label: '借呗支付', value: 1, type: 'success' },
{ label: '要呗支付', value: 2, type: 'info' },
{ label: '借呗支付', value: 3, type: 'warning' },
];
```
### 动态计算支付方式
在商店表单中,根据选择的运行模式动态显示可用的支付方式:
```typescript
const currentPaymentMethods = computed(() => {
if (typeof formData.value.mode !== 'number') return [];
const methodValues = modeToPaymentMethodMap[formData.value.mode] || [];
return methodValues.map(value => {
const option = paymentMethodOptions.find(item => item.value === value);
return option ? { label: option.label, type: option.type } : null;
}).filter(Boolean);
});
```
模板中使用:
```vue
<el-form-item label="支付方式">
<el-tag v-for="method in currentPaymentMethods" :key="method.label" :type="method.type">
{{ method.label }}
</el-tag>
</el-form-item>
```
## 业务逻辑影响
### 1. 订单流程
- **支付模式0**:用户可直接完成支付
- **审批模式1**:订单提交后需管理员审批,审批通过后方可支付
- **借还模式2**:适用于物品借用和归还,可能有额外的借用期限和归还确认流程
- **会员模式3**:仅限会员使用,可能涉及会员积分抵扣或余额支付
- **耗材模式4**:针对办公耗材等场景,支持特定的要呗支付方式
- **暂存模式5**:临时存储物品,使用密码打开,无支付环节
### 2. 支付方式限制
不同的运行模式限制了可用的支付方式组合,确保业务流程的一致性:
- 支付模式和会员模式支持微信支付和借呗支付类型3
- 审批模式和借还模式支持微信支付和借呗支付类型1
- 耗材模式仅支持要呗支付
- 暂存模式无支付方式
### 3. 权限控制
运行模式可能与用户权限相关联,例如:
- 审批模式需要管理员审批权限
- 会员模式需要会员身份验证
- 借还模式可能需要借用权限审核
## 使用示例
### 获取商店列表并显示模式
```typescript
import { getShopList, getModeText } from '@/api/shop/shop';
// 获取商店列表
const { data } = await getShopList({ mode: 0 }); // 查询支付模式的商店
const shops = data.rows;
// 显示模式文字
shops.forEach(shop => {
console.log(`${shop.shopName}: ${getModeText(shop.mode)}`);
});
```
### 新增商店时设置运行模式
```typescript
import { addShop } from '@/api/shop/shop';
await addShop({
shopName: '测试商店',
corpid: 'corp123',
mode: 0, // 设置为支付模式
balanceEnable: 1,
coverImg: 'https://example.com/image.jpg'
});
```
## 相关文件清单
1. `src/api/shop/shop.ts` - API 接口定义和工具函数
2. `src/views/cabinet/shop/shop-form-modal.vue` - 商店表单组件
3. `src/views/cabinet/shop/index.vue` - 商店管理页面
4. `src/views/cabinet/smart-cabinet-card/index.vue` - 智能柜体卡片页面
5. `src/views/cabinet/smart-cabinet-card/detail.vue` - 柜体详情页面
6. `src/utils/maps/payment.ts` - 支付方式映射配置
7. `src/views/cabinet/shop/card.vue` - 商店卡片组件
8. `src/views/welcome/index.vue` - 欢迎页面
## 注意事项
1. **模式变更影响**:更改商店的运行模式可能影响现有的订单流程和用户权限,需谨慎操作
2. **数据一致性**:模式与支付方式映射关系需要前后端保持一致
3. **默认值处理**:在新增商店时,建议明确设置 mode 值,避免使用 undefined
4. **国际化考虑**如需支持多语言modeTextMap 需要考虑国际化方案
## 未来扩展建议
1. **模式自定义**:支持管理员自定义运行模式的业务流程
2. **组合模式**:支持多种模式组合使用,满足复杂业务场景
3. **模式迁移工具**:提供商店模式变更的批量迁移和影响分析工具
4. **审计日志**:记录商店运行模式的变更历史,便于追踪和审计

View File

@ -52,6 +52,8 @@ export interface CabinetCellDTO {
faceImg?: string; faceImg?: string;
/** 购买人98ab用户ID */ /** 购买人98ab用户ID */
ab98UserId?: number; ab98UserId?: number;
/** 密码字段 */
password?: string;
} }
export interface AddCabinetCellCommand { export interface AddCabinetCellCommand {
@ -71,6 +73,8 @@ export interface AddCabinetCellCommand {
usageStatus: number; usageStatus: number;
/** 可用状态1正常 2故障 */ /** 可用状态1正常 2故障 */
availableStatus: number; availableStatus: number;
/** 密码字段 */
password?: string;
} }
export interface UpdateCabinetCellCommand extends AddCabinetCellCommand { export interface UpdateCabinetCellCommand extends AddCabinetCellCommand {

View File

@ -6,7 +6,7 @@ export interface ShopQuery extends BasePageQuery {
corpid?: string; corpid?: string;
/** 归属类型0-借还柜 1-固资通) */ /** 归属类型0-借还柜 1-固资通) */
belongType?: number; belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 */ /** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式 */
mode?: number; mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */ /** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number; balanceEnable?: number;
@ -21,7 +21,7 @@ export interface ShopDTO {
coverImg?: string; coverImg?: string;
/** 归属类型0-借还柜 1-固资通) */ /** 归属类型0-借还柜 1-固资通) */
belongType?: number; belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 */ /** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式 */
mode?: number; mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */ /** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number; balanceEnable?: number;
@ -37,7 +37,7 @@ export interface AddShopCommand {
coverImg?: string; coverImg?: string;
/** 归属类型0-借还柜 1-固资通) */ /** 归属类型0-借还柜 1-固资通) */
belongType?: number; belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 */ /** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式 */
mode?: number; mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */ /** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number; balanceEnable?: number;
@ -52,7 +52,7 @@ export interface UpdateShopCommand {
coverImg?: string; coverImg?: string;
/** 归属类型0-借还柜 1-固资通) */ /** 归属类型0-借还柜 1-固资通) */
belongType?: number; belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 */ /** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式 */
mode?: number; mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */ /** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number; balanceEnable?: number;
@ -64,7 +64,8 @@ const modeTextMap = {
1: '审批模式', 1: '审批模式',
2: '借还模式', 2: '借还模式',
3: '会员模式', 3: '会员模式',
4: '耗材模式' 4: '耗材模式',
5: '暂存模式'
}; };
// 借呗支付状态文字映射 // 借呗支付状态文字映射

View File

@ -11,4 +11,5 @@ export const modeToPaymentMethodMap = {
2: [0, 1], 2: [0, 1],
3: [0, 3], 3: [0, 3],
4: [2], 4: [2],
5: [],
}; };

View File

@ -17,6 +17,7 @@ export interface FormDTO {
usageStatus: number; usageStatus: number;
stock: number; stock: number;
cellPrice?: number; cellPrice?: number;
password?: string;
} }
const props = defineProps({ const props = defineProps({
@ -46,7 +47,8 @@ const formData = reactive<FormDTO>({
availableStatus: 1, availableStatus: 1,
usageStatus: 1, usageStatus: 1,
stock: 0, stock: 0,
cellPrice: 0 cellPrice: 0,
password: ''
}); });
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
@ -139,6 +141,9 @@ watch(() => props.row, (val) => {
<el-input v-model="formData.cellPrice" placeholder="请输入格口价格" style="width: 120px; margin-right: 10px;" /> <el-input v-model="formData.cellPrice" placeholder="请输入格口价格" style="width: 120px; margin-right: 10px;" />
</el-form-item> </el-form-item>
<el-form-item v-if="props.mode == 5" label="密码" prop="password">
<el-input v-model="formData.password" placeholder="请输入密码(可选)" style="width: 200px;" />
</el-form-item>
<el-form-item v-if="props.row.goodsId" label="商品ID"> <el-form-item v-if="props.row.goodsId" label="商品ID">
<el-input :model-value="props.row.goodsId" disabled /> <el-input :model-value="props.row.goodsId" disabled />

View File

@ -77,6 +77,8 @@ function getModeType(mode: number): "" | "success" | "warning" | "info" | "dange
case 1: return 'info'; case 1: return 'info';
case 2: return 'warning'; case 2: return 'warning';
case 3: return 'danger'; case 3: return 'danger';
case 4: return '';
case 5: return 'danger';
default: return ''; default: return '';
} }
} }

View File

@ -200,6 +200,7 @@ const cancelDelete = () => {
<el-option label="借还模式" :value="2" /> <el-option label="借还模式" :value="2" />
<el-option label="会员模式" :value="3" /> <el-option label="会员模式" :value="3" />
<el-option label="耗材模式" :value="4" /> <el-option label="耗材模式" :value="4" />
<el-option label="暂存模式" :value="5" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="借呗支付" prop="balanceEnable"> <!-- <el-form-item label="借呗支付" prop="balanceEnable">
@ -215,7 +216,7 @@ const cancelDelete = () => {
</el-tag> </el-tag>
</el-form-item> </el-form-item>
<el-form-item label="机柜数量"> <el-form-item label="机柜数量">
{{ props.row.cabinetCount || 0 }} {{ props.row?.cabinetCount || 0 }}
</el-form-item> </el-form-item>
<el-form-item label="二维码"> <el-form-item label="二维码">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
@ -230,7 +231,7 @@ const cancelDelete = () => {
<template #footer> <template #footer>
<el-button @click="handleClose" style="margin-right: 5px;">取消</el-button> <el-button @click="handleClose" style="margin-right: 5px;">取消</el-button>
<el-button <el-button
v-if="formData.shopId && (props.row.cabinetCount || 0) === 0" v-if="formData.shopId && (props.row?.cabinetCount || 0) === 0"
type="danger" type="danger"
@click="handleDelete" @click="handleDelete"
style="margin-right: 5px;"> style="margin-right: 5px;">

View File

@ -440,7 +440,7 @@ onMounted(() => {
<span class="line-number">{{ item.cellNo }}</span> <span class="line-number">{{ item.cellNo }}</span>
</div> </div>
<div class="action-buttons"> <div class="action-buttons">
<el-button v-if="!item.goodsId && (!shopInfo || shopInfo.mode !== 3)" <el-button v-if="!item.goodsId && (!shopInfo || (shopInfo.mode !== 3 && shopInfo.mode !== 5))"
:disabled="!hasPermission('shop:cabinet:write')" link type="success" @click="handleConfigure(item)" :disabled="!hasPermission('shop:cabinet:write')" link type="success" @click="handleConfigure(item)"
class="cell-btn"> class="cell-btn">
商品配置 商品配置
@ -458,6 +458,11 @@ onMounted(() => {
@click="handleAb98ViewDetail(item.ab98UserId, item.name)" class="cell-btn"> @click="handleAb98ViewDetail(item.ab98UserId, item.name)" class="cell-btn">
{{ item.name }} {{ item.name }}
</el-button> </el-button>
<el-button v-if="!item.goodsId && shopInfo && shopInfo.mode == 5"
:disabled="!hasPermission('shop:cabinet:write')" link type="primary" @click="handleEditCell(item)"
class="cell-btn">
格口配置
</el-button>
<!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)" <!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
@click="handleStockConfig(item)"> @click="handleStockConfig(item)">
库存 库存