门诊医生站-》开立诊断 页面调整

This commit is contained in:
itcast
2026-01-16 16:32:36 +08:00
parent be0514bc08
commit 8fcfb481c9
83 changed files with 3808 additions and 2205 deletions

View File

@@ -47,9 +47,10 @@
<option>检验套餐</option>
</select>
</div>
<div class="filter-item">
<div class="filter-item filter-item-department">
<label>科室</label>
<el-tree-select
v-model="searchParams.department"
placeholder="请选择科室"
:data="departments"
:props="{
@@ -58,7 +59,10 @@
children: 'children'
}"
value-key="name"
style="width: 100%;"
check-strictly
:expand-on-click-node="false"
clearable
style="width: 200px;"
/>
</div>
<div class="filter-item">
@@ -235,7 +239,8 @@ const searchParams = ref({
startDate: getCurrentDate(),
endDate: getCurrentDate(),
packageName: '',
packageLevel: ''
packageLevel: '',
department: ''
});
// 过滤后的数据
@@ -251,6 +256,9 @@ const filteredData = computed(() => {
// 套餐级别筛选
if (searchParams.value.packageLevel && item.level !== searchParams.value.packageLevel) return false;
// 科室筛选
if (searchParams.value.department && item.department !== searchParams.value.department) return false;
return true;
});
});
@@ -281,7 +289,8 @@ function handleReset() {
startDate: getCurrentDate(),
endDate: getCurrentDate(),
packageName: '',
packageLevel: ''
packageLevel: '',
department: ''
};
}
@@ -452,6 +461,14 @@ function convertToCSV(data) {
gap: 8px;
}
.filter-item-department {
min-width: 280px;
}
.filter-item-department .el-tree-select {
width: 100%;
}
.filter-item label {
font-size: 14px;
color: var(--text-secondary);

View File

@@ -411,12 +411,22 @@
<div class="form-item">
<span class="form-label">套餐级别</span>
<select class="form-control form-select" id="packageLevel" v-model="packageLevel">
<option value="">请选择套餐级别</option>
<option value="全院套餐">全院套餐</option>
<option value="科室套餐">科室套餐</option>
<option value="个人套餐">个人套餐</option>
</select>
<el-select
v-model="packageLevel"
filterable
allow-create
default-first-option
placeholder="请选择或输入套餐级别"
style="width: 100%;"
@change="handlePackageLevelChange"
>
<el-option
v-for="item in packageLevelOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="form-item" id="departmentContainer" v-show="packageLevel === '科室套餐'">
<span class="form-label">科室</span>
@@ -468,47 +478,31 @@
</div>
<div class="form-item">
<span class="form-label">是否停用</span>
<div class="radio-group">
<label class="radio-item">
<input type="radio" v-model="isDisabled" :value="false" checked> 启用
</label>
<label class="radio-item">
<input type="radio" v-model="isDisabled" :value="true"> 停用
</label>
</div>
<el-radio-group v-model="isDisabled" size="medium">
<el-radio :label="false">启用</el-radio>
<el-radio :label="true">停用</el-radio>
</el-radio-group>
</div>
<div class="form-item">
<span class="form-label">显示套餐名</span>
<div class="radio-group">
<label class="radio-item">
<input type="radio" v-model="showPackageName" :value="true" checked>
</label>
<label class="radio-item">
<input type="radio" v-model="showPackageName" :value="false">
</label>
</div>
<el-radio-group v-model="showPackageName" size="medium">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
</el-radio-group>
</div>
<div class="form-item">
<span class="form-label">生成服务费</span>
<div class="radio-group">
<label class="radio-item">
<input type="radio" v-model="generateServiceFee" :value="true" checked>
</label>
<label class="radio-item">
<input type="radio" v-model="generateServiceFee" :value="false">
</label>
</div>
<el-radio-group v-model="generateServiceFee" size="medium">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
</el-radio-group>
</div>
<div class="form-item">
<span class="form-label">套餐价格</span>
<div class="radio-group">
<label class="radio-item">
<input type="radio" v-model="enablePackagePrice" :value="true" checked> 启用
</label>
<label class="radio-item">
<input type="radio" v-model="enablePackagePrice" :value="false"> 不启用
</label>
</div>
<el-radio-group v-model="enablePackagePrice" size="medium">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">启用</el-radio>
</el-radio-group>
</div>
<div class="form-item">
@@ -702,6 +696,12 @@ import {
listInspectionType,
updateInspectionType
} from '@/api/system/inspectionType';
import {
getDiagnosisTreatmentList,
addDiagnosisTreatment,
editDiagnosisTreatment,
stopDiseaseTreatment
} from '@/views/catalog/diagnosistreatment/components/diagnosistreatment';
import {listLisGroup} from '@/api/system/checkType';
import {
addInspectionPackage,
@@ -709,7 +709,6 @@ import {
listInspectionPackageDetails,
saveInspectionPackageDetails
} from '@/api/system/inspectionPackage';
import {getDiagnosisTreatmentList} from '@/views/catalog/diagnosistreatment/components/diagnosistreatment';
import {getLocationTree} from '@/views/charge/outpatientregistration/components/outpatientregistration';
// 获取当前登录用户信息
@@ -848,6 +847,14 @@ function handleDepartmentChange(selectedNode, item) {
}
}
// 处理套餐级别选择变化
function handlePackageLevelChange(value) {
console.log('选择的套餐级别:', value);
if (value !== '科室套餐') {
department.value = '';
}
}
// 处理套餐科室选择变化
function handlePackageDepartmentChange(selectedNode) {
console.log('选择的套餐科室节点:', selectedNode);
@@ -915,24 +922,48 @@ const testTypes = ref([
{ value: '其他检验', label: '其他检验' }
]);
// 检验项目数据
const inspectionItems = ref([
{ id: 1, code: '0101', name: '血常规五分类', testType: '生化', package: '肝功能12项', sampleType: '血液', amount: 36.00, sortOrder: 1, serviceRange: '全部', sub医技Type: '', remark: '', status: true },
{ id: 2, code: '0102', name: '肝功能12项', testType: '生化', package: '肝功能12项', sampleType: '血液', amount: 120.00, sortOrder: 2, serviceRange: '全部', sub医技Type: '', remark: '', status: true },
{ id: 3, code: '0201', name: '尿常规', testType: '常规检验', package: '', sampleType: '尿液', amount: 25.00, sortOrder: 3, serviceRange: '全部', sub医技Type: '', remark: '', status: true },
{ id: 4, code: '0202', name: '便常规+潜血', testType: '常规检验', package: '', sampleType: '粪便', amount: 30.00, sortOrder: 4, serviceRange: '门诊', sub医技Type: '', remark: '', status: true },
{ id: 5, code: '0301', name: '乙肝五项', testType: '免疫学检验', package: '乙肝套餐', sampleType: '血液', amount: 75.00, sortOrder: 5, serviceRange: '全部', sub医技Type: '', remark: '', status: true },
{ id: 6, code: '0302', name: '丙肝抗体', testType: '免疫学检验', package: '', sampleType: '血液', amount: 45.00, sortOrder: 6, serviceRange: '住院', sub医技Type: '', remark: '', status: true },
{ id: 7, code: '0401', name: '血糖', testType: '生化', package: '糖尿病套餐', sampleType: '血液', amount: 15.00, sortOrder: 7, serviceRange: '全部', sub医技Type: '', remark: '', status: true },
{ id: 8, code: '0402', name: '糖化血红蛋白', testType: '生化', package: '糖尿病套餐', sampleType: '血液', amount: 50.00, sortOrder: 8, serviceRange: '全部', sub医技Type: '', remark: '', status: true },
{ id: 9, code: '0501', name: '肌酐', testType: '生化', package: '肾功能套餐', sampleType: '血液', amount: 25.00, sortOrder: 9, serviceRange: '住院', sub医技Type: '', remark: '', status: true },
{ id: 10, code: '0502', name: '尿素氮', testType: '生化', package: '肾功能套餐', sampleType: '血液', amount: 20.00, sortOrder: 10, serviceRange: '住院', sub医技Type: '', remark: '', status: true },
{ id: 11, code: '0601', name: '白带常规', testType: '常规检验', package: '', sampleType: '分泌物', amount: 30.00, sortOrder: 11, serviceRange: '门诊', sub医技Type: '', remark: '', status: true },
{ id: 12, code: '0602', name: '前列腺液常规', testType: '常规检验', package: '', sampleType: '分泌物', amount: 35.00, sortOrder: 12, serviceRange: '门诊', sub医技Type: '', remark: '', status: true },
{ id: 13, code: '0701', name: '脑脊液常规', testType: '常规检验', package: '', sampleType: '脑脊液', amount: 60.00, sortOrder: 13, serviceRange: '住院', sub医技Type: '', remark: '', status: true },
{ id: 14, code: '0801', name: '肿瘤标志物CA125', testType: '免疫学检验', package: '肿瘤筛查套餐', sampleType: '血液', amount: 120.00, sortOrder: 14, serviceRange: '体检', sub医技Type: '', remark: '', status: true },
{ id: 15, code: '0802', name: '肿瘤标志物AFP', testType: '免疫学检验', package: '肿瘤筛查套餐', sampleType: '血液', amount: 80.00, sortOrder: 15, serviceRange: '体检', sub医技Type: '', remark: '', status: true }
]);
// 检验项目数据 - 从后端API获取
const inspectionItems = ref([]);
// 从后端API获取检验项目数据
const loadObservationItems = async () => {
try {
const response = await getDiagnosisTreatmentList({
pageNo: 1,
pageSize: 100,
categoryCode: '检验'
});
if (response.code === 200) {
let data = [];
if (response.data && response.data.records) {
data = response.data.records;
} else if (response.data && Array.isArray(response.data)) {
data = response.data;
}
inspectionItems.value = data
// 过滤掉已停用的项目状态为3
.filter(item => item.statusEnum !== 3)
.map(item => ({
id: item.id,
code: item.busNo || '',
name: item.name || '',
testType: '',
package: '',
sampleType: item.specimenCode_dictText || '',
amount: parseFloat(item.retailPrice || 0),
sortOrder: item.sortOrder || null,
serviceRange: item.serviceRange || '全部',
sub医技Type: '',
remark: item.descriptionText || '',
status: true
}));
}
} catch (error) {
console.error('获取检验项目数据失败:', error);
}
};
// 过滤条件
const testTypeFilter = ref('');
@@ -973,6 +1004,11 @@ const resetFilters = () => {
// 套餐相关数据
const packageCategory = ref('检验套餐');
const packageLevel = ref('');
const packageLevelOptions = ref([
{ value: '全院套餐', label: '全院套餐' },
{ value: '科室套餐', label: '科室套餐' },
{ value: '个人套餐', label: '个人套餐' }
]);
const packageName = ref('');
const department = ref('');
const discount = ref('');
@@ -1545,7 +1581,7 @@ const updateAmountFromPackage = (item) => {
}
};
const saveItem = (item) => {
const saveItem = async (item) => {
// 验证必填字段
if (!item.code || item.code.trim() === '') {
ElMessage.error('小类编码不能为空');
@@ -1587,24 +1623,67 @@ const saveItem = (item) => {
// 从费用套餐获取金额
updateAmountFromPackage(item);
// 保存成功
editingRowId.value = null;
ElMessage.success('保存成功');
try {
// 准备提交给后端的数据
const submitData = {
busNo: item.code.trim(),
name: item.name.trim(),
categoryCode: '检验',
specimenCode: item.sampleType,
retailPrice: item.amount,
descriptionText: item.remark,
typeEnum: 1,
statusEnum: 2,
sortOrder: item.sortOrder ? parseInt(item.sortOrder) : null,
serviceRange: item.serviceRange || '全部'
};
// 判断是新增还是更新
if (typeof item.id === 'number') { // 临时ID数字类型新增
const response = await addDiagnosisTreatment(submitData);
if (response.code === 200) {
ElMessage.success('添加成功');
await loadObservationItems();
} else {
ElMessage.error(response.msg || '添加失败');
}
} else { // 真实ID字符串类型更新
submitData.id = item.id;
const response = await editDiagnosisTreatment(submitData);
if (response.code === 200) {
ElMessage.success('更新成功');
await loadObservationItems();
} else {
ElMessage.error(response.msg || '更新失败');
}
}
editingRowId.value = null;
} catch (error) {
console.error('保存检验项目失败:', error);
ElMessage.error('保存失败,请稍后重试');
}
};
const deleteItem = (id) => {
const deleteItem = async (id) => {
ElMessageBox.confirm('确定要删除该检验项目吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = inspectionItems.value.findIndex(item => item.id === id);
if (index !== -1) {
inspectionItems.value.splice(index, 1);
ElMessage.success('删除成功');
}).then(async () => {
try {
const response = await stopDiseaseTreatment([id]);
if (response.code === 200) {
ElMessage.success('删除成功');
await loadObservationItems();
} else {
ElMessage.error(response.msg || '删除失败');
}
} catch (error) {
console.error('删除检验项目失败:', error);
ElMessage.error('删除失败,请稍后重试');
}
}).catch(() => {
// 取消删除
});
};
@@ -1986,6 +2065,8 @@ const refreshPage = () => {
onMounted(() => {
getInspectionTypeList();
getLisGroupList();
// 加载检验项目数据
loadObservationItems();
// 加载检验套餐明细项目
loadPackageItemsFromAPI();
// 检查URL参数如果有tab参数则切换到对应导航项
@@ -2058,6 +2139,8 @@ watch(packageItems, (newVal) => {
flex: 1;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
max-width: 100%;
}
/* 页面标题 */
@@ -2407,6 +2490,8 @@ watch(packageItems, (newVal) => {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
padding: 16px;
margin-bottom: 16px;
max-width: 100%;
overflow-x: hidden;
}
.section-title {
@@ -2426,6 +2511,8 @@ watch(packageItems, (newVal) => {
.form-item {
display: flex;
align-items: center;
min-width: 0;
max-width: 100%;
}
.form-label {
@@ -2522,6 +2609,11 @@ watch(packageItems, (newVal) => {
border-radius: 4px;
padding: 0 8px;
font-size: 14px;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.form-control:focus {

View File

@@ -1144,6 +1144,7 @@ async function handleSave() {
remark: formData.remark || '',
createDate: formData.createDate,
items: detailData.value.map((item, index) => ({
// 基本字段(与检查套餐 CheckPackageDetail 对应)
itemCode: item.code || '',
itemName: item.itemName || '',
checkItemId: item.itemId || null,
@@ -1157,7 +1158,13 @@ async function handleSave() {
serviceCharge: parseFloat(item.serviceCharge) || 0,
total: parseFloat(item.total) || 0,
origin: item.origin || '',
orderNum: index + 1
orderNum: index + 1,
// 兼容字段(部分日志/历史代码使用的命名dosage/route/serviceFee/totalAmount
// 后端当前不会用到这些别名字段,但保留便于排查和兼容
dosage: item.dose || '',
route: item.method || '',
serviceFee: parseFloat(item.serviceCharge) || 0,
totalAmount: parseFloat(item.total) || 0
}))
}

View File

@@ -88,7 +88,6 @@
v-for="(item, index) in tableData"
:key="index"
:class="{ 'editing-row': item.editing, 'child-row': item.row.includes('.') }"
@click="handleEdit(index)"
>
<td>{{ item.row }}</td>
<td>
@@ -169,10 +168,13 @@
</template>
</td>
<td class="actions">
<template v-if="item.actions">
<template v-if="item.editing">
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
</button>
<button class="btn btn-cancel" @click.stop="handleCancelEdit(index)" title="取消">
</button>
<button
v-if="!item.row.includes('.')"
class="btn btn-add"
@@ -181,13 +183,18 @@
>
+
</button>
<button class="btn btn-delete" @click.stop="handleDelete(index)" title="删除">
</button>
</template>
<template v-else>
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
<button class="btn btn-edit" @click.stop="handleEdit(index)" title="修改">
</button>
<button
v-if="!item.row.includes('.')"
class="btn btn-add"
@click.stop="handleAdd(index)"
title="添加子项"
>
+
</button>
<button class="btn btn-delete" @click.stop="handleDelete(index)" title="删除">

View File

@@ -1,6 +1,6 @@
<template>
<div class="lis-group-maintain">
<!-- 标题区域 -->
<div class="header">
<h2>LIS分组维护</h2>
@@ -10,125 +10,128 @@
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th style="width: 50px;"></th>
<th style="width: 150px;">卫生机构</th>
<th style="width: 150px;">日期</th>
<th style="width: 200px;">LIS分组名称</th>
<th style="width: 120px;">采血管</th>
<th style="width: 300px;">备注</th>
<th style="width: 150px;">操作</th>
</tr>
<tr>
<th style="width: 50px;"></th>
<th style="width: 150px;">卫生机构</th>
<th style="width: 150px;">日期</th>
<th style="width: 200px;">LIS分组名称</th>
<th style="width: 120px;">采血管</th>
<th style="width: 300px;">备注</th>
<th style="width: 150px;">操作</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in tableData"
<tr
v-for="(item, index) in tableData"
:key="item.id || index"
:class="{ 'editing-row': item.editing }"
>
<td>{{ index + 1 }}</td>
<td>
<template v-if="item.editing">
<input
type="text"
v-model="item.healthInstitution"
placeholder="请输入卫生机构"
:class="{ 'error-input': item.errors?.healthInstitution }"
>
<span v-if="item.errors?.healthInstitution" class="error-message">{{ item.errors.healthInstitution }}</span>
:class="{ 'editing-row': item.editing, 'success-row': item.success, 'deleting-row': item.deleting }"
>
<td>{{ index + 1 }}</td>
<td>
<template v-if="item.editing">
<input
type="text"
v-model="item.healthInstitution"
disabled
>
</template>
<template v-else>
{{ item.healthInstitution }}
</template>
</td>
<td>
<template v-if="item.editing">
<input type="text" v-model="item.date" disabled>
</template>
<template v-else>
{{ item.date }}
</template>
</td>
<td>
<template v-if="item.editing">
<input
type="text"
v-model="item.lisGroupName"
placeholder="请输入分组名称"
:class="{ 'error-input': item.errors?.lisGroupName, 'focus-target': item.isNew }"
>
<span v-if="item.errors?.lisGroupName" class="error-message">{{ item.errors.lisGroupName }}</span>
</template>
<template v-else>
{{ item.lisGroupName }}
</template>
</td>
<td>
<template v-if="item.editing">
<select
v-model="item.bloodCollectionTube"
:class="{ 'error-input': item.errors?.bloodCollectionTube }"
>
<option value="">请选择采血管</option>
<option v-for="tube in bloodTubeOptions" :key="tube" :value="tube">
{{ tube }}
</option>
</select>
<span v-if="item.errors?.bloodCollectionTube" class="error-message">{{ item.errors.bloodCollectionTube }}</span>
</template>
<template v-else>
{{ item.bloodCollectionTube }}
</template>
</td>
<td>
<template v-if="item.editing">
<input type="text" v-model="item.remark" placeholder="请输入备注信息">
</template>
<template v-else>
{{ item.remark || '' }}
</template>
</td>
<td>
<div class="actions">
<template v-if="!item.editing">
<button class="btn btn-edit" @click="startEdit(item)"></button>
<button class="btn btn-primary" @click="addRow">+</button>
<button class="btn btn-delete" @click="deleteRow(index)">🗑</button>
</template>
<template v-else>
{{ item.healthInstitution }}
<button class="btn btn-confirm" @click="confirmEdit(item)"></button>
<button class="btn btn-cancel" @click="cancelEdit(item)">×</button>
</template>
</td>
<td>
<template v-if="item.editing">
<input type="text" v-model="item.date" disabled>
</template>
<template v-else>
{{ item.date }}
</template>
</td>
<td>
<template v-if="item.editing">
<input
type="text"
v-model="item.lisGroupName"
placeholder="请输入分组名称"
:class="{ 'error-input': item.errors?.lisGroupName }"
>
<span v-if="item.errors?.lisGroupName" class="error-message">{{ item.errors.lisGroupName }}</span>
</template>
<template v-else>
{{ item.lisGroupName }}
</template>
</td>
<td>
<template v-if="item.editing">
<select
v-model="item.bloodCollectionTube"
:class="{ 'error-input': item.errors?.bloodCollectionTube }"
>
<option value="">请选择采血管</option>
<option v-for="tube in bloodTubeOptions" :key="tube" :value="tube">
{{ tube }}
</option>
</select>
<span v-if="item.errors?.bloodCollectionTube" class="error-message">{{ item.errors.bloodCollectionTube }}</span>
</template>
<template v-else>
{{ item.bloodCollectionTube }}
</template>
</td>
<td>
<template v-if="item.editing">
<input type="text" v-model="item.remark" placeholder="请输入备注信息">
</template>
<template v-else>
{{ item.remark || '' }}
</template>
</td>
<td>
<div class="actions">
<template v-if="!item.editing">
<button class="btn btn-edit" @click="startEdit(item)"></button>
<button class="btn btn-primary" @click="addRow">+</button>
<button class="btn btn-delete" @click="deleteRow(index)">🗑</button>
</template>
<template v-else>
<button class="btn btn-confirm" @click="confirmEdit(item)"></button>
<button class="btn btn-cancel" @click="cancelEdit(item)">×</button>
</template>
</div>
</td>
</tr>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页区域 -->
<div class="pagination">
<button class="pagination-btn"></button>
<span>1</span>
<button class="pagination-btn"></button>
</div>
<div class="pagination">
<button class="pagination-btn" @click="prevPage" :disabled="currentPage <= 1"></button>
<span>{{ currentPage }}</span>
<button class="pagination-btn" @click="nextPage" :disabled="currentPage >= totalPages"></button>
</div>
</div>
</template>
<script>
import {computed, onMounted, reactive, ref} from 'vue'
import {computed, nextTick, onMounted, reactive, ref} from 'vue'
import {addLisGroup, delLisGroup, listLisGroup, updateLisGroup} from '@/api/system/checkType'
import {getDicts} from "@/api/system/dict/data";
import useUserStore from '@/store/modules/user';
import {ElMessage, ElMessageBox} from 'element-plus';
export default {
name: 'LisGroupMaintain',
setup() {
// 获取用户store
const userStore = useUserStore();
// 加载状态
const loading = ref(false)
// 采血管选项
const bloodTubeOptions = ref([]);
// 加载采血管颜色字典数据
const loadBloodTubeDict = async () => {
try {
@@ -138,22 +141,26 @@ export default {
bloodTubeOptions.value = response.data.map(item => item.label || item.dictLabel);
}
} catch (error) {
console.error('获取采血管颜色字典失败:', error);
// 如果字典获取失败,使用默认选项作为备选
bloodTubeOptions.value = ['黄管', '紫管', '蓝管'];
}
};
// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(2) // 总数据量,实际应用中应该从后端获取
// 总页数
const totalPages = computed(() => {
return Math.ceil(totalItems.value / pageSize.value)
})
// 获取当前用户的卫生机构名称
const getCurrentHospital = () => {
return userStore.hospitalName || userStore.orgName || '演示医院';
};
// 表格数据
const tableData = reactive([])
@@ -165,7 +172,7 @@ export default {
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
// 加载LIS分组数据
const loadLisGroups = async () => {
// 确保采血管字典数据已加载
@@ -174,217 +181,85 @@ export default {
}
try {
loading.value = true
// 构建查询参数
const query = {
pageNum: currentPage.value,
pageSize: pageSize.value
}
console.log('准备调用接口,查询参数:', query)
// 调用接口获取数据
// 注意根据checkType.js中的定义这个接口使用GET方法和params参数
const response = await listLisGroup(query)
console.log('接口返回结果类型:', typeof response)
console.log('接口返回结果:', response)
console.log('响应是否包含code字段:', response && 'code' in response)
console.log('响应是否包含data字段:', response && 'data' in response)
// 清空现有数据
tableData.splice(0, tableData.length)
totalItems.value = 0
// 适配可能的不同响应格式
let items = []
let total = 0
// 检查响应是否存在
if (response) {
// 处理标准响应格式
if (typeof response === 'object') {
// 检查是否是标准API响应格式 {code, data, msg}
if ('code' in response) {
console.log('响应包含code字段:', response.code)
// 成功状态码处理
if (response.code === 200 || response.code === '200' || response.code === 0) {
console.log('响应状态码为成功状态')
// 检查data字段
if ('data' in response) {
console.log('响应包含data字段数据类型:', typeof response.data)
// 格式1: {data: {rows: [], total: number}}
if (response.data && typeof response.data === 'object') {
// 处理双重嵌套格式 {data: {code, msg, data: []}}
if (response.data.data && (Array.isArray(response.data.data) || typeof response.data.data === 'object')) {
console.log('匹配到格式: 双重嵌套 data.data');
// 如果data.data是数组直接使用
if (Array.isArray(response.data.data)) {
items = response.data.data;
total = items.length;
console.log('双重嵌套格式1: data.data是数组数据量:', items.length);
}
// 如果data.data是对象检查是否有rows字段
else if (Array.isArray(response.data.data.rows)) {
items = response.data.data.rows;
total = response.data.data.total !== undefined ? response.data.data.total : items.length;
console.log('双重嵌套格式2: data.data包含rows数据量:', items.length, ',总数:', total);
}
}
// 标准格式检查
else if (Array.isArray(response.data.rows)) {
items = response.data.rows
total = response.data.total !== undefined ? response.data.total : items.length
console.log('匹配到格式1: response.data.rows数据量:', items.length, ',总数:', total)
}
// 格式2: {data: []}
else if (Array.isArray(response.data)) {
items = response.data
total = items.length
console.log('匹配到格式2: response.data直接是数组数据量:', items.length)
}
// 检查是否有其他可能的格式
else {
console.log('响应data不是预期格式详细数据:', response.data)
// 尝试将整个data对象作为单个条目处理有些API可能直接返回单个对象
if (response.data) {
items = [response.data]
total = 1
console.log('尝试将整个data对象作为单个条目处理')
}
}
}
} else {
console.log('响应不包含data字段')
}
} else {
// 非成功状态码
const errorMsg = response.msg || response.message || `请求失败,状态码: ${response.code}`
console.error('请求失败:', errorMsg)
showMessage(errorMsg, 'error')
}
}
// 格式3: 响应本身是一个对象但没有code字段可能是单个记录
else if (!Array.isArray(response)) {
console.log('响应是对象但没有code字段尝试作为单个记录处理')
items = [response]
total = 1
}
}
// 格式4: 响应本身是数组
if (Array.isArray(response)) {
items = response
total = items.length
console.log('匹配到格式4: 响应本身是数组,数据量:', items.length)
}
// 记录最终解析到的数据量
console.log('最终解析到的数据量:', items.length, ',总数:', total)
} else {
console.error('接口返回空数据')
showMessage('获取LIS分组数据失败服务器返回空响应', 'error')
}
// 处理获取到的数据
if (items && items.length > 0) {
// 处理每条数据,确保字段正确映射
items.forEach((item, index) => {
// 确保item是对象类型
if (typeof item === 'object' && item !== null) {
console.log(`处理记录 ${index + 1} 原始数据:`, item);
// 创建格式化后的对象,确保字段存在
// 根据网络响应截图更正字段映射关系
const formattedItem = {
id: item.id || `temp_${Date.now()}_${index}`, // 确保有ID
// 更正字段映射hospital -> healthInstitution
healthInstitution: item.hospital || item.org || item.healthInstitution || '',
// 优先使用date字段
date: item.date || item.createTime || item.createDate || '',
// 更正字段映射groupName -> lisGroupName
lisGroupName: item.groupName || item.name || item.lisGroupName || '',
// 更正字段映射tube -> bloodCollectionTube
bloodCollectionTube: item.tube || item.property || item.bloodCollectionTube || item.bloodTube || '',
remark: item.remark || item.note || '',
editing: false,
// 保留原始对象的所有其他属性
...item
};
tableData.push(formattedItem);
console.log(`处理记录 ${index + 1} 格式化后数据:`, {
id: formattedItem.id,
healthInstitution: formattedItem.healthInstitution,
date: formattedItem.date,
lisGroupName: formattedItem.lisGroupName,
bloodCollectionTube: formattedItem.bloodCollectionTube,
remark: formattedItem.remark
// 处理明确的数据结构
if (response && response.code === 200) {
// 清空现有数据
tableData.splice(0, tableData.length);
// 获取最内层的数据结构
const innerResponse = response.data;
if (innerResponse && innerResponse.code === 200) {
const data = innerResponse.data;
if (data && Array.isArray(data.records)) {
// 更新总记录数
totalItems.value = data.total || 0;
// 处理每条记录
data.records.forEach((item, index) => {
const formattedItem = {
id: item.id,
healthInstitution: item.hospital,
date: item.date,
lisGroupName: item.groupName,
bloodCollectionTube: item.tube,
remark: item.remark || '',
editing: false
};
tableData.push(formattedItem);
});
} else {
console.warn(`记录 ${index + 1} 不是有效对象,跳过处理:`, item);
totalItems.value = 0;
}
});
totalItems.value = total;
console.log('数据加载完成,表格显示', tableData.length, '条记录,总数:', totalItems.value);
} else {
totalItems.value = 0;
}
} else {
console.log('未获取到有效数据,表格为空');
// 非成功状态码
const errorMsg = response.msg || response.message || `请求失败,状态码: ${response.code}`
showMessage(errorMsg, 'error')
totalItems.value = 0;
}
} catch (error) {
// 详细的错误信息记录
console.error('加载LIS分组数据异常:', error)
// 提取更详细的错误信息
// 提取错误信息
let errorMessage = '加载LIS分组数据失败请稍后重试'
if (error.response) {
// 服务器响应了但状态码不是2xx
console.error('HTTP错误状态:', error.response.status)
console.error('HTTP错误响应体:', error.response.data)
if (error.response.data) {
errorMessage = error.response.data.msg ||
error.response.data.message ||
error.response.data.error ||
`服务器错误 (${error.response.status})`
errorMessage = error.response.data.msg ||
error.response.data.message ||
error.response.data.error ||
`服务器错误 (${error.response.status})`
} else {
errorMessage = `服务器错误 (${error.response.status})`
}
// 额外记录响应体详情便于调试
if (typeof error.response.data === 'object') {
console.error('响应体详细结构:', JSON.stringify(error.response.data, null, 2))
}
} else if (error.request) {
// 请求已发出,但未收到响应
console.error('请求已发送但未收到响应:', error.request)
errorMessage = '网络错误,服务器未响应,请检查网络连接'
} else if (error.message) {
// 请求配置出错
console.error('请求配置错误:', error.message)
errorMessage = error.message
} else {
console.error('未知错误类型:', typeof error)
}
// 显示错误信息
showMessage(errorMessage, 'error')
// 确保表格状态正确
console.log('异常处理后表格状态:', {
tableDataLength: tableData.length,
totalItems: totalItems.value,
currentPage: currentPage.value
})
} finally {
loading.value = false
console.log('数据加载操作完成loading状态已更新为false')
console.log('最终表格数据量:', tableData.length, ',总数:', totalItems.value)
}
}
@@ -398,53 +273,42 @@ export default {
// 验证数据
const validateData = (item) => {
const errors = {}
// 清除之前的错误信息
delete item.errors
// 验证卫生机构
if (!item.healthInstitution || item.healthInstitution.trim() === '') {
errors.healthInstitution = '卫生机构不能为空'
} else if (item.healthInstitution.length > 100) {
errors.healthInstitution = '卫生机构名称不能超过100个字符'
}
// 验证LIS分组名称
if (!item.lisGroupName || item.lisGroupName.trim() === '') {
errors.lisGroupName = 'LIS分组名称不能为空'
} else if (item.lisGroupName.length > 50) {
errors.lisGroupName = 'LIS分组名称不能超过50个字符'
}
// 验证采血管
if (!item.bloodCollectionTube) {
errors.bloodCollectionTube = '请选择采血管'
}
// 验证备注长度
if (item.remark && item.remark.length > 200) {
errors.remark = '备注信息不能超过200个字符'
}
if (Object.keys(errors).length > 0) {
item.errors = errors
return false
}
return true
}
// 显示提示信息
const showMessage = (message, type = 'success') => {
// 在实际项目中,这里可以使用Element Plus或其他UI库的消息组件
// 这里为了简单起见使用浏览器的alert但添加了类型标识
// 使用Element Plus的消息组件
if (type === 'error') {
console.error(message)
alert(`错误: ${message}`)
ElMessage.error(message)
} else {
console.log(message)
// 可以使用更友好的提示方式这里暂时注释掉alert以避免频繁弹窗
// alert(message)
ElMessage.success(message)
}
}
@@ -455,24 +319,24 @@ export default {
showMessage('请检查并修正错误信息', 'error')
return
}
// 检查是否有重复的分组名称(在同一个卫生机构内)
const duplicate = tableData.find(data =>
data.id !== item.id &&
data.healthInstitution === item.healthInstitution &&
data.lisGroupName === item.lisGroupName
const duplicate = tableData.find(data =>
data.id !== item.id &&
data.healthInstitution === item.healthInstitution &&
data.lisGroupName === item.lisGroupName
)
if (duplicate) {
if (!item.errors) item.errors = {}
item.errors.lisGroupName = '该分组名称已存在'
showMessage('分组名称重复,请修改', 'error')
return
}
try {
loading.value = true
// 准备提交数据(使用后端期望的字段名)
const submitData = {
id: item.id,
@@ -482,7 +346,7 @@ export default {
tube: item.bloodCollectionTube, // 前端字段映射到后端字段
remark: item.remark
}
let response
// 判断是新增还是修改
if (item.isNew) {
@@ -492,29 +356,35 @@ export default {
// 修改
response = await updateLisGroup(submitData)
}
// 处理响应
if (response.code === 200) {
// 保存编辑
item.editing = false
delete item.originalData
delete item.errors
// 先检查是否是新增记录再删除isNew属性
const isNewRecord = item.isNew
delete item.isNew
// 添加保存成功样式,包括新增记录
item.success = true
// 0.5秒后移除成功样式
setTimeout(() => {
item.success = false
}, 500)
showMessage('保存成功')
// 如果是新增,重新加载数据确保数据一致
if (isNewRecord) {
// 修改完成后重新请求后端本页数据确保数据准确
setTimeout(() => {
loadLisGroups()
}
}, 500)
} else {
showMessage(`保存失败: ${response.msg || '未知错误'}`, 'error')
}
} catch (error) {
console.error('保存LIS分组数据失败:', error)
showMessage(`保存失败: ${error.message || '未知错误'}`, 'error')
} finally {
loading.value = false
@@ -543,24 +413,25 @@ export default {
item.editing = false
}
} catch (error) {
console.error('取消编辑失败:', error)
showMessage('取消编辑失败', 'error')
}
}
// 添加新行
const addRow = () => {
const addRow = async () => {
// 检查是否已有正在编辑的行
const editingRow = tableData.find(item => item.editing)
if (editingRow) {
showMessage('请先完成当前行的编辑', 'error')
return
}
const newId = String(Math.max(...tableData.map(item => parseInt(item.id) || 0), 0) + 1)
// 从用户信息中获取当前卫生机构
const currentHospital = getCurrentHospital()
tableData.push({
id: newId,
healthInstitution: '', // 默认
id: '',
healthInstitution: currentHospital, // 默认当前操作工号的卫生机构
date: getCurrentDate(), // 默认当前系统时间
lisGroupName: '',
bloodCollectionTube: '',
@@ -569,8 +440,15 @@ export default {
errors: null,
isNew: true // 标记为新记录
})
showMessage('请填写新记录信息')
// 等待DOM更新后聚焦到第一个输入框
await nextTick()
const focusElement = document.querySelector('.focus-target')
if (focusElement) {
focusElement.focus()
// 清除focus-target类避免下次添加行时影响
focusElement.classList.remove('focus-target')
}
}
// 删除行
@@ -581,36 +459,66 @@ export default {
showMessage('请先完成或取消编辑', 'error')
return
}
if (confirm(`确定要删除"${item.lisGroupName}"这条记录吗?`)) {
try {
loading.value = true
// 如果是新添加的记录,直接从数组中移除
if (item.isNew) {
tableData.splice(index, 1)
showMessage('删除成功')
totalItems.value--
} else {
// 调用API删除
const response = await delLisGroup(item.id)
if (response.code === 200) {
tableData.splice(index, 1)
showMessage('删除成功')
// 更新总数
totalItems.value--
} else {
showMessage(`删除失败: ${response.msg || '未知错误'}`, 'error')
}
try {
// 使用Element Plus的确认对话框
await ElMessageBox.confirm(
`确定要删除"${item.lisGroupName}"这条记录吗?`,
'删除确认',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
loading.value = true
// 添加删除行标记,触发渐隐效果
item.deleting = true
// 等待300ms让渐隐效果完成
await new Promise(resolve => setTimeout(resolve, 300))
// 如果是新添加的记录,直接从数组中移除
if (item.isNew) {
tableData.splice(index, 1)
showMessage('删除成功')
totalItems.value--
} else {
// 调用API删除
const response = await delLisGroup(item.id)
if (response.code === 200) {
// 更新总数
totalItems.value--
// 检查当前页码是否仍然有效
const newTotalPages = Math.ceil(totalItems.value / pageSize.value)
if (currentPage.value > newTotalPages && newTotalPages > 0) {
// 如果当前页码大于总页数且总页数大于0调整为最后一页
currentPage.value = newTotalPages
}
// 重新加载当前页数据,保持页码不变
loadLisGroups()
showMessage('删除成功')
} else {
showMessage(`删除失败: ${response.msg || '未知错误'}`, 'error')
// 如果删除失败,移除删除标记
item.deleting = false
}
} catch (error) {
console.error('删除LIS分组数据失败:', error)
showMessage(`删除失败: ${error.message || '未知错误'}`, 'error')
} finally {
loading.value = false
}
} catch (error) {
if (error !== 'cancel') {
showMessage(`删除失败: ${error.message || '未知错误'}`, 'error')
// 如果删除失败,移除删除标记
if (tableData[index]) {
tableData[index].deleting = false
}
}
} finally {
loading.value = false
}
}
@@ -638,7 +546,7 @@ export default {
loadLisGroups()
}
}
// 组件挂载时加载数据
onMounted(() => {
// 加载采血管字典数据
@@ -680,7 +588,7 @@ export default {
align-items: center;
}
.header h1 {
.header h2 {
font-size: 18px;
font-weight: 500;
color: #333;
@@ -718,6 +626,12 @@ export default {
background-color: #f0f8ff;
}
/* 保存成功行样式 */
.success-row {
background-color: #f6ffed !important;
transition: background-color 0.3s ease;
}
.actions {
white-space: nowrap;
}
@@ -732,7 +646,7 @@ export default {
/* 分页样式 */
.pagination {
display: flex;
justify-content: flex-end;
justify-content: center;
align-items: center;
padding: 16px 0;
margin-top: 8px;
@@ -741,6 +655,14 @@ export default {
.pagination span {
font-size: 14px;
margin: 0 16px;
background-color: #1890FF;
color: white;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.pagination-btn {
@@ -946,33 +868,34 @@ input:disabled {
.lis-group-maintain {
padding: 10px;
}
.header h1 {
font-size: 16px;
}
.table-container {
border-radius: 0;
}
.data-table {
font-size: 12px;
min-width: 600px; /* 确保表格在小屏幕上可以横向滚动 */
border-collapse: collapse;
min-width: 768px; /* 确保表格在小屏幕上可以横向滚动 */
}
.data-table th,
.data-table td {
padding: 8px;
text-align: center;
}
.data-table td {
padding: 8px;
text-align: center;
}
.btn {
width: 20px;
height: 20px;
font-size: 11px;
margin-right: 2px;
}
.pagination-btn {
width: 28px;
height: 28px;
@@ -984,7 +907,16 @@ input:disabled {
/* 平滑过渡效果 */
.btn,
.pagination-btn,
.editing-row {
.editing-row,
tr {
transition: all 0.3s ease;
}
/* 删除行渐隐效果 */
.deleting-row {
opacity: 0;
height: 0;
overflow: hidden;
transition: all 0.3s ease;
}