sooka_consult_uniapp/pages/topic/topic.vue

<template>
	<view>
		<view style="height: 20%;">
			<button v-for="(item,index) in userType" @click="onclick(item)">{{item.dictLabel}}
			</button>
		</view>
		<view>
			<uni-grid :column="2" :square="false" :highlight="false" >
				<uni-grid-item v-for="(item, index) in dataList" :index="index" :key="index" >
					<view class="grid-item-box" @click="onMatters(item)">
						<text class="text" >{{ item.deptName }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

	</view>
</template>

<script>
	import {
		getDicts
	} from "@/api/system/dict/data.js"
	import {
		listAll
	} from "@/api/handleAffairs/topicType.js"
	export default {

		data() {
			return {
				userType: [], // 初始化用户类型为空
				dataList: [],

			}
		},
		created() {
			this.getdictData()//初始化字典按钮
			this.getdataList()//初始化数据
		},
		methods: {
			onMatters(data){
				uni.setStorageSync('data', {type:data.deptName})
				uni.navigateTo({
					url: '/pages/matterAll/matterAll',
				});
			},
			getdataList(data){
				let _that = this
				if (!data) {
					data = {
						objectOfHandling: 0,
						yesOrNoShow: "0"
					}
				}
				listAll(data).then(res => {
					_that.dataList = res.data
				})
				console.log(_that.dataList)
			},
			onclick(row) {
				
				let data = {
					objectOfHandling: row.dictValue,
					yesOrNoShow: "0"
				}
				this.getdataList(data)
			},
			getdictData() {
				let _that = this
				getDicts("object_application").then(res => {
					_that.userType = res.data
				})
			},
			changeUserType(type) {
				this.userType = type
			}
		},

	}
</script>

<style>
	/* view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	} */

	button {
		margin-bottom: 10px;
	}

	.selected {
		background-color: #007bff;
		color: #fff;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>