|
|
@@ -1,12 +1,533 @@
|
|
|
-import React from "react";
|
|
|
+import { RootState } from "@/store";
|
|
|
+import {
|
|
|
+ getGoodsListDeriveAPI,
|
|
|
+ getGoodsListAPI,
|
|
|
+ goodsDisplayAPI,
|
|
|
+ goodsRemoveAPI,
|
|
|
+} from "@/store/action/B2Goods";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import {
|
|
|
+ Input,
|
|
|
+ Select,
|
|
|
+ DatePicker,
|
|
|
+ Button,
|
|
|
+ Table,
|
|
|
+ Switch,
|
|
|
+ Popconfirm,
|
|
|
+} from "antd";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
import styles from "./index.module.scss";
|
|
|
- function Goods() {
|
|
|
-
|
|
|
+import ExportJsonExcel from "js-export-excel";
|
|
|
+import ImageLazy from "@/components/ImageLazy";
|
|
|
+
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
+function Goods() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+ const pageNumRef = useRef(1);
|
|
|
+ const pagePageRef = useRef(10);
|
|
|
+
|
|
|
+ // 从仓库获取下拉列表数据
|
|
|
+ const dictList = useSelector((state: RootState) => state.loginStore.dictList);
|
|
|
+
|
|
|
+ // 从仓库获取表格列表信息
|
|
|
+ const tableInfo = useSelector(
|
|
|
+ (state: RootState) => state.goodsReducer.tableInfo
|
|
|
+ );
|
|
|
+
|
|
|
+ // 顶部筛选
|
|
|
+ const [tableSelect, setTableSelect] = useState({
|
|
|
+ name: "",
|
|
|
+ num: "",
|
|
|
+ dictTexture: "",
|
|
|
+ dictAge: "",
|
|
|
+ dictLevel: "",
|
|
|
+ dictSource: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ topic: -1,
|
|
|
+ display: -1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ aaaaa: -1,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 封装发送请求的函数
|
|
|
+
|
|
|
+ const getList = useCallback(async () => {
|
|
|
+ const data = {
|
|
|
+ ...tableSelect,
|
|
|
+ topic: tableSelect.topic === -1 ? null : tableSelect.topic,
|
|
|
+ display: tableSelect.display === -1 ? null : tableSelect.display,
|
|
|
+ aaaaa: tableSelect.aaaaa === -1 ? null : tableSelect.aaaaa,
|
|
|
+ pageNum: pageNumRef.current,
|
|
|
+ };
|
|
|
+ dispatch(getGoodsListAPI(data));
|
|
|
+ }, [dispatch, tableSelect]);
|
|
|
+
|
|
|
+ // 当前页码统一
|
|
|
+ useEffect(() => {
|
|
|
+ pageNumRef.current = tableSelect.pageNum;
|
|
|
+ pagePageRef.current = tableSelect.pageSize;
|
|
|
+ }, [tableSelect.pageNum, tableSelect.pageSize]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getList();
|
|
|
+ }, [getList]);
|
|
|
+
|
|
|
+ // 名称的输入
|
|
|
+ const nameTime = useRef(-1);
|
|
|
+ const nameChange = useCallback(
|
|
|
+ (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ clearTimeout(nameTime.current);
|
|
|
+ nameTime.current = window.setTimeout(() => {
|
|
|
+ setTableSelect({
|
|
|
+ ...tableSelect,
|
|
|
+ name: e.target.value,
|
|
|
+ pageNum: 1,
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ [tableSelect]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 登记编号的输入
|
|
|
+ const numTime = useRef(-1);
|
|
|
+ const numChange = useCallback(
|
|
|
+ (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ clearTimeout(numTime.current);
|
|
|
+ numTime.current = window.setTimeout(() => {
|
|
|
+ setTableSelect({
|
|
|
+ ...tableSelect,
|
|
|
+ num: e.target.value,
|
|
|
+ pageNum: 1,
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ [tableSelect]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 时间选择器改变
|
|
|
+ const timeChange = (date: any, dateString: any) => {
|
|
|
+ let startTime = "";
|
|
|
+ let endTime = "";
|
|
|
+ if (dateString[0] && dateString[1]) {
|
|
|
+ startTime = dateString[0] + " 00:00:00";
|
|
|
+ endTime = dateString[1] + " 23:59:59";
|
|
|
+ }
|
|
|
+ setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 点击重置
|
|
|
+ const [inputKey, setInputKey] = useState(1);
|
|
|
+ const resetSelectFu = useCallback(() => {
|
|
|
+ // 把2个输入框和时间选择器清空
|
|
|
+ setInputKey(Date.now());
|
|
|
+ setTableSelect({
|
|
|
+ name: "",
|
|
|
+ num: "",
|
|
|
+ dictTexture: "",
|
|
|
+ dictAge: "",
|
|
|
+ dictLevel: "",
|
|
|
+ dictSource: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ topic: -1,
|
|
|
+ display: -1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ aaaaa: -1,
|
|
|
+ });
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 点击导出
|
|
|
+ const deriveFu = useCallback(async () => {
|
|
|
+ if (tableInfo.list.length === 0)
|
|
|
+ return MessageFu.warning("当前搜索条件没有数据!");
|
|
|
+
|
|
|
+ const data = {
|
|
|
+ ...tableSelect,
|
|
|
+ topic: tableSelect.topic === -1 ? null : tableSelect.topic,
|
|
|
+ display: tableSelect.display === -1 ? null : tableSelect.display,
|
|
|
+ aaaaa: tableSelect.aaaaa === -1 ? null : tableSelect.aaaaa,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 9999,
|
|
|
+ };
|
|
|
+
|
|
|
+ const res = await getGoodsListDeriveAPI(data);
|
|
|
+
|
|
|
+ if (res.code === 0) {
|
|
|
+ const name = dayjs(new Date()).format("YYYYMMDD");
|
|
|
+
|
|
|
+ const resData = res.data.records;
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ fileName: name,
|
|
|
+ datas: [
|
|
|
+ {
|
|
|
+ sheetData: resData.map((v: any, i: number) => {
|
|
|
+ return {
|
|
|
+ index: i + 1,
|
|
|
+ ...v,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ sheetName: name,
|
|
|
+ sheetFilter: [
|
|
|
+ "index",
|
|
|
+ "name",
|
|
|
+ "num",
|
|
|
+ "dictTexture",
|
|
|
+ "dictAge",
|
|
|
+ "dictLevel",
|
|
|
+ "dictSource",
|
|
|
+ "description",
|
|
|
+ "updateTime",
|
|
|
+ "topic",
|
|
|
+ "display",
|
|
|
+ "aaaaa",
|
|
|
+ ],
|
|
|
+ sheetHeader: [
|
|
|
+ "序号",
|
|
|
+ "名称",
|
|
|
+ "登记编号",
|
|
|
+ "类别",
|
|
|
+ "年代",
|
|
|
+ "级别",
|
|
|
+ "来源",
|
|
|
+ "简介",
|
|
|
+ "最近编辑时间",
|
|
|
+ "万物墙主题",
|
|
|
+ "展示状态",
|
|
|
+ "弹幕留言",
|
|
|
+ ],
|
|
|
+ // columnWidths: [5, 20, 5],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ const toExcel = new ExportJsonExcel(option); //new
|
|
|
+ toExcel.saveExcel(); //保存
|
|
|
+ }
|
|
|
+ }, [tableInfo.list.length, tableSelect]);
|
|
|
+
|
|
|
+ // ----------关于表格的数据
|
|
|
+
|
|
|
+ // 页码变化
|
|
|
+ const paginationChange = useCallback(
|
|
|
+ () => (pageNum: number, pageSize: number) => {
|
|
|
+ pageNumRef.current = pageNum;
|
|
|
+ pagePageRef.current = pageSize;
|
|
|
+ setTableSelect({ ...tableSelect, pageNum, pageSize });
|
|
|
+ },
|
|
|
+ [tableSelect]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 切换表格中的启用停用状态
|
|
|
+ const isEnabledClickFu = useCallback(
|
|
|
+ async (val: boolean, id: number) => {
|
|
|
+ const isDisable = val ? 1 : 0;
|
|
|
+ const res: any = await goodsDisplayAPI(id, isDisable);
|
|
|
+ if (res.code === 0) getList();
|
|
|
+ },
|
|
|
+ [getList]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 点击编辑
|
|
|
+ const openEditPageFu = useCallback((id: number) => {
|
|
|
+ console.log("点击了编辑", id);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 点击删除
|
|
|
+ const delTableFu = useCallback(
|
|
|
+ async (id: number) => {
|
|
|
+ const res: any = await goodsRemoveAPI(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success("删除成功!");
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [getList]
|
|
|
+ );
|
|
|
+
|
|
|
+ const columns = useMemo(() => {
|
|
|
+ return [
|
|
|
+ // {
|
|
|
+ // width: 80,
|
|
|
+ // title: "序号",
|
|
|
+ // render: (text: any, record: any, index: any) =>
|
|
|
+ // index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: "名称",
|
|
|
+ dataIndex: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "登记编号",
|
|
|
+ render:(item:any)=>(item.num?item.num:'（空）')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "类别",
|
|
|
+ dataIndex: "dictTexture",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "年代",
|
|
|
+ dataIndex: "dictAge",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "级别",
|
|
|
+ dataIndex: "dictLevel",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "来源",
|
|
|
+ dataIndex: "dictSource",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "简介",
|
|
|
+ render: (item: any) =>
|
|
|
+ item.description ? (
|
|
|
+ item.description.length >= 20 ? (
|
|
|
+ <span style={{ cursor: "pointer" }} title={item.description}>
|
|
|
+ {item.description.substring(0, 20) + "..."}
|
|
|
+ </span>
|
|
|
+ ) : (
|
|
|
+ item.description
|
|
|
+ )
|
|
|
+ ) : (
|
|
|
+ "（空）"
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "封面图",
|
|
|
+ render: (item: any) => (
|
|
|
+ <div className="tableImgAuto">
|
|
|
+ <ImageLazy width={60} height={60} src={item.thumb!} />
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: "类型",
|
|
|
+ // render: (item: any) => typeChangeObj[item.type!],
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: "最近编辑时间",
|
|
|
+ dataIndex: "updateTime",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "展示状态",
|
|
|
+ render: (item: any) => (
|
|
|
+ <Switch
|
|
|
+ checkedChildren="启用"
|
|
|
+ unCheckedChildren="停用"
|
|
|
+ checked={item.display === 1}
|
|
|
+ onChange={(val) => isEnabledClickFu(val, item.id!)}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "万物墙主题",
|
|
|
+ render: (item: any) => (item.topic === 1 ? "珍品" : "精品"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (item: any) => (
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ onClick={() => openEditPageFu(item.id!)}
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </Button>
|
|
|
+ <Popconfirm
|
|
|
+ title="删除后无法恢复，是否删除?"
|
|
|
+ okText="删除"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => delTableFu(item.id!)}
|
|
|
+ >
|
|
|
+ <Button size="small" type="text" danger>
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
+ </Popconfirm>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }, [delTableFu, isEnabledClickFu, openEditPageFu]);
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.Goods}>
|
|
|
- <h1>Goods</h1>
|
|
|
+ <div className="pageTitlt">馆藏管理</div>
|
|
|
+ {/* 搜索信息 */}
|
|
|
+ <div className="searchBox">
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>名称：</span>
|
|
|
+ <Input
|
|
|
+ key={inputKey}
|
|
|
+ maxLength={10}
|
|
|
+ style={{ width: 150 }}
|
|
|
+ placeholder="请输入"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => nameChange(e)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>登记编号：</span>
|
|
|
+ <Input
|
|
|
+ key={inputKey}
|
|
|
+ maxLength={20}
|
|
|
+ style={{ width: 150 }}
|
|
|
+ placeholder="请输入"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => numChange(e)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>类别：</span>
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 160 }}
|
|
|
+ value={tableSelect.dictTexture}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, dictTexture: e, pageNum: 1 })
|
|
|
+ }
|
|
|
+ options={dictList["texture"]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>年代：</span>
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 150 }}
|
|
|
+ value={tableSelect.dictAge}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, dictAge: e, pageNum: 1 })
|
|
|
+ }
|
|
|
+ options={dictList["age"]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>级别：</span>
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 135 }}
|
|
|
+ value={tableSelect.dictLevel}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, dictLevel: e, pageNum: 1 })
|
|
|
+ }
|
|
|
+ options={dictList["level"]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>来源：</span>
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 135 }}
|
|
|
+ value={tableSelect.dictSource}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, dictSource: e, pageNum: 1 })
|
|
|
+ }
|
|
|
+ options={dictList["source"]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>最近编辑日期：</span>
|
|
|
+ <RangePicker
|
|
|
+ style={{ width: 240 }}
|
|
|
+ key={inputKey}
|
|
|
+ onChange={timeChange}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>万物墙：</span>
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 100 }}
|
|
|
+ value={tableSelect.topic}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, topic: e, pageNum: 1 })
|
|
|
+ }
|
|
|
+ options={[
|
|
|
+ { value: -1, label: "全部" },
|
|
|
+ { value: 1, label: "战争" },
|
|
|
+ { value: 2, label: "生活" },
|
|
|
+ { value: 3, label: "不展示" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>展示状态：</span>
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 100 }}
|
|
|
+ value={tableSelect.display}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, display: e, pageNum: 1 })
|
|
|
+ }
|
|
|
+ options={[
|
|
|
+ { value: -1, label: "全部" },
|
|
|
+ { value: 1, label: "开启" },
|
|
|
+ { value: 0, label: "关闭" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <span>弹幕留言：</span>
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 100 }}
|
|
|
+ value={tableSelect.aaaaa}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, aaaaa: e, pageNum: 1 })
|
|
|
+ }
|
|
|
+ options={[
|
|
|
+ { value: -1, label: "全部" },
|
|
|
+ { value: 1, label: "开启" },
|
|
|
+ { value: 0, label: "关闭" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="searchRow">
|
|
|
+ <Button onClick={resetSelectFu}>重置</Button> 
|
|
|
+ <Button onClick={deriveFu}>批量导出</Button> 
|
|
|
+ <Button>弹幕设置</Button> 
|
|
|
+ <Button type="primary">新增</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/* 表格主体 */}
|
|
|
+ <div className="tableBox">
|
|
|
+ <Table
|
|
|
+ scroll={{ y: 560 }}
|
|
|
+ dataSource={tableInfo.list}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={{
|
|
|
+ showQuickJumper: true,
|
|
|
+ position: ["bottomCenter"],
|
|
|
+ showSizeChanger: true,
|
|
|
+ current: tableSelect.pageNum,
|
|
|
+ pageSize: tableSelect.pageSize,
|
|
|
+ total: tableInfo.total,
|
|
|
+ onChange: paginationChange(),
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- )
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
const MemoGoods = React.memo(Goods);
|
