upp

src/components/ObjectAdd/index.css

@@ -27,5 +27,65 @@
   display: none;
 }
 .ObjectAdd .ant-modal {
-  width: 1200px !important;
+  width: 1000px !important;
+}
+.ObjectAdd .formRow {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+.ObjectAdd .formRow .bs {
+  position: absolute;
+  top: 7px;
+  left: 11px;
+  z-index: 10;
+  color: #ff4d4f;
+}
+.ObjectAdd .formRow .bs2 {
+  left: 70px;
+}
+.ObjectAdd .formRow .bs3 {
+  left: 516px;
+}
+.ObjectAdd .formRow .bs4 {
+  left: 39px;
+}
+.ObjectAdd .formRow .ant-form-item-label {
+  width: 119px;
+}
+.ObjectAdd .formRow .ant-form-item {
+  width: 50%;
+}
+.ObjectAdd .formRow .ant-form-item input {
+  width: 350px;
+}
+.ObjectAdd .formRow .ant-form-item .ant-select-in-form-item {
+  width: 358px;
+}
+.ObjectAdd .formRow .ant-form-item .ant-input-number {
+  width: 358px;
+}
+.ObjectAdd .formRow .formRowSelec input {
+  width: 298px;
+}
+.ObjectAdd .formRowThree .formRowThreeRow {
+  margin-left: -120px;
+}
+.ObjectAdd .formRowThree .ant-form-item {
+  width: 25.5%;
+}
+.ObjectAdd .formRowThree .ant-form-item input {
+  width: 200px;
+}
+.ObjectAdd .formRowThree .ant-form-item .ant-input-number {
+  width: 200px;
+}
+.ObjectAdd .formRowFull .ant-form-item {
+  width: 100%;
+}
+.ObjectAdd .formRowFull .ant-form-item input {
+  width: 850px;
+}
+.ObjectAdd .formRowFull .ant-form-item .ant-select-in-form-item {
+  width: 858px;
 }

src/components/ObjectAdd/index.less

@@ -1,14 +1,15 @@
 /* 添加新藏品的弹出框 */
 .ObjectAdd {
-  
-  .ObjectAddTit{
+
+  .ObjectAddTit {
     border-top: 1px solid #999999;
     padding-top: 15px;
     width: 100%;
     height: 45px;
     display: flex;
     margin-bottom: 15px;
-    &>div{
+
+    &>div {
       cursor: pointer;
       width: 50%;
       height: 30px;
@@ -17,10 +18,12 @@
       line-height: 28px;
       border-radius: 5px 0 0 5px;
     }
-    .ObjectAddTitTow{
+
+    .ObjectAddTitTow {
       border-radius: 0 5px 5px 0;
     }
-    .active{
+
+    .active {
       background-color: var(--themeColor);
       color: #fff;
     }
@@ -31,6 +34,95 @@
   }
 
   .ant-modal {
-    width: 1200px !important;
+    width: 1000px !important;
+  }
+
+  .formRow {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+
+    .bs {
+      position: absolute;
+      top: 7px;
+      left: 11px;
+      z-index: 10;
+      color: #ff4d4f;
+    }
+
+    .bs2 {
+      left: 70px;
+    }
+
+    .bs3 {
+      left: 516px;
+    }
+
+    .bs4 {
+      left: 39px;
+    }
+
+    .ant-form-item-label {
+      width: 119px;
+    }
+
+    .ant-form-item {
+      width: 50%;
+
+      input {
+        width: 350px;
+      }
+
+      .ant-select-in-form-item {
+        width: 358px;
+      }
+
+      .ant-input-number {
+        width: 358px;
+      }
+    }
+
+    .formRowSelec {
+      input {
+        width: 298px;
+      }
+
+    }
   }
+
+  .formRowThree {
+
+    .formRowThreeRow {
+      margin-left: -120px;
+    }
+
+    .ant-form-item {
+
+      width: 25.5%;
+
+      input {
+        width: 200px;
+      }
+
+      .ant-input-number {
+        width: 200px;
+      }
+    }
+  }
+
+  .formRowFull {
+    .ant-form-item {
+      width: 100%;
+
+      input {
+        width: 850px;
+      }
+
+      .ant-select-in-form-item {
+        width: 858px;
+      }
+
+    }
+  }
+
 }

src/components/ObjectAdd/index.tsx

@@ -1,8 +1,20 @@
-import { Button, Form, Input, message, Modal } from "antd";
-import React, { useState } from "react";
+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;
@@ -16,12 +28,65 @@ function ObjectAdd({ id, colsePage }: Props) {
   };
   // 通过校验之后发送请求
   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
@@ -54,21 +119,195 @@ function ObjectAdd({ id, colsePage }: Props) {
 
         <Form
           name="basic"
-          labelCol={{ span: 5 }}
-          wrapperCol={{ span: 16 }}
           onFinish={onFinish}
           onFinishFailed={onFinishFailed}
           autoComplete="off"
+          initialValues={defaultData.current}
         >
-          <Form.Item
-            label="旧密码"
-            name="oldPassword"
-            rules={[{ required: true, message: "不能为空!" }]}
-          >
-            <Input maxLength={15} />
-          </Form.Item>
+          <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>
 
-          <Form.Item wrapperCol={{ offset: 14, span: 16 }}>
+          <br />
+          <Form.Item wrapperCol={{ offset: 20 }}>
             <Button onClick={colsePage}>取消</Button>
             &emsp;
             <Button type="primary" htmlType="submit">

src/pages/Layout/index.tsx

@@ -10,7 +10,8 @@ import SpinLoding from "@/components/SpinLoding";
 import AuthRoute from "@/components/AuthRoute";
 import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
-import { passWordEditAPI } from "@/store/action/login";
+import { getSelectAllAPI, passWordEditAPI } from "@/store/action/login";
+import { useDispatch } from "react-redux";
 
 const NotFound = React.lazy(() => import("../../components/NotFound"));
 
@@ -96,6 +97,13 @@ export default function Layout() {
     removeTokenInfo();
     history.push("/login");
   };
+
+  const dispatch = useDispatch();
+  // 进来获取所有的下拉列表信息
+  useEffect(() => {
+    dispatch(getSelectAllAPI());
+  }, [dispatch]);
+
   return (
     <div className={styles.Layout}>
       <div className="topTitle">

src/pages/Object/index.tsx

@@ -17,25 +17,25 @@ export default function Object() {
       },
       {
         id: 2,
-        name: "入库管理",
+        name: "藏品总账",
         Com: React.lazy(() => import("../ObjectSon/Object2")),
         path: "/object/2",
       },
       {
         id: 3,
-        name: "出库管理",
+        name: "入库管理",
         Com: React.lazy(() => import("../ObjectSon/Object3")),
         path: "/object/3",
       },
       {
         id: 4,
-        name: "藏品总账",
+        name: "出库管理",
         Com: React.lazy(() => import("../ObjectSon/Object4")),
         path: "/object/4",
       },
       {
         id: 5,
-        name: "藏品盘核",
+        name: "藏品修改",
         Com: React.lazy(() => import("../ObjectSon/Object5")),
         path: "/object/5",
       },

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

@@ -1,15 +1,22 @@
 import AuthButton from "@/components/AuthButton";
 import BreadTit from "@/components/BreadTit";
 import history, { urlParameter } from "@/utils/history";
-import { Input, message, Select, Table, Popconfirm, Image } from "antd";
+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 imgErr from "@/assets/img/login/IMGerror.png";
 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>({});
@@ -21,7 +28,7 @@ function AddObject1() {
   const [addInfoTop, setAddInfoTop] = useState({
     num: "DJ20221212009",
     user: "admin",
-    laiyuan: "藏品来源",
+    laiyuan: options[0].name?options[0].name:'',
     txt: "",
   });
 
@@ -95,12 +102,6 @@ function AddObject1() {
         render: (item: any) => (
           <div className="tableImg">
             <ImageLazy width={120} height={70} src={item.img} />
-            {/* <Image
-              src={item.img}
-              width={120}
-              height={70}
-              placeholder={true}
-            /> */}
           </div>
         ),
       },
@@ -140,14 +141,14 @@ function AddObject1() {
   };
 
   // 点击提交
-  const submitFu = () => {
+  const submitFu = (val: number) => {
     if (results.length === 0)
       return message.warning("至少需要添加一条藏品信息!");
     // cancelFu()
   };
 
   // 点击添加或者编辑出来页面
-  const [addPage, setAddPage] = useState(false);
+  const [addPage, setAddPage] = useState(true);
 
   // 点击添加或者编辑
 
@@ -158,6 +159,8 @@ function AddObject1() {
     setAddPage(true);
   };
 
+
+
   return (
     <div className={styles.AddObject1}>
       <div className="breadTit">
@@ -191,10 +194,10 @@ function AddObject1() {
                 style={{ width: 400 }}
                 value={addInfoTop.laiyuan}
                 onChange={handleChange}
-                options={[
-                  { value: "藏品来源", label: "藏品来源" },
-                  { value: "藏品来源1", label: "藏品来源1" },
-                ]}
+                options={options.map((v: any) => ({
+                  label: v.name,
+                  value: v.name,
+                }))}
               />
             </div>
           </div>
@@ -247,7 +250,9 @@ function AddObject1() {
             />
           </div>
           <div className="addTableBox_btn">
-            <AuthButton type="primary" onClick={submitFu}>
+            <AuthButton onClick={() => submitFu(1)}>存入草稿</AuthButton>
+            &emsp;
+            <AuthButton type="primary" onClick={() => submitFu(1)}>
               提交
             </AuthButton>
             &emsp;

src/pages/ObjectSon/Object1/index.tsx

@@ -6,6 +6,8 @@ import { Select, Input, DatePicker, Table } from "antd";
 import AuthButton from "@/components/AuthButton";
 import history from "@/utils/history";
 import { useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 const { RangePicker } = DatePicker;
 
@@ -13,8 +15,8 @@ export default function Object1() {
   const dataTit = useMemo(() => {
     return [
       { id: 1, name: "全部", num: 30 },
-      { id: 2, name: "待审核", num: 0 },
-      { id: 3, name: "代办理", num: 10 },
+      { id: 2, name: "代办理", num: 10 },
+      { id: 3, name: "待审核", num: 0 },
       { id: 4, name: "审核不通过", num: 15 },
       { id: 5, name: "已完成", num: 5 },
     ];
@@ -42,7 +44,7 @@ export default function Object1() {
   // 顶部筛选
   const [tableSelect, setTableSelect] = useState({
     state: 1,
-    laiyuan: "藏品来源",
+    laiyuan: null,
     name: "",
     staTime: "",
     endTime: "",
@@ -69,7 +71,7 @@ export default function Object1() {
   }, [tableSelect]);
 
   // 藏品来源下拉框筛选
-  const handleChange = (value: string) => {
+  const handleChange = (value: any) => {
     setTableSelect({ ...tableSelect, laiyuan: value, pageNum: 1 });
   };
 
@@ -159,6 +161,11 @@ export default function Object1() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // 从仓库中获取藏品来源下拉数据
+  const options = useSelector(
+    (state: RootState) => state.loginStore.selectAll["文物来源"]
+  );
+
   return (
     <div className={styles.Object1}>
       <div className="breadTit">
@@ -192,10 +199,10 @@ export default function Object1() {
                 style={{ width: 150 }}
                 value={tableSelect.laiyuan}
                 onChange={handleChange}
-                options={[
-                  { value: "藏品来源", label: "藏品来源" },
-                  { value: "藏品来源1", label: "藏品来源1" },
-                ]}
+                options={options.map((v: any) => ({
+                  label: v.name,
+                  value: v.name,
+                }))}
               />
             </div>
             <div className="row">

src/store/action/login.ts

@@ -1,20 +1,39 @@
 // import store, { AppDispatch } from ".."
 import http from "@/utils/http";
+import { AppDispatch } from "..";
 
 /**
  * 用户登录接口
  */
-export const userLoginAPI = (data:any) => {
+export const userLoginAPI = (data: any) => {
   return http.post("admin/login", { ...data });
 };
 
 /**
  * 修改密码接口
  */
-export const passWordEditAPI = (data:any) => {
+export const passWordEditAPI = (data: any) => {
   return http.post("sys/user/updatePwd", { ...data });
 };
 
+/**
+ * 获取所有下拉列表
+ */
+export const getSelectAllAPI = () => {
+  return async (dispatch: AppDispatch) => {
+    const res: any = await http.post("cms/dict/getTree", {});
+    const data:any =res.data
+    const obj ={} as any
+    data.forEach((v:any)=>{
+      obj[v.name]=v.children
+    })
+  
+    
+    // console.log(123, obj);
+    dispatch({type:'login/getSelectAll',payload:obj})
+  };
+};
+
 // export const addNunAction = () => {
 
 //   return async (dispatch: AppDispatch) => {

src/store/reducer/login.ts

@@ -1,22 +1,19 @@
-import { LoginType } from "@/types"
-
-
-
 // 初始化状态应用注解
-const initState: LoginType = {
-  num: 0,
-  active: 0,
-}
+const initState = {
+  selectAll: {} as any,
+};
 
-type LoginActionType =
-  { type: 'login/addNum', payload: number }
+type LoginActionType = { type: "login/getSelectAll"; payload: any };
 
 // 频道 reducer
-export default function loginReducer(state = initState, action: LoginActionType) {
+export default function loginReducer(
+  state = initState,
+  action: LoginActionType
+) {
   switch (action.type) {
-    case 'login/addNum':
-      return { ...state, num: action.payload }
+    case "login/getSelectAll":
+      return { ...state, selectAll: action.payload };
     default:
-      return state
+      return state;
   }
-}
+}

src/utils/http.ts

@@ -4,7 +4,7 @@ import { getTokenInfo, removeTokenInfo } from "./storage";
 import { message } from "antd";
 // 请求基地址
 export const baseURL =
-  process.env.NODE_ENV === "development" ? "" : "";
+  process.env.NODE_ENV === "development" ? "http://192.168.20.55:8038" : "";
 
 // 创建 axios 实例
 const http = axios.create({
@@ -52,14 +52,10 @@ http.interceptors.response.use(
     if (!err.response) {
       message.warning("网络繁忙，请稍后重试");
     }
-    // else {
-    //   // 网络没问题，后台返回了有数据
-
-    //   // token过期
-    //   if (err.response.status === 401) {
-    //     history.push("/Login");
-    //   }
-    // }
+    else {
+      message.warning("错误!");
+      lodingDom.style.display = "none";
+    }
 
     return Promise.reject(err);
   }