fix: 新增慢性疾病管理功能。
This commit is contained in:
tianyongbao
@@ -9,6 +9,14 @@ export function listChronicDisease(query) {
|
||||
})
|
||||
}
|
||||
|
||||
// 根据成员ID查询慢性疾病档案列表
|
||||
export function listChronicDiseaseByMember(personId) {
|
||||
return request({
|
||||
url: '/health/chronicDisease/listByPerson/' + personId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询慢性疾病档案详细
|
||||
export function getChronicDisease(id) {
|
||||
return request({
|
||||
|
||||
44
src/api/health/healthTags.js
Normal file
44
src/api/health/healthTags.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询标签管理列表
|
||||
export function listHealthTags(query) {
|
||||
return request({
|
||||
url: '/health/healthTags/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询标签管理详细
|
||||
export function getHealthTags(id) {
|
||||
return request({
|
||||
url: '/health/healthTags/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增标签管理
|
||||
export function addHealthTags(data) {
|
||||
return request({
|
||||
url: '/health/healthTags',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改标签管理
|
||||
export function updateHealthTags(data) {
|
||||
return request({
|
||||
url: '/health/healthTags',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除标签管理
|
||||
export function delHealthTags(id) {
|
||||
return request({
|
||||
url: '/health/healthTags/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
68
src/api/health/medicationPlan.js
Normal file
68
src/api/health/medicationPlan.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询用药计划列表
|
||||
export function listMedicationPlan(query) {
|
||||
return request({
|
||||
url: '/health/medicationPlan/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询用药计划详细
|
||||
export function getMedicationPlan(id) {
|
||||
return request({
|
||||
url: '/health/medicationPlan/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增用药计划
|
||||
export function addMedicationPlan(data) {
|
||||
return request({
|
||||
url: '/health/medicationPlan',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用药计划
|
||||
export function updateMedicationPlan(data) {
|
||||
return request({
|
||||
url: '/health/medicationPlan',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除用药计划
|
||||
export function delMedicationPlan(id) {
|
||||
return request({
|
||||
url: '/health/medicationPlan/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 暂停用药计划
|
||||
export function pauseMedicationPlan(id) {
|
||||
return request({
|
||||
url: '/health/medicationPlan/pause/' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 恢复用药计划
|
||||
export function resumeMedicationPlan(id) {
|
||||
return request({
|
||||
url: '/health/medicationPlan/resume/' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 结束用药计划
|
||||
export function endMedicationPlan(id) {
|
||||
return request({
|
||||
url: '/health/medicationPlan/end/' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
53
src/api/health/medicationTask.js
Normal file
53
src/api/health/medicationTask.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服药任务列表
|
||||
export function listMedicationTask(query) {
|
||||
return request({
|
||||
url: '/health/medicationTask/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询服药任务详细
|
||||
export function getMedicationTask(id) {
|
||||
return request({
|
||||
url: '/health/medicationTask/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除服药任务
|
||||
export function delMedicationTask(id) {
|
||||
return request({
|
||||
url: '/health/medicationTask/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 确认服药
|
||||
export function confirmMedication(id, confirmType, confirmTime) {
|
||||
return request({
|
||||
url: '/health/medicationTask/confirm/' + id,
|
||||
method: 'put',
|
||||
params: { confirmType, confirmTime }
|
||||
})
|
||||
}
|
||||
|
||||
// 跳过服药
|
||||
export function skipMedication(id, notes) {
|
||||
return request({
|
||||
url: '/health/medicationTask/skip/' + id,
|
||||
method: 'put',
|
||||
params: { notes }
|
||||
})
|
||||
}
|
||||
|
||||
// 标记漏服
|
||||
export function markMissed(id, notes) {
|
||||
return request({
|
||||
url: '/health/medicationTask/missed/' + id,
|
||||
method: 'put',
|
||||
params: { notes }
|
||||
})
|
||||
}
|
||||
@@ -266,8 +266,49 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "吃奶量统计"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/health/medicationPlan/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用药计划"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/health/medicationPlan/addEdit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用药计划"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/health/chronicDisease/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "慢性疾病档案"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/health/chronicDisease/addEdit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "慢性疾病档案"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/health/medicationTask/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "服药任务"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/health/healthTags/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "健康标签"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/health/healthTags/addEdit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "健康标签"
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
"subPackages": [
|
||||
{
|
||||
|
||||
226
src/pages/health/chronicDisease/addEdit.vue
Normal file
226
src/pages/health/chronicDisease/addEdit.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="180rpx"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
|
||||
<u-form-item label="成员" prop="personId" required @click="showPerson = true">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择成员"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="疾病名称" prop="diseaseName" required>
|
||||
<u--input v-model="form.diseaseName" placeholder="请输入疾病名称"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="疾病编码" prop="diseaseCode">
|
||||
<u--input v-model="form.diseaseCode" placeholder="ICD-10编码（可选）"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="确诊日期" prop="diagnosisDate" @click="showDatePicker = true">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.diagnosisDate" disabled disabledColor="#ffffff" placeholder="请选择确诊日期"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="疾病状态" prop="diseaseStatus" required @click="showStatus = true">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.diseaseStatusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="主治医生" prop="mainDoctor">
|
||||
<u--input v-model="form.mainDoctor" placeholder="请输入主治医生"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="就诊医院" prop="hospital">
|
||||
<u--input v-model="form.hospital" placeholder="请输入就诊医院"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="科室" prop="department">
|
||||
<u--input v-model="form.department" placeholder="请输入科室"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="诊断结果" prop="notes" labelPosition="top">
|
||||
<u--textarea v-model="form.notes" placeholder="请输入诊断结果" inputAlign="left"
|
||||
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="left"
|
||||
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showPerson" :columns="personColumns" keyName="name"
|
||||
@confirm="personConfirm" @cancel="showPerson = false"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showStatus" :columns="statusColumns" keyName="label"
|
||||
@confirm="statusConfirm" @cancel="showStatus = false"></u-picker>
|
||||
<u-datetime-picker :show="showDatePicker" v-model="datePickerValue" mode="date"
|
||||
@confirm="dateConfirm" @cancel="showDatePicker = false" @close="showDatePicker = false"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getChronicDisease, addChronicDisease, updateChronicDisease } from '@/api/health/chronicDisease'
|
||||
import { listPerson } from '@/api/health/person'
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import dayjs from 'dayjs'
|
||||
import { reactive, toRefs, ref, getCurrentInstance } from "vue"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const title = ref('慢性疾病档案-新增')
|
||||
const showPerson = ref(false)
|
||||
const showStatus = ref(false)
|
||||
const showDatePicker = ref(false)
|
||||
const datePickerValue = ref(Number(new Date()))
|
||||
|
||||
const personColumns = ref([[]])
|
||||
const statusColumns = ref([[
|
||||
{ label: '稳定', value: 1 },
|
||||
{ label: '需关注', value: 2 },
|
||||
{ label: '急性期', value: 3 }
|
||||
]])
|
||||
|
||||
const inputBaseStyle = {
|
||||
background: '#ffffff', border: '2rpx solid #dcdfe6', borderRadius: '8rpx',
|
||||
padding: '0 24rpx', height: '68rpx', width: '100%', boxSizing: 'border-box'
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
form: {
|
||||
id: null,
|
||||
personId: null,
|
||||
personName: null,
|
||||
diseaseName: null,
|
||||
diseaseCode: null,
|
||||
diagnosisDate: null,
|
||||
diseaseStatus: 1,
|
||||
diseaseStatusName: '稳定',
|
||||
mainDoctor: null,
|
||||
hospital: null,
|
||||
department: null,
|
||||
notes: null,
|
||||
isActive: 1,
|
||||
remark: null
|
||||
},
|
||||
rules: {
|
||||
personId: [{ required: true, message: '请选择成员', trigger: 'change' }],
|
||||
diseaseName: [{ required: true, message: '疾病名称不能为空', trigger: 'blur' }],
|
||||
diseaseStatus: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
||||
}
|
||||
})
|
||||
const { form, rules } = toRefs(data)
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.id) {
|
||||
form.value.id = option.id
|
||||
title.value = '慢性疾病档案-修改'
|
||||
loadDetail(option.id)
|
||||
}
|
||||
loadPersonList()
|
||||
})
|
||||
|
||||
function loadDetail(id) {
|
||||
getChronicDisease(id).then(res => {
|
||||
const d = res.data
|
||||
form.value = { ...form.value, ...d }
|
||||
form.value.personName = d.personName || ''
|
||||
form.value.diagnosisDate = formatDate(d.diagnosisDate)
|
||||
const statusMap = { 1: '稳定', 2: '需关注', 3: '急性期' }
|
||||
form.value.diseaseStatusName = statusMap[d.diseaseStatus] || ''
|
||||
})
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
if (!date) return null
|
||||
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 null
|
||||
}
|
||||
|
||||
function loadPersonList() {
|
||||
listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
personColumns.value = [res.rows || []]
|
||||
})
|
||||
}
|
||||
|
||||
function personConfirm(e) {
|
||||
const item = e.value[0]
|
||||
form.value.personId = item.id
|
||||
form.value.personName = item.name
|
||||
showPerson.value = false
|
||||
}
|
||||
|
||||
function statusConfirm(e) {
|
||||
const item = e.value[0]
|
||||
form.value.diseaseStatus = item.value
|
||||
form.value.diseaseStatusName = item.label
|
||||
showStatus.value = false
|
||||
}
|
||||
|
||||
function dateConfirm(e) {
|
||||
form.value.diagnosisDate = dayjs(e.value).format('YYYY-MM-DD')
|
||||
showDatePicker.value = false
|
||||
}
|
||||
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
const submitData = { ...form.value }
|
||||
delete submitData.personName
|
||||
delete submitData.diseaseStatusName
|
||||
delete submitData.createTime
|
||||
delete submitData.updateTime
|
||||
|
||||
if (submitData.id) {
|
||||
updateChronicDisease(submitData).then(() => {
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
})
|
||||
} else {
|
||||
addChronicDisease(submitData).then(() => {
|
||||
uni.showToast({ title: '新增成功', icon: 'success' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx; background-color: #fff; border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08); overflow: hidden;
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; font-size: 28rpx; font-weight: 600;
|
||||
display: flex; align-items: center;
|
||||
&::before { content: ''; width: 6rpx; height: 28rpx; background: #fff; border-radius: 3rpx; margin-right: 12rpx; }
|
||||
}
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
.form-btn { padding-top: 16rpx; }
|
||||
.input-with-arrow { position: relative; width: 100%;
|
||||
.arrow-icon { position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); color: #c0c4cc; font-size: 20rpx; pointer-events: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important; border-radius: 24rpx !important; height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
.form-btn .u-button__text { font-size: 30rpx !important; font-weight: 500 !important; }
|
||||
</style>
|
||||
311
src/pages/health/chronicDisease/list.vue
Normal file
311
src/pages/health/chronicDisease/list.vue
Normal 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>
|
||||
112
src/pages/health/healthTags/addEdit.vue
Normal file
112
src/pages/health/healthTags/addEdit.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
|
||||
<u-form-item label="名称" prop="name" required>
|
||||
<u--input v-model="form.name" placeholder="请输入名称"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="编码" prop="code" required>
|
||||
<u--input v-model="form.code" placeholder="请输入编码"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="left"
|
||||
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getHealthTags, addHealthTags, updateHealthTags } from '@/api/health/healthTags'
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { reactive, toRefs, ref, getCurrentInstance } from "vue"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const title = ref('健康标签-新增')
|
||||
|
||||
const inputBaseStyle = {
|
||||
background: '#ffffff', border: '2rpx solid #dcdfe6', borderRadius: '8rpx',
|
||||
padding: '0 24rpx', height: '68rpx', width: '100%', boxSizing: 'border-box'
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
form: {
|
||||
id: null,
|
||||
name: null,
|
||||
code: null,
|
||||
remark: null
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
})
|
||||
const { form, rules } = toRefs(data)
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.id) {
|
||||
form.value.id = option.id
|
||||
title.value = '健康标签-修改'
|
||||
getHealthTags(option.id).then(res => {
|
||||
form.value = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
const submitData = { ...form.value }
|
||||
delete submitData.createTime
|
||||
delete submitData.updateTime
|
||||
|
||||
if (submitData.id) {
|
||||
updateHealthTags(submitData).then(() => {
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
})
|
||||
} else {
|
||||
addHealthTags(submitData).then(() => {
|
||||
uni.showToast({ title: '新增成功', icon: 'success' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx; background-color: #fff; border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08); overflow: hidden;
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; font-size: 28rpx; font-weight: 600;
|
||||
display: flex; align-items: center;
|
||||
&::before { content: ''; width: 6rpx; height: 28rpx; background: #fff; border-radius: 3rpx; margin-right: 12rpx; }
|
||||
}
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
.form-btn { padding-top: 16rpx; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important; border-radius: 24rpx !important; height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
.form-btn .u-button__text { font-size: 30rpx !important; font-weight: 500 !important; }
|
||||
</style>
|
||||
195
src/pages/health/healthTags/list.vue
Normal file
195
src/pages/health/healthTags/list.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input
|
||||
v-model="queryParams.name"
|
||||
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="add-btn" v-show="auth.hasPermi('health:healthTags:add')" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
</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="tags" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name || '--' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item">
|
||||
<text class="info-label">名称</text>
|
||||
<text class="info-value">{{ item.name || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">编码</text>
|
||||
<text class="info-value">{{ item.code || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item info-item-full" v-if="item.remark">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-edit" v-show="auth.hasPermi('health:healthTags: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:healthTags: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 { listHealthTags, delHealthTags } from '@/api/health/healthTags'
|
||||
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 data = reactive({
|
||||
queryParams: {
|
||||
name: null,
|
||||
code: null
|
||||
}
|
||||
})
|
||||
const { queryParams } = toRefs(data)
|
||||
|
||||
onLoad(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (status.value == 'loadmore') getList()
|
||||
}
|
||||
|
||||
function getList() {
|
||||
status.value = 'loading'
|
||||
listHealthTags({ 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 searchBlur() {
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
uni.navigateTo({ url: '/pages/health/healthTags/addEdit' })
|
||||
isShow.value = true
|
||||
}
|
||||
|
||||
function handleEdit(item) {
|
||||
uni.navigateTo({ url: `/pages/health/healthTags/addEdit?id=${item.id}` })
|
||||
isShow.value = true
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条记录吗？',
|
||||
confirmText: '删除',
|
||||
confirmColor: '#f5576c',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
delHealthTags(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; }
|
||||
.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; }
|
||||
}
|
||||
}
|
||||
.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); }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -21,6 +21,26 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 慢性疾病管理 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('health:chronicDisease:list')">
|
||||
<text class="section-title">慢性疾病管理</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('health:chronicDisease:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in chronicDiseaseGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 婴幼儿管理 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('health:milkPowderRecord:list')">
|
||||
<text class="section-title">婴幼儿管理</text>
|
||||
@@ -82,6 +102,12 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
|
||||
{ path: '/pages/health/medicineStockIn/list', text: '药品入库清单', icon: 'download-filled', color: 'linear-gradient(135deg, #17c0eb 0%, #f368e0 100%)', permission: 'health:medicineStockIn:list' },
|
||||
{ path: '/pages/health/medicineStock/list', text: '药品实时库存', icon: 'shop', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'health:medicineStockIn:list' }
|
||||
])
|
||||
|
||||
const chronicDiseaseGridList = ref([
|
||||
{ path: '/pages/health/chronicDisease/list', text: '慢性疾病', icon: 'heart', color: 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)', permission: 'health:chronicDisease:list' },
|
||||
{ path: '/pages/health/medicationPlan/list', text: '用药计划', icon: 'calendar-filled', color: 'linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%)', permission: 'health:medicationPlan:list' },
|
||||
{ path: '/pages/health/medicationTask/list', text: '服药任务', icon: 'checkbox-filled', color: 'linear-gradient(135deg, #00b894 0%, #55efc4 100%)', permission: 'health:medicationTask:list' }
|
||||
])
|
||||
|
||||
const babycareGridList = ref([
|
||||
{ path: '/pages/health/milkPowderRecord/list', text: '吃奶记录', icon: 'gift-filled', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'health:milkPowderRecord:list' },
|
||||
|
||||
430
src/pages/health/medicationPlan/addEdit.vue
Normal file
430
src/pages/health/medicationPlan/addEdit.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="180rpx"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
|
||||
<u-form-item label="计划名称" prop="planName">
|
||||
<u--input v-model="form.planName" placeholder="请输入计划名称（可选）"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="人员" prop="personId" required @click="handlePersonPick">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="药品" prop="medicineId" required @click="handleMedicinePick">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.medicineDisplayName" disabled disabledColor="#ffffff" placeholder="请选择药品"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="慢性疾病" prop="chronicDiseaseId" @click="handleDiseasePick">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.diseaseName" disabled disabledColor="#ffffff" placeholder="请选择慢性疾病（可选）"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="每次剂量" prop="dosagePerTime" required>
|
||||
<view style="display:flex;align-items:center;gap:10rpx;width:100%">
|
||||
<u--input v-model="form.dosagePerTime" type="number" placeholder="剂量"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<view @click="handleUnitPick" style="min-width:120rpx">
|
||||
<u--input v-model="form.dosageUnit" disabled disabledColor="#ffffff" placeholder="单位"
|
||||
inputAlign="center" :customStyle="inputBaseStyle"></u--input>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="频次类型" prop="frequencyType" @click="handleFrequencyPick">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.frequencyName" disabled disabledColor="#ffffff" placeholder="请选择频次类型"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="服药时间点" prop="timeSlots" labelPosition="top">
|
||||
<view class="time-slots-container">
|
||||
<view v-for="(time, idx) in form.timePointList" :key="idx" class="time-tag">
|
||||
<text>{{ time }}</text>
|
||||
<text class="time-tag-close" @click="removeTimePoint(idx)">×</text>
|
||||
</view>
|
||||
<view class="time-add-btn" @click="showTimePicker = true">
|
||||
<uni-icons type="plusempty" size="14" color="#667eea"></uni-icons>
|
||||
<text>添加</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="开始日期" prop="startDate" required @click="openDatePicker('start')">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.startDate" disabled disabledColor="#ffffff" placeholder="请选择开始日期"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="结束日期" prop="endDate" @click="openDatePicker('end')">
|
||||
<view class="input-with-arrow">
|
||||
<u--input v-model="form.endDate" disabled disabledColor="#ffffff" placeholder="请选择结束日期（可选）"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
<text class="arrow-icon">▼</text>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="启用提醒" prop="remindEnabled">
|
||||
<u-switch v-model="form.remindEnabled" activeValue="1" inactiveValue="0"></u-switch>
|
||||
</u-form-item>
|
||||
<u-form-item label="通知家属" prop="notifyFamily">
|
||||
<u-switch v-model="form.notifyFamily" activeValue="1" inactiveValue="0"></u-switch>
|
||||
</u-form-item>
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="left"
|
||||
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showPerson" :columns="personColumns" keyName="name"
|
||||
@confirm="personConfirm" @cancel="showPerson = false"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showMedicine" :columns="medicineColumns" keyName="displayName"
|
||||
@confirm="medicineConfirm" @cancel="showMedicine = false"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showDisease" :columns="diseaseColumns" keyName="diseaseName"
|
||||
@confirm="diseaseConfirm" @cancel="showDisease = false"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showUnit" :columns="unitColumns" keyName="dictLabel"
|
||||
@confirm="unitConfirm" @cancel="showUnit = false"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showFrequency" :columns="frequencyColumns" keyName="label"
|
||||
@confirm="frequencyConfirm" @cancel="showFrequency = false"></u-picker>
|
||||
<u-datetime-picker :show="showDatePicker" v-model="datePickerValue" mode="date"
|
||||
@confirm="datePickerConfirm" @cancel="showDatePicker = false" @close="showDatePicker = false"></u-datetime-picker>
|
||||
<u-datetime-picker :show="showTimePicker" v-model="timePickerValue" mode="time"
|
||||
@confirm="timePickerConfirm" @cancel="showTimePicker = false" @close="showTimePicker = false"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getMedicationPlan, addMedicationPlan, updateMedicationPlan } from '@/api/health/medicationPlan'
|
||||
import { listPerson } from '@/api/health/person'
|
||||
import { listMedicineBasic } from '@/api/health/medicineBasic'
|
||||
import { listChronicDiseaseByMember } from '@/api/health/chronicDisease'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import dayjs from 'dayjs'
|
||||
import { reactive, toRefs, ref, getCurrentInstance } from "vue"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const title = ref('用药计划-新增')
|
||||
|
||||
const showPerson = ref(false)
|
||||
const showMedicine = ref(false)
|
||||
const showDisease = ref(false)
|
||||
const showUnit = ref(false)
|
||||
const showFrequency = ref(false)
|
||||
const showDatePicker = ref(false)
|
||||
const showTimePicker = ref(false)
|
||||
const datePickerValue = ref(Number(new Date()))
|
||||
const timePickerValue = ref('08:00')
|
||||
const datePickerTarget = ref('start')
|
||||
|
||||
const personColumns = ref([[]])
|
||||
const medicineColumns = ref([[]])
|
||||
const diseaseColumns = ref([[]])
|
||||
const unitColumns = ref([[]])
|
||||
const frequencyColumns = ref([[{ label: '每天', value: 1 }, { label: '每周', value: 2 }, { label: '隔天', value: 3 }, { label: '自定义', value: 4 }]])
|
||||
|
||||
const inputBaseStyle = {
|
||||
background: '#ffffff',
|
||||
border: '2rpx solid #dcdfe6',
|
||||
borderRadius: '8rpx',
|
||||
padding: '0 24rpx',
|
||||
height: '68rpx',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box'
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
form: {
|
||||
id: null,
|
||||
planName: null,
|
||||
personId: null,
|
||||
personName: null,
|
||||
chronicDiseaseId: null,
|
||||
diseaseName: null,
|
||||
medicineId: null,
|
||||
medicineDisplayName: null,
|
||||
medicineName: null,
|
||||
dosagePerTime: 1,
|
||||
dosageUnit: '片',
|
||||
frequencyType: 1,
|
||||
frequencyName: '每天',
|
||||
timePointList: ['08:00', '12:00', '18:00'],
|
||||
timeSlots: null,
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
remindEnabled: '0',
|
||||
notifyFamily: '0',
|
||||
remark: null
|
||||
},
|
||||
rules: {
|
||||
personId: [{ required: true, message: '请选择人员', trigger: 'change' }],
|
||||
medicineId: [{ required: true, message: '请选择药品', trigger: 'change' }],
|
||||
dosagePerTime: [{ required: true, message: '请输入剂量', trigger: 'blur' }],
|
||||
startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }]
|
||||
}
|
||||
})
|
||||
const { form, rules } = toRefs(data)
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.id) {
|
||||
form.value.id = option.id
|
||||
title.value = '用药计划-修改'
|
||||
loadDetail(option.id)
|
||||
}
|
||||
loadPersonList()
|
||||
loadMedicineList()
|
||||
loadUnitList()
|
||||
})
|
||||
|
||||
function loadDetail(id) {
|
||||
getMedicationPlan(id).then(res => {
|
||||
const d = res.data
|
||||
form.value = { ...form.value, ...d }
|
||||
form.value.personName = d.personName || ''
|
||||
form.value.medicineDisplayName = d.medicineName || ''
|
||||
form.value.diseaseName = d.diseaseName || ''
|
||||
form.value.remindEnabled = String(d.remindEnabled || 0)
|
||||
form.value.notifyFamily = String(d.notifyFamily || 0)
|
||||
// 转换日期
|
||||
form.value.startDate = convertDate(d.startDate)
|
||||
form.value.endDate = convertDate(d.endDate)
|
||||
// 解析时间点
|
||||
if (d.timeSlots) {
|
||||
try {
|
||||
form.value.timePointList = typeof d.timeSlots === 'string' ? JSON.parse(d.timeSlots) : d.timeSlots
|
||||
} catch (e) { form.value.timePointList = [] }
|
||||
}
|
||||
// 频次名称
|
||||
const freqMap = { 1: '每天', 2: '每周', 3: '隔天', 4: '自定义' }
|
||||
form.value.frequencyName = freqMap[d.frequencyType] || ''
|
||||
// 加载慢性疾病列表
|
||||
if (d.personId) loadDiseaseList(d.personId)
|
||||
})
|
||||
}
|
||||
|
||||
function convertDate(date) {
|
||||
if (!date) return null
|
||||
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 null
|
||||
}
|
||||
|
||||
function loadPersonList() {
|
||||
listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
personColumns.value = [res.rows || []]
|
||||
})
|
||||
}
|
||||
|
||||
function loadMedicineList() {
|
||||
listMedicineBasic({ pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
const list = (res.rows || []).map(item => ({ ...item, displayName: item.shortName + '-' + item.brand }))
|
||||
medicineColumns.value = [list]
|
||||
})
|
||||
}
|
||||
|
||||
function loadDiseaseList(personId) {
|
||||
listChronicDiseaseByMember(personId).then(res => {
|
||||
diseaseColumns.value = [res.data || []]
|
||||
})
|
||||
}
|
||||
|
||||
function loadUnitList() {
|
||||
getDicts('medical_unit').then(res => {
|
||||
unitColumns.value = [res.data || []]
|
||||
})
|
||||
}
|
||||
|
||||
function handlePersonPick() { showPerson.value = true }
|
||||
function handleMedicinePick() { showMedicine.value = true }
|
||||
function handleDiseasePick() {
|
||||
if (!form.value.personId) {
|
||||
uni.showToast({ title: '请先选择人员', icon: 'none' })
|
||||
return
|
||||
}
|
||||
showDisease.value = true
|
||||
}
|
||||
function handleUnitPick() { showUnit.value = true }
|
||||
function handleFrequencyPick() { showFrequency.value = true }
|
||||
|
||||
function personConfirm(e) {
|
||||
const item = e.value[0]
|
||||
form.value.personId = item.id
|
||||
form.value.personName = item.name
|
||||
showPerson.value = false
|
||||
// 切换人员后重新加载疾病列表
|
||||
form.value.chronicDiseaseId = null
|
||||
form.value.diseaseName = null
|
||||
loadDiseaseList(item.id)
|
||||
}
|
||||
|
||||
function medicineConfirm(e) {
|
||||
const item = e.value[0]
|
||||
form.value.medicineId = item.id
|
||||
form.value.medicineDisplayName = item.displayName
|
||||
form.value.medicineName = item.displayName
|
||||
form.value.dosageUnit = item.unit || '片'
|
||||
showMedicine.value = false
|
||||
}
|
||||
|
||||
function diseaseConfirm(e) {
|
||||
const item = e.value[0]
|
||||
form.value.chronicDiseaseId = item.id
|
||||
form.value.diseaseName = item.diseaseName
|
||||
showDisease.value = false
|
||||
}
|
||||
|
||||
function unitConfirm(e) {
|
||||
form.value.dosageUnit = e.value[0].dictLabel
|
||||
showUnit.value = false
|
||||
}
|
||||
|
||||
function frequencyConfirm(e) {
|
||||
form.value.frequencyType = e.value[0].value
|
||||
form.value.frequencyName = e.value[0].label
|
||||
showFrequency.value = false
|
||||
}
|
||||
|
||||
function openDatePicker(target) {
|
||||
datePickerTarget.value = target
|
||||
showDatePicker.value = true
|
||||
}
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
const dateStr = dayjs(e.value).format('YYYY-MM-DD')
|
||||
if (datePickerTarget.value === 'start') {
|
||||
form.value.startDate = dateStr
|
||||
} else {
|
||||
form.value.endDate = dateStr
|
||||
}
|
||||
showDatePicker.value = false
|
||||
}
|
||||
|
||||
function timePickerConfirm(e) {
|
||||
const timeStr = e.value
|
||||
if (timeStr && !form.value.timePointList.includes(timeStr)) {
|
||||
form.value.timePointList.push(timeStr)
|
||||
}
|
||||
showTimePicker.value = false
|
||||
}
|
||||
|
||||
function removeTimePoint(idx) {
|
||||
form.value.timePointList.splice(idx, 1)
|
||||
}
|
||||
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
const submitData = { ...form.value }
|
||||
submitData.timeSlots = JSON.stringify(form.value.timePointList)
|
||||
submitData.remindEnabled = parseInt(form.value.remindEnabled)
|
||||
submitData.notifyFamily = parseInt(form.value.notifyFamily)
|
||||
// 清理展示字段
|
||||
delete submitData.personName
|
||||
delete submitData.medicineDisplayName
|
||||
delete submitData.diseaseName
|
||||
delete submitData.frequencyName
|
||||
delete submitData.timePointList
|
||||
delete submitData.createTime
|
||||
delete submitData.updateTime
|
||||
|
||||
if (submitData.id) {
|
||||
updateMedicationPlan(submitData).then(() => {
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
})
|
||||
} else {
|
||||
addMedicationPlan(submitData).then(() => {
|
||||
uni.showToast({ title: '新增成功', icon: 'success' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before { content: ''; width: 6rpx; height: 28rpx; background: #ffffff; border-radius: 3rpx; margin-right: 12rpx; }
|
||||
}
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
.form-btn { padding-top: 16rpx; }
|
||||
.input-with-arrow {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.arrow-icon { position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); color: #c0c4cc; font-size: 20rpx; pointer-events: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.time-slots-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx 0;
|
||||
.time-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #667eea;
|
||||
.time-tag-close { font-size: 32rpx; color: #f56c6c; }
|
||||
}
|
||||
.time-add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border: 2rpx dashed rgba(102, 126, 234, 0.4);
|
||||
border-radius: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
</style>
|
||||
559
src/pages/health/medicationPlan/list.vue
Normal file
559
src/pages/health/medicationPlan/list.vue
Normal file
@@ -0,0 +1,559 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input
|
||||
v-model="queryParams.keys"
|
||||
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:medicationPlan: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 statusList" :key="item.value" class="state-item"
|
||||
:class="queryParams.status == item.value ? 'active' : ''" @click="selectStatus(item)">{{ item.label }}</view>
|
||||
</view>
|
||||
<view class="filter-title">人员</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in personList" :key="item.id" class="state-item"
|
||||
:class="queryParams.personId == item.id ? 'active' : ''" @click="selectPerson(item)">{{ item.name }}</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="calendar" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.planName || item.medicineName || '用药计划' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-tag" :class="'status-' + item.status">
|
||||
{{ getStatusLabel(item.status) }}
|
||||
</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.medicineName || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">剂量</text>
|
||||
<text class="info-value">{{ item.dosagePerTime || '--' }} {{ item.dosageUnit || '' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">频次</text>
|
||||
<text class="info-value">{{ getFrequencyLabel(item.frequencyType) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">开始日期</text>
|
||||
<text class="info-value">{{ formatDate(item.startDate) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">结束日期</text>
|
||||
<text class="info-value">{{ item.endDate ? formatDate(item.endDate) : '长期' }}</text>
|
||||
</view>
|
||||
<view class="info-item info-item-full" v-if="item.timeSlots">
|
||||
<text class="info-label">服药时间</text>
|
||||
<text class="info-value">{{ parseTimeSlots(item.timeSlots).join('、') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-edit" v-if="item.status === 1" @click="handlePause(item)">
|
||||
<uni-icons type="pausemini" size="16" color="#fa8c16"></uni-icons>
|
||||
<text>暂停</text>
|
||||
</view>
|
||||
<view class="btn-edit" v-if="item.status === 3" @click="handleResume(item)">
|
||||
<uni-icons type="right" size="16" color="#52c41a"></uni-icons>
|
||||
<text>恢复</text>
|
||||
</view>
|
||||
<view class="btn-edit" v-if="item.status !== 2" @click="handleEnd(item)">
|
||||
<uni-icons type="checkbox" size="16" color="#667eea"></uni-icons>
|
||||
<text>结束</text>
|
||||
</view>
|
||||
<view class="btn-edit" v-show="auth.hasPermi('health:medicationPlan: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:medicationPlan: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 { listMedicationPlan, delMedicationPlan, pauseMedicationPlan, resumeMedicationPlan, endMedicationPlan } from '@/api/health/medicationPlan'
|
||||
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 personList = ref([])
|
||||
const statusList = ref([
|
||||
{ label: '进行中', value: 1 },
|
||||
{ label: '已结束', value: 2 },
|
||||
{ label: '已暂停', value: 3 }
|
||||
])
|
||||
|
||||
const data = reactive({
|
||||
filterPanel: false,
|
||||
queryParams: {
|
||||
keys: null,
|
||||
personId: null,
|
||||
status: null
|
||||
}
|
||||
})
|
||||
const { filterPanel, queryParams } = toRefs(data)
|
||||
|
||||
onLoad(() => {
|
||||
getPersonList()
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function getPersonList() {
|
||||
listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
personList.value = res.rows || []
|
||||
})
|
||||
}
|
||||
|
||||
function getStatusLabel(s) {
|
||||
const map = { 1: '进行中', 2: '已结束', 3: '已暂停' }
|
||||
return map[s] || '未知'
|
||||
}
|
||||
|
||||
function getFrequencyLabel(type) {
|
||||
const map = { 1: '每天', 2: '每周', 3: '隔天', 4: '自定义' }
|
||||
return map[type] || '--'
|
||||
}
|
||||
|
||||
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 parseTimeSlots(timeSlots) {
|
||||
if (!timeSlots) return []
|
||||
try {
|
||||
return typeof timeSlots === 'string' ? JSON.parse(timeSlots) : timeSlots
|
||||
} catch (e) {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function selectStatus(item) {
|
||||
queryParams.value.status = queryParams.value.status == item.value ? null : item.value
|
||||
}
|
||||
|
||||
function selectPerson(item) {
|
||||
queryParams.value.personId = queryParams.value.personId == item.id ? null : item.id
|
||||
}
|
||||
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (status.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
function getList() {
|
||||
status.value = 'loading'
|
||||
listMedicationPlan({ 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.keys = null
|
||||
queryParams.value.personId = null
|
||||
queryParams.value.status = null
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
uni.navigateTo({ url: '/pages/health/medicationPlan/addEdit' })
|
||||
isShow.value = true
|
||||
}
|
||||
|
||||
function handleEdit(item) {
|
||||
uni.navigateTo({ url: `/pages/health/medicationPlan/addEdit?id=${item.id}` })
|
||||
isShow.value = true
|
||||
}
|
||||
|
||||
function handlePause(item) {
|
||||
uni.showModal({
|
||||
title: '确认暂停',
|
||||
content: '确定要暂停该用药计划吗？',
|
||||
confirmColor: '#667eea',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
pauseMedicationPlan(item.id).then(() => {
|
||||
uni.showToast({ title: '暂停成功', icon: 'success' })
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleResume(item) {
|
||||
resumeMedicationPlan(item.id).then(() => {
|
||||
uni.showToast({ title: '恢复成功', icon: 'success' })
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
function handleEnd(item) {
|
||||
uni.showModal({
|
||||
title: '确认结束',
|
||||
content: '确认结束该用药计划？结束后将不再生成用药记录。',
|
||||
confirmColor: '#667eea',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
endMedicationPlan(item.id).then(() => {
|
||||
uni.showToast({ title: '已结束', icon: 'success' })
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条记录吗？',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
confirmColor: '#f5576c',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
delMedicationPlan(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: #666666;
|
||||
background: #ffffff;
|
||||
}
|
||||
.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: 2rpx solid transparent;
|
||||
color: #ffffff;
|
||||
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: #ffffff; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: #ffffff;
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
.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(144, 147, 153, 0.2);
|
||||
color: #909399;
|
||||
}
|
||||
.status-3 {
|
||||
background: rgba(250, 140, 22, 0.2);
|
||||
color: #fa8c16;
|
||||
}
|
||||
</style>
|
||||
363
src/pages/health/medicationTask/list.vue
Normal file
363
src/pages/health/medicationTask/list.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input
|
||||
v-model="queryParams.keys"
|
||||
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>
|
||||
<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.memberId == 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.status == 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="clock" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.planName || item.medicineName || '服药任务' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-tag" :class="'status-' + item.status">
|
||||
{{ getStatusLabel(item.status) }}
|
||||
</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.medicineName || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">计划日期</text>
|
||||
<text class="info-value">{{ formatDate(item.plannedDate) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">计划时间</text>
|
||||
<text class="info-value">{{ formatTime(item.plannedTime) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">剂量</text>
|
||||
<text class="info-value">{{ item.plannedDosage || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">实际时间</text>
|
||||
<text class="info-value">{{ item.actualTime ? formatDateTime(item.actualTime) : '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item info-item-full" v-if="item.notes">
|
||||
<text class="info-label">备注</text>
|
||||
<text class="info-value">{{ item.notes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-confirm-med" v-if="item.status === 0" @click="handleConfirm(item)">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
|
||||
<text>确认服药</text>
|
||||
</view>
|
||||
<view class="btn-skip" v-if="item.status === 0" @click="handleSkip(item)">
|
||||
<uni-icons type="close" size="16" color="#fa8c16"></uni-icons>
|
||||
<text>跳过</text>
|
||||
</view>
|
||||
<view class="btn-delete" v-show="auth.hasPermi('health:medicationTask: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>
|
||||
<!-- 确认服药弹窗 -->
|
||||
<u-modal :show="confirmModalShow" title="确认服药" :showCancelButton="true"
|
||||
@confirm="submitConfirm" @cancel="confirmModalShow = false">
|
||||
<view style="padding: 24rpx;">
|
||||
<text style="color:#666;font-size:28rpx;">实际服药时间：{{ actualTime }}</text>
|
||||
</view>
|
||||
</u-modal>
|
||||
<!-- 跳过弹窗 -->
|
||||
<u-modal :show="skipModalShow" title="跳过服药" :showCancelButton="true"
|
||||
@confirm="submitSkip" @cancel="skipModalShow = false">
|
||||
<view style="padding: 24rpx;">
|
||||
<u--input v-model="skipNotes" placeholder="请输入跳过原因（选填）" border="surround"></u--input>
|
||||
</view>
|
||||
</u-modal>
|
||||
<suspend></suspend>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listMedicationTask, delMedicationTask, confirmMedication, skipMedication } from '@/api/health/medicationTask'
|
||||
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 status = ref('loadmore')
|
||||
const memberList = ref([])
|
||||
const statusList = ref([
|
||||
{ label: '未执行', value: 0 },
|
||||
{ label: '已确认', value: 1 },
|
||||
{ label: '已跳过', value: 2 },
|
||||
{ label: '漏服', value: 3 }
|
||||
])
|
||||
|
||||
const confirmModalShow = ref(false)
|
||||
const skipModalShow = ref(false)
|
||||
const currentRow = ref(null)
|
||||
const actualTime = ref('')
|
||||
const skipNotes = ref('')
|
||||
|
||||
const data = reactive({
|
||||
filterPanel: false,
|
||||
queryParams: {
|
||||
keys: null,
|
||||
memberId: null,
|
||||
status: null
|
||||
}
|
||||
})
|
||||
const { filterPanel, queryParams } = toRefs(data)
|
||||
|
||||
onLoad(() => {
|
||||
getMemberList()
|
||||
getList()
|
||||
})
|
||||
|
||||
function getMemberList() {
|
||||
listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
memberList.value = res.rows || []
|
||||
})
|
||||
}
|
||||
|
||||
function getStatusLabel(s) {
|
||||
const map = { 0: '未执行', 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 formatTime(time) {
|
||||
if (!time) return '--'
|
||||
if (Array.isArray(time)) return `${String(time[0]).padStart(2, '0')}:${String(time[1]).padStart(2, '0')}`
|
||||
if (typeof time === 'string') return time.substring(0, 5)
|
||||
return '--'
|
||||
}
|
||||
|
||||
function formatDateTime(datetime) {
|
||||
if (!datetime) return '--'
|
||||
return datetime.replace('T', ' ').substring(0, 16)
|
||||
}
|
||||
|
||||
function selectMember(item) {
|
||||
queryParams.value.memberId = queryParams.value.memberId == item.id ? null : item.id
|
||||
}
|
||||
|
||||
function selectStatus(item) {
|
||||
queryParams.value.status = queryParams.value.status === item.value ? null : item.value
|
||||
}
|
||||
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (status.value == 'loadmore') getList()
|
||||
}
|
||||
|
||||
function getList() {
|
||||
status.value = 'loading'
|
||||
listMedicationTask({ 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.keys = null
|
||||
queryParams.value.memberId = null
|
||||
queryParams.value.status = null
|
||||
}
|
||||
|
||||
function handleConfirm(item) {
|
||||
currentRow.value = item
|
||||
const now = new Date()
|
||||
actualTime.value = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
||||
confirmModalShow.value = true
|
||||
}
|
||||
|
||||
function submitConfirm() {
|
||||
confirmMedication(currentRow.value.id, 1, actualTime.value).then(() => {
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
confirmModalShow.value = false
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
function handleSkip(item) {
|
||||
currentRow.value = item
|
||||
skipNotes.value = ''
|
||||
skipModalShow.value = true
|
||||
}
|
||||
|
||||
function submitSkip() {
|
||||
skipMedication(currentRow.value.id, skipNotes.value).then(() => {
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
skipModalShow.value = false
|
||||
pageNum.value = 1
|
||||
listData.value = []
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条记录吗？',
|
||||
confirmText: '删除',
|
||||
confirmColor: '#f5576c',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
delMedicationTask(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 {
|
||||
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; flex-wrap: wrap;
|
||||
.btn-confirm-med, .btn-skip, .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-confirm-med { background: rgba(82,196,26,0.1); color: #52c41a; border: 1rpx solid rgba(82,196,26,0.3); }
|
||||
.btn-skip { background: rgba(250,140,22,0.1); color: #fa8c16; border: 1rpx solid rgba(250,140,22,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-0 { background: rgba(102,126,234,0.2); color: #667eea; }
|
||||
.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>
|
||||
Reference in New Issue
Block a user