213.[vue]封装下拉

[webVueBlog]

[vue]

[webVueBlog]

<template>
	<view class="bg-white">
		<view v-for="(item,index) of accountData" :key="index">
			<view class="cu-form-group">
				<view class="title flex ">
					<text @click="showList(item)" class="textFont bg-gray radius cuIcon-right"></text>
					<text @click="selectedAccount(item.id)" class="margin-left">{{item.account}}</text>
				</view>
			</view>
			<account-page @accountDevice="accountDevice" @loadingList="loadingList" class="margin-left" v-if="item.show" ref="accountPage" :accountData="item.children"></account-page>
		</view>
	</view>
</template>

<script>
	import {
		account_allApi,
	} from '../../api/equipment.js'
	import accountPage from '../../components/account-page/account-page.vue'
	export default {
		name: 'accountPage',
		components: {
			accountPage,
		},
		props: {
			accountData: {
				style: Array,
				default: []
			}
		},
		data() {
			return {
				accounts: [],
			}
		},
		created() {
			this.accounts = Object.assign(this.accountData, {})
		},
		methods: {
			selectedAccount(id) {
				this.accountDevice(id)
			},
			accountDevice(id) {
				this.$emit('accountDevice', id)
			},
			showList(item) {
				let obj = {
					item,
					resole: (data) => {
						item.show = !item.show
						item.children = data || []
						console.log(item)
					}
				}
				if (!item.children) {
					this.loadingList(obj)
				} else {
					item.show = !item.show
				}
			},
			loadingList(obj) {
				this.$emit('loadingList', obj)
			},

		}
	}
</script>

<style scoped>
	.textFont {
		font-size: 24px;
	}
</style>

<template>
	<view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-green"></text>客户列表
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title flex">
				<text class="textFont bg-gray radius cuIcon-triangledownfill"></text>
				<text @click="getAccountDevice" class="margin-left">{{this.$store.state.user.data.account}}</text>
			</view>
		</view>
		<!-- <view class="cu-bar bg-white solid-bottom">
			<view class="action" @click="getAccountDevice">
				<text class="cuIcon-title text-green"></text>{{this.$store.state.user.data.account}}
			</view>
		</view> -->
		<account-page @accountDevice="accountDevice" @loadingList="loadingList" ref="accountPage" :accountData="accountData"></account-page>
	</view>
</template>

<script>
	import {
		parseTime,
	} from '../../utils'
	import {
		account_allApi,
		account_deviceApi,
		device_gpsApi,
	} from '../../api/equipment.js'
	import {
		getRegeo
	} from '@/utils/amap'
	import accountPage from '@/components/account-page/account-page.vue'
	export default {
		components: {
			accountPage,
		},
		data() {
			return {
				allQuery: {
					account_pid: null, // 选中的客户iD
					limit: 99999, // 每页显示数目，默认1000
					sort: 'asc', // 升序,默认asc
				},
				deviceQuery: {
					account_id: null, // 选中的客户iD
					keyword: '', // 请输入编号或ICCID
					limit: 99999, // 每页显示的数目
					page: 1, // 当前第几页
					state: null, // 0代表全部，1代表在线，2代表离线，3代表禁用
				},
				detailQuery: {
					id: null,
				},
				accountData: []
			};
		},
		async onLoad(id) {
			await this.$isLoad()
			this.allQuery.account_pid = id.id
			this.deviceQuery.account_id = id.id
			this.detailQuery.id = id.id
			this.getaccountAll()
		},
		methods: {
			getAccountDevice() {
				uni.navigateTo({
					url: 'deviceDetail?id=' + this.detailQuery.id
				})
			},
			accountDevice(id) {
				this.deviceQuery.account_id = id
				uni.navigateTo({
					url: 'deviceDetail?id=' + this.deviceQuery.account_id
				})
			},
			loadingList(obj) {
				this.allQuery.account_pid = obj.item.id
				account_allApi(this.allQuery).then(res => {
					console.log(res.data.data.data)
					let list = res.data.data.data
					let array = []
					list.map(item => {
						array.push(
							Object.assign({}, item, {
								show: false
							})
						)
					});
					obj.resole(array)
				}).catch(error => {
					console.log(error)
				})
			},
			getaccountAll() {
				account_allApi(this.allQuery).then(res => {
					let array = []
					let list = res.data.data.data
					list.map(item => {
						array.push(
							Object.assign({}, item, {
								show: false
							})
						)
					});
					this.accountData = array
				}).catch(error => {
					console.log(error)
				})
			},
		}
	}
</script>

<style scoped>
	.textFont {
		font-size: 25px;
	}
</style>