ezhizao_dms_app/pages/dashboard/index.vue

<template>
	<view class="page-container uni-column">
		<view class="logo-container uni-row">
			<image class="logo" src="../../static/images/logo.png" />
		</view>
		<view class="title"><text class="label">德迈仕数字生产线管理平台</text></view>
		<view class="user-info-container uni-row">
			<view class="icon"><text class="label">{{ userInfo.nickName.charAt(0) }}</text></view>
			<view class="user-info uni-column">
				<view class="nickname uni-row"><text class="label">用户名: {{ userInfo.userName }}</text></view>
				<view class="nickname uni-row"><text class="label">ID:{{ userInfo.userId }}</text></view>
				<!-- <view class="process uni-row"><text class="label">当前工段：</text><text class="label">{{ deptName }}</text> -->
				<!-- </view> -->
			</view>
		</view>
		<view class="user-info uni-column" style="margin: 0 20rpx 20rpx 20rpx;width: 94%;">
			<uni-section title="当前厂别" type="square">
				<uni-data-select v-model="curSelectedTenant" :localdata="tenantList" :clear="false"
					@change="handleTenantChange"></uni-data-select>
			</uni-section>
			<uni-section title="当前工段" type="square">
				<uni-data-select v-model="curSelectedDept" :localdata="userDeptsByTenantId" :clear="false"
					@change="handleDeptChange"></uni-data-select>
			</uni-section>
		</view>
		<!-- <view class="business-btn uni-row" v-if="showOther" @click="handleRecerptSfprod"><text class="label">半成品接收</text></view> -->
		<view class="business-btn uni-row" v-if="showOther" @click="handeleToReportHistory"><text class="label">报工历史</text></view>
		<view class="business-btn uni-row" v-if="showOther" @click="handleToProductionPlan"><text class="label">报工</text></view>
		<!-- v-hasRoles="['porter']" 可通过v-Roles自定义指令进行显隐 -->
		<view class="business-btn uni-row" v-if="showTurn" @click="handleToHandlingList"><text class="label">周转</text></view>
		<view class="bottom-btn-container">
			<view class="start-batch-btn uni-row" @click="handleToEquiPmentList"><text class="label">绑定设备</text></view>
			<view class="start-batch-btn uni-row" @click="handleSwitchOrQuit"><text class="label">切换 / 退出账号</text>
			</view>
		</view>
	</view>
	<dialog-confirm ref="confirm" @submit="logout"></dialog-confirm>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getSubPlanDetailsList
	} from '../../api/business/subPlanDetails'
	import {
		getTenantList,
	} from '@/api/login/index.js'
	import {
		getUserDeptList
	} from '@/api/dept/dept.js'
	import {
		store
	} from '@/store/index.js'


	const userName = ref('') // 用户名
	const curSelectedDept = ref(null) // 用户当前选择的工段
	const curSelectedTenant = ref(null) // 用户当前选择的厂别
	const userInfo = ref({}) // 用户信息
	const tenantList = ref([]) // 厂别列表
	const userDeptList = ref([]) // 用户所在所有工段列表	
	const userDeptsByTenantId = ref([])
	const confirm = ref(null) // 确认组件
	const showTurn = ref(false)
	const showOther = ref(false)

	onLoad(() => {
		userInfo.value = store.userInfo || {
			nickName: ""
		};getUserDepts
		store.tenantId = userInfo.value.tenantId;
		if(store.userInfo.roles.some(item => item.roleId == 124) && store.userInfo.roles.length > 1){
			showTurn.value = true;
			showOther.value = true;
		}else if(store.userInfo.roles.some(item => item.roleId == 124) && store.userInfo.roles.length == 1){
			showTurn.value = true;
			showOther.value = false;
		}else{
			showTurn.value = false;
			showOther.value = true;
		}
		init();
	})

	function init() {
		getTenant();
		getUserDepts(store.userInfo.userId,store.tenantId);
		getDeptsByTenantId(store.tenantId);
	}

	function handleRecerptSfprod() { 
		if(curSelectedDept.value){
			uni.navigateTo({
				url: '/pages/recerptSfprod/index'
			})
		}else{
			uni.showToast({
				icon: "none",
				title: "请选择工段"
			})
		}
	}
	
	function handeleToReportHistory(){
		uni.navigateTo({
			url: '/pages/reportHistory/index'
		})
	}

	function handleToProductionPlan() {
		if(curSelectedDept.value){
			uni.navigateTo({
				url: '/pages/productionPlan/index'
			})
		}else{
			uni.showToast({
				icon: "none",
				title: "请选择工段"
			})
		}
	}

	function handleToHandlingList() {
		console.log(store)
		uni.navigateTo({
			url: '/pages/handlingList/index'
		})
	}

	function logout() {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}

	function handleSwitchOrQuit() {
		let msg = "确认退出登录吗?"
		confirm.value.open(msg);
	}

	function handleToEquiPmentList() {
		uni.navigateTo({
			url: "/pages/equipmentList/index"
		})
	}

	function getUserDepts(userId,tenantId) {
		getUserDeptList(userId).then((res) => {
			if (res.code == 200) {
				userDeptList.value = res.data;
				for (let i = 0; i < res.data.length; i++) {
					if(res.data[i].tenantId == tenantId){
						userDeptsByTenantId.value[i] = {
							text: res.data[i].deptName,
							value: res.data[i]
						}
					}
				}
				console.log()

				// 选择工段来个默认值
				// if(res.data.length > 0){
				// 	curSelectedDept.value = res.data[0];
				// }
				// store.curDeptDetails = curSelectedDept.value;
			}
		})
	}

	function getDeptsByTenantId(tenantId){
		userDeptsByTenantId.value = [];
		let newArr = userDeptList.value.filter((item,index,arrs) => item.tenantId == tenantId);
		// curSelectedDept.value = newArr.length > 0 ? newArr[0].deptId : null; 
		for (var i = 0; i < newArr.length; i++) {
			userDeptsByTenantId.value[i] = {
				text: newArr[i].deptName,
				value: newArr[i]
			}
		}
		// if(userDeptsByTenantId.value.length == 0){
		// 	store.curDeptDetails = 0;
		// }else{
		// 	store.curDeptDetails = userDeptsByTenantId.value[0].value;
		// }
		console.log(userDeptsByTenantId.value);
	} 

	function getTenant() {
		getTenantList().then((res) => {
			if (res.code == 200) {
				for (var i = 0; i < res.rows.length; i++) {
					tenantList.value[i] = {
						text: res.rows[i].orgName,
						value: res.rows[i].id
					}
				}
				curSelectedTenant.value = store.userInfo.tenantId;
				console.log(curSelectedTenant.value)
			}
		})
	}

	function handleTenantChange() {
		store.tenantId = curSelectedTenant.value;
		curSelectedDept.value = null; 
		getDeptsByTenantId(store.tenantId);
	}

	function handleDeptChange() {
		store.curDeptDetails = curSelectedDept.value;
	}
