wangyizhe/his
1
3
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

refactor(ui): 优化页面布局和表格组件

Browse Source 
- 将多个页面的固定高度样式改为flex布局，提升响应式体验
- 替换菜单管理页面的vxe-table为el-table组件以统一技术栈
- 为菜单名称添加图标标识区分不同菜单类型
- 调整表单和表格容器的尺寸计算方式，支持自适应高度
- 优化滚动和溢出处理，改善页面渲染性能
- 修复部分组件的样式和数据绑定问题
This commit is contained in:
chenqi
2026-06-15 09:25:29 +08:00
parent e877dfd259
commit 6ca467a81a
11 changed files with 115 additions and 3480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

566
.idea/shelf/在进行更新之前于_2026_6_5_16_37_取消提交了更改_[更改]/shelved.patch generated
View File

File diff suppressed because one or more lines are too long

566
.idea/shelf/在进行更新之前于_2026_6_6_07_53_取消提交了更改_[更改]/shelved.patch generated
View File

File diff suppressed because one or more lines are too long

566
.idea/shelf/在进行更新之前于_2026_6_6_07_58_取消提交了更改_[更改]/shelved.patch generated
View File

File diff suppressed because one or more lines are too long

566
.idea/shelf/在进行更新之前于_2026_6_6_09_03_取消提交了更改_[更改]/shelved.patch generated
View File

File diff suppressed because one or more lines are too long

566
.idea/shelf/在进行更新之前于_2026_6_6_09_07_取消提交了更改_[更改]/shelved.patch generated
View File

File diff suppressed because one or more lines are too long

566
.idea/shelf/在进行更新之前于_2026_6_6_09_17_取消提交了更改_[更改]/shelved.patch generated
View File

File diff suppressed because one or more lines are too long

19
healthlink-his-ui/src/views/clinicmanagement/infusionrecord/index.vue
View File

