admin/addon/cashier/source/os/pages/stock/manage.vue

<template>
	<base-page>
		<view class="manage">
			<view class="screen-warp common-form">
				<view class="common-form-item">
					<view class="form-inline">
						<label class="form-label">商品名称/编码</label>
						<view class="form-input-inline"><input type="text" v-model="searchData.search" placeholder="请输入商品名称/编码" class="form-input" /></view>
					</view>
					<view class="form-inline goods-category">
						<label class="form-label">商品分类</label>
						<view class="form-input-inline">
							<uni-data-picker v-model="searchData.category_id" :localdata="classifyData.data" popup-title="请选择商品分类"></uni-data-picker>
						</view>
					</view>
					<view class="form-inline common-btn-wrap">
						<button type="default" class="screen-btn" @click="searchFn()">筛选</button>
						<button type="default" @click="resetFn()">重置</button>
					</view>
				</view>
			</view>

			<view class="manage-table">
				<uni-table ref="table" :loading="table.loading" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="left">产品名称</uni-th>
						<uni-th width="140" align="center">规格</uni-th>
						<uni-th width="140" align="center">编码</uni-th>
						<uni-th width="140" align="center">库存</uni-th>
						<uni-th width="140" align="center">成本</uni-th>
						<uni-th width="200" align="center">添加时间</uni-th>
						<uni-th width="140" align="right">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in table.data">
						<uni-td align="left" class="name">
							<image :src="$util.img(item.sku_image, { size: 'small' })" mode="aspectFill"></image>
							<text class="multi-hidden">{{ item.goods_name }}</text>
						</uni-td>
						<uni-td align="center">{{ item.spec_name }}</uni-td>
						<uni-td align="center">{{ item.sku_no }}</uni-td>
						<uni-td align="center">{{ item.real_stock || 0 }}</uni-td>
						<uni-td align="center">{{ item.cost_price }}</uni-td>
						<uni-td align="center">{{ $util.timeFormat(item.create_time) }}</uni-td>
						<uni-td align="right">
							<view class="action-btn"><text @click="toDetail()">查看流水</text></view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="paging-wrap-fill"></view>
				<view class="paging-wrap"><uni-pagination show-icon :page-size="paging.pageSize" :current="paging.pageCurrent" :total="paging.total" @change="paginChange" /></view>
			</view>
		</view>
	</base-page>
</template>
<script>
import uniDataPicker from '@/components/uni-data-picker/uni-data-picker.vue';
export default {
	components: {
		uniDataPicker
	},
	data() {
		return {
			classifyData: {
				data: []
			},
			table: {
				loading: false, //表格加载动画
				data: []
			},
			paging: {
				pageSize: 9, // 每页数据量
				pageCurrent: 1, // 当前页
				total: 0 // 数据总量
			},
			searchData: {
				search: '',
				category_id: '',
				min_stock: '',
				max_stock: ''
			}
		};
	},
	onLoad(option) {
		uni.hideTabBar();
		this.getCategory();
	},
	onShow() {
		this.getTableData();
	},
	methods: {
		searchFn() {
			this.table.loading = true;
			this.paging.pageCurrent = 1;
			this.getTableData(this.searchData);
		},
		resetFn() {
			this.table.loading = true;
			this.paging.pageCurrent = 1;
			this.searchData.search = '';
			this.searchData.category_id = '';
			this.searchData.min_stock = '';
			this.searchData.max_stock = '';
			this.getTableData(this.searchData);
		},
		getTableData(obj = {}) {
			let data = {
				page_size: this.paging.pageSize,
				page: this.paging.pageCurrent
			};
			Object.assign(data, obj);
			this.$api.sendRequest({
				url: '/stock/storeapi/manage/lists',
				data: data,
				success: res => {
					this.table.loading = false;
					if (res.code == 0) {
						this.table.data = res.data.list;
						this.$forceUpdate();
					} else {
						this.$util.showToast({ title: res.message });
					}
					this.paging.total = res.data.count;
				}
			});
		},
		getCategory() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/goods/category',
				data: { level: 3 },
				success: res => {
					let data = res.data;
					if (res.code == 0 && data.length) {
						this.classifyData.data = this.analyzeCategory(data);
						this.$forceUpdate();
					} else {
						this.$util.showToast({ title: res.message });
					}
				}
			});
		},
		analyzeCategory(data) {
			var arr = data.map((item, index) => {
				var obj = {};
				obj.text = item.category_name;
				obj.value = item.category_id;
				if (item.child_list && item.child_list.length) {
					obj.children = this.analyzeCategory(item.child_list);
				}
				return obj;
			});
			return arr;
		},
		// 切换分页
		paginChange(e) {
			this.table.loading = true;
			this.paging.pageCurrent = e.current;
			this.getTableData();
		},
		toDetail() {
			this.$util.redirectTo('/pages/stock/records');
		}
	}
};
</script>

<style lang="scss">
.manage {
	position: relative;
	background-color: #fff;
	padding: 0.15rem;
	min-height: 100vh;
	box-sizing: border-box;
}
// 筛选面板
.screen-warp {
	padding: 0.15rem;
	background-color: #f2f3f5;
	margin-bottom: 0.15rem;
	.common-form-item .form-label {
		width: 1.2rem;
	}
	.common-btn-wrap {
		margin-left: 1.2rem;
	}
	.goods-category .form-input-inline {
		width: 2.8rem;
	}
	.common-form-item {
		margin-bottom: 0;
	}
}
.paging-wrap-fill {
	height: 0.6rem;
}
.paging-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	padding: 0.1rem 0.15rem;
	margin-top: 0.1rem;
	background-color: #fff;
}
// 表格详情
.manage-table {
	.name {
		display: flex;
		image {
			margin-right: 0.1rem;
			flex-shrink: 0;
			width: 0.5rem;
			height: 0.5rem;
		}
	}
	.action-btn {
		text {
			color: $uni-color-primary;
		}
	}
}
</style>