aiot-app/pages/warehouse/inventory/components/screen.vue

<template>
	<view>
		<u-popup :show="show" closeOnClickOverlay mode="right" @close="closePopup">
			<view class="main">
				<view class="title-t1" @click="closePopup">返回</view>
				<view class="title-t2">列表维度</view>
				<listOption label="name" value="type" :list="option.dimension" v-model="form.dimension"></listOption>
				<view class="title-t2">资产类型</view>
				<listOption label="name" value="id" :list="option.code" v-model="form.categoryLevelId"></listOption>
				<view class="title-t2">所属仓库</view>
				<listOption_line class="warehouseList" label="name" value="id" :list="option.warehouseId" v-model="form.warehouseId"></listOption_line>
			</view>
			<view class="flex-buttom">
				<view class="s1 item" @click="reset">重置</view>
				<view class="s2 item" @click="submit">筛选</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getWarehouseList, getProduceTreeByPid } from '@/api/warehouseManagement'
	import listOption from './listOption'
	import listOption_line from './listOption_line'
	import { post, get } from '@/utils/api.js'
	export default {
		components: {
			listOption,
			listOption_line
		},
		props: ['dimension', 'categoryLevelId', 'warehouseId'],
		data() {
			return {
				infoData: '',
				show: false,
				form: {
					// 列表维度
					dimension: 1,
					/* 资产类型 */
					categoryLevelId: '',
					/* 所属仓库 */
					warehouseId: ''
				},
				option: {
					dimension: [
						{
							name: '物品维度',
							type: 1
						},
						{
							name: '批次维度',
							type: 2
						},
						{
							name: '包装维度',
							type: 3
						}
					],
					code: [],
					warehouseId: []
				}
			}
		},
		created() {
			this.getwarehouseList()
			this.getClassify()
		},
		methods: {
			open() {
				this.show = true
				for (let key of Object.keys(this.form)) {
					this.form[key] = this[key]
				}
			},
			closePopup() {
				this.show = false
			},
			reset() {
				this.form = {
					dimension: 1,
					categoryLevelId: '',
					warehouseId: ''
				}
				this.$emit('succeed', this.form)
				this.closePopup()
			},
			submit() {
				this.$emit('succeed', this.form)
				this.closePopup()
			},
			//获取仓库
			getwarehouseList() {
				getWarehouseList().then(res => {
					this.option.warehouseId = res.data
				})
				// post(this.apiUrl + '/warehouseGoodsshelves/select/warehouseList').then(
				//   res => {
				//     if (res.success) {
				//       this.option.warehouseId = res.data
				//         .filter(i => !i.isDelete && !!i.status)
				//         .map(n => {
				//           return {
				//             name: n.name,
				//             id: n.id
				//           }
				//         })
				//     }
				//   }
				// )
			},
			// 获取资产类型
			getClassify() {
				getProduceTreeByPid({ type: 2 }).then(res => {
					this.option.code = res
				})
				// get(this.apiUrl + '/classify/getClassify?id=0').then(res => {
				// 	if (res.success) {
				// 		this.option.code = res.data.map(n => {
				// 			return {
				// 				name: n.name,
				// 				type: n.type
				// 			}
				// 		})
				// 		this.form.code = this.option.code[0].type
				// 		this.submit()
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100vh;
		width: 600rpx;
		position: relative;
		padding-bottom: 80rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.warehouseList {
			flex: 1;
			overflow-y: auto;
		}
	}
	.title-t1 {
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx;
	}
	.title-t2 {
		font-size: 28rpx;
		font-weight: bold;
		padding: 20rpx 30rpx;
	}
	.flex-buttom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		background-color: #fff;
		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.0901960784313725);
		.item {
			flex: 1;
			height: 80rpx;
			color: #157a2c;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&.s2 {
				background-color: #157a2c;
				color: #fff;
			}
		}
	}
</style>