930 lines
23 KiB
Vue
930 lines
23 KiB
Vue
<template>
|
||
<div class="lis-group-maintain">
|
||
|
||
<!-- 标题区域 -->
|
||
<div class="header">
|
||
<h2>LIS分组维护</h2>
|
||
</div>
|
||
|
||
<!-- 表格展示区域 -->
|
||
<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>
|
||
</thead>
|
||
<tbody>
|
||
<tr
|
||
v-for="(item, index) in tableData"
|
||
:key="item.id || index"
|
||
: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>
|
||
<button class="btn btn-confirm" @click="confirmEdit(item)">√</button>
|
||
<button class="btn btn-cancel" @click="cancelEdit(item)">×</button>
|
||
</template>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</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, 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 {
|
||
const response = await getDicts('test_the_color_of_the_blood_collection_tube');
|
||
if (response.code === 200 && response.data) {
|
||
// 根据实际返回数据格式调整
|
||
bloodTubeOptions.value = response.data.map(item => item.label || item.dictLabel);
|
||
}
|
||
} catch (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([])
|
||
|
||
// 获取当前日期
|
||
const getCurrentDate = () => {
|
||
const date = new Date()
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
|
||
// 加载LIS分组数据
|
||
const loadLisGroups = async () => {
|
||
// 确保采血管字典数据已加载
|
||
if (bloodTubeOptions.value.length === 0) {
|
||
await loadBloodTubeDict();
|
||
}
|
||
try {
|
||
loading.value = true
|
||
|
||
// 构建查询参数
|
||
const query = {
|
||
pageNum: currentPage.value,
|
||
pageSize: pageSize.value
|
||
}
|
||
|
||
// 调用接口获取数据
|
||
const response = await listLisGroup(query)
|
||
|
||
// 清空现有数据
|
||
tableData.splice(0, tableData.length)
|
||
totalItems.value = 0
|
||
|
||
// 处理明确的数据结构
|
||
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 {
|
||
totalItems.value = 0;
|
||
}
|
||
} else {
|
||
totalItems.value = 0;
|
||
}
|
||
} else {
|
||
// 非成功状态码
|
||
const errorMsg = response.msg || response.message || `请求失败，状态码: ${response.code}`
|
||
showMessage(errorMsg, 'error')
|
||
totalItems.value = 0;
|
||
}
|
||
} catch (error) {
|
||
// 提取错误信息
|
||
let errorMessage = '加载LIS分组数据失败，请稍后重试'
|
||
|
||
if (error.response) {
|
||
// 服务器响应了，但状态码不是2xx
|
||
if (error.response.data) {
|
||
errorMessage = error.response.data.msg ||
|
||
error.response.data.message ||
|
||
error.response.data.error ||
|
||
`服务器错误 (${error.response.status})`
|
||
} else {
|
||
errorMessage = `服务器错误 (${error.response.status})`
|
||
}
|
||
} else if (error.request) {
|
||
// 请求已发出，但未收到响应
|
||
errorMessage = '网络错误，服务器未响应，请检查网络连接'
|
||
} else if (error.message) {
|
||
// 请求配置出错
|
||
errorMessage = error.message
|
||
}
|
||
|
||
// 显示错误信息
|
||
showMessage(errorMessage, 'error')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 开始编辑
|
||
const startEdit = (item) => {
|
||
// 存储原始数据，用于取消操作
|
||
item.originalData = { ...item }
|
||
item.editing = true
|
||
}
|
||
|
||
// 验证数据
|
||
const validateData = (item) => {
|
||
const errors = {}
|
||
|
||
// 清除之前的错误信息
|
||
delete item.errors
|
||
|
||
// 验证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的消息组件
|
||
if (type === 'error') {
|
||
ElMessage.error(message)
|
||
} else {
|
||
ElMessage.success(message)
|
||
}
|
||
}
|
||
|
||
// 确认编辑
|
||
const confirmEdit = async (item) => {
|
||
// 验证数据
|
||
if (!validateData(item)) {
|
||
showMessage('请检查并修正错误信息', 'error')
|
||
return
|
||
}
|
||
|
||
// 检查是否有重复的分组名称（在同一个卫生机构内）
|
||
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,
|
||
hospital: item.healthInstitution, // 前端字段映射到后端字段
|
||
date: item.date,
|
||
groupName: item.lisGroupName, // 前端字段映射到后端字段
|
||
tube: item.bloodCollectionTube, // 前端字段映射到后端字段
|
||
remark: item.remark
|
||
}
|
||
|
||
let response
|
||
// 判断是新增还是修改
|
||
if (item.isNew) {
|
||
// 新增
|
||
response = await addLisGroup(submitData)
|
||
} else {
|
||
// 修改
|
||
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('保存成功')
|
||
|
||
// 修改完成后重新请求后端本页数据，确保数据准确性
|
||
setTimeout(() => {
|
||
loadLisGroups()
|
||
}, 500)
|
||
} else {
|
||
showMessage(`保存失败: ${response.msg || '未知错误'}`, 'error')
|
||
}
|
||
} catch (error) {
|
||
showMessage(`保存失败: ${error.message || '未知错误'}`, 'error')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 取消编辑
|
||
const cancelEdit = (item) => {
|
||
try {
|
||
if (item.isNew) {
|
||
// 如果是新增的行，从数组中移除
|
||
const index = tableData.findIndex(row => row.id === item.id)
|
||
if (index > -1) {
|
||
tableData.splice(index, 1)
|
||
// 更新总数
|
||
if (totalItems.value > 0) {
|
||
totalItems.value--
|
||
}
|
||
}
|
||
} else if (item.originalData) {
|
||
// 恢复原始数据
|
||
Object.assign(item, item.originalData)
|
||
delete item.originalData
|
||
item.editing = false
|
||
} else {
|
||
item.editing = false
|
||
}
|
||
} catch (error) {
|
||
showMessage('取消编辑失败', 'error')
|
||
}
|
||
}
|
||
|
||
// 添加新行
|
||
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: '',
|
||
healthInstitution: currentHospital, // 默认当前操作工号的卫生机构
|
||
date: getCurrentDate(), // 默认当前系统时间
|
||
lisGroupName: '',
|
||
bloodCollectionTube: '',
|
||
remark: '',
|
||
editing: true,
|
||
errors: null,
|
||
isNew: true // 标记为新记录
|
||
})
|
||
|
||
// 等待DOM更新后聚焦到第一个输入框
|
||
await nextTick()
|
||
const focusElement = document.querySelector('.focus-target')
|
||
if (focusElement) {
|
||
focusElement.focus()
|
||
// 清除focus-target类，避免下次添加行时影响
|
||
focusElement.classList.remove('focus-target')
|
||
}
|
||
}
|
||
|
||
// 删除行
|
||
const deleteRow = async (index) => {
|
||
const item = tableData[index]
|
||
// 检查是否正在编辑
|
||
if (item.editing) {
|
||
showMessage('请先完成或取消编辑', 'error')
|
||
return
|
||
}
|
||
|
||
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) {
|
||
if (error !== 'cancel') {
|
||
showMessage(`删除失败: ${error.message || '未知错误'}`, 'error')
|
||
// 如果删除失败，移除删除标记
|
||
if (tableData[index]) {
|
||
tableData[index].deleting = false
|
||
}
|
||
}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 分页方法
|
||
const prevPage = () => {
|
||
if (currentPage.value > 1) {
|
||
currentPage.value--
|
||
// 调用加载数据方法
|
||
loadLisGroups()
|
||
}
|
||
}
|
||
|
||
const nextPage = () => {
|
||
if (currentPage.value < totalPages.value) {
|
||
currentPage.value++
|
||
// 调用加载数据方法
|
||
loadLisGroups()
|
||
}
|
||
}
|
||
|
||
const goToPage = (page) => {
|
||
if (page >= 1 && page <= totalPages.value) {
|
||
currentPage.value = page
|
||
// 调用加载数据方法
|
||
loadLisGroups()
|
||
}
|
||
}
|
||
|
||
// 组件挂载时加载数据
|
||
onMounted(() => {
|
||
// 加载采血管字典数据
|
||
loadBloodTubeDict();
|
||
// 加载表格数据
|
||
loadLisGroups()
|
||
})
|
||
|
||
return {
|
||
tableData,
|
||
bloodTubeOptions,
|
||
startEdit,
|
||
confirmEdit,
|
||
cancelEdit,
|
||
addRow,
|
||
deleteRow,
|
||
currentPage,
|
||
totalPages,
|
||
prevPage,
|
||
nextPage,
|
||
goToPage,
|
||
loading
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.lis-group-maintain {
|
||
padding: 20px;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
height: 56px;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.header h2 {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin: 0;
|
||
}
|
||
|
||
.table-container {
|
||
margin-bottom: 20px;
|
||
overflow-x: auto;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: left;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 12px;
|
||
border: 1px solid #e8e8e8;
|
||
word-break: break-all;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.data-table th {
|
||
background-color: #fafafa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.editing-row {
|
||
background-color: #f0f8ff;
|
||
}
|
||
|
||
/* 保存成功行样式 */
|
||
.success-row {
|
||
background-color: #f6ffed !important;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.actions {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pagination-section {
|
||
height: 48px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 分页样式 */
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 16px 0;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.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 {
|
||
background: none;
|
||
border: 1px solid #D9D9D9;
|
||
border-radius: 4px;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.pagination-btn:hover {
|
||
border-color: #1890FF;
|
||
color: #1890FF;
|
||
}
|
||
|
||
.pagination-btn:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.pagination-number.active {
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
border-color: #1890ff;
|
||
}
|
||
|
||
.pagination-number.active:hover {
|
||
background-color: #40a9ff;
|
||
border-color: #40a9ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
padding: 0;
|
||
margin-right: 5px;
|
||
border: 1px solid #d9d9d9;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn:hover {
|
||
border-color: #40a9ff;
|
||
color: #40a9ff;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
border-color: #1890ff;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #40a9ff;
|
||
border-color: #40a9ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-confirm {
|
||
background-color: #52c41a;
|
||
color: #fff;
|
||
border-color: #52c41a;
|
||
}
|
||
|
||
.btn-confirm:hover {
|
||
background-color: #73d13d;
|
||
border-color: #73d13d;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-cancel {
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
border-color: #d9d9d9;
|
||
}
|
||
|
||
.btn-edit {
|
||
background-color: #faad14;
|
||
color: #fff;
|
||
border-color: #faad14;
|
||
}
|
||
|
||
.btn-edit:hover {
|
||
background-color: #ffc53d;
|
||
border-color: #ffc53d;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-delete {
|
||
background-color: #ff4d4f;
|
||
color: #fff;
|
||
border-color: #ff4d4f;
|
||
}
|
||
|
||
.btn-delete:hover {
|
||
background-color: #ff7875;
|
||
border-color: #ff7875;
|
||
color: #fff;
|
||
}
|
||
|
||
input, select {
|
||
width: 100%;
|
||
padding: 4px 6px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 2px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
input:disabled {
|
||
background-color: #f5f5f5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 错误状态样式 */
|
||
.error-input {
|
||
border-color: #ff4d4f !important;
|
||
}
|
||
|
||
.error-input:focus {
|
||
border-color: #ff4d4f !important;
|
||
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
|
||
}
|
||
|
||
.error-message {
|
||
display: block;
|
||
font-size: 12px;
|
||
color: #ff4d4f;
|
||
margin-top: 2px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* 错误提示区域样式 */
|
||
.error-message-container {
|
||
padding: 12px 16px;
|
||
background-color: #fff2f0;
|
||
border: 1px solid #ffccc7;
|
||
border-radius: 2px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.error-text {
|
||
color: #ff4d4f;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 加载状态样式 */
|
||
.loading-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(255, 255, 255, 0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 确保页面容器相对定位，使加载遮罩正常工作 */
|
||
.lis-group-maintain {
|
||
position: relative;
|
||
}
|
||
|
||
.table-container {
|
||
overflow-x: auto;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 4px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 12px 8px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.data-table th {
|
||
background-color: #fafafa;
|
||
font-weight: 500;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.lis-group-maintain {
|
||
padding: 10px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.table-container {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.data-table {
|
||
font-size: 12px;
|
||
border-collapse: collapse;
|
||
min-width: 768px; /* 确保表格在小屏幕上可以横向滚动 */
|
||
}
|
||
|
||
.data-table th,
|
||
.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;
|
||
font-size: 12px;
|
||
margin: 0 2px;
|
||
}
|
||
}
|
||
|
||
/* 平滑过渡效果 */
|
||
.btn,
|
||
.pagination-btn,
|
||
.editing-row,
|
||
tr {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 删除行渐隐效果 */
|
||
.deleting-row {
|
||
opacity: 0;
|
||
height: 0;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 美化输入框和选择框的焦点样式 */
|
||
input:focus,
|
||
select:focus {
|
||
outline: none;
|
||
border-color: #40a9ff;
|
||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
}
|
||
</style> |