Files
zgty-mas-m/pages/index/me-popup.vue
2025-11-26 18:11:13 +08:00

128 lines
3.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<u-popup :show="show" mode="right" @close="close" @open="open" closeable>
<view class="p20 cell-content">
<scroll-view scroll-y="true">
<view class="x-f pb20 pt20">
<u-avatar src=""></u-avatar>
<view>
<view class="pl20">您好{{ userInfo.nickname }}</view>
<view class="pl20">{{ deptName }}</view>
</view>
</view>
<u-cell-group>
<u-cell icon="grid-fill" title="公司部门选择" :is-link="true" @click="handleSelectCompany" />
<u-cell icon="grid-fill" title="模块选择" :is-link="true" @click="handleTo('/pages/index/index')" />
<u-cell icon="order" title="打印设置" :isLink="true" @click="handleTo('/pages/setting/print')"></u-cell>
<u-cell icon="info-circle-fill" title="关于我们" :is-link="true" @click="handleTo('/pages/me/aboutMe')" />
</u-cell-group>
<u-button class="mt40" type="warning" plain text="退出当前账号" @click="handleLoginOut('general')" />
</scroll-view>
</view>
<u-modal
width="250px"
:show="modalShow"
title="提示"
content="确定退出登录吗?"
show-cancel-button
async-close
@confirm="confirm"
@cancel="modalShow = false"
/>
</u-popup>
<company-dept-dialog />
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import nx from '@/nx'
import { VISIT_COMPANY_STORAGE_KEY, VISIT_DEPT_STORAGE_KEY } from '@/nx/config'
// Props & Emits
const props = defineProps({
show: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:show', 'open', 'close'])
// 响应式数据
const modalShow = ref(false)
const dialogStore = nx.$store('company-dept')
const { companyList, selectedCompanyId, selectedDeptId } = storeToRefs(dialogStore)
// 计算属性
const userInfo = computed(() => nx.$store('user').userInfo)
const deptName = computed(() => {
const selectedCompany = companyList.value.find(company => company.companyId === selectedCompanyId.value)
const selectedDept = selectedCompany?.depts.find(dept => dept.deptId === selectedDeptId.value)
return selectedDept?.deptName || ''
})
// 方法
const handleTo = url => {
nx.$router.go(url)
}
const handleSelectCompany = () => {
dialogStore.open({
companyList: companyList.value,
defaultCompanyId: selectedCompanyId.value,
defaultDeptId: selectedDeptId.value,
onConfirm: ({ companyId, deptId }) => {
const selectedCompany = companyList.value.find(company => company.companyId === selectedCompanyId.value)
const selectedDept = selectedCompany?.depts.find(dept => dept.deptId === selectedDeptId.value)
uni.setStorageSync(VISIT_COMPANY_STORAGE_KEY, {
id: companyId,
name: selectedCompany?.companyName || ''
})
uni.setStorageSync(VISIT_DEPT_STORAGE_KEY, {
id: deptId,
name: selectedDept?.deptName || ''
})
}
})
}
const handleLoginOut = () => {
modalShow.value = true
}
const confirm = async () => {
try {
await nx.$store('user').logout()
} catch (error) {
console.error('退出登录失败:', error)
} finally {
modalShow.value = false
}
}
const open = () => {
emit('open')
}
const close = () => {
emit('close')
emit('update:show', false)
}
onMounted(async () => {
await nx.$api.assayTask.getAssayTaskPage()
})
</script>
<style lang="scss" scoped>
.cell-content {
width: 50vw;
}
@media (max-width: 700px) {
.cell-content {
width: 70vw;
}
}
</style>