crm-app-vue3/pages/wareHouse/index.vue

<template>
	<view class="page">
		<view class="page-container">
			<u-navbar class="nav-bar" title="库存管理" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
			<!-- 总资产成本区域 -->
			<view class="asset-header">
				<view class="asset-text-wrap">
					<view class="asset-title-con">
						<view class="asset-title">总资产成本（元）</view>
						<u-icon name="question-circle" size="14" color="#999999"></u-icon>
					</view>
					<text class="asset-value">{{ wareHouseCard.totalCost }}</text>
				</view>
				<view class="btn-group">
					<u-button v-if="isAdmin" type="primary" shape="circle" plain size="mini"
						@click="navigateToFieldPermissions">字段权限</u-button>
					<u-button type="success" shape="circle" plain size="mini" @click="openOrderList">开单记录</u-button>
					<order-list ref="orderListRef"></order-list>
					<u-button type="primary" shape="circle" plain size="mini"
						@click="navigateToFakeRegistration">假货登记</u-button>
				</view>
			</view>
			<view class="data-cards">
				<view class="card-item">
					<text class="card-label">当日上传</text>
					<text class="card-value">{{ wareHouseCard.uploadCostToday }}</text>
				</view>
				<view class="card-item">
					<text class="card-label">当日下架</text>
					<text class="card-value green">{{ wareHouseCard.outStockToday }}</text>
				</view>
				<view class="card-item">
					<text class="card-label">商品总数</text>
					<text class="card-value">{{ wareHouseCard.totalNum }}</text>
				</view>
			</view>
			<view class="search-wrapper">
				<u-search placeholder="搜索编号、名称、品牌..." v-model="searchString" bg-color="#f9fafb" border-radius="4rpx"
					:show-action="false" class="search-input-wrap" showAction @clear="handleSearchClear"
					@custom="applySearchAndRefresh"></u-search>
			</view>

			<view class="category-tabs-wrap">
				<u-tabs :list="tabList" :is-scroll="true" active-color="#007aff" inactive-color="#666666"
					font-size="28rpx" keyName="dictLabel" border-bottom="none" @change="switchTab"
					class="u-tabs-custom"></u-tabs>
			</view>

			<view class="filter-bar">
				<view class="filter-result" @click="showNoticeBar = !showNoticeBar">
					<text v-if="selectText">筛选结果</text>
					<u-icon v-if="selectText" :name="showNoticeBar ? 'arrow-up' : 'arrow-down'" size="16"></u-icon>
				</view>
				<view class="price-layout-btn">
					<view class="price-btn" type="text" @click="priceVisibleChange">
						<u-icon :name="priceVisible ? 'eye' : 'eye-off'" size="18" color="#1890ff"
						class="price-icon"></u-icon>
						<text class="price-text">价格可见</text>
					</view>
					<view class="dept-btn" @click="recycleDeptClick">
						<text class="sort-text">公司:</text>
						<view class="dept-name" v-if="deptName">
							{{ deptName }}
						</view>
						<image src="/static/icons/dept.png" mode="aspectFill"></image>
					</view>
					<ba-tree-picker :selectParent="true" ref="recycleDeptRef" :multiple='false'
						@select-change="deptSeletchang" border title="机构部门" :localdata="deptList" valueKey="deptId"
						textKey="deptName" childrenKey="children" :selectedValues="deptId" :personNames="deptName" />
					<view class="layout-btn" type="text" size="mini" @click="openSearchFilter">
						<image class="filter-icon" src="/static/icons/select.png" mode="aspectFill"></image>
						筛选
						<!-- <u-icon name="grid" size="20" color="#666666"></u-icon> -->
						<!-- 筛选列 品牌、价格范围、位置、回收时间、回收人员、鉴定人员、商品属性 -->
					</view>
					<searchFilter ref="searchFilter" @confirm="handleFilterChange"></searchFilter>
				</view>
			</view>
			<transition name="slide-fade">
				<view v-if="showNoticeBar && selectText">
					<u-notice-bar class="custom-notice-bar" icon="" :text="selectText" mode="closable"
						@close="handleClearFilter"></u-notice-bar>
				</view>
			</transition>
			<scroll-view ref="scrollView" class="goods-list" scroll-y @scrolltolower="handleLoadMore"
				@scroll="handleScroll" enable-back-to-top>
				<view @click.stop="clickItem(goods)" class="goods-item" v-for="(goods, goodsIndex) in goodsList"
					:key="`goods-${goodsIndex}`">
					<u-swipe-action ref="swipeRef">
						<u-swipe-action-item :options="swipeOptions" :threshold="100"
							@click="(e) => handleSwipeClick(e, goods, goodsIndex)">
							<view class="goods-info">
								<view class="goods-img-container"
									v-if="getWarehouseFieldPermissions('goodPicFileList', 'read')">
									<image class="goods-img" :src="goods.imgUrl ? goods.imgUrl : '/static/no-img.png'"
										mode="aspectFill" lazy-load></image>
									<!-- <image class="goods-img" src="/static/no-img.png" mode="aspectFill" lazy-load></image> -->
									<view
										:class="['stock-indicator', goods.downStatus == '1' ? 'up-indicator' : 'down-indicator']">
									</view>
								</view>
								<view class="info-content">
									<view class="goods-brand">
										<view v-if="getWarehouseFieldPermissions('dictLabel', 'read')">
											{{ goods.dictLabel || '-' }}
										</view>
										<!-- <image v-if="goods.indentifyCode" src="../../static/icons/code.png"
											class="code-icon" mode="aspectFill" lazy-load></image>
										<view>
											{{ goods.indentifyCode || '' }}
										</view> -->
									</view>
									<text class="goods-name" v-if="getWarehouseFieldPermissions('model', 'read')">型号：{{
										goods.model || '-' }}</text>
									<text class="goods-name"
										v-if="getWarehouseFieldPermissions('indentifyCode', 'read')">编码：{{
											goods.indentifyCode || '-' }}</text>
									<view class="price-group">
										<view class="price-item"
											v-if="getWarehouseFieldPermissions('costPrice', 'read')">
											<text class="price-type">成本价</text>
											<text class="price">¥{{ priceVisible ? goods.costPrice || '-' : '****'
											}}</text>
										</view>
										<view class="price-item"
											v-if="getWarehouseFieldPermissions('salePrice', 'read')">
											<text class="price-type">销售价</text>
											<text class="price sales">¥{{ priceVisible ? goods.salePrice || '-' : '****'
											}}</text>
										</view>
										<view class="price-item"
											v-if="getWarehouseFieldPermissions('peerPrice', 'read')">
											<text class="price-type">同行价</text>
											<text class="price">¥{{ priceVisible ? goods.peerPrice || '-' : '****'
											}}</text>
										</view>
										<view class="price-item"
											v-if="getWarehouseFieldPermissions('agentPrice', 'read')">
											<text class="price-type">代理价</text>
											<text class="price">¥{{ priceVisible ? goods.agentPrice || '-' : '****'
											}}</text>
										</view>
										<view class="price-item"
											v-if="getWarehouseFieldPermissions('actualPrice', 'read')">
											<text class="price-type">实价</text>
											<text class="price">¥{{ priceVisible ? goods.actualPrice || '-' : '****'
											}}</text>
										</view>
										<view class="price-item" v-if="getWarehouseFieldPermissions('price', 'read')">
											<text class="price-type">指导价</text>
											<text class="price">¥{{ priceVisible ? goods.price || '-' : '****' }}</text>
										</view>

									</view>



									<!-- <view class="others">
									<view class="other-item stock" >得</view>
									<view class="other-item">得</view>
									<view class="other-item">得</view>
								</view> -->
								</view>
								<view class="more">
									<view @click.stop="showMoreOptions(goods)">
										<u-icon name="more-dot-fill" size="16" color="#666666"></u-icon>
									</view>
									<text class="goods-stock" v-if="getWarehouseFieldPermissions('stock', 'read')">数量:{{
										goods.stock || 0 }}</text>
								</view>

							</view>
							<!-- 更多信息区域 -->
							<view class="more-info-container">
								<view class="more-info-header" @click.stop="toggleMoreInfo(goods)">
									<text class="more-info-title">更多信息</text>
									<u-icon :name="goods.showMoreInfo ? 'arrow-up' : 'arrow-down'" size="14"
										color="#666666"></u-icon>
								</view>
								<transition name="more-info">
									<view class="more-info-content" v-if="goods.showMoreInfo">
										<view class="info-row"
											v-if="getWarehouseFieldPermissions('recycleTime', 'read')">
											<text class="info-label">回收时间：</text>
											<text class="info-value">{{ formatterTime(goods.recycleTime) }}</text>
										</view>
										<view class="info-row"
											v-if="getWarehouseFieldPermissions('warehouseDate', 'read')">
											<text class="info-label">入库时间：</text>
											<text class="info-value">{{ formatterTime(goods.warehouseDate) }}</text>
										</view>
										<view class="info-row"
											v-if="getWarehouseFieldPermissions('productPosition', 'read')">
											<text class="info-label">商品位置：</text>
											<text class="info-value">{{ goods.productPosition || '-' }}</text>
										</view>
										<view class="info-row"
											v-if="getWarehouseFieldPermissions('identifyingPerson', 'read')">
											<text class="info-label">鉴定人员：</text>
											<text class="info-value">{{ goods.identifyingPerson || '-' }}</text>
										</view>
										<view class="info-row"
											v-if="getWarehouseFieldPermissions('recyclePerson', 'read')">
											<text class="info-label">回收人员：</text>
											<text class="info-value">{{ goods.recyclePerson || '-' }}</text>
										</view>
										<view class="info-row"
											v-if="getWarehouseFieldPermissions('stockStatus', 'read')">
											<text class="info-label">是否入库：</text>
											<text class="info-value">{{ goods.stockStatus == '1' ? '已入库' : '未入库'
												}}</text>
										</view>
										<view class="info-row" v-if="getWarehouseFieldPermissions('payType', 'read')">
											<text class="info-label">付款方式：</text>
											<text class="info-value">{{ payFormatter(goods.payType) }}</text>
										</view>
									</view>
								</transition>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</scroll-view>
		</view>
		<!-- 添加按钮 -->
		<view class="add-button" @click="handleEdit">
			<u-icon name="plus" size="36" color="#ffffff"></u-icon>
		</view>
		<moreInfo ref="moreInfoRef" :moreOptions="moreOptions" @confirm="handleMoreInfoConfirm"></moreInfo>
	</view>
