|
|
@@ -1,166 +1,150 @@
|
|
|
-import { Button, Input, Modal, Table } from "antd";
|
|
|
-import React, {
|
|
|
- useCallback,
|
|
|
- useEffect,
|
|
|
- useMemo,
|
|
|
- useRef,
|
|
|
- useState,
|
|
|
-} from "react";
|
|
|
-import styles from "./index.module.scss";
|
|
|
-import "./GoodsAll.css";
|
|
|
-import { getGoodsListAllAPI } from "@/store/action/object3";
|
|
|
-import { useDispatch, useSelector } from "react-redux";
|
|
|
-import { RootState } from "@/store";
|
|
|
-import ImageLazy from "@/components/ImageLazy";
|
|
|
-import { MessageFu } from "@/utils/message";
|
|
|
+import { Button, Input, Modal, Table } from 'antd'
|
|
|
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
|
+import styles from './index.module.scss'
|
|
|
+import './GoodsAll.css'
|
|
|
+import { getGoodsListAllAPI } from '@/store/action/object3'
|
|
|
+import { useDispatch, useSelector } from 'react-redux'
|
|
|
+import { RootState } from '@/store'
|
|
|
+import ImageLazy from '@/components/ImageLazy'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
|
|
|
type Props = {
|
|
|
- colsePage: any;
|
|
|
- addPage:boolean
|
|
|
-};
|
|
|
-function GoodsAll({ colsePage,addPage }: Props) {
|
|
|
- const dispatch = useDispatch();
|
|
|
+ colsePage: any
|
|
|
+ addPage: boolean
|
|
|
+}
|
|
|
+function GoodsAll({ colsePage, addPage }: Props) {
|
|
|
+ const dispatch = useDispatch()
|
|
|
|
|
|
// 进页面获取列表
|
|
|
useEffect(() => {
|
|
|
- dispatch(getGoodsListAllAPI(""));
|
|
|
- }, [dispatch]);
|
|
|
+ dispatch(getGoodsListAllAPI(''))
|
|
|
+ }, [dispatch])
|
|
|
|
|
|
// 藏品名称
|
|
|
- const [name, setName] = useState("");
|
|
|
- const nameTime = useRef(-1);
|
|
|
+ const [name, setName] = useState('')
|
|
|
+ const nameTime = useRef(-1)
|
|
|
const nameChange = useCallback(
|
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
- setName(e.target.value);
|
|
|
- clearTimeout(nameTime.current);
|
|
|
+ setName(e.target.value)
|
|
|
+ clearTimeout(nameTime.current)
|
|
|
nameTime.current = window.setTimeout(() => {
|
|
|
- dispatch(getGoodsListAllAPI(e.target.value));
|
|
|
- }, 500);
|
|
|
+ dispatch(getGoodsListAllAPI(e.target.value))
|
|
|
+ }, 500)
|
|
|
},
|
|
|
[dispatch]
|
|
|
- );
|
|
|
+ )
|
|
|
|
|
|
// 有关表格
|
|
|
- const results = useSelector(
|
|
|
- (state: RootState) => state.object3Store.goodsAllList
|
|
|
- );
|
|
|
+ const results = useSelector((state: RootState) => state.object3Store.goodsAllList)
|
|
|
|
|
|
// 已经选中的表格数据
|
|
|
- const resultsAc = useSelector(
|
|
|
- (state: RootState) => state.object3Store.goodsTableList
|
|
|
- );
|
|
|
+ const resultsAc = useSelector((state: RootState) => state.object3Store.goodsTableList)
|
|
|
|
|
|
const columns = useMemo(() => {
|
|
|
return [
|
|
|
{
|
|
|
- title: "缩略图",
|
|
|
- render: (item: any) => (
|
|
|
- <ImageLazy width={120} height={70} src={item.thumb} />
|
|
|
- ),
|
|
|
+ title: '缩略图',
|
|
|
+ render: (item: any) => <ImageLazy width={120} height={70} src={item.thumb} />
|
|
|
},
|
|
|
{
|
|
|
- title: "藏品编号名称",
|
|
|
- dataIndex: "dictNum",
|
|
|
+ title: '藏品编号名称',
|
|
|
+ dataIndex: 'dictNum'
|
|
|
},
|
|
|
{
|
|
|
- title: "藏品编号",
|
|
|
- render: (item: any) => (item.num ? item.num : "-"),
|
|
|
+ title: '藏品编号',
|
|
|
+ render: (item: any) => (item.num ? item.num : '-')
|
|
|
},
|
|
|
{
|
|
|
- title: "藏品名称",
|
|
|
- dataIndex: "name",
|
|
|
+ title: '藏品名称',
|
|
|
+ dataIndex: 'name'
|
|
|
},
|
|
|
{
|
|
|
- title: "类别",
|
|
|
- dataIndex: "dictGoodType",
|
|
|
- },
|
|
|
- ];
|
|
|
- }, []);
|
|
|
+ title: '类别',
|
|
|
+ dataIndex: 'dictGoodType'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, [])
|
|
|
|
|
|
// 选中的表格数据
|
|
|
- const [tableSelectList, setTableSelectList] = useState([]);
|
|
|
+ const [tableSelectList, setTableSelectList] = useState([])
|
|
|
// 表格的多选
|
|
|
|
|
|
const rowSelection = useMemo(() => {
|
|
|
return {
|
|
|
onChange: (selectedRowKeys: any, selectedRows: any) => {
|
|
|
- setTableSelectList(selectedRows);
|
|
|
+ setTableSelectList(selectedRows)
|
|
|
},
|
|
|
// 默认选中
|
|
|
- defaultSelectedRowKeys: resultsAc.map((v: any) => v.id),
|
|
|
- };
|
|
|
- }, [resultsAc]);
|
|
|
+ defaultSelectedRowKeys: resultsAc.map((v: any) => v.id)
|
|
|
+ }
|
|
|
+ }, [resultsAc])
|
|
|
|
|
|
// 点击确定
|
|
|
const btnOkFu = useCallback(() => {
|
|
|
dispatch({
|
|
|
- type: "object3/getGoodsTableList",
|
|
|
+ type: 'object3/getGoodsTableList',
|
|
|
payload: tableSelectList.map((v: any) => {
|
|
|
return {
|
|
|
...v,
|
|
|
- storageAncestor: "",
|
|
|
- storageAncestorName: "",
|
|
|
- };
|
|
|
- }),
|
|
|
- });
|
|
|
- MessageFu.success("添加成功!");
|
|
|
- colsePage();
|
|
|
- }, [colsePage, dispatch, tableSelectList]);
|
|
|
+ storageAncestor: '',
|
|
|
+ storageAncestorName: ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ MessageFu.success('添加成功!')
|
|
|
+ colsePage()
|
|
|
+ }, [colsePage, dispatch, tableSelectList])
|
|
|
|
|
|
return (
|
|
|
<div className={styles.GoodsAll}>
|
|
|
<Modal
|
|
|
open={addPage}
|
|
|
destroyOnClose
|
|
|
- wrapClassName="GoodsAllModel"
|
|
|
- title="添加藏品"
|
|
|
+ wrapClassName='GoodsAllModel'
|
|
|
+ title='添加藏品'
|
|
|
onCancel={colsePage}
|
|
|
footer={
|
|
|
[] // 设置footer为空，去掉 取消 确定默认按钮
|
|
|
}
|
|
|
>
|
|
|
- <div className="ObjectAddTit">
|
|
|
- <div className="topSearch">
|
|
|
- <span>藏品名称：</span>
|
|
|
+ <div className='ObjectAddTit'>
|
|
|
+ <div className='topSearch'>
|
|
|
+ <span>藏品编号：</span>
|
|
|
<Input
|
|
|
value={name}
|
|
|
maxLength={10}
|
|
|
style={{ width: 300 }}
|
|
|
- placeholder="请输入"
|
|
|
+ placeholder='请输入'
|
|
|
allowClear
|
|
|
- onChange={(e) => nameChange(e)}
|
|
|
+ onChange={e => nameChange(e)}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div className="tableBox">
|
|
|
+ <div className='tableBox'>
|
|
|
<Table
|
|
|
- size="small"
|
|
|
+ size='small'
|
|
|
scroll={{ y: 500 }}
|
|
|
rowSelection={{
|
|
|
- type: "checkbox",
|
|
|
- ...rowSelection,
|
|
|
+ type: 'checkbox',
|
|
|
+ ...rowSelection
|
|
|
}}
|
|
|
dataSource={results}
|
|
|
columns={columns}
|
|
|
- rowKey="id"
|
|
|
+ rowKey='id'
|
|
|
pagination={false}
|
|
|
/>
|
|
|
</div>
|
|
|
<br />
|
|
|
- <div className="moveBtn">
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- onClick={btnOkFu}
|
|
|
- disabled={tableSelectList.length === 0}
|
|
|
- >
|
|
|
+ <div className='moveBtn'>
|
|
|
+ <Button type='primary' onClick={btnOkFu} disabled={tableSelectList.length === 0}>
|
|
|
提交
|
|
|
</Button>
|
|
|
</div>
|
|
|
</Modal>
|
|
|
</div>
|
|
|
- );
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-const MemoGoodsAll = React.memo(GoodsAll);
|
|
|
+const MemoGoodsAll = React.memo(GoodsAll)
|
|
|
|
|
|
-export default MemoGoodsAll;
|
|
|
+export default MemoGoodsAll
|
