byte-sailing-mobile/src/views/production/factory/index.vue

<template>
	<van-nav-bar
		title="产线配置"
		left-text=""
		left-arrow
		@click-left="onClickLeft"
		@click-right="onClickRight"
	>
		<template #right> 添加 </template>
	</van-nav-bar>
	<van-search
		v-model="req.keyword"
		placeholder="请输入搜索关键词"
		@search="onRefresh"
	/>
	<van-pull-refresh v-model="loading" @refresh="onRefresh">
		<div class="list">
			<van-list
				v-model:loading="loading"
				:finished="finished"
				finished-text="没有更多了"
				@load="onLoad"
				style="margin-bottom: 60px"
			>
				<commonList
					:data="listData"
					@onClick="toDtl"
					:config="listConfig"
				></commonList>
			</van-list>
		</div>
	</van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
import commonList from '@/components/common-list.vue'
import { useRoute } from 'vue-router'

const loading = ref(false)
const router = useRoute()
const req = ref({
	pageNum: 1,
	keyword: null,
	definition: '1',
})
const finished = ref(false)
const proxy = getCurrentInstance().proxy
const listData = ref([])
const listConfig = ref([
	{
		label: '产线名称',
		prop: 'name',
	},
	{
		label: '负责人名称',
		prop: 'personLiableName',
	},
	{
		label: '产线类型',
		prop: 'typeName',
	},
])
//车间类型
const typeList = ref([
	{
		label: '普通产线',
		value: '1',
	},
	{
		label: '半自动化产线',
		value: '2',
	},
	{
		label: '自动化产线',
		value: '3',
	},
])
const onRefresh = () => {
	req.value.pageNum = 1
	finished.value = false
	getList('refresh')
}
const onLoad = () => {
	
}
const onClickLeft = () => proxy.$router.push('/main/working')
const onClickRight = () => {
	proxy.$router.push({
		path: 'factoryAdd',
		query: {
			type: 'add',
		},
	})
}
const toDtl = (row) => {
	proxy.$router.push({
		path: 'factoryAdd',
		query: {
			id: row.id,
			type: 'edit',
		},
	})
}
const treeToList = (arr) => {
	let res = [] // 用于存储递归结果（扁平数据）
	// 递归函数
	let fn = (source) => {
		source.forEach((el) => {
			res.push(el)
			el.children && el.children.length > 0 ? fn(el.children) : '' // 子级递归
		})
	}
	fn(arr)
	return res
}
const getList = (type) => {
	loading.value = true
	proxy
		.post('/assemblyLine/page', req.value)
		.then((res) => {
			listData.value =
				type === 'refresh'
					? res.data.rows
					: listData.value.concat(res.data.rows)
			if (req.value.pageNum * 10 >= res.data.total) {
				finished.value = true
			}
			req.value.pageNum++
			loading.value = false
			listData.value = res.data.rows.map((item) => {
				return {
					...item,
					typeName: typeList.value.find((v) => v.value == item.type)
						.label,
				}
			})
			console.log(listData.value)
		})
		.catch((err) => {
			loading.value = false
		})
}
getList()
</script>

<style lang="scss" scoped>
.list {
	min-height: 70vh;
}
</style>