LSDF/src/components/ObjectAdd/index.tsx

import {
  Button,
  Cascader,
  Form,
  Input,
  InputNumber,
  message,
  Modal,
  Select,
} from "antd";
import React, { useRef, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import "./index.css";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
const { Option } = Select;

type Props = {
  id: any;
  colsePage: any;
};

function ObjectAdd({ id, colsePage }: Props) {
  // 没有通过校验
  const onFinishFailed = () => {
    return message.warning("有表单不符号规则!");
  };
  // 通过校验之后发送请求
  const onFinish = async (values: any) => {
    console.log("具体质量的单位", danweiValue);

    console.log("--点击确定存到仓库", values);
  };

  // 选择商品信息还是附近（默认商品信息）
  const [titSelect, setTitSelect] = useState("tit1");

  // 从仓库中获取各下拉数据
  const options1 = useSelector(
    (state: RootState) => state.loginStore.selectAll["藏品编号名称"]
  );

  const options2 = useSelector(
    (state: RootState) => state.loginStore.selectAll["年代"]
  );
  const options3 = useSelector(
    (state: RootState) => state.loginStore.selectAll["质地"]
  );
  const options4 = useSelector(
    (state: RootState) => state.loginStore.selectAll["文物类别"]
  );
  const options5 = useSelector(
    (state: RootState) => state.loginStore.selectAll["文物级别"]
  );
  const options6 = useSelector(
    (state: RootState) => state.loginStore.selectAll["质量范围"]
  );
  const options7 = useSelector(
    (state: RootState) => state.loginStore.selectAll["完残程度"]
  );
  const options8 = useSelector(
    (state: RootState) => state.loginStore.selectAll["保存状态"]
  );

  // 单位选择
  const [danweiValue, setDanweiValue] = useState("kg");

  // 设置表单初始数据（区分编辑和新增）

  const defaultData = useRef<any>(null);
  if (id) {
    defaultData.current = {
      name1: "编辑",
      name3: "索书号",
      name5: ["其他"],
    };
  } else {
    defaultData.current = {
      name3: options1[0].name ? options1[0].name : null,
      name5: ["地质年代", "显生宙", "新生代", "第四纪"],
      name6: ["单一质地", "有机质", "竹"],
      name8: options4[0].name ? options4[0].name : null,
      name10: options5[0].name ? options5[0].name : null,
      name15: options6[0].name ? options6[0].name : null,
      name17: options7[0].name ? options7[0].name : null,
    };
  }

  return (
    <div className={styles.ObjectAdd}>
      <Modal
        wrapClassName="ObjectAdd"
        destroyOnClose
        open={true}
        title={id ? "编辑藏品" : "添加藏品"}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        {/* 商品信息和附件切换 */}
        <div className="ObjectAddTit">
          <div
            onClick={() => setTitSelect("tit1")}
            className={classNames(titSelect === "tit1" ? "active" : "")}
          >
            商品信息
          </div>
          <div
            onClick={() => setTitSelect("tit2")}
            className={classNames(
              "ObjectAddTitTow",
              titSelect === "tit2" ? "active" : ""
            )}
          >
            附件
          </div>
        </div>

        <Form
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={defaultData.current}
        >
          <div className="formRow">
            <Form.Item
              label="藏品名称"
              name="name1"
              rules={[{ required: true, message: "不能为空!" }]}
            >
              <Input maxLength={50} showCount placeholder="请输入" />
            </Form.Item>
            <Form.Item label="原名" name="name2">
              <Input maxLength={50} showCount placeholder="请输入" />
            </Form.Item>
          </div>

          <div className="formRow">
            <div className="bs">*</div>
            <Form.Item label="藏品编号名称" name="name3">
              <Select
                placeholder="请选择"
                options={options1.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </Form.Item>
            <Form.Item label="藏品编号" name="name4">
              <Input maxLength={50} showCount placeholder="请输入" />
            </Form.Item>
          </div>

          <div className="formRow">
            <div className="bs bs2">*</div>
            <div className="bs bs3">*</div>
            <Form.Item label="年代" name="name5">
              <Cascader
                allowClear={false}
                fieldNames={{
                  label: "name",
                  value: "name",
                  children: "children",
                }}
                options={options2}
                placeholder="请选择"
              />
            </Form.Item>
            <Form.Item label="文物质地" name="name6">
              <Cascader
                allowClear={false}
                fieldNames={{
                  label: "name",
                  value: "name",
                  children: "children",
                }}
                options={options3}
                placeholder="请选择"
              />
            </Form.Item>
          </div>

          <div className="formRow">
            <div className="bs bs3">*</div>
            <Form.Item label="具体年代" name="name7">
              <Input maxLength={50} showCount placeholder="请输入" />
            </Form.Item>
            <Form.Item label="文物类别" name="name8">
              <Select
                placeholder="请选择"
                options={options4.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </Form.Item>
          </div>

          <div className="formRow">
            <div className="bs bs3">*</div>
            <Form.Item
              rules={[{ required: true, message: "不能为空!" }]}
              label="实际数量"
              name="name9"
            >
              <InputNumber maxLength={8} placeholder="请输入数字" />
            </Form.Item>
            <Form.Item label="文物级别" name="name10">
              <Select
                placeholder="请选择"
                options={options5.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </Form.Item>
          </div>

          <div className="formRow formRowThree">
            <Form.Item
              rules={[{ required: true, message: "不能为空!" }]}
              label="外形尺寸"
              name="name11"
            >
              <InputNumber maxLength={8} placeholder="通长" addonAfter="cm" />
            </Form.Item>
            <Form.Item
              rules={[{ required: true, message: "不能为空!" }]}
              label=""
              name="name12"
            >
              <InputNumber maxLength={8} placeholder="通宽" addonAfter="cm" />
            </Form.Item>
            <Form.Item
              className="formRowThreeRow"
              rules={[{ required: true, message: "不能为空!" }]}
              label=""
              name="name13"
            >
              <InputNumber maxLength={8} placeholder="通高" addonAfter="cm" />
            </Form.Item>
          </div>

          <div className="formRow formRowFull">
            <Form.Item
              label="具体尺寸"
              name="name14"
              rules={[{ required: true, message: "不能为空!" }]}
            >
              <Input maxLength={50} showCount placeholder="请输入" />
            </Form.Item>
          </div>

          <div className="formRow">
            <div className="bs bs4">*</div>
            <Form.Item label="质量范围" name="name15">
              <Select
                placeholder="请选择"
                options={options6.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </Form.Item>
            <Form.Item className="formRowSelec" label="具体质量" name="name16">
              <InputNumber
                maxLength={8}
                placeholder="请输入"
                addonAfter={
                  <Select
                    value={danweiValue}
                    onChange={(val) => setDanweiValue(val)}
                  >
                    <Option value="kg">kg</Option>
                    <Option value="g">g</Option>
                  </Select>
                }
              />
              {/* <div className="formRowSelecSon">
                
              </div> */}
            </Form.Item>
          </div>

          <div className="formRow">
            <div className="bs bs4">*</div>
            <Form.Item label="完残程度" name="name17">
              <Select
                placeholder="请选择"
                options={options7.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </Form.Item>
            <Form.Item label="保存状态" name="name18">
              <Select
                placeholder="请选择"
                options={options8.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </Form.Item>
          </div>

          <br />
          <Form.Item wrapperCol={{ offset: 20 }}>
            <Button onClick={colsePage}>取消</Button>
            &emsp;
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

const MemoObjectAdd = React.memo(ObjectAdd);

export default MemoObjectAdd;