pms-app/components/device/modelChoose.vue

<template>
	<uni-popup class="materials-popup" ref="materialChoosePopRef" type="bottom" :is-mask-click="false"
		borderRadius="10px 10px 0 0">
		<z-paging class="z-page-popup" ref="paging" :default-page-size="20" style="top: 200px;" 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" @click="oncancel">
							{{$t('operation.cancel')}}
						</uni-col>
						<uni-col :span="12" class="head-title justify-center">
							{{ $t('ledger.form.model') }}
						</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('ledger.brand.labelHint')}`"
								@confirm="searchList">
							</uni-easyinput>
						</uni-col>
					</uni-row>
					<uni-row :gutter="5" class="table-header flex-row align-center justify-between">
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('ledger.model.name') }}
						</uni-col>
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('ledger.model.standard')}}
						</uni-col>
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('ledger.brand.status')}}
						</uni-col>
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('ledger.supplier.time')}}
						</uni-col>
					</uni-row>
				</view>
			</template>
			<view class="page-table">
				<uni-row
          :gutter="5"
          class="item-row align-center"
					:class="{'choosed': selectedItemId === item.id}"
          v-for="(item,index) in dataList"
					:key="index"
          @click="onChoose(item)"
        >
					<uni-col :span="6" class="item-col flex-row justify-center">
						{{ item.name }}
					</uni-col>
					<uni-col :span="6" class="item-col flex-row justify-center">
						{{ item.standard }}
					</uni-col>
					<uni-col :span="6" class="item-col flex-row justify-center">
						{{ getStatusName(item.status) }}
					</uni-col>
					<uni-col :span="4" class="item-col flex-row justify-center">
						{{ item.createTime ? formatDate(item.createTime) : '' }}
					</uni-col>
				</uni-row>
			</view>
		</z-paging>
	</uni-popup>
</template>

<script setup>
	import dayjs from 'dayjs'
	import {
		computed,
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import { useI18n } from 'vue-i18n'
  import { getDataDictList, getSupplierList } from "@/api";
  import { useDataDictStore } from "@/store/modules/dataDict";
  import { getDeviceModelList } from "@/api/device";
	// 接收父组件传递的参数
	const props = defineProps({
    selectedItemId: {
      type: Number,
      default: 0
    },
    brandId: {
      type: Number,
    }
	})

  const getStatusName = (status) => {
    if (status === 0) {
      return t('ledger.brand.status0')
    } else {
      return t('ledger.brand.status1')
    }
  }

	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([])
  const filterList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
    getDeviceModelList({
			pageNo,
			pageSize,
      brand: props.brandId,
      name: searchValue.value,
		}).then(res => {
			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			res.data.list.forEach(item => {
				item.chooseKey = 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.chooseKey)
	})
	const onChoose = (item) => {
		emit('confirm', item)
    close()
	}
	const oncancel = () => {
		chooseList.value = []
		close()
	}

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

	onMounted (() => {})

	const materialChoosePopRef = ref(null)

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

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

  const emit = defineEmits(['confirm'])
	// 提供外部方法
	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>