agricultural-products-traceability-app/sunPages/traceability-product/index.vue

<template>
	<view class="v-pages">

		<!-- 页面 筛选 -->
		<view class="v-pages-filter">
			<!-- 页面 搜索 -->
			<view class="v-pages-search">
				<uni-search-bar @confirm="search" v-model="queryParams.processingName" @cancel="cancel" @clear="clear"
					placeholder="请输入溯源产品名称" cancelButton="always"></uni-search-bar>
			</view>
		</view>

		<!-- 页面 列表 -->
		<z-paging ref="paging" v-model="listData" :pagingStyle="padingStyle" @query="getListData">
			<view class="v-pages-list v-container m-t-regular">
				<view class="v-pages-list-item" v-for="item in listData" :key="item.id"
					@click="getProduct(item.id,item.processingName)">
					<!-- 页面 卡片 -->
					<view class="v-card" :class="Product==item.id?'active':''">
						<image src="@/static/images/icon_select.svg" class="v-card-select"></image>
						<!-- 卡片 内容 -->
						<view class="v-card-content">
							<!-- 卡片 上部 -->
							<view class="v-card-top row">
								<!-- 卡片 信息 -->
								<view class="v-card-info">
									<view class="v-card-title row">
										<text class="name col">{{ item.processingName }}</text>
									</view>
									<view class="v-card-state m-t-mini">
										<text class="state secondary" v-if="item.speciesName">{{ item.speciesName }}
										</text>
										<dict-tag class="state primary" type="source_type" :value="item.sourceType" />
									</view>
									<view class="v-card-code">
										<text class="iconfont icon-code m-r-small"></text>
										{{ item.traceabilityCode }}
									</view>
								</view>
							</view>
							<!-- 卡片 下部 -->
							<view class="v-card-bot">
								<view class="v-page-form small row">
									<view class="v-form-item col-12">
										<text>生产数量：</text>
										{{ item.processingProduction }}公斤
									</view>
									<view class="v-form-item col-12">
										<text>生产日期:</text>
										{{ getData(item.createTime) }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 页面 操作 -->
		<view class="v-pages-operation row" :class="Product==-1?'show':'hide'">
			<div class="v-pages-operation-item col-6" @click="GoToPage('delivery')">
				<view class="v-secondary-btn">
					<text class="iconfont icon-delivery"></text>
					配送
				</view>
			</div>
			<div class="v-pages-operation-item col-6" @click="GoToPage('sales')">
				<view class="v-secondary-btn">
					<text class="iconfont icon-sales"></text>
					销售
				</view>
			</div>
			<div class="v-pages-operation-item col-6" @click="GoToPage('loss')">
				<view class="v-secondary-btn">
					<text class="iconfont icon-bad"></text>
					报损
				</view>
			</div>
			<div class="v-pages-operation-item col-6" @click="deleteProduct()">
				<view class="v-secondary-btn">
					<text class="iconfont icon-delete"></text>
					删除
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	import * as ProductApi from "@/api/traceability/product"
	import mix from '@/utils/mix.js'
	import DictTag from "@/components/DictTag/index"

	export default {
		components: {
			DictTag
		},
		data() {
			return {
				padingStyle: {
					top: '150rpx'
				},
				queryParams: {
					processingName: null,
				},
				value1: 1,
				value2: 1,
				value2: 1,
				options1: [],
				options2: [],
				options3: [],
				listData: [],
				Product: -1,
				ProductName: ''
			}
		},
		mixins: [mix],
    onShow() {
      const datas = uni.getStorageSync('canRefresh');
      if(datas == 'true'){
        // this.$refs.paging.reload()
      }
    },
    onUnload() {
      uni.removeStorageSync('canRefresh')
    },
		methods: {
			// 获取产品数据
			GoToPage(value) {
				switch (value) {
					case "delivery":
            uni.navigateTo({
							url: '/sunPages/traceability-product/delivery/deliveryEdit?id=' + this.Product
						});
						break;
					case "sales":
            uni.navigateTo({
							url: '/sunPages/traceability-product/sales/salesEdit?id=' + this.Product
						});
						break;
					case "loss":
            uni.navigateTo({
							url: '/sunPages/traceability-product/loss/lossEdit?id=' + this.Product
						});
						break;
				}
			},

			// 获取产品数据
			async getListData(pageNo, pageSize) {
				try {
					const queryParams = {
						pageNo: pageNo,
						pageSize: pageSize,
						processingName: this.queryParams.processingName,
					}
					const res = await ProductApi.getProductPage(queryParams)
					this.$refs.paging.complete(res.data.list)
				} catch {
					this.$refs.paging.complete(false);
				}
			},

			// 获取当前产品
			getProduct(value, name) {
				if (this.Product != value) {
					this.Product = value
					this.ProductName = name
				} else {
					this.Product = -1
				}
			},

			// 删除产品
			deleteProduct() {
				const that = this
				const id = this.Product
				uni.showModal({
					title: '提示',
					content: '确定删除此溯源产品吗？',
					success: function(res) {
						if (res.confirm) {
							ProductApi.deleteProduct(id).then(response => {
								uni.showToast({
									title: `删除成功`,
									icon: 'success',
									duration: 1000,
									complete: function() {
										that.$refs.paging.reload()
									}

								})
							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			//确定搜索
			search(res) {
				this.$refs.paging.reload()
			},

			//清除搜索
			clear(res) {
				this.queryParams.processingName = null;
				this.$refs.paging.reload()
			},

			//取消搜索
			cancel(res) {
				this.queryParams.processingName = null;
				this.$refs.paging.reload()
			},

		}
	}
</script>

<style lang="scss">
</style>