gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

9.2 zjd提交

Browse Source
This commit is contained in:
zoujiandong
2025-09-02 19:03:45 +08:00
parent 1cc611d68d
commit f89d0e6295
16 changed files with 1338 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages_app/patientGroup/patientGroup.vue
+100 -63
View File
@@ -17,14 +17,14 @@
<!-- 筛选排序栏 -->
<view class="filter-sort-bar">
<view class="sort-section" @click="toggleGroupSort">
<text class="sort-label">分组排序</text>
<text class="sort-label">{{ groupSortTitle }}</text>
<view class="imgbox">
<up-image :src="upImg" width="26rpx" height="26rpx" ></up-image>
</view>
</view>
<view class="divider"></view>
<view class="current-sort" @click="toggleInnerSort">
<text class="sort-text">按首字母</text>
<text class="sort-text">{{ innerSortTitle }}</text>
<view class="imgbox">
<up-image :src="upImg" width="26rpx" height="26rpx" ></up-image>
</view>
@@ -33,12 +33,12 @@
<!-- 分组排序弹窗 -->
<view v-if="showGroupSort" class="popup-panel">
<view class="popup-item" :class="{ active: selectedGroupSort==='letter' }" @click.stop="chooseGroupSort('letter')">
<view class="popup-item" :class="{ active: group_sort==0 }" @click.stop="chooseGroupSort('letter')">
<text class="item-text">按首字母</text>
<uni-icons v-if="selectedGroupSort==='letter'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
</view>
<view class="popup-divider"></view>
<view class="popup-item" :class="{ active: selectedGroupSort==='count' }" @click.stop="chooseGroupSort('count')">
<view class="popup-item" :class="{ active:group_sort==1}" @click.stop="chooseGroupSort('count')">
<text class="item-text">分组人数</text>
<uni-icons v-if="selectedGroupSort==='count'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
</view>
@@ -47,13 +47,13 @@
<!-- 组内排序弹窗 -->
<view v-if="showInnerSort" class="popup-panel">
<view class="popup-item" :class="{ active: selectedInnerSort==='letter' }" @click.stop="chooseInnerSort('letter')">
<view class="popup-item" :class="{ active:list_sort==0 }" @click.stop="chooseInnerSort('letter')">
<text class="item-text">按首字母</text>
<uni-icons v-if="selectedInnerSort==='letter'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
</view>
<view class="popup-divider"></view>
<view class="popup-item" :class="{ active: selectedInnerSort==='count' }" @click.stop="chooseInnerSort('count')">
<text class="item-text">分组人数</text>
<view class="popup-item" :class="{ active:list_sort==1 }" @click.stop="chooseInnerSort('count')">
<text class="item-text">随访时间</text>
<uni-icons v-if="selectedInnerSort==='count'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
</view>
</view>
@@ -61,22 +61,29 @@
<!-- 患者列表 -->
<scroll-view class="patient-list-section" scroll-y="true" :style="{ height: scrollViewHeight }">
<view class="groupcell">
<view class="section-title">
<view class="imgbox">
<up-image :src="groupRightImg" width="19rpx" height="32rpx" ></up-image>
<!-- 分组循环渲染 -->
<view class="groupcell" v-for="(group, gi) in groups" :key="group.uuid || gi">
<view class="section-title" @click="toggleGroup(gi)">
<view class="left">
<view class="imgbox">
<up-image v-if="!openGroups[gi]" :src="groupRightImg" width="19rpx" height="32rpx" ></up-image>
<up-image v-else :src="groupDownImg" width="32rpx" height="19rpx" ></up-image>
</view>
<view class="title">{{ group.name || '未命名分组' }} | {{ group.patientNum || (group.patientList ? group.patientList.length : 0) }}</view>
</view>
<view class="right-edit" @click.stop="editGroup(group)">
<text class="edit-text">编辑</text>
</view>
<view class="title">待分组患者 | 5</view>
</view>
<view class="patient-list" >
<view class="patient-item" v-for="(patient, index) in patientList" :key="index">
<view class="patient-list" v-if="openGroups[gi]">
<view class="patient-item" v-for="(patient, index) in (group.patientList || [])" :key="patient.uuid || index">
<view class="patient-avatar">
<up-image :src="patient.avatar" width="80rpx" height="80rpx" mode="aspectFill"></up-image>
<up-image :src="docUrl + patient.photo" width="80rpx" height="80rpx" mode="aspectFill"></up-image>
</view>
<view class="patient-info">
<view class="patient-name">{{ patient.name }}</view>
<view class="follow-up-time">随访于{{ patient.lastFollowUp }}</view>
<view class="patient-name">{{ patient.realName || patient.nickname || '-' }}</view>
<view class="follow-up-time">随访于{{ formatYMD(patient.join_date) }}</view>
</view>
</view>
</view>
@@ -87,53 +94,59 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import upImg from "@/static/triangle_green_theme.png"
import downImg from "@/static/triangle_normal.png"
import groupRightImg from "@/static/groupright_big.png"
import groupDownImg from "@/static/groupup_big.png"
// 响应式数据
const patientList = ref([
{
name: 'aa',
lastFollowUp: '2020-12-02',
avatar: '/static/avatar1.png' // 云朵天空头像
},
{
name: '测试',
lastFollowUp: '2023-10-08',
avatar: '/static/avatar2.png' // 粉色背景白色人像
},
{
name: '刘三多',
lastFollowUp: '2021-12-16',
avatar: '/static/avatar3.png' // 绿色山水风景
},
{
name: '路测试',
lastFollowUp: '2019-10-28',
avatar: '/static/avatar4.png' // 粉色背景卡通人像
},
{
name: '哦哦哦',
lastFollowUp: '2023-10-08',
avatar: '/static/avatar5.png' // 粉色背景白色人像
}
]);
import api from '@/api/api.js';
import docUrl from '@/utils/docUrl'
import dayjs from 'dayjs'
const list_sort = ref(0);
const group_sort = ref(0);
// 计算滚动视图高度
const scrollViewHeight = computed(() => {
// 获取系统信息计算可用高度
// 导航栏高度(140rpx) + 筛选栏高度(约80rpx) + 标题高度(约80rpx) = 300rpx
// 转换为px并减去，得到可用高度
const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
const navHeight = 140 / 2; // rpx转px
const filterHeight = 80 / 2;
const titleHeight = 80 / 2;
const availableHeight = windowHeight - navHeight - filterHeight - titleHeight;
return `${availableHeight}px`;
// 分组数据与展开状态
const groups = ref([]);
const openGroups = ref({});
const formatYMD = (val) => {
if (!val) return '';
const d = dayjs(val);
return d.isValid() ? d.format('YYYY-MM-DD') : '';
};
// 排序栏标题
const groupSortTitle = computed(() => group_sort.value === 0 ? '按首字母' : '分组人数');
const innerSortTitle = computed(() => list_sort.value === 0 ? '按首字母' : '随访时间');
onShow(() => {
fetchGroupList();
});
const fetchGroupList = async () => {
const res = await api.groupList({
list_sort:list_sort.value,
page:1,
pageSize:10,
group_sort:group_sort.value
});
if(res.code === 200){
groups.value = Array.isArray(res.data) ? res.data : [];
// 初始化展开状态：默认收起
openGroups.value = {};
groups.value.forEach((_, idx) => openGroups.value[idx] = false);
}
};
const toggleGroup = (idx) => {
openGroups.value[idx] = !openGroups.value[idx];
};
const editGroup = (group) => {
// TODO: 跳转到分组编辑页或弹窗编辑
uni.showToast({ title: `编辑：${group.name || '未命名分组'}`, icon: 'none' });
};
// 分组排序弹窗状态
const showGroupSort = ref(false);
const selectedGroupSort = ref('letter'); // letter | count
@@ -142,18 +155,23 @@ const selectedGroupSort = ref('letter'); // letter | count
const showInnerSort = ref(false);
const selectedInnerSort = ref('letter');
// 待分组展开/收起
const showPending = ref(false);
const toggleGroupSort = () => {
showGroupSort.value = !showGroupSort.value;
if (showGroupSort.value) showInnerSort.value = false;
};
const closeGroupSort = () => {
showGroupSort.value = false;
};
const chooseGroupSort = (type) => {
selectedGroupSort.value = type;
closeGroupSort();
selectedGroupSort.value = type;
// 修改接口字段：按首字母=0，分组人数=1
group_sort.value = type === 'letter' ? 0 : 1;
closeGroupSort();
fetchGroupList();
};
const toggleInnerSort = () => {
@@ -166,8 +184,11 @@ const closeInnerSort = () => {
};
const chooseInnerSort = (type) => {
selectedInnerSort.value = type;
closeInnerSort();
selectedInnerSort.value = type;
// 组内排序：按首字母=0，随访时间=1
list_sort.value = type === 'letter' ? 0 : 1;
closeInnerSort();
fetchGroupList();
};
// 方法
@@ -182,6 +203,7 @@ const createNew = () => {
});
// 这里可以跳转到新建分组页面
};
</script>
<style lang="scss" scoped>
@@ -356,6 +378,7 @@ const createNew = () => {
z-index: 9;
border-bottom: 1rpx solid #f0f0f0;
.imgbox{
width: 32rpx;
margin-top: -10rpx;
}
.sort-section {
@@ -418,14 +441,28 @@ const createNew = () => {
.section-title {
padding: 30rpx 30rpx 20rpx;
font-size: 32rpx;
width: 100%;
box-sizing: border-box;
font-weight: normal;
display: flex;
color: #333;
border-bottom: 1rpx solid #f0f0f0;
align-items: center;
justify-content: space-between;
.left{
display:flex;
align-items:center;
}
.imgbox{
margin-top: 4rpx;
margin-right: 8rpx;
}
.right-edit{
display:flex;
align-items:center;
gap: 8rpx;
.edit-text{ font-size: 28rpx; color:#8B2316; }
}
}
.patient-list {