feat(staff-picker): add staff search endpoint and UserDetail typeahead

Backend: - StaffSearchVO (iIncrement / sStaffNo / sStaffName / sDepartment) - StaffMapper.searchActive(keyword, limit) — LIKE on name + staff no - StaffController GET /api/usr/staffs?keyword=&limit= - UserListVO + UserMapper.xml: expose iStaffId so edit mode preserves the binding when user doesn't change 员工名 Frontend: - api/staff.ts → searchStaff() - StaffPicker.tsx: input + dropdown with debounced search, '已绑定' badge when an iStaffId is bound, click outside to close, search icon - UserDetail: replace 员工名 PrimInput with StaffPicker; track iStaffId in form state; send to backend on save (no longer omitted)

feat(staff-picker): add staff search endpoint and UserDetail typeahead
Backend: - StaffSearchVO (iIncrement / sStaffNo / sStaffName / sDepartment) - StaffMapper.searchActive(keyword, limit) — LIKE on name + staff no - StaffController GET /api/usr/staffs?keyword=&limit= - UserListVO + UserMapper.xml: expose iStaffId so edit mode preserves the binding when user doesn't change 员工名 Frontend: - api/staff.ts → searchStaff() - StaffPicker.tsx: input + dropdown with debounced search, '已绑定' badge when an iStaffId is bound, click outside to close, search icon - UserDetail: replace 员工名 PrimInput with StaffPicker; track iStaffId in form state; send to backend on save (no longer omitted)
zichun
1 parent 2f4874be
Showing 9 changed files with 309 additions and 4 deletions
backend/src/main/java/com/xly/erp/module/usr/controller/StaffController.java
backend/src/main/java/com/xly/erp/module/usr/mapper/StaffMapper.java
backend/src/main/java/com/xly/erp/module/usr/vo/StaffSearchVO.java
backend/src/main/java/com/xly/erp/module/usr/vo/UserListVO.java
backend/src/main/resources/mapper/usr/UserMapper.xml
frontend/src/api/staff.ts
frontend/src/api/user.ts
frontend/src/components/StaffPicker.tsx
frontend/src/pages/usr/UserDetail.tsx
+package com.xly.erp.module.usr.controller;
+
+import com.xly.erp.common.response.Result;
+import com.xly.erp.module.usr.mapper.StaffMapper;
+import com.xly.erp.module.usr.vo.StaffSearchVO;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/usr")
+public class StaffController {
+
+    private static final int DEFAULT_LIMIT = 20;
+    private static final int MAX_LIMIT = 50;
+
+    private final StaffMapper staffMapper;
+
+    public StaffController(StaffMapper staffMapper) {
+        this.staffMapper = staffMapper;
+    }
+
+    @GetMapping("/staffs")
+    public Result<List<StaffSearchVO>> search(@RequestParam(required = false) String keyword,
+                                              @RequestParam(required = false) Integer limit) {
+        int n = (limit == null || limit < 1) ? DEFAULT_LIMIT : Math.min(limit, MAX_LIMIT);
+        String kw = keyword == null ? "" : keyword.trim();
+        return Result.ok(staffMapper.searchActive(kw, n));
+    }
+}
 package com.xly.erp.module.usr.mapper;
+import com.xly.erp.module.usr.vo.StaffSearchVO;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
 import org.apache.ibatis.annotations.Select;
