JERRY_LIU 2025-08-13 15:07 采纳率: 83.3%
浏览 9
已结题

网页中点击按钮，弹出查询窗口

一个网页版的请休假功能，代码包含以下几个文件，数据库是MSSQL，查询和新增操作正常 ，希望在页面的员工姓名这个text中，添加一个查询功能，实现点击此按钮后，弹出一个查询窗口，输入员工姓名或者工号查询，查询结果出来后，双击或者选中某条记录后点确定，将数据带回主页面的员工工号，部门，职位这几个text中，请各位帮忙看看。
另外，请假类型这个控件，目前和员工姓名在同一行，怎样让它另起一行？
我知道可以将

<form action="/leave" method="POST" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">

这行代码中grid-cols-5改成grid-cols-4来实现，但是我想开始日期和结束日期，开始时间，结束时间这四个控件也另起一行，请假类型单独一行显示。

目前 页面显示效果

img

index.ejs文件内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请假管理系统</title>

  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
  <div class="container mx-auto px-4 py-8 max-w-6xl">
    <div class="bg-white rounded-xl shadow-lg overflow-hidden p-6 mb-8">
      <h1 class="text-3xl font-bold text-blue-600 mb-6">
        <i class="fas fa-calendar-alt mr-2"></i>请假管理系统
      </h1>
      
      <% if (messages.error) { %>
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded">
          <i class="fas fa-exclamation-circle mr-2"></i><%= messages.error %>
        </div>
      <% } %>
      <% if (messages.success) { %>
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4 rounded">
          <i class="fas fa-check-circle mr-2"></i><%= messages.success %>
        </div>
      <% } %>

      <form action="/leave" method="POST" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div>
          <label class="block text-gray-700 mb-2 font-medium">员工姓名</label>
          <input type="text" name="employeeName" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>

        <div>
          <label class="block text-gray-700 mb-2 font-medium">员工工号</label>
          <input type="text" name="employeeNumber" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>
        <div>
          <label class="block text-gray-700 mb-2 font-medium">部门</label>
          <input type="text" name="employeeName" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>
        <div>
          <label class="block text-gray-700 mb-2 font-medium">职位</label>
          <input type="text" name="employeeName" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>

        <div>
          <label class="block text-gray-700 mb-2 font-medium">请假类型</label>
          <select name="leaveType" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
            <option value="">请选择</option>
            <option value="年假">年假</option>
            <option value="病假">病假</option>
            <option value="事假">事假</option>
            <option value="婚假">婚假</option>
            <option value="婚假">产假</option>
            <option value="婚假">陪产假</option>
            <option value="婚假">丧假</option>
            <option value="婚假">法定假</option>
            <option value="婚假">特休假</option>
          </select>
        </div>
        <div>
          <label class="block text-gray-700 mb-2 font-medium">开始日期</label>
          <input type="date" name="startDate" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>
        <div>
          <label class="block text-gray-700 mb-2 font-medium">开始时间</label>
          <input type="time" name="startTime" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>
        <div>
          <label class="block text-gray-700 mb-2 font-medium">结束日期</label>
          <input type="date" name="endDate" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>
        <div>
          <label class="block text-gray-700 mb-2 font-medium">结束时间</label>
          <input type="time" name="endTime" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>
        <div class="md:col-span-2">
          <label class="block text-gray-700 mb-2 font-medium">请假原因</label>
          <input type="text" name="reason" required
            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        </div>
        <div class="md:col-span-2 lg:col-span-1 flex items-end">
          <button type="submit" 
            class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition duration-300 font-medium">
            <i class="fas fa-plus mr-2"></i>提交申请
          </button>
        </div>
      </form>
    </div>

    <div class="bg-white rounded-xl shadow-lg overflow-hidden p-6 mb-8">
  <h2 class="text-xl font-semibold text-gray-800 mb-4">
    <i class="fas fa-search mr-2"></i>请假记录查询
  </h2>
  <form action="/search" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
    <div>
      <label class="block text-gray-700 mb-2 font-medium">员工姓名</label>
      <input type="text" name="employeeName"
        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
    </div>
    <div>
      <label class="block text-gray-700 mb-2 font-medium">请假类型</label>
      <select name="leaveType"
        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
        <option value="">全部</option>
        <option value="年假">年假</option>
        <option value="病假">病假</option>
        <option value="事假">事假</option>
        <option value="婚假">婚假</option>
        <option value="婚假">产假</option>
        <option value="婚假">陪产假</option>
        <option value="婚假">丧假</option>
        <option value="婚假">法定假</option>
        <option value="婚假">特休假</option>
      </select>
    </div>
    <div>
      <label class="block text-gray-700 mb-2 font-medium">开始日期</label>
      <input type="date" name="startDate"
        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
    </div>
    <div class="flex items-end">
      <button type="submit" 
        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition duration-300 font-medium">
        <i class="fas fa-search mr-2"></i>查询
      </button>
    </div>
  </form>
