LSDF/src/pages/ObjectSon/Object1/AddObject1/index.tsx

import AuthButton from "@/components/AuthButton";
import BreadTit from "@/components/BreadTit";
import history, { urlParameter } from "@/utils/history";
import { Input, message, Select, Table, Popconfirm } from "antd";
import TextArea from "antd/es/input/TextArea";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { useLocation } from "react-router-dom";
import styles from "./index.module.scss";
import ObjectAdd from "@/components/ObjectAdd";
import ImageLazy from "@/components/ImageLazy/index";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
function AddObject1() {

  // 从仓库中获取藏品来源下拉数据
  const options = useSelector(
    (state: RootState) => state.loginStore.selectAll["文物来源"]
  );

  // 获取地址栏参数
  const location = useLocation();
  const [urlParam, setUrlParam] = useState<any>({});
  useEffect(() => {
    setUrlParam(urlParameter(location.search));
  }, [location]);

  // 顶部数据
  const [addInfoTop, setAddInfoTop] = useState({
    num: "DJ20221212009",
    user: "admin",
    laiyuan: options[0].name?options[0].name:'',
    txt: "",
  });

  // 藏品来源下拉框
  const handleChange = (value: string) => {
    setAddInfoTop({ ...addInfoTop, laiyuan: value });
  };

  // const tabList = useMemo(() => {
  //   return [
  //     { id: 1, value: "img", label: "高清图片" },
  //     { id: 2, value: "video", label: "视频文件" },
  //     { id: 3, value: "audio", label: "音频文件" },
  //     { id: 4, value: "model", label: "三维模型" },
  //     { id: 5, value: "file", label: "文档资料" },
  //   ];
  // }, []);

  // 表格数据

  // 选中的表格数据
  const [tableSelectList, setTableSelectList] = useState([]);

  // 点击删除
  const delTableListFu = () => {
    console.log("多个删除", tableSelectList);
  };

  const delOne = (id: number) => {
    console.log("单个删除", id);
  };

  const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      setTableSelectList(selectedRows);
    },
  };

  const results = useMemo(() => {
    return [
      {
        id: 1,
        name: "图片1",
        img: "https://ts1.cn.mm.bing.net/th/id/R-C.6d2d3fecd79a96e43d1a410640d7199b?rik=B7RCgF82Vb7P0A&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190831%2f3e03e9c2473c40b180aa99a37c0589fa.jpeg&ehk=JXdgMrjnolHlMkdX9N0K7%2fzBc9wi7FSFDjSGclreQbI%3d&risl=&pid=ImgRaw&r=0",
      },
      { id: 2, name: "图片2", img: "https://ts1.cn.mm" },
      {
        id: 3,
        name: "图片3",
        img: "http://project.4dage.com:8016/content/1_1001/img/20220810_1553241331042.JPG",
      },
      { id: 4, name: "图片4", img: "3" },
      { id: 5, name: "图片4", img: "4" },
      { id: 6, name: "图片4", img: "5" },
      { id: 7, name: "图片4", img: "6" },
      { id: 8, name: "图片4", img: "7" },
      { id: 9, name: "图片4", img: "8" },
      { id: 10, name: "图片4", img: "9" },
      {
        id: 11,
        name: "图片4",
        img: "https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0",
      },
    ];
  }, []);

  const columns = useMemo(() => {
    return [
      {
        title: "缩略图",
        render: (item: any) => (
          <div className="tableImg">
            <ImageLazy width={120} height={70} src={item.img} />
          </div>
        ),
      },
      {
        title: "标题",
        dataIndex: "name",
      },
      {
        title: "操作",
        render: (item: any) => (
          <>
            <AuthButton type="text" danger onClick={() => addPageFu(item.id)}>
              编辑
            </AuthButton>
            <Popconfirm
              title="确定删除吗?"
              okText="确定"
              cancelText="取消"
              onConfirm={() => delOne(item.id)}
            >
              <AuthButton type="text" danger>
                删除
              </AuthButton>
            </Popconfirm>
          </>
        ),
      },
    ];
  }, []);

  // 点击返回
  const cancelFu = () => {
    history.push({
      pathname: `/object`,
      state: { k: urlParam.k ? urlParam.k : "1" },
    });
  };

  // 点击提交
  const submitFu = (val: number) => {
    if (results.length === 0)
      return message.warning("至少需要添加一条藏品信息!");
    // cancelFu()
  };

  // 点击添加或者编辑出来页面
  const [addPage, setAddPage] = useState(true);

  // 点击添加或者编辑

  const addId = useRef<any>(null);

  const addPageFu = (id?: any) => {
    addId.current = id;
    setAddPage(true);
  };



  return (
    <div className={styles.AddObject1}>
      <div className="breadTit">
        <BreadTit>
          <div className="breadTitRow">藏品登记</div>
          <div className="splitStr">/</div>
          <div className="breadTitRow active">
            {urlParam.id ? "编辑" : "新增"}
          </div>
        </BreadTit>
      </div>

      <div className="objectSonMain">
        {/* 上面的信息展示 */}
        <div className="addInfoTop">
          <div className="row">
            <div>
              <span className="bs">登记编号：</span>
              <Input style={{ width: 400 }} value={addInfoTop.num} disabled />
            </div>
            <div>
              <span className="bs">登记人员：</span>
              <Input style={{ width: 400 }} value={addInfoTop.user} disabled />
            </div>
          </div>
          <div className="row">
            <div>
              <span className="bs">藏品来源：</span>
              <Select
                placeholder="请选择"
                style={{ width: 400 }}
                value={addInfoTop.laiyuan}
                onChange={handleChange}
                options={options.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </div>
          </div>
          <div className="rowAll">
            <span>登记说明：</span>
            <TextArea
              value={addInfoTop.txt}
              onChange={(e) =>
                setAddInfoTop({ ...addInfoTop, txt: e.target.value })
              }
              rows={3}
              placeholder="请输入"
              showCount
              maxLength={255}
            />
          </div>
        </div>

        {/* 下面的表格 */}
        <div className="addTableBox">
          <div className="addTableBox_Tit">
            <div className="addTableBox_TitL">藏品信息</div>
            <div className="addTableBox_TitR">
              <AuthButton onClick={() => addPageFu(null)}>添加</AuthButton>
              &emsp;
              <Popconfirm
                title="确定删除吗?"
                okText="确定"
                cancelText="取消"
                onConfirm={delTableListFu}
              >
                <AuthButton disabled={tableSelectList.length === 0}>
                  删除
                </AuthButton>
              </Popconfirm>
            </div>
          </div>
          {/* 表格主体 */}
          <div className="addTableBox_table">
            <Table
              scroll={{ y: 280 }}
              rowSelection={{
                type: "checkbox",
                ...rowSelection,
              }}
              dataSource={results}
              columns={columns}
              rowKey="id"
              pagination={false}
            />
          </div>
          <div className="addTableBox_btn">
            <AuthButton onClick={() => submitFu(1)}>存入草稿</AuthButton>
            &emsp;
            <AuthButton type="primary" onClick={() => submitFu(1)}>
              提交
            </AuthButton>
            &emsp;
            <AuthButton onClick={cancelFu}>返回</AuthButton>
          </div>
        </div>
      </div>
      {/* 点击添加或者编辑出来的页面 */}
      {addPage ? (
        <ObjectAdd id={addId.current} colsePage={() => setAddPage(false)} />
      ) : null}
    </div>
  );
}

const MemoAddObject1 = React.memo(AddObject1);

export default MemoAddObject1;