+import java.util.List;
+
 @Mapper
 public interface StaffMapper {
@@ -13,4 +16,19 @@ public interface StaffMapper {
     default boolean existsActiveById(Integer id) {
         return findActiveStaffFlag(id) != null;
     }
+
+    @Select("""
+            <script>
+            SELECT iIncrement, sStaffNo, sStaffName, sDepartment
+              FROM tStaff
+             WHERE bDeleted = 0
+            <if test='keyword != null and keyword != ""'>
+               AND (sStaffName LIKE CONCAT('%', #{keyword}, '%')
+                 OR sStaffNo   LIKE CONCAT('%', #{keyword}, '%'))
+            </if>
+             ORDER BY sStaffName ASC
+             LIMIT #{limit}
+            </script>
+            """)
+    List<StaffSearchVO> searchActive(@Param("keyword") String keyword, @Param("limit") Integer limit);
 }
+package com.xly.erp.module.usr.vo;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+
+public class StaffSearchVO {
+
+    @JsonProperty("iIncrement")
+    private Integer iIncrement;
+
+    @JsonProperty("sStaffNo")
+    private String sStaffNo;
+
+    @JsonProperty("sStaffName")
+    private String sStaffName;
+
+    @JsonProperty("sDepartment")
+    private String sDepartment;
+
+    public Integer getIIncrement() { return iIncrement; }
+    public void setIIncrement(Integer iIncrement) { this.iIncrement = iIncrement; }
+    public String getSStaffNo() { return sStaffNo; }
+    public void setSStaffNo(String sStaffNo) { this.sStaffNo = sStaffNo; }
+    public String getSStaffName() { return sStaffName; }
+    public void setSStaffName(String sStaffName) { this.sStaffName = sStaffName; }
+    public String getSDepartment() { return sDepartment; }
+    public void setSDepartment(String sDepartment) { this.sDepartment = sDepartment; }
+}
@@ -12,6 +12,9 @@ public class UserListVO {
     @JsonProperty("sUserName")
     private String sUserName;
+    @JsonProperty("iStaffId")
+    private Integer iStaffId;
+
     @JsonProperty("staffName")
     private String staffName;
@@ -43,6 +46,8 @@ public class UserListVO {
     public void setIIncrement(Integer iIncrement) { this.iIncrement = iIncrement; }
     public String getSUserName() { return sUserName; }
     public void setSUserName(String sUserName) { this.sUserName = sUserName; }
+    public Integer getIStaffId() { return iStaffId; }
+    public void setIStaffId(Integer iStaffId) { this.iStaffId = iStaffId; }
     public String getStaffName() { return staffName; }
     public void setStaffName(String staffName) { this.staffName = staffName; }
     public String getSUserNo() { return sUserNo; }
@@ -6,6 +6,7 @@
     <sql id="baseSelectColumns">
         u.iIncrement AS iIncrement,
         u.sUserName  AS sUserName,
+        u.iStaffId   AS iStaffId,
         s.sStaffName AS staffName,
         u.sUserNo    AS sUserNo,
         s.sDepartment AS department,
+import { request } from "./client";
+
+export interface StaffSearchVO {
+  iIncrement: number;
+  sStaffNo: string;
+  sStaffName: string;
+  sDepartment: string | null;
+}
+
+export function searchStaff(keyword?: string, limit = 20): Promise<StaffSearchVO[]> {
+  return request<StaffSearchVO[]>({
+    url: "/usr/staffs",
+    method: "GET",
+    params: { keyword: keyword ?? "", limit },
+  });
+}
@@ -3,6 +3,7 @@ import { request } from &quot;./client&quot;;
 export interface UserListVO {
   iIncrement: number;
   sUserName: string;
+  iStaffId: number | null;
   staffName: string | null;
   sUserNo: string;
   department: string | null;
+import { useEffect, useRef, useState } from "react";
+import { SearchOutlined } from "@ant-design/icons";
+import { searchStaff, type StaffSearchVO } from "@/api/staff";
+
+interface Props {
+  value: string;
+  staffId: number | null;
+  onChange: (name: string, staffId: number | null) => void;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+}
+
+const fieldControl: React.CSSProperties = {
+  flex: 1,
+  minWidth: 0,
+  height: "var(--input-h)",
+  border: "1px solid var(--border-input)",
+  background: "var(--bg-input)",
+  padding: "0 26px 0 6px",
+  fontSize: 12,
+  color: "var(--text)",
+  borderRadius: 0,
+  outline: "none",
+  fontFamily: "inherit",
+};
+
+export default function StaffPicker({
+  value,
+  staffId,
+  onChange,
+  disabled,
+  required,
+  placeholder,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState<StaffSearchVO[]>([]);
+  const [loading, setLoading] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const debounce = useRef<number | null>(null);
+
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, []);
+
+  const fetchSuggestions = async (kw: string) => {
+    setLoading(true);
+    try {
+      const list = await searchStaff(kw, 20);
+      setItems(list);
+    } catch {
+      setItems([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onFocus = () => {
+    if (disabled) return;
+    setOpen(true);
+    void fetchSuggestions(value);
+  };
+
+  const onInputChange = (next: string) => {
+    // Typing clears any previously bound staff id; user must re-select
+    onChange(next, null);
+    setOpen(true);
+    if (debounce.current) window.clearTimeout(debounce.current);
+    debounce.current = window.setTimeout(() => fetchSuggestions(next), 200);
+  };
+
+  const select = (s: StaffSearchVO) => {
+    onChange(s.sStaffName, s.iIncrement);
+    setOpen(false);
+  };
+
+  return (
+    <div
+      ref={wrapRef}
+      style={{ position: "relative", flex: 1, minWidth: 0, display: "flex", alignItems: "center" }}
+    >
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onInputChange(e.target.value)}
+        onFocus={onFocus}
+        disabled={disabled}
+        placeholder={placeholder}
+        style={{
+          ...fieldControl,
+          ...(disabled ? { background: "var(--bg-disabled)", color: "var(--text-muted)" } : {}),
+          ...(required && !disabled ? { background: "#d4e8f7" } : {}),
+        }}
+      />
+      <span
+        style={{
+          position: "absolute",
+          right: 6,
+          top: "50%",
+          transform: "translateY(-50%)",
+          color: "var(--text-faint)",
+          pointerEvents: "none",
+          fontSize: 12,
+        }}
+      >
+        <SearchOutlined />
+      </span>
+      {staffId != null && !disabled && (
+        <span
+          style={{
+            position: "absolute",
+            right: 22,
+            top: "50%",
+            transform: "translateY(-50%)",
+            fontSize: 9,
+            color: "#fff",
+            background: "var(--success)",
+            padding: "1px 4px",
+            borderRadius: 2,
+            pointerEvents: "none",
+          }}
+          title={`已绑定职员 ID ${staffId}`}
+        >
+          已绑定
+        </span>
+      )}
+      {open && !disabled && (
+        <div
+          style={{
+            position: "absolute",
+            top: "calc(100% + 1px)",
+            left: 0,
+            right: 0,
+            zIndex: 50,
+            background: "#fff",
+            border: "1px solid var(--border-input)",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+            maxHeight: 240,
+            overflow: "auto",
+          }}
+        >
+          {loading && (
+            <div style={{ padding: "8px 12px", fontSize: 12, color: "var(--text-faint)" }}>
+              加载中…
+            </div>
+          )}
+          {!loading && items.length === 0 && (
+            <div style={{ padding: "8px 12px", fontSize: 12, color: "var(--text-faint)" }}>
+              没有匹配的职员
+            </div>
+          )}
+          {!loading &&
+            items.map((s) => (
+              <div
+                key={s.iIncrement}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  select(s);
+                }}
+                style={{
+                  padding: "6px 12px",
+                  fontSize: 12,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  borderBottom: "1px solid #f0f2f5",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "var(--bg-row-hover)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "transparent";
+                }}
+              >
+                <span style={{ color: "var(--text)" }}>{s.sStaffName}</span>
+                <span style={{ color: "var(--text-faint)", fontSize: 11 }} className="mono">
+                  {s.sStaffNo}
+                </span>
+                <span style={{ flex: 1 }} />
+                <span style={{ color: "var(--text-muted)", fontSize: 11 }}>
+                  {s.sDepartment ?? ""}
+                </span>
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -19,6 +19,7 @@ import {
   PrimCheckbox,
   ToolbarBtnDark,
 } from "@/components/Primitives";
+import StaffPicker from "@/components/StaffPicker";
 import { createUser, updateUser, type UserDTO } from "@/api/user";
 import {
   USER_TYPES,
@@ -41,6 +42,7 @@ interface Props {
 interface FormState {
   sUserNo: string;
   sUserName: string;
+  iStaffId: number | null;
   staffName: string;
   department: string;
   sUserType: string;
@@ -69,6 +71,7 @@ export default function UserDetail({ userId, mode: initialMode }: Props) {
     | {
         sUserNo: string;
         sUserName: string;
+        iStaffId: number | null;
         staffName: string | null;
         department: string | null;
         sUserType: string;
@@ -84,6 +87,7 @@ export default function UserDetail({ userId, mode: initialMode }: Props) {
       ? {
           sUserNo: "",
           sUserName: "",
+          iStaffId: null,
           staffName: "",
           department: "",
           sUserType: "普通用户",
@@ -93,6 +97,7 @@ export default function UserDetail({ userId, mode: initialMode }: Props) {
       : {
           sUserNo: snapshot.sUserNo,
           sUserName: snapshot.sUserName,
+          iStaffId: snapshot.iStaffId,
           staffName: snapshot.staffName ?? "",
           department: snapshot.department ?? "",
           sUserType: snapshot.sUserType,
@@ -139,10 +144,10 @@ export default function UserDetail({ userId, mode: initialMode }: Props) {
     const dto: UserDTO = {
       sUserNo: form.sUserNo,
       sUserName: form.sUserName,
+      iStaffId: form.iStaffId,
       sUserType: form.sUserType,
       sLanguage: form.sLanguage,
       bCanModifyDocs: form.bCanModifyDocs,
-      // iStaffId omitted: prototype has no staff picker.
       // permissionCategoryIds omitted: prototype permissions are by name; backend wants IDs.
     };
     setSubmitting(true);
@@ -297,12 +302,15 @@ export default function UserDetail({ userId, mode: initialMode }: Props) {
           />
         </Field>
         <Field label="员工名" required>
-          <PrimInput
+          <StaffPicker
             value={form.staffName}
-            onChange={(v) => set("staffName", v)}
+            staffId={form.iStaffId}
+            onChange={(name, id) =>
+              setForm((s) => ({ ...s, staffName: name, iStaffId: id }))
+            }
             disabled={disabled}
             required
-            placeholder="（关联职员）"
+            placeholder="输入员工姓名搜索"
           />
         </Field>