341 lines
7.6 KiB
Vue
341 lines
7.6 KiB
Vue
<template>
|
||
<view class="dept-page">
|
||
<view class="dept-container bg-white">
|
||
<scroll-view class="sidebar" scroll-y>
|
||
<view
|
||
v-for="item in level1List"
|
||
:key="item._id"
|
||
:class="[
|
||
'sidebar-item',
|
||
item._id === selectedParentId ? 'active' : '',
|
||
]"
|
||
@click="selectParent(item)"
|
||
>
|
||
<text class="sidebar-text">{{ item.hlwDeptName }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<scroll-view class="content" scroll-y>
|
||
<view v-if="contentList.length" class="content-list">
|
||
<view
|
||
v-for="child in contentList"
|
||
:key="child._id"
|
||
:class="['dept-item', isSelected(child) ? 'selected' : '']"
|
||
>
|
||
<view class="dept-name-row" @click="selectDept(child)">
|
||
<view class="dept-name">{{ child.deptName }}</view>
|
||
<text v-if="isSelected(child)" class="check-tag">已选</text>
|
||
</view>
|
||
<view
|
||
v-if="child.children && child.children.length"
|
||
class="dept-sub-list"
|
||
>
|
||
<view
|
||
v-for="sub in child.children"
|
||
:key="sub._id"
|
||
:class="['dept-sub-item', isSelected(sub) ? 'selected' : '']"
|
||
@click.stop="selectDept(sub)"
|
||
>
|
||
<text class="dept-sub-text">{{ sub.deptName }}</text>
|
||
<text v-if="isSelected(sub)" class="check-dot" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="empty-wrapper">
|
||
<empty-data text="暂无科室" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="footer-tip">
|
||
如没有符合的内容，请联系客服
|
||
<text class="link" @click="contactService">点击添加客服</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { computed, ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import useGuard from "@/hooks/useGuard.js";
|
||
import EmptyData from "@/components/empty-data.vue";
|
||
import api from "@/utils/api";
|
||
import { toast } from "@/utils/widget";
|
||
|
||
const { useLoad } = useGuard();
|
||
|
||
const deptList = ref([]);
|
||
const selectedParentId = ref("");
|
||
const selectedDeptId = ref("");
|
||
|
||
const sorter = (a, b) => {
|
||
const sortA = typeof a.sort === "number" ? a.sort : 0;
|
||
const sortB = typeof b.sort === "number" ? b.sort : 0;
|
||
if (sortA !== sortB) return sortA - sortB;
|
||
const timeA = a.createTime || 0;
|
||
const timeB = b.createTime || 0;
|
||
return timeA - timeB;
|
||
};
|
||
|
||
const level1List = computed(() =>
|
||
deptList.value.filter((i) => i.level === 1).sort(sorter)
|
||
);
|
||
|
||
const contentList = computed(() => {
|
||
const children = deptList.value
|
||
.filter(
|
||
(i) =>
|
||
i.level === 2 && i.parentId && i.parentId === selectedParentId.value
|
||
)
|
||
.sort(sorter);
|
||
if (children.length === 0) {
|
||
// 如果没有二级科室，允许一级科室直接选择
|
||
const currentParent = deptList.value.find(
|
||
(i) => i._id === selectedParentId.value
|
||
);
|
||
return currentParent ? [{ ...currentParent, children: [] }] : [];
|
||
}
|
||
const level3List = deptList.value.filter((i) => i.level === 3);
|
||
return children.map((item) => ({
|
||
...item,
|
||
children: level3List.filter((c) => c.parentId === item._id).sort(sorter),
|
||
}));
|
||
});
|
||
|
||
function isSelected(item) {
|
||
const targetId = selectedDeptId.value;
|
||
return !!targetId && (item.deptId === targetId || item._id === targetId);
|
||
}
|
||
|
||
async function fetchDeptList() {
|
||
uni.showLoading({ title: "加载中..." });
|
||
try {
|
||
const res = await api("getDeptList");
|
||
if (res && res.success && Array.isArray(res.data.list)) {
|
||
deptList.value = res.data.list;
|
||
hydrateSelectedParent();
|
||
} else {
|
||
toast(res?.message || "获取科室失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("获取科室失败", error);
|
||
toast("获取科室失败");
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
}
|
||
|
||
function hydrateSelectedParent() {
|
||
// 优先根据已选科室找到对应父级
|
||
if (selectedDeptId.value) {
|
||
const match =
|
||
deptList.value.find(
|
||
(i) =>
|
||
i._id === selectedDeptId.value || i.deptId === selectedDeptId.value
|
||
) || null;
|
||
if (match?.parentId) {
|
||
selectedParentId.value = match.parentId;
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 再次兜底使用入参的 parentId
|
||
if (selectedParentId.value) return;
|
||
|
||
// 最后兜底选第一个一级科室
|
||
const first = level1List.value[0];
|
||
if (first) {
|
||
selectedParentId.value = first._id;
|
||
}
|
||
}
|
||
|
||
function selectParent(item) {
|
||
selectedParentId.value = item._id;
|
||
}
|
||
|
||
function emitSelection(item) {
|
||
const eventChannel =
|
||
typeof getOpenerEventChannel === "function"
|
||
? getOpenerEventChannel()
|
||
: null;
|
||
eventChannel?.emit("deptSelected", {
|
||
id: item._id,
|
||
deptId: item.deptId || item._id,
|
||
name: item.deptName,
|
||
});
|
||
}
|
||
|
||
function selectDept(item) {
|
||
selectedDeptId.value = item.deptId || item._id;
|
||
emitSelection(item);
|
||
uni.navigateBack();
|
||
}
|
||
|
||
function contactService() {
|
||
uni.showToast({
|
||
title: "请联系客服添加科室",
|
||
icon: "none",
|
||
});
|
||
}
|
||
|
||
useLoad(() => {
|
||
fetchDeptList();
|
||
});
|
||
|
||
onLoad((opts) => {
|
||
// 支持从外部传入默认选中的一级科室
|
||
if (opts.parentId) {
|
||
selectedParentId.value = opts.parentId;
|
||
}
|
||
const passedDeptId = opts.deptId || opts.departmentId || opts.id;
|
||
if (passedDeptId) {
|
||
selectedDeptId.value = passedDeptId;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dept-page {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.dept-container {
|
||
display: flex;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #fdfdfd 0%, #f6f8fb 100%);
|
||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
|
||
height: 88vh;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 210rpx;
|
||
background: #f8f9fb;
|
||
border-right: 1px solid #eef0f5;
|
||
}
|
||
|
||
.sidebar-item {
|
||
padding: 30rpx 18rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
border-bottom: 1px solid #eef0f5;
|
||
transition: all 0.2s ease;
|
||
|
||
&.active {
|
||
background: #fff;
|
||
color: #2a6ff2;
|
||
font-weight: 600;
|
||
box-shadow: inset 4rpx 0 0 #2a6ff2;
|
||
}
|
||
}
|
||
|
||
.sidebar-text {
|
||
display: inline-block;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-top-right-radius: 12rpx;
|
||
border-bottom-right-radius: 12rpx;
|
||
}
|
||
|
||
.content-list {
|
||
padding: 12rpx 20rpx 30rpx;
|
||
}
|
||
|
||
.dept-item {
|
||
padding: 26rpx 22rpx 14rpx;
|
||
border-bottom: 1px solid #f2f4f7;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 14rpx;
|
||
background: #fff;
|
||
transition: box-shadow 0.2s ease, transform 0.15s ease;
|
||
|
||
&.selected {
|
||
box-shadow: 0 8rpx 24rpx rgba(42, 111, 242, 0.08);
|
||
border: 1px solid #e1e9ff;
|
||
transform: translateY(-2rpx);
|
||
}
|
||
}
|
||
|
||
.dept-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.dept-name {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dept-sub-list {
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.dept-sub-item {
|
||
padding: 12rpx 16rpx;
|
||
background: #f6f8fb;
|
||
border-radius: 10rpx;
|
||
font-size: 26rpx;
|
||
color: #3a3a3a;
|
||
border: 1px solid #e5e9f2;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
transition: all 0.15s ease;
|
||
|
||
&.selected {
|
||
border-color: #2a6ff2;
|
||
background: #eaf1ff;
|
||
color: #1f5ed6;
|
||
}
|
||
}
|
||
|
||
.dept-sub-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.check-tag {
|
||
padding: 6rpx 14rpx;
|
||
font-size: 22rpx;
|
||
color: #2a6ff2;
|
||
background: #eaf1ff;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.check-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: #2a6ff2;
|
||
}
|
||
|
||
.empty-wrapper {
|
||
padding-top: 120rpx;
|
||
}
|
||
|
||
.footer-tip {
|
||
padding: 24rpx 20rpx 40rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.link {
|
||
color: #2a6ff2;
|
||
}
|
||
</style>
|
||
|