</div>

    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
      <div class="px-6 py-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">
          <i class="fas fa-list mr-2"></i>请假记录清单
        </h2>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">开始日期</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">结束日期</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">请假天数</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">请假小时</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原因</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <% leaves.forEach(leave => { %>
              <tr class="hover:bg-gray-50 transition duration-150">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  <%= leave.EmployeeName %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= leave.LeaveItem %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= leave.LeaveType %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= new Date(leave.StartDate).toLocaleDateString() %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= new Date(leave.EndDate).toLocaleDateString() %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= leave.LeaveDay %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= leave.LeaveHour %>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">
                  <%= leave.Reason %>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

app.js 文件内容

const express = require('express');
const bodyParser = require('body-parser');
const session = require('express-session');
const flash = require('connect-flash');
const sql = require('mssql');
const path = require('path');
const { log } = require('console');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 3000;

// 数据库配置
const dbConfig = {
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  server: process.env.DB_SERVER,
  database: process.env.DB_NAME,
  options: {
    encrypt: false,//true时为https 加密访问，mssql不支持
    trustServerCertificate: true,
    port:1433
  }
};

// 中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(session({
  secret: 'leave-system-secret',
  resave: false,
  saveUninitialized: true
}));
app.use(flash());
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));

// 路由 - 查询请假记录
app.get('/', async (req, res) => {
  try {
    
    const pool = await sql.connect(dbConfig);
    const result = await pool.request()
    .query('SELECT * FROM LeaveApplications ORDER BY StartDate DESC');

    res.render('index', { 
      leaves: result.recordset,
      messages: req.flash()
      
    });
  } catch (err) {
    console.error("数据库连接或者查询错误",err);
    req.flash('error', '查询请假记录失败');
    res.render('index', { leaves: [], messages: req.flash() });
  }
});

// 路由 - 新增请假记录
app.post('/leave', async (req, res) => {
  const { employeeName, leaveType, startDate, endDate, reason } = req.body;
  
  try {
    const pool = await sql.connect(dbConfig);
    await pool.request()
      .input('employeeName', sql.NVarChar, employeeName)
      .input('leaveType', sql.NVarChar, leaveType)
      .input('startDate', sql.Date, startDate)
      .input('endDate', sql.Date, endDate)
      .input('reason', sql.NVarChar, reason)
      .query(`INSERT INTO LeaveApplications 
              (EmployeeName, LeaveType, StartDate, EndDate, Reason) 
              VALUES (@employeeName, @leaveType, @startDate, @endDate, @reason)`);
    
    req.flash('success', '请假申请提交成功');
  } catch (err) {
    req.flash('error', '提交请假申请失败');
  } finally {
    res.redirect('/');
  }
});

// 路由 - 条件查询请假记录
app.get('/search', async (req, res) => {
  const { employeeName, leaveType, startDate } = req.query;
  
  try {
    const pool = await sql.connect(dbConfig);
    let query = 'select  EmployeeName,  LeaveItem,  LeaveType,  StartDate,  EndDate,  LeaveDay,  LeaveHour, Reason from LeaveApplications  WHERE 1=1';
    const request = pool.request();


    if (employeeName) {
      query += ' AND Employeename LIKE @employeeName';
      request.input('employeeName', sql.NVarChar, `%${employeeName}%`);
    }
    if (leaveType) {
      query += ' AND LeaveType = @leaveType';
      request.input('leaveType', sql.NVarChar, leaveType);
    }
    if (startDate) {
      query += ' AND StartDate >= @startDate';
      request.input('startDate', sql.Date, startDate);
    }
    
    query += ' ORDER BY startDate DESC';
    
    const result = await request.query(query);
    res.render('index', { 
      leaves: result.recordset,
      messages: req.flash()
    });
  } catch (err) {
    console.error('查询错误:', err);
    req.flash('error', '查询请假记录失败: ' + err.message);
    res.render('index', { leaves: [], messages: req.flash() });
  }
});



