ykt-wxapp/pages/work/department-select.vue

<template>
  <view class="dept-page">
    <view class="dept-container bg-white">
      <view class="sidebar">
        <view class="sidebar-search">
          <input
            v-model="keyword"
            class="search-input"
            type="text"
            confirm-type="search"
            placeholder="搜索一级科室"
            placeholder-class="search-placeholder"
          />
          <view v-if="keyword" class="clear-btn" @click="keyword = ''"
            >清空</view
          >
        </view>
        <scroll-view class="sidebar-list" scroll-y>
          <view
            v-for="item in filteredLevel1List"
            :key="item.deptId"
            :class="[
              'sidebar-item',
              item.deptId === selectedParentId ? 'active' : '',
            ]"
            @click="selectParent(item)"
          >
            <text class="sidebar-text">{{
              item.hlwDeptName || item.deptName
            }}</text>
          </view>
        </scroll-view>
      </view>

      <scroll-view class="content" scroll-y>
        <view v-if="contentList.length" class="content-list">
          <view
            v-for="child in contentList"
            :key="child.deptId"
            :class="['dept-item', isSelected(child) ? 'selected' : '']"
            @click="selectDept(child)"
          >
            <view class="dept-name-row">
              <view class="dept-name">{{ child.deptName }}</view>
              <text v-if="isSelected(child)" class="check-tag">已选</text>
            </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, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import useGuard from "@/hooks/useGuard.js";
import useAccountStore from "@/store/account.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 keyword = 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 filteredLevel1List = computed(() => {
  const key = keyword.value.trim().toLowerCase();
  if (!key) return level1List.value;
  return level1List.value.filter((i) =>
    i.deptName.toString().toLowerCase().includes(key)
  );
});

const contentList = computed(() => {
  const children = deptList.value
    .filter(
      (i) =>
        i.level === 2 && i.parentId && i.parentId === selectedParentId.value
    )
    .sort(sorter);
  return children;
});

function isSelected(item) {
  const targetId = selectedDeptId.value;
  return !!targetId && (item.deptId === targetId || item.deptId === targetId);
}

async function fetchDeptList() {
  uni.showLoading({ title: "加载中..." });
  try {
    const res = await api("getDeptList");
    if (res && res.success && Array.isArray(res.data)) {
      deptList.value = res.data;
      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.deptId === 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.deptId;
  }
}

watch(
  filteredLevel1List,
  (list) => {
    if (!list.length) return;
    const exists = list.some((i) => i.deptId === selectedParentId.value);
    if (!exists) {
      selectedParentId.value = list[0].deptId;
    }
  },
  { immediate: false }
);

function selectParent(item) {
  selectedParentId.value = item.deptId;
  console.log("selectedParentId", selectedParentId.value);
}

function emitSelection(item) {
  const eventChannel =
    typeof getOpenerEventChannel === "function"
      ? getOpenerEventChannel()
      : null;
  eventChannel?.emit("deptSelected", {
    id: item.deptId,
    deptId: item.deptId || item.deptId,
    name: item.deptName,
    level: item.level,
    parentId: item.parentId,
  });
}

function selectDept(item) {
  selectedDeptId.value = item.deptId || item.deptId;
  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: 230rpx;
  background: #f8f9fb;
  border-right: 1px solid #eef0f5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-search {
  padding: 16rpx 14rpx 12rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.search-input {
  flex: 1;
  height: 64rpx;
  padding: 0 20rpx;
  border-radius: 32rpx;
  background: #fff;
  border: 1px solid #e5e8ef;
  font-size: 26rpx;
}

.search-placeholder {
  color: #a0a8b8;
}

.clear-btn {
  font-size: 24rpx;
  color: #2a6ff2;
  padding: 6rpx 10rpx;
}

.sidebar-list {
  flex: 1;
}

.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;
}

.sidebar-empty {
  padding: 40rpx 16rpx;
  font-size: 24rpx;
  color: #8c94a6;
  text-align: center;
}

.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>