</template>
<script>
import searchFilter from './components/searchFilter.vue'
import moreInfo from './components/moreInfo.vue'
import { getWarehouseButtonPermissions, getWarehouseFieldPermissions,getRoles } from '../../utils/util.js'
import orderList from './components/orderList/index.vue'
import { paymentTabList,productAttributeList } from './js/public.js'
import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
export default {
	components: {
		searchFilter,
		moreInfo,
		orderList,
		jtimePickerPopup
	},
	computed: {
		isAdmin() {
			return getRoles().some(v => v.includes('admin' || 'ADMIN'))
		}
	},
	data() {
		return {
			searchString: '',//搜索编号、名称、品牌...
			type: '',
			searchInfo: {},
			pageNum: 1,
			pageSize: 10,
			wareHouseCard: {
				totalCost: '-',
				uploadCostToday: '-',
				outStockToday: '-',
				totalNum: '-'
			},
			tabList: [],
			goodsList: [
				// {
				// 	id:'123456754',//商品库存id
				// 	name:'Rolex',//商品名称
				// 	model:'Submariner Date 126610LN',//型号
				// 	costPrice:'12345',//成本价格
				// 	salesPrice:'12345',//销售价格
				// 	peerPrice:'12345',//同行价格
				// 	agentPrice:'12345',//代理价格
				// 	stock:'12345',//库存数量
				// 	imgUrl:'https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/06/1767677335839-1767677330379.jpg',//商品图片
				// 	platform:[]//同步平台，此功能暂时不做，先定义一个字段
				// }
			],
			priceVisible: true,
			searchPopShow: false,
			total: 0,
			moreOptions: {},
			moreOptionsShow: false,
			swipeOptions: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				},
			],
			isSwipeClick: false,
			deptList: [],
			deptId: '',
			deptName: '',
			// 保存页面状态
			pageState: {
				pageNum: 1,
				goodsList: [],
				total: 0,
				scrollTop: 0
			},
			paymentTabList: paymentTabList,
			productAttributeList: productAttributeList,
			selectText: '',
			showNoticeBar: false,
		};
	},
	onLoad() {
		this.getTypeList();
	},
	methods: {
		toggleMoreInfo(goods) {
			this.$set(goods, 'showMoreInfo', !goods.showMoreInfo);
		},
		formatterTime(time) {
			if (!time) {
				return '-'
			}
			return this.$dayjs(time).format('YYYY-MM-DD')
		},
		payFormatter(payType) {
			return paymentTabList.find(item => item.value == payType)?.name || '-'
		},
		getDeptListAll() {
			const params = {
				isDept: 2
			}
			uni.$u.api.getDeptListAll(params).then(res => {
				if (res.data.length > 0) {
					this.deptList = res.data;
				} else {
					uni.$u.toast('暂无机构部门');
				}
			})
		},
		deptSeletchang(ids, names) {
			this.deptId = ids[0] || '';
			this.deptName = names[0] || '';
			this.applySearchAndRefresh();
		},
		handleClearFilter() {
			this.showNoticeBar = false;
			this.$refs.searchFilter.resetForm();
		},
		handleSearchClear() {
			this.searchString = '';
			this.applySearchAndRefresh();
		},
		recycleDeptClick() {
			this.getDeptListAll();
			this.$refs.recycleDeptRef._show();
		},
		showMoreOptions(goods) {
			this.moreOptions = goods;
			this.$refs.moreInfoRef.showMoreInfo();
		},
		getWarehouseFieldPermissions,
		getWarehouseButtonPermissions,
		handleMoreInfoConfirm() {
			this.$refs.moreInfoRef.closeModal();
		},
		getTypeList() {
			this.$getDicts("crm_form_category").then(res => {
				this.tabList = [...res]
				this.tabList.unshift({ dictLabel: "全部", dictValue: '' })
			})
		},
		getList() {
			uni.$u.api.wareHouseList({
				pageNum: this.pageNum,
				pageSize: this.pageSize,
			},
				{
					searchString: this.searchString,
					type: this.type,
					deptId: this.deptId,
					deptName: this.deptName,
					...this.searchInfo
				}).then(res => {
					if (this.pageNum == 1) {
						this.goodsList = res.rows;
					} else {
						this.goodsList = this.goodsList.concat(res.rows);
					}
					this.total = res.total;
				});
		},
		// 加载更多
		handleLoadMore() {
			console.log("加载更多");
			if (this.goodsList.length >= this.total) {
				uni.$u.toast("没有更多了");
				return;
			}
			this.pageNum++;
			this.getList();
		},
		handleFilterChange({ filters, text }) {
			this.searchInfo = filters;
			this.selectText = text;
			this.showNoticeBar = !!text;
			this.applySearchAndRefresh();
		},
		applySearchAndRefresh() {
			this.pageNum = 1;
			this.goodsList = [];
			this.getList();
			this.getCard();
		},
		formatterProductAttribute(attr) {
			if (!attr || attr.length == 0) {
				return '暂无'
			}
			return attr.map(a => this.productAttributeList.find(b => b.value == a))?.map(item => item.name).join(' ') || '暂无'
		},
		formatterStockStatus(status) {
			if (!status) {
				return '全部'
			}
			return status == '0' ? '待入库' : '已入库'
		},
		switchTab(item) {
			this.type = item.dictValue;
			this.applySearchAndRefresh();
		},
		clickItem(item) {
			if (this.isSwipeClick) {
				this.isSwipeClick = false;
				return;
			}
			// 如果是待入库商品，点击后跳转到添加页面补全信息
			if (item.stockStatus == '0') {
				this.handleEdit(item)
			} else {
				this.handleToDetail(item);
			}
		},
		handleSwipeClick(e, item, goodsIndex) {
			if (e.index == 0) {//删除
				this.isSwipeClick = true;
				if (!this.getWarehouseButtonPermissions('delete')) return false
				uni.$u.api.wareHouseDelete({
					id: item.id
				}).then(() => {
					this.$refs.swipeRef[goodsIndex].closeOther()
					uni.$u.toast("删除成功");
					this.handleSearch();
				}).catch((err) => {
					uni.$u.toast(err);
				});
			}
		},
		handleToDetail(item) {
			uni.navigateTo({
				url: `/pages/wareHouse/components/detail?id=${item.id}`,
			});
		},
		handleEdit(item) {
			if (item.id) {
				uni.navigateTo({
					url: `/pages/wareHouse/components/edit?formType=edit&id=${item.id}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/wareHouse/components/edit?formType=add`
				});
			}
		},
		// 获取仓库卡片数据（与列表使用相同筛选条件，便于筛选后卡片数据一致）
		getCard() {
			const body = {
				searchString: this.searchString,
				type: this.type,
				deptId: this.deptId,
				deptName: this.deptName,
				...this.searchInfo
			};
			uni.$u.api.getWareHouseCardPost(body).then(res => {
				if (res.code === 200) {
					this.wareHouseCard = res.data;
				}
			});
		},
		openSearchFilter() {
			this.$refs.searchFilter.open();
		},
		priceVisibleChange() {
			this.priceVisible = !this.priceVisible;
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.goodsList = [];
			this.getList();
			this.getCard();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.handleLoadMore();
		},
		onShow() {
			// 如果是从编辑页返回，则刷新列表
			if (this.pageState.pageNum > 1) {
				this.pageNum = this.pageState.pageNum;
				this.goodsList = this.pageState.goodsList;
				this.total = this.pageState.total;
				this.$nextTick(() => {
					this.$refs.scrollView.scrollTop = this.pageState.scrollTop;
				});
			} else {
				this.applySearchAndRefresh();
			}
			this.getCard();
		},
		onHide() {
			// 保存页面状态
			this.pageState = {
				pageNum: this.pageNum,
				goodsList: this.goodsList,
				total: this.total,
				scrollTop: this.scrollTop
			};
		},
		handleScroll(e) {
			this.scrollTop = e.detail.scrollTop;
		},
		navigateToFieldPermissions() {
			uni.navigateTo({ url: '/pages/wareHouse/components/fieldPermissions' });
		},
		openOrderList() {
			this.$refs.orderListRef.open();
		},
		navigateToFakeRegistration() {
			uni.navigateTo({ url: '/pages/wareHouse/components/fakeRegistration' });
		}
	}
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
.filter-result {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 26rpx;
	color: #666;
	padding: 0 16rpx;
}

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
</style>