xk-doctor-wx/subPackages/sub_clinic_admin/warehouse/index.vue

<template>
	<clinic-page-layout :title="pageTitle" :show-back="true">
		<view class="search">
			<input v-model="keyword" placeholder="搜索药品名称" @confirm="reload" />
			<text @click="reload">搜索</text>
		</view>

		<view
			v-for="item in list"
			:key="item._wxKey"
			class="item"
			@click="goDetail(item)"
		>
			<image class="thumb" :src="rowDisplay(item).imageUrl" mode="aspectFill" />
			<view class="body">
				<view class="title">{{ rowDisplay(item).drugName }}</view>
				<view class="sub">供货 {{ rowDisplay(item).buyPrice }} · 售价 {{ rowDisplay(item).price }}</view>
				<view class="sub">库存 {{ rowDisplay(item).stock }}</view>
			</view>
			<view class="actions" @click.stop>
				<view class="tag" :class="rowDisplay(item).isOnShelf ? 'on' : 'off'">{{ rowDisplay(item).statusText }}</view>
				<view class="btn-row">
					<text class="act-btn" @click="openPriceEdit(item)">改价</text>
					<text class="act-btn shelf" @click="toggleStatus(item)">
						{{ rowDisplay(item).isOnShelf ? '下架' : '上架' }}
					</text>
				</view>
			</view>
		</view>

		<view v-if="!loading && !list.length" class="empty">暂无药品</view>

		<price-edit-modal
			:visible="priceModalVisible"
			:item="priceEditItem"
			@close="closePriceEdit"
			@confirm="onPriceConfirm"
		/>
	</clinic-page-layout>
</template>

<script>
	import ClinicPageLayout from '../components/clinic-page-layout.vue'
	import PriceEditModal from './components/PriceEditModal.vue'
	import {
		getWarehouseList,
		updateWarehouseStatus,
		updateWarehousePrice,
	} from '@/api/clinicAdmin.js'
	import { withWxKey } from '@/utils/wxListKey.js'
	import { mapWarehouseRow } from '../common/display.js'

	export default {
		components: { ClinicPageLayout, PriceEditModal },
		data() {
			return {
				pageTitle: '仓库管理',
				warehouseType: '',
				keyword: '',
				list: [],
				page: 1,
				loading: false,
				priceModalVisible: false,
				priceEditItem: null,
				priceSubmitting: false,
			}
		},
		onLoad(q) {
			if (q.label) {
				this.pageTitle = decodeURIComponent(q.label)
			}
			if (q.type != null && q.type !== '') {
				this.warehouseType = q.type
			}
			this.reload()
		},
		onReachBottom() {
			this.load(this.page + 1, true)
		},
		methods: {
			rowDisplay(item) {
				return mapWarehouseRow(item)
			},
			reload() {
				this.page = 1
				this.load(1, false)
			},
			load(page, append) {
				this.loading = true
				const params = { page, pageSize: 20 }
				if (this.keyword) params.name = this.keyword
				if (this.warehouseType !== '' && this.warehouseType != null) {
					params.type = this.warehouseType
				}
				getWarehouseList(params).then(w => {
					const items = withWxKey((w.data && w.data.items) || [], 'id', 'wh')
					this.list = append ? this.list.concat(items) : items
					this.page = page
				}).finally(() => { this.loading = false })
			},
			goDetail(item) {
				uni.navigateTo({ url: '/subPackages/sub_clinic_admin/warehouse/detail?id=' + item.id })
			},
			openPriceEdit(item) {
				this.priceEditItem = item
				this.priceModalVisible = true
			},
			closePriceEdit() {
				this.priceModalVisible = false
				this.priceEditItem = null
			},
			onPriceConfirm(price) {
				if (!this.priceEditItem || this.priceSubmitting) return
				this.priceSubmitting = true
				updateWarehousePrice({ id: this.priceEditItem.id, price }).then(w => {
					if (w.ok) {
						uni.showToast({ title: '修改成功' })
						this.closePriceEdit()
						this.reload()
					}
				}).finally(() => { this.priceSubmitting = false })
			},
			toggleStatus(item) {
				const action = item.status === 2 ? '下架' : '上架'
				uni.showModal({
					title: '提示',
					content: '确定' + action + '「' + ((item.drug && item.drug.drug_name) || '') + '」？',
					success: (res) => {
						if (!res.confirm) return
						updateWarehouseStatus(item.id).then(w => {
							if (w.ok) {
								uni.showToast({ title: '操作成功' })
								item.status = item.status === 2 ? 1 : 2
							}
						})
					},
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	background: #fff;
	padding: 16rpx 24rpx;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	align-items: center;
}
.search input {
	flex: 1;
	font-size: 28rpx;
}
.search text {
	color: #6acdbb;
	font-size: 28rpx;
	margin-left: 16rpx;
}
.item {
	display: flex;
	align-items: flex-start;
	background: #fff;
	padding: 24rpx;
	border-radius: 16rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}
.thumb {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
	flex-shrink: 0;
	background: #f5f5f5;
}
.body {
	flex: 1;
	margin-left: 20rpx;
	min-width: 0;
	padding-right: 12rpx;
}
.title {
	font-size: 28rpx;
	color: #333;
}
.sub {
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}
.actions {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12rpx;
}
.tag {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
}
.tag.on {
	color: #6acdbb;
	background: rgba(106, 205, 187, 0.12);
}
.tag.off {
	color: #999;
	background: #f5f5f5;
}
.btn-row {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	align-items: flex-end;
}
.act-btn {
	font-size: 24rpx;
	color: #6acdbb;
	padding: 4rpx 0;
}
.act-btn.shelf {
	color: #666;
}
.empty {
	text-align: center;
	color: #999;
	padding: 60rpx;
}
</style>