chenqi
abc0674531
docs(release-notes): 添加住院护士站划价功能说明和发版记录 - 新增住院护士站划价服务流程说明文档，详细描述了从参数预处理到结果响应的五大阶段流程 - 包含耗材类医嘱和诊疗活动类医嘱的差异化处理逻辑 - 添加完整的发版内容记录，涵盖新增菜单功能和各模块优化点 - 记录了住院相关功能的新增和门诊业务流程的修复 ```
359 lines
12 KiB
Vue
359 lines
12 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row :gutter="20">
|
||
<!--药品目录-->
|
||
<el-col :span="4" :xs="24">
|
||
<div class="head-container">
|
||
<div class="head-title">医保目录</div>
|
||
<el-tree
|
||
:data="medicationOptions"
|
||
:props="{
|
||
label: 'info',
|
||
children: 'children',
|
||
}"
|
||
:expand-on-click-node="false"
|
||
:filter-node-method="filterNode"
|
||
ref="medicationTreeRef"
|
||
node-key="value"
|
||
highlight-current
|
||
default-expand-all
|
||
@node-click="handleNodeClick"
|
||
current-node-key="1301"
|
||
:default-expand-all="true"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span :class="{ 'text-light-gray': !data.available }">
|
||
{{ data.info }}
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
</el-col>
|
||
<!--药品目录-->
|
||
<el-col :span="20" :xs="24">
|
||
<el-row :gutter="10" class="mb8" style="margin-bottom: 20px">
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryRef"
|
||
:inline="true"
|
||
v-show="showSearch"
|
||
label-width="68px"
|
||
style="display: flex; align-items: center; margin: 0"
|
||
>
|
||
<el-form-item
|
||
label="搜索"
|
||
prop="searchKey"
|
||
label-width="40"
|
||
style="margin: 0; margin-right: 10px"
|
||
>
|
||
<el-input
|
||
v-model="queryParams.searchKey"
|
||
:placeholder="searchPlaceholder"
|
||
clearable
|
||
style="width: 400px"
|
||
@keyup.enter="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
label="版本号"
|
||
prop="versionNumber"
|
||
label-width="80"
|
||
style="margin: 0; margin-right: 10px"
|
||
>
|
||
<el-input
|
||
v-model="queryParams.v"
|
||
placeholder="版本号"
|
||
clearable
|
||
style="width: 240px"
|
||
@keyup.enter="handleQuery"
|
||
disabled
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item style="margin: 0 10px">
|
||
<el-button type="primary" plain icon="Search" @click="getList">查询</el-button>
|
||
</el-form-item>
|
||
|
||
<el-form-item style="margin: 0 10px">
|
||
<el-button type="primary" plain icon="Search" @click="handleUpdateCatalog"
|
||
>更新目录</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" :data="medicationList" style="width: 100%" height="70vh">
|
||
<template v-for="(column, index) in currentColumns" :key="index">
|
||
<el-table-column
|
||
:prop="column.prop"
|
||
:label="column.label"
|
||
:min-width="calculateColumnWidth(column)"
|
||
:show-overflow-tooltip="true"
|
||
align="center"
|
||
>
|
||
<template #default="scope">
|
||
<template v-if="column.type === 'tag'">
|
||
<el-tag v-if="scope.row[column.prop.split('_')[0]] == 2" type="success">
|
||
{{ scope.row[column.prop] }}
|
||
</el-tag>
|
||
<el-tag v-else type="error">{{ scope.row[column.prop] }}</el-tag>
|
||
</template>
|
||
<template v-else>
|
||
{{
|
||
scope.row[column.prop] === null ||
|
||
scope.row[column.prop] === '' ||
|
||
scope.row[column.prop] === undefined ||
|
||
scope.row[column.prop] === 'null'
|
||
? '--'
|
||
: scope.row[column.prop]
|
||
}}
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
v-model:page="queryParams.pageNo"
|
||
v-model:limit="queryParams.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@pagination="getList"
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="Medication">
|
||
import { getYbCatalogResult, getYbCatalog } from './components/medicine';
|
||
//字段配置文件
|
||
import { catalogFieldConfigs } from './components/catalogFields';
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
|
||
const medicationList = ref([]);
|
||
const loading = ref(true);
|
||
const showSearch = ref(true);
|
||
const total = ref(0);
|
||
const medicationOptions = ref(undefined);
|
||
const currentCategoryEnum = ref('1301'); // 默认选中1301
|
||
const medicationTreeRef = ref(null); // 医保目录树引用
|
||
const currentColumns = ref([]); // 表格列配置
|
||
const searchPlaceholder = ref('医疗目录编码/注册名称/批准文号/唯一记录号'); // 默认搜索提示
|
||
// 定义有数据的catalogType值
|
||
const availableCatalogTypes = ['1301', '1302', '1305', '1306', '1307', '1308', '1314', '1315'];
|
||
|
||
const data = reactive({
|
||
form: {},
|
||
queryParams: {
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
searchKey: undefined, // 搜索关键词（医疗目录编码/注册名称/批准文号/唯一记录号）
|
||
catalogType: '1301', // 默认使用有数据的目录类型1301
|
||
v: '0', // 版本号
|
||
},
|
||
});
|
||
|
||
const { queryParams } = toRefs(data);
|
||
|
||
/** 通过条件过滤节点 */
|
||
const filterNode = (value, data) => {
|
||
if (!value) return true;
|
||
return data.info.indexOf(value) !== -1;
|
||
};
|
||
|
||
/** 病种目录分类查询下拉树结构 - 使用前端写死的数据 */
|
||
function getMedicationCategoryList() {
|
||
// 直接使用CatalogType枚举值，并为每个选项添加available属性
|
||
const catalogTypeOptions = [
|
||
{ info: '西药中成药目录', value: '1301', available: true },
|
||
{ info: '中药饮片目录', value: '1302', available: true },
|
||
{ info: '医疗机构制剂目录', value: '1303', available: false },
|
||
{ info: '民族药品目录', value: '1304', available: false },
|
||
{ info: '医疗服务项目目录', value: '1305', available: true },
|
||
{ info: '医用耗材目录', value: '1306', available: true },
|
||
{ info: '疾病与诊断目录', value: '1307', available: true },
|
||
{ info: '手术操作目录', value: '1308', available: true },
|
||
{ info: '门诊慢特病种目录', value: '1309', available: false },
|
||
{ info: '按病种付费病种目录', value: '1310', available: false },
|
||
{ info: '日间手术治疗病种', value: '1311', available: false },
|
||
{ info: '医保目录信息查询', value: '1312', available: false },
|
||
{ info: '肿瘤形态学目录', value: '1313', available: false },
|
||
{ info: '中医疾病目录', value: '1314', available: true },
|
||
{ info: '中医证候目录', value: '1315', available: true },
|
||
{ info: '医疗目录与医保目录匹配信息', value: '1316', available: false },
|
||
{ info: '医药机构目录匹配信息', value: '1317', available: false },
|
||
{ info: '医保目录限价信息', value: '1318', available: false },
|
||
{ info: '医保目录先自付比例信息', value: '1319', available: false },
|
||
{ info: '中药配方颗粒目录', value: '1320', available: false },
|
||
{ info: '医疗服务项目（新）目录', value: '1321', available: false },
|
||
];
|
||
|
||
medicationOptions.value = catalogTypeOptions;
|
||
// 添加全部选项，但设为不可用
|
||
medicationOptions.value.unshift({ info: '全部', value: '', available: false });
|
||
|
||
// 确保默认选中1301
|
||
setTimeout(() => {
|
||
if (medicationTreeRef.value) {
|
||
medicationTreeRef.value.setCurrentKey('1301');
|
||
}
|
||
}, 0);
|
||
}
|
||
/** 查询病种目录列表 */
|
||
function handleUpdateCatalog() {
|
||
// proxy.$message.success('暂未实现目录更新功能');
|
||
// loading.value = true;
|
||
// 版本号默认传0
|
||
getYbCatalog(queryParams.value.catalogType, '0').then((res) => {
|
||
// loading.value = false;
|
||
if (res && res.data) {
|
||
proxy.$message.success('目录更新成功');
|
||
}
|
||
});
|
||
}
|
||
|
||
/** 查询病种目录列表 */
|
||
function getList() {
|
||
loading.value = true;
|
||
getYbCatalogResult(queryParams.value).then((res) => {
|
||
loading.value = false;
|
||
if (res && res.data.data && res.data.data.records) {
|
||
medicationList.value = res.data.data.records;
|
||
total.value = res.data.data.total || res.data.total || medicationList.value.length;
|
||
}
|
||
// 默认空数据
|
||
else {
|
||
medicationList.value = [];
|
||
total.value = 0;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 医保目录节点点击事件
|
||
function handleNodeClick(data) {
|
||
if (data.available) {
|
||
queryParams.value.catalogType = data.value;
|
||
currentCategoryEnum.value = data.value;
|
||
// 切换目录类型时清空搜索框的值
|
||
queryParams.value.searchKey = undefined;
|
||
// 动态设置表格列配置
|
||
if (catalogFieldConfigs[data.value]) {
|
||
console.log('catalogFieldConfigs[data.value]', catalogFieldConfigs[data.value]);
|
||
currentColumns.value = catalogFieldConfigs[data.value].columns;
|
||
} else {
|
||
currentColumns.value = []; // 无配置时显示空列
|
||
}
|
||
// 根据当前目录类型设置搜索提示
|
||
setSearchPlaceholder(data.value);
|
||
|
||
handleQuery();
|
||
}
|
||
}
|
||
|
||
/** 根据目录类型设置搜索提示 */
|
||
function setSearchPlaceholder(catalogType) {
|
||
switch (catalogType) {
|
||
case '1301': // 西药中成药目录
|
||
searchPlaceholder.value = '医疗目录编码/注册名称/批准文号/唯一记录号';
|
||
break;
|
||
case '1302': // 中药饮片目录
|
||
searchPlaceholder.value = '医疗服务名称/唯一记录号';
|
||
break;
|
||
case '1305': // 医疗服务目录
|
||
searchPlaceholder.value = '医疗目录编码/医疗服务名称/唯一记录号';
|
||
break;
|
||
case '1306': // 医用耗材目录
|
||
searchPlaceholder.value = '医疗目录编码/耗材名称/耗材类别/材质类型/规格';
|
||
break;
|
||
case '1307': // 疾病与诊断目录
|
||
searchPlaceholder.value = '分类名称/子分类名称/章名称/节名称';
|
||
break;
|
||
case '1308': // 手术标准目录
|
||
searchPlaceholder.value = '分类名称/子分类名称/项目名称/手术名称/手术代码';
|
||
break;
|
||
case '1314': // 中医疾病目录
|
||
searchPlaceholder.value = '疾病分类名称/疾病分类代码/唯一记录号';
|
||
break;
|
||
case '1315': // 中医证候目录
|
||
searchPlaceholder.value = '证候类型代码/证候类型名称/唯一记录号';
|
||
break;
|
||
default:
|
||
searchPlaceholder.value = '请输入搜索关键词';
|
||
}
|
||
}
|
||
// 初始化时设置默认列配置和搜索提示
|
||
function initColumns() {
|
||
const defaultType = '1301'; // 默认目录类型
|
||
if (catalogFieldConfigs[defaultType]) {
|
||
currentColumns.value = catalogFieldConfigs[defaultType].columns;
|
||
}
|
||
// 设置默认搜索提示
|
||
setSearchPlaceholder(defaultType);
|
||
}
|
||
|
||
// 计算列宽度函数
|
||
function calculateColumnWidth(column) {
|
||
const baseWidth = 40; // 增加基础边距宽度
|
||
const charWidth = 16; // 增加每个字符的平均宽度，确保中文能更好地显示
|
||
const textLength = column.label ? column.label.length : 0;
|
||
const calculatedWidth = baseWidth + textLength * charWidth;
|
||
|
||
// 设置最小宽度，确保即使短文本也有良好的显示效果
|
||
const minWidth = 120;
|
||
|
||
return Math.max(calculatedWidth, minWidth);
|
||
}
|
||
|
||
// 在组件挂载时初始化
|
||
initColumns();
|
||
|
||
/** 搜索按钮操作 */
|
||
function handleQuery() {
|
||
queryParams.value.pageNo = 1;
|
||
getList();
|
||
}
|
||
|
||
getMedicationCategoryList();
|
||
getList();
|
||
</script>
|
||
<style scoped>
|
||
.el-form--inline .el-form-item {
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
margin-right: 10px !important;
|
||
}
|
||
.el-select {
|
||
width: 150px !important;
|
||
}
|
||
|
||
/* 确保表格内容完整显示 */
|
||
.el-table {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* 调整表格列样式，允许内容更好地显示 */
|
||
.el-table__cell {
|
||
padding: 12px 8px;
|
||
}
|
||
|
||
/* 确保分页组件完整显示 */
|
||
.pagination-container {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 自定义样式：使不可用的目录类型文字颜色变浅 */
|
||
.text-light-gray {
|
||
color: #c0c4cc !important;
|
||
}
|
||
|
||
/* 确保样式能正确应用到树节点 */
|
||
:deep(.el-tree-node__label) {
|
||
transition: color 0.3s;
|
||
}
|
||
</style>
|