Compare commits
4 Commits
0716346cdb
...
727671c58b
Author | SHA1 | Date |
---|---|---|
|
727671c58b | |
|
1aa7cee0c0 | |
|
56904be993 | |
|
b195336876 |
Binary file not shown.
After Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
|
@ -1,15 +1,18 @@
|
|||
import { http } from "@/utils/http";
|
||||
import { UserDTO } from "../system/user";
|
||||
|
||||
/**
|
||||
* 企业微信用户信息
|
||||
*/
|
||||
export interface QyUserDTO {
|
||||
sysUser?: UserDTO;
|
||||
/** 用户ID(导出列:用户ID) */
|
||||
id?: number;
|
||||
/** 全局唯一ID(导出列:全局唯一ID) */
|
||||
openUserid?: string;
|
||||
/** 企业用户ID(导出列:企业用户ID) */
|
||||
userid?: string;
|
||||
openid?: string;
|
||||
/** 用户姓名(导出列:用户姓名) */
|
||||
name?: string;
|
||||
/** 手机号码(导出列:手机号码) */
|
||||
|
@ -114,3 +117,7 @@ export const syncQyUserApi = (params: { corpid: string; code: string }) => {
|
|||
export const exportQyUserExcelApi = (params: QyUserQuery, fileName: string) => {
|
||||
return http.download("/qywx/users/excel", fileName, { params });
|
||||
};
|
||||
|
||||
export const getQyUserDetailApi = (id: number) => {
|
||||
return http.request<ResponseData<QyUserDTO>>("get", `/qywx/users/detail/${id}`);
|
||||
};
|
|
@ -7,6 +7,10 @@ export interface OrderQuery extends BasePageQuery {
|
|||
* 微信openid
|
||||
*/
|
||||
openid?: string;
|
||||
/**
|
||||
* 企业微信用户ID或汇邦云用户ID
|
||||
*/
|
||||
userid?: string;
|
||||
/** 柜机id */
|
||||
cabinetId?: number;
|
||||
/** 格口id */
|
||||
|
|
|
@ -92,15 +92,15 @@ const moveToView = async (index: number): Promise<void> => {
|
|||
} else if (
|
||||
tabItemElOffsetLeft > -translateX.value &&
|
||||
tabItemElOffsetLeft + tabItemOffsetWidth <
|
||||
-translateX.value + scrollbarDomWidth
|
||||
-translateX.value + scrollbarDomWidth
|
||||
) {
|
||||
// 标签在可视区域
|
||||
translateX.value = Math.min(
|
||||
0,
|
||||
scrollbarDomWidth -
|
||||
tabItemOffsetWidth -
|
||||
tabItemElOffsetLeft -
|
||||
tabNavPadding
|
||||
tabItemOffsetWidth -
|
||||
tabItemElOffsetLeft -
|
||||
tabNavPadding
|
||||
);
|
||||
} else {
|
||||
// 标签在可视区域右侧
|
||||
|
@ -455,7 +455,10 @@ function tagOnClick(item) {
|
|||
router.push({ name });
|
||||
}
|
||||
} else {
|
||||
router.push({ path });
|
||||
router.push({
|
||||
path,
|
||||
query: item.query
|
||||
});
|
||||
}
|
||||
// showMenuModel(item?.path, item?.query);
|
||||
}
|
||||
|
@ -516,43 +519,25 @@ onBeforeUnmount(() => {
|
|||
</span>
|
||||
<div ref="scrollbarDom" class="scroll-container">
|
||||
<div class="tab select-none" ref="tabDom" :style="getTabStyle">
|
||||
<div
|
||||
:ref="'dynamic' + index"
|
||||
v-for="(item, index) in multiTags"
|
||||
:key="index"
|
||||
:class="[
|
||||
'scroll-item is-closable',
|
||||
linkIsActive(item),
|
||||
route.path === item.path && showModel === 'card'
|
||||
? 'card-active'
|
||||
: ''
|
||||
]"
|
||||
@contextmenu.prevent="openMenu(item, $event)"
|
||||
@mouseenter.prevent="onMouseenter(index)"
|
||||
@mouseleave.prevent="onMouseleave(index)"
|
||||
@click="tagOnClick(item)"
|
||||
>
|
||||
<router-link
|
||||
:to="item.path"
|
||||
class="dark:!text-text_color_primary dark:hover:!text-primary"
|
||||
>
|
||||
<div :ref="'dynamic' + index" v-for="(item, index) in multiTags" :key="index" :class="[
|
||||
'scroll-item is-closable',
|
||||
linkIsActive(item),
|
||||
route.path === item.path && showModel === 'card'
|
||||
? 'card-active'
|
||||
: ''
|
||||
]" @contextmenu.prevent="openMenu(item, $event)" @mouseenter.prevent="onMouseenter(index)"
|
||||
@mouseleave.prevent="onMouseleave(index)" @click="tagOnClick(item)">
|
||||
<router-link :to="item.path" class="dark:!text-text_color_primary dark:hover:!text-primary">
|
||||
{{ item.meta.title }}
|
||||
</router-link>
|
||||
<span
|
||||
v-if="
|
||||
iconIsActive(item, index) ||
|
||||
(index === activeIndex && index !== 0)
|
||||
"
|
||||
class="el-icon-close"
|
||||
@click.stop="deleteMenu(item)"
|
||||
>
|
||||
<span v-if="
|
||||
iconIsActive(item, index) ||
|
||||
(index === activeIndex && index !== 0)
|
||||
" class="el-icon-close" @click.stop="deleteMenu(item)">
|
||||
<IconifyIconOffline :icon="CloseBold" />
|
||||
</span>
|
||||
<!-- <div
|
||||
:ref="'schedule' + index"
|
||||
v-if="showModel !== 'card'"
|
||||
:class="[scheduleIsActive(item)]"
|
||||
/> -->
|
||||
<div :ref="'schedule' + index" v-if="showModel !== 'card'" style="display: none;"
|
||||
:class="[scheduleIsActive(item)]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -561,17 +546,8 @@ onBeforeUnmount(() => {
|
|||
</span>
|
||||
<!-- 右键菜单按钮 -->
|
||||
<transition name="el-zoom-in-top">
|
||||
<ul
|
||||
v-show="visible"
|
||||
:key="Math.random()"
|
||||
:style="getContextMenuStyle"
|
||||
class="contextmenu"
|
||||
>
|
||||
<div
|
||||
v-for="(item, key) in tagsViews.slice(0, 6)"
|
||||
:key="key"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<ul v-show="visible" :key="Math.random()" :style="getContextMenuStyle" class="contextmenu">
|
||||
<div v-for="(item, key) in tagsViews.slice(0, 6)" :key="key" style="display: flex; align-items: center">
|
||||
<li v-if="item.show" @click="selectTag(key, item)">
|
||||
<IconifyIconOffline :icon="item.icon" />
|
||||
{{ item.text }}
|
||||
|
@ -580,23 +556,14 @@ onBeforeUnmount(() => {
|
|||
</ul>
|
||||
</transition>
|
||||
<!-- 右侧功能按钮 -->
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
placement="bottom-end"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
|
||||
<span class="arrow-down">
|
||||
<IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in tagsViews"
|
||||
:key="key"
|
||||
:command="{ key, item }"
|
||||
:divided="item.divided"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-dropdown-item v-for="(item, key) in tagsViews" :key="key" :command="{ key, item }" :divided="item.divided"
|
||||
:disabled="item.disabled">
|
||||
<IconifyIconOffline :icon="item.icon" />
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
|
|
|
@ -128,7 +128,11 @@ export function useTags() {
|
|||
return isEqual(route.params, item.params) ? previous : next;
|
||||
}
|
||||
} else {
|
||||
return route.path === item.path ? previous : next;
|
||||
const route_id = String(route.query?.id);
|
||||
const item_id = String(item.query?.id);
|
||||
return route.path === item.path &&
|
||||
route_id == item_id
|
||||
? previous : next;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -31,6 +31,14 @@ export default {
|
|||
meta: {
|
||||
title: "柜机详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/user/qy/detail",
|
||||
name: "QyUserDetail",
|
||||
component: () => import("@/views/user/qy/detail.vue"),
|
||||
meta: {
|
||||
title: "用户详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
|
|
|
@ -28,7 +28,15 @@ export const CabinetImgMap = {
|
|||
name: "60口机柜",
|
||||
},
|
||||
8: {
|
||||
img: "cabinet_120.jpg",
|
||||
name: "120口机柜",
|
||||
img: "cabinet_120_6X20.jpg",
|
||||
name: "120口机柜6X20",
|
||||
},
|
||||
9: {
|
||||
img: "cabinet_4.jpg",
|
||||
name: "4口机柜",
|
||||
},
|
||||
10: {
|
||||
img: "cabinet_120_4X30.jpg",
|
||||
name: "120口机柜4X30",
|
||||
},
|
||||
}
|
|
@ -1,18 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { getSmartCabinetDetailApi, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
|
||||
import { changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { CabinetImgMap } from "@/utils/cabinetImgMap";
|
||||
import GatewayConfigModal from "@/views/cabinet/smart-cabinet/GatewayConfigModal.vue";
|
||||
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 { ElMessage, ElMessageBox } from "element-plus";
|
||||
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import { getGoodsInfo } from "@/api/shop/goods";
|
||||
|
||||
defineOptions({
|
||||
name: "SmartCabinetDetail"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const cabinetInfo = ref<SmartCabinetDTO>({
|
||||
cabinetName: "",
|
||||
|
@ -22,11 +32,74 @@ const cabinetInfo = ref<SmartCabinetDTO>({
|
|||
location: 0
|
||||
});
|
||||
const loading = ref(false);
|
||||
const activeTab = ref('basic');
|
||||
const activeTab = ref('cells');
|
||||
const cabinetId = ref<number>(0);
|
||||
const gatewayConfigVisible = ref(false);
|
||||
const shopConfigVisible = ref(false);
|
||||
const mainCabinetConfigVisible = ref(false);
|
||||
const cellList = ref<CabinetCellDTO[]>([]);
|
||||
const cellPagination = ref({
|
||||
pageSize: 5,
|
||||
currentPage: 1,
|
||||
total: 0
|
||||
});
|
||||
const goodsConfigVisible = ref(false);
|
||||
const currentCellId = ref<number>();
|
||||
|
||||
function handleConfigure(row: CabinetCellDTO) {
|
||||
currentCellId.value = row.cellId;
|
||||
goodsConfigVisible.value = true;
|
||||
}
|
||||
|
||||
async function handleStockConfig(row: CabinetCellDTO) {
|
||||
try {
|
||||
const { data } = await getGoodsInfo(row.goodsId!);
|
||||
const remainingStock = data.stock - data.totalStock + row.stock;
|
||||
|
||||
const { value } = await ElMessageBox.prompt(
|
||||
`请输入${row.goodsName || '未配置商品'}的库存数量(本次最多可分配:${remainingStock})。\n 若可分配数量不足,请先调整商品列表中的库存。`,
|
||||
'配置库存',
|
||||
{
|
||||
inputPattern: /^0$|^[1-9]\d*$/,
|
||||
inputValue: row.stock?.toString(),
|
||||
inputErrorMessage: '请输入有效的非负整数',
|
||||
inputValidator: (inputValue: string) => {
|
||||
const num = Number(inputValue);
|
||||
if (num > remainingStock) {
|
||||
return '分配数量不能超过剩余库存';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (Number(value) > remainingStock) {
|
||||
ElMessage.warning('分配数量不能超过剩余库存');
|
||||
return;
|
||||
}
|
||||
|
||||
await changeGoodsCellsStock(row.cellId!, Number(value));
|
||||
ElMessage.success('库存更新成功');
|
||||
fetchCellList();
|
||||
} catch (error) {
|
||||
console.error('库存配置取消或失败', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClearGoods(row: CabinetCellDTO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认要下架${row.goodsName || '未配置商品'}吗?`,
|
||||
'警告',
|
||||
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
|
||||
);
|
||||
await clearGoodsCells(row.cellId!);
|
||||
ElMessage.success('商品下架成功');
|
||||
fetchCellList();
|
||||
} catch (error) {
|
||||
console.error('操作取消或失败', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCabinetDetail() {
|
||||
try {
|
||||
|
@ -38,9 +111,45 @@ async function fetchCabinetDetail() {
|
|||
}
|
||||
}
|
||||
|
||||
function switchCellType(cellType: number) {
|
||||
switch (cellType) {
|
||||
case 1: return '小格';
|
||||
case 2: return '中格';
|
||||
case 3: return '大格';
|
||||
case 4: return '超大格';
|
||||
default: return '未知';
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCellList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const { data } = await getCabinetCellList({
|
||||
cabinetId: cabinetId.value,
|
||||
pageSize: cellPagination.value.pageSize,
|
||||
pageNum: cellPagination.value.currentPage
|
||||
});
|
||||
cellList.value = data.rows;
|
||||
cellPagination.value.total = data.total;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCellSizeChange(val: number) {
|
||||
cellPagination.value.pageSize = val;
|
||||
fetchCellList();
|
||||
}
|
||||
|
||||
function handleCellPageChange(val: number) {
|
||||
cellPagination.value.currentPage = val;
|
||||
fetchCellList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
cabinetId.value = Number(route.query.id);
|
||||
fetchCabinetDetail();
|
||||
fetchCellList();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -89,8 +198,8 @@ onMounted(() => {
|
|||
<el-card class="info-card">
|
||||
<div class="tab-header">
|
||||
<el-tabs type="card" v-model="activeTab">
|
||||
<el-tab-pane label="格口管理" name="cells"></el-tab-pane>
|
||||
<el-tab-pane label="基本信息" name="basic"></el-tab-pane>
|
||||
<el-tab-pane label="单元格配置" name="cells"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
|
@ -101,15 +210,70 @@ onMounted(() => {
|
|||
<el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div class="info-details" v-if="activeTab === 'cells'">
|
||||
<!-- 单元格配置内容 -->
|
||||
<div class="cell-details" v-if="activeTab === 'cells'">
|
||||
<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="商品图片" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" 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 type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(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-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"
|
||||
:total="cellPagination.total" @size-change="handleCellSizeChange" @current-change="handleCellPageChange"
|
||||
class="pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
<GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId"
|
||||
@refresh="fetchCabinetDetail" />
|
||||
<GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
|
||||
<ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
|
||||
<MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
|
||||
@refresh="fetchCabinetDetail" />
|
||||
<el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
|
||||
<CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -123,15 +287,18 @@ onMounted(() => {
|
|||
.flex-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
|
||||
.cabinet-info-card {
|
||||
width: 30%;
|
||||
width: 20%;
|
||||
height: 88vh;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
width: 70%;
|
||||
width: 80%;
|
||||
height: 88vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,6 +12,7 @@ import Refresh from "@iconify-icons/ep/refresh";
|
|||
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";
|
||||
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
|
||||
|
||||
defineOptions({
|
||||
|
@ -62,6 +63,16 @@ const resetForm = formEl => {
|
|||
};
|
||||
|
||||
const handleViewDetail = (row: SmartCabinetDTO) => {
|
||||
// 保存信息到标签页
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path: `/cabinet/card/detail`,
|
||||
name: "smartCabinetCardDetail",
|
||||
query: { id: row.cabinetId },
|
||||
meta: {
|
||||
title: `${row.cabinetName}`,
|
||||
dynamicLevel: 3
|
||||
}
|
||||
});
|
||||
router.push({
|
||||
path: '/cabinet/card/detail',
|
||||
query: {
|
||||
|
|
|
@ -2,10 +2,11 @@
|
|||
import { ref, reactive, watch } from "vue";
|
||||
import { ElMessage, FormRules } from "element-plus";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { GoodsDTO, updateGoodsApi, addGoodsApi } from "@/api/shop/goods";
|
||||
import { GoodsDTO, updateGoodsApi, addGoodsApi, deleteGoodsApi } 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 Delete from "@iconify-icons/ep/delete";
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -121,10 +122,20 @@ watch(
|
|||
if (val) initForm();
|
||||
}
|
||||
);
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await deleteGoodsApi(formData.goodsId);
|
||||
ElMessage.success("删除成功");
|
||||
emit("refresh");
|
||||
closeDialog();
|
||||
} catch (error) {
|
||||
console.error("删除失败", error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog :title="isEdit ? '编辑商品' : '新增商品'" :model-value="visible" width="600px" @close="closeDialog">
|
||||
<el-drawer :title="isEdit ? '编辑商品' : '新增商品'" :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 />
|
||||
|
@ -165,6 +176,15 @@ watch(
|
|||
<el-radio :label="2">下架</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作">
|
||||
<el-popconfirm :title="`确认删除【${row.goodsName}】?`" @confirm="handleDelete()">
|
||||
<template #reference>
|
||||
<el-button type="danger" link :icon="useRenderIcon(Delete)" class="right-btn">
|
||||
删除该商品
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
|
@ -173,7 +193,7 @@ watch(
|
|||
确认
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
@ -202,13 +202,13 @@ const handleEdit = (row: GoodsDTO) => {
|
|||
@click="currentRow = row; configVisible = true">
|
||||
配置格口
|
||||
</el-button> -->
|
||||
<el-popconfirm :title="`确认删除【${row.goodsName}】?`" @confirm="handleDelete(row)">
|
||||
<!-- <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>
|
||||
</el-popconfirm> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
|
@ -9,6 +9,7 @@ import Search from "@iconify-icons/ep/search";
|
|||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import View from "@iconify-icons/ep/view";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
|
||||
defineOptions({
|
||||
name: "Ab98User"
|
||||
|
@ -56,7 +57,17 @@ const resetForm = formEl => {
|
|||
onSearch();
|
||||
};
|
||||
|
||||
const handleViewDetail = (row: any) => {
|
||||
const handleViewDetail = (row: Ab98UserDTO) => {
|
||||
// 保存信息到标签页
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path: `/user/ab98/detail`,
|
||||
name: "ab98Detail",
|
||||
query: { id: row.ab98UserId },
|
||||
meta: {
|
||||
title: `${row.name}`,
|
||||
dynamicLevel: 3
|
||||
}
|
||||
});
|
||||
router.push({
|
||||
path: '/user/ab98/detail',
|
||||
query: {
|
||||
|
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<el-form ref="formRef" label-width="120px" :model="formInline" :disabled="true">
|
||||
<el-form-item label="用户ID">
|
||||
<el-input v-model="formInline.userId" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="formInline.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input v-model="formInline.nickname" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="formInline.sex">
|
||||
<el-option label="男" :value="1" />
|
||||
<el-option label="女" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码">
|
||||
<el-input v-model="formInline.phoneNumber" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<el-input v-model="formInline.deptId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="formInline.status" :active-value="1" :inactive-value="0" active-text="启用"
|
||||
inactive-text="停用" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
defineProps({
|
||||
formInline: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
userId: null,
|
||||
username: "",
|
||||
nickname: "",
|
||||
sex: 1,
|
||||
phoneNumber: "",
|
||||
deptId: null,
|
||||
status: 1
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
</script>
|
|
@ -0,0 +1,187 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { type QyUserDTO, getQyUserDetailApi } from "@/api/qy/qyUser";
|
||||
import { getOrderListApi, type OrderDTO } from "@/api/shop/order";
|
||||
import BalanceEditModal from "./BalanceEditModal.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "QyUserDetail"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userInfo = ref<QyUserDTO>({});
|
||||
const loading = ref(false);
|
||||
const balanceVisible = ref(false);
|
||||
const currentBalance = ref(0);
|
||||
|
||||
// 基础信息
|
||||
const basicInfo = ref({
|
||||
registerTime: "",
|
||||
lastLogin: "",
|
||||
loginCount: 0,
|
||||
device: ""
|
||||
});
|
||||
|
||||
// 订单记录
|
||||
const orderRecords = ref<OrderDTO[]>([]);
|
||||
const pagination = ref({
|
||||
pageSize: 5,
|
||||
currentPage: 1,
|
||||
total: 0
|
||||
});
|
||||
const orderLoading = ref(false);
|
||||
const activeTab = ref('basic');
|
||||
|
||||
async function fetchOrders() {
|
||||
try {
|
||||
orderLoading.value = true;
|
||||
const { data } = await getOrderListApi({
|
||||
openid: userInfo.value.openid,
|
||||
userid: userInfo.value.userid,
|
||||
pageSize: pagination.value.pageSize,
|
||||
pageNum: pagination.value.currentPage
|
||||
});
|
||||
orderRecords.value = data.rows;
|
||||
pagination.value.total = data.total;
|
||||
} finally {
|
||||
orderLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(activeTab, (newVal) => {
|
||||
if (newVal === 'orders') {
|
||||
fetchOrders();
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchUserDetail() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const userId = route.query.id;
|
||||
const { data } = await getQyUserDetailApi(Number(userId));
|
||||
userInfo.value = data;
|
||||
basicInfo.value.registerTime = data.createTimeStr || "";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchUserDetail();
|
||||
});
|
||||
async function handleModifyBalance(row: QyUserDTO) {
|
||||
currentBalance.value = row.balance || 0;
|
||||
balanceVisible.value = true;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<div class="flex-container">
|
||||
<el-card class="user-info-card">
|
||||
<div class="user-header">
|
||||
<el-avatar :size="100" :src="userInfo.avatar" fit="cover" shape="square">
|
||||
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
|
||||
<circle cx="50" cy="40" r="12" fill="#9e9e9e" />
|
||||
<rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
|
||||
</svg>
|
||||
</el-avatar>
|
||||
<div class="user-name">{{ userInfo.name }}</div>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-descriptions class="user-details" :column="1" border>
|
||||
<el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">{{ userInfo.mobile }}</el-descriptions-item>
|
||||
<el-descriptions-item label="余额">¥{{ userInfo.balance?.toFixed(2) }} <el-button type="primary" size="small"
|
||||
@click="handleModifyBalance(userInfo)">修改</el-button></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-card class="info-card">
|
||||
<div class="tab-header">
|
||||
<el-tabs type="card" v-model="activeTab">
|
||||
<el-tab-pane label="基础信息" name="basic"></el-tab-pane>
|
||||
<el-tab-pane label="订单记录" name="orders"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<el-descriptions class="info-details" v-if="activeTab === 'basic'" :column="2" border>
|
||||
<el-descriptions-item label="用户ID">{{ userInfo.userid }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业ID">{{ userInfo.corpid }}</el-descriptions-item>
|
||||
<el-descriptions-item label="职务信息">{{ userInfo.position }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div class="info-details" v-if="activeTab === 'orders'">
|
||||
<el-table v-loading="orderLoading" :data="orderRecords" row-key="orderId" border>
|
||||
<el-table-column label="订单ID" prop="orderId" width="120" />
|
||||
<el-table-column label="商品名称" prop="goodsNames" width="180" />
|
||||
<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="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="pagination.currentPage" v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
|
||||
@size-change="fetchOrders" @current-change="fetchOrders" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<BalanceEditModal v-model:visible="balanceVisible" :row="userInfo" @refresh="fetchUserDetail" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
min-height: 0;
|
||||
|
||||
.user-info-card {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.user-name {
|
||||
margin-top: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -13,6 +13,8 @@ import { getQyDeptListApi } from "@/api/system/dept";
|
|||
import { getPostListApi } from "@/api/system/post";
|
||||
import { getRoleListApi } from "@/api/system/role";
|
||||
import { useWxStore } from "@/store/modules/wx";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
/**
|
||||
* 企业用户管理页面的组合式函数
|
||||
|
@ -20,6 +22,7 @@ import { useWxStore } from "@/store/modules/wx";
|
|||
*/
|
||||
export function useHook() {
|
||||
const wxStore = useWxStore(); // 微信相关状态管理
|
||||
const router = useRouter();
|
||||
|
||||
// 搜索表单参数
|
||||
const searchFormParams = reactive<QyUserQuery>({
|
||||
|
@ -34,7 +37,7 @@ export function useHook() {
|
|||
const timeRange = ref<[string, string]>(); // 时间范围选择
|
||||
|
||||
// 列表相关状态
|
||||
const dataList = ref([]); // 用户列表数据
|
||||
const dataList = ref<QyUserDTO[]>([]); // 用户列表数据
|
||||
const pageLoading = ref(true); // 加载状态
|
||||
const pagination = reactive<PaginationProps>({ // 分页配置
|
||||
total: 0,
|
||||
|
@ -117,8 +120,23 @@ export function useHook() {
|
|||
* 查看用户详情
|
||||
* @param row 用户数据行
|
||||
*/
|
||||
const handleViewDetail = (row: any) => {
|
||||
// TODO: 实现查看详情逻辑
|
||||
const handleViewDetail = (row: QyUserDTO) => {
|
||||
// 保存信息到标签页
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path: `/user/qy/detail`,
|
||||
name: "qyDetail",
|
||||
query: { id: row.id },
|
||||
meta: {
|
||||
title: `${row.name}`,
|
||||
dynamicLevel: 3
|
||||
}
|
||||
});
|
||||
router.push({
|
||||
path: '/user/qy/detail',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -7,6 +7,7 @@ import BalanceEditModal from "./BalanceEditModal.vue";
|
|||
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import View from "@iconify-icons/ep/view";
|
||||
|
||||
defineOptions({
|
||||
name: "QyUser"
|
||||
|
@ -57,40 +58,31 @@ watch(
|
|||
|
||||
<div class="grid-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="(item, index) in dataList" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-card class="user-card">
|
||||
<div class="card-content">
|
||||
<el-avatar :size="60" :src="item.avatar" fit="cover" shape="square" class="avatar">
|
||||
<template v-if="!item.avatar">
|
||||
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 浅灰圆形背景 -->
|
||||
<circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
|
||||
<!-- 中灰人形图标 -->
|
||||
<circle cx="50" cy="40" r="12" fill="#9e9e9e" />
|
||||
<!-- 修改后的身体部分 - 矩形躯干 -->
|
||||
<rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
|
||||
</svg>
|
||||
</template>
|
||||
</el-avatar>
|
||||
<div class="user-info">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<!-- <div class="gender">性别:{{ item.gender === '1' ? '男' : item.gender === '2' ? '女' : '' }}</div> -->
|
||||
<div class="create-time">创建时间:{{ item.createTimeStr }}</div>
|
||||
<div class="balance">余额:¥{{ item.balance?.toFixed(2) }}</div>
|
||||
<el-col v-for="(item, index) in dataList" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-card class="user-card" :body-style="{ padding: '8px 20px' }">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-content">
|
||||
<el-avatar :size="80" :src="item.avatar" fit="cover" shape="square" class="avatar">
|
||||
<template v-if="!item.avatar">
|
||||
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
|
||||
<circle cx="50" cy="40" r="12" fill="#9e9e9e" />
|
||||
<rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
|
||||
</svg>
|
||||
</template>
|
||||
</el-avatar>
|
||||
<div class="user-info">
|
||||
<div class="name">姓名:{{ item.name }}</div>
|
||||
<div class="tel">电话:{{ item.mobile }}</div>
|
||||
<div class="balance">余额:{{ item.balance }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-gap"></div>
|
||||
<div class="card-footer">
|
||||
<el-divider class="divider" />
|
||||
<el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" size="small" class="detail-btn" @click="handleViewDetail(item)">
|
||||
查看详情
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="warning" size="small" class="detail-btn" @click="handleModifyBalance(item)">
|
||||
修改余额
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
@ -117,47 +109,64 @@ watch(
|
|||
|
||||
.user-card {
|
||||
margin-bottom: 20px;
|
||||
min-height: 180px;
|
||||
min-height: 210px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
flex-direction: row;
|
||||
margin: 15px 0px;
|
||||
gap: 15px;
|
||||
|
||||
.avatar {
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
|
||||
.name,
|
||||
.tel,
|
||||
.balance {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.gender,
|
||||
.create-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
.name {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
color: #67c23a;
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
width: 100%;
|
||||
.card-footer {
|
||||
margin-top: auto;
|
||||
|
||||
.divider {
|
||||
margin: 2px 0px;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-gap {
|
||||
flex-grow: 1;
|
||||
min-height: 40px;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
@ -184,4 +193,9 @@ watch(
|
|||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue