344 lines
10 KiB
TypeScript
344 lines
10 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
|
|
import { Button, Input } from "antd";
|
|
import { Popup, Checkbox } from "antd-mobile";
|
|
import style from "./index.module.scss";
|
|
import Layout from "@/components/Layout/Layout";
|
|
import PopupHeader from "@/components/PopuLayout/header";
|
|
import PopupFooter from "@/components/PopuLayout/footer";
|
|
import { getContentLibraryList } from "./api";
|
|
|
|
// 内容库接口类型
|
|
interface ContentLibraryItem {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
sourceType?: number; // 1=文本 2=图片 3=视频
|
|
creatorName?: string;
|
|
updateTime?: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
// 类型标签文本
|
|
const getTypeText = (type?: number) => {
|
|
if (type === 1) return "文本";
|
|
if (type === 2) return "图片";
|
|
if (type === 3) return "视频";
|
|
return "未知";
|
|
};
|
|
|
|
// 时间格式化
|
|
const formatDate = (dateStr?: string) => {
|
|
if (!dateStr) return "-";
|
|
const d = new Date(dateStr);
|
|
if (isNaN(d.getTime())) return "-";
|
|
return `${d.getFullYear()}/${(d.getMonth() + 1)
|
|
.toString()
|
|
.padStart(2, "0")}/${d.getDate().toString().padStart(2, "0")} ${d
|
|
.getHours()
|
|
.toString()
|
|
.padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d
|
|
.getSeconds()
|
|
.toString()
|
|
.padStart(2, "0")}`;
|
|
};
|
|
|
|
// 组件属性接口
|
|
interface ContentLibrarySelectionProps {
|
|
selectedLibraries: (string | number)[];
|
|
onSelect: (libraries: string[]) => void;
|
|
onSelectDetail?: (libraries: ContentLibraryItem[]) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
visible?: boolean;
|
|
onVisibleChange?: (visible: boolean) => void;
|
|
selectedListMaxHeight?: number;
|
|
showInput?: boolean;
|
|
showSelectedList?: boolean;
|
|
readonly?: boolean;
|
|
onConfirm?: (
|
|
selectedIds: string[],
|
|
selectedItems: ContentLibraryItem[],
|
|
) => void;
|
|
}
|
|
|
|
export default function ContentLibrarySelection({
|
|
selectedLibraries,
|
|
onSelect,
|
|
onSelectDetail,
|
|
placeholder = "选择内容库",
|
|
className = "",
|
|
visible,
|
|
onVisibleChange,
|
|
selectedListMaxHeight = 300,
|
|
showInput = true,
|
|
showSelectedList = true,
|
|
readonly = false,
|
|
onConfirm,
|
|
}: ContentLibrarySelectionProps) {
|
|
const [popupVisible, setPopupVisible] = useState(false);
|
|
const [libraries, setLibraries] = useState<ContentLibraryItem[]>([]);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalLibraries, setTotalLibraries] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// 获取已选内容库详细信息
|
|
const selectedLibraryObjs = libraries.filter(item =>
|
|
selectedLibraries.includes(item.id),
|
|
);
|
|
|
|
// 删除已选内容库
|
|
const handleRemoveLibrary = (id: string) => {
|
|
if (readonly) return;
|
|
onSelect(selectedLibraries.filter(g => g !== id));
|
|
};
|
|
|
|
// 受控弹窗逻辑
|
|
const realVisible = visible !== undefined ? visible : popupVisible;
|
|
const setRealVisible = (v: boolean) => {
|
|
if (onVisibleChange) onVisibleChange(v);
|
|
if (visible === undefined) setPopupVisible(v);
|
|
};
|
|
|
|
// 打开弹窗
|
|
const openPopup = () => {
|
|
if (readonly) return;
|
|
setCurrentPage(1);
|
|
setSearchQuery("");
|
|
setRealVisible(true);
|
|
fetchLibraries(1, "");
|
|
};
|
|
|
|
// 当页码变化时，拉取对应页数据（弹窗已打开时）
|
|
useEffect(() => {
|
|
if (realVisible && currentPage !== 1) {
|
|
fetchLibraries(currentPage, searchQuery);
|
|
}
|
|
}, [currentPage, realVisible, searchQuery]);
|
|
|
|
// 搜索防抖
|
|
useEffect(() => {
|
|
if (!realVisible) return;
|
|
const timer = setTimeout(() => {
|
|
setCurrentPage(1);
|
|
fetchLibraries(1, searchQuery);
|
|
}, 500);
|
|
return () => clearTimeout(timer);
|
|
}, [searchQuery, realVisible]);
|
|
|
|
// 获取内容库列表API
|
|
const fetchLibraries = async (page: number, keyword: string = "") => {
|
|
setLoading(true);
|
|
try {
|
|
const params: any = {
|
|
page,
|
|
limit: 20,
|
|
};
|
|
if (keyword.trim()) {
|
|
params.keyword = keyword.trim();
|
|
}
|
|
const response = await getContentLibraryList(params);
|
|
if (response && response.list) {
|
|
setLibraries(response.list);
|
|
setTotalLibraries(response.total || 0);
|
|
setTotalPages(Math.ceil((response.total || 0) / 20));
|
|
}
|
|
} catch (error) {
|
|
console.error("获取内容库列表失败:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 处理内容库选择
|
|
const handleLibraryToggle = (libraryId: string) => {
|
|
if (readonly) return;
|
|
const newSelected = selectedLibraries.includes(libraryId)
|
|
? selectedLibraries.filter(id => id !== libraryId)
|
|
: [...selectedLibraries, libraryId];
|
|
onSelect(newSelected);
|
|
if (onSelectDetail) {
|
|
const selectedObjs = libraries.filter(item =>
|
|
newSelected.includes(item.id),
|
|
);
|
|
onSelectDetail(selectedObjs);
|
|
}
|
|
};
|
|
|
|
// 获取显示文本
|
|
const getDisplayText = () => {
|
|
if (selectedLibraries.length === 0) return "";
|
|
return `已选择 ${selectedLibraries.length} 个内容库`;
|
|
};
|
|
|
|
// 确认选择
|
|
const handleConfirm = () => {
|
|
if (onConfirm) {
|
|
onConfirm(selectedLibraries, selectedLibraryObjs);
|
|
}
|
|
setRealVisible(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* 输入框 */}
|
|
{showInput && (
|
|
<div className={`${style.inputWrapper} ${className}`}>
|
|
<Input
|
|
placeholder={placeholder}
|
|
value={getDisplayText()}
|
|
onClick={openPopup}
|
|
prefix={<SearchOutlined />}
|
|
allowClear={!readonly}
|
|
size="large"
|
|
readOnly={readonly}
|
|
disabled={readonly}
|
|
style={
|
|
readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
{/* 已选内容库列表窗口 */}
|
|
{showSelectedList && selectedLibraryObjs.length > 0 && (
|
|
<div
|
|
className={style.selectedListWindow}
|
|
style={{
|
|
maxHeight: selectedListMaxHeight,
|
|
overflowY: "auto",
|
|
marginTop: 8,
|
|
border: "1px solid #e5e6eb",
|
|
borderRadius: 8,
|
|
background: "#fff",
|
|
}}
|
|
>
|
|
{selectedLibraryObjs.map(item => (
|
|
<div
|
|
key={item.id}
|
|
className={style.selectedListRow}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "4px 8px",
|
|
borderBottom: "1px solid #f0f0f0",
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
minWidth: 0,
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
}}
|
|
>
|
|
{item.name || item.id}
|
|
</div>
|
|
{!readonly && (
|
|
<Button
|
|
type="text"
|
|
icon={<DeleteOutlined />}
|
|
size="small"
|
|
style={{
|
|
marginLeft: 4,
|
|
color: "#ff4d4f",
|
|
border: "none",
|
|
background: "none",
|
|
minWidth: 24,
|
|
height: 24,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
onClick={() => handleRemoveLibrary(item.id)}
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* 弹窗 */}
|
|
<Popup
|
|
visible={realVisible && !readonly}
|
|
onMaskClick={() => setRealVisible(false)}
|
|
position="bottom"
|
|
bodyStyle={{ height: "100vh" }}
|
|
>
|
|
<Layout
|
|
header={
|
|
<PopupHeader
|
|
title="选择内容库"
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
searchPlaceholder="搜索内容库"
|
|
loading={loading}
|
|
onRefresh={() => fetchLibraries(currentPage, searchQuery)}
|
|
/>
|
|
}
|
|
footer={
|
|
<PopupFooter
|
|
total={totalLibraries}
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
loading={loading}
|
|
selectedCount={selectedLibraries.length}
|
|
onPageChange={setCurrentPage}
|
|
onCancel={() => setRealVisible(false)}
|
|
onConfirm={handleConfirm}
|
|
/>
|
|
}
|
|
>
|
|
<div className={style.libraryList}>
|
|
{loading ? (
|
|
<div className={style.loadingBox}>
|
|
<div className={style.loadingText}>加载中...</div>
|
|
</div>
|
|
) : libraries.length > 0 ? (
|
|
<div className={style.libraryListInner}>
|
|
{libraries.map(item => (
|
|
<label key={item.id} className={style.libraryItem}>
|
|
<Checkbox
|
|
checked={selectedLibraries.includes(item.id)}
|
|
onChange={() => !readonly && handleLibraryToggle(item.id)}
|
|
disabled={readonly}
|
|
className={style.checkboxWrapper}
|
|
/>
|
|
<div className={style.libraryInfo}>
|
|
<div className={style.libraryHeader}>
|
|
<span className={style.libraryName}>{item.name}</span>
|
|
<span className={style.typeTag}>
|
|
{getTypeText(item.sourceType)}
|
|
</span>
|
|
</div>
|
|
<div className={style.libraryMeta}>
|
|
<div>创建人: {item.creatorName || "-"}</div>
|
|
<div>更新时间: {formatDate(item.updateTime)}</div>
|
|
</div>
|
|
{item.description && (
|
|
<div className={style.libraryDesc}>
|
|
{item.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className={style.emptyBox}>
|
|
<div className={style.emptyText}>
|
|
{searchQuery
|
|
? `没有找到包含"${searchQuery}"的内容库`
|
|
: "没有找到内容库"}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
</Popup>
|
|
</>
|
|
);
|
|
}
|