app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

.env文件内容

DB_USER=sa
DB_PASSWORD=password
DB_SERVER=192.168.1.4
DB_NAME=Database

package.json文件内容


{
  "name": "leave-request",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "body-parser": "^2.2.0",
    "connect-flash": "^0.1.1",
    "dotenv": "^17.2.1",
    "ejs": "^3.1.10",
    "express": "^5.1.0",
    "express-session": "^1.18.2",
    "mssql": "^11.0.1"
  }
}
  • 写回答

6条回答 默认 最新

  • 宝码香车 优质创作者: JavaScript技术领域 2025-08-13 15:48
    关注

    让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

    如果答案让您满意，请采纳、点赞、关注，非常感谢！
    .  
    每日一句正能量，让它带给您好心情：给时间一点时间，让过去过去，让开始开始。
    .  

    请假管理系统功能改进方案

    一、员工查询功能实现

    1. 修改 index.ejs 文件

    在员工姓名输入框旁添加查询按钮，并添加模态框代码：

    <!-- 在 head 部分添加样式 -->
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    border-radius: 0.5rem;
  }
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
</style>


<!-- 修改员工姓名输入框部分 -->
<div>
  <label class="block text-gray-700 mb-2 font-medium">员工姓名</label>
  <div class="flex">
    <input type="text" name="employeeName" id="employeeName" required
      class="w-full px-4 py-2 border rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
    <button type="button" onclick="openSearchModal()"
      class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg transition">
      <i class="fas fa-search"></i>
    </button>
  </div>
</div>


<!-- 添加查询模态框 -->
<div id="searchModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeSearchModal()">&times;</span>
    <h2 class="text-xl font-semibold mb-4">员工查询</h2>
    <div class="mb-4">
      <input type="text" id="searchInput" placeholder="输入员工姓名或工号"
        class="w-full px-4 py-2 border rounded-lg mb-2">
      <button onclick="searchEmployees()"
        class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
        查询
      </button>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">姓名</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">工号</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">部门</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">职位</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
          </tr>
        </thead>
        <tbody id="searchResults" class="bg-white divide-y divide-gray-200">
          <!-- 查询结果将在这里动态填充 -->
        </tbody>
      </table>
    </div>
  </div>
</div>


<!-- 在 body 结束前添加脚本 -->
<script>
  // 打开模态框
  function openSearchModal() {
    document.getElementById('searchModal').style.display = 'block';
  }


  // 关闭模态框
  function closeSearchModal() {
    document.getElementById('searchModal').style.display = 'none';
  }


  // 查询员工
  async function searchEmployees() {
    const keyword = document.getElementById('searchInput').value;
    if (!keyword) {
      alert('请输入查询关键词');
      return;
    }


    try {
      const response = await fetch(`/api/employees?q=${encodeURIComponent(keyword)}`);
      const employees = await response.json();
      
      const resultsTable = document.getElementById('searchResults');
      resultsTable.innerHTML = '';
      
      employees.forEach(emp => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50';
        row.innerHTML = `
          <td class="px-6 py-4 whitespace-nowrap">${emp.name}</td>
          <td class="px-6 py-4 whitespace-nowrap">${emp.number}</td>
          <td class="px-6 py-4 whitespace-nowrap">${emp.department}</td>
          <td class="px-6 py-4 whitespace-nowrap">${emp.position}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <button onclick="selectEmployee('${emp.name}', '${emp.number}', '${emp.department}', '${emp.position}')"
              class="text-blue-500 hover:text-blue-700">选择</button>
          </td>
        `;
        resultsTable.appendChild(row);
      });
    } catch (error) {
      console.error('查询失败:', error);
      alert('查询失败，请稍后重试');
    }
  }


  // 选择员工
  function selectEmployee(name, number, department, position) {
    document.getElementById('employeeName').value = name;
    document.querySelector('input[name="employeeNumber"]').value = number;
    document.querySelector('input[name="employeeDepartment"]').value = department;
    document.querySelector('input[name="employeePosition"]').value = position;
    closeSearchModal();
  }
