351 lines
9.5 KiB
Vue
351 lines
9.5 KiB
Vue
<template>
|
|
<div v-can="permissionCodes.product.read" class="product-list">
|
|
<div class="filters bg-white">
|
|
<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索产品名称或编码" />
|
|
<t-dropdown-menu class="menus">
|
|
<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
|
|
<t-dropdown-item v-model="productType" label="类型" :options="productTypeOptions" @change="selectProductType" />
|
|
<t-dropdown-item
|
|
:model-value="categoryIdList"
|
|
label="分类"
|
|
:options="categoryOptions"
|
|
multiple
|
|
:options-columns="2"
|
|
@change="selectCategory"
|
|
@confirm="confirmCategory"
|
|
@reset="resetCategory"
|
|
@update:model-value="updateCategory"
|
|
/>
|
|
</t-dropdown-menu>
|
|
</div>
|
|
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
|
<t-cell-group
|
|
v-if="productList.length"
|
|
class="list fix-last-cell-line empty-cell-title-margin"
|
|
theme="card"
|
|
>
|
|
<t-cell v-for="(item, index) in productList" :key="item.id" class="item" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
|
|
<template #leftIcon>
|
|
<t-image
|
|
v-if="getProductPhotoURL(item)"
|
|
:src="getProductPhotoURL(item)"
|
|
:alt="item.name || '产品图片'"
|
|
fit="cover"
|
|
class="avatar"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="avatar placeholder"
|
|
v-text="(item.name || '产').slice(0, 1)"
|
|
/>
|
|
</template>
|
|
<template #title>
|
|
<div class="text-bold" v-text="item.name || '未命名产品'" />
|
|
</template>
|
|
<template #note>
|
|
<t-tag
|
|
size="small"
|
|
variant="outline"
|
|
:theme="getProductStatusTheme(item.status)"
|
|
:content="getProductStatusText(item.status)"
|
|
/>
|
|
</template>
|
|
<template #description>
|
|
<div class="description">
|
|
<t-tag
|
|
size="small"
|
|
variant="outline"
|
|
:content="item.code"
|
|
/>
|
|
<t-tag
|
|
size="small"
|
|
variant="outline"
|
|
:content="getProductTypeText(item.productType)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</t-cell>
|
|
</t-cell-group>
|
|
<div v-else class="center-tips" v-text="emptyText" />
|
|
<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
|
</t-pull-down-refresh>
|
|
</div>
|
|
<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type DropdownValue } from "tdesign-mobile-vue";
|
|
import { useUserStore } from "timi-web-api";
|
|
import ProductAPI from "@/api/ProductAPI";
|
|
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
|
import { useNavBarStore } from "@/store/navBarStore";
|
|
import type { NavBarAction } from "@/types/NavBarAction";
|
|
import type { Product, ProductCategory, ProductStatus, ProductType } from "@/types/Product";
|
|
import { getErrorMessage } from "@/utils/error";
|
|
import { getProductPhotoURL, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
|
|
import { Message } from "@/utils/message";
|
|
import { permissionCodes } from "@/utils/permission";
|
|
|
|
defineOptions({ name: "ProductList" });
|
|
|
|
const router = useRouter();
|
|
const navBarStore = useNavBarStore();
|
|
const userStore = useUserStore();
|
|
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create));
|
|
const actionList = computed<NavBarAction[]>(() => canCreate.value ? [{
|
|
key: "create",
|
|
text: "新增产品",
|
|
icon: "add",
|
|
theme: "primary",
|
|
action: toCreate
|
|
}] : []);
|
|
|
|
const keyword = ref("");
|
|
const status = ref("ALL");
|
|
const productType = ref("ALL");
|
|
const categoryIdList = ref<string[]>(["ALL"]);
|
|
const categoryList = ref<ProductCategory[]>([]);
|
|
const productList = ref<Product[]>([]);
|
|
const pageIndex = ref(0);
|
|
const total = ref(0);
|
|
const isLoading = ref(false);
|
|
const isRefreshing = ref(false);
|
|
const isNoMore = ref(false);
|
|
let keywordTimer: number | undefined;
|
|
let requestToken = 0;
|
|
|
|
const statusOptions = [
|
|
{ label: "全部状态", value: "ALL" },
|
|
{ label: "启用", value: "ACTIVE" },
|
|
{ label: "停用", value: "INACTIVE" }
|
|
];
|
|
const productTypeOptions = [
|
|
{ label: "全部类型", value: "ALL" },
|
|
{ label: "服务", value: "SERVICE" },
|
|
{ label: "实物", value: "GOODS" },
|
|
{ label: "消耗品", value: "CONSUMABLE" }
|
|
];
|
|
const categoryOptions = computed(() => [{ label: "全部分类", value: "ALL" }, ...categoryList.value.map(item => ({
|
|
label: item.name || "未命名分类",
|
|
value: item.id || ""
|
|
}))]);
|
|
const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无产品");
|
|
|
|
async function loadCategories(): Promise<void> {
|
|
const result = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
|
|
categoryList.value = result.list || [];
|
|
}
|
|
|
|
async function fetch(reset = false): Promise<void> {
|
|
if (!reset && (isLoading.value || isNoMore.value)) {
|
|
return;
|
|
}
|
|
if (reset) {
|
|
pageIndex.value = 0;
|
|
productList.value = [];
|
|
total.value = 0;
|
|
isNoMore.value = false;
|
|
}
|
|
const token = ++requestToken;
|
|
isLoading.value = true;
|
|
try {
|
|
const pageSize = 15;
|
|
const result = await ProductAPI.list({
|
|
index: pageIndex.value,
|
|
size: pageSize,
|
|
keyword: keyword.value || undefined,
|
|
status: status.value === "ALL" ? undefined : status.value as ProductStatus,
|
|
productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
|
|
categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
|
|
});
|
|
if (token !== requestToken) {
|
|
return;
|
|
}
|
|
const list = result.list || [];
|
|
productList.value = reset ? list : productList.value.concat(list);
|
|
total.value = result.total || 0;
|
|
pageIndex.value += 1;
|
|
isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
|
|
} finally {
|
|
if (token === requestToken) {
|
|
isLoading.value = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function refresh(): Promise<void> {
|
|
try {
|
|
await fetch(true);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
|
} finally {
|
|
isRefreshing.value = false;
|
|
}
|
|
}
|
|
|
|
async function loadMore(): Promise<void> {
|
|
try {
|
|
await fetch();
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
|
}
|
|
}
|
|
|
|
async function selectStatus(value: DropdownValue): Promise<void> {
|
|
if (!Array.isArray(value)) {
|
|
status.value = String(value);
|
|
await fetch(true);
|
|
}
|
|
}
|
|
|
|
async function selectProductType(value: DropdownValue): Promise<void> {
|
|
if (!Array.isArray(value)) {
|
|
productType.value = String(value);
|
|
await fetch(true);
|
|
}
|
|
}
|
|
|
|
function getDropdownStringList(value: DropdownValue): string[] {
|
|
const valueList = Array.isArray(value) ? value : [value];
|
|
return valueList
|
|
.filter((item): item is string | number => !Array.isArray(item))
|
|
.map(item => String(item));
|
|
}
|
|
|
|
function normalizeCategoryIdList(value: DropdownValue): string[] {
|
|
const idList = getDropdownStringList(value).filter(Boolean);
|
|
if (!idList.length) {
|
|
return ["ALL"];
|
|
}
|
|
return idList.includes("ALL") && idList.length > 1 ? idList.filter(item => item !== "ALL") : idList;
|
|
}
|
|
|
|
function selectCategory(value: DropdownValue): void {
|
|
categoryIdList.value = normalizeCategoryIdList(value);
|
|
}
|
|
|
|
async function confirmCategory(value: DropdownValue): Promise<void> {
|
|
categoryIdList.value = normalizeCategoryIdList(value);
|
|
await fetch(true);
|
|
}
|
|
|
|
async function resetCategory(): Promise<void> {
|
|
categoryIdList.value = ["ALL"];
|
|
await fetch(true);
|
|
}
|
|
|
|
function updateCategory(value: DropdownValue): void {
|
|
categoryIdList.value = normalizeCategoryIdList(value);
|
|
}
|
|
|
|
async function toCreate(): Promise<void> {
|
|
await router.push("/management/products/create");
|
|
}
|
|
|
|
async function toDetail(item: Product): Promise<void> {
|
|
if (item.id) {
|
|
await router.push(`/management/products/${item.id}`);
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
navBarStore.clearRight();
|
|
navBarStore.setCustomRightVisible(canCreate.value);
|
|
try {
|
|
await Promise.all([loadCategories(), fetch(true)]);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
|
}
|
|
});
|
|
|
|
watch(keyword, () => {
|
|
window.clearTimeout(keywordTimer);
|
|
keywordTimer = window.setTimeout(async () => {
|
|
try {
|
|
await fetch(true);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
|
}
|
|
}, 300);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
navBarStore.clearRight();
|
|
window.clearTimeout(keywordTimer);
|
|
requestToken += 1;
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.product-list {
|
|
padding: var(--app-nav-height) 0 1rem;
|
|
|
|
.filters {
|
|
top: var(--app-nav-height);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
padding: .75rem 1rem;
|
|
position: sticky;
|
|
background: #F5F5F8;
|
|
box-shadow: var(--td-shadow-1);
|
|
flex-direction: column;
|
|
|
|
.keyword {
|
|
--td-input-vertical-padding: 8px 14px;
|
|
|
|
border: 1px solid var(--td-component-border);
|
|
z-index: 1;
|
|
background: var(--td-bg-color-container);
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.menus {
|
|
--td-spacer-1: 6px;
|
|
|
|
width: 100%;
|
|
overflow: hidden;
|
|
margin-top: -1rem;
|
|
padding-top: .8rem;
|
|
background: #fff;
|
|
border: 1px solid rgba(148, 163, 184, .18);
|
|
border-radius: 0 0 1rem 1rem;
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.t-dropdown-menu__item) {
|
|
min-width: 0;
|
|
}
|
|
|
|
:deep(.t-dropdown-menu__title) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
padding-top: .75rem;
|
|
|
|
.item {
|
|
padding: 10px;
|
|
|
|
.avatar {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.description {
|
|
gap: .5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|