Compare commits

...

15 Commits

Author SHA1 Message Date
dzq ba27975609 fix: 修复表单验证规则和商品配置逻辑
- 在智能柜体表单中添加柜体名称长度限制
- 修改商品配置中belongType的计算逻辑
2025-06-13 15:40:38 +08:00
dzq e9bde6e00c feat: 添加10格柜配置并优化智能柜详情页
- 在cabinetImgMap中添加10格柜的图片和名称配置
- 新增获取商店详情的API接口
- 将运行模式相关逻辑从智能柜模块移至商店模块
- 智能柜详情页增加商店信息获取和展示
- 优化商品配置前的商店信息校验
2025-06-13 11:51:56 +08:00
dzq 3fa6aa7014 feat(商品详情): 添加店铺名称显示并调整商品详情布局
在商品详情页添加店铺名称字段显示,并调整商品详情布局,增加关联状态、柜体名称和柜体格号信息展示
2025-06-13 09:00:29 +08:00
dzq 63b17eede0 feat(shop): 新增商店卡片视图并优化表单功能
- 添加商店卡片视图组件,支持图片展示和模式状态显示
- 扩展商店接口DTO,增加封面图、运行模式和借呗支付字段
- 优化商店表单,增加封面图上传和运行模式选择功能
- 移除不再使用的商品模式相关代码
- 添加运行模式和借呗支付的文字映射工具函数
2025-06-12 16:15:11 +08:00
dzq 7b274988dd refactor(智能柜卡片详情): 简化单元格按钮显示条件逻辑
移除belongType判断,仅根据goodsId显示对应按钮
2025-06-12 09:18:31 +08:00
dzq 5dcdca0397 feat(smart-cabinet): 添加belongType参数支持商品分类筛选
在ShopConfigModal和CabinetGoodsConfigModal组件中新增belongType参数,用于根据商品所属类型进行筛选。同时移除商品配置模态框中多余的belongType选择器,直接从父组件传递参数。
2025-06-11 17:22:40 +08:00
dzq 1d2cd48a7f feat(商品模式): 添加商品模式字段及相关功能
- 在商店管理页面添加商品模式列显示
- 在商店表单中增加商品模式选择字段
- 更新API接口定义包含商品模式字段
- 在智能柜相关页面统一商品模式显示和编辑功能
2025-06-11 16:25:04 +08:00
dzq 15bb35c029 feat(shop): 添加企业微信ID字段支持
为商品和商店相关接口及页面添加corpid字段,支持企业微信集成
在表单和查询中自动填充当前企业微信ID
修改商品搜索输入框支持回车触发查询
2025-06-09 09:17:18 +08:00
dzq 128afe950e feat(商品管理): 添加商品所属类型字段及筛选功能
- 在商品查询接口和DTO中添加belongType字段
- 在商品列表页和详情页添加所属类型筛选和显示
- 根据所属类型控制编辑按钮的显示(仅智借还商品可编辑)
- 在柜机商品配置弹窗中添加所属类型筛选
2025-06-05 17:30:41 +08:00
dzq c1a1861e09 refactor(smart-cabinet-card): 移除格口号显示注释
清理不再需要的格口号显示代码,保持界面简洁
2025-06-05 08:26:20 +08:00
dzq e5c6da07bd feat(智能柜卡片): 优化智能柜卡片及单元格展示样式
- 在商品图片SVG中添加"小格"文字标识
- 将柜体名称从描述项移至详情按钮文本
- 优化单元格卡片布局,添加虚线分隔线和格口号显示
- 调整单元格操作按钮样式为链接样式并显示商品名称
- 改进单元格信息区域的间距和排版
2025-06-04 16:45:22 +08:00
dzq 9d5f885766 feat(智能柜管理): 重构单元格商品管理界面并新增商品配置模态框
- 将单元格列表从表格布局改为卡片式布局,提升可视化效果
- 新增商品配置模态框用于管理已配置商品的库存和下架操作
- 优化单元格编辑模态框,增加商品信息展示和库存修改功能
- 添加默认商品图片占位符
- 调整分页参数和样式,优化移动端显示效果
2025-06-04 11:50:25 +08:00
dzq 8c8f65be7f feat(商品详情): 添加商品订单记录和编辑功能
- 在商品详情页添加订单记录分页表格,展示关联订单信息
- 新增商品编辑按钮和编辑模态框功能
- 扩展OrderQuery接口添加goodsId字段用于订单查询
- 修复商品详情页点击商品名称跳转错误的问题
2025-06-03 17:34:41 +08:00
dzq 12cef7b84f feat(用户认证): 添加企业微信用户绑定功能并完善商品详情页
- 在登录流程中存储企业微信用户信息到store
- 添加企业微信用户绑定接口及相关类型定义
- 当检测到未绑定用户时显示绑定对话框
- 新增商品详情路由及页面,优化商品列表交互
- 改进商品卡片样式和点击跳转逻辑
2025-06-03 16:25:51 +08:00
dzq 8f6ae14e47 feat: 更新系统名称并优化智能柜功能
- 将系统名称从"智借还"更改为"智柜通"
- 在智能柜模块中添加运行模式和借呗支付功能
- 优化商品管理界面为卡片式布局
- 调整智能柜详情页展示信息
- 移除商品分类相关代码
- 修改部分对话框为抽屉式展示
2025-06-02 16:54:24 +08:00
32 changed files with 1594 additions and 258 deletions

View File

@ -7,7 +7,7 @@
<meta name="renderer" content="webkit" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>借还</title>
<title>柜通</title>
<link rel="icon" href="/favicon.ico" />
<script>
window.process = {};

View File

@ -0,0 +1,8 @@
<svg width="80" height="80" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784"
stroke-width="2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
fill="#2E7D32" text-anchor="middle">空闲</text>
<text x="50" y="75" font-family="Arial, sans-serif" font-size="12"
fill="#2E7D32" text-anchor="middle">小格</text>
</svg>

After

Width:  |  Height:  |  Size: 482 B

View File

@ -1,6 +1,6 @@
{
"Version": "4.4.0",
"Title": "智借还",
"Title": "智柜通",
"FixedHeader": true,
"HiddenSideBar": false,
"MultiTagsCache": false,

View File

@ -84,6 +84,12 @@ export interface UpdateAb98UserCommand extends AddAb98UserCommand {
ab98UserId: number;
}
export interface BindQyUserCommand {
qyUserId: number;
name: string;
idNum: string;
}
export const getAb98UserListApi = (params: Ab98UserQuery) => {
return http.request<ResponseData<PageDTO<Ab98UserDTO>>>("get", "/ab98/users", { params });
};
@ -102,4 +108,8 @@ export const deleteAb98UserApi = (ids: number[]) => {
export const getAb98UserDetailApi = (id: number) => {
return http.request<ResponseData<Ab98UserDetailDTO>>("get", `/ab98/users/detail/${id}`);
};
export const bindQyUserApi = (data: BindQyUserCommand) => {
return http.request<ResponseData<void>>("post", "/ab98/users/bindQyUser", { data });
};

View File

@ -45,6 +45,10 @@ export interface SmartCabinetDTO {
belongType?: number;
usedCells?: number;
availableCells?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式) */
mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number;
}
/**
@ -69,6 +73,10 @@ export interface AddSmartCabinetCommand {
location: number;
/** 归属类型0-借还柜 1-固资通) */
belongType: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式) */
mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number;
}
/**
@ -95,6 +103,10 @@ export interface UpdateSmartCabinetCommand {
location?: number;
/** 归属类型0-借还柜 1-固资通) */
belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式) */
mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number;
}
export interface AllCabinetDataDTO {
@ -108,6 +120,13 @@ export const getSmartCabinetList = (params?: SmartCabinetQuery) => {
});
};
export const getSmartCabinetListQuery = (params?: SmartCabinetQuery) => {
return http.request<ResponseData<SmartCabinetDTO[]>>('get', '/cabinet/smartCabinet/list', {
params
});
};
export const addSmartCabinet = (data: AddSmartCabinetCommand) => {
return http.request<ResponseData<void>>('post', '/cabinet/smartCabinet', {
data
@ -134,4 +153,20 @@ export const allCabinets = () => {
export const getSmartCabinetDetailApi = (cabinetId: number) => {
return http.request<ResponseData<SmartCabinetDTO>>("get", `/cabinet/smartCabinet/detail/${cabinetId}`);
};
};
/**
*
* @param balanceEnable
*/
export const getBalanceEnableText = (balanceEnable?: number) => {
switch (balanceEnable) {
case 0:
return '禁止使用';
case 1:
return '正常使用';
default:
return '未知状态';
}
};

View File

@ -37,6 +37,8 @@ export type TokenDTO = {
token: string;
/** 当前登录的用户 */
currentUser: CurrentLoginUserDTO;
/** 企业微信用户信息 */
qyUser: QyUserLoginDTO;
};
export type CurrentLoginUserDTO = {
@ -121,4 +123,68 @@ type qyUserinfoQuery = {
/** 获取企业微信访问用户身份接口 */
export const getQyUserinfo = (params: qyUserinfoQuery) => {
return http.request<ResponseData<string>>("get", "/getQyUserinfo", { params });
};
};
export interface QyUserLoginDTO {
/** 用户ID */
id?: number;
/** 全局唯一ID */
openUserid?: string;
/** 企业用户ID */
userid?: string;
/** 汇邦云用户ID */
ab98UserId?: number;
/** 用户姓名 */
name?: string;
/** 手机号码 */
mobile?: string;
/** 所属部门 */
department?: string;
/** 部门排序 */
userOrder?: string;
/** 职务信息 */
position?: string;
/** 性别 */
gender?: string;
/** 邮箱 */
email?: string;
/** 企业邮箱 */
bizMail?: string;
/** 部门负责人 */
isLeaderInDept?: string;
/** 直属上级 */
directLeader?: string;
/** 头像地址 */
avatar?: string;
/** 座机号码 */
telephone?: string;
/** 别名 */
alias?: string;
/** 激活状态 */
status?: string;
/** 个人二维码 */
qrCode?: string;
/** 操作人 */
operator?: string;
/** 有效状态 */
enableStatus?: string;
/** 创建时间 */
createTimeStr?: string;
/** 企业ID */
corpid?: string;
/** 应用ID */
appid?: string;
/** 用户余额 */
balance?: number;
/** 已使用用户余额 */
useBalance?: number;
/** 用户余额额度 */
balanceLimit?: number;
/** 系统角色ID */
sysRoleId?: number;
/** 角色ID */
roleId?: number;
/** 角色名称 */
roleName?: string;
}

View File

@ -1,11 +1,19 @@
import { http } from "@/utils/http";
export interface GoodsQuery extends BasePageQuery {
/** 商品名称 */
goodsName?: string;
categoryId?: number;
/** 商品状态0下架 1上架 */
status?: number;
/** 商品ID */
goodsId?: number;
/** 自动审批开关0关闭 1开启 */
autoApproval?: number;
/** 所属类型0智借还 1固资通 */
belongType?: number;
/** 企业微信ID */
corpid: string;
}
/** 商品DTO */
@ -16,6 +24,8 @@ export interface GoodsDTO {
goodsName: string;
/** 商品分类ID */
categoryId: number;
/** 企业微信ID */
corpid: string;
/** 商品价格 */
price: number;
/** 库存数量 */
@ -46,10 +56,14 @@ export interface GoodsDTO {
cellNo?: number;
/** 单元格编号(字符串形式) */
cellNoStr?: string;
/** 所属店铺名称 */
shopNameStr?: string;
/** 总库存量(含所有仓库) */
totalStock?: number;
/** 商品使用说明 */
usageInstruction?: string;
/** 所属类型0智借还 1固资通 */
belongType: number;
}
/** 商品请求参数 */
@ -65,6 +79,8 @@ export interface GoodsRequest {
remark?: string;
/** 商品使用说明 */
usageInstruction?: string;
/** 企业微信ID */
corpid: string;
}
/** 获取商品列表 */

View File

@ -15,6 +15,7 @@ export interface OrderQuery extends BasePageQuery {
cabinetId?: number;
/** 格口id */
cellId?: number;
goodsId?: number;
/**
*
* @remarks

View File

@ -3,24 +3,91 @@ import { http } from '@/utils/http';
/** 商店分页查询参数 */
export interface ShopQuery extends BasePageQuery {
shopName?: string;
corpid?: string;
/** 归属类型0-借还柜 1-固资通) */
belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式) */
mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number;
}
/** 商店DTO */
export interface ShopDTO {
shopId: number;
shopName: string;
corpid?: string;
/** 封面图URL */
coverImg?: string;
/** 归属类型0-借还柜 1-固资通) */
belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式) */
mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number;
}
/** 新增商店命令 */
export interface AddShopCommand {
shopName: string;
corpid: string;
/** 封面图URL */
coverImg?: string;
/** 归属类型0-借还柜 1-固资通) */
belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式) */
mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number;
}
/** 更新商店命令 */
export interface UpdateShopCommand {
corpid: string;
shopId: number;
shopName: string;
}
/** 封面图URL */
coverImg?: string;
/** 归属类型0-借还柜 1-固资通) */
belongType?: number;
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式) */
mode?: number;
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable?: number;
};
// 运行模式文字映射
const modeTextMap = {
0: '支付模式',
1: '审批模式',
2: '借还模式',
3: '会员模式',
4: '耗材模式'
};
// 借呗支付状态文字映射
const balanceEnableTextMap = {
0: '禁止使用',
1: '正常使用'
};
/**
*
* @param mode
* @returns
*/
export const getModeText = (mode?: number): string => {
return mode !== undefined ? modeTextMap[mode] || '' : '';
};
/**
*
* @param balanceEnable
* @returns
*/
export const getBalanceEnableText = (balanceEnable?: number): string => {
return balanceEnable !== undefined ? balanceEnableTextMap[balanceEnable] || '' : '';
};
/** 获取商店列表 */
export const getShopList = (params?: ShopQuery) => {
@ -29,6 +96,11 @@ export const getShopList = (params?: ShopQuery) => {
});
};
/** 获取商店详情 */
export const getShopById = (id: number) => {
return http.request<ResponseData<ShopDTO>>('get', `/shop/shops/${id}`);
};
/** 新增商店 */
export const addShop = (data: AddShopCommand) => {
return http.request<ResponseData<void>>('post', '/shop/shops', {

View File

@ -130,6 +130,7 @@ router.beforeEach(async (to: ToRouteType, _from, next) => {
});
// 登录成功后 将token存储到sessionStorage中
setTokenFromBackend(data);
wxStore.setQyUser(data.qyUser);
// 获取后端路由
await initRouter();
next({ path: getTopMenu(true).path });

View File

@ -39,6 +39,14 @@ export default {
meta: {
title: "用户详情"
}
},
{
path: "/shop/goods/detail",
name: "GoodsDetail",
component: () => import("@/views/shop/goods/detail.vue"),
meta: {
title: "商品详情"
}
}
]
} as RouteConfigsTable;

View File

@ -2,6 +2,7 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { store } from "@/store";
import { QyUserLoginDTO } from "@/api/common/login";
export const useWxStore = defineStore("wx", () => {
@ -15,12 +16,18 @@ export const useWxStore = defineStore("wx", () => {
const userid = ref<string>("")
// 初始化
const isInit = ref<boolean>(false);
const qyUser = ref<QyUserLoginDTO>(null);
// 设置 userid
const setUserid = (id: string) => {
userid.value = id
}
const setQyUser = (user: QyUserLoginDTO) => {
if (!user) return;
qyUser.value = user;
}
const initWx = () => {
if (isInit.value) return;
isInit.value = true;
@ -49,7 +56,10 @@ export const useWxStore = defineStore("wx", () => {
}
}
return { corpid, code, state, userid, isInit, setUserid, handleWxCallback, initWx }
return {
corpid, code, state, userid, isInit, qyUser,
setUserid, handleWxCallback, initWx, setQyUser
}
})
/**

View File

@ -35,4 +35,8 @@ export const CabinetImgMap = {
img: "cabinet_4.jpg",
name: "4格柜",
},
10: {
img: "cabinet_16.jpg",
name: "10格柜",
},
}

View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { updateCabinetCell } from "@/api/cabinet/cabinet-cell";
import { updateCabinetCell, clearGoodsCells } from "@/api/cabinet/cabinet-cell";
import Confirm from "@iconify-icons/ep/check";
import type { FormRules } from 'element-plus';
@ -15,6 +15,7 @@ export interface FormDTO {
cellType: number;
availableStatus: number;
usageStatus: number;
stock: number;
}
const props = defineProps({
@ -38,7 +39,8 @@ const formData = reactive<FormDTO>({
pinNo: null,
cellType: 1,
availableStatus: 1,
usageStatus: 1
usageStatus: 1,
stock: 0
});
const rules = reactive<FormRules>({
@ -86,6 +88,22 @@ const closeDialog = () => {
emit('update:modelValue', false);
};
async function handleClearGoods() {
try {
await ElMessageBox.confirm(
`确认要下架${props.row.goodsName}吗?`,
'警告',
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
);
await clearGoodsCells(props.row.cellId);
ElMessage.success('商品下架成功');
emit('refresh');
closeDialog();
} catch (error) {
console.error('操作取消或失败', error);
}
}
watch(() => props.row, (val) => {
if (val) {
Object.assign(formData, val);
@ -95,18 +113,10 @@ watch(() => props.row, (val) => {
<template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="柜体ID" prop="cabinetId">
<el-input v-model.number="formData.cabinetId" placeholder="请输入柜体ID" />
</el-form-item>
<el-form-item label="主板ID" prop="mainboardId">
<el-input v-model.number="formData.mainboardId" placeholder="请输入主板ID" />
</el-form-item>
<el-form-item label="单元格号" prop="cellNo">
<el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
</el-form-item>
<el-form-item label="针脚号" prop="pinNo">
<el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
</el-form-item>
@ -120,23 +130,35 @@ watch(() => props.row, (val) => {
</el-select>
</el-form-item>
<el-form-item label="使用状态" prop="usageStatus">
<el-select v-model="formData.usageStatus" placeholder="请选择状态">
<el-option label="空闲" :value="1" />
<el-option label="已占用" :value="2" />
</el-select>
<el-form-item v-if="props.row.goodsId" label="商品ID">
<el-input :model-value="props.row.goodsId" disabled />
</el-form-item>
<el-form-item v-if="props.row.goodsId" label="商品名称">
<el-input :model-value="props.row.goodsName" disabled />
</el-form-item>
<el-form-item v-if="props.row.goodsId" label="商品图片">
<el-image :src="props.row.coverImg" style="width: 100px; height: 100px" fit="contain" />
</el-form-item>
<el-form-item v-if="props.row.goodsId" label="价格">
<el-input :model-value="props.row.price" disabled />
</el-form-item>
<el-form-item v-if="props.row.goodsId" label="库存" prop="stock">
<el-input-number v-model="formData.stock" :min="0" :max="1000" class="stock-input" />
</el-form-item>
<el-form-item label="可用状态" prop="availableStatus">
<el-select v-model="formData.availableStatus" placeholder="请选择状态">
<el-option label="正常" :value="1" />
<el-option label="故障" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
提交
<el-button type="primary" @click="handleConfirm" class="save-btn">
保存修改
</el-button>
<el-button v-if="props.row.goodsId" type="danger" @click="handleClearGoods" class="clear-btn">
下架商品
</el-button>
</el-form-item>
</el-form>
</template>
</template>
<style scoped lang="scss">
.save-btn, .clear-btn {
margin-right: 10px;
}
</style>

View File

@ -0,0 +1,263 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getShopList, type ShopDTO, ShopQuery, getModeText, getBalanceEnableText } from "@/api/shop/shop";
import { type PaginationProps } from "@pureadmin/table";
import { useRouter } from "vue-router";
import { useWxStore } from "@/store/modules/wx";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import View from "@iconify-icons/ep/view";
import AddFill from "@iconify-icons/ri/add-circle-line";
import ShopFormModal from "./shop-form-modal.vue";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
defineOptions({
name: "ShopCard"
});
const router = useRouter();
const wxStore = useWxStore();
const formRef = ref();
const modalVisible = ref(false);
const currentRow = ref<ShopDTO | null>(null);
const searchFormParams = ref<ShopQuery>({
shopName: "",
corpid: wxStore.corpid
});
const pageLoading = ref(false);
const dataList = ref<ShopDTO[]>([]);
const pagination = ref<PaginationProps>({
total: 0,
pageSize: 12,
currentPage: 1,
background: true
});
async function onSearch() {
pagination.value.currentPage = 1;
getList();
}
async function getList() {
try {
pageLoading.value = true;
const { data } = await getShopList({
...searchFormParams.value,
corpid: wxStore.corpid,
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
});
dataList.value = data.rows;
pagination.value.total = data.total;
} finally {
pageLoading.value = false;
}
}
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
onSearch();
};
const handleViewDetail = (row: ShopDTO) => {
currentRow.value = row;
modalVisible.value = true;
};
function getModeType(mode: number): "" | "success" | "warning" | "info" | "danger" {
switch (mode) {
case 0: return 'success';
case 1: return 'info';
case 2: return 'warning';
case 3: return 'danger';
default: return '';
}
}
function getBalanceType(enable: number): "" | "success" | "warning" | "info" | "danger" {
return enable == 1 ? 'success' : 'danger';
}
onMounted(() => {
getList();
});
</script>
<template>
<div class="main">
<div class="float-right w-full">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<el-form-item label="" prop="shopName">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入地址名称"
clearable class="!w-[200px]" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
搜索
</el-button>
</el-form-item>
<el-form-item class="space-item">
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true; currentRow = null"
style="margin-right: 10px;">
新增地址
</el-button>
</el-form-item>
</el-form>
<div class="grid-container">
<el-row :gutter="12">
<el-col v-for="(item, index) in dataList" :key="item.shopId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
<el-card class="cabinet-card" :body-style="{ padding: '8px 10px' }">
<div class="card-content">
<img v-if="item.coverImg" :src="item.coverImg" alt="" class="cabinet-image">
<svg v-if="!item.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100"
class="cabinet-image">
<!-- 背景浅灰色填充模拟图片容器 -->
<rect width="100%" height="100%" fill="#f8f8f8" rx="4" ry="4" /> <!-- 可选圆角适配卡片风格 -->
<!-- 图片图标简化的图片符号矩形+交叉线直观关联图片 -->
<g stroke="#ccc" stroke-width="2" fill="none">
<rect x="20" y="10" width="120" height="65" /> <!-- 图片框 -->
<line x1="20" y1="10" x2="140" y2="75" /> <!-- 对角线1 -->
<line x1="140" y1="10" x2="20" y2="75" /> <!-- 对角线2 -->
</g>
<!-- 说明文字明确提示未设置图片居中对齐 -->
<text x="50%" y="92" font-size="12" fill="#888" text-anchor="middle" font-family="Arial, sans-serif">
未设置图片
</text>
</svg>
<el-descriptions class="cabinet-info" :column="1">
<!-- <el-descriptions-item class="type">模式{{ item.belongType === 0 ? '借还模式' : '固资模式' }}</el-descriptions-item> -->
<el-descriptions-item class="mode">运行模式<el-tag :type="getModeType(item.mode)">{{ getModeText(item.mode) }}</el-tag></el-descriptions-item>
<el-descriptions-item class="balance">借呗支付<el-tag :type="getBalanceType(item.balanceEnable)">{{ getBalanceEnableText(item.balanceEnable) }}</el-tag></el-descriptions-item>
</el-descriptions>
</div>
<el-divider class="divider" />
<el-button class="detail-btn" link @click="handleViewDetail(item)">
{{ item.shopName }}
</el-button>
</el-card>
</el-col>
</el-row>
<div class="pagination-wrapper">
<el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
:total="pagination.total" v-model:current-page="pagination.currentPage" @current-change="getList"
@size-change="getList" />
</div>
</div>
</div>
<shop-form-modal v-model:visible="modalVisible" :row="currentRow" @refresh="getList" />
</div>
</template>
<style scoped lang="scss">
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
margin-right: 12px;
}
}
:deep(.el-descriptions__cell) {
padding-bottom: 1px !important;
}
.cabinet-card {
margin-bottom: 12px;
min-height: 190px;
display: flex;
flex-direction: column;
justify-content: space-between;
.cabinet-image {
width: 50%;
height: 130px;
padding: 0 3px;
object-fit: contain;
border-radius: 4px;
margin-bottom: 10px;
}
.card-content {
flex: 1;
margin: 0px;
display: flex;
flex-direction: row;
.cabinet-info {
text-align: left;
padding: 16px 0px;
.name,
.type,
.shop,
.location,
.template {
width: 100%;
font-size: 14px;
color: #606266;
margin-bottom: 12px;
line-height: 1;
text-align: left;
}
.name {
width: 100%;
font-weight: 500;
color: #303133;
}
}
}
.divider {
margin: 5px 0px;
}
.detail-btn {
width: 100%;
border: 0;
margin-top: auto;
padding: 8px 0;
&:hover {
color: var(--el-color-primary);
}
}
}
.grid-container {
margin: 12px 0;
position: relative;
.el-row {
margin-bottom: -20px;
}
}
.pagination-wrapper {
position: relative;
background: var(--el-bg-color);
padding: 8px 12px;
margin-top: 20px;
text-align: center;
:deep(.el-pagination) {
margin: 0;
padding: 4px 0;
}
}
.space-item {
flex: 1;
width: 100%;
}
</style>

View File

@ -13,11 +13,13 @@ import { ElMessage, ElMessageBox } from "element-plus";
import ShopFormModal from "./shop-form-modal.vue";
import ReQrcode from "@/components/ReQrcode";
import { copyTextToClipboard } from "@pureadmin/utils";
import { useWxStore } from "@/store/modules/wx";
defineOptions({
name: "Shop"
});
const wxStore = useWxStore();
const formRef = ref();
const tableRef = ref();
const modalVisible = ref(false);
@ -28,6 +30,7 @@ const handleRefresh = () => {
};
const searchFormParams = ref<ShopQuery>({
corpid: wxStore.corpid,
shopName: ""
});
@ -48,6 +51,7 @@ const getList = async () => {
loading.value = true;
const { data } = await getShopList({
...searchFormParams.value,
corpid: wxStore.corpid,
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
});
@ -162,6 +166,11 @@ getList();
<el-table-column type="selection" width="55" />
<el-table-column label="地址ID" prop="shopId" width="100" />
<el-table-column label="地址名称" prop="shopName" />
<el-table-column label="商品模式" prop="belongType" width="120">
<template #default="{ row }">
{{ row.belongType === 0 ? '借还模式' : '固资模式' }}
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEdit(row)">

View File

@ -1,7 +1,10 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { ref, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { addShop, updateShop, ShopDTO, UpdateShopCommand } from "@/api/shop/shop";
import { addShop, updateShop, ShopDTO, UpdateShopCommand, AddShopCommand } from "@/api/shop/shop";
import { useWxStore } from "@/store/modules/wx";
import Upload from "@iconify-icons/ep/upload";
const { VITE_APP_BASE_API } = import.meta.env;
const props = defineProps({
visible: {
@ -16,14 +19,25 @@ const props = defineProps({
const emit = defineEmits(["update:visible", "refresh"]);
const wxStore = useWxStore();
const formRef = ref();
const formData = ref<UpdateShopCommand>({
corpid: wxStore.corpid,
shopId: 0,
shopName: ""
shopName: "",
belongType: undefined,
mode: undefined,
balanceEnable: undefined,
coverImg: ""
});
const rules = {
shopName: [{ required: true, message: "请输入地址名称", trigger: "blur" }]
shopName: [{ required: true, message: "请输入地址名称", trigger: "blur" }],
belongType: [{ required: true, message: "请选择商品模式", trigger: "change" }],
mode: [{ required: true, message: "请选择运行模式", trigger: "change" }],
balanceEnable: [{ required: true, message: "请选择借呗支付状态", trigger: "change" }],
coverImg: [{ required: true, message: "请上传封面图", trigger: "change" }]
};
watch(
@ -33,16 +47,27 @@ watch(
if (props.row?.shopId) {
formData.value = {
...props.row,
shopId: props.row.shopId
shopId: props.row.shopId,
corpid: props.row.corpid,
belongType: props.row.belongType,
mode: props.row.mode,
balanceEnable: props.row.balanceEnable,
coverImg: props.row.coverImg || ""
};
} else {
formData.value = {
shopId: 0,
shopName: ""
shopName: "",
corpid: wxStore.corpid,
belongType: undefined,
mode: undefined,
balanceEnable: undefined,
coverImg: ""
};
}
}
}
},
{ immediate: true }
);
const handleSubmit = async () => {
@ -67,11 +92,27 @@ const handleSubmit = async () => {
const handleClose = () => {
emit("update:visible", false);
};
const handleAvatarSuccess = (response) => {
formData.value.coverImg = response.data.url;
};
const beforeAvatarUpload = (rawFile) => {
if (!['image/jpeg', 'image/png'].includes(rawFile.type)) {
ElMessage.error('封面图必须是 JPG/PNG 格式!');
return false;
}
if (rawFile.size > 50 * 1024 * 1024) {
ElMessage.error('封面图大小不能超过 50MB!');
return false;
}
return true;
};
</script>
<template>
<el-dialog :title="formData.shopId ? '编辑地址' : '新增地址'" :model-value="visible" @update:model-value="handleClose"
width="600px">
<el-drawer :title="formData.shopId ? '编辑地址' : '新增地址'" :model-value="visible" @update:model-value="handleClose"
size="600px" direction="rtl">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="地址ID" prop="shopId" v-if="formData.shopId">
<el-input v-model="formData.shopId" :disabled="true" />
@ -79,10 +120,83 @@ const handleClose = () => {
<el-form-item label="地址名称" prop="shopName">
<el-input v-model="formData.shopName" placeholder="请输入地址名称" />
</el-form-item>
<el-form-item label="封面图" prop="coverImg">
<el-upload class="avatar-uploader" :action="VITE_APP_BASE_API + '/file/upload'" :show-file-list="false"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="formData.coverImg" :src="formData.coverImg" class="avatar" />
<svg v-if="!formData.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100"
class="cabinet-image">
<!-- 背景浅灰色填充模拟图片容器 -->
<rect width="100%" height="100%" fill="#f8f8f8" rx="4" ry="4" /> <!-- 可选圆角适配卡片风格 -->
<!-- 图片图标简化的图片符号矩形+交叉线直观关联图片 -->
<g stroke="#ccc" stroke-width="2" fill="none">
<rect x="20" y="10" width="120" height="65" /> <!-- 图片框 -->
<line x1="20" y1="10" x2="140" y2="75" /> <!-- 对角线1 -->
<line x1="140" y1="10" x2="20" y2="75" /> <!-- 对角线2 -->
</g>
<!-- 说明文字明确提示未设置图片居中对齐 -->
<text x="50%" y="92" font-size="12" fill="#888" text-anchor="middle" font-family="Arial, sans-serif">
未设置图片
</text>
</svg>
</el-upload>
</el-form-item>
<!-- <el-form-item label="商品模式" prop="belongType">
<el-select v-model="formData.belongType" placeholder="请选择归属类型">
<el-option label="借还模式" :value="0" />
<el-option label="固资模式" :value="1" />
</el-select>
</el-form-item> -->
<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>
<el-form-item label="借呗支付" prop="balanceEnable">
<el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
<el-option label="正常使用" :value="1" />
<el-option label="禁止使用" :value="0" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button @click="handleClose" style="margin-right: 5px;">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</template>
</el-drawer>
</template>
<style scoped>
.avatar-uploader {
:deep(.el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
&:hover {
border-color: var(--el-color-primary);
}
}
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.cabinet-image {
width: 100%;
height: 100%;
padding: 0;
object-fit: contain;
border-radius: 4px;
}
</style>

View File

@ -0,0 +1,117 @@
<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { changeGoodsCellsStock, clearGoodsCells } from "@/api/cabinet/cabinet-cell";
import { getGoodsInfo } from "@/api/shop/goods";
const props = defineProps({
cellId: {
type: Number,
required: true
},
goodsId: {
type: Number,
required: true
},
goodsName: {
type: String,
required: true
},
currentStock: {
type: Number,
required: true
},
coverImg: {
type: String,
required: true
},
price: {
type: Number,
required: true
}
});
const emit = defineEmits(['refresh', 'update:modelValue']);
const closeModal = () => {
emit('update:modelValue', false);
};
const stockInput = ref(props.currentStock);
const isEditing = ref(false);
async function handleStockChange() {
try {
const { data } = await getGoodsInfo(props.goodsId);
const remainingStock = data.stock - data.totalStock + props.currentStock;
if (stockInput.value > remainingStock) {
ElMessage.warning('分配数量不能超过剩余库存');
stockInput.value = remainingStock;
return;
}
await changeGoodsCellsStock(props.cellId, stockInput.value);
ElMessage.success('库存更新成功');
emit('refresh');
isEditing.value = false;
} catch (error) {
console.error('库存调整失败', error);
}
}
async function handleClearGoods() {
try {
await ElMessageBox.confirm(
`确认要下架${props.goodsName}吗?`,
'警告',
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
);
await clearGoodsCells(props.cellId);
ElMessage.success('商品下架成功');
emit('refresh');
closeModal();
} catch (error) {
console.error('操作取消或失败', error);
}
}
</script>
<template>
<div class="config-modal">
<el-descriptions :column="1" border>
<el-descriptions-item label="商品ID" >{{ props.goodsId }}</el-descriptions-item>
<el-descriptions-item label="商品名称">{{ props.goodsName }}</el-descriptions-item>
<el-descriptions-item label="商品图片">
<el-image :src="coverImg" style="width: 100px; height: 100px" fit="contain" />
</el-descriptions-item>
<el-descriptions-item label="价格">{{ price }}</el-descriptions-item>
<el-descriptions-item label="当前库存">
<el-input-number v-model="stockInput" :min="0" :max="1000" :disabled="!isEditing" class="stock-input" />
<el-button v-if="!isEditing" type="primary" size="small" @click="isEditing = true">修改</el-button>
<el-button v-if="isEditing" type="success" size="small" @click="handleStockChange">保存</el-button>
</el-descriptions-item>
</el-descriptions>
<div class="action-buttons">
<el-button type="danger" @click="handleClearGoods">
下架商品
</el-button>
</div>
</div>
</template>
<style scoped lang="scss">
.config-modal {
padding: 20px;
}
.action-buttons {
margin-top: 20px;
display: flex;
justify-content: space-around;
}
.stock-input {
margin-right: 12px;
}
</style>

View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSmartCabinetDetailApi, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
import { getSmartCabinetDetailApi, type SmartCabinetDTO, getBalanceEnableText } from "@/api/cabinet/smart-cabinet";
import { CabinetCellQuery, changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { CabinetImgMap } from "@/utils/cabinetImgMap";
@ -9,6 +9,7 @@ import GatewayConfigModal from "@/views/cabinet/smart-cabinet/GatewayConfigModal
import ShopConfigModal from "@/views/cabinet/smart-cabinet/ShopConfigModal.vue";
import MainCabinetConfigModal from "@/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue";
import CabinetGoodsConfigModal from "@/views/shop/cabinet-goods/cabinet-goods-config-modal.vue";
import ConfiguredGoodsModal from "./configured-goods-modal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
import EditPen from "@iconify-icons/ep/edit-pen";
@ -21,6 +22,7 @@ import CellEditModal from "@/views/cabinet/cabinet-cell/cell-edit-modal.vue";
import { getGoodsInfo } from "@/api/shop/goods";
import EditCabinetDrawer from "./edit-cabinet-drawer.vue";
import { CabinetMainboardDTO, deleteMainboard, getMainboardList, updateMainboard } from "@/api/cabinet/mainboards";
import { getShopById, ShopDTO, getModeText } from "@/api/shop/shop";
defineOptions({
name: "SmartCabinetDetail"
@ -36,6 +38,19 @@ const cabinetInfo = ref<SmartCabinetDTO>({
lockControlNo: 0,
location: 0
});
const shopInfo = ref<ShopDTO>({
shopId: 0,
shopName: "",
corpid: '',
/** 封面图URL */
coverImg: '',
/** 归属类型0-借还柜 1-固资通) */
belongType:0,
/** 运行模式0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式) */
mode: -1,
/** 借呗支付1-正常使用 0-禁止使用) */
balanceEnable: 1,
});
const loading = ref(false);
const activeTab = ref('cells');
const mainboardList = ref<CabinetMainboardDTO[]>([]);
@ -54,18 +69,28 @@ const searchCellParams = ref<CabinetCellQuery>({
goodsName: null
});
const cellPagination = ref({
pageSize: 5,
pageSize: 18,
currentPage: 1,
total: 0
});
const goodsConfigVisible = ref(false);
const configuredGoodsVisible = ref(false);
const currentCellId = ref<number>();
const cellFormVisible = ref(false);
const cellEditVisible = ref(false);
function handleConfigure(row: CabinetCellDTO) {
currentCellId.value = row.cellId;
goodsConfigVisible.value = true;
if (row.goodsId) {
currentCell.value = row;
configuredGoodsVisible.value = true;
} else {
if (shopInfo.value && shopInfo.value.shopId) {
currentCellId.value = row.cellId;
goodsConfigVisible.value = true;
} else {
ElMessage.error('请先配置机柜所属地址!');
}
}
}
async function handleStockConfig(row: CabinetCellDTO) {
@ -128,6 +153,11 @@ async function fetchCabinetDetail() {
loading.value = true;
const { data } = await getSmartCabinetDetailApi(cabinetId.value);
cabinetInfo.value = data;
//
if (cabinetInfo.value.shopId) {
const { data: shopData } = await getShopById(cabinetInfo.value.shopId);
shopInfo.value = shopData;
}
} finally {
loading.value = false;
}
@ -257,32 +287,13 @@ onMounted(() => {
<el-divider />
<el-descriptions class="cabinet-details" :column="1" border>
<el-descriptions-item label="柜体ID">{{ cabinetInfo.cabinetId }}</el-descriptions-item>
<el-descriptions-item label="柜体类型">
{{ cabinetInfo.cabinetType === 0 ? '主柜' : '副柜' }}
</el-descriptions-item>
<el-descriptions-item label="模板">
{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-' }}
</el-descriptions-item>
<el-descriptions-item label="归属商店">
{{ cabinetInfo.shopName || '-' }}
<el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="shopConfigVisible = true">
配置
</el-button>
</el-descriptions-item>
<el-descriptions-item label="MQTT网关">
{{ cabinetInfo.mqttServerId || '-' }}
<el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
@click="gatewayConfigVisible = true">
配置
</el-button>
</el-descriptions-item>
<el-descriptions-item label="归属主柜" v-if="cabinetInfo.cabinetType === 1">
{{ cabinetInfo.mainCabinetName || '-' }}
<el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="mainCabinetConfigVisible = true">
配置
</el-button>
</el-descriptions-item>
<el-descriptions-item label="名称">{{ cabinetInfo.cabinetName }}</el-descriptions-item>
<el-descriptions-item label="模式">{{ getModeText(shopInfo.mode) }}</el-descriptions-item>
<el-descriptions-item label="格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
}}</el-descriptions-item>
<el-descriptions-item label="已用">{{ cabinetInfo.usedCells || '0' }}</el-descriptions-item>
<el-descriptions-item label="未用">{{ cabinetInfo.availableCells || '0' }}</el-descriptions-item>
<el-descriptions-item label="柜址">{{ cabinetInfo.shopName || '-' }}</el-descriptions-item>
</el-descriptions>
</el-card>
@ -302,13 +313,23 @@ onMounted(() => {
</el-button>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item label="主柜ID">{{ cabinetInfo.mainCabinet || '-' }}</el-descriptions-item>
<el-descriptions-item label="主柜名称">{{ cabinetInfo.mainCabinetName || '-' }}</el-descriptions-item>
<!-- <el-descriptions-item label="归属类型">
{{ cabinetInfo.belongType === 0 ? '借还柜' : '固资通' }}
<el-descriptions-item label="柜体名称">{{ cabinetInfo.cabinetName || '-' }}</el-descriptions-item>
<el-descriptions-item label="运行模式">{{ getModeText(shopInfo.mode) }}</el-descriptions-item>
<el-descriptions-item label="柜体格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
}}</el-descriptions-item>
<el-descriptions-item label="柜体地址">{{ cabinetInfo.shopName || '-' }}
<el-button type="success" link @click="shopConfigVisible = true">
配置
</el-button></el-descriptions-item>
<el-descriptions-item label="柜体网关">{{ cabinetInfo.mqttServerId || '-' }}
<el-button type="warning" link @click="gatewayConfigVisible = true">
配置
</el-button></el-descriptions-item>
<el-descriptions-item label="借呗支付">{{ getBalanceEnableText(shopInfo.balanceEnable)
}}</el-descriptions-item>
<!-- <el-descriptions-item label="商品模式">
{{ cabinetInfo.belongType === 0 ? '借还模式' : '固资模式' }}
</el-descriptions-item> -->
<el-descriptions-item label="MQTT服务器ID">{{ cabinetInfo.mqttServerId || '-' }}</el-descriptions-item>
<el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
</el-descriptions>
</div>
@ -324,74 +345,61 @@ onMounted(() => {
搜索
</el-button>
</el-form-item>
<el-form-item>
<el-button :icon="useRenderIcon(Refresh)" @click="resetCellSearch">
重置
</el-button>
</el-form-item>
</el-form>
<!-- <el-button type="primary" :size="'small'" :icon="useRenderIcon(AddFill)" @click="cellFormVisible = true">
新增格口
</el-button> -->
</div>
<el-table v-loading="loading" :data="cellList" border>
<el-table-column label="格口ID" prop="cellId" width="80" />
<el-table-column label="格口号" prop="cellNo" width="80" />
<el-table-column label="针脚号" prop="pinNo" width="80" />
<el-table-column label="商品图片" width="120">
<template #default="{ row }">
<el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :preview-teleported="true"
:hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
</template>
</el-table-column>
<el-table-column label="商品名称">
<template #default="{ row }">
{{ row.goodsId ? row.goodsName : '未配置商品' }}
</template>
</el-table-column>
<el-table-column label="价格" prop="price" width="80" />
<el-table-column label="库存" prop="stock" width="80" />
<el-table-column label="单元格类型" prop="cellType" width="120">
<template #default="{ row }">
{{ switchCellType(row.cellType) }}
</template>
</el-table-column>
<el-table-column label="购买次数" prop="orderCount" width="100" />
<el-table-column label="相关信息" width="150" fixed="right">
<template #default="{ row }">
<el-button type="success" link :icon="useRenderIcon('document')"
@click="router.push({ path: '/shop/order/index', query: { cellId: row.cellId } })">
购买记录
</el-button>
<el-button type="warning" link :icon="useRenderIcon('document')"
@click="router.push({ path: '/cabinet/operation/index', query: { cellId: row.cellId } })">
开启记录
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button v-if="cabinetInfo.belongType === 0" type="success" link :icon="useRenderIcon(AddFill)"
@click="handleConfigure(row)">
配置商品
</el-button>
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEditCell(row)">
编辑格口
</el-button>
<el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
@click="handleStockConfig(row)">
配置库存
</el-button>
<el-button v-if="row.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
@click="handleClearGoods(row)">
下架商品
</el-button>
</template>
</el-table-column>
</el-table>
<el-row :gutter="12">
<el-col v-for="(item, index) in cellList" :key="item.cellId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
<el-card class="cell-card" :body-style="{ padding: '8px 10px' }">
<div class="card-content">
<el-image v-if="item.coverImg" :src="item.coverImg" class="cell-image" fit="contain" />
<svg v-if="!item.coverImg" width="80" height="80" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" class="cell-image">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
<!-- 添加在矩形和文本之间的虚线 -->
<line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
text-anchor="middle">空闲</text>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
</svg>
<div class="cell-info">
<!-- <div class="cell-no">格口号: {{ item.cellNo }}</div> -->
<div class="price">价格: {{ item.price }}</div>
<div class="stock">库存: {{ item.stock }}</div>
<!-- <div class="cell-type">类型: {{ switchCellType(item.cellType) }}</div> -->
</div>
<!-- <div class="goods-name">{{ item.goodsId ? item.goodsName : '未配置商品' }}</div> -->
</div>
<div class="line-num">
<el-divider direction="horizontal" class="vertical-divider" />
<span class="line-number">{{ item.cellNo }}</span>
</div>
<div class="action-buttons">
<el-button v-if="!item.goodsId" link type="success"
@click="handleConfigure(item)" class="cell-btn">
商品配置
</el-button>
<el-button v-if="item.goodsId" link type="primary"
@click="handleEditCell(item)" class="cell-btn">
{{ item.goodsName }}
</el-button>
<!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
@click="handleStockConfig(item)">
库存
</el-button>
<el-button v-if="item.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
@click="handleClearGoods(item)">
下架
</el-button> -->
</div>
</el-card>
</el-col>
</el-row>
<el-pagination v-model:current-page="cellPagination.currentPage" v-model:page-size="cellPagination.pageSize"
:page-sizes="[5, 8, 16, 24, 32]" layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[12, 18, 24, 30, 36, 42]" layout="total, sizes, prev, pager, next, jumper"
:total="cellPagination.total" @size-change="handleCellSizeChange" @current-change="handleCellPageChange"
class="pagination" />
</div>
@ -421,21 +429,22 @@ onMounted(() => {
<ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
<MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
@refresh="fetchCabinetDetail" />
<el-drawer v-model="editCabinetDrawerVisible"
title="编辑柜体" size="30%" direction="rtl">
<el-drawer v-model="editCabinetDrawerVisible" title="编辑柜体" size="30%" direction="rtl">
<EditCabinetDrawer v-model="editCabinetDrawerVisible" :cabinet-info="cabinetInfo"
@refresh="fetchCabinetDetail" />
</el-drawer>
<el-drawer v-model="goodsConfigVisible" title="配置商品"
size="50%" direction="rtl">
<CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
<el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
<CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" :belong-type="shopInfo.mode == 4 ? 1 : 0" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="cellFormVisible" title="新增格口"
size="30%" direction="rtl">
<el-drawer v-model="configuredGoodsVisible" title="管理商品" size="30%" direction="rtl">
<ConfiguredGoodsModal v-model="configuredGoodsVisible" :cell-id="currentCell?.cellId"
:goods-id="currentCell?.goodsId" :goods-name="currentCell?.goodsName" :current-stock="currentCell?.stock"
:cover-img="currentCell?.coverImg" :price="currentCell?.price" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="cellFormVisible" title="新增格口" size="30%" direction="rtl">
<CellFormModal v-model="cellFormVisible" :initial-cabinet-id="cabinetId" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="cellEditVisible" title="编辑格口"
size="30%" direction="rtl">
<el-drawer v-model="cellEditVisible" title="编辑格口" size="30%" direction="rtl">
<CellEditModal v-model="cellEditVisible" :row="currentCell" @refresh="fetchCellList" />
</el-drawer>
</div>
@ -443,6 +452,82 @@ onMounted(() => {
</template>
<style scoped lang="scss">
.cell-card {
margin-bottom: 12px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
/* &:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} */
.card-content {
display: flex;
flex-direction: row;
margin: 0px;
.cell-image {
width: 50%;
height: 130px;
object-fit: contain;
border-radius: 4px;
margin-bottom: 12px;
}
.cell-info {
padding: 18px 8px 0 8px;
div {
font-size: 13px;
margin-bottom: 6px;
color: #606266;
&.goods-name {
font-weight: 500;
color: var(--el-text-color-primary);
}
&.price {
font-weight: 600;
}
}
}
}
.line-num {
display: flex;
justify-content: space-between;
align-items: center;
.vertical-divider {
margin: 0 0 0 0;
width: 85%;
}
.line-number {
font-size: 14px;
color: #606266;
font-weight: 600;
}
}
.action-buttons {
display: flex;
justify-content: center;
margin-top: auto;
padding: 8px 0 0 0;
/* border-top: 1px solid var(--el-border-color-light); */
.cell-btn {
margin-right: 8px;
width: 80px;
height: 30px;
}
}
}
:deep(.el-tabs__header) {
margin-bottom: 8px;
}
@ -458,6 +543,7 @@ onMounted(() => {
.el-form-item {
margin-bottom: 8px;
}
.detail-container {
display: flex;
flex-direction: column;
@ -489,7 +575,7 @@ onMounted(() => {
.cabinet-image {
width: 100%;
height: 420px;
height: 320px;
object-fit: contain;
margin-bottom: 15px;
}
@ -504,6 +590,7 @@ onMounted(() => {
margin-bottom: 0px;
}
}
.pagination {
margin-top: 10px;
}

View File

@ -27,7 +27,9 @@ const formData = reactive({
templateNo: "",
lockControlNo: 0,
location: 0,
belongType: 0
belongType: 0,
mode: 0,
balanceEnable: 1
});
const rules = reactive<FormRules>({
@ -43,6 +45,12 @@ const rules = reactive<FormRules>({
],
belongType: [
{ required: true, message: "请选择归属类型", trigger: "change" }
],
mode: [
{ required: true, message: "请选择运行模式", trigger: "change" }
],
balanceEnable: [
{ required: true, message: "请选择借呗支付状态", trigger: "change" }
]
});
@ -96,10 +104,26 @@ watch(() => props.cabinetInfo, (newVal) => {
</el-select>
</el-form-item>
<!-- <el-form-item label="归属类型" prop="belongType">
<el-select v-model="formData.belongType" placeholder="请选择归属类型">
<el-option label="借还柜" :value="0" />
<el-option label="固资通" :value="1" />
<!-- <el-form-item label="商品模式" prop="belongType">
<el-select v-model="formData.belongType" placeholder="请选择商品模式">
<el-option label="借还模式" :value="0" />
<el-option label="固资模式" :value="1" />
</el-select>
</el-form-item> -->
<!-- <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-select>
</el-form-item> -->
<!-- <el-form-item label="借呗支付" prop="balanceEnable">
<el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
<el-option label="正常使用" :value="1" />
<el-option label="禁止使用" :value="0" />
</el-select>
</el-form-item> -->

View File

@ -13,6 +13,7 @@ import View from "@iconify-icons/ep/view";
import AddFill from "@iconify-icons/ri/add-circle-line";
import SmartCabinetCardFormModal from "./smart-cabinet-card-form-modal.vue";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { getModeText } from "@/api/shop/shop";
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
defineOptions({
@ -129,9 +130,7 @@ onMounted(() => {
<img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
class="cabinet-image" />
<el-descriptions class="cabinet-info" :column="1">
<el-descriptions-item class="name">名称{{ item.cabinetName }}
</el-descriptions-item>
<el-descriptions-item class="name">模式{{ '支付模式' }}
<el-descriptions-item class="name">模式{{ getModeText(item.mode) }}
</el-descriptions-item>
<!-- <div class="type">柜体类型{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div> -->
<el-descriptions-item class="template">格式{{ CabinetImgMap[item.templateNo]?.name || '-' }}
@ -145,7 +144,9 @@ onMounted(() => {
</el-descriptions>
</div>
<el-divider class="divider" />
<el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
<el-button class="detail-btn" link @click="handleViewDetail(item)">
{{ item.cabinetName }}
</el-button>
</el-card>
</el-col>
</el-row>
@ -229,6 +230,10 @@ onMounted(() => {
border: 0;
margin-top: auto;
padding: 8px 0;
&:hover {
color: var(--el-color-primary);
}
}
}

View File

@ -14,6 +14,8 @@ export interface FormDTO {
lockControlNo: number;
location: number;
belongType: number;
mode: number;
balanceEnable: number;
}
const props = defineProps({
@ -28,15 +30,17 @@ const emit = defineEmits(["update:modelValue", "refresh"]);
const formRef = ref();
const formData = reactive<FormDTO>({
cabinetName: "",
cabinetType: 1,
cabinetType: 0,
templateNo: "",
lockControlNo: 0,
location: 0,
belongType: 0
belongType: 0,
mode: 0,
balanceEnable: 1
});
const rules = reactive<FormRules>({
cabinetName: [{ required: true, message: "柜体名称必填", trigger: "blur" }],
cabinetName: [{ required: true, max:4, message: "柜体名称必填", trigger: "blur" }],
cabinetType: [{ required: true, message: "请选择柜体类型", trigger: "change" }],
templateNo: [{ required: true, message: "请选择模板编号", trigger: "change" }],
lockControlNo: [
@ -48,6 +52,12 @@ const rules = reactive<FormRules>({
],
belongType: [
{ required: true, message: "请选择归属类型", trigger: "change" }
],
mode: [
{ required: true, message: "请选择运行模式", trigger: "change" }
],
balanceEnable: [
{ required: true, message: "请选择借呗支付状态", trigger: "change" }
]
});
@ -80,12 +90,12 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
<el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" />
</el-form-item>
<el-form-item label="柜体类型" prop="cabinetType">
<!-- <el-form-item label="柜体类型" prop="cabinetType">
<el-select v-model="formData.cabinetType" placeholder="请选择类型">
<el-option label="主柜" :value="0" />
<el-option label="副柜" :value="1" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="模板编号" prop="templateNo">
<el-select v-model="formData.templateNo" placeholder="请选择模板编号">
@ -93,10 +103,26 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
</el-select>
</el-form-item>
<!-- <el-form-item label="归属类型" prop="belongType">
<el-select v-model="formData.belongType" placeholder="请选择归属类型">
<el-option label="借还柜" :value="0" />
<el-option label="固资通" :value="1" />
<!-- <el-form-item label="商品模式" prop="belongType">
<el-select v-model="formData.belongType" placeholder="请选择商品模式">
<el-option label="借还模式" :value="0" />
<el-option label="固资模式" :value="1" />
</el-select>
</el-form-item> -->
<!-- <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-select>
</el-form-item> -->
<!-- <el-form-item label="借呗支付" prop="balanceEnable">
<el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
<el-option label="正常使用" :value="1" />
<el-option label="禁止使用" :value="0" />
</el-select>
</el-form-item> -->

View File

@ -1,8 +1,8 @@
<template>
<el-dialog v-model="visible" title="商店配置" width="800px">
<el-dialog v-model="visible" title="地址配置" width="800px">
<el-table :data="shopList" v-loading="loading" border>
<el-table-column prop="shopId" label="商店ID" width="100" />
<el-table-column prop="shopName" label="商店名称" />
<el-table-column prop="shopId" label="地址ID" width="100" />
<el-table-column prop="shopName" label="地址名称" />
<el-table-column label="操作" width="80" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="handleConfig(row)">配置</el-button>
@ -25,6 +25,7 @@ import { updateSmartCabinet } from '@/api/cabinet/smart-cabinet';
const props = defineProps<{
modelValue: boolean;
cabinetId: number;
// belongType?: number;
}>();
const emit = defineEmits(['update:modelValue', 'refresh']);
@ -47,7 +48,8 @@ const loadShops = async () => {
loading.value = true;
const { data } = await getShopList({
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
pageNum: pagination.value.currentPage,
// belongType: props.belongType
});
shopList.value = data.rows;
pagination.value.total = data.total;

View File

@ -103,6 +103,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
.then(({ data }) => {
// tokensessionStorage
setTokenFromBackend(data);
wxStore.setQyUser(data.qyUser);
//
initRouter().then(() => {
router.push(getTopMenu(true).path);
@ -132,6 +133,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
.then(({ data }) => {
// tokensessionStorage
setTokenFromBackend(data);
wxStore.setQyUser(data.qyUser);
//
initRouter().then(() => {
router.push(getTopMenu(true).path);

View File

@ -6,11 +6,16 @@ import { configureGoodsCellsStock } from "@/api/cabinet/cabinet-cell";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { ElMessage, ElMessageBox } from "element-plus";
import { useWxStore } from "@/store/modules/wx";
const props = defineProps({
cellId: {
type: Number,
required: true
},
belongType: {
type: Number,
required: false
}
});
@ -19,9 +24,13 @@ const closeModal = () => {
emit('update:modelValue', false);
};
const wxStore = useWxStore();
const searchFormParams = ref({
corpid: wxStore.corpid,
goodsName: "",
status: null
status: null,
belongType: props.belongType
});
const pagination = ref({
@ -36,6 +45,8 @@ const dataList = ref<GoodsDTO[]>([]);
const getList = async () => {
try {
loading.value = true;
searchFormParams.value.corpid = wxStore.corpid;
searchFormParams.value.belongType = props.belongType;
const { data } = await getGoodsListApi({
...searchFormParams.value,
pageSize: pagination.value.pageSize,
@ -93,15 +104,23 @@ defineExpose({ getList });
<template>
<div class="config-modal">
<el-form :inline="true" :model="searchFormParams" class="search-form">
<el-form-item label="商品名称:">
<el-input v-model="searchFormParams.goodsName" placeholder="请输入商品名称" clearable />
<el-form-item>
<el-input @keydown.enter.prevent="getList" v-model="searchFormParams.goodsName" placeholder="请输入商品名称"
clearable />
</el-form-item>
<el-form-item label="状态:">
<!-- <el-form-item label="状态:">
<el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable>
<el-option label="已上架" :value="1" />
<el-option label="已下架" :value="2" />
</el-select>
</el-form-item>
</el-form-item> -->
<!-- <el-form-item prop="belongType">
<el-select v-model="searchFormParams.belongType" placeholder="请选择商品所属" clearable @change="getList"
class="!w-[180px]">
<el-option label="智柜通" :value="0" />
<el-option label="固资通" :value="1" />
</el-select>
</el-form-item> -->
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" @click="getList">
搜索

View File

@ -0,0 +1,269 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getGoodsInfo, GoodsDTO } from "@/api/shop/goods";
import { getOrderListApi, type OrderDTO, OrderQuery } from "@/api/shop/order";
import { ElMessage } from "element-plus";
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import EditPen from '@iconify-icons/ep/edit-pen';
import GoodsEditModal from "./goods-edit-modal.vue";
const handleEdit = (row: GoodsDTO) => {
goodsInfo.value = row;
editModalVisible.value = true;
};
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
defineOptions({
name: "GoodsDetail"
});
const router = useRouter();
const route = useRoute();
const goodsInfo = ref<GoodsDTO>({
goodsId: 0,
goodsName: "",
categoryId: 0,
price: 0,
stock: 0,
status: 0,
autoApproval: 0,
coverImg: "",
goodsDetail: "",
belongType: 0,
corpid: ""
});
const loading = ref(false);
const activeTab = ref('basic');
const goodsId = ref<number>(0);
const editModalVisible = ref(false);
async function fetchGoodsDetail() {
try {
loading.value = true;
const { data } = await getGoodsInfo(goodsId.value);
goodsInfo.value = data;
} finally {
loading.value = false;
}
}
onMounted(() => {
goodsId.value = Number(route.query.id);
fetchGoodsDetail();
});
const orderList = ref<OrderDTO[]>([]);
const orderLoading = ref(false);
const orderPagination = ref({
pageSize: 8,
currentPage: 1,
total: 0
});
const fetchOrderList = async () => {
try {
orderLoading.value = true;
const { data } = await getOrderListApi({
goodsId: goodsId.value,
pageSize: orderPagination.value.pageSize,
pageNum: orderPagination.value.currentPage
});
orderList.value = data.rows;
orderPagination.value.total = data.total;
} finally {
orderLoading.value = false;
}
};
const onOrderSizeChange = (val: number) => {
orderPagination.value.pageSize = val;
fetchOrderList();
};
const onOrderCurrentChange = (val: number) => {
orderPagination.value.currentPage = val;
fetchOrderList();
};
watch(goodsId, () => {
fetchOrderList();
}, { immediate: true });
</script>
<template>
<div class="detail-container">
<goods-edit-modal v-model:visible="editModalVisible" :row="goodsInfo" @refresh="fetchGoodsDetail" />
<div class="flex-container">
<el-card class="goods-info-card">
<div class="goods-header">
<img :src="goodsInfo.coverImg" class="goods-image" />
<div class="goods-name">{{ goodsInfo.goodsName }}</div>
</div>
<el-divider />
<el-descriptions class="goods-details" :column="1" border>
<el-descriptions-item label="名称">{{ goodsInfo.goodsName }}</el-descriptions-item>
<el-descriptions-item label="价格">{{ goodsInfo.price }}</el-descriptions-item>
<el-descriptions-item label="库存">{{ goodsInfo.stock }}</el-descriptions-item>
<el-descriptions-item label="状态">{{ goodsInfo.status === 1 ? '已上架' : '已下架' }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="info-card">
<div class="tab-header">
<el-tabs type="card" v-model="activeTab" class="tab-header-card">
<el-tab-pane label="基本信息" name="basic"></el-tab-pane>
<el-tab-pane label="购买记录" name="order"></el-tab-pane>
</el-tabs>
<el-button v-if="goodsInfo.belongType == 0" type="primary" @click="handleEdit(goodsInfo)"
style="margin-bottom: 12px" :size="'default'">
编辑商品
</el-button>
</div>
<div class="info-details" v-if="activeTab === 'basic'">
<el-descriptions :column="2" border>
<el-descriptions-item label="名称">{{ goodsInfo.goodsName }}</el-descriptions-item>
<el-descriptions-item label="价格">{{ goodsInfo.price }}</el-descriptions-item>
<el-descriptions-item label="库存">{{ goodsInfo.stock }}</el-descriptions-item>
<el-descriptions-item label="已分配库存">{{ goodsInfo.totalStock }}</el-descriptions-item>
<el-descriptions-item label="状态">{{ goodsInfo.status === 1 ? '已上架' : '已下架' }}</el-descriptions-item>
<el-descriptions-item label="自动审批">{{ goodsInfo.autoApproval === 1 ? '开启' : '关闭' }}</el-descriptions-item>
<el-descriptions-item label="商品描述" :span="2">
<div v-html="goodsInfo.goodsDetail"></div>
</el-descriptions-item>
<el-descriptions-item label="关联状态" :span="2">
{{ goodsInfo.cellNoStr ? '已上柜' : '未上柜' }}
</el-descriptions-item>
<el-descriptions-item label="关联柜址">{{ goodsInfo.shopNameStr }}</el-descriptions-item>
<el-descriptions-item label="柜体名称">{{ goodsInfo.cabinetName }}</el-descriptions-item>
<el-descriptions-item label="柜体格号">{{ goodsInfo.cellNoStr }}</el-descriptions-item>
</el-descriptions>
</div>
<div class="order-details" v-if="activeTab === 'order'">
<el-table v-loading="orderLoading" :data="orderList" row-key="orderId" border>
<el-table-column label="订单ID" prop="orderId" width="120" />
<el-table-column label="商品名称" prop="goodsNames">
<template #default="{ row }">
<span v-if="row.goodsNames">
{{ row.goodsNames.split(',').join(', ') }}
</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="姓名" prop="name" width="120" />
<el-table-column label="手机号" prop="mobile" width="120" />
<el-table-column label="订单金额" prop="totalAmount" width="120">
<template #default="{ row }">{{ row.totalAmount }}</template>
</el-table-column>
<el-table-column label="订单状态" prop="status" width="120">
<template #default="{ row }">
<el-tag :type="row.status === 2 ? 'success' : row.status === 5 ? 'danger' : 'info'">
{{ { 1: '待付款', 2: '已付款', 3: '已发货', 4: '已完成', 5: '已取消' }[row.status] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="支付状态" prop="payStatus" width="120">
<template #default="{ row }">
<el-tag :type="row.payStatus === 2 ? 'success' : 'info'">
{{ { 1: '未支付', 2: '已支付', 3: '退款中', 4: '已退款' }[row.payStatus] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="支付方式" prop="paymentMethod" width="120">
<template #default="{ row }">
{{ { wechat: '微信支付', balance: '余额支付' }[row.paymentMethod] || row.paymentMethod }}
</template>
</el-table-column>
<el-table-column label="支付时间" prop="payTime" width="180">
<template #default="{ row }">
{{ row.payTime ? new Date(row.payTime).toLocaleString() : '-' }}
</template>
</el-table-column>
</el-table>
<el-pagination v-model:current-page="orderPagination.currentPage" v-model:page-size="orderPagination.pageSize"
:page-sizes="[8, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
:total="orderPagination.total" @size-change="onOrderSizeChange" @current-change="onOrderCurrentChange"
class="pagination" />
</div>
<div class="sales-details" v-if="activeTab === 'sales'">
<!-- 销售记录表格 -->
</div>
</el-card>
</div>
</div>
</template>
<style scoped lang="scss">
.detail-container {
display: flex;
flex-direction: column;
height: 100%;
.flex-container {
display: flex;
flex: 1;
gap: 12px;
min-height: 0;
.goods-info-card {
width: 20%;
height: 88vh;
}
.info-card {
width: 80%;
height: 88vh;
overflow-y: auto;
}
}
.goods-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.goods-image {
width: 100%;
height: 320px;
object-fit: contain;
margin-bottom: 15px;
}
.goods-name {
font-size: 20px;
font-weight: bold;
}
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0px;
.tab-header-card {
flex: 1;
margin-right: 10px;
}
}
}
.order-details {
margin-top: 8px;
background-color: var(--el-bg-color);
border-radius: 4px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
.pagination {
margin-top: 10px;
}
}
</style>

View File

@ -84,6 +84,7 @@ const initForm = async () => {
categoryOptions.value = data;
//
console.log("初始化表单数据", props.row);
if (props.row?.goodsId) {
isEdit.value = true;
Object.assign(formData, props.row);
@ -160,12 +161,12 @@ const handleDelete = async () => {
<el-input-number v-model="formData.stock" :min="0" controls-position="right" />
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<!-- <el-form-item label="商品分类" prop="categoryId">
<el-select v-model="formData.categoryId" placeholder="请选择商品分类" clearable class="w-full">
<el-option v-for="category in categoryOptions" :key="category.categoryId" :label="category.categoryName"
:value="category.categoryId" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="自动审批" prop="autoApproval">
<el-switch v-model="formData.autoApproval" :active-value="1" :inactive-value="0" active-text="启用"
@ -192,7 +193,6 @@ const handleDelete = async () => {
</el-form>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
确认
</el-button>

View File

@ -6,6 +6,7 @@ import { addGoodsApi, GoodsDTO } from "@/api/shop/goods";
import { CategoryDTO, getCategoryAllApi } from "@/api/shop/category";
import Confirm from "@iconify-icons/ep/check";
import Upload from "@iconify-icons/ep/upload";
import { useWxStore } from "@/store/modules/wx";
const { VITE_APP_BASE_API } = import.meta.env;
const props = defineProps({
@ -17,6 +18,7 @@ const props = defineProps({
const emit = defineEmits(["update:visible", "refresh"]);
const wxStore = useWxStore();
const formRef = ref();
const formData = reactive<GoodsDTO>({
goodsName: "",
@ -27,7 +29,9 @@ const formData = reactive<GoodsDTO>({
categoryId: 0,
goodsDetail: "",
coverImg: "",
usageInstruction: ""
usageInstruction: "",
belongType: 0,
corpid: wxStore.corpid
});
const rules = reactive<FormRules>({
@ -48,6 +52,7 @@ const rules = reactive<FormRules>({
const handleConfirm = async () => {
try {
await formRef.value.validate();
formData.corpid = wxStore.corpid;
await addGoodsApi(formData);
ElMessage.success("商品添加成功");
emit("refresh");
@ -96,7 +101,7 @@ const beforeAvatarUpload = (rawFile) => {
</script>
<template>
<el-dialog title="新增商品" :model-value="visible" width="600px" @close="closeDialog" @open="loadCategories">
<el-drawer :title="'新增商品'" :model-value="visible" size="50%" direction="rtl" @close="closeDialog">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px" label-position="right">
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="formData.goodsName" placeholder="请输入商品名称" clearable />
@ -118,12 +123,12 @@ const beforeAvatarUpload = (rawFile) => {
</el-form-item>
<!-- 在状态表单项前添加分类选择 -->
<el-form-item label="商品分类" prop="categoryId">
<!-- <el-form-item label="商品分类" prop="categoryId">
<el-select v-model="formData.categoryId" placeholder="请选择商品分类" clearable class="w-full">
<el-option v-for="category in categoryOptions" :key="category.categoryId" :label="category.categoryName"
:value="category.categoryId" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="自动审批" prop="autoApproval">
<el-switch v-model="formData.autoApproval" :active-value="1" :inactive-value="0" active-text="启用"
@ -142,15 +147,23 @@ const beforeAvatarUpload = (rawFile) => {
</el-form>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
确认
</el-button>
<div class="drawer-footer">
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
确认
</el-button>
</div>
</template>
</el-dialog>
</el-drawer>
</template>
<style scoped>
.drawer-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px;
}
.avatar-uploader {
:deep(.el-upload) {
border: 1px dashed var(--el-border-color);

View File

@ -9,28 +9,36 @@ import AddFill from "@iconify-icons/ri/add-circle-line";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import Setting from "@iconify-icons/ep/setting";
import View from "@iconify-icons/ep/view";
import GoodsFormModal from "./goods-form-modal.vue";
import GoodsEditModal from "./goods-edit-modal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteGoodsApi } from "@/api/shop/goods";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRouter } from "vue-router";
import { useWxStore } from "@/store/modules/wx";
defineOptions({
name: "ShopGoods"
});
const wxStore = useWxStore();
const router = useRouter();
const formRef = ref();
const tableRef = ref();
const modalVisible = ref(false);
//
const searchFormParams = ref({
corpid: wxStore.corpid,
belongType: null,
goodsName: "",
status: null
});
//
const pagination = ref({
pageSize: 6,
pageSize: 12,
currentPage: 1,
total: 0
});
@ -47,6 +55,7 @@ const getList = async () => {
loading.value = true;
const { data } = await getGoodsListApi({
...searchFormParams.value,
corpid: wxStore.corpid,
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
});
@ -125,6 +134,25 @@ const handleEdit = (row: GoodsDTO) => {
editVisible.value = true;
};
const handleViewDetail = (row: GoodsDTO) => {
//
useMultiTagsStoreHook().handleTags("push", {
path: `/shop/goods/detail`,
name: "GoodsDetail",
query: { id: row.goodsId },
meta: {
title: `${row.goodsName}`,
dynamicLevel: 3
}
});
router.push({
path: '/shop/goods/detail',
query: {
id: row.goodsId
}
});
};
</script>
<template>
@ -135,6 +163,13 @@ const handleEdit = (row: GoodsDTO) => {
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.goodsName" placeholder="请输入商品名称" clearable
class="!w-[200px]" />
</el-form-item>
<el-form-item prop="belongType">
<el-select v-model="searchFormParams.belongType" placeholder="请选择商品所属" clearable @change="onSearch"
class="!w-[180px]">
<el-option label="智柜通" :value="0" />
<el-option label="固资通" :value="1" />
</el-select>
</el-form-item>
<!-- <el-form-item label="状态:" prop="status">
<el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable class="!w-[180px]">
<el-option label="已上架" :value="1" />
@ -156,60 +191,27 @@ const handleEdit = (row: GoodsDTO) => {
</el-form-item>
</el-form>
<div class="table-container">
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="id"
@selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" />
<el-table-column label="商品图片" width="120">
<template #default="{ row }">
<el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999" :preview-teleported="true"
:hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
</template>
</el-table-column>
<el-table-column label="商品名称" prop="goodsName" />
<el-table-column label="价格" prop="price" width="120" />
<el-table-column label="库存" prop="stock" width="120" />
<el-table-column label="状态" prop="status" width="120">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '已上架' : '已下架' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="自动审批" prop="autoApproval" width="120">
<template #default="{ row }">
<el-tag :type="row.autoApproval === 1 ? 'success' : 'info'">
{{ row.autoApproval === 1 ? '启用' : '关闭' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="柜口" prop="cellNo" width="120">
<template #default="{ row }">
{{ !row.cellNoStr ? '未配置' : row.cabinetName + ' 格口' + row.cellNoStr }}
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEdit(row)" class="right-btn">
编辑
</el-button>
<!-- <el-button type="warning" link :icon="useRenderIcon(Setting)" class="right-btn"
@click="currentRow = row; configVisible = true">
配置格口
</el-button> -->
<!-- <el-popconfirm :title="`确认删除【${row.goodsName}】?`" @confirm="handleDelete(row)">
<template #reference>
<el-button type="danger" link :icon="useRenderIcon(Delete)" class="right-btn">
删除
</el-button>
</template>
</el-popconfirm> -->
</template>
</el-table-column>
</el-table>
<div class="grid-container">
<el-row :gutter="12">
<el-col v-for="(item, index) in dataList" :key="item.goodsId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
<el-card class="goods-card" :body-style="{ padding: '8px 10px' }">
<div class="card-content">
<el-image :src="item.coverImg" :preview-src-list="[item.coverImg]" class="goods-image" fit="contain" />
<div class="goods-info">
<div class="price">价格{{ item.price }}</div>
<div class="stock">库存{{ item.stock }}</div>
<div class="info-item">状态{{ item.status === 1 ? '已上架' : '已下架' }}</div>
</div>
</div>
<div class="detail-btn" @click="handleViewDetail(item)">
{{ item.goodsName }}
</div>
</el-card>
</el-col>
</el-row>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[6, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
:page-sizes="[12, 18, 24, 30, 36, 42]" layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total" @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</div>
<!-- 新增商品弹窗 -->
<goods-form-modal v-model:visible="modalVisible" @refresh="getList" />
@ -226,6 +228,7 @@ const handleEdit = (row: GoodsDTO) => {
opacity: 1;
background-color: rgba(0, 0, 0, 0.8);
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
@ -237,26 +240,97 @@ const handleEdit = (row: GoodsDTO) => {
flex: 1;
width: 100%;
}
.right-btn {
margin: 0;
.pagination {
margin-top: 10px;
text-align: center;
:deep(.el-pagination) {
margin: 0;
padding: 4px 0;
}
}
.table-container {
.goods-card {
margin-bottom: 12px;
min-height: 210px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s ease;
/* &:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} */
}
.card-content {
display: flex;
flex-direction: row;
margin: 0px;
.goods-image {
width: 55%;
height: 180px;
object-fit: contain;
border-radius: 4px;
margin-right: 10px;
}
.goods-info {
flex: 1;
padding: 16px 0 0 0;
.name,
.info-item,
.price,
.stock {
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
color: #606266;
}
/* .price,
.info-item,
.stock {
color: #909399;
} */
}
}
.divider {
margin: 5px 0px;
}
.detail-btn {
&:hover {
background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary);
transition: all 0.3s ease;
}
width: 100%;
margin-top: auto;
padding: 4px 0;
text-align: center;
color: #409eff;
font-weight: 500;
cursor: pointer;
}
.grid-container {
margin-top: 8px;
background-color: var(--el-bg-color);
border-radius: 4px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
margin-bottom: 12px;
min-height: 300px;
.el-table {
flex: 1;
overflow: hidden;
}
.pagination {
margin-top: 10px;
.el-row {
margin-bottom: -12px;
}
}
</style>

View File

@ -216,7 +216,17 @@ onSearch().then(() => {
statusList[item].label }}</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="菜单权限" prop="menuIds" class="form-input">
<el-form-item prop="menuIds" class="form-input">
<template #label>
<div class="menu-label">
<span>菜单权限</span>
<!-- <el-checkbox-group v-model="formData.menuIds" class="checkbox-group">
<el-checkbox v-model="formData.menuIds" label="all" class="menu-checkbox">
全部
</el-checkbox>
</el-checkbox-group> -->
</div>
</template>
<el-checkbox-group v-model="formData.menuIds" class="checkbox-group">
<template v-for="menu in processedMenuOptions" :key="menu.categoryName">
<span class="menu-category">{{ menu.categoryName }}</span>

View File

@ -257,7 +257,7 @@ watch(
.pagination-wrapper {
position: relative;
background: var(--el-bg-color);
padding: 8px 12px;
padding: 12px 12px 13px 12px;
margin-top: 20px;
text-align: center;

View File

@ -2,11 +2,16 @@
import { Goods, Shop, Document, Money } from '@element-plus/icons-vue';
import { getStats, TodayLatestOrderGoodsDTO, TopGoodsDTO } from '@/api/shop/stats';
import { markRaw, onMounted, ref } from 'vue';
import { useWxStore } from '@/store/modules/wx';
import { ElDialog, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
import { bindQyUserApi } from '@/api/ab98/user';
defineOptions({
name: "Welcome"
});
const wxStore = useWxStore();
const shopData = ref<{
name: string;
icon: any; // Element Plus
@ -32,6 +37,31 @@ const topGoods = ref<TopGoodsDTO[]>([]);
const todayLatestOrderGoods = ref<TodayLatestOrderGoodsDTO[]>([]);
const maxOccurrenceCount = ref(0);
const showDialog = ref(false);
const form = ref({ name: '', idCard: '' });
const rules = {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
idCard: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ pattern: /^\d{17}[\dXx]$/, message: '身份证格式不正确', trigger: 'blur' }
]
};
const handleSubmit = async () => {
try {
const { data } = await bindQyUserApi({
qyUserId: wxStore.qyUser?.id,
name: form.value.name,
idNum: form.value.idCard
});
ElMessage.success('绑定成功');
showDialog.value = false;
} catch (error) {
ElMessage.error(error.message || '绑定失败');
}
};
onMounted(async () => {
try {
const { data } = await getStats();
@ -59,6 +89,11 @@ onMounted(async () => {
} catch (error) {
console.error('获取统计数据失败:', error);
}
if (wxStore.qyUser && !wxStore.qyUser.ab98UserId) {
showDialog.value = true;
}
});
</script>
@ -187,6 +222,20 @@ onMounted(async () => {
</div>
</el-col>
</el-row>
<el-dialog v-model="showDialog" title="请绑定汇邦云账号" :close-on-click-modal="false" width="30%">
<el-form :model="form" :rules="rules" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="form.idCard" maxlength="18" show-word-limit />
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="handleSubmit">提交</el-button>
</template>
</el-dialog>
</div>
</template>