qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 新增慢性疾病管理功能。

Browse Source
This commit is contained in:
tianyongbao
2026-05-26 07:24:58 +08:00
parent 984b837a79
commit 0e3e0d21ba
13 changed files with 2437 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
src/pages/health/chronicDisease/list.vue Normal file
View File

@@ -0,0 +1,311 @@
<template>
<view class="container">
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
<view class="search-view">
<u--input
v-model="queryParams.diseaseName"
border="surround"
@change="searchBlur"
placeholder="请输入疾病名称"
placeholderStyle="color: #909399"
color="#333333"
customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
class="search-input"
suffixIcon="search"
suffixIconStyle="color: #667eea">
</u--input>
<view class="filter-btn" @click="filterPanel = !filterPanel">
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
<text>筛选</text>
</view>
<view class="add-btn" v-show="auth.hasPermi('health:chronicDisease:add')" @click="handleAdd()">
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
<text>新增</text>
</view>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel">
<view class="filter-panel-content">
<view class="filter-title">成员</view>
<view class="state-list">
<view v-for="item in memberList" :key="item.id" class="state-item"
:class="queryParams.personId == item.id ? 'active' : ''" @click="selectMember(item)">{{ item.name }}</view>
</view>
<view class="filter-title">疾病状态</view>
<view class="state-list">
<view v-for="item in statusList" :key="item.value" class="state-item"
:class="queryParams.diseaseStatus == item.value ? 'active' : ''" @click="selectStatus(item)">{{ item.label }}</view>
</view>
</view>
<view class="btn-box">
<view class="btn-reset" @click="resetQuery()">
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
<text>重置</text>
</view>
<view class="btn-confirm" @click="searchSubmit()">
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
<text>确定</text>
</view>
</view>
</view>
</u-transition>
</view>
</u-sticky>
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header">
<view class="card-name-section">
<view class="card-icon">
<uni-icons type="heart" size="20" color="#ffffff"></uni-icons>
</view>
<view class="card-info">
<text class="card-name">{{ item.diseaseName || '--' }}</text>
</view>
</view>
<view class="status-tag" :class="'status-' + item.diseaseStatus">
{{ getStatusLabel(item.diseaseStatus) }}
</view>
</view>
<view class="card-body">
<view class="info-row">
<view class="info-item">
<text class="info-label">成员</text>
<text class="info-value">{{ item.personName || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">疾病编码</text>
<text class="info-value">{{ item.diseaseCode || '--' }}</text>
</view>
<view class="info-item">
<text class="info-label">确诊日期</text>
<text class="info-value">{{ formatDate(item.diagnosisDate) }}</text>
</view>
<view class="info-item">
<text class="info-label">主治医生</text>
<text class="info-value">{{ item.mainDoctor || '--' }}</text>
</view>
<view class="info-item info-item-full" v-if="item.hospital">
<text class="info-label">就诊医院</text>
<text class="info-value">{{ item.hospital }} {{ item.department ? '- ' + item.department : '' }}</text>
</view>
<view class="info-item info-item-full">
<text class="info-label">启用状态</text>
<text class="info-value" :style="{ color: item.isActive === 1 ? '#52c41a' : '#909399' }">{{ item.isActive === 1 ? '已启用' : '已停用' }}</text>
</view>
</view>
</view>
<view class="operate" @click.stop>
<view class="btn-edit" v-show="auth.hasPermi('health:chronicDisease:edit')" @click="handleEdit(item)">
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
<text>修改</text>
</view>
<view class="btn-delete" v-show="auth.hasPermi('health:chronicDisease:remove')" @click="handleDelete(item)">
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
<text>删除</text>
</view>
</view>
</view>
</u-list-item>
<u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
</u-list>
<suspend></suspend>
</view>
</template>
<script setup>
import { listChronicDisease, delChronicDisease } from '@/api/health/chronicDisease'
import { listPerson } from '@/api/health/person'
import { onLoad, onShow } from "@dcloudio/uni-app"
import auth from "@/plugins/auth"
import { reactive, toRefs, ref } from "vue"
const pageNum = ref(1)
const listData = ref([])
const isShow = ref(false)
const status = ref('loadmore')
const memberList = ref([])
const statusList = ref([
{ label: '稳定', value: 1 },
{ label: '需关注', value: 2 },
{ label: '急性期', value: 3 }
])
const data = reactive({
filterPanel: false,
queryParams: {
diseaseName: null,
personId: null,
diseaseStatus: null
}
})
const { filterPanel, queryParams } = toRefs(data)
onLoad(() => {
getMemberList()
getList()
})
onShow(() => {
if (isShow.value) {
listData.value = []
pageNum.value = 1
getList()
isShow.value = false
}
})
function getMemberList() {
listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
memberList.value = res.rows || []
})
}
function getStatusLabel(s) {
const map = { 1: '稳定', 2: '需关注', 3: '急性期' }
return map[s] || '未知'
}
function formatDate(date) {
if (!date) return '--'
if (Array.isArray(date)) return `${date[0]}-${String(date[1]).padStart(2, '0')}-${String(date[2]).padStart(2, '0')}`
if (typeof date === 'string') return date.substring(0, 10)
return '--'
}
function selectMember(item) {
queryParams.value.personId = queryParams.value.personId == item.id ? null : item.id
}
function selectStatus(item) {
queryParams.value.diseaseStatus = queryParams.value.diseaseStatus == item.value ? null : item.value
}
function loadmore() {
pageNum.value += 1
if (status.value == 'loadmore') getList()
}
function getList() {
status.value = 'loading'
listChronicDisease({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
listData.value = listData.value.concat(res.rows || [])
if (listData.value.length < res.total) {
status.value = 'loadmore'
} else {
status.value = 'nomore'
}
}).catch(() => { status.value = 'nomore' })
}
function searchSubmit() {
pageNum.value = 1
listData.value = []
getList()
filterPanel.value = false
}
function searchBlur() {
pageNum.value = 1
listData.value = []
getList()
}
function resetQuery() {
queryParams.value.diseaseName = null
queryParams.value.personId = null
queryParams.value.diseaseStatus = null
}
function handleAdd() {
uni.navigateTo({ url: '/pages/health/chronicDisease/addEdit' })
isShow.value = true
}
function handleEdit(item) {
uni.navigateTo({ url: `/pages/health/chronicDisease/addEdit?id=${item.id}` })
isShow.value = true
}
function handleDelete(item) {
uni.showModal({
title: '确认删除',
content: '确定要删除这条记录吗？',
confirmText: '删除',
confirmColor: '#f5576c',
success: function (res) {
if (res.confirm) {
delChronicDisease(item.id).then(() => {
uni.showToast({ title: '删除成功', icon: 'success' })
pageNum.value = 1
listData.value = []
getList()
})
}
}
})
}
</script>
<style lang="scss" scoped>
page { height: 100%; overflow: auto; }
.search-view {
padding: 12rpx 32rpx; background-color: #ffffff; display: flex; justify-content: space-between; align-items: center;
position: relative; z-index: 100; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); gap: 10rpx;
.search-input { flex: 1; }
.filter-btn, .add-btn {
display: flex; align-items: center; gap: 6rpx; padding: 12rpx 24rpx;
background: rgba(102,126,234,0.08); border-radius: 24rpx; border: 2rpx solid rgba(102,126,234,0.3); flex-shrink: 0;
text { color: #667eea; font-size: 28rpx; font-weight: 600; }
}
.filter-panel {
width: 100%; position: absolute; left: 0; top: 96rpx; background-color: rgba(0,0,0,0.5); z-index: 999;
.filter-panel-content {
background-color: #ffffff; padding: 0 30rpx 30rpx;
.filter-title { color: #2c3e50; font-size: 32rpx; font-weight: 600; padding: 32rpx 0 24rpx 20rpx; }
.state-list {
display: flex; flex-wrap: wrap; gap: 16rpx;
.state-item { padding: 0 32rpx; height: 68rpx; border: 2rpx solid #e8edf3; border-radius: 34rpx; text-align: center; line-height: 68rpx; font-size: 28rpx; color: #666; background: #fff; }
.active { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); border: 2rpx solid transparent; color: #fff; font-weight: 600; }
}
}
.btn-box {
display: flex; gap: 20rpx; padding: 24rpx 30rpx; background-color: #fff;
.btn-reset, .btn-confirm { display: flex; align-items: center; justify-content: center; gap: 8rpx; height: 88rpx; border-radius: 12rpx; font-size: 30rpx; font-weight: 600; flex: 1; text { line-height: 1; } }
.btn-reset { background: #f5f7fa; border: 2rpx solid #dcdfe6; text { color: #606266; } }
.btn-confirm { background: #667eea; border: none; text { color: #fff; } }
}
}
}
.list-item {
margin: 10rpx 24rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
.item-header {
display: flex; justify-content: space-between; align-items: center; padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.card-name-section { display: flex; align-items: center; flex: 1; min-width: 0; }
.card-icon { width: 40rpx; height: 40rpx; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; flex-shrink: 0; }
.card-info { flex: 1; min-width: 0; .card-name { color: #fff; font-size: 30rpx; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
}
.card-body { padding: 24rpx; background: #fafbfc; border: 2rpx solid #f0f2f5; margin: 15rpx 16rpx 2rpx; border-radius: 12rpx; }
.info-row {
display: flex; flex-wrap: wrap; margin: 0 -12rpx;
.info-item {
width: 50%; padding: 0 12rpx; box-sizing: border-box; display: flex; flex-direction: column; margin-bottom: 20rpx;
&.info-item-full { width: 100%; }
.info-label { font-size: 24rpx; color: #667eea; font-weight: 500; background: rgba(102,126,234,0.08); padding: 6rpx 12rpx; border-radius: 8rpx; align-self: flex-start; margin-bottom: 8rpx; }
.info-value { font-size: 26rpx; color: #333; font-weight: 500; line-height: 1.5; word-break: break-all; }
}
}
.operate {
display: flex; justify-content: flex-end; padding: 16rpx 24rpx 24rpx; gap: 16rpx;
.btn-edit, .btn-delete { display: flex; align-items: center; justify-content: center; gap: 6rpx; padding: 0 24rpx; height: 64rpx; border-radius: 12rpx; font-size: 26rpx; font-weight: 500; }
.btn-edit { background: rgba(102,126,234,0.1); color: #667eea; border: 1rpx solid rgba(102,126,234,0.3); }
.btn-delete { background: rgba(245,87,108,0.1); color: #f5576c; border: 1rpx solid rgba(245,87,108,0.3); }
}
}
.status-tag { font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 8rpx; font-weight: 600; }
.status-1 { background: rgba(82,196,26,0.2); color: #52c41a; }
.status-2 { background: rgba(250,140,22,0.2); color: #fa8c16; }
.status-3 { background: rgba(245,87,108,0.2); color: #f5576c; }
</style>