pms-app/components/materials/master-data.vue

<template>
	<uni-popup class="materials-popup" ref="masterDataPopRef" type="bottom" :is-mask-click="false"
		borderRadius="10px 10px 0 0">
		<z-paging class="z-page-popup" ref="paging" style="top: 230px;" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<template #top>
				<view class="page-top">
					<uni-row class="head-row">
						<uni-col :span="6" class="head-cancel align-center justify-start">
							{{$t('operation.cancel')}}
						</uni-col>
						<uni-col :span="12" class="head-title justify-center">
							{{$t('workOrder.masterData')}}
						</uni-col>
						<uni-col :span="6" class="head-add align-center justify-end" @click="oncancel">
							<uni-icons type="closeempty" color="#333"></uni-icons>
						</uni-col>
					</uni-row>
					<uni-row class="search-row flex-row justify-between">
						<uni-col :span="24">
							<uni-easyinput v-model="searchValue" :styles="inputStyles"
								:placeholderStyle="placeholderStyle"
								:placeholder="`${$t('operation.PleaseInput')}${$t('workOrder.materialName')}`"
								@confirm="searchList">
							</uni-easyinput>
						</uni-col>
					</uni-row>
					<uni-row :gutter="5" class="table-header flex-row align-center justify-between">
						<uni-col :span="5" class="flex-row justify-center">
							{{ $t('workOrder.materialCode')}}
						</uni-col>
						<uni-col :span="9" class="flex-row justify-center">
							{{ $t('workOrder.materialName')}}
						</uni-col>
						<uni-col :span="3" class="flex-row justify-center">
							{{ $t('workOrder.unit')}}
						</uni-col>
						<uni-col :span="4" class="flex-row justify-center">
							{{ $t('workOrder.specification')}}
						</uni-col>
						<uni-col :span="3" class="flex-row justify-center">
							{{ $t('workOrder.status')}}
						</uni-col>
					</uni-row>
				</view>
			</template>
			<view class="page-table">
				<uni-row :gutter="5" class="item-row align-center"
					:class="{'choosed': chooseIds.includes(item.id)}" v-for="(item,index) in dataList"
					:key="index" @click="onChoose(item)">
					<uni-col :span="5" class="item-col flex-row justify-start">
						{{item.code}}
					</uni-col>
					<uni-col :span="9" class="item-col flex-row justify-center">
						{{item.name}}
					</uni-col>
					<uni-col :span="3" class="item-col flex-row justify-center">
						{{item.unit}}
					</uni-col>
					<uni-col :span="4" class="item-col flex-row justify-center">
						{{item.unitPrice}}
					</uni-col>
					<uni-col :span="3" class="item-col flex-row justify-center">
						{{item.status==0 ? $t('status.enable') : $t('status.disable')}}
					</uni-col>
				</uni-row>
			</view>
		</z-paging>
	</uni-popup>
</template>

<script setup>
	import dayjs from 'dayjs'
	import {
		computed,
		ref,
		reactive,
		watch,
		onMounted,
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		getDeptId,
	} from "@/utils/auth"
	import {
		getMaterialListData
	} from '@/api/material'

	// 接收父组件传递的参数
	const props = defineProps({
		deviceId: {
			type: Number,
		},
		materialItem: {
			type: Object,
			default: () => {}
		},
	})

	const searchValue = ref('')
	const placeholderStyle = ref('color:#ADADAD;font-weight:400;font-size:12px')
	const inputStyles = reactive({
		backgroundColor: '#F5F5F5',
		color: '#797979',
	})
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		getMaterialListData({
			pageNo,
			pageSize,
			name: searchValue.value
		}).then(res => {
			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			// res.data.list.forEach(item => {
			// 	item.chooseKey =
			// 		`${item.code}_${item.id}`
			// })
			paging.value.complete(res.data.list);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
	const searchList = () => {
		paging.value.reload()
	}
	const formatDate = (time) => {
		return dayjs(time).format('YYYY-MM-DD');
	}
	// ----------------------------------------------


	// ---------------------------------------------
	const chooseList = ref([])
	const chooseIds = computed(() => {
		// 返回chooseList的id组成新数组
		return chooseList.value.map(c => c.id)
	})
	const onChoose = (item) => {
		// 判断当前点击的设备是否存在于chooseList中，
		// 若存在，则从chooseList中删除，否则添加到chooseList中
		// 若不存在则添加
		const index = chooseList.value.findIndex((v) => v.id === item.id)
		if (index > -1) {
			// chooseList.value.splice(index, 1)
		} else {
			chooseList.value = [item]
			onSubmit(item)
		}
	}
	const onChooseDel = (item) => {
		// 判断当前点击的设备是否存在于chooseList中，
		// 若存在，则从chooseList中删除，否则添加到chooseList中
		const index = chooseList.value.findIndex((v) => v.id === item.id)
		if (index > -1) {
			chooseList.value.splice(index, 1)
		}
	}
	const oncancel = () => {
		chooseList.value = []
		close()
	}

	const onSubmit = (item) => {
		console.log('item', item)
		emit('master-data-submit', {
			...item,
			materialCode: item.code, // 转换物料编码字段
			materialName: item.name, // 转换物料名称字段
		})
		oncancel()
	}


	const {
		t,
		locale
	} = useI18n({
		useScope: 'global'
	})



	onMounted(() => {})

	const masterDataPopRef = ref(null)

	// 打开弹窗
	const open = () => {
		masterDataPopRef.value.open()
	}

	// 关闭弹窗
	const close = () => {
		masterDataPopRef.value.close()
	}

	const emit = defineEmits(['master-data-submit'])
	// 提供外部方法
	const expose = {
		open,
	}
	defineExpose(expose)
</script>

<style lang="scss" scoped>
	@import "@/style/choose-device.scss";

	.z-page-popup {
		padding: 20px 15px;
		box-sizing: border-box;
		background: #FFF;
		border-radius: 10px 10px 0 0;
	}

	.page-top {
		background: #fff;
		padding: 0;
	}

	.head-row {
		margin-bottom: 20px;
		font-size: 16px;
		line-height: 21px;
		color: #A3A3A3;
	}

	.head-title {
		color: #333333;
		font-weight: bold;
	}

	.head-add {
		color: #004098;
	}

	.table-header {
		background: #FFF;
		border-bottom: 1px solid #CACCCF;
	}

	.page-table {
		padding: 0;
	}

	.item-col {
		font-size: 11px;
	}
</style>