264 lines
8.8 KiB
Vue
264 lines
8.8 KiB
Vue
<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" @click="enterDetails(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 enterDetails(item) {
|
|
uni.navigateTo({ url: `/pages/health/chronicDisease/details?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>
|
|
@import '@/styles/health-common.scss';
|
|
|
|
// 筛选面板位置补充（单行模式）
|
|
.search-view .filter-panel {
|
|
top: 96rpx;
|
|
}
|
|
</style>
|