</script>

<style lang="scss">
	.page-container {
		height: calc(100% - 208rpx);
		overflow: auto;
	}

	.logo-container {
		justify-content: center;

		.logo {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.title {
		align-items: center;

		.label {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.user-info-container {
		margin: 16rpx 0 20rpx 20rpx;
		align-items: center;

		.icon {
			width: 120rpx;
			height: 120rpx;
			justify-content: center;
			align-items: center;
			border-radius: 60rpx;
			border: 1px solid #e1e1e1;

			.label {
				font-size: 64rpx;
			}
		}

		.user-info {
			box-sizing: border-box;
			padding-top: 8rpx;
			margin-left: 24rpx;
			justify-content: center;

			// font-size: 20rpx;
			.nickname {
				margin-bottom: 16rpx;

				.label {
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.process {
				.label {
					font-size: 32rpx;
				}
			}
		}

		.data-select {
			flex: 3;
			width: 100%;
			height: 50rpx;
			border-radius: 18rpx;
			background-color: #FFF;

			.data-select-options {
				width: 200rpx;
			}
		}
	}

	.business-btn {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		height: 200rpx;
		width: 94%;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #e1e1e1;
		border-radius: 8rpx;

		.label {
			font-size: 40rpx;
		}
	}

	.bottom-btn-container {
		position: fixed;
		right: 20rpx;
		bottom: 0;
		left: 20rpx;

		.start-batch-btn {
			// background-color: grey;
			background-color: #1684fc;
			margin-bottom: 24rpx;
			border-radius: 8rpx;
			justify-content: center;
			align-items: center;
			height: 80rpx;

			.label {
				font-size: 32rpx;
				color: #ffffff;
			}
		}
	}
</style>