unit.vue 4.73 KB
<template>
	<view>
		<view class="header">
			<uni-search-bar @confirm="handleSearch" @clear="searchClear" placeholder="输入名称"></uni-search-bar>
		</view>
		<view class="unit-list">
			<view :class="[item.dictLabel !== '空选择'?'item' : 'empty']" v-for="(item,index) in unitList" :key="index" v-if="item.dictLabel">
				<view class="top" @tap="listClick(item.dictLabel)">
					<view class="t-content u-f u-f-jcsb p-10">
						<view class="name empty">
							{{item.dictLabel}}
						</view>
						<view>
							<uni-icons type="arrowright" size="18" color="gray"></uni-icons>
						</view>
					</view>
				</view>
				<view class="bottom" v-if="item.dictLabel !== '空选择'">
					<view class="operate p-10">
						<view class="delete" @tap="delUnit(item.dictCode)">删除</view>
						<view class="modify" @tap="editUnit(item.dictCode)">修改</view>
					</view>
				</view>
			</view>
			<uni-load-more :iconSize="18" :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询参数
				queryParams: {
					dictType: 'unitType',
					dictLabel: '',
					pageNum: 1,
					pageSize: 10
				},
				total: null,
				loadStatus: "",
				unitList: [],
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: "edit"
			})
		},
		onPullDownRefresh() {
			this.queryParams.pageNum = 1;
			this.getUnitList()
		},
		onReachBottom() {
			if (this.queryParams.pageNum >= this.total / 10) {
				this.loadStatus = "noMore";
				return
			}
			this.loadStatus = "loading";
			this.queryParams.pageNum++;
			this.getUnitList();
		},
		onLoad() {
			this.getUnitList();
			uni.$on('editUpdateUnit', () => {
				this.getUnitList();
				this.$msg("保存成功!");
			});
			uni.$on('addUpdateUnit', () => {
				this.getUnitList();
				this.$msg("保存成功!");
			})
		},
		onUnload() {
			uni.$off('editUpdateUnit');
			uni.$off('addUpdateUnit');
		},
		methods: {
			//获取单位列表
			getUnitList() {
				this.$http.dict.listDict(this.queryParams).then(res => {
					console.log(res)
					let emptySelect = {
						dictLabel: "空选择",
						dictSort: 0,
						dictType: "unitType",
						dictValue: "空选择",
						status: "0"
					};
					if (this.queryParams.pageNum > 1) {
						this.unitList = this.unitList.concat(res.data.rows);
					} else {
						this.unitList = res.data.rows;
						this.unitList.unshift(emptySelect)
					}
					this.total = res.data.total;
					uni.stopPullDownRefresh();
				});
			},
			// 顶部搜索
			handleSearch(e) {
				console.log(e);
				this.queryParams.dictLabel = e.value;
				this.getUnitList()
			},
			// 清除搜索
			searchClear() {
				this.queryParams.dictLabel = '';
				this.getUnitList()
			},
			// 列表点击
			listClick(value) {
				console.log(value)
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				console.log(prevPage);
				prevPage._data.abc = value;
				uni.navigateBack()
			},
			// 修改按钮操作
			editUnit(dictCode) {
				uni.navigateTo({
					url: 'edit?dictCode= ' + dictCode + '&type=edit'
				})
			},
			// 删除按钮操作
			delUnit(dictCode) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该计量单位吗?',
					success: (res) => {
						if (res.confirm) {
							this.$http.dict.delDict(dictCode).then(res => {
								if (res.data.code == 200) {
									this.unitList.forEach((item, index) => {
										this.unitList.splice(index, 1);
										this.$msg('删除成功!')
									})
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.msg
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.header {
		position: fixed;
		top: 88rpx;
		width: 100%;
		z-index: 1;
	}

	.unit-list {
		margin-top: 124rpx;

		.item {
			margin-top: 20rpx;
			height: 180rpx;
			background-color: $uni-bg-color;

			.top,
			.bottom {
				height: 90rpx;
			}

			.top {
				.t-content {
					height: 90rpx;
					line-height: 90rpx;

					.name {
						font-weight: bold;
					}
				}
			}

			.bottom {
				hegiht: 90rpx;
				line-height: 90rpx;
				border-top: 2rpx solid $uni-border-color;

				.operate {
					text-align: right;

					.delete,
					.modify {
						display: inline-block;
						width: 100rpx;
						height: 45rpx;
						line-height: 45rpx;
						text-align: center;
						border: 1rpx solid $uni-border-color;
						border-radius: 25rpx;
					}

					.delete {
						margin-right: $uni-spacing-row-base;
					}

				}
			}
		}

		.empty {
			height: 90rpx;
			line-height: 90rpx;
			background-color: $uni-bg-color;

			.name {
				font-weight: bold;
				color: $uni-color-primary;
			}
		}
	}
</style>