@@ -1,4 +1,4 @@
<template>
<template>
<div class="app-container">
<div class="left">
<el-form
@@ -147,7 +147,7 @@
ref="tableRef"
:data="infusionList"
border
style="width: 100%; height: 300px"
style="width: 100%; flex: 1; min-height: 0"
@checkbox-change="handleSelectionChange"
@cell-click="handleRowClick"
>
@@ -231,7 +231,7 @@
<vxe-table
:data="historyRecordsList"
border
style="width: 100%; height: 300px"
style="width: 100%; flex: 1; min-height: 0"
>
<vxe-column
field="occurrenceEndTime"
@@ -670,15 +670,24 @@ getList();
.app-container {
padding: 20px;
display: flex;
height: calc(100vh - 84px);
overflow: hidden;
}
.left {
width: 28%;
min-width: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.right {
margin-left: 2%;
width: 70%;
margin-left: 12px;
flex: 1;
min-width: 0;
overflow: auto;
}
:deep(.vxe-table tbody tr:hover > td) {

16
healthlink-his-ui/src/views/clinicmanagement/requisition/index.vue
View File

@@ -60,12 +60,13 @@
</el-form>
<!-- 表格 -->
<div class="table-wrapper">
<vxe-table
ref="tableRef"
v-loading="loading"
:data="tableData"
border
max-height="calc(100vh - 280px)"
height="100%"
>
<vxe-column field="formNo" title="申请单号" align="center" width="180" show-overflow />
<vxe-column field="patientName" title="患者姓名" align="center" width="110" />
@@ -106,6 +107,7 @@
</template>
</vxe-column>
</vxe-table>
</div>
<pagination
v-show="total > 0"
@@ -244,6 +246,18 @@ getListData()
</script>
<style lang="scss" scoped>
.app-container {
display: flex;
flex-direction: column;
height: calc(100vh - 84px);
overflow: hidden;
}
.table-wrapper {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.detail-content {
.item-list {
margin-top: 16px;

40
healthlink-his-ui/src/views/drug/inpatientMedicationDispensing/components/MedicationDetails.vue
View File

@@ -8,7 +8,7 @@
:model="queryParams"
:inline="true"
label-position="right"
style="min-width: 500px"
>
<el-form-item
label="患者信息"
@@ -70,7 +70,7 @@
<vxe-table
:row-config="{ isCurrent: true }" :data="patientList"
border
style="width: 100%; height: 60vh"
style="width: 100%; flex: 1; min-height: 0"
@cell-click="handleCurrentChange"
>
<vxe-column
@@ -176,7 +176,7 @@
v-loading="loading"
:data="medicineInfoList"
border
style="width: 100%; height: 65vh; margin-top: 10px"
style="width: 100%; flex: 1; min-height: 0; margin-top: 10px"
:span-method="spanMethod"
@select="handleSelectionChange"
@cell-dblclick="handleCellDbClick"
@@ -1191,21 +1191,33 @@ function handleCancel() {
.app-container {
padding: 20px;
display: flex;
height: calc(100vh - 84px);
overflow: hidden;
}
.left {
width: 25%;
min-width: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
.form {
width: 100%;
display: flex;
justify-content: space-between;
flex-shrink: 0;
flex-wrap: wrap;
gap: 8px;
}
}
.right {
margin-left: 2%;
width: 74%;
margin-left: 12px;
flex: 1;
min-width: 0;
overflow: auto;
}
:deep(.vxe-table tbody tr:hover > td) {
@@ -1248,25 +1260,7 @@ function handleCancel() {
}
/* 其他已有样式保持不变 */
.app-container {
padding: 20px;
display: flex;
}
.left {
width: 25%;
}
.form {
width: 100%;
display: flex;
justify-content: space-between;
}
.right {
margin-left: 2%;
width: 74%;
}
:deep(.vxe-table tbody tr:hover > td) {
background-color: inherit !important;

22
healthlink-his-ui/src/views/pharmacymanagement/westernmedicine/index.vue
View File

@@ -8,7 +8,7 @@
:model="queryParams"
:inline="true"
label-position="right"
style="min-width: 500px"
>
<el-form-item
label="患者信息"
@@ -86,7 +86,7 @@
<vxe-table
:row-config="{ isCurrent: true }" :data="patientList"
border
style="width: 100%; height: 60vh"
style="width: 100%; flex: 1; min-height: 0"
@cell-click="handleCurrentChange"
>
<vxe-column
@@ -283,7 +283,7 @@
v-loading="loading"
:data="medicineInfoList"
border
style="width: 100%; height: 65vh; margin-top: 10px"
style="width: 100%; flex: 1; min-height: 0; margin-top: 10px"
:span-method="spanMethod"
:cell-class-name="cellClassName"
@select="handleSelectionChange"
@@ -1485,21 +1485,33 @@ function validate() {
.app-container {
padding: 20px;
display: flex;
height: calc(100vh - 84px);
overflow: hidden;
}
.left {
width: 25%;
min-width: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
.form {
width: 100%;
display: flex;
justify-content: space-between;
flex-shrink: 0;
flex-wrap: wrap;
gap: 8px;
}
}
.right {
margin-left: 2%;
width: 74%;
margin-left: 12px;
flex: 1;
min-width: 0;
overflow: auto;
}
/* 表格文字颜色改为纯黑色 */

102
healthlink-his-ui/src/views/system/menu/index.vue
View File

@@ -1,4 +1,4 @@
<template>
<template>
<div class="app-container">
<el-form
v-show="showSearch"
@@ -103,23 +103,24 @@
/>
</el-row>
<vxe-table
v-if="refreshTable"
v-loading="loading"
<el-table v-if="refreshTable" ref="menuTableRef" v-loading="loading"
:data="menuList"
:row-config="{ keyField: 'menuId' }"
row-key="menuId"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<vxe-column
field="menuName"
<el-table-column
prop="menuName"
title="菜单名称"
:show-overflow="true"
show-overflow-tooltip
width="160"
>
<template #default="scope">
<span v-if="scope.row.menuType === 'M'" style="font-weight: 600; font-size: 14px;">
📁 {{ scope.row.menuName }}
</span>
<span
v-if="scope.row.menuType === 'C'"
v-else-if="scope.row.menuType === 'C'"
class="menu-name-link"
:title="`点击跳转到${scope.row.menuName}模块`"
style="cursor: pointer; color: #3B82F6;"
@@ -127,86 +128,84 @@
>
{{ scope.row.menuName }}
</span>
<span v-else>{{ scope.row.menuName }}</span>
<span v-else style="color: #909399;">
⚙️ {{ scope.row.menuName }}
</span>
</template>
</vxe-column>
<vxe-column
field="icon"
</el-table-column>
<el-table-column
prop="icon"
title="图标"
align="center"
width="100"
>
<template #default="scope">
<svg-icon :icon-class="scope.row.icon" />
<svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon" />
</template>
</vxe-column>
<vxe-column
field="orderNum"
</el-table-column>
<el-table-column
prop="orderNum"
title="排序"
width="60"
/>
<vxe-column
field="perms"
<el-table-column
prop="perms"
title="权限标识"
:show-overflow="true"
show-overflow-tooltip
/>
<vxe-column
field="path"
<el-table-column
prop="path"
title="路由地址"
:show-overflow="true"
show-overflow-tooltip
/>
<vxe-column
field="fullPath"
<el-table-column
prop="fullPath"
title="完整路径"
:show-overflow="true"
show-overflow-tooltip
>
<template #default="scope">
<span v-if="scope.row.fullPath">{{ scope.row.fullPath }}</span>
<span v-else-if="scope.row.path">{{ scope.row.path }}</span>
</template>
</vxe-column>
<vxe-column
field="component"
</el-table-column>
<el-table-column
prop="component"
title="组件路径"
:show-overflow="true"
show-overflow-tooltip
/>
<vxe-column
field="status"
<el-table-column
prop="status"
title="状态"
width="80"
>
<template #default="scope">
<dict-tag
:options="processedSysNormalDisable"
:value="scope.row.status"
<dict-tag v-if="scope.row.status !== null && scope.row.status !== undefined" :options="processedSysNormalDisable" :value="scope.row.status"
class="dict-tag"
/>
</template>
</vxe-column>
<vxe-column
field="visible"
</el-table-column>
<el-table-column
prop="visible"
title="显示状态"
width="100"
>
<template #default="scope">
<dict-tag
:options="processedSysShowHide"
:value="scope.row.visible"
<dict-tag v-if="scope.row.visible !== null && scope.row.visible !== undefined" :options="processedSysShowHide" :value="scope.row.visible"
class="dict-tag"
/>
</template>
</vxe-column>
<vxe-column
</el-table-column>
<el-table-column
title="创建时间"
align="center"
width="160"
field="createTime"
prop="createTime"
>
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</vxe-column>
<vxe-column
</el-table-column>
<el-table-column
title="操作"
align="center"
width="210"
@@ -244,8 +243,8 @@
删除
</el-button>
</template>
</vxe-column>
</vxe-table>
</el-table-column>
</el-table>
<!-- 添加或修改菜单对话框 -->
<el-dialog
@@ -613,7 +612,7 @@ const title = ref("");
const menuOptions = ref([]);
const isExpandAll = ref(false);
const refreshTable = ref(true);
const iconSelectRef = ref(null);
const iconSelectRef = ref(null);const menuTableRef = ref(null);
const data = reactive({
form: {},
@@ -739,8 +738,8 @@ async function handleAdd(row) {
}
/** 展开/折叠操作 */
function toggleExpandAll() {
refreshTable.value = false;
isExpandAll.value = !isExpandAll.value;
refreshTable.value = false;
nextTick(() => {
refreshTable.value = true;
});
@@ -879,4 +878,7 @@ getList();
.menu-name-link:hover {
text-decoration: underline;
}
:deep(.el-table__row) {
cursor: pointer;
}
</style>