328 lines
11 KiB
TypeScript
328 lines
11 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { STORE_STAFF_ROLE_LABELS, type StoreStaffRole } from '@dukang/shared-types';
|
|
import { useStoreSession } from '../contexts/StoreSessionContext';
|
|
import { getStoreProfile, request } from '../lib/api';
|
|
|
|
type StaffItem = {
|
|
id: string;
|
|
name: string;
|
|
phone: string;
|
|
staffRole: StoreStaffRole;
|
|
status: string;
|
|
storeIds: string[];
|
|
stores: Array<{ storeId: string; name: string }>;
|
|
};
|
|
|
|
type StoreOption = { storeId: string; name: string };
|
|
|
|
function maskPhone(phone: string) {
|
|
if (!phone || phone.length < 7) return phone;
|
|
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
|
}
|
|
|
|
export default function StaffPage() {
|
|
const navigate = useNavigate();
|
|
const { store } = useStoreSession();
|
|
const profile = store ?? getStoreProfile();
|
|
const [list, setList] = useState<StaffItem[]>([]);
|
|
const [ownedStores, setOwnedStores] = useState<StoreOption[]>([]);
|
|
const [msg, setMsg] = useState('');
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [form, setForm] = useState({ phone: '', name: '', storeIds: [] as string[] });
|
|
|
|
async function reload() {
|
|
const [staff, stores] = await Promise.all([
|
|
request<StaffItem[]>('SHOP_H5', '/shop/staff'),
|
|
request<StoreOption[]>('SHOP_H5', '/shop/auth/stores'),
|
|
]);
|
|
setList(staff);
|
|
setOwnedStores(stores);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!profile?.isPrimary) {
|
|
navigate('/mine', { replace: true });
|
|
return;
|
|
}
|
|
void reload().catch((e) => setMsg(e instanceof Error ? e.message : '加载失败'));
|
|
}, [navigate, profile?.isPrimary]);
|
|
|
|
async function createStaff() {
|
|
const phone = form.phone.trim();
|
|
const name = form.name.trim();
|
|
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
|
setMsg('请输入正确的手机号');
|
|
return;
|
|
}
|
|
if (!name) {
|
|
setMsg('请填写姓名');
|
|
return;
|
|
}
|
|
setMsg('');
|
|
setSubmitting(true);
|
|
try {
|
|
await request('SHOP_H5', '/shop/staff', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
phone,
|
|
name,
|
|
storeIds: form.storeIds.length ? form.storeIds : ownedStores.map((s) => s.storeId),
|
|
}),
|
|
});
|
|
setShowForm(false);
|
|
setForm({ phone: '', name: '', storeIds: [] });
|
|
await reload();
|
|
} catch (e) {
|
|
setMsg(e instanceof Error ? e.message : '创建失败');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
async function toggleStatus(item: StaffItem) {
|
|
const next = item.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE';
|
|
try {
|
|
await request('SHOP_H5', `/shop/staff/${item.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ status: next }),
|
|
});
|
|
await reload();
|
|
} catch (e) {
|
|
setMsg(e instanceof Error ? e.message : '更新失败');
|
|
}
|
|
}
|
|
|
|
function toggleStoreId(storeId: string) {
|
|
setForm((prev) => {
|
|
const allIds = ownedStores.map((s) => s.storeId);
|
|
// 空数组表示「全部」；取消某一家时转为「除该店外的全部」
|
|
if (prev.storeIds.length === 0) {
|
|
return { ...prev, storeIds: allIds.filter((id) => id !== storeId) };
|
|
}
|
|
const next = prev.storeIds.includes(storeId)
|
|
? prev.storeIds.filter((id) => id !== storeId)
|
|
: [...prev.storeIds, storeId];
|
|
// 又选回全部时，恢复默认空数组语义
|
|
if (next.length === allIds.length) {
|
|
return { ...prev, storeIds: [] };
|
|
}
|
|
return { ...prev, storeIds: next };
|
|
});
|
|
}
|
|
|
|
const selectedCount =
|
|
form.storeIds.length === 0 ? ownedStores.length : form.storeIds.length;
|
|
|
|
return (
|
|
<div className="shop-staff-page">
|
|
<header className="shop-subpage-header">
|
|
<button
|
|
type="button"
|
|
className="shop-subpage-back"
|
|
onClick={() => {
|
|
if (showForm) {
|
|
setShowForm(false);
|
|
setMsg('');
|
|
return;
|
|
}
|
|
navigate('/mine');
|
|
}}
|
|
aria-label="返回"
|
|
>
|
|
<span className="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<h1 className="app-page-title">{showForm ? '添加子账号' : '子账号管理'}</h1>
|
|
{!showForm ? (
|
|
<button
|
|
type="button"
|
|
className="shop-subpage-header-action"
|
|
onClick={() => {
|
|
setShowForm(true);
|
|
setMsg('');
|
|
}}
|
|
>
|
|
<span className="material-symbols-outlined">person_add</span>
|
|
添加
|
|
</button>
|
|
) : (
|
|
<span className="shop-subpage-header-spacer" />
|
|
)}
|
|
</header>
|
|
|
|
<div className="shop-subpage-content">
|
|
{!showForm ? (
|
|
<section className="shop-subpage-hero shop-subpage-hero--compact">
|
|
<div className="shop-subpage-hero-icon">
|
|
<span className="material-symbols-outlined shop-fill-icon">group</span>
|
|
</div>
|
|
<div>
|
|
<h2 className="shop-subpage-hero-title">门店员工子账号</h2>
|
|
<p className="shop-subpage-hero-desc">
|
|
共 {list.length} 人 · 可授权员工用手机号登录门店端进行核销
|
|
</p>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{msg ? (
|
|
<p className="shop-subpage-msg" role="alert">
|
|
{msg}
|
|
</p>
|
|
) : null}
|
|
|
|
{showForm ? (
|
|
<section className="shop-staff-form-card">
|
|
<div className="shop-staff-form-field">
|
|
<label className="shop-staff-form-label" htmlFor="staff-phone">
|
|
手机号
|
|
</label>
|
|
<div className="shop-staff-form-input-wrap">
|
|
<span className="material-symbols-outlined">smartphone</span>
|
|
<input
|
|
id="staff-phone"
|
|
type="tel"
|
|
inputMode="numeric"
|
|
maxLength={11}
|
|
placeholder="员工登录手机号"
|
|
value={form.phone}
|
|
onChange={(e) =>
|
|
setForm((f) => ({ ...f, phone: e.target.value.replace(/\D/g, '').slice(0, 11) }))
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shop-staff-form-field">
|
|
<label className="shop-staff-form-label" htmlFor="staff-name">
|
|
姓名
|
|
</label>
|
|
<div className="shop-staff-form-input-wrap">
|
|
<span className="material-symbols-outlined">badge</span>
|
|
<input
|
|
id="staff-name"
|
|
type="text"
|
|
placeholder="员工姓名"
|
|
value={form.name}
|
|
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shop-staff-form-field">
|
|
<p className="shop-staff-form-label">
|
|
绑定门店
|
|
<span className="shop-staff-form-hint">
|
|
{form.storeIds.length === 0
|
|
? `（默认全部 ${ownedStores.length} 家）`
|
|
: `（已选 ${selectedCount} 家）`}
|
|
</span>
|
|
</p>
|
|
<div className="shop-staff-store-picks">
|
|
{ownedStores.map((s) => {
|
|
const checked =
|
|
form.storeIds.length === 0 || form.storeIds.includes(s.storeId);
|
|
return (
|
|
<label
|
|
key={s.storeId}
|
|
className={`shop-staff-store-pick${checked ? ' is-checked' : ''}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={() => toggleStoreId(s.storeId)}
|
|
/>
|
|
<span className="material-symbols-outlined shop-fill-icon">storefront</span>
|
|
<span className="shop-staff-store-pick-name">{s.name}</span>
|
|
{checked ? (
|
|
<span className="material-symbols-outlined shop-staff-store-pick-check">
|
|
check_circle
|
|
</span>
|
|
) : null}
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
className="shop-staff-submit"
|
|
disabled={submitting}
|
|
onClick={() => void createStaff()}
|
|
>
|
|
{submitting ? '创建中…' : '创建子账号'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="shop-staff-cancel"
|
|
disabled={submitting}
|
|
onClick={() => {
|
|
setShowForm(false);
|
|
setMsg('');
|
|
}}
|
|
>
|
|
取消
|
|
</button>
|
|
</section>
|
|
) : (
|
|
<section>
|
|
<div className="shop-home-records-head">
|
|
<h3 className="shop-home-records-title">账号列表</h3>
|
|
</div>
|
|
<ul className="shop-staff-list">
|
|
{list.map((item) => {
|
|
const active = item.status === 'ACTIVE';
|
|
const initial = (item.name || item.phone || '?').slice(0, 1);
|
|
return (
|
|
<li key={item.id} className="shop-staff-item">
|
|
<div className="shop-staff-avatar">{initial}</div>
|
|
<div className="shop-staff-item-body">
|
|
<div className="shop-staff-item-top">
|
|
<strong>{item.name || '未命名'}</strong>
|
|
<span
|
|
className={`shop-staff-status-badge${active ? ' is-active' : ' is-disabled'}`}
|
|
>
|
|
{active ? '启用' : '停用'}
|
|
</span>
|
|
</div>
|
|
<p className="shop-staff-item-meta">{maskPhone(item.phone)}</p>
|
|
<p className="shop-staff-item-meta">
|
|
{STORE_STAFF_ROLE_LABELS[item.staffRole] ?? item.staffRole}
|
|
{item.stores.length
|
|
? ` · ${item.stores.map((s) => s.name).join('、')}`
|
|
: ''}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className={`shop-staff-toggle${active ? '' : ' is-enable'}`}
|
|
onClick={() => void toggleStatus(item)}
|
|
>
|
|
{active ? '停用' : '启用'}
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
{!list.length ? (
|
|
<div className="shop-subpage-empty">
|
|
<span className="material-symbols-outlined">person_off</span>
|
|
<p>暂无子账号</p>
|
|
<button
|
|
type="button"
|
|
className="shop-staff-empty-add"
|
|
onClick={() => setShowForm(true)}
|
|
>
|
|
添加第一个子账号
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|