</script>

    2. 修改 app.js 文件

    添加员工查询 API 路由：

    // 添加员工查询API
app.get('/api/employees', async (req, res) => {
  const { q } = req.query;
  
  try {
    const pool = await sql.connect(dbConfig);
    const result = await pool.request()
      .input('keyword', sql.NVarChar, `%${q}%`)
      .query(`
        SELECT 
          Name as name, 
          EmployeeNumber as number, 
          Department as department, 
          Position as position 
        FROM Employees 
        WHERE Name LIKE @keyword OR EmployeeNumber LIKE @keyword
        LIMIT 50
      `);
    
    res.json(result.recordset);
  } catch (err) {
    console.error('员工查询错误:', err);
    res.status(500).json({ error: '查询失败' });
  }
});

    二、表单布局调整

    修改表单的 grid 布局，将请假类型单独一行，日期时间控件另起一行：

    <form action="/leave" method="POST" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
  <!-- 员工信息行 -->
  <div>
    <label class="block text-gray-700 mb-2 font-medium">员工姓名</label>
    <div class="flex">
      <input type="text" name="employeeName" id="employeeName" required
        class="w-full px-4 py-2 border rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
      <button type="button" onclick="openSearchModal()"
        class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg transition">
        <i class="fas fa-search"></i>
      </button>
    </div>
  </div>


  <div>
    <label class="block text-gray-700 mb-2 font-medium">员工工号</label>
    <input type="text" name="employeeNumber" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>
  
  <div>
    <label class="block text-gray-700 mb-2 font-medium">部门</label>
    <input type="text" name="employeeDepartment" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>
  
  <div>
    <label class="block text-gray-700 mb-2 font-medium">职位</label>
    <input type="text" name="employeePosition" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>


  <!-- 请假类型单独一行 -->
  <div class="md:col-span-2 lg:col-span-4">
    <label class="block text-gray-700 mb-2 font-medium">请假类型</label>
    <select name="leaveType" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
      <option value="">请选择</option>
      <option value="年假">年假</option>
      <option value="病假">病假</option>
      <option value="事假">事假</option>
      <option value="婚假">婚假</option>
      <option value="产假">产假</option>
      <option value="陪产假">陪产假</option>
      <option value="丧假">丧假</option>
      <option value="法定假">法定假</option>
      <option value="特休假">特休假</option>
    </select>
  </div>


  <!-- 日期时间行 -->
  <div>
    <label class="block text-gray-700 mb-2 font-medium">开始日期</label>
    <input type="date" name="startDate" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>
  
  <div>
    <label class="block text-gray-700 mb-2 font-medium">开始时间</label>
    <input type="time" name="startTime" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>
  
  <div>
    <label class="block text-gray-700 mb-2 font-medium">结束日期</label>
    <input type="date" name="endDate" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>
  
  <div>
    <label class="block text-gray-700 mb-2 font-medium">结束时间</label>
    <input type="time" name="endTime" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>


  <!-- 请假原因和提交按钮 -->
  <div class="md:col-span-2">
    <label class="block text-gray-700 mb-2 font-medium">请假原因</label>
    <input type="text" name="reason" required
      class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
  </div>
  
  <div class="md:col-span-2 lg:col-span-1 flex items-end">
    <button type="submit" 
      class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition duration-300 font-medium">
      <i class="fas fa-plus mr-2"></i>提交申请
    </button>
  </div>
</form>

    三、注意事项

    1. 确保数据库中有一个 Employees 表，包含以下字段：
      • Name (员工姓名)
      • EmployeeNumber (员工工号)
      • Department (部门)
      • Position (职位)
    1. 如果表名或字段名不同，需要相应修改 SQL 查询语句。
    1. 可以根据实际需求调整模态框的样式和布局。
    1. 表单布局调整后，可以根据实际显示效果进一步微调 grid 的列数。
    1. 建议添加输入验证和错误处理，确保系统的健壮性。

    以上修改实现了员工查询功能和表单布局调整，用户可以通过点击员工姓名旁的查询按钮弹出查询窗口，输入姓名或工号查询员工信息，选择后将自动填充表单中的相关信息。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

问题事件

  • 系统已结题 8月23日
  • 已采纳回答 8月15日
  • 创建了问题 8月13日