personnel_management_mobile/pages/home/dept.vue

121 lines
2.3 KiB
Vue

<template>
<Container backBtn logoutBtn @handleBack="handleBack">
<template #main>
<view class="theme-page">
<view class="card">
<view class="title">部门取号</view>
<view class="btn-group">
<view class="btn-item" v-for="(item, index) in deptList" :key="index" @click="handleSelect(item)">
{{ item.deptName }}
</view>
</view>
</view>
</view>
</template>
</Container>
</template>
<script>
import Container from '@/components/container/container.vue'
import { getList } from '@/api/system/dept.js'
export default {
components: {
Container
},
data() {
return {
deptList: []
}
},
computed: {
idcard() {
return uni.getStorageSync('idcard') || ''
}
},
mounted() {
this.fetchDeptList()
},
methods: {
handleBack() {
uni.navigateBack()
},
handleSelect(item) {
uni.navigateTo({
url: `/pages/home/businessList?source=dept&deptId=${item.id}&deptName=${item.deptName}`
})
},
async fetchDeptList() {
try {
const res = await getList({ parentId: '1123598813738675202' })
if (res.success && res.data) {
this.deptList = res.data.records || res.data || []
}
} catch (e) {
console.error('获取部门列表失败', e)
}
}
}
}
</script>
<style scoped>
.theme-page {
width: 100%;
height: 100%;
padding: 15vh 5vw 10vh;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.card {
width: 100%;
height: 100%;
background: #fff;
border-radius: 5vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
padding: 4vh 3vw;
}
.title {
font-size: 2.5vw;
font-weight: bold;
color: rgba(51, 51, 51, 1);
margin-bottom: 5vh;
}
.btn-group {
width: 100%;
flex: 1;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.btn-item {
margin: 0 2vw 2vw 0;
padding: 1.5vh 1.5vw;
width: 19vw;
height: 11vh;
text-align: center;
background: rgba(236, 243, 255, 1);
border-radius: 2vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7vw;
color: rgba(51, 51, 51, 1);
cursor: pointer;
}
.btn-item:nth-child(4n) {
margin-right: 0;
}
</style>