389 lines
9.8 KiB
Vue
389 lines
9.8 KiB
Vue
<template>
|
||
<div class="hllcClass" @contextmenu.prevent>
|
||
<a-row>
|
||
<a-col :span="12" style="padding-top: 14px;">
|
||
{{ customerInfo.name }} - 护理流程展示
|
||
</a-col>
|
||
<a-col :span="12" style="text-align: right;">
|
||
<!-- <a-button type="primary" @click="handleFanhui">返回</a-button> -->
|
||
<!-- <a-button type="primary" @click="getData(customerInfo)">加载</a-button> -->
|
||
</a-col>
|
||
<a-col :span="24" style="margin-top:14px;">
|
||
<a-table :columns="columns" :data-source="dataSource" bordered size="small" :pagination="false"
|
||
:rowClassName="setRowClassName" :customRow="handleCustomRow" @contextmenu.prevent>
|
||
<template #bodyCell="{ column, record, text }">
|
||
<template v-if="column.key !== 'minute'">
|
||
<a-tooltip :title="text" placement="topLeft">
|
||
<span class="cell-text">{{ text }}</span>
|
||
</a-tooltip>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</a-col>
|
||
<!-- <a-col :span="24" style="text-align: center;">
|
||
<a-button type="primary" @click="handleSaveBach">保存</a-button>
|
||
</a-col> -->
|
||
</a-row>
|
||
|
||
<!-- 右键菜单 -->
|
||
<div v-if="contextMenu.visible" :style="{
|
||
position: 'fixed',
|
||
left: `${contextMenu.x}px`,
|
||
top: `${contextMenu.y}px`,
|
||
zIndex: 1000,
|
||
boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
|
||
}" class="context-menu">
|
||
<a-menu @click="handleMenuClick" style="padding: 14px;">
|
||
<a-menu-item key="add">新增数据</a-menu-item>
|
||
<a-menu-item key="edit" :disabled="!contextMenu.record?.[contextMenu.columnKey]">编辑数据</a-menu-item>
|
||
<a-menu-item key="delete" :disabled="!contextMenu.record?.[contextMenu.columnKey]">删除数据</a-menu-item>
|
||
</a-menu>
|
||
</div>
|
||
|
||
<!-- 数据操作模态框 -->
|
||
<a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="handleModalOk" @cancel="handleModalCancel">
|
||
<a-form :model="formState" layout="vertical" style="padding:14px;">
|
||
<a-form-item label="数据内容">
|
||
<a-input v-model:value="formState.content" />
|
||
</a-form-item>
|
||
<a-form-item label="备注">
|
||
<a-textarea v-model:value="formState.remark" />
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, defineExpose, computed } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
|
||
const emit = defineEmits(['register', 'success']);
|
||
const customerInfo = ref<any>({});
|
||
|
||
// 右键菜单状态
|
||
const contextMenu = reactive({
|
||
visible: false,
|
||
x: 0,
|
||
y: 0,
|
||
record: null as DataRow | null,
|
||
columnKey: '',
|
||
rowIndex: -1
|
||
});
|
||
|
||
// 模态框状态
|
||
const modalVisible = ref(false);
|
||
const modalAction = ref<'add' | 'edit' | 'delete'>('add');
|
||
const modalTitle = computed(() => {
|
||
return {
|
||
add: '新增数据',
|
||
edit: '编辑数据',
|
||
delete: '确认删除'
|
||
}[modalAction.value];
|
||
});
|
||
|
||
const formState = reactive({
|
||
content: '',
|
||
remark: ''
|
||
});
|
||
|
||
// 生成列（24小时）
|
||
const columns = [
|
||
{
|
||
title: '',
|
||
dataIndex: 'minute',
|
||
key: 'minute',
|
||
width: '50px',
|
||
fixed: 'left',
|
||
align: 'center',
|
||
}
|
||
];
|
||
|
||
// 添加小时列
|
||
for (let hour = 0; hour < 24; hour++) {
|
||
columns.push({
|
||
title: `${hour.toString().padStart(2, '0')}`,
|
||
dataIndex: `hour_${hour}`,
|
||
key: `hour_${hour}`,
|
||
width: 60,
|
||
align: 'center',
|
||
fixed: '',
|
||
customCell: (record: DataRow, rowIndex: number) => {
|
||
return {
|
||
onClick: () => handleCellClick(record, `hour_${hour}`, rowIndex, 'left'),
|
||
onContextmenu: (event: MouseEvent) => {
|
||
showContextMenu(event, record, `hour_${hour}`, rowIndex);
|
||
}
|
||
};
|
||
}
|
||
});
|
||
}
|
||
|
||
// 生成数据（每5分钟一行）
|
||
interface DataRow {
|
||
key: number;
|
||
minute: string;
|
||
remark?: string;
|
||
[key: `hour_${number}`]: string;
|
||
}
|
||
|
||
const dataSource = ref<DataRow[]>([]);
|
||
|
||
// 初始化数据
|
||
const initDataSource = () => {
|
||
const newData: DataRow[] = [];
|
||
for (let minute = 0; minute < 60; minute += 5) {
|
||
let row: DataRow = {
|
||
key: minute,
|
||
minute: `${minute.toString().padStart(2, '0')}分`
|
||
} as DataRow;
|
||
|
||
for (let hour = 0; hour < 24; hour++) {
|
||
row[`hour_${hour}`] = '';
|
||
}
|
||
|
||
newData.push(row);
|
||
}
|
||
dataSource.value = newData;
|
||
};
|
||
|
||
// 为奇数行添加斑马纹
|
||
function setRowClassName(record: DataRow, index: number) {
|
||
return index % 2 === 0 ? 'even-row' : 'odd-row';
|
||
}
|
||
|
||
// 初始化数据
|
||
initDataSource();
|
||
|
||
// 行点击事件处理
|
||
const handleCustomRow = (record: DataRow, index: number) => {
|
||
return {
|
||
onClick: () => handleRowClick(record, index),
|
||
onContextmenu: (event: MouseEvent) => {
|
||
event.preventDefault();
|
||
}
|
||
};
|
||
};
|
||
|
||
// 显示右键菜单
|
||
const showContextMenu = (event: MouseEvent, record: DataRow, columnKey: string, rowIndex: number) => {
|
||
// event.preventDefault();
|
||
|
||
// contextMenu.visible = true;
|
||
// contextMenu.x = event.clientX;
|
||
// contextMenu.y = event.clientY;
|
||
// contextMenu.record = record;
|
||
// contextMenu.columnKey = columnKey;
|
||
// contextMenu.rowIndex = rowIndex;
|
||
|
||
// // 点击其他地方关闭菜单
|
||
// const closeMenu = (e: MouseEvent) => {
|
||
// if (!(e.target as HTMLElement).closest('.context-menu')) {
|
||
// contextMenu.visible = false;
|
||
// document.removeEventListener('click', closeMenu);
|
||
// }
|
||
// };
|
||
|
||
// document.addEventListener('click', closeMenu);
|
||
};
|
||
|
||
// 菜单点击处理
|
||
const handleMenuClick = ({ key }: { key: string }) => {
|
||
const { record, columnKey } = contextMenu;
|
||
|
||
switch (key) {
|
||
case 'add':
|
||
modalAction.value = 'add';
|
||
formState.content = '';
|
||
formState.remark = '';
|
||
modalVisible.value = true;
|
||
break;
|
||
case 'edit':
|
||
if (record && columnKey) {
|
||
modalAction.value = 'edit';
|
||
formState.content = record[columnKey];
|
||
formState.remark = record.remark || '';
|
||
modalVisible.value = true;
|
||
}
|
||
break;
|
||
case 'delete':
|
||
modalAction.value = 'delete';
|
||
if (record && columnKey) {
|
||
formState.content = record[columnKey];
|
||
formState.remark = record.remark || '';
|
||
}
|
||
modalVisible.value = true;
|
||
break;
|
||
}
|
||
contextMenu.visible = false;
|
||
};
|
||
|
||
// 模态框确认
|
||
const handleModalOk = () => {
|
||
const { record, columnKey, rowIndex } = contextMenu;
|
||
|
||
if (!record || !columnKey || rowIndex === -1) return;
|
||
|
||
switch (modalAction.value) {
|
||
case 'add':
|
||
case 'edit':
|
||
if (!formState.content) {
|
||
message.warning('请输入数据内容');
|
||
return;
|
||
}
|
||
dataSource.value[rowIndex][columnKey] = formState.content;
|
||
dataSource.value[rowIndex].remark = formState.remark;
|
||
message.success(`数据${modalAction.value === 'add' ? '添加' : '更新'}成功`);
|
||
break;
|
||
case 'delete':
|
||
dataSource.value[rowIndex][columnKey] = '';
|
||
message.success('数据已删除');
|
||
break;
|
||
}
|
||
|
||
modalVisible.value = false;
|
||
};
|
||
|
||
// 模态框取消
|
||
const handleModalCancel = () => {
|
||
modalVisible.value = false;
|
||
};
|
||
|
||
// 行点击事件
|
||
function handleRowClick(record: DataRow, index: number) {
|
||
// 可添加行点击逻辑
|
||
}
|
||
|
||
// 单元格点击事件
|
||
function handleCellClick(record: DataRow, columnKey: string, rowIndex: number, buttonType: 'left' | 'right') {
|
||
// 可添加单元格点击逻辑
|
||
}
|
||
|
||
function handleFanhui() {
|
||
emit('success');
|
||
}
|
||
function getData(record: any) {
|
||
defHttp.get({
|
||
url: "/api/pad/care/directive/getNclist",
|
||
params: { nuId: record.nuId, elderId: record.id }
|
||
}).then((result) => {
|
||
console.log("获取到的数据:", result);
|
||
const data = result.serviceList
|
||
|
||
// 初始化数据源
|
||
initDataSource();
|
||
|
||
// 处理返回的数据
|
||
if (Array.isArray(data)) {
|
||
data.forEach((item) => {
|
||
const hour = parseInt(item.positioning);
|
||
|
||
// 处理该小时的所有子项
|
||
// 解析开始时间
|
||
const [startHour, startMinute] = item.startTime.split(':').map(Number);
|
||
const rowIndex = Math.floor(startMinute / 5); // 每5分钟一行
|
||
|
||
// 确保行索引在有效范围内
|
||
if (rowIndex >= 0 && rowIndex < dataSource.value.length) {
|
||
// 构建显示内容
|
||
const content = [
|
||
item.directiveName,
|
||
item.typeName,
|
||
item.categoryName,
|
||
item.tagName,
|
||
item.cycleType,
|
||
item.startTime,
|
||
item.endTime,
|
||
].filter(Boolean).join(' / ');
|
||
|
||
// 更新对应单元格
|
||
dataSource.value[rowIndex][`hour_${hour}`] = content;
|
||
|
||
}
|
||
});
|
||
console.log('12321312331', dataSource.value)
|
||
}
|
||
});
|
||
}
|
||
|
||
function handleSaveBach() {
|
||
console.log("🚀 ~ handleSaveBach ~ dataSource:", dataSource)
|
||
}
|
||
|
||
function init(record: any) {
|
||
customerInfo.value = record;
|
||
console.log("初始化数据:", record);
|
||
getData(record)
|
||
}
|
||
|
||
defineExpose({
|
||
init
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.hllcClass {
|
||
background: white;
|
||
width: 100%;
|
||
height: calc(100vh - 90px);
|
||
padding: 14px;
|
||
border-radius: 8px;
|
||
position: relative;
|
||
}
|
||
|
||
/* 斑马纹样式 */
|
||
:deep(.ant-table) {
|
||
.even-row {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.odd-row {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
/* 单元格悬停效果 */
|
||
.ant-table-tbody>tr>td {
|
||
&:hover {
|
||
background-color: #e6f7ff !important;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
/* 有数据的单元格样式 */
|
||
.has-data {
|
||
background-color: #f6ffed;
|
||
}
|
||
}
|
||
|
||
/* 右键菜单样式 */
|
||
.context-menu {
|
||
background: white;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
|
||
.ant-menu {
|
||
border-right: none;
|
||
}
|
||
|
||
.ant-menu-item {
|
||
margin: 0;
|
||
padding: 5px 12px;
|
||
}
|
||
}
|
||
|
||
.cell-text {
|
||
// display: inline-block;
|
||
// max-width: 50px;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
// white-space: nowrap;
|
||
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/* 限制文本为2行 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style> |