维护系统->LIS分组前端页面开发，基础功能实现

openhis-ui-vue3/src/views/maintainSystem/lisGroup/index.vue

@@ -0,0 +1,999 @@
+<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 }"
+          >
+            <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>
+              </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 }"
+                    >
+                    <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">‹</button>
+        <span>1</span>
+        <button class="pagination-btn">›</button>
+      </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
+import { listLisGroup, addLisGroup, updateLisGroup, delLisGroup } from '@/api/system/checkType'
+import { getDicts } from "@/api/system/dict/data";
+import axios from 'axios'
+
+export default {
+  name: 'LisGroupMaintain',
+  setup() {
+    // 加载状态
+    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) {
+        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 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
+        }
+        
+        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
+              });
+            } else {
+              console.warn(`记录 ${index + 1} 不是有效对象，跳过处理:`, item);
+            }
+          });
+          
+          totalItems.value = total;
+          console.log('数据加载完成，表格显示', tableData.length, '条记录，总数:', totalItems.value);
+        } else {
+          console.log('未获取到有效数据，表格为空');
+        }
+      } 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})`
+          } 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)
+      }
+    }
+
+    // 开始编辑
+    const startEdit = (item) => {
+      // 存储原始数据，用于取消操作
+      item.originalData = { ...item }
+      item.editing = true
+    }
+
+    // 验证数据
+    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，但添加了类型标识
+      if (type === 'error') {
+        console.error(message)
+        alert(`错误: ${message}`)
+      } else {
+        console.log(message)
+        // 可以使用更友好的提示方式，这里暂时注释掉alert以避免频繁弹窗
+        // alert(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
+          
+          showMessage('保存成功')
+          
+          // 如果是新增，重新加载数据以确保数据一致性
+          if (isNewRecord) {
+            loadLisGroups()
+          }
+        } else {
+          showMessage(`保存失败: ${response.msg || '未知错误'}`, 'error')
+        }
+      } catch (error) {
+        console.error('保存LIS分组数据失败:', 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) {
+        console.error('取消编辑失败:', error)
+        showMessage('取消编辑失败', 'error')
+      }
+    }
+
+    // 添加新行
+    const addRow = () => {
+      // 检查是否已有正在编辑的行
+      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)
+      tableData.push({
+        id: newId,
+        healthInstitution: '', // 空默认值
+        date: getCurrentDate(), // 默认当前系统时间
+        lisGroupName: '',
+        bloodCollectionTube: '',
+        remark: '',
+        editing: true,
+        errors: null,
+        isNew: true // 标记为新记录
+      })
+      
+      showMessage('请填写新记录信息')
+    }
+
+    // 删除行
+    const deleteRow = async (index) => {
+      const item = tableData[index]
+      // 检查是否正在编辑
+      if (item.editing) {
+        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')
+            }
+          }
+        } catch (error) {
+          console.error('删除LIS分组数据失败:', error)
+          showMessage(`删除失败: ${error.message || '未知错误'}`, 'error')
+        } 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 h1 {
+  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;
+}
+
+.actions {
+  white-space: nowrap;
+}
+
+.pagination-section {
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 分页样式 */
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 16px 0;
+  margin-top: 8px;
+}
+
+.pagination span {
+  font-size: 14px;
+  margin: 0 16px;
+}
+
+.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;
+    min-width: 600px; /* 确保表格在小屏幕上可以横向滚动 */
+  }
+  
+  .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 {
+  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>