uniapp-app/pages_app/groupManage/groupManage.vue

<template>
  <view class="group-manage-page">
    <uni-nav-bar
      left-icon="left"
      title="分组管理"
      @clickLeft="goBack"
      fixed
      color="#8B2316"
      height="180rpx"
      :border="false"
      backgroundColor="#eee"
    >
      <template #right>
        <view class="save-text" @click="saveGroups">保存</view>
      </template>
    </uni-nav-bar>

    <!-- 已选中的分组 -->
    <view class="selected-section">
      <view class="tag-list">
        <view
          class="tag-item selected"
          v-for="(group, index) in selectedGroups"
          :key="group.uuid"
        >
          <text class="tag-text">{{ group.name }}</text>
        </view>
      </view>
    </view>

    <!-- 所有分组 -->
    <view class="all-groups-section">
      <view class="section-title">所有分组(选择分组)</view>
      <view class="tag-list">
        <view
          class="tag-item"
          :class="{ selected: isGroupSelected(group) }"
          v-for="group in allGroups"
          :key="group.uuid"
          @click="selectGroup(group)"
        >
          <text class="tag-text">{{ group.name }}</text>
        </view>
      </view>
    </view>

    <!-- 底部添加按钮 -->
    <view class="bottom-bar">
      <button class="add-btn" @click="show=true">添加分组</button>
    </view>
  </view>
  <up-modal :show="show" :title="'添加分组'" showCancelButton confirmColor="#8B2316" @confirm="addGroup" @cancel="show=false">
    <view class="slot-content">
        <input class="input" v-model="groupName" placeholder="请输入分组名称" />
    </view>
  </up-modal>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import api from "@/api/api.js";

 const selectedGroups = ref([]);
 const allGroups = ref([]);
 const groupName = ref('');
 const show = ref(false);
 const patientUuid = ref('');
onLoad((options) => {
  patientUuid.value = options.uuid 
});

onShow(() => {
  loadAllGroups();
});

const goBack = () => uni.navigateBack();

const loadAllGroups = async () => {
  try {
    const res = await api.groupList();
    if (res.code === 200) {
      allGroups.value = res.data || [];
    }
  } catch (e) {
    console.error("加载分组列表失败:", e);
  }
};

const selectGroup = (group) => {
  // 检查是否已经选中
  const isSelected = selectedGroups.value.some((g) => g.uuid === group.uuid);
  if (isSelected) {
    // 如果已选中，则取消选中
    const index = selectedGroups.value.findIndex((g) => g.uuid === group.uuid);
    selectedGroups.value.splice(index, 1);
    return;
  }
  // 限制最多选择三个
  if (selectedGroups.value.length >= 3) {
    uni.showToast({ title: '最多选择三个分组', icon: 'none' });
    return;
  }
  // 如果未选中，则选中
  selectedGroups.value.push(group);
};

const removeSelectedGroup = (index) => {
  selectedGroups.value.splice(index, 1);
};

const isGroupSelected = (group) => {
  return selectedGroups.value.some((g) => g.uuid === group.uuid);
};

const addGroup = () => {
    if(!groupName.value){
        uni.showToast({ title: '请输入分组名称', icon: 'none' })
        return;
    }
    let userInfo=uni.getStorageSync('userInfo')
  api.groupAdd({
    patient_uuid:patientUuid.value,
    name: groupName.value,
    expert_uuid:userInfo.uuid,
  }).then(res => {
    if(res.code == 200){
        loadAllGroups();
        show.value = false;
        groupName.value = '';
    }
  })
};

const saveGroups = () => {
    api.patientCardUpdateGroup({
        name:selectedGroups.value.map(g => g.name).join(','),
        group_uuid: selectedGroups.value.map(g => g.uuid).join(','),
        patient_uuid: patientUuid.value
    }).then(res => {
        if(res.code == 200){
            uni.showToast({ title: '保存成功', icon: 'none' })
            setTimeout(() => goBack(), 700);
        }
    })
};
</script>

<style lang="scss" scoped>
.group-manage-page {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 160rpx;
}

.save-text {
  color: #8b2316;
  font-size: 30rpx;
}
.input{
    width:450rpx;
    background: #f8f8f8;
			border-radius: 12rpx;
			padding: 16rpx 24rpx;
			font-size: 30rpx;
			color: #333;
}
.selected-section {
  min-height: 300rpx;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.all-groups-section {
  padding: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.tag-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2rpx solid #999;
  border-radius: 40rpx;
  padding: 12rpx 20rpx;
  position: relative;
  &.selected {
    border-color: #8b2316;
    .tag-text {
      color: #8b2316;
    }
  }
}

.tag-text {
  font-size: 28rpx;
  color: #999;
  margin-right: 8rpx;
}

.tag-close {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #8b2316;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8rpx;
}

.close-icon {
  font-size: 20rpx;
  color: #fff;
  font-weight: bold;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  padding: 20rpx 30rpx env(safe-area-inset-bottom);
}

.add-btn {
  width: 100%;
  height: 88rpx;
  background: #20b2aa;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>