add product
This commit is contained in:
Timi
@@ -0,0 +1,359 @@
|
||||
<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 || item.code || '产').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 { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { 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 ? "未找到匹配产品" : "暂无产品");
|
||||
|
||||
function getProductPhotoURL(item: Product): string {
|
||||
const attachment = item.attachmentList?.find(item => item.attachType === "PHOTO" && !!item.id);
|
||||
return attachment?.id ? getAttachmentReadURL(attachment.id, 128) : "";
|
||||
}
|
||||
|
||||
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 {
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
background: var(--td-bg-color-page);
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user